From 338f8664b730354d9e22608dbc685a6e0fada4cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Wed, 13 Apr 2022 16:19:10 +0200
Subject: [PATCH] vue components refactoring

---
 public/mix-manifest.json                      | 138 +++++------
 resources/js/App.vue                          |  10 +-
 .../js/components/Admin/WidgetWrapper.vue     |  30 ---
 .../{Admin => Dashboard}/AppSpecification.vue |   2 +-
 .../Widgets}/WidgetLatestRegistrations.vue    |   8 +-
 .../Widgets}/WidgetLatestTransactions.vue     |  10 +-
 .../js/components/Desktop/PopoverWrapper.vue  |  17 --
 .../js/components/Desktop/ToolbarGroup.vue    |  25 --
 .../js/components/Desktop/ToolbarWrapper.vue  |  21 --
 .../js/components/{Others => Emoji}/Emoji.vue |   0
 .../{Others => Emoji}/EmojiPicker.vue         |   2 +-
 .../EmptyFilePage.vue                         |   4 +-
 .../FileBrowser.vue                           |   0
 .../ItemHandler.vue                           |   4 +-
 .../EntriesView}/NavigationSharePanel.vue     |   8 +-
 .../EntriesView}/PanelNavigationFiles.vue     |   8 +-
 .../FilePreview/FilePreviewMedia.vue          |   6 +-
 .../FilePreview/FilePreviewToolbar.vue        |  10 +-
 .../Layouts}/AppInputButton.vue               |   0
 .../Layouts}/AppInputSwitch.vue               |   0
 .../{Admin => Forms/Layouts}/AppInputText.vue |   0
 .../components/{Setup => Forms}/MailSetup.vue |   6 +-
 .../{Setup => Forms}/StorageSetup.vue         |   6 +-
 .../FileIconThumbnail.vue                     |   0
 .../{FilesView => Icons}/FolderIcon.vue       |   4 +-
 .../Components/PageTitle.vue                  |   0
 .../Components/PricingTables.vue              |   0
 .../{Index => IndexPage}/IndexGetStarted.vue  |   0
 .../IndexHeroScreenshot.vue                   |   0
 .../IndexMainFeatures.vue                     |   0
 .../{Index => IndexPage}/IndexNavigation.vue  |   0
 .../{Index => IndexPage}/IndexPageFooter.vue  |   0
 .../{Index => IndexPage}/IndexPageHeader.vue  |   2 +-
 .../IndexPricingTables.vue                    |   2 +-
 .../{Others/Forms => Inputs}/AvatarInput.vue  |   0
 .../{FilesView => Inputs}/CheckBox.vue        |   0
 .../{Others/Forms => Inputs}/CopyInput.vue    |   0
 .../Forms => Inputs}/CopyShareLink.vue        |   2 +-
 .../{Others/Forms => Inputs}/ImageInput.vue   |   0
 .../Forms => Inputs}/MultiEmailInput.vue      |   2 +-
 .../{Others/Forms => Inputs}/SearchInput.vue  |   6 +-
 .../Forms => Inputs}/SelectBoxInput.vue       |   8 +-
 .../{Others/Forms => Inputs}/SelectInput.vue  |   4 +-
 .../{Others/Forms => Inputs}/SwitchInput.vue  |   4 +-
 .../AuthPages}/AuthContent.vue                |   2 +-
 .../AuthPages}/AuthContentWrapper.vue         |   2 +-
 resources/js/components/Layout/PageTab.vue    |  20 ++
 .../{Others => }/Layout/PageTabGroup.vue      |   6 +-
 .../Sidebars}/InfoSidebar.vue                 |  14 +-
 .../Sidebars}/InfoSidebarUploadRequest.vue    |   8 +-
 .../Toolbars}/DesktopSharepageToolbar.vue     |  24 +-
 .../Toolbars}/DesktopToolbar.vue              |  28 +--
 .../Toolbars}/DesktopUploadRequestToolbar.vue |  22 +-
 .../Toolbars}/MobileMultiSelectToolbar.vue    |   6 +-
 .../Toolbars}/MobileToolbar.vue               |   4 +-
 .../Toolbars}/MobileUploadRequestToolbar.vue  |   4 +-
 .../Toolbars}/NavigationBar.vue               |   2 +-
 .../Components}/Option.vue                    |   2 +-
 .../Components}/OptionGroup.vue               |   2 +-
 .../Components}/OptionUpload.vue              |   2 +-
 .../{FilesView => Menus}/ContextMenu.vue      |   0
 .../{FilesView => Menus}/FileFilterMobile.vue |   4 +-
 .../FileSortingMobile.vue                     |   2 +-
 .../FileSortingOptions.vue                    |   4 +-
 .../MobileContextMenu.vue                     |   8 +-
 .../{FilesView => Menus}/MobileCreateMenu.vue |   0
 .../MobileTeamContextMenu.vue                 |   2 +-
 .../FileActionsMobile.vue                     |   4 +-
 .../js/components/Mobile/MenuMobileGroup.vue  |   2 +-
 .../{Others => Mobile}/MobileNavigation.vue   |  10 +-
 .../{ => Components}/Notification.vue         |   4 +-
 .../Components}/NotificationBell.vue          |   0
 .../Notifications/NotificationCenter.vue      |   4 +-
 .../NotificationsPopup.vue                    |  14 +-
 .../js/components/Others/ColorPicker.vue      | 132 -----------
 .../js/components/Others/EmptyPageContent.vue |   2 +-
 .../js/components/Others/Forms/SetupBox.vue   | 142 -----------
 .../js/components/Others/Layout/PageTab.vue   |  25 --
 resources/js/components/Others/PageHeader.vue |  83 -------
 .../components/Others/PlanPricingTables.vue   | 220 ------------------
 resources/js/components/Others/TabOption.vue  |  20 --
 resources/js/components/Others/TabWrapper.vue | 124 ----------
 resources/js/components/Others/ThemeLabel.vue |  24 --
 .../{FilesView => Popups}/Alert.vue           |   4 +-
 .../Components}/PopupActions.vue              |   0
 .../Components}/PopupContent.vue              |   0
 .../Components}/PopupHeader.vue               |   0
 .../Components}/PopupWrapper.vue              |   0
 .../{Others/Popup => Popups}/ConfirmPopup.vue |   8 +-
 .../{Others => Popups}/CreateFolderPopup.vue  |  20 +-
 .../CreateLanguagePopup.vue}                  |  16 +-
 .../CreatePersonalTokenPopup.vue              |  16 +-
 .../{Others => Popups}/MoveItemPopup.vue      |  18 +-
 .../{FilesView => Popups}/ProcessingPopup.vue |   2 +-
 .../{Others => Popups}/RenameItemPopup.vue    |  20 +-
 .../{Others => Popups}/ShareCreatePopup.vue   |  30 +--
 .../{Others => Popups}/ShareEditPopup.vue     |  30 +--
 .../js/components/Sidebar/ContentGroup.vue    |   2 +-
 .../js/components/Sidebar/ContentSidebar.vue  |   2 +-
 .../components/Sidebar/SidebarNavigation.vue  |   4 +-
 .../{ => Components}/CategoryName.vue         |   2 +-
 .../{ => Components}/FilterSuggestion.vue     |   0
 .../{ => Components}/KeyboardHints.vue        |   0
 .../js/components/Spotlight/Spotlight.vue     |  12 +-
 .../Subscription/FixedTransactionRow.vue      |   4 +-
 .../Subscription/MeteredTransactionRow.vue    |   4 +-
 .../PaymentMethod.vue                         |   2 +-
 .../js/components/Subscription/PlanDetail.vue |   2 +-
 .../Subscription/PlanPeriodSwitcher.vue       |   2 +-
 .../{ => Popups}/ChangeSubscriptionPopup.vue  |  20 +-
 .../Popups}/ChargePaymentPopup.vue            |  18 +-
 .../{ => Popups}/SubscribeAccountPopup.vue    |  24 +-
 .../components/Subscription/UserBalance.vue   |   6 +-
 .../Subscription/UserBillingAlerts.vue        |   6 +-
 .../Subscription/UserEditSubscription.vue     |  10 +-
 .../Subscription/UserEmptySubscription.vue    |   6 +-
 .../Subscription/UserFailedPayments.vue       |   4 +-
 .../UserFixedSubscriptionDetail.vue           |   4 +-
 .../Subscription/UserStoredPaymentMethods.vue |   8 +-
 .../UserTransactionsForFixedBilling.vue       |   8 +-
 .../UserTransactionsForMeteredBilling.vue     |   8 +-
 .../UserUpdatePaymentMethodsExternally.vue    |   8 +-
 .../Subscription/UserUsageEstimates.vue       |   2 +-
 .../components/Teams/Components/TeamList.vue  |   2 +-
 .../Teams/Components/TeamMembersPreview.vue   |   2 +-
 .../Teams/CreateTeamFolderPopup.vue           |  16 +-
 .../components/Teams/EditTeamFolderPopup.vue  |  16 +-
 .../Notifications => Toaster}/Toaster.vue     |   0
 .../ToasterNotifications.vue                  |   4 +-
 .../ToasterWrapper.vue                        |   0
 .../ConfirmPassword.vue                       |  12 +-
 .../TwoFactorQrSetupPopup.vue                 |  14 +-
 .../TwoFactorRecoveryCodesPopup.vue           |  16 +-
 .../js/components/UI/{ => BarChart}/Bar.vue   |   0
 .../components/UI/{ => BarChart}/BarChart.vue |   0
 .../{Others => UI/Buttons}/ActionButton.vue   |   6 +-
 .../{Auth => UI/Buttons}/AuthButton.vue       |   0
 .../{FilesView => UI/Buttons}/ButtonBase.vue  |   6 +-
 .../Buttons}/ButtonUpload.vue                 |   6 +-
 .../Buttons}/MobileActionButton.vue           |   6 +-
 .../Buttons}/MobileActionButtonUpload.vue     |   8 +-
 .../Buttons/SearchBarButton.vue}              |   2 +-
 .../Buttons/SocialLoginButtons.vue}           |   6 +-
 .../Buttons}/ToolbarButton.vue                |   4 +-
 .../{FilesView => UI/Entries}/ItemGrid.vue    |  12 +-
 .../{FilesView => UI/Entries}/ItemList.vue    |  12 +-
 .../{Others => UI/Entries}/ThumbnailItem.vue  |   8 +-
 .../{Others => UI/Labels}/ColorLabel.vue      |   4 +-
 .../{Others/Forms => UI/Labels}/FormLabel.vue |   2 +-
 .../UI/Labels/LogoHeadline.vue}               |   0
 .../{Others => UI/Labels}/SectionTitle.vue    |   6 +-
 .../{Others => UI/Labels}/TextLabel.vue       |   6 +-
 .../{FilesView => UI/Labels}/TitlePreview.vue |   0
 .../{Others => UI/List}/ListInfo.vue          |   6 +-
 .../{Others => UI/List}/ListInfoItem.vue      |   0
 .../{Admin => UI/Others}/AlertBox.vue         |   0
 .../{Admin => UI/Others}/CardNavigation.vue   |   0
 .../{ => UI}/Others/CookieDisclaimer.vue      |   0
 .../{FilesView => UI/Others}/DragUI.vue       |   4 +-
 .../Others}/ImageMetaData.vue                 |   0
 .../{Others/Forms => UI/Others}/InfoBox.vue   |   2 +-
 .../{FilesView => UI/Others}/MemberAvatar.vue |   0
 .../{FilesView => UI/Others}/ProgressBar.vue  |   4 +-
 .../{FilesView => UI/Others}/Spinner.vue      |   4 +-
 .../Others}/UploadProgress.vue                |   6 +-
 .../{Sidebar => UI/Others}/UserHeadline.vue   |   6 +-
 .../components/{ => UI}/Others/Vignette.vue   |   6 +-
 .../{Desktop => UI/Popover}/PopoverItem.vue   |   4 +-
 .../components/UI/Popover/PopoverWrapper.vue  |  11 +
 .../{Admin => UI/ProgressChart}/DotLabel.vue  |   0
 .../ProgressChart}/ProgressLine.vue           |   0
 .../Tables => UI/Table}/DatatableCell.vue     |   0
 .../Table}/DatatableCellImage.vue             |   2 +-
 .../Tables => UI/Table}/DatatableWrapper.vue  |   2 +-
 .../{Others => UI/Trees}/TreeMenu.vue         |   2 +-
 .../Trees}/TreeMenuNavigator.vue              |   2 +-
 .../CreateUploadRequestPopup.vue              |  20 +-
 resources/js/routes/routesAdmin.js            |  16 +-
 resources/js/views/Admin.vue                  |  10 +-
 resources/js/views/Admin/Dashboard.vue        |  14 +-
 resources/js/views/Admin/Invoices.vue         |   6 +-
 .../js/views/Admin/Languages/Language.vue     |  20 +-
 resources/js/views/Admin/Pages.vue            |  17 +-
 resources/js/views/Admin/Pages/PageEdit.vue   |  18 +-
 .../Admin/PaymentSettings/PaymentSettings.vue |   2 +-
 .../PaymentSettingsTab/Billings.vue           |  18 +-
 .../PaymentSettingsTab/Payments.vue           |  28 ++-
 resources/js/views/Admin/Plans.vue            |  10 +-
 .../Admin/Plans/Create/CreateFixedPlan.vue    |  16 +-
 .../Admin/Plans/Create/CreateMeteredPlan.vue  |  20 +-
 resources/js/views/Admin/Plans/FixedPlan.vue  |   4 +-
 .../js/views/Admin/Plans/MeteredPlan.vue      |   6 +-
 .../js/views/Admin/Plans/Tabs/PlanDelete.vue  |   8 +-
 .../Admin/Plans/Tabs/PlanFixedSettings.vue    |  12 +-
 .../Admin/Plans/Tabs/PlanMeteredSettings.vue  |  12 +-
 .../Admin/Plans/Tabs/PlanSubscribers.vue      |  14 +-
 .../{AppSettings => Settings}/AppSettings.vue |   2 +-
 .../AppSettingsTabs/Adsense.vue               |  12 +-
 .../AppSettingsTabs/Appearance.vue            |  20 +-
 .../AppSettingsTabs/Environment.vue           |  14 +-
 .../AppSettingsTabs/Index.vue                 |  22 +-
 .../AppSettingsTabs/Others.vue                |  16 +-
 .../AppSettingsTabs/Server.vue                |   6 +-
 .../AppSettingsTabs/SignInUp.vue              |  14 +-
 resources/js/views/Admin/Subscriptions.vue    |   6 +-
 resources/js/views/Admin/Users.vue            |  20 +-
 resources/js/views/Admin/Users/User.vue       |  12 +-
 resources/js/views/Admin/Users/UserCreate.vue |  14 +-
 .../views/Admin/Users/UserTabs/UserDelete.vue |  14 +-
 .../views/Admin/Users/UserTabs/UserDetail.vue |  16 +-
 .../Users/UserTabs/UserFixedSubscription.vue  |   4 +-
 .../UserTabs/UserMeteredSubscription.vue      |   8 +-
 .../Admin/Users/UserTabs/UserPassword.vue     |  16 +-
 .../Admin/Users/UserTabs/UserStorage.vue      |  18 +-
 .../Admin/Users/UserTabs/UserSubscription.vue |   8 +-
 resources/js/views/Auth/CreateNewPassword.vue |   8 +-
 resources/js/views/Auth/ForgottenPassword.vue |   8 +-
 resources/js/views/Auth/SignIn.vue            |  16 +-
 resources/js/views/Auth/SignUp.vue            |  14 +-
 .../views/Auth/SuccessfullyEmailVerified.vue  |   8 +-
 .../js/views/Auth/SuccessfullySendEmail.vue   |   8 +-
 resources/js/views/FileView/Files.vue         |  28 +--
 resources/js/views/FileView/MySharedItems.vue |  22 +-
 resources/js/views/FileView/Public.vue        |  26 +--
 resources/js/views/FileView/RecentUploads.vue |  24 +-
 resources/js/views/FileView/SharedWithMe.vue  |  32 +--
 resources/js/views/FileView/TeamFolders.vue   |  32 +--
 resources/js/views/FileView/Trash.vue         |  22 +-
 .../js/views/FileView/UploadRequestFiles.vue  |  30 +--
 resources/js/views/Frontpage/ContactUs.vue    |  10 +-
 resources/js/views/Frontpage/DynamicPage.vue  |   6 +-
 resources/js/views/Frontpage/Homepage.vue     |  24 +-
 resources/js/views/NotFound.vue               |   8 +-
 resources/js/views/Platform.vue               |  34 +--
 resources/js/views/Profile.vue                |  30 +--
 .../js/views/SetupWizard/AdminAccount.vue     |  20 +-
 resources/js/views/SetupWizard/AppSetup.vue   |  22 +-
 resources/js/views/SetupWizard/Database.vue   |  16 +-
 .../js/views/SetupWizard/EnvironmentSetup.vue |  20 +-
 .../js/views/SetupWizard/PurchaseCode.vue     |  10 +-
 .../js/views/SetupWizard/StatusCheck.vue      |  14 +-
 resources/js/views/Shared.vue                 |  28 +--
 resources/js/views/SharedAuthentication.vue   |   8 +-
 resources/js/views/SharedSingleFile.vue       |   4 +-
 resources/js/views/Teams/Invitation.vue       |  12 +-
 resources/js/views/TemporaryUnavailable.vue   |   6 +-
 resources/js/views/UploadRequest.vue          |  22 +-
 resources/js/views/User/Billing.vue           |   2 +-
 resources/js/views/User/Password.vue          |  14 +-
 resources/js/views/User/Settings.vue          |   6 +-
 resources/js/views/User/Storage.vue           |   8 +-
 251 files changed, 1068 insertions(+), 1943 deletions(-)
 delete mode 100644 resources/js/components/Admin/WidgetWrapper.vue
 rename resources/js/components/{Admin => Dashboard}/AppSpecification.vue (98%)
 rename resources/js/components/{Admin => Dashboard/Widgets}/WidgetLatestRegistrations.vue (98%)
 rename resources/js/components/{Admin => Dashboard/Widgets}/WidgetLatestTransactions.vue (94%)
 delete mode 100644 resources/js/components/Desktop/PopoverWrapper.vue
 delete mode 100644 resources/js/components/Desktop/ToolbarGroup.vue
 delete mode 100644 resources/js/components/Desktop/ToolbarWrapper.vue
 rename resources/js/components/{Others => Emoji}/Emoji.vue (100%)
 rename resources/js/components/{Others => Emoji}/EmojiPicker.vue (99%)
 rename resources/js/components/{FilesView => EntriesView}/EmptyFilePage.vue (95%)
 rename resources/js/components/{FilesView => EntriesView}/FileBrowser.vue (100%)
 rename resources/js/components/{FilesView => EntriesView}/ItemHandler.vue (99%)
 rename resources/js/{views/FileView/Components => components/EntriesView}/NavigationSharePanel.vue (94%)
 rename resources/js/{views/FileView/Components => components/EntriesView}/PanelNavigationFiles.vue (97%)
 rename resources/js/components/{Admin => Forms/Layouts}/AppInputButton.vue (100%)
 rename resources/js/components/{Admin => Forms/Layouts}/AppInputSwitch.vue (100%)
 rename resources/js/components/{Admin => Forms/Layouts}/AppInputText.vue (100%)
 rename resources/js/components/{Setup => Forms}/MailSetup.vue (98%)
 rename resources/js/components/{Setup => Forms}/StorageSetup.vue (98%)
 rename resources/js/components/{FilesView => Icons}/FileIconThumbnail.vue (100%)
 rename resources/js/components/{FilesView => Icons}/FolderIcon.vue (77%)
 rename resources/js/components/{Index => IndexPage}/Components/PageTitle.vue (100%)
 rename resources/js/components/{Index => IndexPage}/Components/PricingTables.vue (100%)
 rename resources/js/components/{Index => IndexPage}/IndexGetStarted.vue (100%)
 rename resources/js/components/{Index => IndexPage}/IndexHeroScreenshot.vue (100%)
 rename resources/js/components/{Index => IndexPage}/IndexMainFeatures.vue (100%)
 rename resources/js/components/{Index => IndexPage}/IndexNavigation.vue (100%)
 rename resources/js/components/{Index => IndexPage}/IndexPageFooter.vue (100%)
 rename resources/js/components/{Index => IndexPage}/IndexPageHeader.vue (98%)
 rename resources/js/components/{Index => IndexPage}/IndexPricingTables.vue (98%)
 rename resources/js/components/{Others/Forms => Inputs}/AvatarInput.vue (100%)
 rename resources/js/components/{FilesView => Inputs}/CheckBox.vue (100%)
 rename resources/js/components/{Others/Forms => Inputs}/CopyInput.vue (100%)
 rename resources/js/components/{Others/Forms => Inputs}/CopyShareLink.vue (99%)
 rename resources/js/components/{Others/Forms => Inputs}/ImageInput.vue (100%)
 rename resources/js/components/{Others/Forms => Inputs}/MultiEmailInput.vue (98%)
 rename resources/js/components/{Others/Forms => Inputs}/SearchInput.vue (93%)
 rename resources/js/components/{Others/Forms => Inputs}/SelectBoxInput.vue (89%)
 rename resources/js/components/{Others/Forms => Inputs}/SelectInput.vue (98%)
 rename resources/js/components/{Others/Forms => Inputs}/SwitchInput.vue (94%)
 rename resources/js/components/{Auth => Layout/AuthPages}/AuthContent.vue (93%)
 rename resources/js/components/{Auth => Layout/AuthPages}/AuthContentWrapper.vue (88%)
 create mode 100644 resources/js/components/Layout/PageTab.vue
 rename resources/js/components/{Others => }/Layout/PageTabGroup.vue (63%)
 rename resources/js/components/{FilesView => Layout/Sidebars}/InfoSidebar.vue (92%)
 rename resources/js/components/{FilesView => Layout/Sidebars}/InfoSidebarUploadRequest.vue (95%)
 rename resources/js/components/{FilesView => Layout/Toolbars}/DesktopSharepageToolbar.vue (86%)
 rename resources/js/components/{FilesView => Layout/Toolbars}/DesktopToolbar.vue (92%)
 rename resources/js/components/{FilesView => Layout/Toolbars}/DesktopUploadRequestToolbar.vue (89%)
 rename resources/js/components/{FilesView => Layout/Toolbars}/MobileMultiSelectToolbar.vue (92%)
 rename resources/js/components/{FilesView => Layout/Toolbars}/MobileToolbar.vue (89%)
 rename resources/js/components/{FilesView => Layout/Toolbars}/MobileUploadRequestToolbar.vue (82%)
 rename resources/js/components/{FilesView => Layout/Toolbars}/NavigationBar.vue (98%)
 rename resources/js/components/{FilesView => Menus/Components}/Option.vue (99%)
 rename resources/js/components/{FilesView => Menus/Components}/OptionGroup.vue (92%)
 rename resources/js/components/{FilesView => Menus/Components}/OptionUpload.vue (96%)
 rename resources/js/components/{FilesView => Menus}/ContextMenu.vue (100%)
 rename resources/js/components/{FilesView => Menus}/FileFilterMobile.vue (96%)
 rename resources/js/components/{FilesView => Menus}/FileSortingMobile.vue (93%)
 rename resources/js/components/{FilesView => Menus}/FileSortingOptions.vue (97%)
 rename resources/js/components/{FilesView => Menus}/MobileContextMenu.vue (83%)
 rename resources/js/components/{FilesView => Menus}/MobileCreateMenu.vue (100%)
 rename resources/js/components/{FilesView => Menus}/MobileTeamContextMenu.vue (95%)
 rename resources/js/components/{FilesView => Mobile}/FileActionsMobile.vue (93%)
 rename resources/js/components/{Others => Mobile}/MobileNavigation.vue (96%)
 rename resources/js/components/Notifications/{ => Components}/Notification.vue (98%)
 rename resources/js/components/{Sidebar => Notifications/Components}/NotificationBell.vue (100%)
 rename resources/js/components/{Others => Notifications}/NotificationsPopup.vue (86%)
 delete mode 100644 resources/js/components/Others/ColorPicker.vue
 delete mode 100644 resources/js/components/Others/Forms/SetupBox.vue
 delete mode 100644 resources/js/components/Others/Layout/PageTab.vue
 delete mode 100644 resources/js/components/Others/PageHeader.vue
 delete mode 100644 resources/js/components/Others/PlanPricingTables.vue
 delete mode 100644 resources/js/components/Others/TabOption.vue
 delete mode 100644 resources/js/components/Others/TabWrapper.vue
 delete mode 100644 resources/js/components/Others/ThemeLabel.vue
 rename resources/js/components/{FilesView => Popups}/Alert.vue (96%)
 rename resources/js/components/{Others/Popup => Popups/Components}/PopupActions.vue (100%)
 rename resources/js/components/{Others/Popup => Popups/Components}/PopupContent.vue (100%)
 rename resources/js/components/{Others/Popup => Popups/Components}/PopupHeader.vue (100%)
 rename resources/js/components/{Others/Popup => Popups/Components}/PopupWrapper.vue (100%)
 rename resources/js/components/{Others/Popup => Popups}/ConfirmPopup.vue (91%)
 rename resources/js/components/{Others => Popups}/CreateFolderPopup.vue (86%)
 rename resources/js/components/{Others/CreateLanguage.vue => Popups/CreateLanguagePopup.vue} (98%)
 rename resources/js/components/{Others => Popups}/CreatePersonalTokenPopup.vue (90%)
 rename resources/js/components/{Others => Popups}/MoveItemPopup.vue (91%)
 rename resources/js/components/{FilesView => Popups}/ProcessingPopup.vue (98%)
 rename resources/js/components/{Others => Popups}/RenameItemPopup.vue (91%)
 rename resources/js/components/{Others => Popups}/ShareCreatePopup.vue (92%)
 rename resources/js/components/{Others => Popups}/ShareEditPopup.vue (94%)
 rename resources/js/components/Spotlight/{ => Components}/CategoryName.vue (86%)
 rename resources/js/components/Spotlight/{ => Components}/FilterSuggestion.vue (100%)
 rename resources/js/components/Spotlight/{ => Components}/KeyboardHints.vue (100%)
 rename resources/js/components/{Others => Subscription}/PaymentMethod.vue (95%)
 rename resources/js/components/Subscription/{ => Popups}/ChangeSubscriptionPopup.vue (90%)
 rename resources/js/components/{Others => Subscription/Popups}/ChargePaymentPopup.vue (91%)
 rename resources/js/components/Subscription/{ => Popups}/SubscribeAccountPopup.vue (94%)
 rename resources/js/components/{Others/Notifications => Toaster}/Toaster.vue (100%)
 rename resources/js/components/{Others/Notifications => Toaster}/ToasterNotifications.vue (94%)
 rename resources/js/components/{Others/Notifications => Toaster}/ToasterWrapper.vue (100%)
 rename resources/js/components/{Others => TwoFactorSetup}/ConfirmPassword.vue (90%)
 rename resources/js/components/{Others => TwoFactorSetup}/TwoFactorQrSetupPopup.vue (89%)
 rename resources/js/components/{Others => TwoFactorSetup}/TwoFactorRecoveryCodesPopup.vue (91%)
 rename resources/js/components/UI/{ => BarChart}/Bar.vue (100%)
 rename resources/js/components/UI/{ => BarChart}/BarChart.vue (100%)
 rename resources/js/components/{Others => UI/Buttons}/ActionButton.vue (87%)
 rename resources/js/components/{Auth => UI/Buttons}/AuthButton.vue (100%)
 rename resources/js/components/{FilesView => UI/Buttons}/ButtonBase.vue (93%)
 rename resources/js/components/{FilesView => UI/Buttons}/ButtonUpload.vue (88%)
 rename resources/js/components/{FilesView => UI/Buttons}/MobileActionButton.vue (96%)
 rename resources/js/components/{FilesView => UI/Buttons}/MobileActionButtonUpload.vue (89%)
 rename resources/js/components/{FilesView/SearchBar.vue => UI/Buttons/SearchBarButton.vue} (97%)
 rename resources/js/components/{Auth/SocialiteAuthenticationButtons.vue => UI/Buttons/SocialLoginButtons.vue} (89%)
 rename resources/js/components/{FilesView => UI/Buttons}/ToolbarButton.vue (96%)
 rename resources/js/components/{FilesView => UI/Entries}/ItemGrid.vue (97%)
 rename resources/js/components/{FilesView => UI/Entries}/ItemList.vue (96%)
 rename resources/js/components/{Others => UI/Entries}/ThumbnailItem.vue (95%)
 rename resources/js/components/{Others => UI/Labels}/ColorLabel.vue (89%)
 rename resources/js/components/{Others/Forms => UI/Labels}/FormLabel.vue (99%)
 rename resources/js/{views/Auth/Headline.vue => components/UI/Labels/LogoHeadline.vue} (100%)
 rename resources/js/components/{Others => UI/Labels}/SectionTitle.vue (76%)
 rename resources/js/components/{Others => UI/Labels}/TextLabel.vue (79%)
 rename resources/js/components/{FilesView => UI/Labels}/TitlePreview.vue (100%)
 rename resources/js/components/{Others => UI/List}/ListInfo.vue (56%)
 rename resources/js/components/{Others => UI/List}/ListInfoItem.vue (100%)
 rename resources/js/components/{Admin => UI/Others}/AlertBox.vue (100%)
 rename resources/js/components/{Admin => UI/Others}/CardNavigation.vue (100%)
 rename resources/js/components/{ => UI}/Others/CookieDisclaimer.vue (100%)
 rename resources/js/components/{FilesView => UI/Others}/DragUI.vue (96%)
 rename resources/js/components/{FilesView => UI/Others}/ImageMetaData.vue (100%)
 rename resources/js/components/{Others/Forms => UI/Others}/InfoBox.vue (98%)
 rename resources/js/components/{FilesView => UI/Others}/MemberAvatar.vue (100%)
 rename resources/js/components/{FilesView => UI/Others}/ProgressBar.vue (87%)
 rename resources/js/components/{FilesView => UI/Others}/Spinner.vue (89%)
 rename resources/js/components/{FilesView => UI/Others}/UploadProgress.vue (95%)
 rename resources/js/components/{Sidebar => UI/Others}/UserHeadline.vue (86%)
 rename resources/js/components/{ => UI}/Others/Vignette.vue (92%)
 rename resources/js/components/{Desktop => UI/Popover}/PopoverItem.vue (94%)
 create mode 100644 resources/js/components/UI/Popover/PopoverWrapper.vue
 rename resources/js/components/{Admin => UI/ProgressChart}/DotLabel.vue (100%)
 rename resources/js/components/{Admin => UI/ProgressChart}/ProgressLine.vue (100%)
 rename resources/js/components/{Others/Tables => UI/Table}/DatatableCell.vue (100%)
 rename resources/js/components/{Others/Tables => UI/Table}/DatatableCellImage.vue (96%)
 rename resources/js/components/{Others/Tables => UI/Table}/DatatableWrapper.vue (99%)
 rename resources/js/components/{Others => UI/Trees}/TreeMenu.vue (99%)
 rename resources/js/components/{Others => UI/Trees}/TreeMenuNavigator.vue (99%)
 rename resources/js/components/{Others => UploadRequest}/CreateUploadRequestPopup.vue (90%)
 rename resources/js/views/Admin/{AppSettings => Settings}/AppSettings.vue (95%)
 rename resources/js/views/Admin/{AppSettings => Settings}/AppSettingsTabs/Adsense.vue (90%)
 rename resources/js/views/Admin/{AppSettings => Settings}/AppSettingsTabs/Appearance.vue (89%)
 rename resources/js/views/Admin/{AppSettings => Settings}/AppSettingsTabs/Environment.vue (96%)
 rename resources/js/views/Admin/{AppSettings => Settings}/AppSettingsTabs/Index.vue (97%)
 rename resources/js/views/Admin/{AppSettings => Settings}/AppSettingsTabs/Others.vue (96%)
 rename resources/js/views/Admin/{AppSettings => Settings}/AppSettingsTabs/Server.vue (98%)
 rename resources/js/views/Admin/{AppSettings => Settings}/AppSettingsTabs/SignInUp.vue (97%)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 0a34370d..cd4eb9dd 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,75 +1,75 @@
 {
     "/js/main.js": "/js/main.js",
-    "/chunks/request.js": "/chunks/request.js?id=faab026c7f8e266c",
-    "/chunks/request-upload.js": "/chunks/request-upload.js?id=aa9e376ed29686ee",
+    "/chunks/request.js": "/chunks/request.js?id=388b9e59eeb719e5",
+    "/chunks/request-upload.js": "/chunks/request-upload.js?id=501663f9e43072f8",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=19a0784e59d768ec",
-    "/chunks/status-check.js": "/chunks/status-check.js?id=f82f9939c1326fe2",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=df5bd89528649783",
-    "/chunks/database.js": "/chunks/database.js?id=15cc488117dccf7b",
-    "/chunks/environment.js": "/chunks/environment.js?id=6ad94421572d1bf4",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=15938ff1ad2d6ed2",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=916450217130f3b8",
-    "/chunks/shared.js": "/chunks/shared.js?id=ec06bf0d3ada0f65",
-    "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=11b8eb58eaf3608a",
-    "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=b6445167f46a0480",
-    "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=672e931a9fb0b672",
-    "/chunks/not-found.js": "/chunks/not-found.js?id=9f6ce23ce5d969f1",
-    "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=f564565faa09d6d6",
-    "/chunks/admin.js": "/chunks/admin.js?id=3f9153ced94aa636",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=28169f03aee0e3a0",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=a4785aea6257404e",
-    "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=51b6098a72f1fcdb",
-    "/chunks/pages.js": "/chunks/pages.js?id=4529e647b15e5c98",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=fb3f9eda3dc1d15c",
-    "/chunks/plans.js": "/chunks/plans.js?id=64803e40b7a125e5",
-    "/chunks/users.js": "/chunks/users.js?id=8bc57edd89c4ca11",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=8dd9d29f024132f5",
-    "/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=c994595021a98ce6",
-    "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=d9f1bcb1fe44a6ae",
-    "/chunks/user.js": "/chunks/user.js?id=c191b906a0496fe5",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=d53bfd58090b79e2",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=a8e0bce4703232a0",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=3ef8231d279d83bb",
-    "/chunks/user-password.js": "/chunks/user-password.js?id=23d3aee39f539a3c",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=6bea6f8cadf4d74f",
-    "/chunks/plan.js": "/chunks/plan.js?id=4b267375ea9f19b3",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=fea2f8eaae2f3334",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=715ee86991d5e4db",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=1ad77372d342326f",
-    "/chunks/payments.js": "/chunks/payments.js?id=dc4586691c25de6f",
-    "/chunks/payments/billings.js": "/chunks/payments/billings.js?id=dd6c9d6a29a47808",
-    "/chunks/payments/settings.js": "/chunks/payments/settings.js?id=022ba98937be861c",
-    "/chunks/app-settings.js": "/chunks/app-settings.js?id=55da23af2b076069",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=a694a01f3641712c",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=efdbfa062749ca00",
-    "/chunks/app-environment.js": "/chunks/app-environment.js?id=d9fc887db8c48c55",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=7c24086983398158",
-    "/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=1cfffc99465b9a7a",
-    "/chunks/app-adsense.js": "/chunks/app-adsense.js?id=a5dc9e715f8561bd",
-    "/chunks/app-server.js": "/chunks/app-server.js?id=3a41e04bde0d3536",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=6f8d8b8e3541ca0c",
-    "/chunks/homepage.js": "/chunks/homepage.js?id=832072b46053df76",
-    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=2504793131107b1f",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=9adc7e145be4e160",
-    "/chunks/successfully-email-verified.js": "/chunks/successfully-email-verified.js?id=25b805ade5230382",
-    "/chunks/successfully-email-send.js": "/chunks/successfully-email-send.js?id=f4562229776d9f56",
-    "/chunks/sign-in.js": "/chunks/sign-in.js?id=d064f84d1c4bf908",
-    "/chunks/sign-up.js": "/chunks/sign-up.js?id=1b2d9edfb2723d1b",
-    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=50a1bc5e4ed86ec9",
-    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=f652de052dba55c1",
-    "/chunks/settings.js": "/chunks/settings.js?id=690a8653abdace7e",
-    "/chunks/profile.js": "/chunks/profile.js?id=0eca231475e267ab",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=3755d41eaf50a5b1",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=994b669a56fd417b",
-    "/chunks/billing.js": "/chunks/billing.js?id=a983c29d1a4f87ba",
-    "/chunks/platform.js": "/chunks/platform.js?id=9b86daee18ab692c",
-    "/chunks/files.js": "/chunks/files.js?id=b0ad99a9aedbc2d8",
-    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=70457fa45709a1ba",
-    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=6dab4621467b1be7",
-    "/chunks/trash.js": "/chunks/trash.js?id=d2c999817715fa28",
-    "/chunks/team-folders.js": "/chunks/team-folders.js?id=3ecbc23e85b78144",
-    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=93a10fd7afed9534",
-    "/chunks/invitation.js": "/chunks/invitation.js?id=d5c845919b343941",
+    "/chunks/status-check.js": "/chunks/status-check.js?id=f40938d1fb43820f",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=ba76b9a8adbfdc0b",
+    "/chunks/database.js": "/chunks/database.js?id=5113b0d4284f764f",
+    "/chunks/environment.js": "/chunks/environment.js?id=8728f6fab2becf79",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=cbe7bfed06400736",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=78d257775f5fc485",
+    "/chunks/shared.js": "/chunks/shared.js?id=a25f225ef2d9824c",
+    "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=b8c1f7904c027f05",
+    "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=a6063bed9be75a09",
+    "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=b5519d193bce2339",
+    "/chunks/not-found.js": "/chunks/not-found.js?id=d31bd699138cf828",
+    "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=26798085f527d955",
+    "/chunks/admin.js": "/chunks/admin.js?id=915956155957c4f7",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=5ab55a12214433c8",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=799928609f57ca10",
+    "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=a0c4f59d0ec4aee0",
+    "/chunks/pages.js": "/chunks/pages.js?id=bb5cc8327ca846a3",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=0bdc8a5935fd2197",
+    "/chunks/plans.js": "/chunks/plans.js?id=1d04fbdca84afd42",
+    "/chunks/users.js": "/chunks/users.js?id=b6629338e26b8313",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=40254ae98547761e",
+    "/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=18f9d1ab17996507",
+    "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=40e9f287b5258a40",
+    "/chunks/user.js": "/chunks/user.js?id=cf9a2a0d8c1fa1d9",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=ff6c1fc63a372d96",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=4f76194837113969",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=797d77ff2b1c08cc",
+    "/chunks/user-password.js": "/chunks/user-password.js?id=900ae71c3d4199ea",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=a3091617207684e5",
+    "/chunks/plan.js": "/chunks/plan.js?id=3e7b0b34c2247e6c",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=36d925def6a82cb2",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=df990f928a77c355",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=630deb1fc4e17ed9",
+    "/chunks/payments.js": "/chunks/payments.js?id=d59a2a18b680d65c",
+    "/chunks/payments/billings.js": "/chunks/payments/billings.js?id=27d6c1b58dbd1e6c",
+    "/chunks/payments/settings.js": "/chunks/payments/settings.js?id=450162f937b7b2fd",
+    "/chunks/app-settings.js": "/chunks/app-settings.js?id=b0d1082fdcbbd17c",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=8ba3feb2cc81a2c3",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=0c50096e8de09288",
+    "/chunks/app-environment.js": "/chunks/app-environment.js?id=aa2f94fe3a554166",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=dd23507db4551d0a",
+    "/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=f79027ce1f1f4c4b",
+    "/chunks/app-adsense.js": "/chunks/app-adsense.js?id=c7e7dc2975317062",
+    "/chunks/app-server.js": "/chunks/app-server.js?id=ff66d34e90ff98a0",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=46d7fc713d36cea8",
+    "/chunks/homepage.js": "/chunks/homepage.js?id=0dabc3156ab1336c",
+    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=9553d7a2912cb901",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=ea99d85aa3500595",
+    "/chunks/successfully-email-verified.js": "/chunks/successfully-email-verified.js?id=c26cb144101e7c79",
+    "/chunks/successfully-email-send.js": "/chunks/successfully-email-send.js?id=170d814982e1c475",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=5f7111f8ee7639bf",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=80da89f329c514fc",
+    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=27cda9364b6593d8",
+    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=2f0401ee2fc148c4",
+    "/chunks/settings.js": "/chunks/settings.js?id=f41a6b2dbce5b05d",
+    "/chunks/profile.js": "/chunks/profile.js?id=3e24bb5e1f52d4bb",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=d00bf503d8126dc4",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=092e324aad54656b",
+    "/chunks/billing.js": "/chunks/billing.js?id=115c25478cee576d",
+    "/chunks/platform.js": "/chunks/platform.js?id=90be0534e0d399f8",
+    "/chunks/files.js": "/chunks/files.js?id=59bd6469922431e4",
+    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=f7f85cc9ce14c054",
+    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=5afd3b2bcc62f265",
+    "/chunks/trash.js": "/chunks/trash.js?id=4ad4825cf154937b",
+    "/chunks/team-folders.js": "/chunks/team-folders.js?id=8d851b9dce2f819d",
+    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=49838b3807bb7797",
+    "/chunks/invitation.js": "/chunks/invitation.js?id=424b2783d9785a09",
     "/css/tailwind.css": "/css/tailwind.css",
     "/css/app.css": "/css/app.css"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index b24529b5..ffaba7cf 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script>
-import ToasterWrapper from './components/Others/Notifications/ToasterNotifications'
+import ToasterWrapper from './components/Toaster/ToasterNotifications'
 import RestrictionWarningBar from './components/Subscription/RestrictionWarningBar'
 import SidebarNavigation from "./components/Sidebar/SidebarNavigation"
-import CookieDisclaimer from './components/Others/CookieDisclaimer'
-import Spinner from './components/FilesView/Spinner'
-import Vignette from './components/Others/Vignette'
-import Alert from './components/FilesView/Alert'
+import CookieDisclaimer from './components/UI/Others/CookieDisclaimer'
+import Spinner from './components/UI/Others/Spinner'
+import Vignette from './components/UI/Others/Vignette'
+import Alert from './components/Popups/Alert'
 import { mapGetters } from 'vuex'
 import { events } from './bus'
 
diff --git a/resources/js/components/Admin/WidgetWrapper.vue b/resources/js/components/Admin/WidgetWrapper.vue
deleted file mode 100644
index 1a4263c6..00000000
--- a/resources/js/components/Admin/WidgetWrapper.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <div class="widget-card w-full">
-        <div class="widget-content bg-white dark:bg-dark-foreground">
-            <div class="flex items-center">
-                <users-icon v-if="icon === 'users'" size="16" class="vue-feather text-theme mr-3" />
-                <star-icon v-if="icon === 'star'" size="16" class="vue-feather text-theme mr-3" />
-                <hard-drive-icon v-if="icon === 'hard-drive'" size="16" class="vue-feather text-theme mr-3" />
-                <b class="text-base font-bold">
-                    {{ title }}
-                </b>
-            </div>
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-import { UsersIcon, StarIcon, HardDriveIcon, ChevronRightIcon } from 'vue-feather-icons'
-
-export default {
-    name: 'WidgetWrapper',
-    props: ['icon', 'title'],
-    components: {
-        ChevronRightIcon,
-        HardDriveIcon,
-        StarIcon,
-        UsersIcon,
-    },
-}
-</script>
diff --git a/resources/js/components/Admin/AppSpecification.vue b/resources/js/components/Dashboard/AppSpecification.vue
similarity index 98%
rename from resources/js/components/Admin/AppSpecification.vue
rename to resources/js/components/Dashboard/AppSpecification.vue
index 8b7fc63d..c0a2bc6e 100644
--- a/resources/js/components/Admin/AppSpecification.vue
+++ b/resources/js/components/Dashboard/AppSpecification.vue
@@ -56,7 +56,7 @@
 </template>
 <script>
 import {ThumbsUpIcon} from 'vue-feather-icons'
-import ColorLabel from '../Others/ColorLabel'
+import ColorLabel from '../UI/Labels/ColorLabel'
 import {mapGetters} from "vuex";
 
 export default {
diff --git a/resources/js/components/Admin/WidgetLatestRegistrations.vue b/resources/js/components/Dashboard/Widgets/WidgetLatestRegistrations.vue
similarity index 98%
rename from resources/js/components/Admin/WidgetLatestRegistrations.vue
rename to resources/js/components/Dashboard/Widgets/WidgetLatestRegistrations.vue
index e7a2d735..33338e21 100644
--- a/resources/js/components/Admin/WidgetLatestRegistrations.vue
+++ b/resources/js/components/Dashboard/Widgets/WidgetLatestRegistrations.vue
@@ -236,11 +236,11 @@
 </template>
 
 <script>
-import DatatableCellImage from '../Others/Tables/DatatableCellImage'
-import DatatableWrapper from '../Others/Tables/DatatableWrapper'
-import ColorLabel from '../Others/ColorLabel'
+import DatatableCellImage from '../../UI/Table/DatatableCellImage'
+import DatatableWrapper from '../../UI/Table/DatatableWrapper'
+import ColorLabel from '../../UI/Labels/ColorLabel'
 import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
-import MemberAvatar from '../FilesView/MemberAvatar'
+import MemberAvatar from '../../UI/Others/MemberAvatar'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Admin/WidgetLatestTransactions.vue b/resources/js/components/Dashboard/Widgets/WidgetLatestTransactions.vue
similarity index 94%
rename from resources/js/components/Admin/WidgetLatestTransactions.vue
rename to resources/js/components/Dashboard/Widgets/WidgetLatestTransactions.vue
index 7b9ea469..3bf4838f 100644
--- a/resources/js/components/Admin/WidgetLatestTransactions.vue
+++ b/resources/js/components/Dashboard/Widgets/WidgetLatestTransactions.vue
@@ -72,12 +72,12 @@
 </template>
 
 <script>
-import DatatableCellImage from '../Others/Tables/DatatableCellImage'
-import DatatableWrapper from '../Others/Tables/DatatableWrapper'
-import ColorLabel from '../Others/ColorLabel'
+import DatatableCellImage from '../../UI/Table/DatatableCellImage'
+import DatatableWrapper from '../../UI/Table/DatatableWrapper'
+import ColorLabel from '../../UI/Labels/ColorLabel'
 import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
-import MemberAvatar from '../FilesView/MemberAvatar'
-import InfoBox from '../Others/Forms/InfoBox'
+import MemberAvatar from '../../UI/Others/MemberAvatar'
+import InfoBox from '../../UI/Others/InfoBox'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Desktop/PopoverWrapper.vue b/resources/js/components/Desktop/PopoverWrapper.vue
deleted file mode 100644
index fa2d6b67..00000000
--- a/resources/js/components/Desktop/PopoverWrapper.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-    <div class="popover-wrapper">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'PopoverWrapper',
-}
-</script>
-
-<style scoped lang="scss">
-.popover-wrapper {
-    position: relative;
-}
-</style>
diff --git a/resources/js/components/Desktop/ToolbarGroup.vue b/resources/js/components/Desktop/ToolbarGroup.vue
deleted file mode 100644
index 6d7c0447..00000000
--- a/resources/js/components/Desktop/ToolbarGroup.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <div class="toolbar-button-wrapper">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ToolbarWrapper',
-}
-</script>
-
-<style scoped lang="scss">
-.toolbar-button-wrapper {
-    margin-left: 28px;
-    display: flex;
-    align-items: center;
-}
-
-@media only screen and (max-width: 1024px) {
-    .toolbar-button-wrapper {
-        margin-left: 25px;
-    }
-}
-</style>
diff --git a/resources/js/components/Desktop/ToolbarWrapper.vue b/resources/js/components/Desktop/ToolbarWrapper.vue
deleted file mode 100644
index d8c7876e..00000000
--- a/resources/js/components/Desktop/ToolbarWrapper.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="toolbar-tools">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ToolbarWrapper',
-}
-</script>
-
-<style scoped lang="scss">
-@import 'resources/sass/vuefilemanager/_variables';
-@import 'resources/sass/vuefilemanager/_mixins';
-
-.toolbar-tools {
-    text-align: right;
-    display: flex;
-}
-</style>
diff --git a/resources/js/components/Others/Emoji.vue b/resources/js/components/Emoji/Emoji.vue
similarity index 100%
rename from resources/js/components/Others/Emoji.vue
rename to resources/js/components/Emoji/Emoji.vue
diff --git a/resources/js/components/Others/EmojiPicker.vue b/resources/js/components/Emoji/EmojiPicker.vue
similarity index 99%
rename from resources/js/components/Others/EmojiPicker.vue
rename to resources/js/components/Emoji/EmojiPicker.vue
index b29c4c65..12894c93 100644
--- a/resources/js/components/Others/EmojiPicker.vue
+++ b/resources/js/components/Emoji/EmojiPicker.vue
@@ -86,7 +86,7 @@
 </template>
 
 <script>
-import Spinner from '../FilesView/Spinner'
+import Spinner from '../UI/Others/Spinner'
 import Emoji from './Emoji'
 import { debounce, groupBy } from 'lodash'
 import { XIcon } from 'vue-feather-icons'
diff --git a/resources/js/components/FilesView/EmptyFilePage.vue b/resources/js/components/EntriesView/EmptyFilePage.vue
similarity index 95%
rename from resources/js/components/FilesView/EmptyFilePage.vue
rename to resources/js/components/EntriesView/EmptyFilePage.vue
index 97157c78..c91d30c5 100644
--- a/resources/js/components/FilesView/EmptyFilePage.vue
+++ b/resources/js/components/EntriesView/EmptyFilePage.vue
@@ -2,7 +2,7 @@
     <div class="flex items-center justify-center fixed top-20 bottom-0 left-0 right-0 md:px-0 px-4" v-if="isLoading || isEmpty">
         <!--Show message for user-->
         <div v-if="!isLoading" class="text-content text-center">
-            <slot></slot>
+            <slot />
         </div>
 
         <!--Show spinner when loading content-->
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Spinner from './Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/FilesView/FileBrowser.vue b/resources/js/components/EntriesView/FileBrowser.vue
similarity index 100%
rename from resources/js/components/FilesView/FileBrowser.vue
rename to resources/js/components/EntriesView/FileBrowser.vue
diff --git a/resources/js/components/FilesView/ItemHandler.vue b/resources/js/components/EntriesView/ItemHandler.vue
similarity index 99%
rename from resources/js/components/FilesView/ItemHandler.vue
rename to resources/js/components/EntriesView/ItemHandler.vue
index f563dd9d..092319a2 100644
--- a/resources/js/components/FilesView/ItemHandler.vue
+++ b/resources/js/components/EntriesView/ItemHandler.vue
@@ -31,8 +31,8 @@
 
 <script>
 import { events } from '../../bus'
-import ItemList from './ItemList'
-import ItemGrid from './ItemGrid'
+import ItemList from '../UI/Entries/ItemList'
+import ItemGrid from '../UI/Entries/ItemGrid'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/views/FileView/Components/NavigationSharePanel.vue b/resources/js/components/EntriesView/NavigationSharePanel.vue
similarity index 94%
rename from resources/js/views/FileView/Components/NavigationSharePanel.vue
rename to resources/js/components/EntriesView/NavigationSharePanel.vue
index 83ee0add..d137a5a2 100644
--- a/resources/js/views/FileView/Components/NavigationSharePanel.vue
+++ b/resources/js/components/EntriesView/NavigationSharePanel.vue
@@ -79,10 +79,10 @@ import {
     UsersIcon,
     XIcon,
 } from 'vue-feather-icons'
-import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
-import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
-import ContentGroup from '../../../components/Sidebar/ContentGroup'
-import { events } from '../../../bus'
+import TreeMenuNavigator from '../UI/Trees/TreeMenuNavigator'
+import ContentSidebar from '../Sidebar/ContentSidebar'
+import ContentGroup from '../Sidebar/ContentGroup'
+import { events } from '../../bus'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/views/FileView/Components/PanelNavigationFiles.vue b/resources/js/components/EntriesView/PanelNavigationFiles.vue
similarity index 97%
rename from resources/js/views/FileView/Components/PanelNavigationFiles.vue
rename to resources/js/components/EntriesView/PanelNavigationFiles.vue
index 89dc148a..3c4d2fbc 100644
--- a/resources/js/views/FileView/Components/PanelNavigationFiles.vue
+++ b/resources/js/components/EntriesView/PanelNavigationFiles.vue
@@ -107,10 +107,10 @@ import {
     UsersIcon,
     XIcon,
 } from 'vue-feather-icons'
-import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
-import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
-import ContentGroup from '../../../components/Sidebar/ContentGroup'
-import { events } from '../../../bus'
+import TreeMenuNavigator from '../UI/Trees/TreeMenuNavigator'
+import ContentSidebar from '../Sidebar/ContentSidebar'
+import ContentGroup from '../Sidebar/ContentGroup'
+import { events } from '../../bus'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/FilePreview/FilePreviewMedia.vue b/resources/js/components/FilePreview/FilePreviewMedia.vue
index 25a7c69f..6695d401 100644
--- a/resources/js/components/FilePreview/FilePreviewMedia.vue
+++ b/resources/js/components/FilePreview/FilePreviewMedia.vue
@@ -55,12 +55,12 @@
 
 <script>
 import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
-import ToolbarButton from '../FilesView/ToolbarButton'
-import ItemGrid from "../FilesView/ItemGrid"
+import ToolbarButton from '../UI/Buttons/ToolbarButton'
+import ItemGrid from "../UI/Entries/ItemGrid"
 import ImageFile from './Media/ImageFile'
 import Audio from './Media/Audio'
 import Video from './Media/Video'
-import Spinner from '../FilesView/Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 
diff --git a/resources/js/components/FilePreview/FilePreviewToolbar.vue b/resources/js/components/FilePreview/FilePreviewToolbar.vue
index 6eb1030b..9a5a8c44 100644
--- a/resources/js/components/FilePreview/FilePreviewToolbar.vue
+++ b/resources/js/components/FilePreview/FilePreviewToolbar.vue
@@ -103,12 +103,12 @@
 </template>
 
 <script>
-import PopoverWrapper from '../Desktop/PopoverWrapper'
-import PopoverItem from '../Desktop/PopoverItem'
-import OptionGroup from '../FilesView/OptionGroup'
-import Option from '../FilesView/Option'
+import PopoverWrapper from '../UI/Popover/PopoverWrapper'
+import PopoverItem from '../UI/Popover/PopoverItem'
+import OptionGroup from '../Menus/Components/OptionGroup'
+import Option from '../Menus/Components/Option'
 
-import ToolbarButton from '../FilesView/ToolbarButton'
+import ToolbarButton from '../UI/Buttons/ToolbarButton'
 import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
diff --git a/resources/js/components/Admin/AppInputButton.vue b/resources/js/components/Forms/Layouts/AppInputButton.vue
similarity index 100%
rename from resources/js/components/Admin/AppInputButton.vue
rename to resources/js/components/Forms/Layouts/AppInputButton.vue
diff --git a/resources/js/components/Admin/AppInputSwitch.vue b/resources/js/components/Forms/Layouts/AppInputSwitch.vue
similarity index 100%
rename from resources/js/components/Admin/AppInputSwitch.vue
rename to resources/js/components/Forms/Layouts/AppInputSwitch.vue
diff --git a/resources/js/components/Admin/AppInputText.vue b/resources/js/components/Forms/Layouts/AppInputText.vue
similarity index 100%
rename from resources/js/components/Admin/AppInputText.vue
rename to resources/js/components/Forms/Layouts/AppInputText.vue
diff --git a/resources/js/components/Setup/MailSetup.vue b/resources/js/components/Forms/MailSetup.vue
similarity index 98%
rename from resources/js/components/Setup/MailSetup.vue
rename to resources/js/components/Forms/MailSetup.vue
index 655daf49..aaff64d2 100644
--- a/resources/js/components/Setup/MailSetup.vue
+++ b/resources/js/components/Forms/MailSetup.vue
@@ -241,9 +241,9 @@
 
 <script>
 	import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
-	import SelectInput from '../Others/Forms/SelectInput'
-	import AppInputText from '../Admin/AppInputText'
-	import FormLabel from '../Others/Forms/FormLabel'
+	import SelectInput from '../Inputs/SelectInput'
+	import AppInputText from './Layouts/AppInputText'
+	import FormLabel from '../UI/Labels/FormLabel'
 
 	export default {
 		name: 'MailSetup',
diff --git a/resources/js/components/Setup/StorageSetup.vue b/resources/js/components/Forms/StorageSetup.vue
similarity index 98%
rename from resources/js/components/Setup/StorageSetup.vue
rename to resources/js/components/Forms/StorageSetup.vue
index 1f3d1983..4ee06455 100644
--- a/resources/js/components/Setup/StorageSetup.vue
+++ b/resources/js/components/Forms/StorageSetup.vue
@@ -157,9 +157,9 @@
 
 <script>
 	import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
-	import SelectInput from '../Others/Forms/SelectInput'
-	import AppInputText from '../Admin/AppInputText'
-	import FormLabel from '../Others/Forms/FormLabel'
+	import SelectInput from '../Inputs/SelectInput'
+	import AppInputText from './Layouts/AppInputText'
+	import FormLabel from '../UI/Labels/FormLabel'
 
 	export default {
 		name: 'StorageSetup',
diff --git a/resources/js/components/FilesView/FileIconThumbnail.vue b/resources/js/components/Icons/FileIconThumbnail.vue
similarity index 100%
rename from resources/js/components/FilesView/FileIconThumbnail.vue
rename to resources/js/components/Icons/FileIconThumbnail.vue
diff --git a/resources/js/components/FilesView/FolderIcon.vue b/resources/js/components/Icons/FolderIcon.vue
similarity index 77%
rename from resources/js/components/FilesView/FolderIcon.vue
rename to resources/js/components/Icons/FolderIcon.vue
index e4b85d1f..7fcc0586 100644
--- a/resources/js/components/FilesView/FolderIcon.vue
+++ b/resources/js/components/Icons/FolderIcon.vue
@@ -6,8 +6,8 @@
 </template>
 
 <script>
-import VueFolderTeamIcon from '../Icons/VueFolderTeamIcon'
-import VueFolderIcon from '../Icons/VueFolderIcon'
+import VueFolderTeamIcon from './VueFolderTeamIcon'
+import VueFolderIcon from './VueFolderIcon'
 
 export default {
     name: 'FolderIcon',
diff --git a/resources/js/components/Index/Components/PageTitle.vue b/resources/js/components/IndexPage/Components/PageTitle.vue
similarity index 100%
rename from resources/js/components/Index/Components/PageTitle.vue
rename to resources/js/components/IndexPage/Components/PageTitle.vue
diff --git a/resources/js/components/Index/Components/PricingTables.vue b/resources/js/components/IndexPage/Components/PricingTables.vue
similarity index 100%
rename from resources/js/components/Index/Components/PricingTables.vue
rename to resources/js/components/IndexPage/Components/PricingTables.vue
diff --git a/resources/js/components/Index/IndexGetStarted.vue b/resources/js/components/IndexPage/IndexGetStarted.vue
similarity index 100%
rename from resources/js/components/Index/IndexGetStarted.vue
rename to resources/js/components/IndexPage/IndexGetStarted.vue
diff --git a/resources/js/components/Index/IndexHeroScreenshot.vue b/resources/js/components/IndexPage/IndexHeroScreenshot.vue
similarity index 100%
rename from resources/js/components/Index/IndexHeroScreenshot.vue
rename to resources/js/components/IndexPage/IndexHeroScreenshot.vue
diff --git a/resources/js/components/Index/IndexMainFeatures.vue b/resources/js/components/IndexPage/IndexMainFeatures.vue
similarity index 100%
rename from resources/js/components/Index/IndexMainFeatures.vue
rename to resources/js/components/IndexPage/IndexMainFeatures.vue
diff --git a/resources/js/components/Index/IndexNavigation.vue b/resources/js/components/IndexPage/IndexNavigation.vue
similarity index 100%
rename from resources/js/components/Index/IndexNavigation.vue
rename to resources/js/components/IndexPage/IndexNavigation.vue
diff --git a/resources/js/components/Index/IndexPageFooter.vue b/resources/js/components/IndexPage/IndexPageFooter.vue
similarity index 100%
rename from resources/js/components/Index/IndexPageFooter.vue
rename to resources/js/components/IndexPage/IndexPageFooter.vue
diff --git a/resources/js/components/Index/IndexPageHeader.vue b/resources/js/components/IndexPage/IndexPageHeader.vue
similarity index 98%
rename from resources/js/components/Index/IndexPageHeader.vue
rename to resources/js/components/IndexPage/IndexPageHeader.vue
index c8d10d37..02567de9 100644
--- a/resources/js/components/Index/IndexPageHeader.vue
+++ b/resources/js/components/IndexPage/IndexPageHeader.vue
@@ -34,7 +34,7 @@
 <script>
 import HardDriveIcon from 'vue-feather-icons/icons/HardDriveIcon'
 import PageTitle from './Components/PageTitle'
-import AuthButton from '../Auth/AuthButton'
+import AuthButton from '../UI/Buttons/AuthButton'
 import { CreditCardIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/components/Index/IndexPricingTables.vue b/resources/js/components/IndexPage/IndexPricingTables.vue
similarity index 98%
rename from resources/js/components/Index/IndexPricingTables.vue
rename to resources/js/components/IndexPage/IndexPricingTables.vue
index 0a615a01..791f291e 100644
--- a/resources/js/components/Index/IndexPricingTables.vue
+++ b/resources/js/components/IndexPage/IndexPricingTables.vue
@@ -25,7 +25,7 @@
 
 <script>
 import PricingTables from './Components/PricingTables'
-import AuthButton from '../Auth/AuthButton'
+import AuthButton from '../UI/Buttons/AuthButton'
 import { CloudIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/components/Others/Forms/AvatarInput.vue b/resources/js/components/Inputs/AvatarInput.vue
similarity index 100%
rename from resources/js/components/Others/Forms/AvatarInput.vue
rename to resources/js/components/Inputs/AvatarInput.vue
diff --git a/resources/js/components/FilesView/CheckBox.vue b/resources/js/components/Inputs/CheckBox.vue
similarity index 100%
rename from resources/js/components/FilesView/CheckBox.vue
rename to resources/js/components/Inputs/CheckBox.vue
diff --git a/resources/js/components/Others/Forms/CopyInput.vue b/resources/js/components/Inputs/CopyInput.vue
similarity index 100%
rename from resources/js/components/Others/Forms/CopyInput.vue
rename to resources/js/components/Inputs/CopyInput.vue
diff --git a/resources/js/components/Others/Forms/CopyShareLink.vue b/resources/js/components/Inputs/CopyShareLink.vue
similarity index 99%
rename from resources/js/components/Others/Forms/CopyShareLink.vue
rename to resources/js/components/Inputs/CopyShareLink.vue
index 523e3b82..44823501 100644
--- a/resources/js/components/Others/Forms/CopyShareLink.vue
+++ b/resources/js/components/Inputs/CopyShareLink.vue
@@ -88,7 +88,7 @@
 
 <script>
 import { DownloadIcon, CameraIcon, CopyIcon, CheckIcon, SendIcon, MoreHorizontalIcon, CodeIcon } from 'vue-feather-icons'
-import { events } from '../../../bus'
+import { events } from '../../bus'
 
 export default {
     name: 'CopyShareLink',
diff --git a/resources/js/components/Others/Forms/ImageInput.vue b/resources/js/components/Inputs/ImageInput.vue
similarity index 100%
rename from resources/js/components/Others/Forms/ImageInput.vue
rename to resources/js/components/Inputs/ImageInput.vue
diff --git a/resources/js/components/Others/Forms/MultiEmailInput.vue b/resources/js/components/Inputs/MultiEmailInput.vue
similarity index 98%
rename from resources/js/components/Others/Forms/MultiEmailInput.vue
rename to resources/js/components/Inputs/MultiEmailInput.vue
index 94d89685..a5a9f3a6 100644
--- a/resources/js/components/Others/Forms/MultiEmailInput.vue
+++ b/resources/js/components/Inputs/MultiEmailInput.vue
@@ -32,7 +32,7 @@
 
 <script>
 import { XIcon } from 'vue-feather-icons'
-import { events } from '../../../bus'
+import { events } from '../../bus'
 
 export default {
     name: 'MultiEmailInput',
diff --git a/resources/js/components/Others/Forms/SearchInput.vue b/resources/js/components/Inputs/SearchInput.vue
similarity index 93%
rename from resources/js/components/Others/Forms/SearchInput.vue
rename to resources/js/components/Inputs/SearchInput.vue
index 7f018e96..32b5c30d 100644
--- a/resources/js/components/Others/Forms/SearchInput.vue
+++ b/resources/js/components/Inputs/SearchInput.vue
@@ -41,9 +41,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-@import '../../../../sass/vuefilemanager/forms';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/forms';
 
 .search-bar {
     position: relative;
diff --git a/resources/js/components/Others/Forms/SelectBoxInput.vue b/resources/js/components/Inputs/SelectBoxInput.vue
similarity index 89%
rename from resources/js/components/Others/Forms/SelectBoxInput.vue
rename to resources/js/components/Inputs/SelectBoxInput.vue
index 4e3b14f7..3da541a7 100644
--- a/resources/js/components/Others/Forms/SelectBoxInput.vue
+++ b/resources/js/components/Inputs/SelectBoxInput.vue
@@ -36,10 +36,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-@import '../../../../sass/vuefilemanager/inapp-forms';
-@import '../../../../sass/vuefilemanager/forms';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/inapp-forms';
+@import '../../../sass/vuefilemanager/forms';
 
 .select-box {
     display: flex;
diff --git a/resources/js/components/Others/Forms/SelectInput.vue b/resources/js/components/Inputs/SelectInput.vue
similarity index 98%
rename from resources/js/components/Others/Forms/SelectInput.vue
rename to resources/js/components/Inputs/SelectInput.vue
index cbf097b1..b84c3658 100644
--- a/resources/js/components/Others/Forms/SelectInput.vue
+++ b/resources/js/components/Inputs/SelectInput.vue
@@ -115,8 +115,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
 
 /* TODO: refactor to the tailwind */
 
diff --git a/resources/js/components/Others/Forms/SwitchInput.vue b/resources/js/components/Inputs/SwitchInput.vue
similarity index 94%
rename from resources/js/components/Others/Forms/SwitchInput.vue
rename to resources/js/components/Inputs/SwitchInput.vue
index e616174c..db6484e5 100644
--- a/resources/js/components/Others/Forms/SwitchInput.vue
+++ b/resources/js/components/Inputs/SwitchInput.vue
@@ -39,8 +39,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
 
 .input-wrapper {
     display: flex;
diff --git a/resources/js/components/Auth/AuthContent.vue b/resources/js/components/Layout/AuthPages/AuthContent.vue
similarity index 93%
rename from resources/js/components/Auth/AuthContent.vue
rename to resources/js/components/Layout/AuthPages/AuthContent.vue
index 1e1eedae..1e42926b 100644
--- a/resources/js/components/Auth/AuthContent.vue
+++ b/resources/js/components/Layout/AuthPages/AuthContent.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="isVisible" class="w-full max-w-xl text-center">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 
diff --git a/resources/js/components/Auth/AuthContentWrapper.vue b/resources/js/components/Layout/AuthPages/AuthContentWrapper.vue
similarity index 88%
rename from resources/js/components/Auth/AuthContentWrapper.vue
rename to resources/js/components/Layout/AuthPages/AuthContentWrapper.vue
index 133384ea..3c0ad7c7 100644
--- a/resources/js/components/Auth/AuthContentWrapper.vue
+++ b/resources/js/components/Layout/AuthPages/AuthContentWrapper.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex items-center justify-center px-2.5 md:px-6">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 
diff --git a/resources/js/components/Layout/PageTab.vue b/resources/js/components/Layout/PageTab.vue
new file mode 100644
index 00000000..d5d5c134
--- /dev/null
+++ b/resources/js/components/Layout/PageTab.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="page-tab">
+        <div id="loader" v-show="isLoading">
+            <Spinner />
+        </div>
+        <slot v-show="!isLoading" />
+    </div>
+</template>
+
+<script>
+import Spinner from '../UI/Others/Spinner'
+
+export default {
+    name: 'PageTab',
+    props: ['isLoading'],
+    components: {
+        Spinner,
+    },
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Others/Layout/PageTabGroup.vue b/resources/js/components/Layout/PageTabGroup.vue
similarity index 63%
rename from resources/js/components/Others/Layout/PageTabGroup.vue
rename to resources/js/components/Layout/PageTabGroup.vue
index ae6b6014..d4d3e12e 100644
--- a/resources/js/components/Others/Layout/PageTabGroup.vue
+++ b/resources/js/components/Layout/PageTabGroup.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="page-tab-group">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 
@@ -11,8 +11,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
+@import '../../../sass/vuefilemanager/variables';
+@import '../../../sass/vuefilemanager/mixins';
 
 .page-tab-group {
     margin-bottom: 65px;
diff --git a/resources/js/components/FilesView/InfoSidebar.vue b/resources/js/components/Layout/Sidebars/InfoSidebar.vue
similarity index 92%
rename from resources/js/components/FilesView/InfoSidebar.vue
rename to resources/js/components/Layout/Sidebars/InfoSidebar.vue
index 6c6bf97b..4f11bee6 100644
--- a/resources/js/components/FilesView/InfoSidebar.vue
+++ b/resources/js/components/Layout/Sidebars/InfoSidebar.vue
@@ -103,14 +103,14 @@
 </template>
 
 <script>
-import FilePreviewDetail from '../Others/FilePreviewDetail'
-import CopyShareLink from '../Others/Forms/CopyShareLink'
+import FilePreviewDetail from '../../Others/FilePreviewDetail'
+import CopyShareLink from '../../Inputs/CopyShareLink'
 import {Edit2Icon, LockIcon, UnlockIcon, EyeOffIcon} from 'vue-feather-icons'
-import ImageMetaData from './ImageMetaData'
-import TitlePreview from './TitlePreview'
-import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
-import ListInfoItem from '../Others/ListInfoItem'
-import MemberAvatar from './MemberAvatar'
+import ImageMetaData from '../../UI/Others/ImageMetaData'
+import TitlePreview from '../../UI/Labels/TitlePreview'
+import TeamMembersPreview from '../../Teams/Components/TeamMembersPreview'
+import ListInfoItem from '../../UI/List/ListInfoItem'
+import MemberAvatar from '../../UI/Others/MemberAvatar'
 import {mapGetters} from 'vuex'
 
 export default {
diff --git a/resources/js/components/FilesView/InfoSidebarUploadRequest.vue b/resources/js/components/Layout/Sidebars/InfoSidebarUploadRequest.vue
similarity index 95%
rename from resources/js/components/FilesView/InfoSidebarUploadRequest.vue
rename to resources/js/components/Layout/Sidebars/InfoSidebarUploadRequest.vue
index e8ae4885..10818487 100644
--- a/resources/js/components/FilesView/InfoSidebarUploadRequest.vue
+++ b/resources/js/components/Layout/Sidebars/InfoSidebarUploadRequest.vue
@@ -94,10 +94,10 @@
 
 <script>
 import { Edit2Icon, LockIcon, UnlockIcon, EyeOffIcon } from 'vue-feather-icons'
-import FilePreviewDetail from '../Others/FilePreviewDetail'
-import ListInfoItem from '../Others/ListInfoItem'
-import ImageMetaData from './ImageMetaData'
-import TitlePreview from './TitlePreview'
+import FilePreviewDetail from '../../Others/FilePreviewDetail'
+import ListInfoItem from '../../UI/List/ListInfoItem'
+import ImageMetaData from '../../UI/Others/ImageMetaData'
+import TitlePreview from '../../UI/Labels/TitlePreview'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/FilesView/DesktopSharepageToolbar.vue b/resources/js/components/Layout/Toolbars/DesktopSharepageToolbar.vue
similarity index 86%
rename from resources/js/components/FilesView/DesktopSharepageToolbar.vue
rename to resources/js/components/Layout/Toolbars/DesktopSharepageToolbar.vue
index abed4f3a..22ddbfd9 100644
--- a/resources/js/components/FilesView/DesktopSharepageToolbar.vue
+++ b/resources/js/components/Layout/Toolbars/DesktopSharepageToolbar.vue
@@ -27,7 +27,7 @@
                 </PopoverWrapper>
 
                 <!--Search bar-->
-                <SearchBar class="ml-5 hidden lg:block xl:ml-8" />
+                <SearchBarButton class="ml-5 hidden lg:block xl:ml-8" />
 
                 <!--File Controls-->
                 <div class="ml-5 flex items-center xl:ml-8">
@@ -78,23 +78,24 @@
 </template>
 
 <script>
-import PopoverWrapper from '../Desktop/PopoverWrapper'
-import FileSortingOptions from './FileSortingOptions'
-import PopoverItem from '../Desktop/PopoverItem'
-import UploadProgress from './UploadProgress'
+import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
+import FileSortingOptions from '../../Menus/FileSortingOptions'
+import PopoverItem from '../../UI/Popover/PopoverItem'
+import UploadProgress from '../../UI/Others/UploadProgress'
 import NavigationBar from './NavigationBar'
-import ToolbarButton from './ToolbarButton'
-import OptionUpload from './OptionUpload'
-import OptionGroup from './OptionGroup'
-import SearchBar from './SearchBar'
-import { events } from '../../bus'
+import ToolbarButton from '../../UI/Buttons/ToolbarButton'
+import OptionUpload from '../../Menus/Components/OptionUpload'
+import OptionGroup from '../../Menus/Components/OptionGroup'
+import SearchBarButton from '../../UI/Buttons/SearchBarButton'
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
-import Option from './Option'
+import Option from '../../Menus/Components/Option'
 
 export default {
     name: 'DesktopSharepageToolbar',
     components: {
         FileSortingOptions,
+		SearchBarButton,
         UploadProgress,
         PopoverWrapper,
         NavigationBar,
@@ -102,7 +103,6 @@ export default {
         OptionUpload,
         OptionGroup,
         PopoverItem,
-        SearchBar,
         Option,
     },
     computed: {
diff --git a/resources/js/components/FilesView/DesktopToolbar.vue b/resources/js/components/Layout/Toolbars/DesktopToolbar.vue
similarity index 92%
rename from resources/js/components/FilesView/DesktopToolbar.vue
rename to resources/js/components/Layout/Toolbars/DesktopToolbar.vue
index 787c47c9..66880a1a 100644
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/Layout/Toolbars/DesktopToolbar.vue
@@ -55,7 +55,7 @@
                 </PopoverWrapper>
 
                 <!--Search bar-->
-                <SearchBar class="ml-5 hidden lg:block xl:ml-8" />
+                <SearchBarButton class="ml-5 hidden lg:block xl:ml-8" />
 
                 <!--File Controls-->
                 <div class="ml-5 flex items-center xl:ml-8">
@@ -158,20 +158,20 @@
 </template>
 
 <script>
-import TeamMembersButton from '../Teams/Components/TeamMembersButton'
-import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
-import PopoverWrapper from '../Desktop/PopoverWrapper'
-import FileSortingOptions from './FileSortingOptions'
-import PopoverItem from '../Desktop/PopoverItem'
-import UploadProgress from './UploadProgress'
+import TeamMembersButton from '../../Teams/Components/TeamMembersButton'
+import TeamFolderPreview from '../../Teams/Components/TeamFolderPreview'
+import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
+import FileSortingOptions from '../../Menus/FileSortingOptions'
+import PopoverItem from '../../UI/Popover/PopoverItem'
+import UploadProgress from '../../UI/Others/UploadProgress'
 import NavigationBar from './NavigationBar'
-import ToolbarButton from './ToolbarButton'
-import OptionUpload from './OptionUpload'
-import OptionGroup from './OptionGroup'
-import SearchBar from './SearchBar'
-import { events } from '../../bus'
+import ToolbarButton from '../../UI/Buttons/ToolbarButton'
+import OptionUpload from '../../Menus/Components/OptionUpload'
+import OptionGroup from '../../Menus/Components/OptionGroup'
+import SearchBarButton from '../../UI/Buttons/SearchBarButton'
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
-import Option from './Option'
+import Option from '../../Menus/Components/Option'
 
 export default {
     name: 'DesktopToolbar',
@@ -179,6 +179,7 @@ export default {
         FileSortingOptions,
         TeamMembersButton,
         TeamFolderPreview,
+		SearchBarButton,
         UploadProgress,
         PopoverWrapper,
         NavigationBar,
@@ -186,7 +187,6 @@ export default {
         OptionUpload,
         OptionGroup,
         PopoverItem,
-        SearchBar,
         Option,
     },
     computed: {
diff --git a/resources/js/components/FilesView/DesktopUploadRequestToolbar.vue b/resources/js/components/Layout/Toolbars/DesktopUploadRequestToolbar.vue
similarity index 89%
rename from resources/js/components/FilesView/DesktopUploadRequestToolbar.vue
rename to resources/js/components/Layout/Toolbars/DesktopUploadRequestToolbar.vue
index b27a48a7..282aa277 100644
--- a/resources/js/components/FilesView/DesktopUploadRequestToolbar.vue
+++ b/resources/js/components/Layout/Toolbars/DesktopUploadRequestToolbar.vue
@@ -84,19 +84,18 @@
 </template>
 
 <script>
-import PopoverWrapper from '../Desktop/PopoverWrapper'
-import FileSortingOptions from './FileSortingOptions'
-import PopoverItem from '../Desktop/PopoverItem'
-import UploadProgress from './UploadProgress'
+import PopoverWrapper from '../../UI/Popover/PopoverWrapper'
+import FileSortingOptions from '../../Menus/FileSortingOptions'
+import PopoverItem from '../../UI/Popover/PopoverItem'
+import UploadProgress from '../../UI/Others/UploadProgress'
 import NavigationBar from './NavigationBar'
-import ToolbarButton from './ToolbarButton'
-import MemberAvatar from "./MemberAvatar"
-import OptionUpload from './OptionUpload'
-import OptionGroup from './OptionGroup'
-import SearchBar from './SearchBar'
-import { events } from '../../bus'
+import ToolbarButton from '../../UI/Buttons/ToolbarButton'
+import MemberAvatar from "../../UI/Others/MemberAvatar"
+import OptionUpload from '../../Menus/Components/OptionUpload'
+import OptionGroup from '../../Menus/Components/OptionGroup'
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
-import Option from './Option'
+import Option from '../../Menus/Components/Option'
 
 export default {
     name: 'DesktopUploadRequestToolbar',
@@ -110,7 +109,6 @@ export default {
         OptionUpload,
         OptionGroup,
         PopoverItem,
-        SearchBar,
         Option,
     },
     computed: {
diff --git a/resources/js/components/FilesView/MobileMultiSelectToolbar.vue b/resources/js/components/Layout/Toolbars/MobileMultiSelectToolbar.vue
similarity index 92%
rename from resources/js/components/FilesView/MobileMultiSelectToolbar.vue
rename to resources/js/components/Layout/Toolbars/MobileMultiSelectToolbar.vue
index 132d8a47..4057a310 100644
--- a/resources/js/components/FilesView/MobileMultiSelectToolbar.vue
+++ b/resources/js/components/Layout/Toolbars/MobileMultiSelectToolbar.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import ToolbarButton from './ToolbarButton'
+import ToolbarButton from '../../UI/Buttons/ToolbarButton'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -36,8 +36,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import 'resources/sass/vuefilemanager/_variables';
-@import 'resources/sass/vuefilemanager/_mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .multiselect-actions {
     display: flex;
diff --git a/resources/js/components/FilesView/MobileToolbar.vue b/resources/js/components/Layout/Toolbars/MobileToolbar.vue
similarity index 89%
rename from resources/js/components/FilesView/MobileToolbar.vue
rename to resources/js/components/Layout/Toolbars/MobileToolbar.vue
index 383a44aa..dea86f2d 100644
--- a/resources/js/components/FilesView/MobileToolbar.vue
+++ b/resources/js/components/Layout/Toolbars/MobileToolbar.vue
@@ -24,8 +24,8 @@
 </template>
 
 <script>
-import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
-import TeamMembersButton from '../Teams/Components/TeamMembersButton'
+import TeamMembersPreview from '../../Teams/Components/TeamMembersPreview'
+import TeamMembersButton from '../../Teams/Components/TeamMembersButton'
 import { MenuIcon } from 'vue-feather-icons'
 import NavigationBar from './NavigationBar'
 
diff --git a/resources/js/components/FilesView/MobileUploadRequestToolbar.vue b/resources/js/components/Layout/Toolbars/MobileUploadRequestToolbar.vue
similarity index 82%
rename from resources/js/components/FilesView/MobileUploadRequestToolbar.vue
rename to resources/js/components/Layout/Toolbars/MobileUploadRequestToolbar.vue
index fabc2240..ba82b777 100644
--- a/resources/js/components/FilesView/MobileUploadRequestToolbar.vue
+++ b/resources/js/components/Layout/Toolbars/MobileUploadRequestToolbar.vue
@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
-import TeamMembersButton from '../Teams/Components/TeamMembersButton'
+import TeamMembersPreview from '../../Teams/Components/TeamMembersPreview'
+import TeamMembersButton from '../../Teams/Components/TeamMembersButton'
 import { MenuIcon } from 'vue-feather-icons'
 import NavigationBar from './NavigationBar'
 
diff --git a/resources/js/components/FilesView/NavigationBar.vue b/resources/js/components/Layout/Toolbars/NavigationBar.vue
similarity index 98%
rename from resources/js/components/FilesView/NavigationBar.vue
rename to resources/js/components/Layout/Toolbars/NavigationBar.vue
index 60736f1f..f77d5a29 100644
--- a/resources/js/components/FilesView/NavigationBar.vue
+++ b/resources/js/components/Layout/Toolbars/NavigationBar.vue
@@ -41,7 +41,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
 
 export default {
diff --git a/resources/js/components/FilesView/Option.vue b/resources/js/components/Menus/Components/Option.vue
similarity index 99%
rename from resources/js/components/FilesView/Option.vue
rename to resources/js/components/Menus/Components/Option.vue
index 6f248ac2..4bc8d1cc 100644
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/Menus/Components/Option.vue
@@ -244,7 +244,7 @@
 </template>
 
 <script>
-import AlphabetIcon from '../Icons/AlphabetIcon'
+import AlphabetIcon from '../../Icons/AlphabetIcon'
 import {
     UserMinusIcon,
     UserCheckIcon,
diff --git a/resources/js/components/FilesView/OptionGroup.vue b/resources/js/components/Menus/Components/OptionGroup.vue
similarity index 92%
rename from resources/js/components/FilesView/OptionGroup.vue
rename to resources/js/components/Menus/Components/OptionGroup.vue
index 8a54a098..92401b0b 100644
--- a/resources/js/components/FilesView/OptionGroup.vue
+++ b/resources/js/components/Menus/Components/OptionGroup.vue
@@ -4,7 +4,7 @@
             {{ title }}
         </b>
         <ul class="option-group py-1">
-            <slot></slot>
+            <slot />
         </ul>
     </div>
 </template>
diff --git a/resources/js/components/FilesView/OptionUpload.vue b/resources/js/components/Menus/Components/OptionUpload.vue
similarity index 96%
rename from resources/js/components/FilesView/OptionUpload.vue
rename to resources/js/components/Menus/Components/OptionUpload.vue
index c73984e5..abf32eee 100644
--- a/resources/js/components/FilesView/OptionUpload.vue
+++ b/resources/js/components/Menus/Components/OptionUpload.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import FolderUploadIcon from '../Icons/FolderUploadIcon'
+import FolderUploadIcon from '../../Icons/FolderUploadIcon'
 import { UploadCloudIcon } from 'vue-feather-icons'
 
 export default {
diff --git a/resources/js/components/FilesView/ContextMenu.vue b/resources/js/components/Menus/ContextMenu.vue
similarity index 100%
rename from resources/js/components/FilesView/ContextMenu.vue
rename to resources/js/components/Menus/ContextMenu.vue
diff --git a/resources/js/components/FilesView/FileFilterMobile.vue b/resources/js/components/Menus/FileFilterMobile.vue
similarity index 96%
rename from resources/js/components/FilesView/FileFilterMobile.vue
rename to resources/js/components/Menus/FileFilterMobile.vue
index 83fdec81..4c3ea703 100644
--- a/resources/js/components/FilesView/FileFilterMobile.vue
+++ b/resources/js/components/Menus/FileFilterMobile.vue
@@ -53,9 +53,9 @@
 
 <script>
 import MenuMobileGroup from '../Mobile/MenuMobileGroup'
-import OptionGroup from '../FilesView/OptionGroup'
+import OptionGroup from './Components/OptionGroup'
 import MenuMobile from '../Mobile/MenuMobile'
-import Option from '../FilesView/Option'
+import Option from './Components/Option'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/FilesView/FileSortingMobile.vue b/resources/js/components/Menus/FileSortingMobile.vue
similarity index 93%
rename from resources/js/components/FilesView/FileSortingMobile.vue
rename to resources/js/components/Menus/FileSortingMobile.vue
index ca96e1ff..42e71a8e 100644
--- a/resources/js/components/FilesView/FileSortingMobile.vue
+++ b/resources/js/components/Menus/FileSortingMobile.vue
@@ -12,7 +12,7 @@ import MenuMobileGroup from '../Mobile/MenuMobileGroup'
 import MenuMobile from '../Mobile/MenuMobile'
 
 export default {
-    name: 'FilterSortingMobile',
+    name: 'FileSortingMobile',
     components: {
         FileSortingOptions,
         MenuMobileGroup,
diff --git a/resources/js/components/FilesView/FileSortingOptions.vue b/resources/js/components/Menus/FileSortingOptions.vue
similarity index 97%
rename from resources/js/components/FilesView/FileSortingOptions.vue
rename to resources/js/components/Menus/FileSortingOptions.vue
index d2fe46cf..01c3f29f 100644
--- a/resources/js/components/FilesView/FileSortingOptions.vue
+++ b/resources/js/components/Menus/FileSortingOptions.vue
@@ -32,8 +32,8 @@
 </template>
 
 <script>
-import OptionGroup from './OptionGroup'
-import Option from './Option'
+import OptionGroup from './Components/OptionGroup'
+import Option from './Components/Option'
 import { ArrowUpIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/components/FilesView/MobileContextMenu.vue b/resources/js/components/Menus/MobileContextMenu.vue
similarity index 83%
rename from resources/js/components/FilesView/MobileContextMenu.vue
rename to resources/js/components/Menus/MobileContextMenu.vue
index 590424ac..23f8a21e 100644
--- a/resources/js/components/FilesView/MobileContextMenu.vue
+++ b/resources/js/components/Menus/MobileContextMenu.vue
@@ -3,22 +3,22 @@
         <ThumbnailItem class="m-5" :item="clipboard[0]" />
 
         <MenuMobileGroup v-if="$slots.default">
-            <slot></slot>
+            <slot />
         </MenuMobileGroup>
 
         <MenuMobileGroup v-if="$slots.editor && $checkPermission('editor')">
-            <slot name="editor"></slot>
+            <slot name="editor" />
         </MenuMobileGroup>
 
         <MenuMobileGroup v-if="$slots.visitor && $checkPermission('visitor')">
-            <slot name="visitor"></slot>
+            <slot name="visitor" />
         </MenuMobileGroup>
     </MenuMobile>
 </template>
 
 <script>
 import MenuMobileGroup from '../Mobile/MenuMobileGroup'
-import ThumbnailItem from '../Others/ThumbnailItem'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
 import MenuMobile from '../Mobile/MenuMobile'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/components/FilesView/MobileCreateMenu.vue b/resources/js/components/Menus/MobileCreateMenu.vue
similarity index 100%
rename from resources/js/components/FilesView/MobileCreateMenu.vue
rename to resources/js/components/Menus/MobileCreateMenu.vue
diff --git a/resources/js/components/FilesView/MobileTeamContextMenu.vue b/resources/js/components/Menus/MobileTeamContextMenu.vue
similarity index 95%
rename from resources/js/components/FilesView/MobileTeamContextMenu.vue
rename to resources/js/components/Menus/MobileTeamContextMenu.vue
index ced78b76..47632003 100644
--- a/resources/js/components/FilesView/MobileTeamContextMenu.vue
+++ b/resources/js/components/Menus/MobileTeamContextMenu.vue
@@ -3,7 +3,7 @@
         <TeamFolderPreview />
 
         <MenuMobileGroup v-if="$slots.default">
-            <slot></slot>
+            <slot />
         </MenuMobileGroup>
     </MenuMobile>
 </template>
diff --git a/resources/js/components/FilesView/FileActionsMobile.vue b/resources/js/components/Mobile/FileActionsMobile.vue
similarity index 93%
rename from resources/js/components/FilesView/FileActionsMobile.vue
rename to resources/js/components/Mobile/FileActionsMobile.vue
index c4718141..4564a932 100644
--- a/resources/js/components/FilesView/FileActionsMobile.vue
+++ b/resources/js/components/Mobile/FileActionsMobile.vue
@@ -26,8 +26,8 @@
 </template>
 
 <script>
-import MobileActionButton from './MobileActionButton'
-import UploadProgress from './UploadProgress'
+import MobileActionButton from '../UI/Buttons/MobileActionButton'
+import UploadProgress from '../UI/Others/UploadProgress'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Mobile/MenuMobileGroup.vue b/resources/js/components/Mobile/MenuMobileGroup.vue
index 29dcea0d..88bde754 100644
--- a/resources/js/components/Mobile/MenuMobileGroup.vue
+++ b/resources/js/components/Mobile/MenuMobileGroup.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="menu-options">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 
diff --git a/resources/js/components/Others/MobileNavigation.vue b/resources/js/components/Mobile/MobileNavigation.vue
similarity index 96%
rename from resources/js/components/Others/MobileNavigation.vue
rename to resources/js/components/Mobile/MobileNavigation.vue
index db6d1684..1b98a3c5 100644
--- a/resources/js/components/Others/MobileNavigation.vue
+++ b/resources/js/components/Mobile/MobileNavigation.vue
@@ -156,11 +156,11 @@
 </template>
 
 <script>
-import MenuMobileGroup from '../Mobile/MenuMobileGroup'
-import OptionGroup from '../FilesView/OptionGroup'
-import UserHeadline from '../Sidebar/UserHeadline'
-import MenuMobile from '../Mobile/MenuMobile'
-import Option from '../FilesView/Option'
+import MenuMobileGroup from './MenuMobileGroup'
+import OptionGroup from '../Menus/Components/OptionGroup'
+import UserHeadline from '../UI/Others/UserHeadline'
+import MenuMobile from './MenuMobile'
+import Option from '../Menus/Components/Option'
 import { ChevronLeftIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/components/Notifications/Notification.vue b/resources/js/components/Notifications/Components/Notification.vue
similarity index 98%
rename from resources/js/components/Notifications/Notification.vue
rename to resources/js/components/Notifications/Components/Notification.vue
index f8e46f18..9bae315a 100644
--- a/resources/js/components/Notifications/Notification.vue
+++ b/resources/js/components/Notifications/Components/Notification.vue
@@ -87,8 +87,8 @@
 </template>
 <script>
 import { RefreshCwIcon, TrendingUpIcon, GiftIcon, CheckIcon, XIcon, MailIcon, UserPlusIcon, UploadCloudIcon, ChevronRightIcon, AlertTriangleIcon } from 'vue-feather-icons'
-import MemberAvatar from '../FilesView/MemberAvatar'
-import {events} from "../../bus";
+import MemberAvatar from '../../UI/Others/MemberAvatar'
+import {events} from "../../../bus";
 
 export default {
     name: 'Notification',
diff --git a/resources/js/components/Sidebar/NotificationBell.vue b/resources/js/components/Notifications/Components/NotificationBell.vue
similarity index 100%
rename from resources/js/components/Sidebar/NotificationBell.vue
rename to resources/js/components/Notifications/Components/NotificationBell.vue
diff --git a/resources/js/components/Notifications/NotificationCenter.vue b/resources/js/components/Notifications/NotificationCenter.vue
index b92b1554..5f2a3c0f 100644
--- a/resources/js/components/Notifications/NotificationCenter.vue
+++ b/resources/js/components/Notifications/NotificationCenter.vue
@@ -41,8 +41,8 @@
 </template>
 
 <script>
-import MobileActionButton from "../FilesView/MobileActionButton"
-import Notification from "./Notification"
+import MobileActionButton from "../UI/Buttons/MobileActionButton"
+import Notification from "./Components/Notification"
 import vClickOutside from 'v-click-outside'
 import {mapGetters} from "vuex";
 
diff --git a/resources/js/components/Others/NotificationsPopup.vue b/resources/js/components/Notifications/NotificationsPopup.vue
similarity index 86%
rename from resources/js/components/Others/NotificationsPopup.vue
rename to resources/js/components/Notifications/NotificationsPopup.vue
index 6427d827..94bc8b0e 100644
--- a/resources/js/components/Others/NotificationsPopup.vue
+++ b/resources/js/components/Notifications/NotificationsPopup.vue
@@ -52,13 +52,13 @@
 </template>
 
 <script>
-import MobileActionButton from '../FilesView/MobileActionButton'
-import Notification from '../Notifications/Notification'
-import ButtonBase from '../FilesView/ButtonBase'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
+import MobileActionButton from '../UI/Buttons/MobileActionButton'
+import Notification from './Components/Notification'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupHeader from '../Popups/Components/PopupHeader'
 import vClickOutside from 'v-click-outside'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/components/Others/ColorPicker.vue b/resources/js/components/Others/ColorPicker.vue
deleted file mode 100644
index 4c4969d4..00000000
--- a/resources/js/components/Others/ColorPicker.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-    <div class="color-pick-wrapper">
-        <label class="main-label">{{ $t('popup_rename.color_pick_label') }}:</label>
-        <ul class="color-wrapper">
-            <li v-for="(color, i) in colors" :key="i" @click="setColor(color)" class="single-color">
-                <check-icon v-if="color === selectedColor" class="color-icon" size="22" />
-                <span :style="{ background: color }" class="color-box"></span>
-            </li>
-        </ul>
-    </div>
-</template>
-
-<script>
-import { CheckIcon } from 'vue-feather-icons'
-import { mapGetters } from 'vuex'
-
-export default {
-    name: 'ColorPicker',
-    props: ['pickedColor'],
-    components: { CheckIcon },
-    computed: {
-        ...mapGetters(['config']),
-    },
-    data() {
-        return {
-            selectedColor: this.pickedColor,
-            colors: [
-                '#FE6F6F',
-                '#FE6F91',
-                '#FE6FC0',
-                '#FE6FF0',
-                '#DD6FFE',
-                '#AD6FFE',
-                '#7D6FFE',
-                '#6F90FE',
-                '#6FC0FE',
-                '#6FF0FE',
-                '#6FFEDD',
-                '#6FFEAD',
-                '#6FFE7D',
-                '#90FE6F',
-                '#C0FE6F',
-                '#F0FE6F',
-                '#FEDD6F',
-                '#FEAD6F',
-                '#FE7D6F',
-                '#4c4c4c',
-                '#06070B',
-            ],
-        }
-    },
-    methods: {
-        setColor(value) {
-            this.selectedColor = value
-
-            this.$emit('input', value)
-        },
-    },
-    created() {
-        this.colors.push(this.config.app_color)
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/inapp-forms';
-@import '../../../sass/vuefilemanager/forms';
-
-.color-pick-wrapper {
-    .color-wrapper {
-        margin-bottom: 20px;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, 32px);
-        justify-content: space-between;
-        gap: 7px;
-
-        .single-color {
-            height: 31px;
-            list-style: none;
-            border-radius: 8px;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-
-            .color-icon {
-                z-index: 2;
-
-                polyline {
-                    stroke: white;
-                }
-            }
-
-            .color-box {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                display: block;
-            }
-        }
-    }
-}
-
-.main-label {
-    @include font-size(14);
-    font-weight: 700;
-    margin-bottom: 8px;
-    display: block;
-}
-
-.set-folder-icon {
-    position: relative;
-}
-
-.dark {
-    .color-pick-wrapper {
-        .color-wrapper {
-            .single-color {
-                &.active-color {
-                    border: 2px solid;
-                }
-
-                &:hover {
-                    border: 2px solid $dark_mode_text_primary;
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/Others/EmptyPageContent.vue b/resources/js/components/Others/EmptyPageContent.vue
index 5e6d457c..ebbe096f 100644
--- a/resources/js/components/Others/EmptyPageContent.vue
+++ b/resources/js/components/Others/EmptyPageContent.vue
@@ -10,7 +10,7 @@
                 <h1 class="title">{{ title }}</h1>
                 <h2 class="description">{{ description }}</h2>
             </div>
-            <slot></slot>
+            <slot />
         </div>
     </div>
 </template>
diff --git a/resources/js/components/Others/Forms/SetupBox.vue b/resources/js/components/Others/Forms/SetupBox.vue
deleted file mode 100644
index 1da20ca4..00000000
--- a/resources/js/components/Others/Forms/SetupBox.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
-    <div class="setup-box" :class="theme">
-        <b class="title">{{ title }}</b>
-        <p class="description">{{ description }}</p>
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'SetupBox',
-    props: ['title', 'description', 'theme'],
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-
-.setup-box {
-    padding: 20px;
-    border-radius: 8px;
-    margin-bottom: 30px;
-
-    .title {
-        @include font-size(21);
-        margin-bottom: 5px;
-        display: block;
-        font-weight: 700;
-    }
-
-    .description {
-        @include font-size(15);
-        line-height: 1.5;
-        margin-bottom: 20px;
-    }
-
-    &.base {
-        background: $light_background;
-    }
-
-    &.danger {
-        background: $light_background;
-
-        .title {
-            color: $danger;
-        }
-    }
-
-    /deep/ input {
-        &[type='text'],
-        &[type='number'],
-        .input-area {
-            background: white;
-        }
-    }
-
-    /deep/ .input-area {
-        background: white;
-    }
-
-    /deep/ .form {
-        margin-top: 20px;
-
-        &.block-form {
-            max-width: 450px;
-
-            .single-line-form {
-                display: flex;
-
-                .submit-button {
-                    margin-left: 20px;
-                }
-            }
-        }
-    }
-}
-
-@media only screen and (max-width: 960px) {
-    .setup-box {
-        /deep/ .form {
-            &.block-form {
-                max-width: 100%;
-            }
-
-            input {
-                min-width: initial;
-            }
-        }
-    }
-}
-
-@media only screen and (max-width: 690px) {
-    .setup-box {
-        padding: 15px;
-
-        .title {
-            @include font-size(17);
-            margin-bottom: 10px;
-        }
-
-        .description {
-            @include font-size(14);
-        }
-
-        /deep/ .form.block-form {
-            .single-line-form {
-                display: block;
-
-                .submit-button {
-                    margin-left: 0;
-                    margin-top: 10px;
-                }
-            }
-        }
-    }
-}
-
-.dark {
-    .setup-box {
-        &.base {
-            background: $dark_mode_foreground;
-        }
-
-        &.danger {
-            background: $dark_mode_foreground;
-        }
-
-        /deep/ input {
-            &[type='text'],
-            &[type='number'],
-            .input-area {
-                background: $dark_mode_background;
-            }
-        }
-
-        /deep/ .input-area {
-            background: $dark_mode_background;
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/Others/Layout/PageTab.vue b/resources/js/components/Others/Layout/PageTab.vue
deleted file mode 100644
index 4973f34b..00000000
--- a/resources/js/components/Others/Layout/PageTab.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-    <div class="page-tab">
-        <div id="loader" v-show="isLoading">
-            <Spinner></Spinner>
-        </div>
-        <slot v-show="!isLoading"></slot>
-    </div>
-</template>
-
-<script>
-import Spinner from '../../FilesView/Spinner'
-
-export default {
-    name: 'PageTab',
-    props: ['isLoading'],
-    components: {
-        Spinner,
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../../sass/vuefilemanager/variables';
-@import '../../../../sass/vuefilemanager/mixins';
-</style>
diff --git a/resources/js/components/Others/PageHeader.vue b/resources/js/components/Others/PageHeader.vue
deleted file mode 100644
index c79295c9..00000000
--- a/resources/js/components/Others/PageHeader.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-    <div class="page-header">
-        <div class="go-back" v-if="canBack" @click="$router.back()">
-            <chevron-left-icon size="17" />
-        </div>
-        <div class="content">
-            <h1 class="title">{{ title }}</h1>
-        </div>
-    </div>
-</template>
-
-<script>
-import { ChevronLeftIcon } from 'vue-feather-icons'
-
-export default {
-    name: 'PageHeader',
-    props: ['title', 'canBack'],
-    components: {
-        ChevronLeftIcon,
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
-
-.page-header {
-    display: flex;
-    align-items: center;
-    background: white;
-    z-index: 9;
-    width: 100%;
-    position: sticky;
-    top: 0;
-    padding-top: 20px;
-    padding-bottom: 20px;
-
-    .title {
-        @include font-size(18);
-        font-weight: 700;
-        color: $text;
-    }
-
-    .go-back {
-        margin-right: 10px;
-        cursor: pointer;
-
-        svg {
-            vertical-align: middle;
-            margin-top: -4px;
-        }
-    }
-}
-
-@media only screen and (max-width: 960px) {
-    .page-header {
-        .title {
-            @include font-size(18);
-        }
-    }
-}
-
-@media only screen and (max-width: 690px) {
-    .page-header {
-        display: none;
-    }
-}
-
-.dark {
-    .page-header {
-        background: $dark_mode_background;
-
-        .title {
-            color: $dark_mode_text_primary;
-        }
-
-        .icon path {
-            fill: $theme;
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/Others/PlanPricingTables.vue b/resources/js/components/Others/PlanPricingTables.vue
deleted file mode 100644
index 67ad947c..00000000
--- a/resources/js/components/Others/PlanPricingTables.vue
+++ /dev/null
@@ -1,220 +0,0 @@
-<template>
-    <div class="plans-wrapper" v-if="plans">
-        <article class="plan" v-for="(plan, i) in plans" :key="i">
-            <div class="plan-wrapper">
-                <header class="plan-header">
-                    <div class="icon">
-                        <hard-drive-icon class="text-theme" size="26" />
-                    </div>
-                    <h1 class="title">{{ plan.data.attributes.name }}</h1>
-                    <h2 class="description">
-                        {{ plan.data.attributes.description }}
-                    </h2>
-                </header>
-                <section class="plan-features">
-                    <b class="storage-size">{{ plan.data.attributes.capacity_formatted }}</b>
-                    <span class="storage-description">{{ $t('page_pricing_tables.storage_capacity') }}</span>
-                </section>
-                <footer class="plan-footer">
-                    <b class="price text-theme">
-                        {{ plan.data.attributes.price }}/{{ $t('mo.') }}
-                        <small v-if="plan.data.attributes.tax_rates.length > 0" class="vat-disclaimer">{{
-                            $t('page_pricing_tables.vat_excluded')
-                        }}</small>
-                    </b>
-                    <ButtonBase
-                        @click.native="selectPlan(plan)"
-                        type="submit"
-                        button-style="secondary"
-                        class="sign-in-button"
-                    >
-                        {{ $t('get_it') }}
-                    </ButtonBase>
-                </footer>
-            </div>
-        </article>
-    </div>
-</template>
-
-<script>
-import ButtonBase from '../FilesView/ButtonBase'
-import { HardDriveIcon } from 'vue-feather-icons'
-import { mapGetters } from 'vuex'
-import axios from 'axios'
-
-export default {
-    name: 'PlanPricingTables',
-    components: {
-        HardDriveIcon,
-        ButtonBase,
-    },
-    props: ['customRoute'],
-    data() {
-        return {
-            plans: undefined,
-        }
-    },
-    computed: {
-        ...mapGetters(['user']),
-    },
-    methods: {
-        selectPlan(plan) {
-            this.$emit('selected-plan', plan)
-
-            let route = this.customRoute ? this.customRoute : 'UpgradeBilling'
-
-            this.$router.push({ name: route })
-        },
-    },
-    created() {
-        axios.get('/api/pricing').then((response) => {
-            this.plans = response.data.filter((plan) => {
-                return plan.data.attributes.capacity > this.user.data.attributes.max_storage_amount
-            })
-            this.$emit('load', false)
-        })
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
-
-.plan {
-    text-align: center;
-    flex: 0 0 33%;
-    padding: 0 25px;
-    margin-bottom: 45px;
-
-    .plan-wrapper {
-        box-shadow: 0 7px 20px 5px hsla(220, 36%, 16%, 0.03);
-        padding: 25px;
-        border-radius: 8px;
-        @include transition;
-
-        &:hover {
-            @include transform(translateY(-20px) scale(1.05));
-            box-shadow: 0 15px 25px 5px hsla(220, 36%, 16%, 0.08);
-        }
-    }
-
-    .plan-header {
-        .icon {
-            path,
-            line,
-            polyline,
-            rect,
-            circle {
-                color: inherit;
-            }
-        }
-
-        .title {
-            @include font-size(22);
-            font-weight: 800;
-        }
-
-        .description {
-            @include font-size(14);
-            font-weight: 600;
-        }
-    }
-
-    .plan-features {
-        margin: 65px 0;
-
-        .storage-size {
-            @include font-size(48);
-            font-weight: 900;
-            line-height: 1.1;
-        }
-
-        .storage-description {
-            display: block;
-            @include font-size(15);
-            font-weight: 800;
-        }
-    }
-
-    .plan-footer {
-        .sign-in-button {
-            width: 100%;
-            text-align: center;
-        }
-
-        .price {
-            @include font-size(18);
-            display: block;
-            margin-bottom: 20px;
-
-            .vat-disclaimer {
-                @include font-size(11);
-                color: $text;
-                display: block;
-                font-weight: 300;
-                opacity: 0.45;
-                margin-top: 5px;
-            }
-        }
-    }
-}
-
-.plans-wrapper {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -25px;
-    justify-content: center;
-}
-
-@media only screen and (max-width: 960px) {
-    .plans-wrapper {
-        display: block;
-        margin: 0;
-    }
-}
-
-.dark {
-    .plan {
-        .plan-wrapper {
-            background: $dark_mode_foreground;
-        }
-
-        .plan-header {
-            .title {
-                color: $dark_mode_text_primary;
-            }
-
-            .description {
-                color: $dark_mode_text_secondary;
-            }
-        }
-
-        .plan-features {
-            .storage-size {
-                color: $dark_mode_text_primary;
-            }
-
-            .storage-description {
-                color: $dark_mode_text_primary;
-            }
-        }
-
-        .plan-footer {
-            .sign-in-button {
-                background: rgba($theme, 0.1);
-
-                /deep/ .content {
-                    color: $theme;
-                }
-            }
-
-            .price {
-                .vat-disclaimer {
-                    color: $dark_mode_text_primary;
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/Others/TabOption.vue b/resources/js/components/Others/TabOption.vue
deleted file mode 100644
index fef0a886..00000000
--- a/resources/js/components/Others/TabOption.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-    <div v-if="isActive">
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'TabOption',
-    props: ['title', 'icon', 'selected'],
-    data() {
-        return {
-            isActive: false,
-        }
-    },
-    mounted() {
-        this.isActive = this.selected
-    },
-}
-</script>
diff --git a/resources/js/components/Others/TabWrapper.vue b/resources/js/components/Others/TabWrapper.vue
deleted file mode 100644
index 48ccd1c0..00000000
--- a/resources/js/components/Others/TabWrapper.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-    <div>
-        <div class="tab-wrapper">
-            <div
-                class="tab"
-                :class="{ active: tab.isActive }"
-                @click="selectTab(tab)"
-                v-for="(tab, i) in tabs"
-                :key="i"
-            >
-                <!--Icon-->
-                <mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme dark-text-theme" size="17" />
-                <link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme dark-text-theme" size="17" />
-                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme dark-text-theme" size="17" />
-                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme dark-text-theme" size="17" />
-
-                <!--Title-->
-                <b class="tab-title">
-                    {{ tab.title }}
-                </b>
-            </div>
-        </div>
-        <slot></slot>
-    </div>
-</template>
-
-<script>
-import { LinkIcon, MailIcon, SmileIcon, FolderIcon } from 'vue-feather-icons'
-
-export default {
-    name: 'TabWrapper',
-    components: {
-        LinkIcon,
-        MailIcon,
-        SmileIcon,
-        FolderIcon,
-    },
-    data() {
-        return {
-            tabs: [],
-        }
-    },
-    methods: {
-        selectTab(selectedTab) {
-            this.tabs.forEach((tab) => {
-                tab.isActive = tab.title == selectedTab.title
-            })
-        },
-    },
-    mounted() {
-        this.tabs = this.$children
-    },
-}
-</script>
-
-<style scoped lang="scss">
-@import '../../../sass/vuefilemanager/inapp-forms';
-@import '../../../sass/vuefilemanager/forms';
-
-.tab-wrapper {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 20px;
-    cursor: pointer;
-    align-items: center;
-    background: white;
-    color: $text;
-    border-radius: 8px;
-    overflow: hidden;
-    border: 1px solid #e8e9eb;
-
-    .tab-title {
-        @include font-size(14);
-    }
-
-    .tab {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 8px;
-
-        &.active {
-            background: $light_background;
-
-            .tab-title {
-                color: $text;
-            }
-        }
-    }
-
-    .tab-icon {
-        margin-right: 10px;
-
-        path,
-        circle,
-        line,
-        polyline {
-            color: inherit !important;
-        }
-    }
-}
-
-.dark {
-    .tab-wrapper {
-        background: $dark_mode_foreground;
-        border-color: transparent;
-
-        .tab.active {
-            background: lighten($dark_mode_foreground, 7%);
-
-            .tab-title {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
-
-    .popup-wrapper {
-        .tab-wrapper {
-            background: lighten($dark_mode_foreground, 2%);
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/Others/ThemeLabel.vue b/resources/js/components/Others/ThemeLabel.vue
deleted file mode 100644
index 4fa8c539..00000000
--- a/resources/js/components/Others/ThemeLabel.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-    <b class="theme-label">
-        <slot></slot>
-    </b>
-</template>
-
-<script>
-export default {
-    name: 'TextLabel',
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
-
-.theme-label {
-    @include font-size(14);
-    color: $theme;
-    font-weight: 600;
-    display: block;
-    margin-bottom: 20px;
-}
-</style>
diff --git a/resources/js/components/FilesView/Alert.vue b/resources/js/components/Popups/Alert.vue
similarity index 96%
rename from resources/js/components/FilesView/Alert.vue
rename to resources/js/components/Popups/Alert.vue
index 536bb19f..4af7b0c1 100644
--- a/resources/js/components/FilesView/Alert.vue
+++ b/resources/js/components/Popups/Alert.vue
@@ -29,9 +29,9 @@
 </template>
 
 <script>
-import ButtonBase from './ButtonBase'
+import ButtonBase from '../UI/Buttons/ButtonBase'
 import { events } from '../../bus'
-import PopupActions from "../Others/Popup/PopupActions";
+import PopupActions from "./Components/PopupActions";
 
 export default {
     name: 'AlertPopup',
diff --git a/resources/js/components/Others/Popup/PopupActions.vue b/resources/js/components/Popups/Components/PopupActions.vue
similarity index 100%
rename from resources/js/components/Others/Popup/PopupActions.vue
rename to resources/js/components/Popups/Components/PopupActions.vue
diff --git a/resources/js/components/Others/Popup/PopupContent.vue b/resources/js/components/Popups/Components/PopupContent.vue
similarity index 100%
rename from resources/js/components/Others/Popup/PopupContent.vue
rename to resources/js/components/Popups/Components/PopupContent.vue
diff --git a/resources/js/components/Others/Popup/PopupHeader.vue b/resources/js/components/Popups/Components/PopupHeader.vue
similarity index 100%
rename from resources/js/components/Others/Popup/PopupHeader.vue
rename to resources/js/components/Popups/Components/PopupHeader.vue
diff --git a/resources/js/components/Others/Popup/PopupWrapper.vue b/resources/js/components/Popups/Components/PopupWrapper.vue
similarity index 100%
rename from resources/js/components/Others/Popup/PopupWrapper.vue
rename to resources/js/components/Popups/Components/PopupWrapper.vue
diff --git a/resources/js/components/Others/Popup/ConfirmPopup.vue b/resources/js/components/Popups/ConfirmPopup.vue
similarity index 91%
rename from resources/js/components/Others/Popup/ConfirmPopup.vue
rename to resources/js/components/Popups/ConfirmPopup.vue
index 4a8818e7..b58ea367 100644
--- a/resources/js/components/Others/Popup/ConfirmPopup.vue
+++ b/resources/js/components/Popups/ConfirmPopup.vue
@@ -25,10 +25,10 @@
 </template>
 
 <script>
-import PopupWrapper from './PopupWrapper'
-import PopupActions from './PopupActions'
-import ButtonBase from '../../FilesView/ButtonBase'
-import { events } from '../../../bus'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import { events } from '../../bus'
 
 export default {
     name: 'ConfirmPopup',
diff --git a/resources/js/components/Others/CreateFolderPopup.vue b/resources/js/components/Popups/CreateFolderPopup.vue
similarity index 86%
rename from resources/js/components/Others/CreateFolderPopup.vue
rename to resources/js/components/Popups/CreateFolderPopup.vue
index 4396b3d0..544f0af2 100644
--- a/resources/js/components/Others/CreateFolderPopup.vue
+++ b/resources/js/components/Popups/CreateFolderPopup.vue
@@ -48,18 +48,18 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import ThumbnailItem from './ThumbnailItem'
-import ButtonBase from '../FilesView/ButtonBase'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ButtonBase from '../UI/Buttons/ButtonBase'
 import { required } from 'vee-validate/dist/rules'
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import AppInputText from '../Admin/AppInputText'
-import SwitchInput from './Forms/SwitchInput'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import SwitchInput from '../Inputs/SwitchInput'
 import { events } from '../../bus'
-import EmojiPicker from './EmojiPicker'
+import EmojiPicker from '../Emoji/EmojiPicker'
 
 export default {
     name: 'CreateFolderPopup',
diff --git a/resources/js/components/Others/CreateLanguage.vue b/resources/js/components/Popups/CreateLanguagePopup.vue
similarity index 98%
rename from resources/js/components/Others/CreateLanguage.vue
rename to resources/js/components/Popups/CreateLanguagePopup.vue
index 385ab430..dee8caad 100644
--- a/resources/js/components/Others/CreateLanguage.vue
+++ b/resources/js/components/Popups/CreateLanguagePopup.vue
@@ -57,20 +57,20 @@
 </template>
 
 <script>
-import AppInputText from '../Admin/AppInputText'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import SelectInput from './Forms/SelectInput'
-import ButtonBase from '../FilesView/ButtonBase'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import SelectInput from '../Inputs/SelectInput'
+import ButtonBase from '../UI/Buttons/ButtonBase'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '../../bus'
 import axios from 'axios'
 
 export default {
-    name: 'CreateLanguage',
+    name: 'CreateLanguagePopup',
     components: {
         ValidationProvider,
         ValidationObserver,
diff --git a/resources/js/components/Others/CreatePersonalTokenPopup.vue b/resources/js/components/Popups/CreatePersonalTokenPopup.vue
similarity index 90%
rename from resources/js/components/Others/CreatePersonalTokenPopup.vue
rename to resources/js/components/Popups/CreatePersonalTokenPopup.vue
index 23e71026..9b3530ca 100644
--- a/resources/js/components/Others/CreatePersonalTokenPopup.vue
+++ b/resources/js/components/Popups/CreatePersonalTokenPopup.vue
@@ -57,15 +57,15 @@
 </template>
 
 <script>
-import AppInputText from '../Admin/AppInputText'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import CopyInput from './Forms/CopyInput'
-import ButtonBase from '../FilesView/ButtonBase'
-import InfoBox from './Forms/InfoBox'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import CopyInput from '../Inputs/CopyInput'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import InfoBox from '../UI/Others/InfoBox'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '../../bus'
 import axios from 'axios'
diff --git a/resources/js/components/Others/MoveItemPopup.vue b/resources/js/components/Popups/MoveItemPopup.vue
similarity index 91%
rename from resources/js/components/Others/MoveItemPopup.vue
rename to resources/js/components/Popups/MoveItemPopup.vue
index bdc9922e..e5276dbd 100644
--- a/resources/js/components/Others/MoveItemPopup.vue
+++ b/resources/js/components/Popups/MoveItemPopup.vue
@@ -44,15 +44,15 @@
 </template>
 
 <script>
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import TitlePreview from '../FilesView/TitlePreview'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import ThumbnailItem from './ThumbnailItem'
-import ButtonBase from '../FilesView/ButtonBase'
-import Spinner from '../FilesView/Spinner'
-import TreeMenu from './TreeMenu'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import TitlePreview from '../UI/Labels/TitlePreview'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import Spinner from '../UI/Others/Spinner'
+import TreeMenu from '../UI/Trees/TreeMenu'
 import { isArray } from 'lodash'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
diff --git a/resources/js/components/FilesView/ProcessingPopup.vue b/resources/js/components/Popups/ProcessingPopup.vue
similarity index 98%
rename from resources/js/components/FilesView/ProcessingPopup.vue
rename to resources/js/components/Popups/ProcessingPopup.vue
index 34315f56..9bda8587 100644
--- a/resources/js/components/FilesView/ProcessingPopup.vue
+++ b/resources/js/components/Popups/ProcessingPopup.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import Spinner from './Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Others/RenameItemPopup.vue b/resources/js/components/Popups/RenameItemPopup.vue
similarity index 91%
rename from resources/js/components/Others/RenameItemPopup.vue
rename to resources/js/components/Popups/RenameItemPopup.vue
index d74f23fe..9c8f0189 100644
--- a/resources/js/components/Others/RenameItemPopup.vue
+++ b/resources/js/components/Popups/RenameItemPopup.vue
@@ -66,17 +66,17 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import ThumbnailItem from './ThumbnailItem'
-import ButtonBase from '../FilesView/ButtonBase'
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import AppInputText from '../Admin/AppInputText'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { required } from 'vee-validate/dist/rules'
-import SwitchInput from './Forms/SwitchInput'
-import EmojiPicker from './EmojiPicker'
+import SwitchInput from '../Inputs/SwitchInput'
+import EmojiPicker from '../Emoji/EmojiPicker'
 import { XIcon } from 'vue-feather-icons'
 import { events } from '../../bus'
 
diff --git a/resources/js/components/Others/ShareCreatePopup.vue b/resources/js/components/Popups/ShareCreatePopup.vue
similarity index 92%
rename from resources/js/components/Others/ShareCreatePopup.vue
rename to resources/js/components/Popups/ShareCreatePopup.vue
index 60c8f8b1..68e7f8b2 100644
--- a/resources/js/components/Others/ShareCreatePopup.vue
+++ b/resources/js/components/Popups/ShareCreatePopup.vue
@@ -142,22 +142,22 @@
 </template>
 
 <script>
-import AppInputText from '../Admin/AppInputText'
-import AppInputSwitch from '../Admin/AppInputSwitch'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import SelectBoxInput from './Forms/SelectBoxInput'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import MultiEmailInput from './Forms/MultiEmailInput'
-import SwitchInput from './Forms/SwitchInput'
-import SelectInput from './Forms/SelectInput'
-import ThumbnailItem from './ThumbnailItem'
-import ActionButton from './ActionButton'
-import CopyShareLink from './Forms/CopyShareLink'
-import ButtonBase from '../FilesView/ButtonBase'
-import InfoBox from './Forms/InfoBox'
+import SelectBoxInput from '../Inputs/SelectBoxInput'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import MultiEmailInput from '../Inputs/MultiEmailInput'
+import SwitchInput from '../Inputs/SwitchInput'
+import SelectInput from '../Inputs/SelectInput'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ActionButton from '../UI/Buttons/ActionButton'
+import CopyShareLink from '../Inputs/CopyShareLink'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import InfoBox from '../UI/Others/InfoBox'
 import { LinkIcon, MailIcon } from 'vue-feather-icons'
 import { required } from 'vee-validate/dist/rules'
 import { mapGetters } from 'vuex'
diff --git a/resources/js/components/Others/ShareEditPopup.vue b/resources/js/components/Popups/ShareEditPopup.vue
similarity index 94%
rename from resources/js/components/Others/ShareEditPopup.vue
rename to resources/js/components/Popups/ShareEditPopup.vue
index d4b4ccf2..9f33a6ee 100644
--- a/resources/js/components/Others/ShareEditPopup.vue
+++ b/resources/js/components/Popups/ShareEditPopup.vue
@@ -189,22 +189,22 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import MultiEmailInput from './Forms/MultiEmailInput'
-import SelectBoxInput from './Forms/SelectBoxInput'
-import CopyShareLink from './Forms/CopyShareLink'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import SwitchInput from './Forms/SwitchInput'
-import SelectInput from './Forms/SelectInput'
-import ThumbnailItem from './ThumbnailItem'
-import ActionButton from './ActionButton'
-import ButtonBase from '../FilesView/ButtonBase'
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import AppInputText from '../Admin/AppInputText'
+import MultiEmailInput from '../Inputs/MultiEmailInput'
+import SelectBoxInput from '../Inputs/SelectBoxInput'
+import CopyShareLink from '../Inputs/CopyShareLink'
+import PopupWrapper from './Components/PopupWrapper'
+import PopupActions from './Components/PopupActions'
+import PopupContent from './Components/PopupContent'
+import PopupHeader from './Components/PopupHeader'
+import SwitchInput from '../Inputs/SwitchInput'
+import SelectInput from '../Inputs/SelectInput'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ActionButton from '../UI/Buttons/ActionButton'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { required } from 'vee-validate/dist/rules'
-import Spinner from '../FilesView/Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
diff --git a/resources/js/components/Sidebar/ContentGroup.vue b/resources/js/components/Sidebar/ContentGroup.vue
index ee4feea0..4fee7521 100644
--- a/resources/js/components/Sidebar/ContentGroup.vue
+++ b/resources/js/components/Sidebar/ContentGroup.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import TextLabel from '../Others/TextLabel'
+import TextLabel from '../UI/Labels/TextLabel'
 import { ChevronUpIcon } from 'vue-feather-icons'
 
 export default {
diff --git a/resources/js/components/Sidebar/ContentSidebar.vue b/resources/js/components/Sidebar/ContentSidebar.vue
index 6f785f4a..3e2dc7b4 100644
--- a/resources/js/components/Sidebar/ContentSidebar.vue
+++ b/resources/js/components/Sidebar/ContentSidebar.vue
@@ -3,7 +3,7 @@
         class="content-sidebar z-[9] hidden w-52 flex-none select-none overflow-y-auto bg-light-background pt-6 dark:bg-dark-background lg:block xl:w-56"
         id="content-sidebar"
     >
-        <slot></slot>
+        <slot />
     </section>
 </template>
 
diff --git a/resources/js/components/Sidebar/SidebarNavigation.vue b/resources/js/components/Sidebar/SidebarNavigation.vue
index 526dec2c..a34f3413 100644
--- a/resources/js/components/Sidebar/SidebarNavigation.vue
+++ b/resources/js/components/Sidebar/SidebarNavigation.vue
@@ -72,11 +72,11 @@
 </template>
 
 <script>
-import MemberAvatar from '../FilesView/MemberAvatar'
+import MemberAvatar from '../UI/Others/MemberAvatar'
 import {mapGetters} from 'vuex'
 import {HardDriveIcon, MoonIcon, PowerIcon, SettingsIcon, SunIcon, UserIcon,} from 'vue-feather-icons'
 import NotificationCenter from "../Notifications/NotificationCenter"
-import NotificationBell from "./NotificationBell";
+import NotificationBell from "../Notifications/Components/NotificationBell";
 
 export default {
     name: 'SidebarNavigation',
diff --git a/resources/js/components/Spotlight/CategoryName.vue b/resources/js/components/Spotlight/Components/CategoryName.vue
similarity index 86%
rename from resources/js/components/Spotlight/CategoryName.vue
rename to resources/js/components/Spotlight/Components/CategoryName.vue
index 4df947c9..f7693186 100644
--- a/resources/js/components/Spotlight/CategoryName.vue
+++ b/resources/js/components/Spotlight/Components/CategoryName.vue
@@ -1,6 +1,6 @@
 <template>
     <b class="mb-1.5 block text-xs text-gray-500">
-        <slot></slot>
+        <slot />
     </b>
 </template>
 <script>
diff --git a/resources/js/components/Spotlight/FilterSuggestion.vue b/resources/js/components/Spotlight/Components/FilterSuggestion.vue
similarity index 100%
rename from resources/js/components/Spotlight/FilterSuggestion.vue
rename to resources/js/components/Spotlight/Components/FilterSuggestion.vue
diff --git a/resources/js/components/Spotlight/KeyboardHints.vue b/resources/js/components/Spotlight/Components/KeyboardHints.vue
similarity index 100%
rename from resources/js/components/Spotlight/KeyboardHints.vue
rename to resources/js/components/Spotlight/Components/KeyboardHints.vue
diff --git a/resources/js/components/Spotlight/Spotlight.vue b/resources/js/components/Spotlight/Spotlight.vue
index 1f9b69eb..653299b6 100644
--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -300,12 +300,12 @@
 
 <script>
 import { events } from '../../bus'
-import ItemList from '../FilesView/ItemList'
-import MemberAvatar from '../FilesView/MemberAvatar'
-import Spinner from '../FilesView/Spinner'
-import CategoryName from './CategoryName'
-import FilterSuggestion from './FilterSuggestion'
-import KeyboardHints from './KeyboardHints'
+import ItemList from '../UI/Entries/ItemList'
+import MemberAvatar from '../UI/Others/MemberAvatar'
+import Spinner from '../UI/Others/Spinner'
+import CategoryName from './Components/CategoryName'
+import FilterSuggestion from './Components/FilterSuggestion'
+import KeyboardHints from './Components/KeyboardHints'
 import axios from 'axios'
 import { debounce } from 'lodash'
 import {
diff --git a/resources/js/components/Subscription/FixedTransactionRow.vue b/resources/js/components/Subscription/FixedTransactionRow.vue
index 85159304..f1e47d03 100644
--- a/resources/js/components/Subscription/FixedTransactionRow.vue
+++ b/resources/js/components/Subscription/FixedTransactionRow.vue
@@ -62,9 +62,9 @@
     </tr>
 </template>
 <script>
-import MemberAvatar from '../FilesView/MemberAvatar'
+import MemberAvatar from '../UI/Others/MemberAvatar'
 import MeteredTransactionDetailRow from './MeteredTransactionDetailRow'
-import ColorLabel from '../Others/ColorLabel'
+import ColorLabel from '../UI/Labels/ColorLabel'
 import { EyeIcon, FileTextIcon } from 'vue-feather-icons'
 
 export default {
diff --git a/resources/js/components/Subscription/MeteredTransactionRow.vue b/resources/js/components/Subscription/MeteredTransactionRow.vue
index 7f08f5ea..4635e523 100644
--- a/resources/js/components/Subscription/MeteredTransactionRow.vue
+++ b/resources/js/components/Subscription/MeteredTransactionRow.vue
@@ -74,9 +74,9 @@
     </tr>
 </template>
 <script>
-import MemberAvatar from '../FilesView/MemberAvatar'
+import MemberAvatar from '../UI/Others/MemberAvatar'
 import MeteredTransactionDetailRow from './MeteredTransactionDetailRow'
-import ColorLabel from '../Others/ColorLabel'
+import ColorLabel from '../UI/Labels/ColorLabel'
 import { EyeIcon, FileTextIcon } from 'vue-feather-icons'
 
 export default {
diff --git a/resources/js/components/Others/PaymentMethod.vue b/resources/js/components/Subscription/PaymentMethod.vue
similarity index 95%
rename from resources/js/components/Others/PaymentMethod.vue
rename to resources/js/components/Subscription/PaymentMethod.vue
index 0264b9d0..fc021fb1 100644
--- a/resources/js/components/Others/PaymentMethod.vue
+++ b/resources/js/components/Subscription/PaymentMethod.vue
@@ -7,7 +7,7 @@
             </small>
         </div>
         <div v-if="$slots.default" class="bg-theme-200 relative inline-block rounded-lg px-3 py-1">
-            <slot></slot>
+            <slot />
         </div>
     </div>
 </template>
diff --git a/resources/js/components/Subscription/PlanDetail.vue b/resources/js/components/Subscription/PlanDetail.vue
index 149d4a21..eefedbc3 100644
--- a/resources/js/components/Subscription/PlanDetail.vue
+++ b/resources/js/components/Subscription/PlanDetail.vue
@@ -32,7 +32,7 @@
 </template>
 <script>
 import { CheckIcon } from 'vue-feather-icons'
-import CheckBox from '../FilesView/CheckBox'
+import CheckBox from '../Inputs/CheckBox'
 
 export default {
     name: 'PlanDetail',
diff --git a/resources/js/components/Subscription/PlanPeriodSwitcher.vue b/resources/js/components/Subscription/PlanPeriodSwitcher.vue
index dfe521c2..d940671f 100644
--- a/resources/js/components/Subscription/PlanPeriodSwitcher.vue
+++ b/resources/js/components/Subscription/PlanPeriodSwitcher.vue
@@ -16,7 +16,7 @@
 	</div>
 </template>
 <script>
-import SwitchInput from '../Others/Forms/SwitchInput'
+import SwitchInput from '../Inputs/SwitchInput'
 
 export default {
 	name: 'PlanPeriodSwitcher',
diff --git a/resources/js/components/Subscription/ChangeSubscriptionPopup.vue b/resources/js/components/Subscription/Popups/ChangeSubscriptionPopup.vue
similarity index 90%
rename from resources/js/components/Subscription/ChangeSubscriptionPopup.vue
rename to resources/js/components/Subscription/Popups/ChangeSubscriptionPopup.vue
index 70f11b2b..933da5f1 100644
--- a/resources/js/components/Subscription/ChangeSubscriptionPopup.vue
+++ b/resources/js/components/Subscription/Popups/ChangeSubscriptionPopup.vue
@@ -44,18 +44,18 @@
 </template>
 
 <script>
-import PopupWrapper from '../Others/Popup/PopupWrapper'
-import PopupActions from '../Others/Popup/PopupActions'
-import PopupContent from '../Others/Popup/PopupContent'
-import PopupHeader from '../Others/Popup/PopupHeader'
-import ButtonBase from '../FilesView/ButtonBase'
-import PlanDetail from './PlanDetail'
+import PopupWrapper from '../../Popups/Components/PopupWrapper'
+import PopupActions from '../../Popups/Components/PopupActions'
+import PopupContent from '../../Popups/Components/PopupContent'
+import PopupHeader from '../../Popups/Components/PopupHeader'
+import ButtonBase from '../../UI/Buttons/ButtonBase'
+import PlanDetail from '../PlanDetail'
 import {mapGetters} from 'vuex'
-import {events} from '../../bus'
+import {events} from '../../../bus'
 import axios from 'axios'
-import Spinner from '../FilesView/Spinner'
-import InfoBox from '../Others/Forms/InfoBox'
-import PlanPeriodSwitcher from "./PlanPeriodSwitcher";
+import Spinner from '../../UI/Others/Spinner'
+import InfoBox from '../../UI/Others/InfoBox'
+import PlanPeriodSwitcher from "../PlanPeriodSwitcher";
 
 export default {
     name: 'ChangeSubscriptionPopup',
diff --git a/resources/js/components/Others/ChargePaymentPopup.vue b/resources/js/components/Subscription/Popups/ChargePaymentPopup.vue
similarity index 91%
rename from resources/js/components/Others/ChargePaymentPopup.vue
rename to resources/js/components/Subscription/Popups/ChargePaymentPopup.vue
index 527d1ba3..ecb6170b 100644
--- a/resources/js/components/Others/ChargePaymentPopup.vue
+++ b/resources/js/components/Subscription/Popups/ChargePaymentPopup.vue
@@ -63,16 +63,16 @@
 </template>
 
 <script>
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import ButtonBase from '../FilesView/ButtonBase'
+import PopupWrapper from '../../Popups/Components/PopupWrapper'
+import PopupActions from '../../Popups/Components/PopupActions'
+import PopupContent from '../../Popups/Components/PopupContent'
+import PopupHeader from '../../Popups/Components/PopupHeader'
+import ButtonBase from '../../UI/Buttons/ButtonBase'
 import { loadScript } from '@paypal/paypal-js'
-import PaymentMethod from './PaymentMethod'
-import Spinner from '../FilesView/Spinner'
-import InfoBox from "./Forms/InfoBox"
-import { events } from '../../bus'
+import PaymentMethod from '../PaymentMethod'
+import Spinner from '../../UI/Others/Spinner'
+import InfoBox from "../../UI/Others/InfoBox"
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
 import axios from "axios";
 
diff --git a/resources/js/components/Subscription/SubscribeAccountPopup.vue b/resources/js/components/Subscription/Popups/SubscribeAccountPopup.vue
similarity index 94%
rename from resources/js/components/Subscription/SubscribeAccountPopup.vue
rename to resources/js/components/Subscription/Popups/SubscribeAccountPopup.vue
index 6bb65de6..5164f1b7 100644
--- a/resources/js/components/Subscription/SubscribeAccountPopup.vue
+++ b/resources/js/components/Subscription/Popups/SubscribeAccountPopup.vue
@@ -118,21 +118,21 @@
 </template>
 
 <script>
-import PaymentMethod from '../Others/PaymentMethod'
+import PaymentMethod from '../PaymentMethod'
 import { loadScript } from '@paypal/paypal-js'
-import SwitchInput from '../Others/Forms/SwitchInput'
-import PopupWrapper from '../Others/Popup/PopupWrapper'
-import PopupActions from '../Others/Popup/PopupActions'
-import PopupContent from '../Others/Popup/PopupContent'
-import PopupHeader from '../Others/Popup/PopupHeader'
-import ButtonBase from '../FilesView/ButtonBase'
-import PlanDetail from './PlanDetail'
+import SwitchInput from '../../Inputs/SwitchInput'
+import PopupWrapper from '../../Popups/Components/PopupWrapper'
+import PopupActions from '../../Popups/Components/PopupActions'
+import PopupContent from '../../Popups/Components/PopupContent'
+import PopupHeader from '../../Popups/Components/PopupHeader'
+import ButtonBase from '../../UI/Buttons/ButtonBase'
+import PlanDetail from '../PlanDetail'
 import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 import axios from 'axios'
-import Spinner from '../FilesView/Spinner'
-import InfoBox from '../Others/Forms/InfoBox'
-import PlanPeriodSwitcher from './PlanPeriodSwitcher'
+import Spinner from '../../UI/Others/Spinner'
+import InfoBox from '../../UI/Others/InfoBox'
+import PlanPeriodSwitcher from '../PlanPeriodSwitcher'
 
 
 export default {
diff --git a/resources/js/components/Subscription/UserBalance.vue b/resources/js/components/Subscription/UserBalance.vue
index 79c3480c..0e684661 100644
--- a/resources/js/components/Subscription/UserBalance.vue
+++ b/resources/js/components/Subscription/UserBalance.vue
@@ -51,9 +51,9 @@
 </template>
 <script>
 import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
-import ButtonBase from '../FilesView/ButtonBase'
-import FormLabel from '../Others/Forms/FormLabel'
-import AppInputText from '../Admin/AppInputText'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import FormLabel from '../UI/Labels/FormLabel'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Subscription/UserBillingAlerts.vue b/resources/js/components/Subscription/UserBillingAlerts.vue
index 0b219a68..e6866783 100644
--- a/resources/js/components/Subscription/UserBillingAlerts.vue
+++ b/resources/js/components/Subscription/UserBillingAlerts.vue
@@ -113,9 +113,9 @@
 </template>
 <script>
 import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
-import ButtonBase from '../FilesView/ButtonBase'
-import AppInputText from '../Admin/AppInputText'
-import FormLabel from '../Others/Forms/FormLabel'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import FormLabel from '../UI/Labels/FormLabel'
 import { Edit2Icon, Trash2Icon } from 'vue-feather-icons'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
diff --git a/resources/js/components/Subscription/UserEditSubscription.vue b/resources/js/components/Subscription/UserEditSubscription.vue
index 570ca9a1..0a43d6b4 100644
--- a/resources/js/components/Subscription/UserEditSubscription.vue
+++ b/resources/js/components/Subscription/UserEditSubscription.vue
@@ -36,11 +36,11 @@
 </template>
 
 <script>
-import AppInputButton from '../Admin/AppInputButton'
-import AppInputText from '../Admin/AppInputText'
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import ButtonBase from '../FilesView/ButtonBase'
-import FormLabel from '../Others/Forms/FormLabel'
+import AppInputButton from '../Forms/Layouts/AppInputButton'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import FormLabel from '../UI/Labels/FormLabel'
 import { events } from '../../bus'
 import axios from 'axios'
 
diff --git a/resources/js/components/Subscription/UserEmptySubscription.vue b/resources/js/components/Subscription/UserEmptySubscription.vue
index 4e4686df..e6429ece 100644
--- a/resources/js/components/Subscription/UserEmptySubscription.vue
+++ b/resources/js/components/Subscription/UserEmptySubscription.vue
@@ -25,9 +25,9 @@
 </template>
 
 <script>
-import InfoBox from '../Others/Forms/InfoBox'
-import FormLabel from '../Others/Forms/FormLabel'
-import ButtonBase from '../FilesView/ButtonBase'
+import InfoBox from '../UI/Others/InfoBox'
+import FormLabel from '../UI/Labels/FormLabel'
+import ButtonBase from '../UI/Buttons/ButtonBase'
 
 export default {
     name: 'UserEmptySubscription',
diff --git a/resources/js/components/Subscription/UserFailedPayments.vue b/resources/js/components/Subscription/UserFailedPayments.vue
index dec5e566..67e651b3 100644
--- a/resources/js/components/Subscription/UserFailedPayments.vue
+++ b/resources/js/components/Subscription/UserFailedPayments.vue
@@ -50,8 +50,8 @@
 </template>
 
 <script>
-import FormLabel from '../Others/Forms/FormLabel'
-import InfoBox from '../Others/Forms/InfoBox'
+import FormLabel from '../UI/Labels/FormLabel'
+import InfoBox from '../UI/Others/InfoBox'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue b/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
index f3e2463e..99bb628f 100644
--- a/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
+++ b/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
@@ -22,8 +22,8 @@
     </div>
 </template>
 <script>
-import FormLabel from '../Others/Forms/FormLabel'
-import ProgressLine from '../Admin/ProgressLine'
+import FormLabel from '../UI/Labels/FormLabel'
+import ProgressLine from '../UI/ProgressChart/ProgressLine'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Subscription/UserStoredPaymentMethods.vue b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
index 7804310d..7b2cdb3b 100644
--- a/resources/js/components/Subscription/UserStoredPaymentMethods.vue
+++ b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
@@ -69,15 +69,15 @@
     </div>
 </template>
 <script>
-import ButtonBase from '../FilesView/ButtonBase'
-import FormLabel from '../Others/Forms/FormLabel'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import FormLabel from '../UI/Labels/FormLabel'
 import PaymentCard from './PaymentCard'
-import Spinner from '../FilesView/Spinner'
+import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 import { loadStripe } from '@stripe/stripe-js'
 import axios from 'axios'
-import InfoBox from "../Others/Forms/InfoBox";
+import InfoBox from "../UI/Others/InfoBox";
 
 // Define stripe variables
 let stripe,
diff --git a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
index de1ea788..5890fb74 100644
--- a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
@@ -24,11 +24,11 @@
     </div>
 </template>
 <script>
-import InfoBox from '../Others/Forms/InfoBox'
-import DatatableWrapper from '../Others/Tables/DatatableWrapper'
+import InfoBox from '../UI/Others/InfoBox'
+import DatatableWrapper from '../UI/Table/DatatableWrapper'
 import FixedTransactionRow from './FixedTransactionRow'
-import FormLabel from '../Others/Forms/FormLabel'
-import ColorLabel from '../Others/ColorLabel'
+import FormLabel from '../UI/Labels/FormLabel'
+import ColorLabel from '../UI/Labels/ColorLabel'
 
 export default {
     name: 'UserTransactionsForFixedBilling',
diff --git a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
index 7c84bb90..3254573b 100644
--- a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
@@ -27,10 +27,10 @@
 </template>
 <script>
 import { EyeIcon, FileTextIcon } from 'vue-feather-icons'
-import ColorLabel from '../Others/ColorLabel'
-import DatatableWrapper from '../Others/Tables/DatatableWrapper'
-import FormLabel from '../Others/Forms/FormLabel'
-import InfoBox from '../Others/Forms/InfoBox'
+import ColorLabel from '../UI/Labels/ColorLabel'
+import DatatableWrapper from '../UI/Table/DatatableWrapper'
+import FormLabel from '../UI/Labels/FormLabel'
+import InfoBox from '../UI/Others/InfoBox'
 import { mapGetters } from 'vuex'
 import MeteredTransactionDetailRow from './MeteredTransactionDetailRow'
 import MeteredTransactionRow from './MeteredTransactionRow'
diff --git a/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue b/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
index 58732726..6af82f1e 100644
--- a/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
+++ b/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
@@ -22,12 +22,12 @@
 </template>
 
 <script>
-import AppInputSwitch from '../Admin/AppInputSwitch'
-import ButtonBase from '../FilesView/ButtonBase'
-import FormLabel from '../Others/Forms/FormLabel'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import FormLabel from '../UI/Labels/FormLabel'
 import axios from 'axios'
 import { events } from '../../bus'
-import AppInputButton from '../Admin/AppInputButton'
+import AppInputButton from '../Forms/Layouts/AppInputButton'
 
 export default {
     name: 'UserUpdatePaymentMethodsExternally',
diff --git a/resources/js/components/Subscription/UserUsageEstimates.vue b/resources/js/components/Subscription/UserUsageEstimates.vue
index cb8f40de..38cdba49 100644
--- a/resources/js/components/Subscription/UserUsageEstimates.vue
+++ b/resources/js/components/Subscription/UserUsageEstimates.vue
@@ -44,7 +44,7 @@
     </div>
 </template>
 <script>
-import FormLabel from '../Others/Forms/FormLabel'
+import FormLabel from '../UI/Labels/FormLabel'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Teams/Components/TeamList.vue b/resources/js/components/Teams/Components/TeamList.vue
index 54dc15e5..3e1d9363 100644
--- a/resources/js/components/Teams/Components/TeamList.vue
+++ b/resources/js/components/Teams/Components/TeamList.vue
@@ -53,7 +53,7 @@
 
 <script>
 import PermissionToggleButton from './PermissionToggleButton'
-import MemberAvatar from '../../FilesView/MemberAvatar'
+import MemberAvatar from '../../UI/Others/MemberAvatar'
 import { XIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/components/Teams/Components/TeamMembersPreview.vue b/resources/js/components/Teams/Components/TeamMembersPreview.vue
index 283f2082..e2d0b6b2 100644
--- a/resources/js/components/Teams/Components/TeamMembersPreview.vue
+++ b/resources/js/components/Teams/Components/TeamMembersPreview.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import MemberAvatar from '../../FilesView/MemberAvatar'
+import MemberAvatar from '../../UI/Others/MemberAvatar'
 
 export default {
     name: 'TeamMembersPreview',
diff --git a/resources/js/components/Teams/CreateTeamFolderPopup.vue b/resources/js/components/Teams/CreateTeamFolderPopup.vue
index db594f74..69a0ed5a 100644
--- a/resources/js/components/Teams/CreateTeamFolderPopup.vue
+++ b/resources/js/components/Teams/CreateTeamFolderPopup.vue
@@ -94,17 +94,17 @@
 </template>
 
 <script>
-import AppInputText from '../Admin/AppInputText'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from '../Others/Popup/PopupWrapper'
-import PopupActions from '../Others/Popup/PopupActions'
-import PopupContent from '../Others/Popup/PopupContent'
-import PopupHeader from '../Others/Popup/PopupHeader'
-import ThumbnailItem from '../Others/ThumbnailItem'
-import ButtonBase from '../FilesView/ButtonBase'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupHeader from '../Popups/Components/PopupHeader'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ButtonBase from '../UI/Buttons/ButtonBase'
 import TeamList from './Components/TeamList'
 import { required } from 'vee-validate/dist/rules'
-import InfoBox from '../Others/Forms/InfoBox'
+import InfoBox from '../UI/Others/InfoBox'
 import { events } from '../../bus'
 import axios from 'axios'
 import { mapGetters } from 'vuex'
diff --git a/resources/js/components/Teams/EditTeamFolderPopup.vue b/resources/js/components/Teams/EditTeamFolderPopup.vue
index 0824cf34..86866a62 100644
--- a/resources/js/components/Teams/EditTeamFolderPopup.vue
+++ b/resources/js/components/Teams/EditTeamFolderPopup.vue
@@ -73,17 +73,17 @@
 </template>
 
 <script>
-import AppInputText from '../Admin/AppInputText'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from '../Others/Popup/PopupWrapper'
-import PopupActions from '../Others/Popup/PopupActions'
-import PopupContent from '../Others/Popup/PopupContent'
-import PopupHeader from '../Others/Popup/PopupHeader'
-import ThumbnailItem from '../Others/ThumbnailItem'
-import ButtonBase from '../FilesView/ButtonBase'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupHeader from '../Popups/Components/PopupHeader'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import ButtonBase from '../UI/Buttons/ButtonBase'
 import TeamList from './Components/TeamList'
 import { required } from 'vee-validate/dist/rules'
-import InfoBox from '../Others/Forms/InfoBox'
+import InfoBox from '../UI/Others/InfoBox'
 import { events } from '../../bus'
 import axios from 'axios'
 import { mapGetters } from 'vuex'
diff --git a/resources/js/components/Others/Notifications/Toaster.vue b/resources/js/components/Toaster/Toaster.vue
similarity index 100%
rename from resources/js/components/Others/Notifications/Toaster.vue
rename to resources/js/components/Toaster/Toaster.vue
diff --git a/resources/js/components/Others/Notifications/ToasterNotifications.vue b/resources/js/components/Toaster/ToasterNotifications.vue
similarity index 94%
rename from resources/js/components/Others/Notifications/ToasterNotifications.vue
rename to resources/js/components/Toaster/ToasterNotifications.vue
index e4c785fb..78933433 100644
--- a/resources/js/components/Others/Notifications/ToasterNotifications.vue
+++ b/resources/js/components/Toaster/ToasterNotifications.vue
@@ -24,9 +24,9 @@
 </template>
 
 <script>
-import Notification from '../../Notifications/Notification'
+import Notification from '../Notifications/Components/Notification'
 import ToasterWrapper from './ToasterWrapper'
-import {events} from '../../../bus'
+import {events} from '../../bus'
 import Toaster from './Toaster'
 
 export default {
diff --git a/resources/js/components/Others/Notifications/ToasterWrapper.vue b/resources/js/components/Toaster/ToasterWrapper.vue
similarity index 100%
rename from resources/js/components/Others/Notifications/ToasterWrapper.vue
rename to resources/js/components/Toaster/ToasterWrapper.vue
diff --git a/resources/js/components/Others/ConfirmPassword.vue b/resources/js/components/TwoFactorSetup/ConfirmPassword.vue
similarity index 90%
rename from resources/js/components/Others/ConfirmPassword.vue
rename to resources/js/components/TwoFactorSetup/ConfirmPassword.vue
index 6428bb42..4b8ce7e2 100644
--- a/resources/js/components/Others/ConfirmPassword.vue
+++ b/resources/js/components/TwoFactorSetup/ConfirmPassword.vue
@@ -38,12 +38,12 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import ButtonBase from '../FilesView/ButtonBase'
-import AppInputText from '../Admin/AppInputText'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupHeader from '../Popups/Components/PopupHeader'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import AppInputText from '../Forms/Layouts/AppInputText'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
diff --git a/resources/js/components/Others/TwoFactorQrSetupPopup.vue b/resources/js/components/TwoFactorSetup/TwoFactorQrSetupPopup.vue
similarity index 89%
rename from resources/js/components/Others/TwoFactorQrSetupPopup.vue
rename to resources/js/components/TwoFactorSetup/TwoFactorQrSetupPopup.vue
index a8662ded..b90ced70 100644
--- a/resources/js/components/Others/TwoFactorQrSetupPopup.vue
+++ b/resources/js/components/TwoFactorSetup/TwoFactorQrSetupPopup.vue
@@ -39,13 +39,13 @@
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
 import { required } from 'vee-validate/dist/rules'
-import ButtonBase from '../FilesView/ButtonBase'
-import AppInputText from '../Admin/AppInputText'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import InfoBox from './Forms/InfoBox'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupHeader from '../Popups/Components/PopupHeader'
+import InfoBox from '../UI/Others/InfoBox'
 import { events } from '../../bus'
 import axios from 'axios'
 
diff --git a/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue b/resources/js/components/TwoFactorSetup/TwoFactorRecoveryCodesPopup.vue
similarity index 91%
rename from resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
rename to resources/js/components/TwoFactorSetup/TwoFactorRecoveryCodesPopup.vue
index 46405207..6fcffaae 100644
--- a/resources/js/components/Others/TwoFactorRecoveryCodesPopup.vue
+++ b/resources/js/components/TwoFactorSetup/TwoFactorRecoveryCodesPopup.vue
@@ -41,14 +41,14 @@
 </template>
 
 <script>
-import MobileActionButton from '../FilesView/MobileActionButton'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import ButtonBase from '../FilesView/ButtonBase'
-import InfoBox from './Forms/InfoBox'
-import Spinner from '../FilesView/Spinner'
+import MobileActionButton from '../UI/Buttons/MobileActionButton'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupHeader from '../Popups/Components/PopupHeader'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import InfoBox from '../UI/Others/InfoBox'
+import Spinner from '../UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 import axios from 'axios'
diff --git a/resources/js/components/UI/Bar.vue b/resources/js/components/UI/BarChart/Bar.vue
similarity index 100%
rename from resources/js/components/UI/Bar.vue
rename to resources/js/components/UI/BarChart/Bar.vue
diff --git a/resources/js/components/UI/BarChart.vue b/resources/js/components/UI/BarChart/BarChart.vue
similarity index 100%
rename from resources/js/components/UI/BarChart.vue
rename to resources/js/components/UI/BarChart/BarChart.vue
diff --git a/resources/js/components/Others/ActionButton.vue b/resources/js/components/UI/Buttons/ActionButton.vue
similarity index 87%
rename from resources/js/components/Others/ActionButton.vue
rename to resources/js/components/UI/Buttons/ActionButton.vue
index df41d4df..b41cd006 100644
--- a/resources/js/components/Others/ActionButton.vue
+++ b/resources/js/components/UI/Buttons/ActionButton.vue
@@ -3,7 +3,7 @@
         <x-icon size="12" class="icon text-theme dark-text-theme" v-if="icon === 'x'" />
         <edit-2-icon size="12" class="icon text-theme dark-text-theme" v-if="icon === 'pencil-alt'" />
         <span class="label">
-            <slot></slot>
+            <slot />
         </span>
     </div>
 </template>
@@ -22,8 +22,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .action-button {
     cursor: pointer;
diff --git a/resources/js/components/Auth/AuthButton.vue b/resources/js/components/UI/Buttons/AuthButton.vue
similarity index 100%
rename from resources/js/components/Auth/AuthButton.vue
rename to resources/js/components/UI/Buttons/AuthButton.vue
diff --git a/resources/js/components/FilesView/ButtonBase.vue b/resources/js/components/UI/Buttons/ButtonBase.vue
similarity index 93%
rename from resources/js/components/FilesView/ButtonBase.vue
rename to resources/js/components/UI/Buttons/ButtonBase.vue
index 98d1c073..4da92fb9 100644
--- a/resources/js/components/FilesView/ButtonBase.vue
+++ b/resources/js/components/UI/Buttons/ButtonBase.vue
@@ -4,7 +4,7 @@
             <refresh-cw-icon size="16" class="animate-spin" />
         </div>
         <div class="content">
-            <slot v-if="!loading"></slot>
+            <slot v-if="!loading" />
         </div>
     </button>
 </template>
@@ -22,8 +22,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .button-base {
     @include font-size(15);
diff --git a/resources/js/components/FilesView/ButtonUpload.vue b/resources/js/components/UI/Buttons/ButtonUpload.vue
similarity index 88%
rename from resources/js/components/FilesView/ButtonUpload.vue
rename to resources/js/components/UI/Buttons/ButtonUpload.vue
index 6a65e6fa..3a740064 100644
--- a/resources/js/components/FilesView/ButtonUpload.vue
+++ b/resources/js/components/UI/Buttons/ButtonUpload.vue
@@ -1,6 +1,6 @@
 <template>
     <label :class="buttonStyle" label="file" class="button file-input button-base">
-        <slot></slot>
+        <slot />
         <input accept="*" v-show="false" @change="emmitFiles" id="file" type="file" name="files[]" multiple />
     </label>
 </template>
@@ -23,8 +23,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .button-base {
     @include font-size(15);
diff --git a/resources/js/components/FilesView/MobileActionButton.vue b/resources/js/components/UI/Buttons/MobileActionButton.vue
similarity index 96%
rename from resources/js/components/FilesView/MobileActionButton.vue
rename to resources/js/components/UI/Buttons/MobileActionButton.vue
index e1fdc960..bc532f10 100644
--- a/resources/js/components/FilesView/MobileActionButton.vue
+++ b/resources/js/components/UI/Buttons/MobileActionButton.vue
@@ -27,7 +27,7 @@
             <cloud-plus-icon v-if="icon === 'cloud-plus'" class="vue-feather dark-text-theme preview-sorting" />
 
             <span v-if="$slots.default" class="ml-2 text-sm font-bold">
-                <slot></slot>
+                <slot />
             </span>
         </div>
     </button>
@@ -58,8 +58,8 @@ import {
     PlusIcon,
     CreditCardIcon,
 } from 'vue-feather-icons'
-import CloudPlusIcon from '../Icons/CloudPlusIcon'
-import SortingIcon from '../Icons/SortingIcon'
+import CloudPlusIcon from '../../Icons/CloudPlusIcon'
+import SortingIcon from '../../Icons/SortingIcon'
 
 export default {
     name: 'MobileActionButton',
diff --git a/resources/js/components/FilesView/MobileActionButtonUpload.vue b/resources/js/components/UI/Buttons/MobileActionButtonUpload.vue
similarity index 89%
rename from resources/js/components/FilesView/MobileActionButtonUpload.vue
rename to resources/js/components/UI/Buttons/MobileActionButtonUpload.vue
index 340ac835..03486b05 100644
--- a/resources/js/components/FilesView/MobileActionButtonUpload.vue
+++ b/resources/js/components/UI/Buttons/MobileActionButtonUpload.vue
@@ -3,7 +3,7 @@
         <div class="flex">
             <cloud-plus-icon class="icon dark-text-theme" size="15" />
             <label label="file" class="label button file-input button-base">
-                <slot></slot>
+                <slot />
                 <input @change="emmitFiles" v-show="false" id="file" type="file" name="files[]" multiple />
             </label>
         </div>
@@ -12,7 +12,7 @@
 
 <script>
 import { UploadCloudIcon } from 'vue-feather-icons'
-import CloudPlusIcon from '../Icons/CloudPlusIcon'
+import CloudPlusIcon from '../../Icons/CloudPlusIcon'
 
 export default {
     name: 'MobileActionButtonUpload',
@@ -29,8 +29,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .mobile-action-button {
     background: $light_background;
diff --git a/resources/js/components/FilesView/SearchBar.vue b/resources/js/components/UI/Buttons/SearchBarButton.vue
similarity index 97%
rename from resources/js/components/FilesView/SearchBar.vue
rename to resources/js/components/UI/Buttons/SearchBarButton.vue
index ef82ee25..0a6fdb9a 100644
--- a/resources/js/components/FilesView/SearchBar.vue
+++ b/resources/js/components/UI/Buttons/SearchBarButton.vue
@@ -23,7 +23,7 @@
 import { SearchIcon } from 'vue-feather-icons'
 
     export default {
-        name: 'SearchBar',
+        name: 'SearchBarButton',
         components: {
             SearchIcon,
         },
diff --git a/resources/js/components/Auth/SocialiteAuthenticationButtons.vue b/resources/js/components/UI/Buttons/SocialLoginButtons.vue
similarity index 89%
rename from resources/js/components/Auth/SocialiteAuthenticationButtons.vue
rename to resources/js/components/UI/Buttons/SocialLoginButtons.vue
index 8e15f437..8ee9da1e 100644
--- a/resources/js/components/Auth/SocialiteAuthenticationButtons.vue
+++ b/resources/js/components/UI/Buttons/SocialLoginButtons.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script>
-import GoogleIcon from "../Icons/GoogleIcon";
 import { FacebookIcon, GithubIcon } from 'vue-feather-icons'
+import GoogleIcon from "../../Icons/GoogleIcon"
 import { mapGetters } from 'vuex'
 
 export default {
-    name: 'SocialiteAuthenticationButtons',
+    name: 'SocialLoginButtons',
     components: {
         FacebookIcon,
         GoogleIcon,
@@ -34,8 +34,6 @@ export default {
     },
     methods: {
         socialiteRedirect(provider) {
-            this.isLoading = true
-
             this.$store.dispatch('socialiteRedirect', provider)
         },
     },
diff --git a/resources/js/components/FilesView/ToolbarButton.vue b/resources/js/components/UI/Buttons/ToolbarButton.vue
similarity index 96%
rename from resources/js/components/FilesView/ToolbarButton.vue
rename to resources/js/components/UI/Buttons/ToolbarButton.vue
index d197e8c6..5fdd4a59 100644
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/UI/Buttons/ToolbarButton.vue
@@ -30,8 +30,8 @@
 </template>
 
 <script>
-import SortingIcon from '../Icons/SortingIcon'
-import CloudPlusIcon from '../Icons/CloudPlusIcon'
+import SortingIcon from '../../Icons/SortingIcon'
+import CloudPlusIcon from '../../Icons/CloudPlusIcon'
 import {
     SearchIcon,
     UserPlusIcon,
diff --git a/resources/js/components/FilesView/ItemGrid.vue b/resources/js/components/UI/Entries/ItemGrid.vue
similarity index 97%
rename from resources/js/components/FilesView/ItemGrid.vue
rename to resources/js/components/UI/Entries/ItemGrid.vue
index 71e21b83..d283a0be 100644
--- a/resources/js/components/FilesView/ItemGrid.vue
+++ b/resources/js/components/UI/Entries/ItemGrid.vue
@@ -129,15 +129,15 @@
 </template>
 
 <script>
-import FolderIcon from './FolderIcon'
+import FolderIcon from '../../Icons/FolderIcon'
 import { LinkIcon, MoreHorizontalIcon, EyeIcon } from 'vue-feather-icons'
-import FileIconThumbnail from './FileIconThumbnail'
-import MemberAvatar from './MemberAvatar'
-import Emoji from '../Others/Emoji'
-import CheckBox from './CheckBox'
+import FileIconThumbnail from '../../Icons/FileIconThumbnail'
+import MemberAvatar from '../Others/MemberAvatar'
+import Emoji from '../../Emoji/Emoji'
+import CheckBox from '../../Inputs/CheckBox'
 import { debounce } from 'lodash'
 import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 
 export default {
     name: 'ItemGrid',
diff --git a/resources/js/components/FilesView/ItemList.vue b/resources/js/components/UI/Entries/ItemList.vue
similarity index 96%
rename from resources/js/components/FilesView/ItemList.vue
rename to resources/js/components/UI/Entries/ItemList.vue
index 855d8612..050983bc 100644
--- a/resources/js/components/FilesView/ItemList.vue
+++ b/resources/js/components/UI/Entries/ItemList.vue
@@ -103,15 +103,15 @@
 </template>
 
 <script>
-import Emoji from '../Others/Emoji'
-import FolderIcon from './FolderIcon'
+import Emoji from '../../Emoji/Emoji'
+import FolderIcon from '../../Icons/FolderIcon'
 import { LinkIcon, MoreVerticalIcon, EyeIcon } from 'vue-feather-icons'
-import FileIconThumbnail from './FileIconThumbnail'
-import MemberAvatar from './MemberAvatar'
-import CheckBox from './CheckBox'
+import FileIconThumbnail from '../../Icons/FileIconThumbnail'
+import MemberAvatar from '../Others/MemberAvatar'
+import CheckBox from '../../Inputs/CheckBox'
 import { debounce } from 'lodash'
 import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 
 export default {
     name: 'ItemList',
diff --git a/resources/js/components/Others/ThumbnailItem.vue b/resources/js/components/UI/Entries/ThumbnailItem.vue
similarity index 95%
rename from resources/js/components/Others/ThumbnailItem.vue
rename to resources/js/components/UI/Entries/ThumbnailItem.vue
index 77d1315a..664e4b0a 100644
--- a/resources/js/components/Others/ThumbnailItem.vue
+++ b/resources/js/components/UI/Entries/ThumbnailItem.vue
@@ -72,11 +72,11 @@
 
 <script>
 import { LinkIcon, EyeIcon } from 'vue-feather-icons'
-import FileIconThumbnail from '../FilesView/FileIconThumbnail'
-import MemberAvatar from '../FilesView/MemberAvatar'
-import Emoji from './Emoji'
+import FileIconThumbnail from '../../Icons/FileIconThumbnail'
+import MemberAvatar from '../Others/MemberAvatar'
+import Emoji from '../../Emoji/Emoji'
 import { mapGetters } from 'vuex'
-import FolderIcon from '../FilesView/FolderIcon'
+import FolderIcon from '../../Icons/FolderIcon'
 
 export default {
     name: 'ThumbnailItem',
diff --git a/resources/js/components/Others/ColorLabel.vue b/resources/js/components/UI/Labels/ColorLabel.vue
similarity index 89%
rename from resources/js/components/Others/ColorLabel.vue
rename to resources/js/components/UI/Labels/ColorLabel.vue
index 50faf34c..8e6c2b8a 100644
--- a/resources/js/components/Others/ColorLabel.vue
+++ b/resources/js/components/UI/Labels/ColorLabel.vue
@@ -1,6 +1,6 @@
 <template>
     <b class="color-label inline-block rounded-lg py-1 px-2 text-xs font-bold capitalize" :class="color">
-        <slot></slot>
+        <slot />
     </b>
 </template>
 
@@ -12,7 +12,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/variables';
 
 .color-label {
     &.purple {
diff --git a/resources/js/components/Others/Forms/FormLabel.vue b/resources/js/components/UI/Labels/FormLabel.vue
similarity index 99%
rename from resources/js/components/Others/Forms/FormLabel.vue
rename to resources/js/components/UI/Labels/FormLabel.vue
index ca02c19e..8b648c07 100644
--- a/resources/js/components/Others/Forms/FormLabel.vue
+++ b/resources/js/components/UI/Labels/FormLabel.vue
@@ -20,7 +20,7 @@
         <wifi-icon v-if="icon === 'wifi'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <trending-up-icon v-if="icon === 'trending-up'" size="22" class="vue-feather text-theme dark-text-theme mr-3" />
         <b class="text-md font-bold dark:text-gray-200 sm:text-lg">
-            <slot></slot>
+            <slot />
         </b>
     </div>
 </template>
diff --git a/resources/js/views/Auth/Headline.vue b/resources/js/components/UI/Labels/LogoHeadline.vue
similarity index 100%
rename from resources/js/views/Auth/Headline.vue
rename to resources/js/components/UI/Labels/LogoHeadline.vue
diff --git a/resources/js/components/Others/SectionTitle.vue b/resources/js/components/UI/Labels/SectionTitle.vue
similarity index 76%
rename from resources/js/components/Others/SectionTitle.vue
rename to resources/js/components/UI/Labels/SectionTitle.vue
index a77883c9..7e5bb708 100644
--- a/resources/js/components/Others/SectionTitle.vue
+++ b/resources/js/components/UI/Labels/SectionTitle.vue
@@ -1,6 +1,6 @@
 <template>
     <b class="text-label">
-        <slot></slot>
+        <slot />
     </b>
 </template>
 
@@ -11,8 +11,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .text-label {
     @include font-size(12);
diff --git a/resources/js/components/Others/TextLabel.vue b/resources/js/components/UI/Labels/TextLabel.vue
similarity index 79%
rename from resources/js/components/Others/TextLabel.vue
rename to resources/js/components/UI/Labels/TextLabel.vue
index 3983bef3..dc545b5d 100644
--- a/resources/js/components/Others/TextLabel.vue
+++ b/resources/js/components/UI/Labels/TextLabel.vue
@@ -1,6 +1,6 @@
 <template>
     <b class="text-label">
-        <slot></slot>
+        <slot />
     </b>
 </template>
 
@@ -11,8 +11,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .text-label {
     padding-left: 25px;
diff --git a/resources/js/components/FilesView/TitlePreview.vue b/resources/js/components/UI/Labels/TitlePreview.vue
similarity index 100%
rename from resources/js/components/FilesView/TitlePreview.vue
rename to resources/js/components/UI/Labels/TitlePreview.vue
diff --git a/resources/js/components/Others/ListInfo.vue b/resources/js/components/UI/List/ListInfo.vue
similarity index 56%
rename from resources/js/components/Others/ListInfo.vue
rename to resources/js/components/UI/List/ListInfo.vue
index 96117a7e..8f32747d 100644
--- a/resources/js/components/Others/ListInfo.vue
+++ b/resources/js/components/UI/List/ListInfo.vue
@@ -1,6 +1,6 @@
 <template>
     <ul class="list-info">
-        <slot></slot>
+        <slot />
     </ul>
 </template>
 
@@ -11,6 +11,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 </style>
diff --git a/resources/js/components/Others/ListInfoItem.vue b/resources/js/components/UI/List/ListInfoItem.vue
similarity index 100%
rename from resources/js/components/Others/ListInfoItem.vue
rename to resources/js/components/UI/List/ListInfoItem.vue
diff --git a/resources/js/components/Admin/AlertBox.vue b/resources/js/components/UI/Others/AlertBox.vue
similarity index 100%
rename from resources/js/components/Admin/AlertBox.vue
rename to resources/js/components/UI/Others/AlertBox.vue
diff --git a/resources/js/components/Admin/CardNavigation.vue b/resources/js/components/UI/Others/CardNavigation.vue
similarity index 100%
rename from resources/js/components/Admin/CardNavigation.vue
rename to resources/js/components/UI/Others/CardNavigation.vue
diff --git a/resources/js/components/Others/CookieDisclaimer.vue b/resources/js/components/UI/Others/CookieDisclaimer.vue
similarity index 100%
rename from resources/js/components/Others/CookieDisclaimer.vue
rename to resources/js/components/UI/Others/CookieDisclaimer.vue
diff --git a/resources/js/components/FilesView/DragUI.vue b/resources/js/components/UI/Others/DragUI.vue
similarity index 96%
rename from resources/js/components/FilesView/DragUI.vue
rename to resources/js/components/UI/Others/DragUI.vue
index bc0558e1..cb9309f3 100644
--- a/resources/js/components/FilesView/DragUI.vue
+++ b/resources/js/components/UI/Others/DragUI.vue
@@ -9,9 +9,9 @@
 </template>
 
 <script>
-import TitlePreview from './TitlePreview'
+import TitlePreview from '../Labels/TitlePreview'
 import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 
 export default {
     name: 'DragUI',
diff --git a/resources/js/components/FilesView/ImageMetaData.vue b/resources/js/components/UI/Others/ImageMetaData.vue
similarity index 100%
rename from resources/js/components/FilesView/ImageMetaData.vue
rename to resources/js/components/UI/Others/ImageMetaData.vue
diff --git a/resources/js/components/Others/Forms/InfoBox.vue b/resources/js/components/UI/Others/InfoBox.vue
similarity index 98%
rename from resources/js/components/Others/Forms/InfoBox.vue
rename to resources/js/components/UI/Others/InfoBox.vue
index 9f497e6f..7bc79e94 100644
--- a/resources/js/components/Others/Forms/InfoBox.vue
+++ b/resources/js/components/UI/Others/InfoBox.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="info-box" :class="type">
-        <slot></slot>
+        <slot />
     </div>
 </template>
 
diff --git a/resources/js/components/FilesView/MemberAvatar.vue b/resources/js/components/UI/Others/MemberAvatar.vue
similarity index 100%
rename from resources/js/components/FilesView/MemberAvatar.vue
rename to resources/js/components/UI/Others/MemberAvatar.vue
diff --git a/resources/js/components/FilesView/ProgressBar.vue b/resources/js/components/UI/Others/ProgressBar.vue
similarity index 87%
rename from resources/js/components/FilesView/ProgressBar.vue
rename to resources/js/components/UI/Others/ProgressBar.vue
index f48d21ed..3b9fad21 100644
--- a/resources/js/components/FilesView/ProgressBar.vue
+++ b/resources/js/components/UI/Others/ProgressBar.vue
@@ -12,8 +12,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .progress-bar {
     width: 100%;
diff --git a/resources/js/components/FilesView/Spinner.vue b/resources/js/components/UI/Others/Spinner.vue
similarity index 89%
rename from resources/js/components/FilesView/Spinner.vue
rename to resources/js/components/UI/Others/Spinner.vue
index 5a5eb5d1..4bde50a2 100644
--- a/resources/js/components/FilesView/Spinner.vue
+++ b/resources/js/components/UI/Others/Spinner.vue
@@ -11,8 +11,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 #loading-bar-spinner.spinner {
     left: 50%;
diff --git a/resources/js/components/FilesView/UploadProgress.vue b/resources/js/components/UI/Others/UploadProgress.vue
similarity index 95%
rename from resources/js/components/FilesView/UploadProgress.vue
rename to resources/js/components/UI/Others/UploadProgress.vue
index ead18ac5..f21fa4a7 100644
--- a/resources/js/components/FilesView/UploadProgress.vue
+++ b/resources/js/components/UI/Others/UploadProgress.vue
@@ -33,7 +33,7 @@
 import ProgressBar from './ProgressBar'
 import { RefreshCwIcon, XIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 
 export default {
     name: 'UploadProgress',
@@ -60,8 +60,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .sync-alt {
     animation: spin 1s linear infinite;
diff --git a/resources/js/components/Sidebar/UserHeadline.vue b/resources/js/components/UI/Others/UserHeadline.vue
similarity index 86%
rename from resources/js/components/Sidebar/UserHeadline.vue
rename to resources/js/components/UI/Others/UserHeadline.vue
index 9995e9ba..c3447d05 100644
--- a/resources/js/components/Sidebar/UserHeadline.vue
+++ b/resources/js/components/UI/Others/UserHeadline.vue
@@ -16,9 +16,9 @@
 </template>
 
 <script>
-import MemberAvatar from '../FilesView/MemberAvatar'
-import NotificationBell from './NotificationBell'
-import { events } from '../../bus'
+import MemberAvatar from './MemberAvatar'
+import NotificationBell from '../../Notifications/Components/NotificationBell'
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Others/Vignette.vue b/resources/js/components/UI/Others/Vignette.vue
similarity index 92%
rename from resources/js/components/Others/Vignette.vue
rename to resources/js/components/UI/Others/Vignette.vue
index 54800504..edf254b6 100644
--- a/resources/js/components/Others/Vignette.vue
+++ b/resources/js/components/UI/Others/Vignette.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { events } from '../../bus'
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -46,8 +46,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
+@import '../../../../sass/vuefilemanager/variables';
+@import '../../../../sass/vuefilemanager/mixins';
 
 .vignette {
     position: fixed;
diff --git a/resources/js/components/Desktop/PopoverItem.vue b/resources/js/components/UI/Popover/PopoverItem.vue
similarity index 94%
rename from resources/js/components/Desktop/PopoverItem.vue
rename to resources/js/components/UI/Popover/PopoverItem.vue
index 09d574ea..e1616a6f 100644
--- a/resources/js/components/Desktop/PopoverItem.vue
+++ b/resources/js/components/UI/Popover/PopoverItem.vue
@@ -6,7 +6,7 @@
             class="absolute top-12 z-20 w-60 overflow-hidden rounded-xl bg-white shadow-xl dark:bg-dark-foreground"
             :class="{ 'right-0': side === 'left', 'left-0': side === 'right' }"
         >
-            <slot></slot>
+            <slot />
         </div>
 
         <!--Clickable layer to close overlays-->
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { events } from '../../bus'
+import { events } from '../../../bus'
 
 export default {
     name: 'PopoverItem',
diff --git a/resources/js/components/UI/Popover/PopoverWrapper.vue b/resources/js/components/UI/Popover/PopoverWrapper.vue
new file mode 100644
index 00000000..62c6f5fc
--- /dev/null
+++ b/resources/js/components/UI/Popover/PopoverWrapper.vue
@@ -0,0 +1,11 @@
+<template>
+    <div class="relative">
+        <slot />
+    </div>
+</template>
+
+<script>
+	export default {
+		name: 'PopoverWrapper',
+	}
+</script>
diff --git a/resources/js/components/Admin/DotLabel.vue b/resources/js/components/UI/ProgressChart/DotLabel.vue
similarity index 100%
rename from resources/js/components/Admin/DotLabel.vue
rename to resources/js/components/UI/ProgressChart/DotLabel.vue
diff --git a/resources/js/components/Admin/ProgressLine.vue b/resources/js/components/UI/ProgressChart/ProgressLine.vue
similarity index 100%
rename from resources/js/components/Admin/ProgressLine.vue
rename to resources/js/components/UI/ProgressChart/ProgressLine.vue
diff --git a/resources/js/components/Others/Tables/DatatableCell.vue b/resources/js/components/UI/Table/DatatableCell.vue
similarity index 100%
rename from resources/js/components/Others/Tables/DatatableCell.vue
rename to resources/js/components/UI/Table/DatatableCell.vue
diff --git a/resources/js/components/Others/Tables/DatatableCellImage.vue b/resources/js/components/UI/Table/DatatableCellImage.vue
similarity index 96%
rename from resources/js/components/Others/Tables/DatatableCellImage.vue
rename to resources/js/components/UI/Table/DatatableCellImage.vue
index 420e47ab..e7be4496 100644
--- a/resources/js/components/Others/Tables/DatatableCellImage.vue
+++ b/resources/js/components/UI/Table/DatatableCellImage.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import MemberAvatar from '../../FilesView/MemberAvatar'
+import MemberAvatar from '../Others/MemberAvatar'
 
 export default {
     name: 'DatatableCellImage',
diff --git a/resources/js/components/Others/Tables/DatatableWrapper.vue b/resources/js/components/UI/Table/DatatableWrapper.vue
similarity index 99%
rename from resources/js/components/Others/Tables/DatatableWrapper.vue
rename to resources/js/components/UI/Table/DatatableWrapper.vue
index 5fe0c8e6..47cff06d 100644
--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/UI/Table/DatatableWrapper.vue
@@ -36,7 +36,7 @@
         </table>
 
         <!--Empty data slot-->
-        <slot v-if="!isLoading && !hasData" name="empty-page"></slot>
+        <slot v-if="!isLoading && !hasData" name="empty-page" />
 
         <!--Paginator-->
         <div v-if="paginator && hasData" class="mt-6 sm:flex sm:items-center sm:justify-between">
diff --git a/resources/js/components/Others/TreeMenu.vue b/resources/js/components/UI/Trees/TreeMenu.vue
similarity index 99%
rename from resources/js/components/Others/TreeMenu.vue
rename to resources/js/components/UI/Trees/TreeMenu.vue
index e2526913..41608951 100644
--- a/resources/js/components/Others/TreeMenu.vue
+++ b/resources/js/components/UI/Trees/TreeMenu.vue
@@ -72,7 +72,7 @@
 
 <script>
 import { FolderIcon, ChevronRightIcon, HardDriveIcon, UsersIcon, UserPlusIcon } from 'vue-feather-icons'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/components/Others/TreeMenuNavigator.vue b/resources/js/components/UI/Trees/TreeMenuNavigator.vue
similarity index 99%
rename from resources/js/components/Others/TreeMenuNavigator.vue
rename to resources/js/components/UI/Trees/TreeMenuNavigator.vue
index 607033d9..ba855045 100644
--- a/resources/js/components/Others/TreeMenuNavigator.vue
+++ b/resources/js/components/UI/Trees/TreeMenuNavigator.vue
@@ -44,7 +44,7 @@
 <script>
 import { FolderIcon, ChevronRightIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
-import { events } from '../../bus'
+import { events } from '../../../bus'
 
 export default {
     name: 'TreeMenuNavigator',
diff --git a/resources/js/components/Others/CreateUploadRequestPopup.vue b/resources/js/components/UploadRequest/CreateUploadRequestPopup.vue
similarity index 90%
rename from resources/js/components/Others/CreateUploadRequestPopup.vue
rename to resources/js/components/UploadRequest/CreateUploadRequestPopup.vue
index 9ec29410..51b06b85 100644
--- a/resources/js/components/Others/CreateUploadRequestPopup.vue
+++ b/resources/js/components/UploadRequest/CreateUploadRequestPopup.vue
@@ -108,17 +108,17 @@
 
 <script>
 import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-import AppInputSwitch from '../Admin/AppInputSwitch'
+import AppInputSwitch from '../Forms/Layouts/AppInputSwitch'
 import {required} from 'vee-validate/dist/rules'
-import ButtonBase from '../FilesView/ButtonBase'
-import AppInputText from '../Admin/AppInputText'
-import PopupWrapper from './Popup/PopupWrapper'
-import PopupActions from './Popup/PopupActions'
-import PopupContent from './Popup/PopupContent'
-import PopupHeader from './Popup/PopupHeader'
-import SwitchInput from './Forms/SwitchInput'
-import ThumbnailItem from './ThumbnailItem'
-import CopyInput from './Forms/CopyInput'
+import ButtonBase from '../UI/Buttons/ButtonBase'
+import AppInputText from '../Forms/Layouts/AppInputText'
+import PopupWrapper from '../Popups/Components/PopupWrapper'
+import PopupActions from '../Popups/Components/PopupActions'
+import PopupContent from '../Popups/Components/PopupContent'
+import PopupHeader from '../Popups/Components/PopupHeader'
+import SwitchInput from '../Inputs/SwitchInput'
+import ThumbnailItem from '../UI/Entries/ThumbnailItem'
+import CopyInput from '../Inputs/CopyInput'
 import {events} from '../../bus'
 import axios from 'axios'
 
diff --git a/resources/js/routes/routesAdmin.js b/resources/js/routes/routesAdmin.js
index 9e22ef0f..b0540eee 100644
--- a/resources/js/routes/routesAdmin.js
+++ b/resources/js/routes/routesAdmin.js
@@ -304,7 +304,7 @@ const routesAdmin = [
                 name: 'AppSettings',
                 path: '/admin/settings',
                 component: () =>
-                    import(/* webpackChunkName: "chunks/app-settings" */ '../views/Admin/AppSettings/AppSettings'),
+                    import(/* webpackChunkName: "chunks/app-settings" */ '../views/Admin/Settings/AppSettings'),
                 meta: {
                     requiresAuth: true,
                     title: 'settings',
@@ -315,7 +315,7 @@ const routesAdmin = [
                         path: '/admin/settings/appearance',
                         component: () =>
                             import(
-                                /* webpackChunkName: "chunks/app-appearance" */ '../views/Admin/AppSettings/AppSettingsTabs/Appearance'
+                                /* webpackChunkName: "chunks/app-appearance" */ '../views/Admin/Settings/AppSettingsTabs/Appearance'
                             ),
                         meta: {
                             requiresAuth: true,
@@ -327,7 +327,7 @@ const routesAdmin = [
                         path: '/admin/settings/index',
                         component: () =>
                             import(
-                                /* webpackChunkName: "chunks/app-index" */ '../views/Admin/AppSettings/AppSettingsTabs/Index'
+                                /* webpackChunkName: "chunks/app-index" */ '../views/Admin/Settings/AppSettingsTabs/Index'
                             ),
                         meta: {
                             requiresAuth: true,
@@ -339,7 +339,7 @@ const routesAdmin = [
                         path: '/admin/settings/environment',
                         component: () =>
                             import(
-                                /* webpackChunkName: "chunks/app-environment" */ '../views/Admin/AppSettings/AppSettingsTabs/Environment'
+                                /* webpackChunkName: "chunks/app-environment" */ '../views/Admin/Settings/AppSettingsTabs/Environment'
                             ),
                         meta: {
                             requiresAuth: true,
@@ -351,7 +351,7 @@ const routesAdmin = [
                         path: '/admin/settings/others',
                         component: () =>
                             import(
-                                /* webpackChunkName: "chunks/app-others" */ '../views/Admin/AppSettings/AppSettingsTabs/Others'
+                                /* webpackChunkName: "chunks/app-others" */ '../views/Admin/Settings/AppSettingsTabs/Others'
                             ),
                         meta: {
                             requiresAuth: true,
@@ -363,7 +363,7 @@ const routesAdmin = [
                         path: '/admin/settings/sign-in',
                         component: () =>
                             import(
-                                /* webpackChunkName: "chunks/app-sign-in-out" */ '../views/Admin/AppSettings/AppSettingsTabs/SignInUp'
+                                /* webpackChunkName: "chunks/app-sign-in-out" */ '../views/Admin/Settings/AppSettingsTabs/SignInUp'
                             ),
                         meta: {
                             requiresAuth: true,
@@ -375,7 +375,7 @@ const routesAdmin = [
                         path: '/admin/settings/adsense',
                         component: () =>
                             import(
-                                /* webpackChunkName: "chunks/app-adsense" */ '../views/Admin/AppSettings/AppSettingsTabs/Adsense'
+                                /* webpackChunkName: "chunks/app-adsense" */ '../views/Admin/Settings/AppSettingsTabs/Adsense'
                             ),
                         meta: {
                             requiresAuth: true,
@@ -387,7 +387,7 @@ const routesAdmin = [
                         path: '/admin/settings/server',
                         component: () =>
                             import(
-                                /* webpackChunkName: "chunks/app-server" */ '../views/Admin/AppSettings/AppSettingsTabs/Server'
+                                /* webpackChunkName: "chunks/app-server" */ '../views/Admin/Settings/AppSettingsTabs/Server'
                             ),
                         meta: {
                             requiresAuth: true,
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index c9f51a14..6bdf72fd 100644
--- a/resources/js/views/Admin.vue
+++ b/resources/js/views/Admin.vue
@@ -62,9 +62,9 @@
 
 <script>
 import FilePreview from '../components/FilePreview/FilePreview'
-import CreateLanguage from '../components/Others/CreateLanguage'
-import MobileNavigation from '../components/Others/MobileNavigation'
-import ConfirmPopup from '../components/Others/Popup/ConfirmPopup'
+import CreateLanguage from '../components/Popups/CreateLanguagePopup'
+import MobileNavigation from '../components/Mobile/MobileNavigation'
+import ConfirmPopup from '../components/Popups/ConfirmPopup'
 import ContentGroup from '../components/Sidebar/ContentGroup'
 import ContentSidebar from '../components/Sidebar/ContentSidebar'
 import Spotlight from '../components/Spotlight/Spotlight'
@@ -83,9 +83,9 @@ import {
     UsersIcon,
 } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
-import CreateUploadRequestPopup from "../components/Others/CreateUploadRequestPopup";
+import CreateUploadRequestPopup from "../components/UploadRequest/CreateUploadRequestPopup";
 import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup";
-import NotificationsPopup from "../components/Others/NotificationsPopup";
+import NotificationsPopup from "../components/Notifications/NotificationsPopup";
 
 export default {
     name: 'Admin',
diff --git a/resources/js/views/Admin/Dashboard.vue b/resources/js/views/Admin/Dashboard.vue
index 0f051927..579fcaad 100644
--- a/resources/js/views/Admin/Dashboard.vue
+++ b/resources/js/views/Admin/Dashboard.vue
@@ -130,16 +130,16 @@
 </template>
 
 <script>
-import WidgetLatestRegistrations from '../../components/Admin/WidgetLatestRegistrations'
+import WidgetLatestRegistrations from '../../components/Dashboard/Widgets/WidgetLatestRegistrations'
 import {ChevronRightIcon} from 'vue-feather-icons'
-import Spinner from '../../components/FilesView/Spinner'
-import FormLabel from '../../components/Others/Forms/FormLabel'
-import BarChart from '../../components/UI/BarChart'
+import Spinner from '../../components/UI/Others/Spinner'
+import FormLabel from '../../components/UI/Labels/FormLabel'
+import BarChart from '../../components/UI/BarChart/BarChart'
 import {mapGetters} from 'vuex'
 import axios from 'axios'
-import WidgetLatestTransactions from '../../components/Admin/WidgetLatestTransactions'
-import AlertBox from "../../components/Admin/AlertBox";
-import AppSpecification from "../../components/Admin/AppSpecification";
+import WidgetLatestTransactions from '../../components/Dashboard/Widgets/WidgetLatestTransactions'
+import AlertBox from "../../components/UI/Others/AlertBox";
+import AppSpecification from "../../components/Dashboard/AppSpecification";
 
 export default {
     name: 'Dashboard',
diff --git a/resources/js/views/Admin/Invoices.vue b/resources/js/views/Admin/Invoices.vue
index 1b650eeb..23335f29 100644
--- a/resources/js/views/Admin/Invoices.vue
+++ b/resources/js/views/Admin/Invoices.vue
@@ -50,9 +50,9 @@
 import FixedTransactionRow from '../../components/Subscription/FixedTransactionRow'
 import MeteredTransactionDetailRow from '../../components/Subscription/MeteredTransactionDetailRow'
 import MeteredTransactionRow from '../../components/Subscription/MeteredTransactionRow'
-import MemberAvatar from '../../components/FilesView/MemberAvatar'
-import DatatableWrapper from '../../components/Others/Tables/DatatableWrapper'
-import ColorLabel from '../../components/Others/ColorLabel'
+import MemberAvatar from '../../components/UI/Others/MemberAvatar'
+import DatatableWrapper from '../../components/UI/Table/DatatableWrapper'
+import ColorLabel from '../../components/UI/Labels/ColorLabel'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/views/Admin/Languages/Language.vue b/resources/js/views/Admin/Languages/Language.vue
index 72f3e234..a015132e 100644
--- a/resources/js/views/Admin/Languages/Language.vue
+++ b/resources/js/views/Admin/Languages/Language.vue
@@ -186,18 +186,17 @@
 </template>
 
 <script>
-import AppInputSwitch from '../../../components/Admin/AppInputSwitch'
-import AppInputText from '../../../components/Admin/AppInputText'
+import AppInputSwitch from '../../../components/Forms/Layouts/AppInputSwitch'
+import AppInputText from '../../../components/Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import MobileActionButton from '../../../components/FilesView/MobileActionButton'
-import SwitchInput from '../../../components/Others/Forms/SwitchInput'
-import SearchInput from '../../../components/Others/Forms/SearchInput'
-import FormLabel from '../../../components/Others/Forms/FormLabel'
+import MobileActionButton from '../../../components/UI/Buttons/MobileActionButton'
+import SwitchInput from '../../../components/Inputs/SwitchInput'
+import SearchInput from '../../../components/Inputs/SearchInput'
+import FormLabel from '../../../components/UI/Labels/FormLabel'
 import MobileHeader from '../../../components/Mobile/MobileHeader'
-import ButtonBase from '../../../components/FilesView/ButtonBase'
-import InfoBox from '../../../components/Others/Forms/InfoBox'
-import PageHeader from '../../../components/Others/PageHeader'
-import Spinner from '../../../components/FilesView/Spinner'
+import ButtonBase from '../../../components/UI/Buttons/ButtonBase'
+import InfoBox from '../../../components/UI/Others/InfoBox'
+import Spinner from '../../../components/UI/Others/Spinner'
 import { PlusIcon, XIcon } from 'vue-feather-icons'
 import { debounce, omitBy } from 'lodash'
 import { events } from '../../../bus'
@@ -214,7 +213,6 @@ export default {
         SearchInput,
         SwitchInput,
         ButtonBase,
-        PageHeader,
         FormLabel,
         PlusIcon,
         InfoBox,
diff --git a/resources/js/views/Admin/Pages.vue b/resources/js/views/Admin/Pages.vue
index 3ac4a6ff..426fc93a 100644
--- a/resources/js/views/Admin/Pages.vue
+++ b/resources/js/views/Admin/Pages.vue
@@ -66,18 +66,16 @@
 </template>
 
 <script>
-import DatatableWrapper from '../../components/Others/Tables/DatatableWrapper'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
+import DatatableWrapper from '../../components/UI/Table/DatatableWrapper'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
 import EmptyPageContent from '../../components/Others/EmptyPageContent'
-import SwitchInput from '../../components/Others/Forms/SwitchInput'
+import SwitchInput from '../../components/Inputs/SwitchInput'
 import MobileHeader from '../../components/Mobile/MobileHeader'
-import SectionTitle from '../../components/Others/SectionTitle'
-import ButtonBase from '../../components/FilesView/ButtonBase'
+import SectionTitle from '../../components/UI/Labels/SectionTitle'
+import ButtonBase from '../../components/UI/Buttons/ButtonBase'
 import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
-import PageHeader from '../../components/Others/PageHeader'
-import ColorLabel from '../../components/Others/ColorLabel'
-import Spinner from '../../components/FilesView/Spinner'
-import axios from 'axios'
+import ColorLabel from '../../components/UI/Labels/ColorLabel'
+import Spinner from '../../components/UI/Others/Spinner'
 
 export default {
     name: 'Pages',
@@ -89,7 +87,6 @@ export default {
         MobileHeader,
         SwitchInput,
         Trash2Icon,
-        PageHeader,
         ButtonBase,
         ColorLabel,
         Edit2Icon,
diff --git a/resources/js/views/Admin/Pages/PageEdit.vue b/resources/js/views/Admin/Pages/PageEdit.vue
index 2b028ebd..b6bd5d14 100644
--- a/resources/js/views/Admin/Pages/PageEdit.vue
+++ b/resources/js/views/Admin/Pages/PageEdit.vue
@@ -33,23 +33,22 @@
             </AppInputText>
         </div>
         <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
+            <Spinner />
         </div>
     </div>
 </template>
 
 <script>
-import AppInputSwitch from '../../../components/Admin/AppInputSwitch'
-import AppInputText from '../../../components/Admin/AppInputText'
+import AppInputSwitch from '../../../components/Forms/Layouts/AppInputSwitch'
+import AppInputText from '../../../components/Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import FormLabel from '../../../components/Others/Forms/FormLabel'
+import FormLabel from '../../../components/UI/Labels/FormLabel'
 import { required } from 'vee-validate/dist/rules'
-import SwitchInput from '../../../components/Others/Forms/SwitchInput'
+import SwitchInput from '../../../components/Inputs/SwitchInput'
 import MobileHeader from '../../../components/Mobile/MobileHeader'
-import SectionTitle from '../../../components/Others/SectionTitle'
-import ButtonBase from '../../../components/FilesView/ButtonBase'
-import PageHeader from '../../../components/Others/PageHeader'
-import Spinner from '../../../components/FilesView/Spinner'
+import SectionTitle from '../../../components/UI/Labels/SectionTitle'
+import ButtonBase from '../../../components/UI/Buttons/ButtonBase'
+import Spinner from '../../../components/UI/Others/Spinner'
 import axios from 'axios'
 
 export default {
@@ -63,7 +62,6 @@ export default {
         SectionTitle,
         MobileHeader,
         SwitchInput,
-        PageHeader,
         ButtonBase,
         required,
         Spinner,
diff --git a/resources/js/views/Admin/PaymentSettings/PaymentSettings.vue b/resources/js/views/Admin/PaymentSettings/PaymentSettings.vue
index 7aa43528..96deebcb 100644
--- a/resources/js/views/Admin/PaymentSettings/PaymentSettings.vue
+++ b/resources/js/views/Admin/PaymentSettings/PaymentSettings.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import CardNavigation from '../../../components/Admin/CardNavigation'
+import CardNavigation from '../../../components/UI/Others/CardNavigation'
 
 export default {
     name: 'PaymentSettings',
diff --git a/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Billings.vue b/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Billings.vue
index e268eee8..771f902d 100644
--- a/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Billings.vue
+++ b/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Billings.vue
@@ -104,16 +104,15 @@
 </template>
 
 <script>
-import AppInputText from '../../../../components/Admin/AppInputText'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import ImageInput from '../../../../components/Others/Forms/ImageInput'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import SetupBox from '../../../../components/Others/Forms/SetupBox'
-import PageTab from '../../../../components/Others/Layout/PageTab'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import PageTabGroup from '../../../../components/Layout/PageTabGroup'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import ImageInput from '../../../../components/Inputs/ImageInput'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import PageTab from '../../../../components/Layout/PageTab'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { required } from 'vee-validate/dist/rules'
 import axios from 'axios'
 import { mapGetters } from 'vuex'
@@ -129,7 +128,6 @@ export default {
         ImageInput,
         ButtonBase,
         FormLabel,
-        SetupBox,
         required,
         PageTab,
         InfoBox,
diff --git a/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue b/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue
index 516536aa..552c371e 100644
--- a/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue
+++ b/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue
@@ -466,21 +466,20 @@
 
 <script>
 import { Edit2Icon, Trash2Icon } from 'vue-feather-icons'
-import AppInputButton from '../../../../components/Admin/AppInputButton'
-import DatatableWrapper from '../../../../components/Others/Tables/DatatableWrapper'
+import AppInputButton from '../../../../components/Forms/Layouts/AppInputButton'
+import DatatableWrapper from '../../../../components/UI/Table/DatatableWrapper'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
-import ImageInput from '../../../../components/Others/Forms/ImageInput'
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import CopyInput from '../../../../components/Others/Forms/CopyInput'
-import SetupBox from '../../../../components/Others/Forms/SetupBox'
-import AppInputText from '../../../../components/Admin/AppInputText'
-import PageTab from '../../../../components/Others/Layout/PageTab'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import PageTabGroup from '../../../../components/Layout/PageTabGroup'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import SwitchInput from '../../../../components/Inputs/SwitchInput'
+import ImageInput from '../../../../components/Inputs/ImageInput'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import CopyInput from '../../../../components/Inputs/CopyInput'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import PageTab from '../../../../components/Layout/PageTab'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '../../../../bus'
 import { mapGetters } from 'vuex'
@@ -504,7 +503,6 @@ export default {
         FormLabel,
         Trash2Icon,
         Edit2Icon,
-        SetupBox,
         required,
         PageTab,
         InfoBox,
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index 3daf5047..b3221932 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -193,11 +193,11 @@
 </template>
 
 <script>
-import DatatableWrapper from '../../components/Others/Tables/DatatableWrapper'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
-import SwitchInput from '../../components/Others/Forms/SwitchInput'
-import ButtonBase from '../../components/FilesView/ButtonBase'
-import ColorLabel from '../../components/Others/ColorLabel'
+import DatatableWrapper from '../../components/UI/Table/DatatableWrapper'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
+import SwitchInput from '../../components/Inputs/SwitchInput'
+import ButtonBase from '../../components/UI/Buttons/ButtonBase'
+import ColorLabel from '../../components/UI/Labels/ColorLabel'
 import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue b/resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue
index 7e7ecd41..30dba0cc 100644
--- a/resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue
+++ b/resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue
@@ -154,16 +154,15 @@
 </template>
 
 <script>
-import AppInputText from '../../../../components/Admin/AppInputText'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import ImageInput from '../../../../components/Others/Forms/ImageInput'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import ImageInput from '../../../../components/Inputs/ImageInput'
 import MobileHeader from '../../../../components/Mobile/MobileHeader'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import SectionTitle from '../../../../components/Others/SectionTitle'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import PageHeader from '../../../../components/Others/PageHeader'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import SectionTitle from '../../../../components/UI/Labels/SectionTitle'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { required } from 'vee-validate/dist/rules'
 import { mapGetters } from 'vuex'
 import { events } from '../../../../bus'
@@ -180,7 +179,6 @@ export default {
         SelectInput,
         ButtonBase,
         ImageInput,
-        PageHeader,
         FormLabel,
         required,
         InfoBox,
diff --git a/resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue b/resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue
index 7fb0f096..20d19208 100644
--- a/resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue
+++ b/resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue
@@ -205,18 +205,17 @@
 </template>
 
 <script>
-import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import AppInputText from '../../../../components/Admin/AppInputText'
+import SwitchInput from '../../../../components/Inputs/SwitchInput'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
 import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import ImageInput from '../../../../components/Others/Forms/ImageInput'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import ImageInput from '../../../../components/Inputs/ImageInput'
 import MobileHeader from '../../../../components/Mobile/MobileHeader'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import SectionTitle from '../../../../components/Others/SectionTitle'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import PageHeader from '../../../../components/Others/PageHeader'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import SectionTitle from '../../../../components/UI/Labels/SectionTitle'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import {required} from 'vee-validate/dist/rules'
 import {mapGetters} from 'vuex'
 import {events} from '../../../../bus'
@@ -235,7 +234,6 @@ export default {
 		SelectInput,
 		ButtonBase,
 		ImageInput,
-		PageHeader,
 		FormLabel,
 		required,
 		InfoBox,
diff --git a/resources/js/views/Admin/Plans/FixedPlan.vue b/resources/js/views/Admin/Plans/FixedPlan.vue
index 3950d9fc..e4114940 100644
--- a/resources/js/views/Admin/Plans/FixedPlan.vue
+++ b/resources/js/views/Admin/Plans/FixedPlan.vue
@@ -23,8 +23,8 @@
 </template>
 
 <script>
-import CardNavigation from '../../../components/Admin/CardNavigation'
-import Spinner from '../../../components/FilesView/Spinner'
+import CardNavigation from '../../../components/UI/Others/CardNavigation'
+import Spinner from '../../../components/UI/Others/Spinner'
 import axios from 'axios'
 
 export default {
diff --git a/resources/js/views/Admin/Plans/MeteredPlan.vue b/resources/js/views/Admin/Plans/MeteredPlan.vue
index 54796f72..5211a6cb 100644
--- a/resources/js/views/Admin/Plans/MeteredPlan.vue
+++ b/resources/js/views/Admin/Plans/MeteredPlan.vue
@@ -17,14 +17,14 @@
         <router-view v-if="!isLoading" :plan="plan" />
 
         <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
+            <Spinner />
         </div>
     </div>
 </template>
 
 <script>
-import CardNavigation from '../../../components/Admin/CardNavigation'
-import Spinner from '../../../components/FilesView/Spinner'
+import CardNavigation from '../../../components/UI/Others/CardNavigation'
+import Spinner from '../../../components/UI/Others/Spinner'
 import axios from 'axios'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanDelete.vue b/resources/js/views/Admin/Plans/Tabs/PlanDelete.vue
index 1e9bb5eb..44e3738e 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanDelete.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanDelete.vue
@@ -46,11 +46,11 @@
 </template>
 
 <script>
-import AppInputText from '../../../../components/Admin/AppInputText'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
 import { required, is } from 'vee-validate/dist/rules'
 import { events } from '../../../../bus'
 import axios from 'axios'
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue b/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
index 33484068..6b491f93 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
@@ -113,12 +113,12 @@
 </template>
 
 <script>
-import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import AppInputText from '../../../../components/Admin/AppInputText'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import SwitchInput from '../../../../components/Inputs/SwitchInput'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 
 export default {
     name: 'PlanFixedSettings',
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue b/resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue
index fa3df1c1..5e13f254 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue
@@ -119,12 +119,12 @@
 </template>
 
 <script>
-import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import AppInputText from '../../../../components/Admin/AppInputText'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import SwitchInput from '../../../../components/Inputs/SwitchInput'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 
 export default {
     name: 'PlanMeteredSettings',
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue b/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
index a83eb3f3..c8fa0c02 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
@@ -125,14 +125,14 @@
 </template>
 
 <script>
-import ColorLabel from '../../../../components/Others/ColorLabel'
-import MemberAvatar from '../../../../components/FilesView/MemberAvatar'
-import DatatableCellImage from '../../../../components/Others/Tables/DatatableCellImage'
+import ColorLabel from '../../../../components/UI/Labels/ColorLabel'
+import MemberAvatar from '../../../../components/UI/Others/MemberAvatar'
+import DatatableCellImage from '../../../../components/UI/Table/DatatableCellImage'
 import { DownloadCloudIcon, Edit2Icon, Trash2Icon } from 'vue-feather-icons'
-import DatatableWrapper from '../../../../components/Others/Tables/DatatableWrapper'
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
-import PageTab from '../../../../components/Others/Layout/PageTab'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import DatatableWrapper from '../../../../components/UI/Table/DatatableWrapper'
+import PageTabGroup from '../../../../components/Layout/PageTabGroup'
+import PageTab from '../../../../components/Layout/PageTab'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/views/Admin/AppSettings/AppSettings.vue b/resources/js/views/Admin/Settings/AppSettings.vue
similarity index 95%
rename from resources/js/views/Admin/AppSettings/AppSettings.vue
rename to resources/js/views/Admin/Settings/AppSettings.vue
index 5c9e1bc8..40948307 100644
--- a/resources/js/views/Admin/AppSettings/AppSettings.vue
+++ b/resources/js/views/Admin/Settings/AppSettings.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import CardNavigation from '../../../components/Admin/CardNavigation'
+import CardNavigation from '../../../components/UI/Others/CardNavigation'
 
 export default {
     name: 'AppSettings',
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Adsense.vue b/resources/js/views/Admin/Settings/AppSettingsTabs/Adsense.vue
similarity index 90%
rename from resources/js/views/Admin/AppSettings/AppSettingsTabs/Adsense.vue
rename to resources/js/views/Admin/Settings/AppSettingsTabs/Adsense.vue
index 093bee82..aab712a8 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Adsense.vue
+++ b/resources/js/views/Admin/Settings/AppSettingsTabs/Adsense.vue
@@ -83,12 +83,12 @@
 </template>
 
 <script>
-import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
-import AppInputButton from '../../../../components/Admin/AppInputButton'
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import AppInputText from '../../../../components/Admin/AppInputText'
-import PageTab from '../../../../components/Others/Layout/PageTab'
+import SwitchInput from '../../../../components/Inputs/SwitchInput'
+import AppInputButton from '../../../../components/Forms/Layouts/AppInputButton'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import PageTab from '../../../../components/Layout/PageTab'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue b/resources/js/views/Admin/Settings/AppSettingsTabs/Appearance.vue
similarity index 89%
rename from resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
rename to resources/js/views/Admin/Settings/AppSettingsTabs/Appearance.vue
index 40be5870..4ac1bc7c 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+++ b/resources/js/views/Admin/Settings/AppSettingsTabs/Appearance.vue
@@ -99,17 +99,16 @@
 </template>
 
 <script>
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import AppInputText from '../../../../components/Admin/AppInputText'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import ImageInput from '../../../../components/Others/Forms/ImageInput'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import SetupBox from '../../../../components/Others/Forms/SetupBox'
-import PageTab from '../../../../components/Others/Layout/PageTab'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import PageTabGroup from '../../../../components/Layout/PageTabGroup'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import ImageInput from '../../../../components/Inputs/ImageInput'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import PageTab from '../../../../components/Layout/PageTab'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { required } from 'vee-validate/dist/rules'
 import axios from 'axios'
 
@@ -125,7 +124,6 @@ export default {
         ImageInput,
         ButtonBase,
         FormLabel,
-        SetupBox,
         required,
         PageTab,
         InfoBox,
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue b/resources/js/views/Admin/Settings/AppSettingsTabs/Environment.vue
similarity index 96%
rename from resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue
rename to resources/js/views/Admin/Settings/AppSettingsTabs/Environment.vue
index b3612cbb..f1b94433 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Environment.vue
+++ b/resources/js/views/Admin/Settings/AppSettingsTabs/Environment.vue
@@ -155,13 +155,13 @@
 
 <script>
 import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import AppInputText from '../../../../components/Admin/AppInputText'
-import StorageSetup from '../../../../components/Setup/StorageSetup'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import PageTab from '../../../../components/Others/Layout/PageTab'
-import MailSetup from '../../../../components/Setup/MailSetup'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import StorageSetup from '../../../../components/Forms/StorageSetup'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import PageTab from '../../../../components/Layout/PageTab'
+import MailSetup from '../../../../components/Forms/MailSetup'
 import { events } from '../../../../bus'
 import axios from 'axios'
 
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue b/resources/js/views/Admin/Settings/AppSettingsTabs/Index.vue
similarity index 97%
rename from resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
rename to resources/js/views/Admin/Settings/AppSettingsTabs/Index.vue
index 1a1229a2..76c0bd1a 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
+++ b/resources/js/views/Admin/Settings/AppSettingsTabs/Index.vue
@@ -490,18 +490,17 @@
 </template>
 
 <script>
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import AppInputText from '../../../../components/Admin/AppInputText'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
-import ImageInput from '../../../../components/Others/Forms/ImageInput'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import SetupBox from '../../../../components/Others/Forms/SetupBox'
-import PageTab from '../../../../components/Others/Layout/PageTab'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import PageTabGroup from '../../../../components/Layout/PageTabGroup'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import SwitchInput from '../../../../components/Inputs/SwitchInput'
+import ImageInput from '../../../../components/Inputs/ImageInput'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import PageTab from '../../../../components/Layout/PageTab'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { required } from 'vee-validate/dist/rules'
 import axios from 'axios'
 import { mapGetters } from 'vuex'
@@ -519,7 +518,6 @@ export default {
         ImageInput,
         ButtonBase,
         FormLabel,
-        SetupBox,
         required,
         PageTab,
         InfoBox,
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue b/resources/js/views/Admin/Settings/AppSettingsTabs/Others.vue
similarity index 96%
rename from resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
rename to resources/js/views/Admin/Settings/AppSettingsTabs/Others.vue
index ab664aa8..1f304f8e 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
+++ b/resources/js/views/Admin/Settings/AppSettingsTabs/Others.vue
@@ -280,18 +280,18 @@
 <script>
 import {Edit2Icon} from 'vue-feather-icons'
 import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
-import AppInputButton from '../../../../components/Admin/AppInputButton'
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import AppInputText from '../../../../components/Admin/AppInputText'
-import PageTab from '../../../../components/Others/Layout/PageTab'
+import SwitchInput from '../../../../components/Inputs/SwitchInput'
+import AppInputButton from '../../../../components/Forms/Layouts/AppInputButton'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import PageTab from '../../../../components/Layout/PageTab'
 import {required} from 'vee-validate/dist/rules'
 import {events} from '../../../../bus'
 import {mapGetters} from 'vuex'
 import axios from 'axios'
-import SelectInput from "../../../../components/Others/Forms/SelectInput";
+import SelectInput from "../../../../components/Inputs/SelectInput";
 
 export default {
 	name: 'AppOthers',
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue b/resources/js/views/Admin/Settings/AppSettingsTabs/Server.vue
similarity index 98%
rename from resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
rename to resources/js/views/Admin/Settings/AppSettingsTabs/Server.vue
index 56cba79d..e86bdae1 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
+++ b/resources/js/views/Admin/Settings/AppSettingsTabs/Server.vue
@@ -199,9 +199,9 @@
 
 <script>
 import { CheckIcon, XIcon, DownloadCloudIcon } from 'vue-feather-icons'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import PageTab from '../../../../components/Others/Layout/PageTab'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import PageTab from '../../../../components/Layout/PageTab'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/SignInUp.vue b/resources/js/views/Admin/Settings/AppSettingsTabs/SignInUp.vue
similarity index 97%
rename from resources/js/views/Admin/AppSettings/AppSettingsTabs/SignInUp.vue
rename to resources/js/views/Admin/Settings/AppSettingsTabs/SignInUp.vue
index 45fd2ad1..7be77315 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/SignInUp.vue
+++ b/resources/js/views/Admin/Settings/AppSettingsTabs/SignInUp.vue
@@ -291,13 +291,13 @@
 <script>
 import { Edit2Icon } from 'vue-feather-icons'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import SwitchInput from '../../../../components/Others/Forms/SwitchInput'
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import CopyInput from '../../../../components/Others/Forms/CopyInput'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import AppInputText from '../../../../components/Admin/AppInputText'
-import PageTab from '../../../../components/Others/Layout/PageTab'
+import SwitchInput from '../../../../components/Inputs/SwitchInput'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import CopyInput from '../../../../components/Inputs/CopyInput'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import PageTab from '../../../../components/Layout/PageTab'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '../../../../bus'
 import { mapGetters } from 'vuex'
diff --git a/resources/js/views/Admin/Subscriptions.vue b/resources/js/views/Admin/Subscriptions.vue
index 34fc50f7..276fba90 100644
--- a/resources/js/views/Admin/Subscriptions.vue
+++ b/resources/js/views/Admin/Subscriptions.vue
@@ -99,9 +99,9 @@
 </template>
 
 <script>
-import ColorLabel from '../../components/Others/ColorLabel'
-import MemberAvatar from '../../components/FilesView/MemberAvatar'
-import DatatableWrapper from '../../components/Others/Tables/DatatableWrapper'
+import ColorLabel from '../../components/UI/Labels/ColorLabel'
+import MemberAvatar from '../../components/UI/Others/MemberAvatar'
+import DatatableWrapper from '../../components/UI/Table/DatatableWrapper'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/views/Admin/Users.vue b/resources/js/views/Admin/Users.vue
index dc0ab571..7255b893 100644
--- a/resources/js/views/Admin/Users.vue
+++ b/resources/js/views/Admin/Users.vue
@@ -262,22 +262,21 @@
             </DatatableWrapper>
         </div>
         <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
+            <Spinner />
         </div>
     </div>
 </template>
 
 <script>
-import MemberAvatar from '../../components/FilesView/MemberAvatar'
-import DatatableCellImage from '../../components/Others/Tables/DatatableCellImage'
-import DatatableWrapper from '../../components/Others/Tables/DatatableWrapper'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
+import MemberAvatar from '../../components/UI/Others/MemberAvatar'
+import DatatableCellImage from '../../components/UI/Table/DatatableCellImage'
+import DatatableWrapper from '../../components/UI/Table/DatatableWrapper'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
 import MobileHeader from '../../components/Mobile/MobileHeader'
-import SectionTitle from '../../components/Others/SectionTitle'
-import ButtonBase from '../../components/FilesView/ButtonBase'
-import PageHeader from '../../components/Others/PageHeader'
-import ColorLabel from '../../components/Others/ColorLabel'
-import Spinner from '../../components/FilesView/Spinner'
+import SectionTitle from '../../components/UI/Labels/SectionTitle'
+import ButtonBase from '../../components/UI/Buttons/ButtonBase'
+import ColorLabel from '../../components/UI/Labels/ColorLabel'
+import Spinner from '../../components/UI/Others/Spinner'
 import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
@@ -292,7 +291,6 @@ export default {
         SectionTitle,
         MobileHeader,
         Trash2Icon,
-        PageHeader,
         ButtonBase,
         ColorLabel,
         Edit2Icon,
diff --git a/resources/js/views/Admin/Users/User.vue b/resources/js/views/Admin/Users/User.vue
index 740e5984..9d670b07 100644
--- a/resources/js/views/Admin/Users/User.vue
+++ b/resources/js/views/Admin/Users/User.vue
@@ -37,17 +37,16 @@
 </template>
 
 <script>
-import CardNavigation from '../../../components/Admin/CardNavigation'
+import CardNavigation from '../../../components/UI/Others/CardNavigation'
 import { UserIcon, HardDriveIcon, LockIcon, Trash2Icon, FileTextIcon, CreditCardIcon } from 'vue-feather-icons'
 import MobileHeader from '../../../components/Mobile/MobileHeader'
-import SectionTitle from '../../../components/Others/SectionTitle'
-import PageHeader from '../../../components/Others/PageHeader'
-import ColorLabel from '../../../components/Others/ColorLabel'
-import Spinner from '../../../components/FilesView/Spinner'
+import SectionTitle from '../../../components/UI/Labels/SectionTitle'
+import ColorLabel from '../../../components/UI/Labels/ColorLabel'
+import Spinner from '../../../components/UI/Others/Spinner'
 import { events } from '../../../bus'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
-import MemberAvatar from "../../../components/FilesView/MemberAvatar";
+import MemberAvatar from "../../../components/UI/Others/MemberAvatar";
 
 export default {
     name: 'Profile',
@@ -59,7 +58,6 @@ export default {
         SectionTitle,
         FileTextIcon,
         MobileHeader,
-        PageHeader,
         ColorLabel,
         Trash2Icon,
         UserIcon,
diff --git a/resources/js/views/Admin/Users/UserCreate.vue b/resources/js/views/Admin/Users/UserCreate.vue
index 90e16b8a..a4ba12ea 100644
--- a/resources/js/views/Admin/Users/UserCreate.vue
+++ b/resources/js/views/Admin/Users/UserCreate.vue
@@ -107,15 +107,14 @@
 </template>
 
 <script>
-import AppInputText from '../../../components/Admin/AppInputText'
+import AppInputText from '../../../components/Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import SelectInput from '../../../components/Others/Forms/SelectInput'
-import ImageInput from '../../../components/Others/Forms/ImageInput'
-import FormLabel from '../../../components/Others/Forms/FormLabel'
+import SelectInput from '../../../components/Inputs/SelectInput'
+import ImageInput from '../../../components/Inputs/ImageInput'
+import FormLabel from '../../../components/UI/Labels/FormLabel'
 import MobileHeader from '../../../components/Mobile/MobileHeader'
-import SectionTitle from '../../../components/Others/SectionTitle'
-import ButtonBase from '../../../components/FilesView/ButtonBase'
-import PageHeader from '../../../components/Others/PageHeader'
+import SectionTitle from '../../../components/UI/Labels/SectionTitle'
+import ButtonBase from '../../../components/UI/Buttons/ButtonBase'
 import { required } from 'vee-validate/dist/rules'
 import { mapGetters } from 'vuex'
 import { events } from '../../../bus'
@@ -132,7 +131,6 @@ export default {
         SelectInput,
         ButtonBase,
         ImageInput,
-        PageHeader,
         FormLabel,
         required,
     },
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
index 21d74989..b5cc91a4 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
@@ -40,15 +40,14 @@
 </template>
 
 <script>
-import AppInputText from '../../../../components/Admin/AppInputText'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
-import PageTab from '../../../../components/Others/Layout/PageTab'
+import PageTabGroup from '../../../../components/Layout/PageTabGroup'
+import PageTab from '../../../../components/Layout/PageTab'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import SetupBox from '../../../../components/Others/Forms/SetupBox'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
 import { required, is } from 'vee-validate/dist/rules'
 import { events } from '../../../../bus'
 import axios from 'axios'
@@ -65,7 +64,6 @@ export default {
         ValidationProvider,
         ValidationObserver,
         ButtonBase,
-        SetupBox,
         required,
     },
     data() {
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
index 54e538de..03d62b9b 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
@@ -136,15 +136,14 @@
 </template>
 
 <script>
-import AppInputText from '../../../../components/Admin/AppInputText'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
-import PageTab from '../../../../components/Others/Layout/PageTab'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
+import PageTabGroup from '../../../../components/Layout/PageTabGroup'
+import PageTab from '../../../../components/Layout/PageTab'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import SelectInput from '../../../../components/Others/Forms/SelectInput'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import SetupBox from '../../../../components/Others/Forms/SetupBox'
+import SelectInput from '../../../../components/Inputs/SelectInput'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
 import { required } from 'vee-validate/dist/rules'
 import { mapGetters } from 'vuex'
 import { events } from '../../../../bus'
@@ -163,7 +162,6 @@ export default {
         ValidationObserver,
         SelectInput,
         ButtonBase,
-        SetupBox,
         required,
     },
     computed: {
diff --git a/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
index 507b26c6..6170b28a 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
@@ -22,8 +22,8 @@
     </div>
 </template>
 <script>
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ProgressLine from '../../../../components/Admin/ProgressLine'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ProgressLine from '../../../../components/UI/ProgressChart/ProgressLine'
 import { mapGetters } from 'vuex'
 
 export default {
diff --git a/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
index 0881281d..15e2acb4 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
@@ -94,10 +94,10 @@
 </template>
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AppInputText from '../../../../components/Admin/AppInputText'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import ColorLabel from '../../../../components/Others/ColorLabel'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import ColorLabel from '../../../../components/UI/Labels/ColorLabel'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 import { events } from '../../../../bus'
diff --git a/resources/js/views/Admin/Users/UserTabs/UserPassword.vue b/resources/js/views/Admin/Users/UserTabs/UserPassword.vue
index c1733373..9d09ca4d 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserPassword.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserPassword.vue
@@ -26,17 +26,16 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
-import AppInputSwitch from '../../../../components/Admin/AppInputSwitch'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import SetupBox from '../../../../components/Others/Forms/SetupBox'
-import PageTab from '../../../../components/Others/Layout/PageTab'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import PageTabGroup from '../../../../components/Layout/PageTabGroup'
+import AppInputSwitch from '../../../../components/Forms/Layouts/AppInputSwitch'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
+import PageTab from '../../../../components/Layout/PageTab'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '../../../../bus'
 import axios from 'axios'
-import AppInputText from '../../../../components/Admin/AppInputText'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
 
 export default {
     name: 'UserPassword',
@@ -48,7 +47,6 @@ export default {
         PageTabGroup,
         ButtonBase,
         FormLabel,
-        SetupBox,
         required,
         InfoBox,
         PageTab,
diff --git a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
index 775cf8ed..6d3a934e 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
@@ -106,17 +106,16 @@
 </template>
 
 <script>
-import ProgressLine from '../../../../components/Admin/ProgressLine'
-import AppInputText from '../../../../components/Admin/AppInputText'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
-import PageTabGroup from '../../../../components/Others/Layout/PageTabGroup'
-import PageTab from '../../../../components/Others/Layout/PageTab'
+import ProgressLine from '../../../../components/UI/ProgressChart/ProgressLine'
+import AppInputText from '../../../../components/Forms/Layouts/AppInputText'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
+import PageTabGroup from '../../../../components/Layout/PageTabGroup'
+import PageTab from '../../../../components/Layout/PageTab'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import ButtonBase from '../../../../components/FilesView/ButtonBase'
-import SetupBox from '../../../../components/Others/Forms/SetupBox'
+import ButtonBase from '../../../../components/UI/Buttons/ButtonBase'
 import { required } from 'vee-validate/dist/rules'
-import BarChart from '../../../../components/UI/BarChart'
+import BarChart from '../../../../components/UI/BarChart/BarChart'
 import { events } from '../../../../bus'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
@@ -134,7 +133,6 @@ export default {
         ValidationProvider,
         ValidationObserver,
         ButtonBase,
-        SetupBox,
         required,
         BarChart,
     },
diff --git a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
index 54409d19..13e5af67 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
@@ -73,10 +73,10 @@
 import MeteredTransactionDetailRow from '../../../../components/Subscription/MeteredTransactionDetailRow'
 import MeteredTransactionRow from '../../../../components/Subscription/MeteredTransactionRow'
 import FixedTransactionRow from '../../../../components/Subscription/FixedTransactionRow'
-import DatatableWrapper from '../../../../components/Others/Tables/DatatableWrapper'
-import FormLabel from '../../../../components/Others/Forms/FormLabel'
-import PageTab from '../../../../components/Others/Layout/PageTab'
-import InfoBox from '../../../../components/Others/Forms/InfoBox'
+import DatatableWrapper from '../../../../components/UI/Table/DatatableWrapper'
+import FormLabel from '../../../../components/UI/Labels/FormLabel'
+import PageTab from '../../../../components/Layout/PageTab'
+import InfoBox from '../../../../components/UI/Others/InfoBox'
 import UserMeteredSubscription from './UserMeteredSubscription'
 import UserFixedSubscription from './UserFixedSubscription'
 import { mapGetters } from 'vuex'
diff --git a/resources/js/views/Auth/CreateNewPassword.vue b/resources/js/views/Auth/CreateNewPassword.vue
index 2434d76e..54b45278 100644
--- a/resources/js/views/Auth/CreateNewPassword.vue
+++ b/resources/js/views/Auth/CreateNewPassword.vue
@@ -111,12 +111,12 @@
 </template>
 
 <script>
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
 import { required } from 'vee-validate/dist/rules'
-import Headline from './Headline'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
diff --git a/resources/js/views/Auth/ForgottenPassword.vue b/resources/js/views/Auth/ForgottenPassword.vue
index 6b9af8a6..fe13087c 100644
--- a/resources/js/views/Auth/ForgottenPassword.vue
+++ b/resources/js/views/Auth/ForgottenPassword.vue
@@ -68,11 +68,11 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
 import { required } from 'vee-validate/dist/rules'
-import Headline from './Headline'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
diff --git a/resources/js/views/Auth/SignIn.vue b/resources/js/views/Auth/SignIn.vue
index 9129739f..58bd3131 100644
--- a/resources/js/views/Auth/SignIn.vue
+++ b/resources/js/views/Auth/SignIn.vue
@@ -38,7 +38,7 @@
                 />
             </ValidationObserver>
 
-            <SocialiteAuthenticationButtons />
+            <SocialLoginButtons />
 
             <span v-if="config.userRegistration" class="block">
                 {{ $t('page_login.registration_text') }}
@@ -228,21 +228,21 @@
 </template>
 
 <script>
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
 import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
-import SocialiteAuthenticationButtons from '../../components/Auth/SocialiteAuthenticationButtons'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
-import Spinner from '../../components/FilesView/Spinner'
+import SocialLoginButtons from '../../components/UI/Buttons/SocialLoginButtons'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
+import Spinner from '../../components/UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 import axios from 'axios'
-import Headline from './Headline'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 
 export default {
     name: 'SignIn',
     components: {
-        SocialiteAuthenticationButtons,
+        SocialLoginButtons,
         AuthContentWrapper,
         ValidationProvider,
         ValidationObserver,
diff --git a/resources/js/views/Auth/SignUp.vue b/resources/js/views/Auth/SignUp.vue
index 29b48ff9..1f31285a 100644
--- a/resources/js/views/Auth/SignUp.vue
+++ b/resources/js/views/Auth/SignUp.vue
@@ -136,7 +136,7 @@
                 </div>
             </ValidationObserver>
 
-            <SocialiteAuthenticationButtons />
+            <SocialLoginButtons />
 
             <span class="block"
                 >{{ $t('page_registration.have_an_account') }}
@@ -149,12 +149,12 @@
 </template>
 
 <script>
-import Headline from './Headline'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
+import Headline from '../../components/UI/Labels/LogoHeadline'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
-import SocialiteAuthenticationButtons from '../../components/Auth/SocialiteAuthenticationButtons'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
+import SocialLoginButtons from '../../components/UI/Buttons/SocialLoginButtons'
 import { required } from 'vee-validate/dist/rules'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
@@ -163,7 +163,7 @@ import axios from 'axios'
 export default {
     name: 'SignUp',
     components: {
-        SocialiteAuthenticationButtons,
+        SocialLoginButtons,
         AuthContentWrapper,
         ValidationProvider,
         ValidationObserver,
diff --git a/resources/js/views/Auth/SuccessfullyEmailVerified.vue b/resources/js/views/Auth/SuccessfullyEmailVerified.vue
index d1409cb3..03b22ec6 100644
--- a/resources/js/views/Auth/SuccessfullyEmailVerified.vue
+++ b/resources/js/views/Auth/SuccessfullyEmailVerified.vue
@@ -14,10 +14,10 @@
 </template>
 
 <script>
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
-import Headline from './Headline'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 
 export default {
     name: 'SuccessfullyEmailVerified',
diff --git a/resources/js/views/Auth/SuccessfullySendEmail.vue b/resources/js/views/Auth/SuccessfullySendEmail.vue
index a334dfe9..ca939072 100644
--- a/resources/js/views/Auth/SuccessfullySendEmail.vue
+++ b/resources/js/views/Auth/SuccessfullySendEmail.vue
@@ -16,10 +16,10 @@
 </template>
 
 <script>
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
-import Headline from './Headline'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 
 export default {
     name: 'SuccessfullySendEmail',
diff --git a/resources/js/views/FileView/Files.vue b/resources/js/views/FileView/Files.vue
index 95ab0a41..e0744bfc 100644
--- a/resources/js/views/FileView/Files.vue
+++ b/resources/js/views/FileView/Files.vue
@@ -210,20 +210,20 @@
 </template>
 
 <script>
-import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
-import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
-import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
-import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
-import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
-import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
-import ButtonUpload from '../../components/FilesView/ButtonUpload'
-import ToolbarButton from '../../components/FilesView/ToolbarButton'
-import OptionUpload from '../../components/FilesView/OptionUpload'
-import FileBrowser from '../../components/FilesView/FileBrowser'
-import ContextMenu from '../../components/FilesView/ContextMenu'
-import OptionGroup from '../../components/FilesView/OptionGroup'
-import Option from '../../components/FilesView/Option'
+import EmptyFilePage from '../../components/EntriesView/EmptyFilePage'
+import FileActionsMobile from '../../components/Mobile/FileActionsMobile'
+import MobileActionButtonUpload from '../../components/UI/Buttons/MobileActionButtonUpload'
+import MobileMultiSelectToolbar from '../../components/Layout/Toolbars/MobileMultiSelectToolbar'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
+import MobileContextMenu from '../../components/Menus/MobileContextMenu'
+import MobileCreateMenu from '../../components/Menus/MobileCreateMenu'
+import ButtonUpload from '../../components/UI/Buttons/ButtonUpload'
+import ToolbarButton from '../../components/UI/Buttons/ToolbarButton'
+import OptionUpload from '../../components/Menus/Components/OptionUpload'
+import FileBrowser from '../../components/EntriesView/FileBrowser'
+import ContextMenu from '../../components/Menus/ContextMenu'
+import OptionGroup from '../../components/Menus/Components/OptionGroup'
+import Option from '../../components/Menus/Components/Option'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 
diff --git a/resources/js/views/FileView/MySharedItems.vue b/resources/js/views/FileView/MySharedItems.vue
index 3d4f8371..662a43d6 100644
--- a/resources/js/views/FileView/MySharedItems.vue
+++ b/resources/js/views/FileView/MySharedItems.vue
@@ -122,17 +122,17 @@
 </template>
 
 <script>
-import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
-import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
-import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
-import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
-import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
-import ToolbarButton from '../../components/FilesView/ToolbarButton'
-import FileBrowser from '../../components/FilesView/FileBrowser'
-import ContextMenu from '../../components/FilesView/ContextMenu'
-import OptionGroup from '../../components/FilesView/OptionGroup'
-import Option from '../../components/FilesView/Option'
+import EmptyFilePage from '../../components/EntriesView/EmptyFilePage'
+import FileActionsMobile from '../../components/Mobile/FileActionsMobile'
+import MobileActionButtonUpload from '../../components/UI/Buttons/MobileActionButtonUpload'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
+import MobileMultiSelectToolbar from '../../components/Layout/Toolbars/MobileMultiSelectToolbar'
+import MobileContextMenu from '../../components/Menus/MobileContextMenu'
+import ToolbarButton from '../../components/UI/Buttons/ToolbarButton'
+import FileBrowser from '../../components/EntriesView/FileBrowser'
+import ContextMenu from '../../components/Menus/ContextMenu'
+import OptionGroup from '../../components/Menus/Components/OptionGroup'
+import Option from '../../components/Menus/Components/Option'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 
diff --git a/resources/js/views/FileView/Public.vue b/resources/js/views/FileView/Public.vue
index 771a9169..55d25da1 100644
--- a/resources/js/views/FileView/Public.vue
+++ b/resources/js/views/FileView/Public.vue
@@ -181,19 +181,19 @@
 </template>
 
 <script>
-import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
-import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
-import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
-import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
-import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
-import ToolbarButton from '../../components/FilesView/ToolbarButton'
-import OptionUpload from '../../components/FilesView/OptionUpload'
-import ButtonUpload from '../../components/FilesView/ButtonUpload'
-import FileBrowser from '../../components/FilesView/FileBrowser'
-import ContextMenu from '../../components/FilesView/ContextMenu'
-import OptionGroup from '../../components/FilesView/OptionGroup'
-import Option from '../../components/FilesView/Option'
+import EmptyFilePage from '../../components/EntriesView/EmptyFilePage'
+import FileActionsMobile from '../../components/Mobile/FileActionsMobile'
+import MobileMultiSelectToolbar from '../../components/Layout/Toolbars/MobileMultiSelectToolbar'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
+import MobileContextMenu from '../../components/Menus/MobileContextMenu'
+import MobileCreateMenu from '../../components/Menus/MobileCreateMenu'
+import ToolbarButton from '../../components/UI/Buttons/ToolbarButton'
+import OptionUpload from '../../components/Menus/Components/OptionUpload'
+import ButtonUpload from '../../components/UI/Buttons/ButtonUpload'
+import FileBrowser from '../../components/EntriesView/FileBrowser'
+import ContextMenu from '../../components/Menus/ContextMenu'
+import OptionGroup from '../../components/Menus/Components/OptionGroup'
+import Option from '../../components/Menus/Components/Option'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/views/FileView/RecentUploads.vue b/resources/js/views/FileView/RecentUploads.vue
index e1a5c31b..0b142dd6 100644
--- a/resources/js/views/FileView/RecentUploads.vue
+++ b/resources/js/views/FileView/RecentUploads.vue
@@ -111,18 +111,18 @@
 </template>
 
 <script>
-import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
-import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
-import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
-import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
-import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
-import ToolbarButton from '../../components/FilesView/ToolbarButton'
-import ButtonUpload from '../../components/FilesView/ButtonUpload'
-import FileBrowser from '../../components/FilesView/FileBrowser'
-import ContextMenu from '../../components/FilesView/ContextMenu'
-import OptionGroup from '../../components/FilesView/OptionGroup'
-import Option from '../../components/FilesView/Option'
+import EmptyFilePage from '../../components/EntriesView/EmptyFilePage'
+import FileActionsMobile from '../../components/Mobile/FileActionsMobile'
+import MobileActionButtonUpload from '../../components/UI/Buttons/MobileActionButtonUpload'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
+import MobileMultiSelectToolbar from '../../components/Layout/Toolbars/MobileMultiSelectToolbar'
+import MobileContextMenu from '../../components/Menus/MobileContextMenu'
+import ToolbarButton from '../../components/UI/Buttons/ToolbarButton'
+import ButtonUpload from '../../components/UI/Buttons/ButtonUpload'
+import FileBrowser from '../../components/EntriesView/FileBrowser'
+import ContextMenu from '../../components/Menus/ContextMenu'
+import OptionGroup from '../../components/Menus/Components/OptionGroup'
+import Option from '../../components/Menus/Components/Option'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 
diff --git a/resources/js/views/FileView/SharedWithMe.vue b/resources/js/views/FileView/SharedWithMe.vue
index c7bbcc77..6dadfb21 100644
--- a/resources/js/views/FileView/SharedWithMe.vue
+++ b/resources/js/views/FileView/SharedWithMe.vue
@@ -158,22 +158,22 @@
 </template>
 
 <script>
-import MobileTeamContextMenu from '../../components/FilesView/MobileTeamContextMenu'
-import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
-import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
-import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
-import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
-import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
-import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
-import ButtonUpload from '../../components/FilesView/ButtonUpload'
-import ToolbarButton from '../../components/FilesView/ToolbarButton'
-import OptionUpload from '../../components/FilesView/OptionUpload'
-import FileBrowser from '../../components/FilesView/FileBrowser'
-import ContextMenu from '../../components/FilesView/ContextMenu'
-import OptionGroup from '../../components/FilesView/OptionGroup'
-import ButtonBase from '../../components/FilesView/ButtonBase'
-import Option from '../../components/FilesView/Option'
+import MobileTeamContextMenu from '../../components/Menus/MobileTeamContextMenu'
+import EmptyFilePage from '../../components/EntriesView/EmptyFilePage'
+import FileActionsMobile from '../../components/Mobile/FileActionsMobile'
+import MobileActionButtonUpload from '../../components/UI/Buttons/MobileActionButtonUpload'
+import MobileMultiSelectToolbar from '../../components/Layout/Toolbars/MobileMultiSelectToolbar'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
+import MobileContextMenu from '../../components/Menus/MobileContextMenu'
+import MobileCreateMenu from '../../components/Menus/MobileCreateMenu'
+import ButtonUpload from '../../components/UI/Buttons/ButtonUpload'
+import ToolbarButton from '../../components/UI/Buttons/ToolbarButton'
+import OptionUpload from '../../components/Menus/Components/OptionUpload'
+import FileBrowser from '../../components/EntriesView/FileBrowser'
+import ContextMenu from '../../components/Menus/ContextMenu'
+import OptionGroup from '../../components/Menus/Components/OptionGroup'
+import ButtonBase from '../../components/UI/Buttons/ButtonBase'
+import Option from '../../components/Menus/Components/Option'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 
diff --git a/resources/js/views/FileView/TeamFolders.vue b/resources/js/views/FileView/TeamFolders.vue
index b70709a6..d8556677 100644
--- a/resources/js/views/FileView/TeamFolders.vue
+++ b/resources/js/views/FileView/TeamFolders.vue
@@ -224,22 +224,22 @@
 </template>
 
 <script>
-import MobileTeamContextMenu from '../../components/FilesView/MobileTeamContextMenu'
-import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
-import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
-import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
-import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
-import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
-import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
-import ButtonUpload from '../../components/FilesView/ButtonUpload'
-import ToolbarButton from '../../components/FilesView/ToolbarButton'
-import OptionUpload from '../../components/FilesView/OptionUpload'
-import FileBrowser from '../../components/FilesView/FileBrowser'
-import ContextMenu from '../../components/FilesView/ContextMenu'
-import OptionGroup from '../../components/FilesView/OptionGroup'
-import ButtonBase from '../../components/FilesView/ButtonBase'
-import Option from '../../components/FilesView/Option'
+import MobileTeamContextMenu from '../../components/Menus/MobileTeamContextMenu'
+import EmptyFilePage from '../../components/EntriesView/EmptyFilePage'
+import FileActionsMobile from '../../components/Mobile/FileActionsMobile'
+import MobileActionButtonUpload from '../../components/UI/Buttons/MobileActionButtonUpload'
+import MobileMultiSelectToolbar from '../../components/Layout/Toolbars/MobileMultiSelectToolbar'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
+import MobileContextMenu from '../../components/Menus/MobileContextMenu'
+import MobileCreateMenu from '../../components/Menus/MobileCreateMenu'
+import ButtonUpload from '../../components/UI/Buttons/ButtonUpload'
+import ToolbarButton from '../../components/UI/Buttons/ToolbarButton'
+import OptionUpload from '../../components/Menus/Components/OptionUpload'
+import FileBrowser from '../../components/EntriesView/FileBrowser'
+import ContextMenu from '../../components/Menus/ContextMenu'
+import OptionGroup from '../../components/Menus/Components/OptionGroup'
+import ButtonBase from '../../components/UI/Buttons/ButtonBase'
+import Option from '../../components/Menus/Components/Option'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 
diff --git a/resources/js/views/FileView/Trash.vue b/resources/js/views/FileView/Trash.vue
index 0cd1b47f..d2468cbc 100644
--- a/resources/js/views/FileView/Trash.vue
+++ b/resources/js/views/FileView/Trash.vue
@@ -111,17 +111,17 @@
 </template>
 
 <script>
-import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
-import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
-import MobileActionButtonUpload from '../../components/FilesView/MobileActionButtonUpload'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
-import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
-import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
-import ToolbarButton from '../../components/FilesView/ToolbarButton'
-import FileBrowser from '../../components/FilesView/FileBrowser'
-import ContextMenu from '../../components/FilesView/ContextMenu'
-import OptionGroup from '../../components/FilesView/OptionGroup'
-import Option from '../../components/FilesView/Option'
+import EmptyFilePage from '../../components/EntriesView/EmptyFilePage'
+import FileActionsMobile from '../../components/Mobile/FileActionsMobile'
+import MobileActionButtonUpload from '../../components/UI/Buttons/MobileActionButtonUpload'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
+import MobileMultiSelectToolbar from '../../components/Layout/Toolbars/MobileMultiSelectToolbar'
+import MobileContextMenu from '../../components/Menus/MobileContextMenu'
+import ToolbarButton from '../../components/UI/Buttons/ToolbarButton'
+import FileBrowser from '../../components/EntriesView/FileBrowser'
+import ContextMenu from '../../components/Menus/ContextMenu'
+import OptionGroup from '../../components/Menus/Components/OptionGroup'
+import Option from '../../components/Menus/Components/Option'
 import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 
diff --git a/resources/js/views/FileView/UploadRequestFiles.vue b/resources/js/views/FileView/UploadRequestFiles.vue
index f7e1a775..36bbae7f 100644
--- a/resources/js/views/FileView/UploadRequestFiles.vue
+++ b/resources/js/views/FileView/UploadRequestFiles.vue
@@ -157,24 +157,24 @@
 </template>
 
 <script>
-import MobileMultiSelectToolbar from '../../components/FilesView/MobileMultiSelectToolbar'
-import MobileActionButton from '../../components/FilesView/MobileActionButton'
-import FileActionsMobile from '../../components/FilesView/FileActionsMobile'
-import MobileContextMenu from '../../components/FilesView/MobileContextMenu'
+import MobileMultiSelectToolbar from '../../components/Layout/Toolbars/MobileMultiSelectToolbar'
+import MobileActionButton from '../../components/UI/Buttons/MobileActionButton'
+import FileActionsMobile from '../../components/Mobile/FileActionsMobile'
+import MobileContextMenu from '../../components/Menus/MobileContextMenu'
 import VueFolderIcon from '../../components/Icons/VueFolderIcon'
-import MobileCreateMenu from '../../components/FilesView/MobileCreateMenu'
-import EmptyFilePage from '../../components/FilesView/EmptyFilePage'
-import ToolbarButton from '../../components/FilesView/ToolbarButton'
-import MemberAvatar from '../../components/FilesView/MemberAvatar'
-import ButtonUpload from '../../components/FilesView/ButtonUpload'
-import OptionUpload from '../../components/FilesView/OptionUpload'
-import FileBrowser from '../../components/FilesView/FileBrowser'
-import ContextMenu from '../../components/FilesView/ContextMenu'
-import OptionGroup from '../../components/FilesView/OptionGroup'
-import Option from '../../components/FilesView/Option'
+import MobileCreateMenu from '../../components/Menus/MobileCreateMenu'
+import EmptyFilePage from '../../components/EntriesView/EmptyFilePage'
+import ToolbarButton from '../../components/UI/Buttons/ToolbarButton'
+import MemberAvatar from '../../components/UI/Others/MemberAvatar'
+import ButtonUpload from '../../components/UI/Buttons/ButtonUpload'
+import OptionUpload from '../../components/Menus/Components/OptionUpload'
+import FileBrowser from '../../components/EntriesView/FileBrowser'
+import ContextMenu from '../../components/Menus/ContextMenu'
+import OptionGroup from '../../components/Menus/Components/OptionGroup'
+import Option from '../../components/Menus/Components/Option'
 import {events} from '../../bus'
 import {mapGetters} from 'vuex'
-import InfoBox from "../../components/Others/Forms/InfoBox";
+import InfoBox from "../../components/UI/Others/InfoBox";
 
 export default {
 	name: 'Files',
diff --git a/resources/js/views/Frontpage/ContactUs.vue b/resources/js/views/Frontpage/ContactUs.vue
index 917ab094..205afdae 100644
--- a/resources/js/views/Frontpage/ContactUs.vue
+++ b/resources/js/views/Frontpage/ContactUs.vue
@@ -74,11 +74,11 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import PageTitle from '../../components/Index/Components/PageTitle'
-import PageFooter from '../../components/Index/IndexPageFooter'
-import Navigation from '../../components/Index/IndexNavigation'
-import InfoBox from '../../components/Others/Forms/InfoBox'
-import AuthButton from '../../components/Auth/AuthButton'
+import PageTitle from '../../components/IndexPage/Components/PageTitle'
+import PageFooter from '../../components/IndexPage/IndexPageFooter'
+import Navigation from '../../components/IndexPage/IndexNavigation'
+import InfoBox from '../../components/UI/Others/InfoBox'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
 import { required } from 'vee-validate/dist/rules'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
diff --git a/resources/js/views/Frontpage/DynamicPage.vue b/resources/js/views/Frontpage/DynamicPage.vue
index c926a755..66a5ba7d 100644
--- a/resources/js/views/Frontpage/DynamicPage.vue
+++ b/resources/js/views/Frontpage/DynamicPage.vue
@@ -18,9 +18,9 @@
 </template>
 
 <script>
-import PageTitle from '../../components/Index/Components/PageTitle'
-import PageFooter from '../../components/Index/IndexPageFooter'
-import Navigation from '../../components/Index/IndexNavigation'
+import PageTitle from '../../components/IndexPage/Components/PageTitle'
+import PageFooter from '../../components/IndexPage/IndexPageFooter'
+import Navigation from '../../components/IndexPage/IndexNavigation'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
diff --git a/resources/js/views/Frontpage/Homepage.vue b/resources/js/views/Frontpage/Homepage.vue
index dd4562ff..d2fdcbe2 100644
--- a/resources/js/views/Frontpage/Homepage.vue
+++ b/resources/js/views/Frontpage/Homepage.vue
@@ -26,20 +26,20 @@
             <PageFooter />
         </div>
         <div v-if="isLoading">
-            <Spinner></Spinner>
+            <Spinner />
         </div>
     </div>
 </template>
 
 <script>
-import HeroScreenshot from '../../components/Index/IndexHeroScreenshot'
-import PricingTables from '../../components/Index/IndexPricingTables'
-import MainFeatures from '../../components/Index/IndexMainFeatures'
-import Navigation from '../../components/Index/IndexNavigation'
-import PageHeader from '../../components/Index/IndexPageHeader'
-import GetStarted from '../../components/Index/IndexGetStarted'
-import PageFooter from '../../components/Index/IndexPageFooter'
-import Spinner from '../../components/FilesView/Spinner'
+import HeroScreenshot from '../../components/IndexPage/IndexHeroScreenshot'
+import PricingTables from '../../components/IndexPage/IndexPricingTables'
+import MainFeatures from '../../components/IndexPage/IndexMainFeatures'
+import Navigation from '../../components/IndexPage/IndexNavigation'
+import PageHeader from '../../components/IndexPage/IndexPageHeader'
+import GetStarted from '../../components/IndexPage/IndexGetStarted'
+import PageFooter from '../../components/IndexPage/IndexPageFooter'
+import Spinner from '../../components/UI/Others/Spinner'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
@@ -85,9 +85,3 @@ export default {
     },
 }
 </script>
-
-<style lang="scss" scoped>
-@import '../../../sass/vuefilemanager/landing-page';
-@import '../../../sass/vuefilemanager/variables';
-@import '../../../sass/vuefilemanager/mixins';
-</style>
diff --git a/resources/js/views/NotFound.vue b/resources/js/views/NotFound.vue
index 236ee548..84e66de3 100644
--- a/resources/js/views/NotFound.vue
+++ b/resources/js/views/NotFound.vue
@@ -13,10 +13,10 @@
 </template>
 
 <script>
-import AuthContentWrapper from '../components/Auth/AuthContentWrapper'
-import AuthContent from '../components/Auth/AuthContent'
-import AuthButton from '../components/Auth/AuthButton'
-import Headline from './Auth/Headline'
+import AuthContentWrapper from '../components/Layout/AuthPages/AuthContentWrapper'
+import AuthContent from '../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../components/UI/Buttons/AuthButton'
+import Headline from '../components/UI/Labels/LogoHeadline'
 
 export default {
     name: 'NotFound',
diff --git a/resources/js/views/Platform.vue b/resources/js/views/Platform.vue
index 457fc462..d3cd15cf 100644
--- a/resources/js/views/Platform.vue
+++ b/resources/js/views/Platform.vue
@@ -55,30 +55,30 @@
 </template>
 
 <script>
-import FileSortingMobile from '../components/FilesView/FileSortingMobile'
+import FileSortingMobile from '../components/Menus/FileSortingMobile'
 import SidebarNavigation from '../components/Sidebar/SidebarNavigation'
-import FileFilterMobile from '../components/FilesView/FileFilterMobile'
-import CreateFolderPopup from '../components/Others/CreateFolderPopup'
-import ProcessingPopup from '../components/FilesView/ProcessingPopup'
-import MobileNavigation from '../components/Others/MobileNavigation'
-import ShareCreatePopup from '../components/Others/ShareCreatePopup'
-import DesktopToolbar from '../components/FilesView/DesktopToolbar'
+import FileFilterMobile from '../components/Menus/FileFilterMobile'
+import CreateFolderPopup from '../components/Popups/CreateFolderPopup'
+import ProcessingPopup from '../components/Popups/ProcessingPopup'
+import MobileNavigation from '../components/Mobile/MobileNavigation'
+import ShareCreatePopup from '../components/Popups/ShareCreatePopup'
+import DesktopToolbar from '../components/Layout/Toolbars/DesktopToolbar'
 import CreateTeamFolderPopup from '../components/Teams/CreateTeamFolderPopup'
-import ConfirmPopup from '../components/Others/Popup/ConfirmPopup'
-import RenameItemPopup from '../components/Others/RenameItemPopup'
-import PanelNavigationFiles from './FileView/Components/PanelNavigationFiles'
-import MobileToolbar from '../components/FilesView/MobileToolbar'
-import ShareEditPopup from '../components/Others/ShareEditPopup'
+import ConfirmPopup from '../components/Popups/ConfirmPopup'
+import RenameItemPopup from '../components/Popups/RenameItemPopup'
+import PanelNavigationFiles from '../components/EntriesView/PanelNavigationFiles'
+import MobileToolbar from '../components/Layout/Toolbars/MobileToolbar'
+import ShareEditPopup from '../components/Popups/ShareEditPopup'
 import FilePreview from '../components/FilePreview/FilePreview'
-import MoveItemPopup from '../components/Others/MoveItemPopup'
+import MoveItemPopup from '../components/Popups/MoveItemPopup'
 import EditTeamFolderPopup from '../components/Teams/EditTeamFolderPopup'
 import Spotlight from '../components/Spotlight/Spotlight'
-import DragUI from '../components/FilesView/DragUI'
-import InfoSidebar from '../components/FilesView/InfoSidebar'
+import DragUI from '../components/UI/Others/DragUI'
+import InfoSidebar from '../components/Layout/Sidebars/InfoSidebar'
 import { events } from '../bus'
 import { mapGetters } from 'vuex'
-import CreateUploadRequestPopup from "../components/Others/CreateUploadRequestPopup";
-import NotificationsPopup from "../components/Others/NotificationsPopup";
+import CreateUploadRequestPopup from "../components/UploadRequest/CreateUploadRequestPopup";
+import NotificationsPopup from "../components/Notifications/NotificationsPopup";
 
 export default {
     name: 'Platform',
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index b5139a04..6ab65687 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -74,26 +74,26 @@
 </template>
 
 <script>
-import MobileNavigation from '../components/Others/MobileNavigation'
-import ChargePaymentPopup from '../components/Others/ChargePaymentPopup'
-import SubscribeAccountPopup from '../components/Subscription/SubscribeAccountPopup'
-import ConfirmPopup from '../components/Others/Popup/ConfirmPopup'
+import MobileNavigation from '../components/Mobile/MobileNavigation'
+import ChargePaymentPopup from '../components/Subscription/Popups/ChargePaymentPopup'
+import SubscribeAccountPopup from '../components/Subscription/Popups/SubscribeAccountPopup'
+import ConfirmPopup from '../components/Popups/ConfirmPopup'
 import FilePreview from '../components/FilePreview/FilePreview'
 import Spotlight from '../components/Spotlight/Spotlight'
-import TwoFactorRecoveryCodesPopup from '../components/Others/TwoFactorRecoveryCodesPopup'
-import CreatePersonalTokenPopup from '../components/Others/CreatePersonalTokenPopup'
-import TwoFactorQrSetupPopup from '../components/Others/TwoFactorQrSetupPopup'
-import AvatarInput from '../components/Others/Forms/AvatarInput'
-import ColorLabel from '../components/Others/ColorLabel'
-import Spinner from '../components/FilesView/Spinner'
+import TwoFactorRecoveryCodesPopup from '../components/TwoFactorSetup/TwoFactorRecoveryCodesPopup'
+import CreatePersonalTokenPopup from '../components/Popups/CreatePersonalTokenPopup'
+import TwoFactorQrSetupPopup from '../components/TwoFactorSetup/TwoFactorQrSetupPopup'
+import AvatarInput from '../components/Inputs/AvatarInput'
+import ColorLabel from '../components/UI/Labels/ColorLabel'
+import Spinner from '../components/UI/Others/Spinner'
 import { mapGetters } from 'vuex'
-import CardNavigation from '../components/Admin/CardNavigation'
-import ConfirmPassword from '../components/Others/ConfirmPassword'
+import CardNavigation from '../components/UI/Others/CardNavigation'
+import ConfirmPassword from '../components/TwoFactorSetup/ConfirmPassword'
 import MobileNavigationToolbar from '../components/Mobile/MobileNavigationToolbar'
-import CreateUploadRequestPopup from "../components/Others/CreateUploadRequestPopup";
+import CreateUploadRequestPopup from "../components/UploadRequest/CreateUploadRequestPopup";
 import CreateTeamFolderPopup from "../components/Teams/CreateTeamFolderPopup";
-import ChangeSubscriptionPopup from "../components/Subscription/ChangeSubscriptionPopup";
-import NotificationsPopup from "../components/Others/NotificationsPopup";
+import ChangeSubscriptionPopup from "../components/Subscription/Popups/ChangeSubscriptionPopup";
+import NotificationsPopup from "../components/Notifications/NotificationsPopup";
 
 export default {
     name: 'Settings',
diff --git a/resources/js/views/SetupWizard/AdminAccount.vue b/resources/js/views/SetupWizard/AdminAccount.vue
index 8adb1f74..ccd85bac 100644
--- a/resources/js/views/SetupWizard/AdminAccount.vue
+++ b/resources/js/views/SetupWizard/AdminAccount.vue
@@ -102,19 +102,19 @@
 </template>
 
 <script>
-import AppInputText from '../../components/Admin/AppInputText'
+import AppInputText from '../../components/Forms/Layouts/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import SelectInput from '../../components/Others/Forms/SelectInput'
-import SwitchInput from '../../components/Others/Forms/SwitchInput'
-import ImageInput from '../../components/Others/Forms/ImageInput'
-import FormLabel from '../../components/Others/Forms/FormLabel'
-import InfoBox from '../../components/Others/Forms/InfoBox'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import SelectInput from '../../components/Inputs/SelectInput'
+import SwitchInput from '../../components/Inputs/SwitchInput'
+import ImageInput from '../../components/Inputs/ImageInput'
+import FormLabel from '../../components/UI/Labels/FormLabel'
+import InfoBox from '../../components/UI/Others/InfoBox'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
 import { required } from 'vee-validate/dist/rules'
 import { SettingsIcon } from 'vue-feather-icons'
-import Headline from '../Auth/Headline'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 import { events } from '../../bus'
 import axios from 'axios'
 
diff --git a/resources/js/views/SetupWizard/AppSetup.vue b/resources/js/views/SetupWizard/AppSetup.vue
index fcd3f5ad..ddb70487 100644
--- a/resources/js/views/SetupWizard/AppSetup.vue
+++ b/resources/js/views/SetupWizard/AppSetup.vue
@@ -238,18 +238,18 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import SelectInput from '../../components/Others/Forms/SelectInput'
-import SwitchInput from '../../components/Others/Forms/SwitchInput'
-import AppInputSwitch from '../../components/Admin/AppInputSwitch'
-import ImageInput from '../../components/Others/Forms/ImageInput'
-import FormLabel from '../../components/Others/Forms/FormLabel'
-import AppInputText from '../../components/Admin/AppInputText'
-import InfoBox from '../../components/Others/Forms/InfoBox'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import SelectInput from '../../components/Inputs/SelectInput'
+import SwitchInput from '../../components/Inputs/SwitchInput'
+import AppInputSwitch from '../../components/Forms/Layouts/AppInputSwitch'
+import ImageInput from '../../components/Inputs/ImageInput'
+import FormLabel from '../../components/UI/Labels/FormLabel'
+import AppInputText from '../../components/Forms/Layouts/AppInputText'
+import InfoBox from '../../components/UI/Others/InfoBox'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
 import { SettingsIcon } from 'vue-feather-icons'
-import Headline from '../Auth/Headline'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 import { required } from 'vee-validate/dist/rules'
 import axios from 'axios'
 
diff --git a/resources/js/views/SetupWizard/Database.vue b/resources/js/views/SetupWizard/Database.vue
index 8125f860..653f50c1 100644
--- a/resources/js/views/SetupWizard/Database.vue
+++ b/resources/js/views/SetupWizard/Database.vue
@@ -145,16 +145,16 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import SelectInput from '../../components/Others/Forms/SelectInput'
-import AppInputText from '../../components/Admin/AppInputText'
-import FormLabel from '../../components/Others/Forms/FormLabel'
-import InfoBox from '../../components/Others/Forms/InfoBox'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import SelectInput from '../../components/Inputs/SelectInput'
+import AppInputText from '../../components/Forms/Layouts/AppInputText'
+import FormLabel from '../../components/UI/Labels/FormLabel'
+import InfoBox from '../../components/UI/Others/InfoBox'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
 import { SettingsIcon } from 'vue-feather-icons'
 import { required } from 'vee-validate/dist/rules'
-import Headline from '../Auth/Headline'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
diff --git a/resources/js/views/SetupWizard/EnvironmentSetup.vue b/resources/js/views/SetupWizard/EnvironmentSetup.vue
index e9546c51..8602ef80 100644
--- a/resources/js/views/SetupWizard/EnvironmentSetup.vue
+++ b/resources/js/views/SetupWizard/EnvironmentSetup.vue
@@ -171,18 +171,18 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import SelectInput from '../../components/Others/Forms/SelectInput'
-import FormLabel from '../../components/Others/Forms/FormLabel'
-import StorageSetup from '../../components/Setup/StorageSetup'
-import AppInputText from '../../components/Admin/AppInputText'
-import InfoBox from '../../components/Others/Forms/InfoBox'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
-import MailSetup from '../../components/Setup/MailSetup'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import SelectInput from '../../components/Inputs/SelectInput'
+import FormLabel from '../../components/UI/Labels/FormLabel'
+import StorageSetup from '../../components/Forms/StorageSetup'
+import AppInputText from '../../components/Forms/Layouts/AppInputText'
+import InfoBox from '../../components/UI/Others/InfoBox'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
+import MailSetup from '../../components/Forms/MailSetup'
 import { required } from 'vee-validate/dist/rules'
 import { SettingsIcon } from 'vue-feather-icons'
-import Headline from '../Auth/Headline'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 import { events } from '../../bus'
 import axios from 'axios'
 
diff --git a/resources/js/views/SetupWizard/PurchaseCode.vue b/resources/js/views/SetupWizard/PurchaseCode.vue
index 14ec5671..34c6cd04 100644
--- a/resources/js/views/SetupWizard/PurchaseCode.vue
+++ b/resources/js/views/SetupWizard/PurchaseCode.vue
@@ -65,13 +65,13 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import InfoBox from '../../components/Others/Forms/InfoBox'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import InfoBox from '../../components/UI/Others/InfoBox'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
 import { SettingsIcon } from 'vue-feather-icons'
 import { required } from 'vee-validate/dist/rules'
-import Headline from '../Auth/Headline'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 import axios from 'axios'
 
 export default {
diff --git a/resources/js/views/SetupWizard/StatusCheck.vue b/resources/js/views/SetupWizard/StatusCheck.vue
index cd12eccd..fcd531ee 100644
--- a/resources/js/views/SetupWizard/StatusCheck.vue
+++ b/resources/js/views/SetupWizard/StatusCheck.vue
@@ -171,14 +171,14 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import SelectInput from '../../components/Others/Forms/SelectInput'
-import FormLabel from '../../components/Others/Forms/FormLabel'
-import InfoBox from '../../components/Others/Forms/InfoBox'
-import AuthContent from '../../components/Auth/AuthContent'
-import AuthButton from '../../components/Auth/AuthButton'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import SelectInput from '../../components/Inputs/SelectInput'
+import FormLabel from '../../components/UI/Labels/FormLabel'
+import InfoBox from '../../components/UI/Others/InfoBox'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
 import { required } from 'vee-validate/dist/rules'
-import Headline from '../Auth/Headline'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 import { CheckIcon, XIcon, SettingsIcon } from 'vue-feather-icons'
diff --git a/resources/js/views/Shared.vue b/resources/js/views/Shared.vue
index 0f83b606..5964998e 100644
--- a/resources/js/views/Shared.vue
+++ b/resources/js/views/Shared.vue
@@ -44,25 +44,25 @@
 </template>
 
 <script>
-import MobileMultiSelectToolbar from '../components/FilesView/MobileMultiSelectToolbar'
-import NavigationSharePanel from './FileView/Components/NavigationSharePanel'
-import FileSortingMobile from '../components/FilesView/FileSortingMobile'
-import CreateFolderPopup from '../components/Others/CreateFolderPopup'
-import ProcessingPopup from '../components/FilesView/ProcessingPopup'
-import DesktopToolbar from '../components/FilesView/DesktopToolbar'
-import RenameItemPopup from '../components/Others/RenameItemPopup'
-import MobileToolbar from '../components/FilesView/MobileToolbar'
+import MobileMultiSelectToolbar from '../components/Layout/Toolbars/MobileMultiSelectToolbar'
+import NavigationSharePanel from '../components/EntriesView/NavigationSharePanel'
+import FileSortingMobile from '../components/Menus/FileSortingMobile'
+import CreateFolderPopup from '../components/Popups/CreateFolderPopup'
+import ProcessingPopup from '../components/Popups/ProcessingPopup'
+import DesktopToolbar from '../components/Layout/Toolbars/DesktopToolbar'
+import RenameItemPopup from '../components/Popups/RenameItemPopup'
+import MobileToolbar from '../components/Layout/Toolbars/MobileToolbar'
 import FilePreview from '../components/FilePreview/FilePreview'
-import MoveItemPopup from '../components/Others/MoveItemPopup'
-import InfoSidebar from '../components/FilesView/InfoSidebar'
+import MoveItemPopup from '../components/Popups/MoveItemPopup'
+import InfoSidebar from '../components/Layout/Sidebars/InfoSidebar'
 import Spotlight from '../components/Spotlight/Spotlight'
-import Vignette from '../components/Others/Vignette'
-import DragUI from '../components/FilesView/DragUI'
-import Alert from '../components/FilesView/Alert'
+import Vignette from '../components/UI/Others/Vignette'
+import DragUI from '../components/UI/Others/DragUI'
+import Alert from '../components/Popups/Alert'
 import { mapGetters } from 'vuex'
 import { events } from '../bus'
 import router from '../router'
-import DesktopSharepageToolbar from '../components/FilesView/DesktopSharepageToolbar'
+import DesktopSharepageToolbar from '../components/Layout/Toolbars/DesktopSharepageToolbar'
 
 export default {
     name: 'Shared',
diff --git a/resources/js/views/SharedAuthentication.vue b/resources/js/views/SharedAuthentication.vue
index 4af2d4b7..dae742a8 100644
--- a/resources/js/views/SharedAuthentication.vue
+++ b/resources/js/views/SharedAuthentication.vue
@@ -40,10 +40,10 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import AuthContentWrapper from '../components/Auth/AuthContentWrapper'
-import AuthContent from '../components/Auth/AuthContent'
-import AuthButton from '../components/Auth/AuthButton'
-import Headline from './Auth/Headline'
+import AuthContentWrapper from '../components/Layout/AuthPages/AuthContentWrapper'
+import AuthContent from '../components/Layout/AuthPages/AuthContent'
+import AuthButton from '../components/UI/Buttons/AuthButton'
+import Headline from '../components/UI/Labels/LogoHeadline'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
diff --git a/resources/js/views/SharedSingleFile.vue b/resources/js/views/SharedSingleFile.vue
index 7426a4fc..f7d40d8f 100644
--- a/resources/js/views/SharedSingleFile.vue
+++ b/resources/js/views/SharedSingleFile.vue
@@ -79,9 +79,9 @@
 </template>
 
 <script>
-import ButtonBase from '../components/FilesView/ButtonBase'
+import ButtonBase from '../components/UI/Buttons/ButtonBase'
 import Video from '../components/FilePreview/Media/Video'
-import ItemGrid from '../components/FilesView/ItemGrid'
+import ItemGrid from '../components/UI/Entries/ItemGrid'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
diff --git a/resources/js/views/Teams/Invitation.vue b/resources/js/views/Teams/Invitation.vue
index f2b09f27..b8a3ea62 100644
--- a/resources/js/views/Teams/Invitation.vue
+++ b/resources/js/views/Teams/Invitation.vue
@@ -120,12 +120,12 @@
 <script>
 import { ValidationObserver, ValidationProvider } from 'vee-validate/dist/vee-validate.full'
 import VueFolderTeamIcon from '../../components/Icons/VueFolderTeamIcon'
-import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
-import AuthContent from '../../components/Auth/AuthContent'
-import MemberAvatar from '../../components/FilesView/MemberAvatar'
-import AuthButton from '../../components/Auth/AuthButton'
-import Spinner from '../../components/FilesView/Spinner'
-import Headline from '../Auth/Headline'
+import AuthContentWrapper from '../../components/Layout/AuthPages/AuthContentWrapper'
+import AuthContent from '../../components/Layout/AuthPages/AuthContent'
+import MemberAvatar from '../../components/UI/Others/MemberAvatar'
+import AuthButton from '../../components/UI/Buttons/AuthButton'
+import Spinner from '../../components/UI/Others/Spinner'
+import Headline from '../../components/UI/Labels/LogoHeadline'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 
diff --git a/resources/js/views/TemporaryUnavailable.vue b/resources/js/views/TemporaryUnavailable.vue
index 97f58094..d9f67faa 100644
--- a/resources/js/views/TemporaryUnavailable.vue
+++ b/resources/js/views/TemporaryUnavailable.vue
@@ -17,9 +17,9 @@
 </template>
 
 <script>
-import AuthContentWrapper from '../components/Auth/AuthContentWrapper'
-import AuthContent from '../components/Auth/AuthContent'
-import Headline from './Auth/Headline'
+import AuthContentWrapper from '../components/Layout/AuthPages/AuthContentWrapper'
+import AuthContent from '../components/Layout/AuthPages/AuthContent'
+import Headline from '../components/UI/Labels/LogoHeadline'
 
 export default {
     name: 'TemporaryUnavailable',
diff --git a/resources/js/views/UploadRequest.vue b/resources/js/views/UploadRequest.vue
index 8814ae75..5cdaad49 100644
--- a/resources/js/views/UploadRequest.vue
+++ b/resources/js/views/UploadRequest.vue
@@ -39,19 +39,19 @@
 </template>
 
 <script>
-import DesktopUploadRequestToolbar from '../components/FilesView/DesktopUploadRequestToolbar'
-import MobileUploadRequestToolBar from "../components/FilesView/MobileUploadRequestToolbar"
-import InfoSidebarUploadRequest from "../components/FilesView/InfoSidebarUploadRequest"
-import FileSortingMobile from '../components/FilesView/FileSortingMobile'
-import FileFilterMobile from '../components/FilesView/FileFilterMobile'
-import CreateFolderPopup from '../components/Others/CreateFolderPopup'
-import DesktopToolbar from '../components/FilesView/DesktopToolbar'
-import ConfirmPopup from "../components/Others/Popup/ConfirmPopup"
-import RenameItemPopup from '../components/Others/RenameItemPopup'
+import DesktopUploadRequestToolbar from '../components/Layout/Toolbars/DesktopUploadRequestToolbar'
+import MobileUploadRequestToolBar from "../components/Layout/Toolbars/MobileUploadRequestToolbar"
+import InfoSidebarUploadRequest from "../components/Layout/Sidebars/InfoSidebarUploadRequest"
+import FileSortingMobile from '../components/Menus/FileSortingMobile'
+import FileFilterMobile from '../components/Menus/FileFilterMobile'
+import CreateFolderPopup from '../components/Popups/CreateFolderPopup'
+import DesktopToolbar from '../components/Layout/Toolbars/DesktopToolbar'
+import ConfirmPopup from "../components/Popups/ConfirmPopup"
+import RenameItemPopup from '../components/Popups/RenameItemPopup'
 import FilePreview from '../components/FilePreview/FilePreview'
-import MoveItemPopup from '../components/Others/MoveItemPopup'
+import MoveItemPopup from '../components/Popups/MoveItemPopup'
 import Spotlight from '../components/Spotlight/Spotlight'
-import DragUI from '../components/FilesView/DragUI'
+import DragUI from '../components/UI/Others/DragUI'
 import { mapGetters } from 'vuex'
 import { events } from '../bus'
 
diff --git a/resources/js/views/User/Billing.vue b/resources/js/views/User/Billing.vue
index 62700f3d..9d6d1d63 100644
--- a/resources/js/views/User/Billing.vue
+++ b/resources/js/views/User/Billing.vue
@@ -82,7 +82,7 @@ import UserEditSubscription from '../../components/Subscription/UserEditSubscrip
 import UserFailedPayments from '../../components/Subscription/UserFailedPayments'
 import UserUsageEstimates from '../../components/Subscription/UserUsageEstimates'
 import UserBillingAlerts from '../../components/Subscription/UserBillingAlerts'
-import PageTab from '../../components/Others/Layout/PageTab'
+import PageTab from '../../components/Layout/PageTab'
 import UserBalance from '../../components/Subscription/UserBalance'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index 14919f5a..602ef564 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -139,13 +139,13 @@
 
 <script>
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import SwitchInput from '../../components/Others/Forms/SwitchInput'
-import FormLabel from '../../components/Others/Forms/FormLabel'
-import ButtonBase from '../../components/FilesView/ButtonBase'
-import InfoBox from '../../components/Others/Forms/InfoBox'
-import AppInputSwitch from '../../components/Admin/AppInputSwitch'
-import AppInputButton from '../../components/Admin/AppInputButton'
-import AppInputText from '../../components/Admin/AppInputText'
+import SwitchInput from '../../components/Inputs/SwitchInput'
+import FormLabel from '../../components/UI/Labels/FormLabel'
+import ButtonBase from '../../components/UI/Buttons/ButtonBase'
+import InfoBox from '../../components/UI/Others/InfoBox'
+import AppInputSwitch from '../../components/Forms/Layouts/AppInputSwitch'
+import AppInputButton from '../../components/Forms/Layouts/AppInputButton'
+import AppInputText from '../../components/Forms/Layouts/AppInputText'
 import { required } from 'vee-validate/dist/rules'
 import { XIcon, Trash2Icon } from 'vue-feather-icons'
 import { events } from '../../bus'
diff --git a/resources/js/views/User/Settings.vue b/resources/js/views/User/Settings.vue
index 395b9d3a..17487923 100644
--- a/resources/js/views/User/Settings.vue
+++ b/resources/js/views/User/Settings.vue
@@ -193,9 +193,9 @@
 </template>
 
 <script>
-import AppInputText from '../../components/Admin/AppInputText'
-import SelectInput from '../../components/Others/Forms/SelectInput'
-import FormLabel from '../../components/Others/Forms/FormLabel'
+import AppInputText from '../../components/Forms/Layouts/AppInputText'
+import SelectInput from '../../components/Inputs/SelectInput'
+import FormLabel from '../../components/UI/Labels/FormLabel'
 import { required } from 'vee-validate/dist/rules'
 import { mapGetters } from 'vuex'
 
diff --git a/resources/js/views/User/Storage.vue b/resources/js/views/User/Storage.vue
index b78e859d..5300536d 100644
--- a/resources/js/views/User/Storage.vue
+++ b/resources/js/views/User/Storage.vue
@@ -55,11 +55,11 @@
 </template>
 
 <script>
-import ProgressLine from '../../components/Admin/ProgressLine'
-import FormLabel from '../../components/Others/Forms/FormLabel'
-import PageTab from '../../components/Others/Layout/PageTab'
+import ProgressLine from '../../components/UI/ProgressChart/ProgressLine'
+import FormLabel from '../../components/UI/Labels/FormLabel'
+import PageTab from '../../components/Layout/PageTab'
 import axios from 'axios'
-import BarChart from '../../components/UI/BarChart'
+import BarChart from '../../components/UI/BarChart/BarChart'
 import { mapGetters } from 'vuex'
 
 export default {