From 394a7b6bafb5d8fdc619894511ec8237e6d1759a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Wed, 16 Feb 2022 16:57:57 +0100
Subject: [PATCH] upload request prototype UI

---
 public/mix-manifest.json                      |    4 +-
 resources/css/tailwind.css                    |    8 +
 resources/js/App.vue                          |  233 ++-
 .../js/components/Admin/AppInputButton.vue    |    5 +-
 .../js/components/Admin/AppInputSwitch.vue    |    2 +-
 .../js/components/Admin/AppInputText.vue      |    6 +-
 .../js/components/Admin/CardNavigation.vue    |    3 +-
 .../js/components/Admin/ProgressLine.vue      |    3 +-
 .../Admin/WidgetLatestRegistrations.vue       |   38 +-
 .../Admin/WidgetLatestTransactions.vue        |   21 +-
 resources/js/components/Auth/AuthButton.vue   |    4 +-
 .../Auth/SocialiteAuthenticationButtons.vue   |    5 +-
 .../FilePreview/FilePreviewMedia.vue          |  102 +-
 .../FilePreview/FilePreviewToolbar.vue        |    2 +-
 .../js/components/FilePreview/Media/Audio.vue |    7 +-
 .../components/FilePreview/Media/PdfFile.vue  |    4 +-
 .../js/components/FilePreview/Media/Video.vue |   18 +-
 resources/js/components/FilesView/Alert.vue   |    4 +-
 .../FilesView/DesktopSharepageToolbar.vue     |   19 +-
 .../components/FilesView/DesktopToolbar.vue   |   13 +-
 .../FilesView/DesktopUploadRequestToolbar.vue |  147 ++
 resources/js/components/FilesView/DragUI.vue  |   14 +-
 .../FilesView/FileActionsMobile.vue           |    6 +-
 .../js/components/FilesView/FileBrowser.vue   |   12 +-
 .../components/FilesView/FileFilterMobile.vue |   40 +-
 .../FilesView/FileIconThumbnail.vue           |   13 +-
 .../FilesView/FileSortingOptions.vue          |   28 +-
 .../FilesView/Icons/AlphabetIcon.vue          |    5 +-
 .../FilesView/Icons/VueFolderIcon.vue         |    9 +-
 .../FilesView/Icons/VueFolderTeamIcon.vue     |   11 +-
 .../js/components/FilesView/InfoSidebar.vue   |   48 +-
 .../js/components/FilesView/ItemGrid.vue      |    8 +-
 .../js/components/FilesView/ItemHandler.vue   |    7 +-
 .../js/components/FilesView/ItemList.vue      |   46 +-
 .../js/components/FilesView/MemberAvatar.vue  |    4 +-
 .../FilesView/MobileMultiSelectToolbar.vue    |    7 +-
 .../js/components/FilesView/NavigationBar.vue |   97 +-
 resources/js/components/FilesView/Option.vue  |  270 +++-
 .../js/components/FilesView/OptionGroup.vue   |   20 +-
 .../js/components/FilesView/OptionUpload.vue  |   31 +-
 .../js/components/FilesView/SearchBar.vue     |    9 +-
 .../js/components/FilesView/ToolbarButton.vue |   28 +-
 .../components/FilesView/UploadProgress.vue   |    8 +-
 .../Index/Components/PricingTables.vue        |    4 +-
 .../js/components/Index/IndexGetStarted.vue   |   13 +-
 .../components/Index/IndexHeroScreenshot.vue  |   13 +-
 .../js/components/Index/IndexMainFeatures.vue |    7 +-
 .../js/components/Index/IndexNavigation.vue   |    6 +-
 .../js/components/Index/IndexPageFooter.vue   |    6 +-
 .../components/Index/IndexPricingTables.vue   |    5 +-
 resources/js/components/Mobile/MenuMobile.vue |   30 +-
 .../js/components/Others/ConfirmPassword.vue  |    8 +-
 .../js/components/Others/CookieDisclaimer.vue |    3 +-
 .../components/Others/CreateFolderPopup.vue   |   14 +-
 .../js/components/Others/CreateLanguage.vue   |   23 +-
 .../Others/CreatePersonalTokenPopup.vue       |   16 +-
 resources/js/components/Others/Emoji.vue      |    6 +-
 .../js/components/Others/EmojiPicker.vue      |   35 +-
 .../components/Others/FilePreviewDetail.vue   |   32 +-
 .../components/Others/Forms/AvatarInput.vue   |   15 +-
 .../components/Others/Forms/CopyShareLink.vue |   11 +-
 .../js/components/Others/Forms/FormLabel.vue  |    8 +-
 .../js/components/Others/Forms/ImageInput.vue |  133 +-
 .../js/components/Others/Forms/InfoBox.vue    |    4 +-
 .../Others/Forms/MultiEmailInput.vue          |   13 +-
 .../components/Others/Forms/SearchInput.vue   |    9 +-
 .../Others/Forms/SelectBoxInput.vue           |    8 +-
 .../components/Others/Forms/SelectInput.vue   |   14 +-
 .../js/components/Others/MobileNavigation.vue |  114 +-
 .../js/components/Others/MoveItemPopup.vue    |   23 +-
 .../components/Others/PlanPricingTables.vue   |   11 +-
 .../components/Others/Popup/ConfirmPopup.vue  |    8 +-
 .../components/Others/Popup/PopupContent.vue  |    5 +-
 .../components/Others/Popup/PopupHeader.vue   |   12 +-
 .../components/Others/Popup/PopupWrapper.vue  |   73 +-
 .../js/components/Others/RenameItemPopup.vue  |   23 +-
 .../Others/SelectSingleChargeMethodPopup.vue  |   18 +-
 .../js/components/Others/ShareCreatePopup.vue |   78 +-
 .../js/components/Others/ShareEditPopup.vue   |   84 +-
 resources/js/components/Others/TabWrapper.vue |    8 +-
 .../Others/Tables/DatatableWrapper.vue        |   45 +-
 .../js/components/Others/ThumbnailItem.vue    |   36 +-
 resources/js/components/Others/TreeMenu.vue   |   37 +-
 .../components/Others/TreeMenuNavigator.vue   |   14 +-
 resources/js/components/Others/Vignette.vue   |    6 +-
 .../js/components/Sidebar/ContentGroup.vue    |    7 +-
 .../js/components/Sidebar/ContentSidebar.vue  |    5 +-
 .../components/Sidebar/SidebarNavigation.vue  |   29 +-
 .../components/Spotlight/FilterSuggestion.vue |    6 +-
 .../js/components/Spotlight/Spotlight.vue     |  301 ++--
 .../Subscription/FixedTransactionRow.vue      |   11 +-
 .../Subscription/MeteredTransactionRow.vue    |   11 +-
 .../components/Subscription/PaymentCard.vue   |    8 +-
 .../js/components/Subscription/PlanDetail.vue |    4 +-
 .../SelectPlanSubscriptionPopup.vue           |   74 +-
 .../components/Subscription/UserBalance.vue   |   24 +-
 .../Subscription/UserBillingAlerts.vue        |   65 +-
 .../Subscription/UserEditSubscription.vue     |   23 +-
 .../Subscription/UserEmptySubscription.vue    |    8 +-
 .../Subscription/UserFailedPayments.vue       |   15 +-
 .../Subscription/UserStoredPaymentMethods.vue |   14 +-
 .../UserTransactionsForFixedBilling.vue       |   11 +-
 .../UserTransactionsForMeteredBilling.vue     |    5 +-
 .../UserUpdatePaymentMethodsExternally.vue    |   19 +-
 .../components/Teams/Components/TeamList.vue  |   17 +-
 .../Teams/Components/TeamMembersButton.vue    |    8 +-
 .../Teams/Components/TeamMembersPreview.vue   |   16 +-
 .../Teams/CreateTeamFolderPopup.vue           |   38 +-
 .../components/Teams/EditTeamFolderPopup.vue  |   13 +-
 resources/js/components/UI/Bar.vue            |   12 +-
 resources/js/components/UI/BarChart.vue       |    4 +-
 resources/js/helpers/functionHelpers.js       |    9 +-
 resources/js/helpers/itemHelpers.js           |   13 +-
 resources/js/router.js                        |   14 +-
 resources/js/routes/routesAdmin.js            |  115 +-
 resources/js/routes/routesAuth.js             |    3 +-
 resources/js/routes/routesFile.js             |    9 +-
 resources/js/routes/routesMaintenance.js      |   12 +-
 resources/js/routes/routesUploadRequest.js    |   23 +
 resources/js/store/index.js                   |    2 +
 resources/js/store/modules/app.js             |  329 ++---
 resources/js/store/modules/fileBrowser.js     |    2 +-
 resources/js/store/modules/fileFunctions.js   |    3 +-
 resources/js/store/modules/sharing.js         |    5 +-
 resources/js/store/modules/teams.js           |   10 +-
 resources/js/store/modules/uploadRequest.js   |   28 +
 resources/js/store/modules/userAuth.js        |   14 +-
 resources/js/views/Admin.vue                  |  110 +-
 .../AppSettings/AppSettingsTabs/Adsense.vue   |   93 +-
 .../AppSettingsTabs/Appearance.vue            |   31 +-
 .../AppSettings/AppSettingsTabs/Email.vue     |  387 +++--
 .../AppSettings/AppSettingsTabs/Index.vue     |  198 ++-
 .../AppSettings/AppSettingsTabs/Others.vue    |   37 +-
 .../AppSettings/AppSettingsTabs/Server.vue    |  301 ++--
 .../AppSettings/AppSettingsTabs/SignInUp.vue  |   57 +-
 resources/js/views/Admin/Dashboard.vue        |   71 +-
 resources/js/views/Admin/Invoices.vue         |   26 +-
 .../js/views/Admin/Languages/Language.vue     |   66 +-
 resources/js/views/Admin/Pages.vue            |   16 +-
 resources/js/views/Admin/Pages/PageEdit.vue   |    5 +-
 .../PaymentSettingsTab/Billings.vue           |   12 +-
 .../PaymentSettingsTab/Payments.vue           |  191 ++-
 resources/js/views/Admin/Plans.vue            |   33 +-
 .../Admin/Plans/Create/CreateFixedPlan.vue    |   51 +-
 .../Admin/Plans/Create/CreateMeteredPlan.vue  |   94 +-
 .../js/views/Admin/Plans/Tabs/PlanDelete.vue  |   16 +-
 .../Admin/Plans/Tabs/PlanFixedSettings.vue    |   52 +-
 .../Admin/Plans/Tabs/PlanMeteredSettings.vue  |   37 +-
 .../Admin/Plans/Tabs/PlanSubscribers.vue      |   38 +-
 resources/js/views/Admin/Subscriptions.vue    |   23 +-
 resources/js/views/Admin/Users.vue            |   56 +-
 resources/js/views/Admin/Users/UserCreate.vue |   41 +-
 .../views/Admin/Users/UserTabs/UserDelete.vue |    8 +-
 .../views/Admin/Users/UserTabs/UserDetail.vue |   22 +-
 .../UserTabs/UserMeteredSubscription.vue      |   22 +-
 .../Admin/Users/UserTabs/UserPassword.vue     |   14 +-
 .../Admin/Users/UserTabs/UserStorage.vue      |   34 +-
 .../Admin/Users/UserTabs/UserSubscription.vue |   27 +-
 resources/js/views/Auth/CreateNewPassword.vue |   47 +-
 resources/js/views/Auth/ForgottenPassword.vue |   19 +-
 resources/js/views/Auth/Headline.vue          |    7 +-
 resources/js/views/Auth/SignIn.vue            |  121 +-
 resources/js/views/Auth/SignUp.vue            |   60 +-
 .../views/Auth/SuccessfullyEmailVerified.vue  |    5 +-
 .../js/views/Auth/SuccessfullySendEmail.vue   |    5 +-
 .../Components/NavigationSharePanel.vue       |  111 +-
 .../Components/PanelNavigationFiles.vue       |   13 +-
 resources/js/views/FileView/Files.vue         |  100 +-
 resources/js/views/FileView/MySharedItems.vue |   51 +-
 resources/js/views/FileView/Public.vue        |   69 +-
 resources/js/views/FileView/RecentUploads.vue |   33 +-
 resources/js/views/FileView/SharedWithMe.vue  |   42 +-
 resources/js/views/FileView/TeamFolders.vue   |   87 +-
 resources/js/views/FileView/Trash.vue         |   41 +-
 .../js/views/FileView/UploadRequestFiles.vue  |  198 +++
 resources/js/views/Frontpage/ContactUs.vue    |   23 +-
 resources/js/views/Frontpage/Homepage.vue     |    4 +-
 resources/js/views/Platform.vue               |    2 +-
 resources/js/views/Profile.vue                |   10 +-
 resources/js/views/SetupWizard.vue            |   15 +-
 .../js/views/SetupWizard/AdminAccount.vue     |  152 +-
 resources/js/views/SetupWizard/AppSetup.vue   |  350 +++--
 resources/js/views/SetupWizard/Database.vue   |  195 ++-
 .../js/views/SetupWizard/EnvironmentSetup.vue | 1264 ++++++++++-------
 .../js/views/SetupWizard/PurchaseCode.vue     |   85 +-
 .../js/views/SetupWizard/StatusCheck.vue      |  219 +--
 resources/js/views/Shared.vue                 |   11 +-
 resources/js/views/SharedAuthentication.vue   |    4 +-
 resources/js/views/SharedSingleFile.vue       |  119 +-
 resources/js/views/Teams/Invitation.vue       |   11 +-
 resources/js/views/TemporaryUnavailable.vue   |    5 +-
 resources/js/views/UploadRequest.vue          |   90 ++
 resources/js/views/User/Password.vue          |   35 +-
 resources/js/views/User/Settings.vue          |  118 +-
 resources/js/views/User/Storage.vue           |    7 +-
 routes/api.php                                |    4 +
 .../GetUploadRequestController.php            |   25 +
 197 files changed, 6927 insertions(+), 2738 deletions(-)
 create mode 100644 resources/js/components/FilesView/DesktopUploadRequestToolbar.vue
 create mode 100644 resources/js/routes/routesUploadRequest.js
 create mode 100644 resources/js/store/modules/uploadRequest.js
 create mode 100644 resources/js/views/FileView/UploadRequestFiles.vue
 create mode 100644 resources/js/views/UploadRequest.vue
 create mode 100644 src/Domain/UploadRequest/Controllers/GetUploadRequestController.php

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index b31f686a..f212c89f 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -68,5 +68,7 @@
     "/js/chunks/shared-with-me.js": "/js/chunks/shared-with-me.js",
     "/js/chunks/invitation.js": "/js/chunks/invitation.js",
     "/css/tailwind.css": "/css/tailwind.css",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/js/chunks/request-upload.js": "/js/chunks/request-upload.js",
+    "/js/chunks/request.js": "/js/chunks/request.js"
 }
diff --git a/resources/css/tailwind.css b/resources/css/tailwind.css
index e4e3f7b1..bceb341a 100644
--- a/resources/css/tailwind.css
+++ b/resources/css/tailwind.css
@@ -20,4 +20,12 @@
 
 .is-inactive {
     @apply pointer-events-none opacity-40
+}
+
+.grid-view {
+    @apply grid grid-cols-3 content-start sm:grid-cols-4 lg:gap-2 xl:grid-cols-6 xl:gap-4;
+}
+
+.grid-view-sidebar {
+    @apply grid grid-cols-3 content-start md:grid-cols-2 lg:grid-cols-3 lg:gap-2 xl:grid-cols-4 xl:gap-4 2xl:grid-cols-5;
 }
\ No newline at end of file
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 2463adf8..b3282af8 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -5,16 +5,16 @@
         <ToasterWrapper />
         <CookieDisclaimer />
 
-		<!--Show spinner before translations is loaded-->
+        <!--Show spinner before translations is loaded-->
         <Spinner v-if="!isLoaded" />
 
-		<!--Show warning bar when user functionality is restricted-->
+        <!--Show warning bar when user functionality is restricted-->
         <RestrictionWarningBar />
 
-		<!--App view-->
+        <!--App view-->
         <router-view v-if="isLoaded" />
 
-		<!--Background under popups-->
+        <!--Background under popups-->
         <Vignette />
     </div>
 </template>
@@ -26,94 +26,93 @@ import Spinner from './components/FilesView/Spinner'
 import Vignette from './components/Others/Vignette'
 import Alert from './components/FilesView/Alert'
 import RestrictionWarningBar from './components/Subscription/RestrictionWarningBar'
-import {mapGetters} from 'vuex'
-import {events} from './bus'
+import { mapGetters } from 'vuex'
+import { events } from './bus'
 
 export default {
-	name: 'App',
-	components: {
-		RestrictionWarningBar,
-		CookieDisclaimer,
-		ToasterWrapper,
-		Vignette,
-		Spinner,
-		Alert,
-	},
-	data() {
-		return {
-			isLoaded: false,
-		}
-	},
-	computed: {
-		...mapGetters(['config', 'user']),
-	},
-	watch: {
-		'config.defaultThemeMode': function () {
-			this.handleDarkMode()
-		},
-	},
-	methods: {
-		spotlightListener(e) {
-			if (e.key === 'k' && e.metaKey) {
-				events.$emit('spotlight:show')
-			}
-		},
-		handleDarkMode() {
-			const app = document.getElementsByTagName('html')[0]
-			const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
+    name: 'App',
+    components: {
+        RestrictionWarningBar,
+        CookieDisclaimer,
+        ToasterWrapper,
+        Vignette,
+        Spinner,
+        Alert,
+    },
+    data() {
+        return {
+            isLoaded: false,
+        }
+    },
+    computed: {
+        ...mapGetters(['config', 'user']),
+    },
+    watch: {
+        'config.defaultThemeMode': function () {
+            this.handleDarkMode()
+        },
+    },
+    methods: {
+        spotlightListener(e) {
+            if (e.key === 'k' && e.metaKey) {
+                events.$emit('spotlight:show')
+            }
+        },
+        handleDarkMode() {
+            const app = document.getElementsByTagName('html')[0]
+            const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
 
-			if (this.config.defaultThemeMode === 'dark') {
-				app.classList.add('dark')
-				this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
-			} else if (this.config.defaultThemeMode === 'light') {
-				app.classList.remove('dark')
-				this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
-			} else if (this.config.defaultThemeMode === 'system' && prefersDarkScheme.matches) {
-				app.classList.add('dark')
-				this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
-			} else if (this.config.defaultThemeMode === 'system' && !prefersDarkScheme.matches) {
-				app.classList.remove('dark')
-				this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
-			}
-		},
-	},
-	beforeMount() {
-		window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-			this.handleDarkMode()
-		})
+            if (this.config.defaultThemeMode === 'dark') {
+                app.classList.add('dark')
+                this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
+            } else if (this.config.defaultThemeMode === 'light') {
+                app.classList.remove('dark')
+                this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
+            } else if (this.config.defaultThemeMode === 'system' && prefersDarkScheme.matches) {
+                app.classList.add('dark')
+                this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
+            } else if (this.config.defaultThemeMode === 'system' && !prefersDarkScheme.matches) {
+                app.classList.remove('dark')
+                this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
+            }
+        },
+    },
+    beforeMount() {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            this.handleDarkMode()
+        })
 
-		// Commit config
-		this.$store.commit('INIT', {
-			config: this.$root.$data.config,
-		})
+        // Commit config
+        this.$store.commit('INIT', {
+            config: this.$root.$data.config,
+        })
 
-		// Get installation state
-		let installation = this.$root.$data.config.installation
+        // Get installation state
+        let installation = this.$root.$data.config.installation
 
-		// Redirect to setup wizard
-		if (installation === 'installation-needed') {
-			this.isLoaded = true
+        // Redirect to setup wizard
+        if (installation === 'installation-needed') {
+            this.isLoaded = true
 
-			if (window.location.pathname.split('/')[1] !== 'setup-wizard') {
-				this.$router.push({name: 'StatusCheck'})
-			}
-		} else {
-			this.$store.dispatch('getLanguageTranslations', this.$root.$data.config.locale)
-				.then(() => {
-					this.isLoaded = true
-				})
-		}
-	},
-	created() {
-		if (this.$isWindows()) {
-			document.body.classList.add('windows')
-		}
+            if (window.location.pathname.split('/')[1] !== 'setup-wizard') {
+                this.$router.push({ name: 'StatusCheck' })
+            }
+        } else {
+            this.$store.dispatch('getLanguageTranslations', this.$root.$data.config.locale).then(() => {
+                this.isLoaded = true
+            })
+        }
+    },
+    created() {
+        if (this.$isWindows()) {
+            document.body.classList.add('windows')
+        }
 
-		window.addEventListener('keydown', this.spotlightListener)
-	},
-	destroyed() {
-		window.removeEventListener('keydown', this.spotlightListener)
-	},
+        window.addEventListener('keydown', this.spotlightListener)
+    },
+    destroyed() {
+        window.removeEventListener('keydown', this.spotlightListener)
+    },
 }
 </script>
 
@@ -123,54 +122,54 @@ export default {
 @import '../sass/vuefilemanager/mixins';
 
 input:-webkit-autofill {
-	transition-delay: 999999999999s;
+    transition-delay: 999999999999s;
 }
 
 [v-cloak],
 [v-cloak] > * {
-	display: none;
+    display: none;
 }
 
 * {
-	outline: 0;
-	margin: 0;
-	padding: 0;
-	font-family: 'Nunito', sans-serif;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	box-sizing: border-box;
-	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-	font-size: 16px;
-	text-decoration: none;
-	color: $text;
+    outline: 0;
+    margin: 0;
+    padding: 0;
+    font-family: 'Nunito', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    font-size: 16px;
+    text-decoration: none;
+    color: $text;
 }
 
 .vue-feather {
-	path,
-	circle,
-	line,
-	rect,
-	polyline,
-	ellipse,
-	polygon {
-		color: inherit;
-	}
+    path,
+    circle,
+    line,
+    rect,
+    polyline,
+    ellipse,
+    polygon {
+        color: inherit;
+    }
 }
 
 // Dark mode
 .dark {
-	* {
-		color: $dark_mode_text_primary;
-	}
+    * {
+        color: $dark_mode_text_primary;
+    }
 
-	body,
-	html {
-		background: $dark_mode_background;
-		color: $dark_mode_text_primary;
+    body,
+    html {
+        background: $dark_mode_background;
+        color: $dark_mode_text_primary;
 
-		img {
-			opacity: 0.95;
-		}
-	}
+        img {
+            opacity: 0.95;
+        }
+    }
 }
 </style>
diff --git a/resources/js/components/Admin/AppInputButton.vue b/resources/js/components/Admin/AppInputButton.vue
index 7e41f083..674f108f 100644
--- a/resources/js/components/Admin/AppInputButton.vue
+++ b/resources/js/components/Admin/AppInputButton.vue
@@ -1,5 +1,8 @@
 <template>
-    <div :class="{ 'sm:mb-7 mb-6': !isLast }" class="w-full justify-between space-y-4 sm:flex sm:space-x-8 sm:space-x-2 sm:space-y-0">
+    <div
+        :class="{ 'mb-6 sm:mb-7': !isLast }"
+        class="w-full justify-between space-y-4 sm:flex sm:space-x-8 sm:space-x-2 sm:space-y-0"
+    >
         <!--Label for input-->
         <div class="leading-5">
             <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
diff --git a/resources/js/components/Admin/AppInputSwitch.vue b/resources/js/components/Admin/AppInputSwitch.vue
index b07a221d..d4a79442 100644
--- a/resources/js/components/Admin/AppInputSwitch.vue
+++ b/resources/js/components/Admin/AppInputSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ 'sm:mb-7 mb-6': !isLast }" class="flex w-full items-center justify-between space-x-2 sm:space-x-8">
+    <div :class="{ 'mb-6 sm:mb-7': !isLast }" class="flex w-full items-center justify-between space-x-2 sm:space-x-8">
         <!--Label for input-->
         <div class="leading-5">
             <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
diff --git a/resources/js/components/Admin/AppInputText.vue b/resources/js/components/Admin/AppInputText.vue
index 780b47d9..3e3ae94c 100644
--- a/resources/js/components/Admin/AppInputText.vue
+++ b/resources/js/components/Admin/AppInputText.vue
@@ -1,7 +1,9 @@
 <template>
-    <div :class="{ 'sm:mb-7 mb-6': !isLast }">
+    <div :class="{ 'mb-6 sm:mb-7': !isLast }">
         <!--Label for input-->
-        <label v-if="title" class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
+        <label v-if="title" class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200">
+            {{ title }}:
+        </label>
 
         <!--Form element-->
         <slot />
diff --git a/resources/js/components/Admin/CardNavigation.vue b/resources/js/components/Admin/CardNavigation.vue
index e5490f68..2a525068 100644
--- a/resources/js/components/Admin/CardNavigation.vue
+++ b/resources/js/components/Admin/CardNavigation.vue
@@ -2,7 +2,8 @@
     <div id="card-navigation" style="height: 62px" class="mb-7">
         <div
             :class="{
-                'fixed top-0 left-0 right-0 z-10 rounded-none bg-white bg-opacity-50 px-6 backdrop-blur-lg backdrop-filter dark:bg-dark-foreground': fixedNav,
+                'fixed top-0 left-0 right-0 z-10 rounded-none bg-white bg-opacity-50 px-6 backdrop-blur-lg backdrop-filter dark:bg-dark-foreground':
+                    fixedNav,
             }"
         >
             <div class="overflow-x-auto whitespace-nowrap">
diff --git a/resources/js/components/Admin/ProgressLine.vue b/resources/js/components/Admin/ProgressLine.vue
index 5cbf43c5..1e9aceb4 100644
--- a/resources/js/components/Admin/ProgressLine.vue
+++ b/resources/js/components/Admin/ProgressLine.vue
@@ -16,7 +16,8 @@
                     v-if="data.length === 1"
                     :class="[
                         {
-                            'rounded-tl-lg rounded-bl-lg border-r-2 border-white dark:border-gray-800': chart.progress < 100,
+                            'rounded-tl-lg rounded-bl-lg border-r-2 border-white dark:border-gray-800':
+                                chart.progress < 100,
                             'rounded-lg border-none': chart.progress >= 100,
                         },
                         chart.color,
diff --git a/resources/js/components/Admin/WidgetLatestRegistrations.vue b/resources/js/components/Admin/WidgetLatestRegistrations.vue
index b2cb52e7..a53a9629 100644
--- a/resources/js/components/Admin/WidgetLatestRegistrations.vue
+++ b/resources/js/components/Admin/WidgetLatestRegistrations.vue
@@ -1,8 +1,17 @@
 <template>
-    <DatatableWrapper @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="mt-6 overflow-x-auto">
+    <DatatableWrapper
+        @init="isLoading = false"
+        api="/api/admin/dashboard/newbies"
+        :paginator="false"
+        :columns="columns"
+        class="mt-6 overflow-x-auto"
+    >
         <template slot-scope="{ row }">
             <!--Not a subscription-->
-            <tr v-if="config.subscriptionType === 'none'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+            <tr
+                v-if="config.subscriptionType === 'none'"
+                class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+            >
                 <td class="py-3 pr-3 md:pr-1">
                     <router-link
                         :to="{
@@ -13,7 +22,10 @@
                         <div class="flex items-center">
                             <MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
                             <div class="ml-3 pr-10">
-                                <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                                <b
+                                    class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                    style="max-width: 155px"
+                                >
                                     {{ row.data.relationships.settings.data.attributes.name }}
                                 </b>
                                 <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -70,7 +82,10 @@
             </tr>
 
             <!--Fixed subscription-->
-            <tr v-if="config.subscriptionType === 'fixed'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+            <tr
+                v-if="config.subscriptionType === 'fixed'"
+                class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+            >
                 <td class="py-3 pr-3 md:pr-1">
                     <router-link
                         :to="{
@@ -81,7 +96,10 @@
                         <div class="flex items-center">
                             <MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
                             <div class="ml-3 pr-10">
-                                <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                                <b
+                                    class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                    style="max-width: 155px"
+                                >
                                     {{ row.data.relationships.settings.data.attributes.name }}
                                 </b>
                                 <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -143,7 +161,10 @@
             </tr>
 
             <!--Metered subscription-->
-            <tr v-if="config.subscriptionType === 'metered'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+            <tr
+                v-if="config.subscriptionType === 'metered'"
+                class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+            >
                 <td class="py-3 pr-3 md:pr-1">
                     <router-link
                         :to="{
@@ -154,7 +175,10 @@
                         <div class="flex items-center">
                             <MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
                             <div class="ml-3 pr-10">
-                                <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                                <b
+                                    class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                    style="max-width: 155px"
+                                >
                                     {{ row.data.relationships.settings.data.attributes.name }}
                                 </b>
                                 <span class="block text-xs text-gray-600 dark:text-gray-500">
diff --git a/resources/js/components/Admin/WidgetLatestTransactions.vue b/resources/js/components/Admin/WidgetLatestTransactions.vue
index 8339ee14..24ab3de4 100644
--- a/resources/js/components/Admin/WidgetLatestTransactions.vue
+++ b/resources/js/components/Admin/WidgetLatestTransactions.vue
@@ -11,7 +11,10 @@
                     <div v-if="row.data.relationships.user" class="flex items-center">
                         <MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
                         <div class="ml-3 pr-10">
-                            <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                            <b
+                                class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                style="max-width: 155px"
+                            >
                                 {{ row.data.relationships.user.data.attributes.name }}
                             </b>
                             <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -24,10 +27,16 @@
                     </span>
                 </td>
                 <td class="px-3 md:px-1">
-                    <ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
+                    <ColorLabel
+                        v-if="config.subscriptionType === 'fixed'"
+                        :color="$getTransactionStatusColor(row.data.attributes.status)"
+                    >
                         {{ row.data.attributes.status }}
                     </ColorLabel>
-                    <ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
+                    <ColorLabel
+                        v-if="config.subscriptionType === 'metered'"
+                        :color="$getTransactionTypeColor(row.data.attributes.type)"
+                    >
                         {{ row.data.attributes.type }}
                     </ColorLabel>
                 </td>
@@ -43,7 +52,11 @@
                 </td>
                 <td class="pl-3 md:pl-1">
                     <div class="w-32 text-right md:w-full">
-                        <img class="w-32 md:inline-block" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
+                        <img
+                            class="w-32 md:inline-block"
+                            :src="$getPaymentLogo(row.data.attributes.driver)"
+                            :alt="row.data.attributes.driver"
+                        />
                     </div>
                 </td>
             </tr>
diff --git a/resources/js/components/Auth/AuthButton.vue b/resources/js/components/Auth/AuthButton.vue
index 5b6ec476..62197825 100644
--- a/resources/js/components/Auth/AuthButton.vue
+++ b/resources/js/components/Auth/AuthButton.vue
@@ -1,5 +1,7 @@
 <template>
-    <button class="group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300">
+    <button
+        class="group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300"
+    >
         <span class="pr-1 text-lg font-extrabold">
             {{ text }}
         </span>
diff --git a/resources/js/components/Auth/SocialiteAuthenticationButtons.vue b/resources/js/components/Auth/SocialiteAuthenticationButtons.vue
index c8ebca19..49c7b15c 100644
--- a/resources/js/components/Auth/SocialiteAuthenticationButtons.vue
+++ b/resources/js/components/Auth/SocialiteAuthenticationButtons.vue
@@ -1,5 +1,8 @@
 <template>
-    <div v-if="config.allowedFacebookLogin || config.allowedGoogleLogin || config.allowedGithubLogin" class="mb-10 flex items-center justify-center">
+    <div
+        v-if="config.allowedFacebookLogin || config.allowedGoogleLogin || config.allowedGithubLogin"
+        class="mb-10 flex items-center justify-center"
+    >
         <div v-if="config.allowedFacebookLogin" class="mx-5 cursor-pointer">
             <facebook-icon @click="socialiteRedirect('facebook')" />
         </div>
diff --git a/resources/js/components/FilePreview/FilePreviewMedia.vue b/resources/js/components/FilePreview/FilePreviewMedia.vue
index 5d113d8e..61e143fb 100644
--- a/resources/js/components/FilePreview/FilePreviewMedia.vue
+++ b/resources/js/components/FilePreview/FilePreviewMedia.vue
@@ -1,40 +1,52 @@
 <template>
-    <div v-if="currentFile" class="absolute lg:top-[66px] top-[56px] left-0 right-0 bottom-0 select-none">
-
-		<!--Arrow navigation-->
+    <div v-if="currentFile" class="absolute top-[56px] left-0 right-0 bottom-0 select-none lg:top-[66px]">
+        <!--Arrow navigation-->
         <div v-if="!$isMobile() && files.length > 1" class="">
-            <div @click.prevent="prev" class="fixed top-1/2 left-0 p-3 cursor-pointer z-20">
+            <div @click.prevent="prev" class="fixed top-1/2 left-0 z-20 cursor-pointer p-3">
                 <chevron-left-icon size="20" />
             </div>
 
-            <div @click.prevent="next" class="fixed top-1/2 right-0 p-3 cursor-pointer z-20">
+            <div @click.prevent="next" class="fixed top-1/2 right-0 z-20 cursor-pointer p-3">
                 <chevron-right-icon size="20" />
             </div>
         </div>
 
         <!--Desktop preview-->
-        <div v-if="!$isMobile() && (isAudio || isImage || isVideo || isPDF)" class="w-full h-full flex justify-center items-center">
-
-			<!--Show PDF-->
+        <div
+            v-if="!$isMobile() && (isAudio || isImage || isVideo || isPDF)"
+            class="flex h-full w-full items-center justify-center"
+        >
+            <!--Show PDF-->
             <PdfFile v-if="isPDF" :file="currentFile" />
 
             <!--Show Audio, Video and Image-->
-            <div class="w-full h-full flex items-center justify-center">
-                <Audio v-if="isAudio" :file="currentFile"/>
-                <Video v-if="isVideo" :file="currentFile" class="max-w-[1080px] max-h-full self-center mx-auto" />
-                <ImageFile v-if="isImage" :file="currentFile" class="max-w-[100%] max-h-[100%] self-center mx-auto" />
+            <div class="flex h-full w-full items-center justify-center">
+                <Audio v-if="isAudio" :file="currentFile" />
+                <Video v-if="isVideo" :file="currentFile" class="mx-auto max-h-full max-w-[1080px] self-center" />
+                <ImageFile v-if="isImage" :file="currentFile" class="mx-auto max-h-[100%] max-w-[100%] self-center" />
             </div>
         </div>
 
-		<!--Mobile Preview-->
-		<div v-if="$isMobile() && (isAudio || isImage || isVideo || isPDF)" @scroll="checkGroupInView" id="group-box" ref="scrollBox" class="flex gap-6 snap-x snap-mandatory overflow-x-auto h-full">
-			<div v-for="(file, i) in files" :key="i" :id="`group-${file.data.id}`" class="w-screen h-full flex items-center justify-center snap-center shrink-0 relative">
-                <ImageFile v-if="isImage" :file="file" class="max-w-[100%] max-h-[100%] self-center mx-auto"/>
-				<Audio v-if="isAudio" :file="file"/>
+        <!--Mobile Preview-->
+        <div
+            v-if="$isMobile() && (isAudio || isImage || isVideo || isPDF)"
+            @scroll="checkGroupInView"
+            id="group-box"
+            ref="scrollBox"
+            class="flex h-full snap-x snap-mandatory gap-6 overflow-x-auto"
+        >
+            <div
+                v-for="(file, i) in files"
+                :key="i"
+                :id="`group-${file.data.id}`"
+                class="relative flex h-full w-screen shrink-0 snap-center items-center justify-center"
+            >
+                <ImageFile v-if="isImage" :file="file" class="mx-auto max-h-[100%] max-w-[100%] self-center" />
+                <Audio v-if="isAudio" :file="file" />
                 <Video v-if="isVideo" :file="file" />
-				<PdfFile v-if="isPDF" :file="file" />
-			</div>
-		</div>
+                <PdfFile v-if="isPDF" :file="file" />
+            </div>
+        </div>
     </div>
 </template>
 
@@ -111,29 +123,29 @@ export default {
         },
     },
     methods: {
-		checkGroupInView: _.debounce(function () {
-			this.files.forEach((file, index) => {
-				let element = document.getElementById(`group-${file.data.id}`).getBoundingClientRect()
-				let scrollBox = document.getElementById('group-box').getBoundingClientRect()
+        checkGroupInView: _.debounce(function () {
+            this.files.forEach((file, index) => {
+                let element = document.getElementById(`group-${file.data.id}`).getBoundingClientRect()
+                let scrollBox = document.getElementById('group-box').getBoundingClientRect()
 
-				// Get video
-				const video = document.querySelector(`#group-${file.data.id} video`);
+                // Get video
+                const video = document.querySelector(`#group-${file.data.id} video`)
 
-				// Pause video when playing
-				if (video && !video.paused) {
-					video.pause()
-				}
+                // Pause video when playing
+                if (video && !video.paused) {
+                    video.pause()
+                }
 
-				// Check if the group is in the viewport of group-box
-				if (element.left === scrollBox.left) {
-					this.currentIndex = index
-				}
-			})
-		}, 100),
+                // Check if the group is in the viewport of group-box
+                if (element.left === scrollBox.left) {
+                    this.currentIndex = index
+                }
+            })
+        }, 100),
         getFilesForView() {
             let requestedFile = this.clipboard[0]
 
-            this.entries.map(element => {
+            this.entries.map((element) => {
                 if (requestedFile.data.attributes.mimetype === 'pdf') {
                     if (element.data.attributes.mimetype === 'pdf') this.files.push(element)
                 } else {
@@ -143,18 +155,18 @@ export default {
 
             this.files.forEach((element, index) => {
                 if (element.data.id === this.clipboard[0].data.id) {
-					this.currentIndex = index
+                    this.currentIndex = index
                 }
             })
 
-			// Scroll to the selected item
-			if (this.$isMobile()) {
-				this.$nextTick(() => {
-					let element = document.getElementById(`group-${this.files[this.currentIndex].data.id}`)
+            // Scroll to the selected item
+            if (this.$isMobile()) {
+                this.$nextTick(() => {
+                    let element = document.getElementById(`group-${this.files[this.currentIndex].data.id}`)
 
-					this.$refs.scrollBox.scrollLeft = element.getBoundingClientRect().left
-				})
-			}
+                    this.$refs.scrollBox.scrollLeft = element.getBoundingClientRect().left
+                })
+            }
         },
         next() {
             if (!this.files.length > 1) return
diff --git a/resources/js/components/FilePreview/FilePreviewToolbar.vue b/resources/js/components/FilePreview/FilePreviewToolbar.vue
index f6af0671..fbb48280 100644
--- a/resources/js/components/FilePreview/FilePreviewToolbar.vue
+++ b/resources/js/components/FilePreview/FilePreviewToolbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="currentFile" class="items-center px-3.5 py-4 lg:grid lg:grid-cols-3 lg:py-3 select-none">
+    <div v-if="currentFile" class="select-none items-center px-3.5 py-4 lg:grid lg:grid-cols-3 lg:py-3">
         <div class="flex items-center justify-between lg:w-auto lg:justify-start">
             <!--Close icon-->
             <div @click="closeFullPreview" class="order-last -m-3 cursor-pointer p-3 lg:order-none">
diff --git a/resources/js/components/FilePreview/Media/Audio.vue b/resources/js/components/FilePreview/Media/Audio.vue
index ae02120e..323616fa 100644
--- a/resources/js/components/FilePreview/Media/Audio.vue
+++ b/resources/js/components/FilePreview/Media/Audio.vue
@@ -1,5 +1,10 @@
 <template>
-    <audio :class="{ 'file-shadow': !$isMobile() }" class="file audio" :src="file.data.attributes.file_url" controls></audio>
+    <audio
+        :class="{ 'file-shadow': !$isMobile() }"
+        class="file audio"
+        :src="file.data.attributes.file_url"
+        controls
+    ></audio>
 </template>
 
 <script>
diff --git a/resources/js/components/FilePreview/Media/PdfFile.vue b/resources/js/components/FilePreview/Media/PdfFile.vue
index 005c1864..d56e9fd2 100644
--- a/resources/js/components/FilePreview/Media/PdfFile.vue
+++ b/resources/js/components/FilePreview/Media/PdfFile.vue
@@ -31,9 +31,7 @@ export default {
     components: {
         pdf,
     },
-    props: [
-		'file',
-	],
+    props: ['file'],
     watch: {
         file() {
             this.getPdf()
diff --git a/resources/js/components/FilePreview/Media/Video.vue b/resources/js/components/FilePreview/Media/Video.vue
index 65617fff..df979f90 100644
--- a/resources/js/components/FilePreview/Media/Video.vue
+++ b/resources/js/components/FilePreview/Media/Video.vue
@@ -1,13 +1,13 @@
 <template>
-	<video
-		:src="file.data.attributes.file_url"
-		class="video"
-		:class="{ 'file-shadow': !$isMobile() }"
-		controlsList="nodownload"
-		disablePictureInPicture
-		playsinline
-		controls
-	/>
+    <video
+        :src="file.data.attributes.file_url"
+        class="video"
+        :class="{ 'file-shadow': !$isMobile() }"
+        controlsList="nodownload"
+        disablePictureInPicture
+        playsinline
+        controls
+    />
 </template>
 
 <script>
diff --git a/resources/js/components/FilesView/Alert.vue b/resources/js/components/FilesView/Alert.vue
index 3410df43..991415c5 100644
--- a/resources/js/components/FilesView/Alert.vue
+++ b/resources/js/components/FilesView/Alert.vue
@@ -10,7 +10,9 @@
                     <p v-if="message" class="message">{{ message }}</p>
                 </div>
                 <div class="popup-actions">
-                    <ButtonBase @click.native="closePopup" :button-style="buttonStyle" class="action-confirm">{{ button }} </ButtonBase>
+                    <ButtonBase @click.native="closePopup" :button-style="buttonStyle" class="action-confirm"
+                        >{{ button }}
+                    </ButtonBase>
                 </div>
             </div>
         </div>
diff --git a/resources/js/components/FilesView/DesktopSharepageToolbar.vue b/resources/js/components/FilesView/DesktopSharepageToolbar.vue
index f038b71c..274e76fb 100644
--- a/resources/js/components/FilesView/DesktopSharepageToolbar.vue
+++ b/resources/js/components/FilesView/DesktopSharepageToolbar.vue
@@ -31,13 +31,12 @@
 
                 <!--File Controls-->
                 <div class="ml-5 flex items-center xl:ml-8">
-
                     <!--Action buttons-->
                     <div v-if="canEdit && !$isMobile()" class="flex items-center">
                         <ToolbarButton
                             @click.native="$moveFileOrFolder(clipboard[0])"
                             :class="{
-                                'is-inactive': ! canManipulate,
+                                'is-inactive': !canManipulate,
                             }"
                             source="move"
                             :action="$t('actions.move')"
@@ -45,7 +44,7 @@
                         <ToolbarButton
                             @click.native="$deleteFileOrFolder(clipboard[0])"
                             :class="{
-                                'is-inactive': ! canManipulate,
+                                'is-inactive': !canManipulate,
                             }"
                             source="trash"
                             :action="$t('actions.delete')"
@@ -107,19 +106,13 @@ export default {
         Option,
     },
     computed: {
-        ...mapGetters([
-            'isVisibleNavigationBars',
-            'currentTeamFolder',
-            'currentFolder',
-            'sharedDetail',
-            'clipboard',
-        ]),
+        ...mapGetters(['isVisibleNavigationBars', 'currentTeamFolder', 'currentFolder', 'sharedDetail', 'clipboard']),
         canEdit() {
             return this.sharedDetail && this.sharedDetail.data.attributes.permission === 'editor'
         },
-		canManipulate() {
-			return this.clipboard[0]
-		}
+        canManipulate() {
+            return this.clipboard[0]
+        },
     },
     methods: {
         showCreateMenu() {
diff --git a/resources/js/components/FilesView/DesktopToolbar.vue b/resources/js/components/FilesView/DesktopToolbar.vue
index eb1254a5..12280f88 100644
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -12,20 +12,27 @@
                         :action="$t('actions.create')"
                     />
                     <PopoverItem name="desktop-create" side="left">
-                        <OptionGroup :title="$t('Upload')" :class="{'is-inactive': canUploadInView || isTeamFolderHomepage || isSharedWithMeHomepage}">
+                        <OptionGroup
+                            :title="$t('Upload')"
+                            :class="{
+                                'is-inactive': canUploadInView || isTeamFolderHomepage || isSharedWithMeHomepage,
+                            }"
+                        >
                             <OptionUpload :title="$t('actions.upload')" type="file" />
                             <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
                         </OptionGroup>
                         <OptionGroup :title="$t('Create')">
                             <Option
                                 @click.stop.native="$createFolder"
-                                :class="{ 'is-inactive': canCreateFolder || isTeamFolderHomepage || isSharedWithMeHomepage }"
+                                :class="{
+                                    'is-inactive': canCreateFolder || isTeamFolderHomepage || isSharedWithMeHomepage,
+                                }"
                                 :title="$t('actions.create_folder')"
                                 icon="folder-plus"
                             />
                             <Option
                                 @click.stop.native="$createTeamFolder"
-								:class="{ 'is-inactive': canCreateTeamFolder || isSharedWithMeHomepage }"
+                                :class="{ 'is-inactive': canCreateTeamFolder || isSharedWithMeHomepage }"
                                 :title="$t('Create Team Folder')"
                                 icon="users"
                             />
diff --git a/resources/js/components/FilesView/DesktopUploadRequestToolbar.vue b/resources/js/components/FilesView/DesktopUploadRequestToolbar.vue
new file mode 100644
index 00000000..f4f903ec
--- /dev/null
+++ b/resources/js/components/FilesView/DesktopUploadRequestToolbar.vue
@@ -0,0 +1,147 @@
+<template>
+    <div class="hidden lg:block">
+        <div class="flex items-center justify-between py-3">
+            <NavigationBar />
+
+            <div class="flex items-center">
+                <div class="bg-theme-200 mr-6 flex cursor-pointer items-center rounded-lg py-1 pr-1 pl-4">
+                    <b @click="uploadingDone" class="text-theme mr-3 text-xs">
+                        {{ isDone ? $t('Awesome!') : $t('Tell Jane you are done!') }}
+                    </b>
+                    <img
+                        class="w-8 rounded-lg"
+                        src="http://192.168.1.112:8000/avatars/md-f45abbe5-962c-4229-aef2-9991e96d54d9.png"
+                        alt="Avatar"
+                    />
+                </div>
+
+                <!--Create button-->
+                <PopoverWrapper>
+                    <ToolbarButton
+                        @click.stop.native="showCreateMenu"
+                        source="cloud-plus"
+                        :action="$t('actions.create')"
+                    />
+                    <PopoverItem name="desktop-create" side="left">
+                        <OptionGroup :title="$t('Upload')">
+                            <OptionUpload :title="$t('actions.upload')" type="file" />
+                            <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
+                        </OptionGroup>
+                        <OptionGroup :title="$t('Create')">
+                            <Option
+                                @click.stop.native="$createFolder"
+                                :title="$t('actions.create_folder')"
+                                icon="folder-plus"
+                            />
+                        </OptionGroup>
+                    </PopoverItem>
+                </PopoverWrapper>
+
+                <!--File Controls-->
+                <div v-if="!$isMobile()" class="ml-5 flex items-center xl:ml-8">
+                    <ToolbarButton
+                        @click.native="$moveFileOrFolder(clipboard[0])"
+                        :class="{
+                            'is-inactive': !canManipulate,
+                        }"
+                        source="move"
+                        :action="$t('actions.move')"
+                    />
+                    <ToolbarButton
+                        @click.native="$deleteFileOrFolder(clipboard[0])"
+                        :class="{
+                            'is-inactive': !canManipulate,
+                        }"
+                        source="trash"
+                        :action="$t('actions.delete')"
+                    />
+                </div>
+
+                <!--View Controls-->
+                <div class="ml-5 flex items-center xl:ml-8">
+                    <PopoverWrapper>
+                        <ToolbarButton
+                            @click.stop.native="showSortingMenu"
+                            source="preview-sorting"
+                            :action="$t('actions.sorting_view')"
+                        />
+                        <PopoverItem name="desktop-sorting" side="left">
+                            <FileSortingOptions />
+                        </PopoverItem>
+                    </PopoverWrapper>
+                    <ToolbarButton
+                        @click.native="$store.dispatch('fileInfoToggle')"
+                        :action="$t('actions.info_panel')"
+                        source="info"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <UploadProgress />
+    </div>
+</template>
+
+<script>
+import PopoverWrapper from '../Desktop/PopoverWrapper'
+import FileSortingOptions from './FileSortingOptions'
+import PopoverItem from '../Desktop/PopoverItem'
+import UploadProgress from './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 { mapGetters } from 'vuex'
+import Option from './Option'
+
+export default {
+    name: 'DesktopUploadRequestToolbar',
+    components: {
+        FileSortingOptions,
+        UploadProgress,
+        PopoverWrapper,
+        NavigationBar,
+        ToolbarButton,
+        OptionUpload,
+        OptionGroup,
+        PopoverItem,
+        SearchBar,
+        Option,
+    },
+    computed: {
+        ...mapGetters(['isVisibleNavigationBars', 'currentTeamFolder', 'currentFolder', 'sharedDetail', 'clipboard']),
+        canEdit() {
+            return this.sharedDetail && this.sharedDetail.data.attributes.permission === 'editor'
+        },
+        canManipulate() {
+            return this.clipboard[0]
+        },
+    },
+    data() {
+        return {
+            isDone: false,
+        }
+    },
+    methods: {
+        uploadingDone() {
+            // TODO: add name to the message
+            if (!this.isDone) {
+                events.$emit('toaster', {
+                    type: 'success',
+                    message: this.$t('We notified Jane about your new uploads successfully.'),
+                })
+            }
+
+            this.isDone = true
+        },
+        showCreateMenu() {
+            events.$emit('popover:open', 'desktop-create')
+        },
+        showSortingMenu() {
+            events.$emit('popover:open', 'desktop-sorting')
+        },
+    },
+}
+</script>
diff --git a/resources/js/components/FilesView/DragUI.vue b/resources/js/components/FilesView/DragUI.vue
index c96f02fd..a855a620 100644
--- a/resources/js/components/FilesView/DragUI.vue
+++ b/resources/js/components/FilesView/DragUI.vue
@@ -1,7 +1,11 @@
 <template>
-	<div v-show="isVisible" id="drag-ui" class="w-64 fixed z-20 pointer-events-none p-5 rounded-xl shadow-lg dark:bg-dark-foreground bg-white">
-    	<TitlePreview icon="check-square" :title="title" :subtitle="subtitle" />
-	</div>
+    <div
+        v-show="isVisible"
+        id="drag-ui"
+        class="pointer-events-none fixed z-20 w-64 rounded-xl bg-white p-5 shadow-lg dark:bg-dark-foreground"
+    >
+        <TitlePreview icon="check-square" :title="title" :subtitle="subtitle" />
+    </div>
 </template>
 
 <script>
@@ -42,7 +46,9 @@ export default {
             if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
                 // Subtitle for single folder
                 if (this.draggedItem.data.type === 'folder') {
-                    return this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items)
+                    return this.draggedItem.items == 0
+                        ? this.$t('folder.empty')
+                        : this.$tc('folder.item_counts', this.draggedItem.items)
                 }
 
                 // Subtitle for single file
diff --git a/resources/js/components/FilesView/FileActionsMobile.vue b/resources/js/components/FilesView/FileActionsMobile.vue
index 6b6b6716..074b74e4 100644
--- a/resources/js/components/FilesView/FileActionsMobile.vue
+++ b/resources/js/components/FilesView/FileActionsMobile.vue
@@ -1,7 +1,9 @@
 <template>
-    <div class="sticky top-14 z-[19] block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
+    <div
+        class="sticky top-14 z-[19] block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden"
+    >
         <!--Show Buttons-->
-		<slot v-if="!isMultiSelectMode" />
+        <slot v-if="!isMultiSelectMode" />
 
         <!-- Multi select mode -->
         <div v-if="isMultiSelectMode">
diff --git a/resources/js/components/FilesView/FileBrowser.vue b/resources/js/components/FilesView/FileBrowser.vue
index a0bca55f..a88c033e 100644
--- a/resources/js/components/FilesView/FileBrowser.vue
+++ b/resources/js/components/FilesView/FileBrowser.vue
@@ -109,7 +109,7 @@ export default {
                     })
                 }
             } else {
-				console.log(data.data.type);
+                console.log(data.data.type)
                 // Get id from current folder
                 const id = data.data.type !== 'folder' ? this.currentFolder?.data.id : data.data.id
 
@@ -144,13 +144,3 @@ export default {
     },
 }
 </script>
-
-<style>
-.grid-view {
-    @apply grid grid-cols-3 content-start sm:grid-cols-4 lg:gap-2 xl:grid-cols-6 xl:gap-4;
-}
-
-.grid-view-sidebar {
-    @apply grid grid-cols-3 content-start md:grid-cols-2 lg:grid-cols-3 lg:gap-2 xl:grid-cols-4 xl:gap-4 2xl:grid-cols-5;
-}
-</style>
diff --git a/resources/js/components/FilesView/FileFilterMobile.vue b/resources/js/components/FilesView/FileFilterMobile.vue
index c87f82e9..62927178 100644
--- a/resources/js/components/FilesView/FileFilterMobile.vue
+++ b/resources/js/components/FilesView/FileFilterMobile.vue
@@ -2,13 +2,43 @@
     <MenuMobile name="file-filter">
         <MenuMobileGroup>
             <OptionGroup :title="$t('Base')">
-                <Option @click.native="goToFiles" :title="$t('sidebar.home')" icon="hard-drive" :is-active="$isThisRoute($route, 'Files')" :is-hover-disabled="true" />
-                <Option @click.native="goToLatest" :title="$t('menu.latest')" icon="upload-cloud" :is-active="$isThisRoute($route, 'RecentUploads')" :is-hover-disabled="true" />
-                <Option @click.native="goToShared" :title="$t('sidebar.my_shared')" icon="share" :is-active="$isThisRoute($route, 'MySharedItems')" :is-hover-disabled="true" />
-                <Option @click.native="goToTrash" :title="$t('menu.trash')" icon="trash" :is-active="$isThisRoute($route, 'Trash')" :is-hover-disabled="true" />
+                <Option
+                    @click.native="goToFiles"
+                    :title="$t('sidebar.home')"
+                    icon="hard-drive"
+                    :is-active="$isThisRoute($route, 'Files')"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToLatest"
+                    :title="$t('menu.latest')"
+                    icon="upload-cloud"
+                    :is-active="$isThisRoute($route, 'RecentUploads')"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToShared"
+                    :title="$t('sidebar.my_shared')"
+                    icon="share"
+                    :is-active="$isThisRoute($route, 'MySharedItems')"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToTrash"
+                    :title="$t('menu.trash')"
+                    icon="trash"
+                    :is-active="$isThisRoute($route, 'Trash')"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
             <OptionGroup :title="$t('Collaboration')">
-                <Option @click.native="goToTeamFolders" :title="$t('Team Folders')" icon="users" :is-active="$isThisRoute($route, 'TeamFolders')" :is-hover-disabled="true" />
+                <Option
+                    @click.native="goToTeamFolders"
+                    :title="$t('Team Folders')"
+                    icon="users"
+                    :is-active="$isThisRoute($route, 'TeamFolders')"
+                    :is-hover-disabled="true"
+                />
                 <Option
                     @click.native="goToSharedWithMe"
                     :title="$t('Shared with Me')"
diff --git a/resources/js/components/FilesView/FileIconThumbnail.vue b/resources/js/components/FilesView/FileIconThumbnail.vue
index 4ab8eb4f..b44f917a 100644
--- a/resources/js/components/FilesView/FileIconThumbnail.vue
+++ b/resources/js/components/FilesView/FileIconThumbnail.vue
@@ -1,10 +1,19 @@
 <template>
     <div class="flex items-center justify-center">
-        <span class="text-theme absolute z-10 mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center font-semibold text-[9px]">
+        <span
+            class="text-theme absolute z-10 mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center text-[9px] font-semibold"
+        >
             {{ entry.data.attributes.mimetype }}
         </span>
 
-        <svg width="38px" height="51px" viewBox="0 0 38 51" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <svg
+            width="38px"
+            height="51px"
+            viewBox="0 0 38 51"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
             <path
                 stroke-width="0"
                 fill="#f4f5f6"
diff --git a/resources/js/components/FilesView/FileSortingOptions.vue b/resources/js/components/FilesView/FileSortingOptions.vue
index bd5c641e..6e62e822 100644
--- a/resources/js/components/FilesView/FileSortingOptions.vue
+++ b/resources/js/components/FilesView/FileSortingOptions.vue
@@ -1,12 +1,32 @@
 <template>
     <div>
         <OptionGroup :title="$t('View')">
-            <Option v-if="isList" @click.native="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
-            <Option v-if="isGrid" @click.native="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
+            <Option
+                v-if="isList"
+                @click.native="changePreview('grid')"
+                :title="$t('preview_sorting.grid_view')"
+                icon="grid"
+            />
+            <Option
+                v-if="isGrid"
+                @click.native="changePreview('list')"
+                :title="$t('preview_sorting.list_view')"
+                icon="list"
+            />
         </OptionGroup>
         <OptionGroup :title="$t('Sorting')">
-            <Option @click.native.stop="sort('created_at')" :arrow="arrowForCreatedAtField" :title="$t('preview_sorting.sort_date')" icon="calendar" />
-            <Option @click.native.stop="sort('name')" :arrow="arrowForNameField" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
+            <Option
+                @click.native.stop="sort('created_at')"
+                :arrow="arrowForCreatedAtField"
+                :title="$t('preview_sorting.sort_date')"
+                icon="calendar"
+            />
+            <Option
+                @click.native.stop="sort('name')"
+                :arrow="arrowForNameField"
+                :title="$t('preview_sorting.sort_alphabet')"
+                icon="alphabet"
+            />
         </OptionGroup>
     </div>
 </template>
diff --git a/resources/js/components/FilesView/Icons/AlphabetIcon.vue b/resources/js/components/FilesView/Icons/AlphabetIcon.vue
index 9857f034..ced22e23 100644
--- a/resources/js/components/FilesView/Icons/AlphabetIcon.vue
+++ b/resources/js/components/FilesView/Icons/AlphabetIcon.vue
@@ -14,7 +14,10 @@
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
     >
-        <polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline>
+        <polyline
+            id="Path"
+            points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"
+        ></polyline>
         <line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line>
     </svg>
 </template>
diff --git a/resources/js/components/FilesView/Icons/VueFolderIcon.vue b/resources/js/components/FilesView/Icons/VueFolderIcon.vue
index fb61cbf0..4275ca1f 100644
--- a/resources/js/components/FilesView/Icons/VueFolderIcon.vue
+++ b/resources/js/components/FilesView/Icons/VueFolderIcon.vue
@@ -1,5 +1,12 @@
 <template>
-    <svg width="53px" height="52px" viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg
+        width="53px"
+        height="52px"
+        viewBox="0 0 53 39"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
         <path
             d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z"
             class="svg-color-theme"
diff --git a/resources/js/components/FilesView/Icons/VueFolderTeamIcon.vue b/resources/js/components/FilesView/Icons/VueFolderTeamIcon.vue
index 0bb5f0b8..2d29ee44 100644
--- a/resources/js/components/FilesView/Icons/VueFolderTeamIcon.vue
+++ b/resources/js/components/FilesView/Icons/VueFolderTeamIcon.vue
@@ -1,5 +1,10 @@
 <template>
-    <svg viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg
+        viewBox="0 0 53 39"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
         <g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
             <g id="team-folder">
                 <path
@@ -35,7 +40,9 @@
                         d="M9.59999943,10.7999994 L9.59999943,9.59999943 C9.59999943,8.27451611 8.52548289,7.19999957 7.19999957,7.19999957 L2.39999986,7.19999957 C1.07451654,7.19999957 0,8.27451611 0,9.59999943 L0,10.7999994"
                     ></path>
                     <circle cx="4.79999971" cy="2.39999986" r="2.39999986"></circle>
-                    <path d="M13.1999992,10.7999994 L13.1999992,9.59999943 C13.1991834,8.50627014 12.4589985,7.55143166 11.3999993,7.27799957"></path>
+                    <path
+                        d="M13.1999992,10.7999994 L13.1999992,9.59999943 C13.1991834,8.50627014 12.4589985,7.55143166 11.3999993,7.27799957"
+                    ></path>
                     <path
                         d="M8.99999946,0.0779999954 C10.0619483,0.349901852 10.8047053,1.30679461 10.8047053,2.40299986 C10.8047053,3.4992051 10.0619483,4.45609786 8.99999946,4.72799972"
                     ></path>
diff --git a/resources/js/components/FilesView/InfoSidebar.vue b/resources/js/components/FilesView/InfoSidebar.vue
index 423558f4..299caa13 100644
--- a/resources/js/components/FilesView/InfoSidebar.vue
+++ b/resources/js/components/FilesView/InfoSidebar.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="hidden 2xl:w-[360px] xl:w-[320px] w-[300px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block">
+    <div
+        class="hidden w-[300px] shrink-0 overflow-y-auto overflow-x-hidden px-2.5 pt-2 lg:block xl:w-[320px] 2xl:w-[360px]"
+    >
         <!--Is empty clipboard-->
         <div v-if="isEmpty" class="flex h-full items-center justify-center">
             <div class="text-center">
@@ -23,10 +25,19 @@
         <div v-if="isSingleFile && !isEmpty">
             <FilePreviewDetail />
 
-            <TitlePreview class="mb-6" :icon="clipboard[0].data.type" :title="clipboard[0].data.attributes.name" :subtitle="clipboard[0].data.attributes.mimetype" />
+            <TitlePreview
+                class="mb-6"
+                :icon="clipboard[0].data.type"
+                :title="clipboard[0].data.attributes.name"
+                :subtitle="clipboard[0].data.attributes.mimetype"
+            />
 
             <!--Filesize-->
-            <ListInfoItem v-if="singleFile.data.attributes.filesize" :title="$t('file_detail.size')" :content="singleFile.data.attributes.filesize" />
+            <ListInfoItem
+                v-if="singleFile.data.attributes.filesize"
+                :title="$t('file_detail.size')"
+                :content="singleFile.data.attributes.filesize"
+            />
 
             <!--Created At-->
             <ListInfoItem :title="$t('file_detail.created_at')" :content="singleFile.data.attributes.created_at" />
@@ -35,14 +46,21 @@
             <ListInfoItem v-if="$checkPermission(['master'])" :title="$t('file_detail.where')">
                 <div @click="$moveFileOrFolder(singleFile)" class="flex cursor-pointer items-center">
                     <b class="inline-block text-sm font-bold">
-                        {{ singleFile.data.relationships.parent ? singleFile.data.relationships.parent.data.attributes.name : $getCurrentLocationName() }}
+                        {{
+                            singleFile.data.relationships.parent
+                                ? singleFile.data.relationships.parent.data.attributes.name
+                                : $getCurrentLocationName()
+                        }}
                     </b>
                     <Edit2Icon size="10" class="ml-2" />
                 </div>
             </ListInfoItem>
 
             <!--Shared-->
-            <ListInfoItem v-if="$checkPermission('master') && singleFile.data.relationships.shared" :title="$t('file_detail.shared')">
+            <ListInfoItem
+                v-if="$checkPermission('master') && singleFile.data.relationships.shared"
+                :title="$t('file_detail.shared')"
+            >
                 <div @click="$shareFileOrFolder(singleFile)" class="mb-2 flex cursor-pointer items-center">
                     <span class="inline-block text-sm font-bold">
                         {{ sharedInfo }}
@@ -50,8 +68,18 @@
                     <Edit2Icon size="10" class="ml-2" />
                 </div>
                 <div class="flex w-full items-center">
-                    <lock-icon v-if="isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" />
-                    <unlock-icon v-if="!isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" />
+                    <lock-icon
+                        v-if="isLocked"
+                        @click="$shareFileOrFolder(singleFile)"
+                        size="17"
+                        class="hover-text-theme vue-feather cursor-pointer"
+                    />
+                    <unlock-icon
+                        v-if="!isLocked"
+                        @click="$shareFileOrFolder(singleFile)"
+                        size="17"
+                        class="hover-text-theme vue-feather cursor-pointer"
+                    />
                     <CopyShareLink :item="singleFile" size="small" class="w-full pl-2.5" />
                 </div>
             </ListInfoItem>
@@ -60,7 +88,7 @@
             <ListInfoItem v-if="canShowAuthor" :title="$t('Author')">
                 <div class="mt-1.5 flex items-center">
                     <MemberAvatar :size="32" :member="singleFile.data.relationships.owner" />
-                    <span class="text-sm ml-3 block font-bold">
+                    <span class="ml-3 block text-sm font-bold">
                         {{ singleFile.data.relationships.owner.data.attributes.name }}
                     </span>
                 </div>
@@ -112,7 +140,9 @@ export default {
             return this.clipboard[0]
         },
         canShowMetaData() {
-            return this.clipboard[0].data.attributes.metadata && this.clipboard[0].data.attributes.metadata.ExifImageWidth
+            return (
+                this.clipboard[0].data.attributes.metadata && this.clipboard[0].data.attributes.metadata.ExifImageWidth
+            )
         },
         isLocked() {
             return this.clipboard[0].data.relationships.shared.protected
diff --git a/resources/js/components/FilesView/ItemGrid.vue b/resources/js/components/FilesView/ItemGrid.vue
index 05bc6b87..3a67feb2 100644
--- a/resources/js/components/FilesView/ItemGrid.vue
+++ b/resources/js/components/FilesView/ItemGrid.vue
@@ -96,13 +96,17 @@
                     <!--File & Image sub line-->
                     <small v-if="!isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
                         {{ entry.data.attributes.filesize }}
-						<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
+                        <span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block"
+                            >, {{ timeStamp }}</span
+                        >
                     </small>
 
                     <!--Folder sub line-->
                     <small v-if="isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
                         {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems)
-                        }}<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
+                        }}<span class="hidden text-xs text-gray-500 dark:text-gray-500 lg:inline-block"
+                            >, {{ timeStamp }}</span
+                        >
                     </small>
                 </div>
             </div>
diff --git a/resources/js/components/FilesView/ItemHandler.vue b/resources/js/components/FilesView/ItemHandler.vue
index 0b63d8cb..0aa60bb4 100644
--- a/resources/js/components/FilesView/ItemHandler.vue
+++ b/resources/js/components/FilesView/ItemHandler.vue
@@ -18,7 +18,7 @@
             :entry="item"
             :highlight="true"
             :mobile-handler="true"
-			:can-hover="true"
+            :can-hover="true"
             @mouseup.stop.native="clickFilter"
             @dragstart.native="$emit('dragstart')"
             @drop.native="drop()"
@@ -184,7 +184,10 @@ export default {
 
                 events.$emit('file-preview:show')
             } else if (this.isFile || (!this.isFolder && !this.isVideo && !this.isAudio && !this.isImage)) {
-                this.$downloadFile(this.item.data.attributes.file_url, this.item.data.attributes.name + '.' + this.item.data.attributes.mimetype)
+                this.$downloadFile(
+                    this.item.data.attributes.file_url,
+                    this.item.data.attributes.name + '.' + this.item.data.attributes.mimetype
+                )
             } else if (this.isFolder) {
                 this.$goToFileView(this.item.data.id)
             }
diff --git a/resources/js/components/FilesView/ItemList.vue b/resources/js/components/FilesView/ItemList.vue
index 158486c6..8ab586fd 100644
--- a/resources/js/components/FilesView/ItemList.vue
+++ b/resources/js/components/FilesView/ItemList.vue
@@ -14,16 +14,30 @@
         <!--Item thumbnail-->
         <div class="relative w-16 shrink-0">
             <!--Member thumbnail for team folders-->
-            <MemberAvatar v-if="user && canShowAuthor" :size="28" :is-border="true" :member="entry.data.relationships.owner" class="absolute right-1.5 -bottom-2 z-10" />
+            <MemberAvatar
+                v-if="user && canShowAuthor"
+                :size="28"
+                :is-border="true"
+                :member="entry.data.relationships.owner"
+                class="absolute right-1.5 -bottom-2 z-10"
+            />
 
             <!--Emoji Icon-->
-            <Emoji v-if="entry.data.attributes.emoji" :emoji="entry.data.attributes.emoji" class="ml-1 scale-110 transform text-5xl" />
+            <Emoji
+                v-if="entry.data.attributes.emoji"
+                :emoji="entry.data.attributes.emoji"
+                class="ml-1 scale-110 transform text-5xl"
+            />
 
             <!--Folder Icon-->
             <FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" />
 
             <!--File Icon-->
-            <FileIconThumbnail v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" class="pr-2" />
+            <FileIconThumbnail
+                v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)"
+                :entry="entry"
+                class="pr-2"
+            />
 
             <!--Image thumbnail-->
             <img
@@ -40,7 +54,7 @@
             <!--Item Title-->
             <b
                 class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm"
-				:class="{'hover:underline': canEditName}"
+                :class="{ 'hover:underline': canEditName }"
                 style="max-width: 240px"
                 ref="name"
                 @input="renameItem"
@@ -60,19 +74,23 @@
 
                 <!--File & Image sub line-->
                 <small v-if="!isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
-					{{ entry.data.attributes.filesize }}, {{ timeStamp }}
-				</small>
+                    {{ entry.data.attributes.filesize }}, {{ timeStamp }}
+                </small>
 
                 <!--Folder sub line-->
                 <small v-if="isFolder" class="block text-xs text-gray-500 dark:text-gray-500">
-                    {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
+                    {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }},
+                    {{ timeStamp }}
                 </small>
             </div>
         </div>
 
         <!-- Mobile item action button-->
         <div v-if="mobileHandler && !isMultiSelectMode && $isMobile()" class="relative flex-grow pr-1 text-right">
-            <div @mouseup.stop="$openInDetailPanel(entry)" class="absolute right-10 -mr-4 hidden -translate-y-2/4 transform p-2.5 lg:block">
+            <div
+                @mouseup.stop="$openInDetailPanel(entry)"
+                class="absolute right-10 -mr-4 hidden -translate-y-2/4 transform p-2.5 lg:block"
+            >
                 <eye-icon size="18" class="vue-feather inline-block opacity-30" />
             </div>
             <div @mouseup.stop="showItemActions" class="absolute right-0 -mr-4 -translate-y-2/4 transform p-2.5">
@@ -149,7 +167,9 @@ export default {
             )
         },
         folderItems() {
-            return this.entry.data.attributes.deleted_at ? this.entry.data.attributes.trashed_items : this.entry.data.attributes.items
+            return this.entry.data.attributes.deleted_at
+                ? this.entry.data.attributes.trashed_items
+                : this.entry.data.attributes.items
         },
         canShowAuthor() {
             return !this.isFolder && this.user.data.id !== this.entry.data.relationships.owner.data.id
@@ -182,14 +202,14 @@ export default {
         this.itemName = this.entry.data.attributes.name
 
         // Change item name
-        events.$on('change:name', item => {
+        events.$on('change:name', (item) => {
             if (this.entry.data.id === item.id) {
-				this.itemName = item.name
-			}
+                this.itemName = item.name
+            }
         })
 
         // Autofocus after newly created folder
-        events.$on('newFolder:focus', id => {
+        events.$on('newFolder:focus', (id) => {
             if (!this.$isMobile() && this.entry.data.id === id) {
                 this.$refs.name.focus()
                 document.execCommand('selectAll')
diff --git a/resources/js/components/FilesView/MemberAvatar.vue b/resources/js/components/FilesView/MemberAvatar.vue
index 554311e7..95aa6be2 100644
--- a/resources/js/components/FilesView/MemberAvatar.vue
+++ b/resources/js/components/FilesView/MemberAvatar.vue
@@ -39,7 +39,9 @@ export default {
     props: ['isBorder', 'member', 'size'],
     computed: {
         letter() {
-            let string = this.member.data.attributes.name ? this.member.data.attributes.name : this.member.data.attributes.email
+            let string = this.member.data.attributes.name
+                ? this.member.data.attributes.name
+                : this.member.data.attributes.email
 
             return string.substr(0, 1)
         },
diff --git a/resources/js/components/FilesView/MobileMultiSelectToolbar.vue b/resources/js/components/FilesView/MobileMultiSelectToolbar.vue
index 6f376a94..dd21fdc7 100644
--- a/resources/js/components/FilesView/MobileMultiSelectToolbar.vue
+++ b/resources/js/components/FilesView/MobileMultiSelectToolbar.vue
@@ -5,7 +5,12 @@
             <slot v-if="$slots.editor && $checkPermission('editor')" name="editor" />
             <slot v-if="$slots.visitor && $checkPermission('visitor')" name="visitor" />
 
-            <ToolbarButton @click.native="closeSelecting" class="action-btn close-icon" source="close" :action="$t('actions.close')" />
+            <ToolbarButton
+                @click.native="closeSelecting"
+                class="action-btn close-icon"
+                source="close"
+                :action="$t('actions.close')"
+            />
         </div>
     </transition>
 </template>
diff --git a/resources/js/components/FilesView/NavigationBar.vue b/resources/js/components/FilesView/NavigationBar.vue
index 8d355c22..9eb17906 100644
--- a/resources/js/components/FilesView/NavigationBar.vue
+++ b/resources/js/components/FilesView/NavigationBar.vue
@@ -1,8 +1,11 @@
 <template>
-    <div @click="goBack" class="flex items-center text-left select-none relative">
-
-		<!--Menu icon-->
-        <div v-if="!isVisibleNavigationBars" @click="toggleNavigationBars" class="-mt-0.5 mr-2 p-2 cursor-pointer lg:block hidden">
+    <div @click="goBack" class="relative flex select-none items-center text-left">
+        <!--Menu icon-->
+        <div
+            v-if="!isVisibleNavigationBars"
+            @click="toggleNavigationBars"
+            class="-mt-0.5 mr-2 hidden cursor-pointer p-2 lg:block"
+        >
             <menu-icon size="17" />
         </div>
 
@@ -12,13 +15,13 @@
                 '-translate-x-3 opacity-0': !isLoadedFolder || !isNotHomepage,
                 'translate-x-0 opacity-100': isLoadedFolder && isNotHomepage,
             }"
-            class="lg:-mt-0.5 mr-2 -ml-1 cursor-pointer align-middle transition-all duration-200"
+            class="mr-2 -ml-1 cursor-pointer align-middle transition-all duration-200 lg:-mt-0.5"
         />
 
         <!--Folder Title-->
         <b
             :class="{ '-translate-x-4': !isLoadedFolder || !isNotHomepage }"
-            class="inline-block transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 max-w-[200px]"
+            class="inline-block max-w-[200px] transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200"
         >
             {{ $getCurrentLocationName() }}
         </b>
@@ -29,60 +32,56 @@
                 '-translate-x-4 opacity-0': !currentFolder || !isNotHomepage,
                 'translate-x-0 opacity-100': currentFolder && isNotHomepage,
             }"
-            class="relative ml-3 transform rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground cursor-pointer"
-			id="folder-actions"
+            class="relative ml-3 transform cursor-pointer rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground"
+            id="folder-actions"
         >
             <more-horizontal-icon size="14" />
         </div>
     </div>
 </template>
 <script>
-import {mapGetters} from "vuex";
-import {events} from "../../bus";
+import { mapGetters } from 'vuex'
+import { events } from '../../bus'
 import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
 
 export default {
     name: 'NavigationBar',
-	components: {
-		MoreHorizontalIcon,
-		ChevronLeftIcon,
-		MenuIcon,
-	},
-	computed: {
-		...mapGetters([
-			'isVisibleNavigationBars',
-			'currentFolder',
-			'sharedDetail',
-		]),
-		isNotHomepage() {
-			if (this.$isThisRoute(this.$route, ['Public'])) {
-				return this.sharedDetail && this.sharedDetail.data.attributes.item_id !== this.$route.params.id
-			}
+    components: {
+        MoreHorizontalIcon,
+        ChevronLeftIcon,
+        MenuIcon,
+    },
+    computed: {
+        ...mapGetters(['isVisibleNavigationBars', 'currentFolder', 'sharedDetail']),
+        isNotHomepage() {
+            if (this.$isThisRoute(this.$route, ['Public'])) {
+                return this.sharedDetail && this.sharedDetail.data.attributes.item_id !== this.$route.params.id
+            }
 
-			return this.$route.params.id
-		},
-		isLoadedFolder() {
-			return this.$route.params.id
-		},
-	},
-	methods: {
-		goBack() {
-			if (this.isNotHomepage) this.$router.back()
-		},
-		showItemActions() {
-			if (window.innerWidth > 1024) {
-				events.$emit('context-menu:current-folder', this.currentFolder)
-			} else {
-				this.$store.commit('CLIPBOARD_CLEAR')
-				this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFolder)
+            return this.$route.params.id
+        },
+        isLoadedFolder() {
+            return this.$route.params.id
+        },
+    },
+    methods: {
+        goBack() {
+            if (this.isNotHomepage) this.$router.back()
+        },
+        showItemActions() {
+            if (window.innerWidth > 1024) {
+                events.$emit('context-menu:current-folder', this.currentFolder)
+            } else {
+                this.$store.commit('CLIPBOARD_CLEAR')
+                this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.currentFolder)
 
-				this.$showMobileMenu('file-menu')
-				events.$emit('mobile-context-menu:show', this.currentFolder)
-			}
-		},
-		toggleNavigationBars() {
-			this.$store.dispatch('toggleNavigationBars')
-		},
-	}
+                this.$showMobileMenu('file-menu')
+                events.$emit('mobile-context-menu:show', this.currentFolder)
+            }
+        },
+        toggleNavigationBars() {
+            this.$store.dispatch('toggleNavigationBars')
+        },
+    },
 }
 </script>
diff --git a/resources/js/components/FilesView/Option.vue b/resources/js/components/FilesView/Option.vue
index c657f9b1..08847c6d 100644
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/FilesView/Option.vue
@@ -1,54 +1,244 @@
 <template>
     <li
-        class="flex items-center justify-between py-4 px-5"
-        :class="{'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled}"
+        class="flex items-center justify-between py-3.5 px-5"
+        :class="{ 'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled }"
     >
         <div class="flex items-center">
             <div class="mr-4">
-                <calendar-icon v-if="icon === 'calendar'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <grid-icon v-if="icon === 'grid'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <list-icon v-if="icon === 'list'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <trash-2-icon v-if="icon === 'trash'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <life-buoy-icon v-if="icon === 'restore'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <trash-icon v-if="icon === 'empty-trash'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <eye-icon v-if="icon === 'detail'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <download-cloud-icon v-if="icon === 'download'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <edit2-icon v-if="icon === 'rename'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <corner-down-right-icon v-if="icon === 'move-item'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <link-icon v-if="icon === 'share'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <star-icon v-if="icon === 'favourites'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <folder-plus-icon v-if="icon === 'create-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <smile-icon v-if="icon === 'no-options'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <paperclip-icon v-if="icon === 'zip-folder'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <alphabet-icon v-if="icon === 'alphabet'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <star-icon v-if="icon === 'star'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <hard-drive-icon v-if="icon === 'hard-drive'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <upload-cloud-icon v-if="icon === 'upload-cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <users-icon v-if="icon === 'users'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <user-icon v-if="icon === 'user'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <user-plus-icon v-if="icon === 'user-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <user-minus-icon v-if="icon === 'user-minus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <user-check-icon v-if="icon === 'user-check'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <settings-icon v-if="icon === 'settings'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <power-icon v-if="icon === 'power'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <lock-icon v-if="icon === 'lock'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <cloud-icon v-if="icon === 'cloud'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <credit-card-icon v-if="icon === 'credit-card'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <file-text-icon v-if="icon === 'file-text'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <database-icon v-if="icon === 'database'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <globe-icon v-if="icon === 'globe'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <monitor-icon v-if="icon === 'monitor'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <box-icon v-if="icon === 'box'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
-                <folder-plus-icon v-if="icon === 'folder-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
+                <calendar-icon
+                    v-if="icon === 'calendar'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <grid-icon
+                    v-if="icon === 'grid'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <list-icon
+                    v-if="icon === 'list'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <trash-2-icon
+                    v-if="icon === 'trash'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <life-buoy-icon
+                    v-if="icon === 'restore'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <trash-icon
+                    v-if="icon === 'empty-trash'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <eye-icon
+                    v-if="icon === 'detail'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <download-cloud-icon
+                    v-if="icon === 'download'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <edit2-icon
+                    v-if="icon === 'rename'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <corner-down-right-icon
+                    v-if="icon === 'move-item'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <link-icon
+                    v-if="icon === 'share'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <star-icon
+                    v-if="icon === 'favourites'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <folder-plus-icon
+                    v-if="icon === 'create-folder'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <smile-icon
+                    v-if="icon === 'no-options'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <paperclip-icon
+                    v-if="icon === 'zip-folder'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <alphabet-icon
+                    v-if="icon === 'alphabet'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <star-icon
+                    v-if="icon === 'star'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <hard-drive-icon
+                    v-if="icon === 'hard-drive'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <upload-cloud-icon
+                    v-if="icon === 'upload-cloud'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <users-icon
+                    v-if="icon === 'users'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <user-icon
+                    v-if="icon === 'user'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <user-plus-icon
+                    v-if="icon === 'user-plus'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <user-minus-icon
+                    v-if="icon === 'user-minus'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <user-check-icon
+                    v-if="icon === 'user-check'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <settings-icon
+                    v-if="icon === 'settings'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <power-icon
+                    v-if="icon === 'power'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <lock-icon
+                    v-if="icon === 'lock'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <cloud-icon
+                    v-if="icon === 'cloud'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <credit-card-icon
+                    v-if="icon === 'credit-card'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <file-text-icon
+                    v-if="icon === 'file-text'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <database-icon
+                    v-if="icon === 'database'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <globe-icon
+                    v-if="icon === 'globe'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <monitor-icon
+                    v-if="icon === 'monitor'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <box-icon
+                    v-if="icon === 'box'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
+                <folder-plus-icon
+                    v-if="icon === 'folder-plus'"
+                    size="17"
+                    class="vue-feather group-hover-text-theme"
+                    :class="{ 'text-theme': isActive }"
+                />
             </div>
             <b class="group-hover-text-theme text-sm font-bold" :class="{ 'text-theme': isActive }">
                 {{ title }}
             </b>
         </div>
         <div v-if="arrow" class="ml-2">
-            <chevron-right-icon v-if="arrow === 'right'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{ 'text-theme': isActive }" />
-            <arrow-up-icon v-if="arrow === 'up'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{ 'text-theme': isActive }" />
-            <arrow-down-icon v-if="arrow === 'down'" size="14" class="vue-feather group-hover-text-theme opacity-50" :class="{ 'text-theme': isActive }" />
+            <chevron-right-icon
+                v-if="arrow === 'right'"
+                size="14"
+                class="vue-feather group-hover-text-theme opacity-50"
+                :class="{ 'text-theme': isActive }"
+            />
+            <arrow-up-icon
+                v-if="arrow === 'up'"
+                size="14"
+                class="vue-feather group-hover-text-theme opacity-50"
+                :class="{ 'text-theme': isActive }"
+            />
+            <arrow-down-icon
+                v-if="arrow === 'down'"
+                size="14"
+                class="vue-feather group-hover-text-theme opacity-50"
+                :class="{ 'text-theme': isActive }"
+            />
         </div>
     </li>
 </template>
diff --git a/resources/js/components/FilesView/OptionGroup.vue b/resources/js/components/FilesView/OptionGroup.vue
index e62c0600..8a54a098 100644
--- a/resources/js/components/FilesView/OptionGroup.vue
+++ b/resources/js/components/FilesView/OptionGroup.vue
@@ -1,19 +1,17 @@
 <template>
-	<div>
-		<b v-if="title" class="py-0.5 px-4 mt-2 block text-xs text-gray-400 dark-text-theme">
-			{{ title }}
-		</b>
-		<ul class="option-group py-1">
-			<slot></slot>
-		</ul>
-	</div>
+    <div>
+        <b v-if="title" class="dark-text-theme mt-2 block py-0.5 px-4 text-xs text-gray-400">
+            {{ title }}
+        </b>
+        <ul class="option-group py-1">
+            <slot></slot>
+        </ul>
+    </div>
 </template>
 
 <script>
 export default {
     name: 'OptionGroup',
-	props: [
-		'title'
-	]
+    props: ['title'],
 }
 </script>
diff --git a/resources/js/components/FilesView/OptionUpload.vue b/resources/js/components/FilesView/OptionUpload.vue
index 09d3bc5c..b61d1cc2 100644
--- a/resources/js/components/FilesView/OptionUpload.vue
+++ b/resources/js/components/FilesView/OptionUpload.vue
@@ -1,16 +1,33 @@
 <template>
     <label
-		class="flex items-center py-4 px-5 group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground"
-	>
+        class="group flex cursor-pointer items-center py-4 px-5 hover:bg-light-background dark:hover:bg-4x-dark-foreground"
+    >
         <div class="mr-4">
             <upload-cloud-icon v-if="type === 'file'" size="17" class="vue-feather group-hover-text-theme" />
             <folder-upload-icon v-if="type === 'folder'" size="17" class="vue-feather group-hover-text-theme" />
         </div>
-        <div class="group-hover-text-theme text-sm font-bold text-left">
+        <div class="group-hover-text-theme text-left text-sm font-bold">
             {{ title }}
 
-            <input v-if="type === 'file'" @change="emmitFiles" v-show="false" id="file" type="file" name="files[]" multiple />
-            <input v-if="type === 'folder'" @change="emmitFolder" v-show="false" id="folder" type="file" name="folders[]" webkitdirectory mozdirectory />
+            <input
+                v-if="type === 'file'"
+                @change="emmitFiles"
+                v-show="false"
+                id="file"
+                type="file"
+                name="files[]"
+                multiple
+            />
+            <input
+                v-if="type === 'folder'"
+                @change="emmitFolder"
+                v-show="false"
+                id="folder"
+                type="file"
+                name="folders[]"
+                webkitdirectory
+                mozdirectory
+            />
         </div>
     </label>
 </template>
@@ -30,8 +47,8 @@ export default {
         emmitFiles(e) {
             this.$uploadFiles(e.target.files)
         },
-		emmitFolder(e) {
-			this.$store.commit('UPDATE_UPLOADING_FOLDER_STATE', true)
+        emmitFolder(e) {
+            this.$store.commit('UPDATE_UPLOADING_FOLDER_STATE', true)
 
             this.$uploadFiles(e.target.files)
         },
diff --git a/resources/js/components/FilesView/SearchBar.vue b/resources/js/components/FilesView/SearchBar.vue
index 5e1f8aef..b592b377 100644
--- a/resources/js/components/FilesView/SearchBar.vue
+++ b/resources/js/components/FilesView/SearchBar.vue
@@ -1,5 +1,8 @@
 <template>
-    <div @click="$openSpotlight()" class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground">
+    <div
+        @click="$openSpotlight()"
+        class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground"
+    >
         <div class="flex w-56 items-center justify-between px-4 py-2.5 text-left xl:w-64">
             <div class="flex items-center">
                 <search-icon size="18" class="vue-feather text-gray-400 dark:text-gray-600" />
@@ -7,7 +10,9 @@
                     {{ $t('inputs.placeholder_search_files') }}
                 </span>
             </div>
-            <span class="rounded dark:border-slate-200 border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-opacity-5 dark:text-gray-600">
+            <span
+                class="rounded border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-slate-200 dark:border-opacity-5 dark:text-gray-600"
+            >
                 {{ metaKeyIcon }}+K
             </span>
         </div>
diff --git a/resources/js/components/FilesView/ToolbarButton.vue b/resources/js/components/FilesView/ToolbarButton.vue
index 256ea1ec..8c49eaea 100644
--- a/resources/js/components/FilesView/ToolbarButton.vue
+++ b/resources/js/components/FilesView/ToolbarButton.vue
@@ -1,5 +1,8 @@
 <template>
-    <button class="group h-[42px] w-[42px] inline-flex items-center justify-center cursor-pointer rounded-lg dark:hover:bg-2x-dark-foreground hover:bg-light-background" :title="action">
+    <button
+        class="group inline-flex h-[42px] w-[42px] cursor-pointer items-center justify-center rounded-lg hover:bg-light-background dark:hover:bg-2x-dark-foreground"
+        :title="action"
+    >
         <corner-down-right-icon v-if="source === 'move'" size="19" class="vue-feather group-hover-text-theme" />
         <download-cloud-icon v-if="source === 'download'" size="19" class="vue-feather group-hover-text-theme" />
         <folder-plus-icon v-if="source === 'folder-plus'" size="19" class="vue-feather group-hover-text-theme" />
@@ -10,14 +13,19 @@
         <printer-icon v-if="source === 'print'" size="19" class="vue-feather group-hover-text-theme" />
         <trash-2-icon v-if="source === 'trash'" size="19" class="vue-feather group-hover-text-theme" />
         <list-icon v-if="source === 'th-list'" size="19" class="vue-feather group-hover-text-theme" />
-        <info-icon v-if="source === 'info'" size="19" class="vue-feather group-hover-text-theme" :class="{'text-theme': isVisibleSidebar}" />
+        <info-icon
+            v-if="source === 'info'"
+            size="19"
+            class="vue-feather group-hover-text-theme"
+            :class="{ 'text-theme': isVisibleSidebar }"
+        />
         <grid-icon v-if="source === 'th'" size="19" class="vue-feather group-hover-text-theme" />
         <link-icon v-if="source === 'share'" size="19" class="vue-feather group-hover-text-theme" />
         <x-icon v-if="source === 'close'" size="19" class="vue-feather group-hover-text-theme" />
         <search-icon v-if="source === 'search'" size="19" class="vue-feather group-hover-text-theme" />
         <cloud-off-icon v-if="source === 'shared-off'" size="19" class="vue-feather group-hover-text-theme" />
-        <sorting-icon v-if="source === 'preview-sorting'" class="scale-125 vue-feather group-hover-text-theme" />
-        <CloudPlusIcon v-if="source === 'cloud-plus'" class="scale-125 vue-feather group-hover-text-theme" />
+        <sorting-icon v-if="source === 'preview-sorting'" class="vue-feather group-hover-text-theme scale-125" />
+        <CloudPlusIcon v-if="source === 'cloud-plus'" class="vue-feather group-hover-text-theme scale-125" />
     </button>
 </template>
 
@@ -42,16 +50,14 @@ import {
     LinkIcon,
     XIcon,
 } from 'vue-feather-icons'
-import {mapGetters} from "vuex";
+import { mapGetters } from 'vuex'
 
 export default {
     name: 'ToolbarButton',
     props: ['source', 'action'],
-	computed: {
-		...mapGetters([
-			'isVisibleSidebar'
-		])
-	},
+    computed: {
+        ...mapGetters(['isVisibleSidebar']),
+    },
     components: {
         SearchIcon,
         CloudPlusIcon,
@@ -73,4 +79,4 @@ export default {
         XIcon,
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/js/components/FilesView/UploadProgress.vue b/resources/js/components/FilesView/UploadProgress.vue
index 2c8f957c..ead18ac5 100644
--- a/resources/js/components/FilesView/UploadProgress.vue
+++ b/resources/js/components/FilesView/UploadProgress.vue
@@ -43,7 +43,13 @@ export default {
         XIcon,
     },
     computed: {
-        ...mapGetters(['filesInQueueUploaded', 'filesInQueueTotal', 'uploadingProgress', 'isProcessingFile', 'fileQueue']),
+        ...mapGetters([
+            'filesInQueueUploaded',
+            'filesInQueueTotal',
+            'uploadingProgress',
+            'isProcessingFile',
+            'fileQueue',
+        ]),
     },
     methods: {
         cancelUpload() {
diff --git a/resources/js/components/Index/Components/PricingTables.vue b/resources/js/components/Index/Components/PricingTables.vue
index 354f12af..bc4b1779 100644
--- a/resources/js/components/Index/Components/PricingTables.vue
+++ b/resources/js/components/Index/Components/PricingTables.vue
@@ -18,7 +18,9 @@
                 <footer class="plan-footer">
                     <b class="price text-theme">
                         {{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
-                        <small v-if="plan.data.attributes.tax_rates.length > 0" class="vat-disclaimer">{{ $t('page_pricing_tables.vat_excluded') }}</small>
+                        <small v-if="plan.data.attributes.tax_rates.length > 0" class="vat-disclaimer">{{
+                            $t('page_pricing_tables.vat_excluded')
+                        }}</small>
                     </b>
                 </footer>
             </div>
diff --git a/resources/js/components/Index/IndexGetStarted.vue b/resources/js/components/Index/IndexGetStarted.vue
index 4bb84509..551daaa0 100644
--- a/resources/js/components/Index/IndexGetStarted.vue
+++ b/resources/js/components/Index/IndexGetStarted.vue
@@ -1,8 +1,17 @@
 <template>
     <div class="page-wrapper large get-started" v-if="index.section_get_started === '1'">
-        <PageTitle class="page-title" type="center" :title="index.get_started_title" :description="index.get_started_description"></PageTitle>
+        <PageTitle
+            class="page-title"
+            type="center"
+            :title="index.get_started_title"
+            :description="index.get_started_description"
+        ></PageTitle>
 
-        <router-link tag="button" class="get-started-button bg-theme-800 hover-bg-theme shadow-theme" :to="{ name: 'SignUp' }">
+        <router-link
+            tag="button"
+            class="get-started-button bg-theme-800 hover-bg-theme shadow-theme"
+            :to="{ name: 'SignUp' }"
+        >
             <span class="content">{{ $t('page_index.get_started_button') }}</span>
             <chevron-right-icon size="22"></chevron-right-icon>
         </router-link>
diff --git a/resources/js/components/Index/IndexHeroScreenshot.vue b/resources/js/components/Index/IndexHeroScreenshot.vue
index b56f9cb3..1ddb6297 100644
--- a/resources/js/components/Index/IndexHeroScreenshot.vue
+++ b/resources/js/components/Index/IndexHeroScreenshot.vue
@@ -23,7 +23,18 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { FolderPlusIcon, HardDriveIcon, SettingsIcon, Trash2Icon, SearchIcon, ImageIcon, GridIcon, LinkIcon, StarIcon, EyeIcon } from 'vue-feather-icons'
+import {
+    FolderPlusIcon,
+    HardDriveIcon,
+    SettingsIcon,
+    Trash2Icon,
+    SearchIcon,
+    ImageIcon,
+    GridIcon,
+    LinkIcon,
+    StarIcon,
+    EyeIcon,
+} from 'vue-feather-icons'
 
 export default {
     name: 'IndexHeroScreenshot',
diff --git a/resources/js/components/Index/IndexMainFeatures.vue b/resources/js/components/Index/IndexMainFeatures.vue
index 149b89f3..88c83602 100644
--- a/resources/js/components/Index/IndexMainFeatures.vue
+++ b/resources/js/components/Index/IndexMainFeatures.vue
@@ -1,6 +1,11 @@
 <template>
     <section class="main-features page-wrapper medium">
-        <PageTitle v-if="index.section_features === '1'" type="center" :title="index.features_title" :description="index.features_description"></PageTitle>
+        <PageTitle
+            v-if="index.section_features === '1'"
+            type="center"
+            :title="index.features_title"
+            :description="index.features_description"
+        ></PageTitle>
         <div v-if="index.section_feature_boxes === '1'" class="content">
             <div class="hero">
                 <img src="/assets/images/hero-Illustration.svg" alt="Hero" />
diff --git a/resources/js/components/Index/IndexNavigation.vue b/resources/js/components/Index/IndexNavigation.vue
index 2c8be299..f18e0d6a 100644
--- a/resources/js/components/Index/IndexNavigation.vue
+++ b/resources/js/components/Index/IndexNavigation.vue
@@ -1,7 +1,11 @@
 <template>
     <nav class="main-navigation">
         <router-link :to="{ name: 'Homepage' }" tag="div" class="logo">
-            <img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
+            <img
+                v-if="config.app_logo_horizontal"
+                :src="$getImage(config.app_logo_horizontal)"
+                :alt="config.app_name"
+            />
             <b v-if="!config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
         </router-link>
         <div class="navigation">
diff --git a/resources/js/components/Index/IndexPageFooter.vue b/resources/js/components/Index/IndexPageFooter.vue
index 6530cd58..924e6a30 100644
--- a/resources/js/components/Index/IndexPageFooter.vue
+++ b/resources/js/components/Index/IndexPageFooter.vue
@@ -1,7 +1,11 @@
 <template>
     <footer class="page-wrapper medium">
         <router-link :to="{ name: 'Homepage' }" tag="div" class="logo">
-            <img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
+            <img
+                v-if="config.app_logo_horizontal"
+                :src="$getImage(config.app_logo_horizontal)"
+                :alt="config.app_name"
+            />
             <b v-if="!config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
         </router-link>
         <ul class="navigation-links">
diff --git a/resources/js/components/Index/IndexPricingTables.vue b/resources/js/components/Index/IndexPricingTables.vue
index 67512d22..0a615a01 100644
--- a/resources/js/components/Index/IndexPricingTables.vue
+++ b/resources/js/components/Index/IndexPricingTables.vue
@@ -1,5 +1,8 @@
 <template>
-    <div class="page-wrapper medium pricing" v-if="!isEmpty && index.section_pricing_content === '1' && config.stripe_public_key">
+    <div
+        class="page-wrapper medium pricing"
+        v-if="!isEmpty && index.section_pricing_content === '1' && config.stripe_public_key"
+    >
         <div id="pricing" class="page-title center">
             <h1 class="title" v-html="index.pricing_title"></h1>
         </div>
diff --git a/resources/js/components/Mobile/MenuMobile.vue b/resources/js/components/Mobile/MenuMobile.vue
index c3a77439..af1537f5 100644
--- a/resources/js/components/Mobile/MenuMobile.vue
+++ b/resources/js/components/Mobile/MenuMobile.vue
@@ -9,13 +9,13 @@
                 <slot />
             </div>
         </transition>
-		<transition name="vignette">
-			<div
-				v-if="isVisible"
-				@click="closeMenu"
-				class="fixed left-0 right-0 top-0 bottom-0 z-20 bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]"
-			></div>
-		</transition>
+        <transition name="vignette">
+            <div
+                v-if="isVisible"
+                @click="closeMenu"
+                class="fixed left-0 right-0 top-0 bottom-0 z-20 bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]"
+            ></div>
+        </transition>
     </div>
 </template>
 
@@ -75,19 +75,19 @@ export default {
 }
 
 .vignette-enter-active {
-	animation: vignette-in 0.15s cubic-bezier(0.4, 0, 1, 1);
+    animation: vignette-in 0.15s cubic-bezier(0.4, 0, 1, 1);
 }
 
 .vignette-leave-active {
-	animation: vignette-in 0.15s linear reverse;
+    animation: vignette-in 0.15s linear reverse;
 }
 
 @keyframes vignette-in {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }
 </style>
diff --git a/resources/js/components/Others/ConfirmPassword.vue b/resources/js/components/Others/ConfirmPassword.vue
index d681fa52..a785ab26 100644
--- a/resources/js/components/Others/ConfirmPassword.vue
+++ b/resources/js/components/Others/ConfirmPassword.vue
@@ -23,7 +23,13 @@
             <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
                 {{ $t('global.cancel') }}
             </ButtonBase>
-            <ButtonBase class="w-full" @click.native="confirmPassword" button-style="theme" :loading="isLoading" :disabled="isLoading">
+            <ButtonBase
+                class="w-full"
+                @click.native="confirmPassword"
+                button-style="theme"
+                :loading="isLoading"
+                :disabled="isLoading"
+            >
                 {{ $t('popup_2fa.confirm_button') }}
             </ButtonBase>
         </PopupActions>
diff --git a/resources/js/components/Others/CookieDisclaimer.vue b/resources/js/components/Others/CookieDisclaimer.vue
index cd56583f..fff1af6b 100644
--- a/resources/js/components/Others/CookieDisclaimer.vue
+++ b/resources/js/components/Others/CookieDisclaimer.vue
@@ -39,7 +39,8 @@ export default {
         },
     },
     created() {
-		this.isVisibleDisclaimer = this.config.installation === 'installation-done' && !localStorage.getItem('isHiddenDisclaimer')
+        this.isVisibleDisclaimer =
+            this.config.installation === 'installation-done' && !localStorage.getItem('isHiddenDisclaimer')
     },
 }
 </script>
diff --git a/resources/js/components/Others/CreateFolderPopup.vue b/resources/js/components/Others/CreateFolderPopup.vue
index 5de67991..42a34f15 100644
--- a/resources/js/components/Others/CreateFolderPopup.vue
+++ b/resources/js/components/Others/CreateFolderPopup.vue
@@ -21,7 +21,11 @@
                     </AppInputText>
                 </ValidationProvider>
 
-                <AppInputSwitch :title="$t('Emoji as an Icon')" :description="$t('Replace folder icon with an Emoji')" :is-last="!isEmoji">
+                <AppInputSwitch
+                    :title="$t('Emoji as an Icon')"
+                    :description="$t('Replace folder icon with an Emoji')"
+                    :is-last="!isEmoji"
+                >
                     <SwitchInput v-model="isEmoji" :state="isEmoji" />
                 </AppInputSwitch>
 
@@ -32,8 +36,12 @@
 
         <!--Actions-->
         <PopupActions>
-            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
-            <ButtonBase class="w-full" @click.native="createFolder" button-style="theme">{{ $t('popup_create_folder.title') }} </ButtonBase>
+            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary"
+                >{{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
+            <ButtonBase class="w-full" @click.native="createFolder" button-style="theme"
+                >{{ $t('popup_create_folder.title') }}
+            </ButtonBase>
         </PopupActions>
     </PopupWrapper>
 </template>
diff --git a/resources/js/components/Others/CreateLanguage.vue b/resources/js/components/Others/CreateLanguage.vue
index 3e8fea48..ec35bc16 100644
--- a/resources/js/components/Others/CreateLanguage.vue
+++ b/resources/js/components/Others/CreateLanguage.vue
@@ -7,9 +7,20 @@
         <PopupContent>
             <!--Form to set sharing-->
             <ValidationObserver @submit.prevent="createLanguage" ref="createForm" v-slot="{ invalid }" tag="form">
-                <ValidationProvider tag="div" mode="passive" name="Language Locale" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="Language Locale"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <AppInputText :title="$t('select_locale')" :error="errors[0]">
-                        <SelectInput v-model="form.locale" :options="locales" :placeholder="$t('select_language_locale')" :isError="errors[0]" />
+                        <SelectInput
+                            v-model="form.locale"
+                            :options="locales"
+                            :placeholder="$t('select_language_locale')"
+                            :isError="errors[0]"
+                        />
                     </AppInputText>
                 </ValidationProvider>
                 <ValidationProvider tag="div" mode="passive" name="Language Name" rules="required" v-slot="{ errors }">
@@ -32,7 +43,13 @@
             <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
                 {{ $t('global.cancel') }}
             </ButtonBase>
-            <ButtonBase class="w-full" @click.native="createLanguage" button-style="theme" :loading="isLoading" :disabled="isLoading">
+            <ButtonBase
+                class="w-full"
+                @click.native="createLanguage"
+                button-style="theme"
+                :loading="isLoading"
+                :disabled="isLoading"
+            >
                 {{ $t('create_language') }}
             </ButtonBase>
         </PopupActions>
diff --git a/resources/js/components/Others/CreatePersonalTokenPopup.vue b/resources/js/components/Others/CreatePersonalTokenPopup.vue
index 4f7f1bbb..72a7dfa8 100644
--- a/resources/js/components/Others/CreatePersonalTokenPopup.vue
+++ b/resources/js/components/Others/CreatePersonalTokenPopup.vue
@@ -3,7 +3,13 @@
         <PopupHeader :title="$t('popup_personal_token.title')" icon="key" />
 
         <PopupContent>
-            <ValidationObserver v-if="!token" @submit.prevent="createTokenForm" ref="createToken" v-slot="{ invalid }" tag="form">
+            <ValidationObserver
+                v-if="!token"
+                @submit.prevent="createTokenForm"
+                ref="createToken"
+                v-slot="{ invalid }"
+                tag="form"
+            >
                 <ValidationProvider tag="div" mode="passive" name="Token Name" rules="required" v-slot="{ errors }">
                     <AppInputText :title="$t('popup_personal_token.label')" :error="errors[0]" :is-last="true">
                         <input
@@ -31,7 +37,13 @@
             <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
                 {{ $t('global.cancel') }}
             </ButtonBase>
-            <ButtonBase class="w-full" @click.native="createTokenForm" button-style="theme" :loading="isLoading" :disabled="isLoading">
+            <ButtonBase
+                class="w-full"
+                @click.native="createTokenForm"
+                button-style="theme"
+                :loading="isLoading"
+                :disabled="isLoading"
+            >
                 {{ $t('personal_token.create_token') }}
             </ButtonBase>
         </PopupActions>
diff --git a/resources/js/components/Others/Emoji.vue b/resources/js/components/Others/Emoji.vue
index 450d9566..1b0f7e69 100644
--- a/resources/js/components/Others/Emoji.vue
+++ b/resources/js/components/Others/Emoji.vue
@@ -1,6 +1,10 @@
 <template>
     <div v-if="emoji">
-        <div v-if="config.defaultEmoji === 'twemoji'" v-html="transferEmoji" style="font-size: inherit; transform: scale(0.95)"></div>
+        <div
+            v-if="config.defaultEmoji === 'twemoji'"
+            v-html="transferEmoji"
+            style="font-size: inherit; transform: scale(0.95)"
+        ></div>
         <div v-if="config.defaultEmoji === 'applemoji'" style="font-size: inherit">
             {{ emoji.char }}
         </div>
diff --git a/resources/js/components/Others/EmojiPicker.vue b/resources/js/components/Others/EmojiPicker.vue
index f6cf7026..164353a2 100644
--- a/resources/js/components/Others/EmojiPicker.vue
+++ b/resources/js/components/Others/EmojiPicker.vue
@@ -8,7 +8,13 @@
             </div>
 
             <!-- Search input -->
-            <input @click="openList" v-model="query" class="focus-border-theme input-dark" type="text" :placeholder="$t('Select or search emoji icon...')" />
+            <input
+                @click="openList"
+                v-model="query"
+                class="focus-border-theme input-dark"
+                type="text"
+                :placeholder="$t('Select or search emoji icon...')"
+            />
         </div>
 
         <!-- Spinner -->
@@ -17,9 +23,18 @@
         </div>
 
         <!-- Emojis List -->
-        <div v-if="isOpen && isLoaded && emojis" @scroll="checkGroupInView" id="group-box" class="relative h-96 select-none overflow-y-auto lg:h-60 2xl:h-96">
+        <div
+            v-if="isOpen && isLoaded && emojis"
+            @scroll="checkGroupInView"
+            id="group-box"
+            class="relative h-96 select-none overflow-y-auto lg:h-60 2xl:h-96"
+        >
             <!-- Navigation of Emojis Groups -->
-            <ul v-if="!query" class="sticky top-0 z-10 flex items-center justify-between space-x-1 bg-white dark:bg-dark-background sm:dark:bg-4x-dark-foreground" id="group-bar">
+            <ul
+                v-if="!query"
+                class="sticky top-0 z-10 flex items-center justify-between space-x-1 bg-white dark:bg-dark-background sm:dark:bg-4x-dark-foreground"
+                id="group-bar"
+            >
                 <li
                     @click.stop="scrollToGroup(group.name)"
                     v-for="(group, i) in emojis.groups"
@@ -39,7 +54,12 @@
                     {{ name }}
                 </label>
                 <ul class="space-between grid grid-cols-7 gap-4 md:grid-cols-9">
-                    <li @click="setEmoji(emoji)" v-for="(emoji, i) in group" :key="i" class="flex cursor-pointer items-center justify-center">
+                    <li
+                        @click="setEmoji(emoji)"
+                        v-for="(emoji, i) in group"
+                        :key="i"
+                        class="flex cursor-pointer items-center justify-center"
+                    >
                         <Emoji :emoji="emoji" class="text-4xl" />
                     </li>
                 </ul>
@@ -47,7 +67,12 @@
 
             <!-- Searched emojis -->
             <ul v-if="query" class="space-between grid grid-cols-7 gap-4 md:grid-cols-9">
-                <li @click="setEmoji(emoji)" v-for="(emoji, i) in filteredEmojis" :key="i" class="flex cursor-pointer items-center justify-center">
+                <li
+                    @click="setEmoji(emoji)"
+                    v-for="(emoji, i) in filteredEmojis"
+                    :key="i"
+                    class="flex cursor-pointer items-center justify-center"
+                >
                     <Emoji :emoji="emoji" class="text-4xl" />
                 </li>
             </ul>
diff --git a/resources/js/components/Others/FilePreviewDetail.vue b/resources/js/components/Others/FilePreviewDetail.vue
index 8994357e..79b7d69d 100644
--- a/resources/js/components/Others/FilePreviewDetail.vue
+++ b/resources/js/components/Others/FilePreviewDetail.vue
@@ -9,10 +9,24 @@
         />
 
         <!--Audio-->
-        <audio v-if="singleFile.data.type === 'audio'" :src="singleFile.data.attributes.file_url" controlsList="nodownload" controls class="w-full"></audio>
+        <audio
+            v-if="singleFile.data.type === 'audio'"
+            :src="singleFile.data.attributes.file_url"
+            controlsList="nodownload"
+            controls
+            class="w-full"
+        ></audio>
 
         <!--Video-->
-        <video v-if="singleFile.data.type === 'video'" ref="video" class="h-auto w-full overflow-hidden rounded-sm" controlsList="nodownload" disablePictureInPicture playsinline controls>
+        <video
+            v-if="singleFile.data.type === 'video'"
+            ref="video"
+            class="h-auto w-full overflow-hidden rounded-sm"
+            controlsList="nodownload"
+            disablePictureInPicture
+            playsinline
+            controls
+        >
             <source :src="singleFile.data.attributes.file_url" type="video/mp4" />
         </video>
     </div>
@@ -33,12 +47,12 @@ export default {
             return this.singleFile && !includes(['folder', 'file'], this.singleFile.data.type)
         },
     },
-	watch: {
-		'singleFile': function (val) {
-			if (val.data.type === 'video') {
-				this.$refs.video.load()
-			}
-		}
-	}
+    watch: {
+        singleFile: function (val) {
+            if (val.data.type === 'video') {
+                this.$refs.video.load()
+            }
+        },
+    },
 }
 </script>
diff --git a/resources/js/components/Others/Forms/AvatarInput.vue b/resources/js/components/Others/Forms/AvatarInput.vue
index d15c8b4e..38605a06 100644
--- a/resources/js/components/Others/Forms/AvatarInput.vue
+++ b/resources/js/components/Others/Forms/AvatarInput.vue
@@ -1,7 +1,18 @@
 <template>
     <div class="relative cursor-pointer">
-        <input ref="file" type="file" @change="showImagePreview($event)" class="absolute top-0 bottom-0 left-0 right-0 z-10 w-full cursor-pointer opacity-0" />
-        <img v-if="imagePreview" ref="image" :src="imagePreview" class="relative z-0 h-14 w-14 cursor-pointer rounded-xl object-cover shadow-lg md:h-16 md:w-16" alt="avatar" />
+        <input
+            ref="file"
+            type="file"
+            @change="showImagePreview($event)"
+            class="absolute top-0 bottom-0 left-0 right-0 z-10 w-full cursor-pointer opacity-0"
+        />
+        <img
+            v-if="imagePreview"
+            ref="image"
+            :src="imagePreview"
+            class="relative z-0 h-14 w-14 cursor-pointer rounded-xl object-cover shadow-lg md:h-16 md:w-16"
+            alt="avatar"
+        />
     </div>
 </template>
 
diff --git a/resources/js/components/Others/Forms/CopyShareLink.vue b/resources/js/components/Others/Forms/CopyShareLink.vue
index c57769aa..32ce4b69 100644
--- a/resources/js/components/Others/Forms/CopyShareLink.vue
+++ b/resources/js/components/Others/Forms/CopyShareLink.vue
@@ -21,7 +21,10 @@
         </div>
 
         <!--Hidden options-->
-        <ul v-if="isOpenedMoreOptions" class="absolute top-12 left-0 right-0 z-10 select-none overflow-y-auto overflow-x-hidden rounded-lg shadow-xl">
+        <ul
+            v-if="isOpenedMoreOptions"
+            class="absolute top-12 left-0 right-0 z-10 select-none overflow-y-auto overflow-x-hidden rounded-lg shadow-xl"
+        >
             <li
                 @click="getQrCode"
                 class="block flex cursor-pointer items-center bg-white py-2.5 px-5 hover:bg-light-background dark:bg-2x-dark-foreground dark:hover:bg-4x-dark-foreground"
@@ -57,7 +60,11 @@
             </li>
         </ul>
 
-        <textarea v-model="iframeCode" ref="iframe" class="pointer-events-none absolute right-full opacity-0"></textarea>
+        <textarea
+            v-model="iframeCode"
+            ref="iframe"
+            class="pointer-events-none absolute right-full opacity-0"
+        ></textarea>
     </div>
 </template>
 
diff --git a/resources/js/components/Others/Forms/FormLabel.vue b/resources/js/components/Others/Forms/FormLabel.vue
index 89b26f99..18ede9fe 100644
--- a/resources/js/components/Others/Forms/FormLabel.vue
+++ b/resources/js/components/Others/Forms/FormLabel.vue
@@ -23,8 +23,8 @@
 
 <script>
 import {
-	InfoIcon,
-	DatabaseIcon,
+    InfoIcon,
+    DatabaseIcon,
     UsersIcon,
     ShieldIcon,
     CreditCardIcon,
@@ -44,8 +44,8 @@ export default {
     name: 'FormLabel',
     props: ['icon'],
     components: {
-		InfoIcon,
-		DatabaseIcon,
+        InfoIcon,
+        DatabaseIcon,
         UsersIcon,
         CreditCardIcon,
         DollarSignIcon,
diff --git a/resources/js/components/Others/Forms/ImageInput.vue b/resources/js/components/Others/Forms/ImageInput.vue
index b0af4c87..3ee71786 100644
--- a/resources/js/components/Others/Forms/ImageInput.vue
+++ b/resources/js/components/Others/Forms/ImageInput.vue
@@ -1,86 +1,97 @@
 <template>
-    <div class="flex items-center justify-center rounded-lg relative h-[175px] dark:bg-2x-dark-foreground bg-light-background" :class="{ 'is-error': error }">
-
-		<!--Reset Image-->
-		<div
-			v-if="imagePreview"
-			@click="resetImage"
-			class="absolute z-10 right-0 top-0 flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-white shadow-lg rounded-full -translate-y-3 translate-x-3"
-		>
+    <div
+        class="relative flex h-[175px] items-center justify-center rounded-lg bg-light-background dark:bg-2x-dark-foreground"
+        :class="{ 'is-error': error }"
+    >
+        <!--Reset Image-->
+        <div
+            v-if="imagePreview"
+            @click="resetImage"
+            class="absolute right-0 top-0 z-10 flex h-7 w-7 -translate-y-3 translate-x-3 cursor-pointer items-center justify-center rounded-md rounded-full bg-white shadow-lg"
+        >
             <x-icon size="14" class="vue-feather" />
-		</div>
+        </div>
 
         <input
-			@change="showImagePreview($event)"
-			ref="file"
-			type="file"
-			class="opacity-0 absolute top-0 left-0 right-0 bottom-0 z-10 w-full cursor-pointer"
-		/>
+            @change="showImagePreview($event)"
+            ref="file"
+            type="file"
+            class="absolute top-0 left-0 right-0 bottom-0 z-10 w-full cursor-pointer opacity-0"
+        />
 
-		<!--Default image preview-->
-		<img v-if="imagePreview" :src="imagePreview" ref="image" class="absolute w-full h-full object-contain py-4 px-12" />
+        <!--Default image preview-->
+        <img
+            v-if="imagePreview"
+            :src="imagePreview"
+            ref="image"
+            class="absolute h-full w-full object-contain py-4 px-12"
+        />
 
-		<!--Drop image zone-->
+        <!--Drop image zone-->
         <div v-if="!isData" class="text-center">
-            <image-icon size="34" class="vue-feather text-theme inline-block mb-4" />
+            <image-icon size="34" class="vue-feather text-theme mb-4 inline-block" />
 
-			<b class="font-bold text-base block leading-3">
+            <b class="block text-base font-bold leading-3">
                 {{ $te('input_image.title') ? $t('input_image.title') : 'Upload Image' }}
             </b>
             <small class="text-xs text-gray-500">
-                {{ $te('input_image.supported') ? $t('input_image.supported') : 'Supported formats are .png, .jpg, .jpeg.' }}
+                {{
+                    $te('input_image.supported')
+                        ? $t('input_image.supported')
+                        : 'Supported formats are .png, .jpg, .jpeg.'
+                }}
             </small>
         </div>
     </div>
 </template>
 
 <script>
-import {XIcon, ImageIcon} from 'vue-feather-icons'
+import { XIcon, ImageIcon } from 'vue-feather-icons'
 
 export default {
-	name: 'ImageInput',
-	props: ['image', 'error'],
-	components: {
-		ImageIcon,
-		XIcon,
-	},
-	data() {
-		return {
-			imagePreview: undefined,
-		}
-	},
-	computed: {
-		isData() {
-			return !(typeof this.imagePreview === 'undefined' || this.imagePreview === '')
-		},
-	},
-	methods: {
-		resetImage() {
-			this.imagePreview = undefined
-			this.$emit('input', undefined)
-		},
-		showImagePreview(event) {
-			const imgPath = event.target.files[0].name,
-				extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase()
+    name: 'ImageInput',
+    props: ['image', 'error'],
+    components: {
+        ImageIcon,
+        XIcon,
+    },
+    data() {
+        return {
+            imagePreview: undefined,
+        }
+    },
+    computed: {
+        isData() {
+            return !(typeof this.imagePreview === 'undefined' || this.imagePreview === '')
+        },
+    },
+    methods: {
+        resetImage() {
+            this.imagePreview = undefined
+            this.$emit('input', undefined)
+        },
+        showImagePreview(event) {
+            const imgPath = event.target.files[0].name,
+                extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase()
 
-			if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
-				const file = event.target.files[0],
-					reader = new FileReader()
+            if (['png', 'jpg', 'jpeg', 'svg'].includes(extn)) {
+                const file = event.target.files[0],
+                    reader = new FileReader()
 
-				reader.onload = () => (this.imagePreview = reader.result)
+                reader.onload = () => (this.imagePreview = reader.result)
 
-				reader.readAsDataURL(file)
+                reader.readAsDataURL(file)
 
-				// Update user avatar
-				this.$emit('input', event.target.files[0])
-			} else {
-				alert(this.$t('validation_errors.wrong_image'))
-			}
-		},
-	},
-	created() {
-		// If has default image then load
-		if (this.image) this.imagePreview = this.image
-	},
+                // Update user avatar
+                this.$emit('input', event.target.files[0])
+            } else {
+                alert(this.$t('validation_errors.wrong_image'))
+            }
+        },
+    },
+    created() {
+        // If has default image then load
+        if (this.image) this.imagePreview = this.image
+    },
 }
 </script>
diff --git a/resources/js/components/Others/Forms/InfoBox.vue b/resources/js/components/Others/Forms/InfoBox.vue
index 0a5e2e92..9f497e6f 100644
--- a/resources/js/components/Others/Forms/InfoBox.vue
+++ b/resources/js/components/Others/Forms/InfoBox.vue
@@ -7,9 +7,7 @@
 <script>
 export default {
     name: 'InfoBox',
-    props: [
-		'type'
-	],
+    props: ['type'],
 }
 </script>
 
diff --git a/resources/js/components/Others/Forms/MultiEmailInput.vue b/resources/js/components/Others/Forms/MultiEmailInput.vue
index 61ea3bac..7b648195 100644
--- a/resources/js/components/Others/Forms/MultiEmailInput.vue
+++ b/resources/js/components/Others/Forms/MultiEmailInput.vue
@@ -1,9 +1,18 @@
 <template>
     <div class="wrapper">
         <!--<label class="input-label">{{ label }}:</label>-->
-        <div class="input-wrapper focus-within-border-theme" :class="{ 'is-error': isError }" @click="$refs.input.focus()">
+        <div
+            class="input-wrapper focus-within-border-theme"
+            :class="{ 'is-error': isError }"
+            @click="$refs.input.focus()"
+        >
             <div class="email-list">
-                <div class="email-tag bg-theme-100" :class="{ 'mb-offset': getCharactersLength > 45 }" v-for="(email, i) in emails" :key="i">
+                <div
+                    class="email-tag bg-theme-100"
+                    :class="{ 'mb-offset': getCharactersLength > 45 }"
+                    v-for="(email, i) in emails"
+                    :key="i"
+                >
                     <span class="text-theme">{{ email }}</span>
                     <x-icon @click="removeEmail(email)" class="icon" size="14" />
                 </div>
diff --git a/resources/js/components/Others/Forms/SearchInput.vue b/resources/js/components/Others/Forms/SearchInput.vue
index 83f22526..7f018e96 100644
--- a/resources/js/components/Others/Forms/SearchInput.vue
+++ b/resources/js/components/Others/Forms/SearchInput.vue
@@ -6,7 +6,14 @@
         <div @click="clearInput" v-if="query" class="icon">
             <x-icon class="pointer" size="19"></x-icon>
         </div>
-        <input v-model="query" @input="$emit('input', query)" class="query focus-border-theme" type="text" name="searchInput" :placeholder="$t('search_translations')" />
+        <input
+            v-model="query"
+            @input="$emit('input', query)"
+            class="query focus-border-theme"
+            type="text"
+            name="searchInput"
+            :placeholder="$t('search_translations')"
+        />
     </div>
 </template>
 
diff --git a/resources/js/components/Others/Forms/SelectBoxInput.vue b/resources/js/components/Others/Forms/SelectBoxInput.vue
index 5c26b695..4e3b14f7 100644
--- a/resources/js/components/Others/Forms/SelectBoxInput.vue
+++ b/resources/js/components/Others/Forms/SelectBoxInput.vue
@@ -1,6 +1,12 @@
 <template>
     <div class="select-box">
-        <div class="box-item active-bg-theme-100 active-border-theme" :class="{ active: item.value === input }" @click="getSelectedValue(item)" v-for="(item, i) in data" :key="i">
+        <div
+            class="box-item active-bg-theme-100 active-border-theme"
+            :class="{ active: item.value === input }"
+            @click="getSelectedValue(item)"
+            v-for="(item, i) in data"
+            :key="i"
+        >
             <span class="box-value active-text-theme">{{ item.label }}</span>
         </div>
     </div>
diff --git a/resources/js/components/Others/Forms/SelectInput.vue b/resources/js/components/Others/Forms/SelectInput.vue
index 04e9a8b0..46320a0d 100644
--- a/resources/js/components/Others/Forms/SelectInput.vue
+++ b/resources/js/components/Others/Forms/SelectInput.vue
@@ -1,7 +1,11 @@
 <template>
     <div class="select">
         <!--Area-->
-        <div class="input-area rounded-lg dark:bg-2x-dark-foreground bg-light-background" :class="{ 'is-active': isOpen, 'is-error': isError }" @click="openMenu">
+        <div
+            class="input-area rounded-lg bg-light-background dark:bg-2x-dark-foreground"
+            :class="{ 'is-active': isOpen, 'is-error': isError }"
+            @click="openMenu"
+        >
             <!--If is selected-->
             <div class="selected flex w-full items-center" v-if="selected">
                 <div class="option-icon" v-if="selected.icon">
@@ -25,7 +29,13 @@
         <transition name="slide-in">
             <div class="input-options rounded-lg" v-if="isOpen">
                 <div v-if="options.length > 5" class="select-search">
-                    <input v-model="query" ref="search" type="text" :placeholder="$t('select_search_placeholder')" class="search-input focus-border-theme rounded-lg" />
+                    <input
+                        v-model="query"
+                        ref="search"
+                        type="text"
+                        :placeholder="$t('select_search_placeholder')"
+                        class="search-input focus-border-theme rounded-lg"
+                    />
                 </div>
                 <ul class="option-list">
                     <li class="option-item" @click="selectOption(option)" v-for="(option, i) in optionList" :key="i">
diff --git a/resources/js/components/Others/MobileNavigation.vue b/resources/js/components/Others/MobileNavigation.vue
index cbaa55e0..fbdac526 100644
--- a/resources/js/components/Others/MobileNavigation.vue
+++ b/resources/js/components/Others/MobileNavigation.vue
@@ -4,7 +4,10 @@
         <UserHeadline v-if="!clickedSubmenu" class="p-5 pb-3" />
 
         <!--User estimate-->
-        <div v-if="config.subscriptionType === 'metered' && user && user.data.meta.usages && !clickedSubmenu" class="block px-5 pt-2">
+        <div
+            v-if="config.subscriptionType === 'metered' && user && user.data.meta.usages && !clickedSubmenu"
+            class="block px-5 pt-2"
+        >
             <div class="rounded-lg bg-light-background px-3 py-1.5 dark:bg-4x-dark-foreground">
                 <span class="text-sm font-semibold">
                     {{ $t('Your current estimated usage:') }}
@@ -27,9 +30,27 @@
         <MenuMobileGroup>
             <!--Main navigation-->
             <OptionGroup v-if="!clickedSubmenu">
-                <Option @click.native="goToFiles" :title="$t('menu.files')" icon="hard-drive" :is-hover-disabled="true" />
-                <Option @click.native.stop="showSubmenu('settings')" :title="$t('menu.settings')" icon="user" arrow="right" :is-hover-disabled="true" />
-                <Option v-if="isAdmin" @click.native.stop="showSubmenu('admin')" :title="$t('menu.admin')" icon="settings" arrow="right" :is-hover-disabled="true" />
+                <Option
+                    @click.native="goToFiles"
+                    :title="$t('menu.files')"
+                    icon="hard-drive"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native.stop="showSubmenu('settings')"
+                    :title="$t('menu.settings')"
+                    icon="user"
+                    arrow="right"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    v-if="isAdmin"
+                    @click.native.stop="showSubmenu('admin')"
+                    :title="$t('menu.admin')"
+                    icon="settings"
+                    arrow="right"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
             <OptionGroup v-if="!clickedSubmenu">
                 <Option @click.native="logOut" :title="$t('menu.logout')" icon="power" :is-hover-disabled="true" />
@@ -37,28 +58,79 @@
 
             <!--Submenu: User settings-->
             <OptionGroup v-if="clickedSubmenu === 'settings'">
-                <Option @click.native="goToRoute('Profile')" :title="$t('menu.profile')" icon="user" :is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Password')" :title="$t('menu.password')" icon="lock" :is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Storage')" :title="$t('menu.storage')" icon="hard-drive" :is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Billing')" v-if="config.subscriptionType !== 'none'" :title="$t('Billing')" icon="cloud" :is-hover-disabled="true" />
+                <Option
+                    @click.native="goToRoute('Profile')"
+                    :title="$t('menu.profile')"
+                    icon="user"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToRoute('Password')"
+                    :title="$t('menu.password')"
+                    icon="lock"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToRoute('Storage')"
+                    :title="$t('menu.storage')"
+                    icon="hard-drive"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToRoute('Billing')"
+                    v-if="config.subscriptionType !== 'none'"
+                    :title="$t('Billing')"
+                    icon="cloud"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
 
             <!--Submenu: Admin settings-->
             <OptionGroup v-if="clickedSubmenu === 'admin'">
-                <Option @click.native="goToRoute('Dashboard')" :title="$t('admin_menu.dashboard')" icon="box" :is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Users')" :title="$t('admin_menu.users')" icon="users" :is-hover-disabled="true" />
-                <Option @click.native="goToRoute('AppOthers')" :title="$t('admin_menu.settings')" icon="settings" :is-hover-disabled="true" />
+                <Option
+                    @click.native="goToRoute('Dashboard')"
+                    :title="$t('admin_menu.dashboard')"
+                    icon="box"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToRoute('Users')"
+                    :title="$t('admin_menu.users')"
+                    icon="users"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToRoute('AppOthers')"
+                    :title="$t('admin_menu.settings')"
+                    icon="settings"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
 
             <!--Submenu: Content settings-->
             <OptionGroup v-if="clickedSubmenu === 'admin'">
-                <Option @click.native="goToRoute('Pages')" :title="$t('admin_menu.pages')" icon="monitor" :is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Language')" :title="$t('languages')" icon="globe" :is-hover-disabled="true" />
+                <Option
+                    @click.native="goToRoute('Pages')"
+                    :title="$t('admin_menu.pages')"
+                    icon="monitor"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToRoute('Language')"
+                    :title="$t('languages')"
+                    icon="globe"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
 
             <!--Submenu: Billing settings-->
             <OptionGroup v-if="clickedSubmenu === 'admin' && config.subscriptionType !== 'none'">
-                <Option @click.native="goToRoute('AppPayments')" :title="$t('Payments')" icon="credit-card" :is-hover-disabled="true" />
+                <Option
+                    @click.native="goToRoute('AppPayments')"
+                    :title="$t('Payments')"
+                    icon="credit-card"
+                    :is-hover-disabled="true"
+                />
                 <Option
                     @click.native="goToRoute('Subscriptions')"
                     v-if="config.subscriptionType === 'fixed'"
@@ -66,8 +138,18 @@
                     icon="credit-card"
                     :is-hover-disabled="true"
                 />
-                <Option @click.native="goToRoute('Plans')" :title="$t('admin_menu.plans')" icon="database" :is-hover-disabled="true" />
-                <Option @click.native="goToRoute('Invoices')" :title="$t('Transactions')" icon="file-text" :is-hover-disabled="true" />
+                <Option
+                    @click.native="goToRoute('Plans')"
+                    :title="$t('admin_menu.plans')"
+                    icon="database"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.native="goToRoute('Invoices')"
+                    :title="$t('Transactions')"
+                    icon="file-text"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
         </MenuMobileGroup>
     </MenuMobile>
diff --git a/resources/js/components/Others/MoveItemPopup.vue b/resources/js/components/Others/MoveItemPopup.vue
index c16633b8..58221e94 100644
--- a/resources/js/components/Others/MoveItemPopup.vue
+++ b/resources/js/components/Others/MoveItemPopup.vue
@@ -20,14 +20,25 @@
                     v-if="clipboard.length > 1 && !isSelectedItem"
                 />
 
-                <TreeMenu class="-mx-4" :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.id" />
+                <TreeMenu
+                    class="-mx-4"
+                    :disabled-by-id="pickedItem"
+                    :depth="1"
+                    :nodes="items"
+                    v-for="items in navigation"
+                    :key="items.id"
+                />
             </div>
         </PopupContent>
 
         <!--Actions-->
         <PopupActions>
-            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
-            <ButtonBase class="w-full" @click.native="moveItem" :button-style="selectedFolder ? 'theme' : 'secondary'">{{ $t('popup_move_item.submit') }} </ButtonBase>
+            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary"
+                >{{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
+            <ButtonBase class="w-full" @click.native="moveItem" :button-style="selectedFolder ? 'theme' : 'secondary'"
+                >{{ $t('popup_move_item.submit') }}
+            </ButtonBase>
         </PopupActions>
     </PopupWrapper>
 </template>
@@ -76,7 +87,11 @@ export default {
             if (!this.selectedFolder) return
 
             // Prevent to move items to the same parent
-            if (isArray(this.selectedFolder) && this.clipboard.find((item) => item.parent_id === this.selectedFolder.id)) return
+            if (
+                isArray(this.selectedFolder) &&
+                this.clipboard.find((item) => item.parent_id === this.selectedFolder.id)
+            )
+                return
 
             // Move item
             if (!this.isSelectedItem) {
diff --git a/resources/js/components/Others/PlanPricingTables.vue b/resources/js/components/Others/PlanPricingTables.vue
index bbd0911a..f50c5d28 100644
--- a/resources/js/components/Others/PlanPricingTables.vue
+++ b/resources/js/components/Others/PlanPricingTables.vue
@@ -18,9 +18,16 @@
                 <footer class="plan-footer">
                     <b class="price text-theme">
                         {{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
-                        <small v-if="plan.data.attributes.tax_rates.length > 0" class="vat-disclaimer">{{ $t('page_pricing_tables.vat_excluded') }}</small>
+                        <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">
+                    <ButtonBase
+                        @click.native="selectPlan(plan)"
+                        type="submit"
+                        button-style="secondary"
+                        class="sign-in-button"
+                    >
                         {{ $t('global.get_it') }}
                     </ButtonBase>
                 </footer>
diff --git a/resources/js/components/Others/Popup/ConfirmPopup.vue b/resources/js/components/Others/Popup/ConfirmPopup.vue
index 4b9c5ce1..7e1f5ef3 100644
--- a/resources/js/components/Others/Popup/ConfirmPopup.vue
+++ b/resources/js/components/Others/Popup/ConfirmPopup.vue
@@ -14,8 +14,12 @@
         </div>
 
         <PopupActions>
-            <ButtonBase @click.native="closePopup" button-style="secondary" class="w-full">{{ $t('global.cancel') }} </ButtonBase>
-            <ButtonBase @click.native="confirm" :button-style="buttonColor" class="w-full">{{ $t('global.confirm_action') }} </ButtonBase>
+            <ButtonBase @click.native="closePopup" button-style="secondary" class="w-full"
+                >{{ $t('global.cancel') }}
+            </ButtonBase>
+            <ButtonBase @click.native="confirm" :button-style="buttonColor" class="w-full"
+                >{{ $t('global.confirm_action') }}
+            </ButtonBase>
         </PopupActions>
     </PopupWrapper>
 </template>
diff --git a/resources/js/components/Others/Popup/PopupContent.vue b/resources/js/components/Others/Popup/PopupContent.vue
index a9032266..8e0078ff 100644
--- a/resources/js/components/Others/Popup/PopupContent.vue
+++ b/resources/js/components/Others/Popup/PopupContent.vue
@@ -1,5 +1,8 @@
 <template>
-    <div :class="type" class="absolute top-16 bottom-24 left-0 right-0 h-auto overflow-x-auto overflow-y-auto px-6 md:relative md:top-0 md:bottom-0">
+    <div
+        :class="type"
+        class="absolute top-16 bottom-24 left-0 right-0 h-auto overflow-x-auto overflow-y-auto px-6 md:relative md:top-0 md:bottom-0"
+    >
         <slot />
     </div>
 </template>
diff --git a/resources/js/components/Others/Popup/PopupHeader.vue b/resources/js/components/Others/Popup/PopupHeader.vue
index c64cfa94..94ac2c9d 100644
--- a/resources/js/components/Others/Popup/PopupHeader.vue
+++ b/resources/js/components/Others/Popup/PopupHeader.vue
@@ -22,7 +22,17 @@
 </template>
 
 <script>
-import { CreditCardIcon, KeyIcon, UserPlusIcon, CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon, UsersIcon } from 'vue-feather-icons'
+import {
+    CreditCardIcon,
+    KeyIcon,
+    UserPlusIcon,
+    CornerDownRightIcon,
+    LinkIcon,
+    XIcon,
+    Edit2Icon,
+    ShareIcon,
+    UsersIcon,
+} from 'vue-feather-icons'
 import { events } from '../../../bus'
 
 export default {
diff --git a/resources/js/components/Others/Popup/PopupWrapper.vue b/resources/js/components/Others/Popup/PopupWrapper.vue
index 978d3aa4..2d73511c 100644
--- a/resources/js/components/Others/Popup/PopupWrapper.vue
+++ b/resources/js/components/Others/Popup/PopupWrapper.vue
@@ -1,7 +1,13 @@
 <template>
     <transition name="popup">
-        <div v-if="isVisibleWrapper" @click.self="closePopup" class="popup z-50 fixed top-0 left-0 right-0 bottom-0 grid h-full overflow-y-auto p-10 lg:absolute">
-            <div class="fixed md:relative top-0 bottom-0 left-0 right-0 w-full dark:bg-2x-dark-foreground bg-white m-auto z-10 md:w-[490px] md:rounded-xl shadow-xl">
+        <div
+            v-if="isVisibleWrapper"
+            @click.self="closePopup"
+            class="popup fixed top-0 left-0 right-0 bottom-0 z-50 grid h-full overflow-y-auto p-10 lg:absolute"
+        >
+            <div
+                class="fixed top-0 bottom-0 left-0 right-0 z-10 m-auto w-full bg-white shadow-xl dark:bg-2x-dark-foreground md:relative md:w-[490px] md:rounded-xl"
+            >
                 <slot />
             </div>
         </div>
@@ -44,41 +50,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.popup-leave-active {
+    animation: popup-slide-in 0.15s ease reverse;
+}
 
-	.popup-leave-active {
-		animation: popup-slide-in 0.15s ease reverse;
-	}
+@media only screen and (min-width: 960px) {
+    .popup-enter-active {
+        animation: popup-slide-in 0.25s 0.1s ease both;
+    }
 
-	@media only screen and (min-width: 960px) {
-		.popup-enter-active {
-			animation: popup-slide-in 0.25s 0.10s ease both;
-		}
+    @keyframes popup-slide-in {
+        0% {
+            opacity: 0;
+            transform: translateY(100px);
+        }
 
-		@keyframes popup-slide-in {
-			0% {
-				opacity: 0;
-				transform: translateY(100px);
-			}
+        100% {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+}
 
-			100% {
-				opacity: 1;
-				transform: translateY(0);
-			}
-		}
-	}
+@media only screen and (max-width: 960px) {
+    .popup-enter-active {
+        animation: popup-slide-in 0.35s 0.15s ease both;
+    }
 
-	@media only screen and (max-width: 960px) {
-		.popup-enter-active {
-			animation: popup-slide-in 0.35s 0.15s ease both;
-		}
-
-		@keyframes popup-slide-in {
-			0% {
-				transform: translateY(100%);
-			}
-			100% {
-				transform: translateY(0);
-			}
-		}
-	}
+    @keyframes popup-slide-in {
+        0% {
+            transform: translateY(100%);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+}
 </style>
diff --git a/resources/js/components/Others/RenameItemPopup.vue b/resources/js/components/Others/RenameItemPopup.vue
index 54f2640e..f45cac7f 100644
--- a/resources/js/components/Others/RenameItemPopup.vue
+++ b/resources/js/components/Others/RenameItemPopup.vue
@@ -12,7 +12,11 @@
             <ValidationObserver @submit.prevent="changeName" ref="renameForm" v-slot="{ invalid }" tag="form">
                 <!--Update item name-->
                 <ValidationProvider tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
-                    <AppInputText :title="$t('popup_rename.label')" :error="errors[0]" :is-last="pickedItem.data.type !== 'folder'">
+                    <AppInputText
+                        :title="$t('popup_rename.label')"
+                        :error="errors[0]"
+                        :is-last="pickedItem.data.type !== 'folder'"
+                    >
                         <div class="relative flex items-center">
                             <input
                                 v-model="pickedItem.data.attributes.name"
@@ -30,12 +34,21 @@
                 </ValidationProvider>
 
                 <!--Emoji-->
-                <AppInputSwitch v-if="pickedItem.data.type === 'folder'" :title="$t('Emoji as an Icon')" :description="$t('Replace folder icon with an Emoji')" :is-last="!isEmoji">
+                <AppInputSwitch
+                    v-if="pickedItem.data.type === 'folder'"
+                    :title="$t('Emoji as an Icon')"
+                    :description="$t('Replace folder icon with an Emoji')"
+                    :is-last="!isEmoji"
+                >
                     <SwitchInput v-model="isEmoji" :state="isEmoji" />
                 </AppInputSwitch>
 
                 <!--Set emoji-->
-                <EmojiPicker v-if="pickedItem.data.type === 'folder' && isEmoji" v-model="emoji" :default-emoji="emoji" />
+                <EmojiPicker
+                    v-if="pickedItem.data.type === 'folder' && isEmoji"
+                    v-model="emoji"
+                    :default-emoji="emoji"
+                />
             </ValidationObserver>
         </PopupContent>
 
@@ -87,7 +100,9 @@ export default {
     },
     computed: {
         itemTypeTitle() {
-            return this.pickedItem && this.pickedItem.data.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
+            return this.pickedItem && this.pickedItem.data.type === 'folder'
+                ? this.$t('types.folder')
+                : this.$t('types.file')
         },
     },
     watch: {
diff --git a/resources/js/components/Others/SelectSingleChargeMethodPopup.vue b/resources/js/components/Others/SelectSingleChargeMethodPopup.vue
index 37d26298..b3e68fe8 100644
--- a/resources/js/components/Others/SelectSingleChargeMethodPopup.vue
+++ b/resources/js/components/Others/SelectSingleChargeMethodPopup.vue
@@ -10,11 +10,19 @@
                     'mb-2 rounded-xl bg-light-background px-4 dark:bg-2x-dark-foreground': paypal.isMethodsLoaded,
                 }"
             >
-                <PaymentMethod @click.native="pickedPaymentMethod('paypal')" driver="paypal" :description="config.paypal_payment_description">
+                <PaymentMethod
+                    @click.native="pickedPaymentMethod('paypal')"
+                    driver="paypal"
+                    :description="config.paypal_payment_description"
+                >
                     <div v-if="paypal.isMethodLoading" class="translate-y-3 scale-50 transform">
                         <Spinner />
                     </div>
-                    <span v-if="!paypal.isMethodsLoaded" :class="{ 'opacity-0': paypal.isMethodLoading }" class="text-theme cursor-pointer text-sm font-bold">
+                    <span
+                        v-if="!paypal.isMethodsLoaded"
+                        :class="{ 'opacity-0': paypal.isMethodLoading }"
+                        class="text-theme cursor-pointer text-sm font-bold"
+                    >
                         {{ $t('Select') }}
                     </span>
                 </PaymentMethod>
@@ -24,7 +32,11 @@
             </div>
 
             <!--Paystack implementation-->
-            <PaymentMethod v-if="config.isPaystack" driver="paystack" :description="config.paystack_payment_description">
+            <PaymentMethod
+                v-if="config.isPaystack"
+                driver="paystack"
+                :description="config.paystack_payment_description"
+            >
                 <paystack
                     @click.native="pickedPaymentMethod('paystack')"
                     v-if="user && config"
diff --git a/resources/js/components/Others/ShareCreatePopup.vue b/resources/js/components/Others/ShareCreatePopup.vue
index 7b46e32a..c6b5ebc4 100644
--- a/resources/js/components/Others/ShareCreatePopup.vue
+++ b/resources/js/components/Others/ShareCreatePopup.vue
@@ -9,9 +9,22 @@
             <ThumbnailItem class="mb-5" :item="pickedItem" />
 
             <!--Form to set sharing-->
-            <ValidationObserver v-if="!isGeneratedShared" @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form">
+            <ValidationObserver
+                v-if="!isGeneratedShared"
+                @submit.prevent
+                ref="shareForm"
+                v-slot="{ invalid }"
+                tag="form"
+            >
                 <!--Permission Select-->
-                <ValidationProvider v-if="isFolder" tag="div" mode="passive" name="Permission" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    v-if="isFolder"
+                    tag="div"
+                    mode="passive"
+                    name="Permission"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <AppInputText :title="$t('shared_form.label_permission')" :error="errors[0]">
                         <SelectInput
                             v-model="shareOptions.permission"
@@ -24,12 +37,26 @@
 
                 <!--Password Switch-->
                 <div>
-                    <AppInputSwitch :title="$t('shared_form.label_password_protection')" :description="$t('popup.share.password_description')">
-                        <SwitchInput v-model="shareOptions.isPassword" class="switch" :state="shareOptions.isPassword" />
+                    <AppInputSwitch
+                        :title="$t('shared_form.label_password_protection')"
+                        :description="$t('popup.share.password_description')"
+                    >
+                        <SwitchInput
+                            v-model="shareOptions.isPassword"
+                            class="switch"
+                            :state="shareOptions.isPassword"
+                        />
                     </AppInputSwitch>
 
                     <!--Set password-->
-                    <ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
+                    <ValidationProvider
+                        v-if="shareOptions.isPassword"
+                        tag="div"
+                        mode="passive"
+                        name="Password"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <AppInputText :error="errors[0]" class="-mt-2">
                             <input
                                 v-model="shareOptions.password"
@@ -50,19 +77,40 @@
 
                     <!--Set expiration-->
                     <AppInputText v-if="isExpiration" class="-mt-2">
-                        <SelectBoxInput v-model="shareOptions.expiration" :data="$translateSelectOptions(expirationList)" class="box" />
+                        <SelectBoxInput
+                            v-model="shareOptions.expiration"
+                            :data="$translateSelectOptions(expirationList)"
+                            class="box"
+                        />
                     </AppInputText>
                 </div>
 
                 <!--Send on emails switch-->
                 <div>
-                    <AppInputSwitch :title="$t('popup.share.email_send')" :description="$t('popup.share.email_description')" :is-last="!isEmailSharing">
+                    <AppInputSwitch
+                        :title="$t('popup.share.email_send')"
+                        :description="$t('popup.share.email_description')"
+                        :is-last="!isEmailSharing"
+                    >
                         <SwitchInput v-model="isEmailSharing" class="switch" :state="isEmailSharing" />
                     </AppInputSwitch>
 
                     <!--Set expiration-->
-                    <ValidationProvider v-if="isEmailSharing" tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }" class="-mt-2">
-                        <MultiEmailInput rules="required" v-model="shareOptions.emails" :label="$t('shared_form.recipients_label')" :isError="errors[0]" />
+                    <ValidationProvider
+                        v-if="isEmailSharing"
+                        tag="div"
+                        mode="passive"
+                        name="Email"
+                        rules="required"
+                        v-slot="{ errors }"
+                        class="-mt-2"
+                    >
+                        <MultiEmailInput
+                            rules="required"
+                            v-model="shareOptions.emails"
+                            :label="$t('shared_form.recipients_label')"
+                            :isError="errors[0]"
+                        />
                     </ValidationProvider>
                 </div>
             </ValidationObserver>
@@ -78,7 +126,13 @@
             <ButtonBase v-if="!isGeneratedShared" class="w-full" @click.native="$closePopup()" button-style="secondary">
                 {{ $t('popup_move_item.cancel') }}
             </ButtonBase>
-            <ButtonBase class="w-full" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">
+            <ButtonBase
+                class="w-full"
+                @click.native="submitShareOptions"
+                button-style="theme"
+                :loading="isLoading"
+                :disabled="isLoading"
+            >
                 {{ submitButtonText }}
             </ButtonBase>
         </PopupActions>
@@ -135,7 +189,9 @@ export default {
     computed: {
         ...mapGetters(['permissionOptions', 'expirationList']),
         itemTypeTitle() {
-            return this.pickedItem && this.pickedItem.data.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
+            return this.pickedItem && this.pickedItem.data.type === 'folder'
+                ? this.$t('types.folder')
+                : this.$t('types.file')
         },
         isFolder() {
             return this.pickedItem && this.pickedItem.data.type === 'folder'
diff --git a/resources/js/components/Others/ShareEditPopup.vue b/resources/js/components/Others/ShareEditPopup.vue
index f87bc826..668d0f5f 100644
--- a/resources/js/components/Others/ShareEditPopup.vue
+++ b/resources/js/components/Others/ShareEditPopup.vue
@@ -31,7 +31,11 @@
                 <ValidationObserver @submit.prevent v-slot="{ invalid }" ref="shareEmail" tag="form">
                     <ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
                         <AppInputText title="Share with" :error="errors[0]" :is-last="true">
-                            <MultiEmailInput rules="required" v-model="emails" :label="$t('shared_form.label_send_to_recipients')" />
+                            <MultiEmailInput
+                                rules="required"
+                                v-model="emails"
+                                :label="$t('shared_form.label_send_to_recipients')"
+                            />
                         </AppInputText>
                     </ValidationProvider>
                 </ValidationObserver>
@@ -41,7 +45,13 @@
                 <ButtonBase class="w-full" @click.native="showSection(undefined)" button-style="secondary">
                     {{ $t('Show Details') }}
                 </ButtonBase>
-                <ButtonBase class="w-full" @click.native="sendViaEmail" button-style="theme" :loading="isLoading" :disabled="isLoading">
+                <ButtonBase
+                    class="w-full"
+                    @click.native="sendViaEmail"
+                    button-style="theme"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                >
                     {{ $t('Send') }}
                 </ButtonBase>
             </PopupActions>
@@ -60,7 +70,14 @@
 
                 <ValidationObserver @submit.prevent ref="shareForm" v-slot="{ invalid }" tag="form">
                     <!--Permission Select-->
-                    <ValidationProvider v-if="isFolder" tag="div" mode="passive" name="Permission" rules="required" v-slot="{ errors }">
+                    <ValidationProvider
+                        v-if="isFolder"
+                        tag="div"
+                        mode="passive"
+                        name="Permission"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <AppInputText :title="$t('shared_form.label_permission')" :error="errors[0]">
                             <SelectInput
                                 v-model="shareOptions.permission"
@@ -74,12 +91,23 @@
 
                     <!--Password Switch-->
                     <div>
-                        <AppInputSwitch :title="$t('shared_form.label_password_protection')" :description="$t('popup.share.password_description')">
-                            <SwitchInput v-model="shareOptions.isProtected" class="switch" :state="shareOptions.isProtected" />
+                        <AppInputSwitch
+                            :title="$t('shared_form.label_password_protection')"
+                            :description="$t('popup.share.password_description')"
+                        >
+                            <SwitchInput
+                                v-model="shareOptions.isProtected"
+                                class="switch"
+                                :state="shareOptions.isProtected"
+                            />
                         </AppInputSwitch>
 
                         <ActionButton
-                            v-if="pickedItem.data.relationships.shared.data.attributes.protected && canChangePassword && shareOptions.isProtected"
+                            v-if="
+                                pickedItem.data.relationships.shared.data.attributes.protected &&
+                                canChangePassword &&
+                                shareOptions.isProtected
+                            "
                             @click.native="changePassword"
                             class="mb-6 -mt-4"
                         >
@@ -87,7 +115,14 @@
                         </ActionButton>
 
                         <!--Set password-->
-                        <ValidationProvider v-if="shareOptions.isProtected && !canChangePassword" tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
+                        <ValidationProvider
+                            v-if="shareOptions.isProtected && !canChangePassword"
+                            tag="div"
+                            mode="passive"
+                            name="Password"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
                             <AppInputText :error="errors[0]" class="-mt-2">
                                 <input
                                     v-model="shareOptions.password"
@@ -102,23 +137,48 @@
 
                     <!--Expiration switch-->
                     <div>
-                        <AppInputSwitch :title="$t('expiration')" :description="$t('popup.share.expiration_description')" :is-last="!shareOptions.expiration">
-                            <SwitchInput v-model="shareOptions.expiration" class="switch" :state="shareOptions.expiration ? 1 : 0" />
+                        <AppInputSwitch
+                            :title="$t('expiration')"
+                            :description="$t('popup.share.expiration_description')"
+                            :is-last="!shareOptions.expiration"
+                        >
+                            <SwitchInput
+                                v-model="shareOptions.expiration"
+                                class="switch"
+                                :state="shareOptions.expiration ? 1 : 0"
+                            />
                         </AppInputSwitch>
 
                         <!--Set expiration-->
                         <AppInputText v-if="shareOptions.expiration" class="-mt-2" :is-last="true">
-                            <SelectBoxInput v-model="shareOptions.expiration" :data="$translateSelectOptions(expirationList)" :value="shareOptions.expiration" class="box" />
+                            <SelectBoxInput
+                                v-model="shareOptions.expiration"
+                                :data="$translateSelectOptions(expirationList)"
+                                :value="shareOptions.expiration"
+                                class="box"
+                            />
                         </AppInputText>
                     </div>
                 </ValidationObserver>
             </PopupContent>
 
             <PopupActions>
-                <ButtonBase class="w-full" @click.native="destroySharing" :button-style="destroyButtonStyle" :loading="isDeleting" :disabled="isDeleting">
+                <ButtonBase
+                    class="w-full"
+                    @click.native="destroySharing"
+                    :button-style="destroyButtonStyle"
+                    :loading="isDeleting"
+                    :disabled="isDeleting"
+                >
                     {{ destroyButtonText }}
                 </ButtonBase>
-                <ButtonBase class="w-full" @click.native="updateShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">
+                <ButtonBase
+                    class="w-full"
+                    @click.native="updateShareOptions"
+                    button-style="theme"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                >
                     {{ $t('Store Changes') }}
                 </ButtonBase>
             </PopupActions>
diff --git a/resources/js/components/Others/TabWrapper.vue b/resources/js/components/Others/TabWrapper.vue
index da7490aa..48ccd1c0 100644
--- a/resources/js/components/Others/TabWrapper.vue
+++ b/resources/js/components/Others/TabWrapper.vue
@@ -1,7 +1,13 @@
 <template>
     <div>
         <div class="tab-wrapper">
-            <div class="tab" :class="{ active: tab.isActive }" @click="selectTab(tab)" v-for="(tab, i) in tabs" :key="i">
+            <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" />
diff --git a/resources/js/components/Others/Tables/DatatableWrapper.vue b/resources/js/components/Others/Tables/DatatableWrapper.vue
index 96eabf2c..12af8040 100644
--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/Others/Tables/DatatableWrapper.vue
@@ -55,7 +55,12 @@
                     </a>
                 </li>
 
-                <li v-for="(page, index) in data.meta.last_page" :key="index" class="inline-block p-1" @click="goToPage(page)">
+                <li
+                    v-for="(page, index) in data.meta.last_page"
+                    :key="index"
+                    class="inline-block p-1"
+                    @click="goToPage(page)"
+                >
                     <a
                         class="page-link"
                         :class="{
@@ -100,7 +105,13 @@
                     <a class="page-link"> 1 </a>
                 </li>
 
-                <li v-if="pageIndex < 5" v-for="(page, index) in 5" :key="index" class="inline-block p-1" @click="goToPage(page)">
+                <li
+                    v-if="pageIndex < 5"
+                    v-for="(page, index) in 5"
+                    :key="index"
+                    class="inline-block p-1"
+                    @click="goToPage(page)"
+                >
                     <a
                         class="page-link"
                         :class="{
@@ -116,7 +127,13 @@
                 </li>
 
                 <!--Floated Pages-->
-                <li v-if="pageIndex >= 5 && pageIndex < data.meta.last_page - 3" v-for="(page, index) in floatPages" :key="index" class="inline-block p-1" @click="goToPage(page)">
+                <li
+                    v-if="pageIndex >= 5 && pageIndex < data.meta.last_page - 3"
+                    v-for="(page, index) in floatPages"
+                    :key="index"
+                    class="inline-block p-1"
+                    @click="goToPage(page)"
+                >
                     <a
                         class="page-link"
                         :class="{
@@ -141,7 +158,8 @@
                     <a
                         class="page-link"
                         :class="{
-                            'bg-light-background dark:bg-4x-dark-foreground dark:text-gray-300': pageIndex === data.meta.last_page - (4 - index),
+                            'bg-light-background dark:bg-4x-dark-foreground dark:text-gray-300':
+                                pageIndex === data.meta.last_page - (4 - index),
                         }"
                     >
                         {{ data.meta.last_page - (4 - index) }}
@@ -149,7 +167,11 @@
                 </li>
 
                 <!--Show last page-->
-                <li class="inline-block p-1" v-if="pageIndex < data.meta.last_page - 3" @click="goToPage(data.meta.last_page)">
+                <li
+                    class="inline-block p-1"
+                    v-if="pageIndex < data.meta.last_page - 3"
+                    @click="goToPage(data.meta.last_page)"
+                >
                     <a class="page-link">
                         {{ data.meta.last_page }}
                     </a>
@@ -169,7 +191,9 @@
                 </li>
             </ul>
 
-            <span class="text-xs text-gray-600 dark:text-gray-500"> Showing {{ data.meta.from }} - {{ data.meta.to }} from {{ data.meta.total }} records </span>
+            <span class="text-xs text-gray-600 dark:text-gray-500">
+                Showing {{ data.meta.from }} - {{ data.meta.to }} from {{ data.meta.total }} records
+            </span>
         </div>
     </div>
 </template>
@@ -239,7 +263,14 @@ export default {
             if (this.paginator) this.URI = this.URI + '?page=' + page
 
             // Add filder URI if is defined sorting
-            if (this.filter.field) this.URI = this.URI + (this.paginator ? '&' : '?') + 'sort=' + this.filter.field + '&direction=' + this.filter.sort
+            if (this.filter.field)
+                this.URI =
+                    this.URI +
+                    (this.paginator ? '&' : '?') +
+                    'sort=' +
+                    this.filter.field +
+                    '&direction=' +
+                    this.filter.sort
 
             this.isLoading = true
 
diff --git a/resources/js/components/Others/ThumbnailItem.vue b/resources/js/components/Others/ThumbnailItem.vue
index fa085db2..dbf237e1 100644
--- a/resources/js/components/Others/ThumbnailItem.vue
+++ b/resources/js/components/Others/ThumbnailItem.vue
@@ -3,16 +3,30 @@
         <!--Item thumbnail-->
         <div class="relative w-16">
             <!--Member thumbnail for team folders-->
-            <MemberAvatar v-if="user && canShowAuthor" :size="28" :is-border="true" :member="item.data.relationships.owner" class="absolute right-1.5 -bottom-2 z-10" />
+            <MemberAvatar
+                v-if="user && canShowAuthor"
+                :size="28"
+                :is-border="true"
+                :member="item.data.relationships.owner"
+                class="absolute right-1.5 -bottom-2 z-10"
+            />
 
             <!--Emoji Icon-->
-            <Emoji v-if="item.data.attributes.emoji" :emoji="item.data.attributes.emoji" class="ml-1 scale-110 transform text-5xl" />
+            <Emoji
+                v-if="item.data.attributes.emoji"
+                :emoji="item.data.attributes.emoji"
+                class="ml-1 scale-110 transform text-5xl"
+            />
 
             <!--Folder Icon-->
             <FolderIcon v-if="isFolder && !item.data.attributes.emoji" :item="item" />
 
             <!--File Icon-->
-            <FileIconThumbnail v-if="isFile || isVideo || isAudio || (isImage && !item.data.attributes.thumbnail)" :item="item" class="pr-2" />
+            <FileIconThumbnail
+                v-if="isFile || isVideo || isAudio || (isImage && !item.data.attributes.thumbnail)"
+                :item="item"
+                class="pr-2"
+            />
 
             <!--Image thumbnail-->
             <img
@@ -27,7 +41,10 @@
         <!--Item Info-->
         <div class="pl-2">
             <!--Item Title-->
-            <b class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:underline" style="max-width: 240px">
+            <b
+                class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:underline"
+                style="max-width: 240px"
+            >
                 {{ item.data.attributes.name }}
             </b>
 
@@ -39,11 +56,14 @@
                 </div>
 
                 <!--File & Image sub line-->
-                <small v-if="!isFolder" class="block text-xs text-gray-500"> {{ item.data.attributes.filesize }}, {{ timeStamp }} </small>
+                <small v-if="!isFolder" class="block text-xs text-gray-500">
+                    {{ item.data.attributes.filesize }}, {{ timeStamp }}
+                </small>
 
                 <!--Folder sub line-->
                 <small v-if="isFolder" class="block text-xs text-gray-500">
-                    {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }}
+                    {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }},
+                    {{ timeStamp }}
                 </small>
             </div>
         </div>
@@ -105,7 +125,9 @@ export default {
             )
         },
         folderItems() {
-            return this.item.data.attributes.deleted_at ? this.item.data.attributes.trashed_items : this.item.data.attributes.items
+            return this.item.data.attributes.deleted_at
+                ? this.item.data.attributes.trashed_items
+                : this.item.data.attributes.items
         },
         canShowAuthor() {
             return !this.isFolder && this.user.data.id !== this.item.data.relationships.owner.data.id
diff --git a/resources/js/components/Others/TreeMenu.vue b/resources/js/components/Others/TreeMenu.vue
index a088e580..21bc2a01 100644
--- a/resources/js/components/Others/TreeMenu.vue
+++ b/resources/js/components/Others/TreeMenu.vue
@@ -24,10 +24,30 @@
             </span>
 
             <!--Item icon-->
-            <hard-drive-icon v-if="['public', 'files'].includes(nodes.location)" size="17" class="icon vue-feather" :class="{ 'text-theme dark-text-theme': isSelectedItem }" />
-            <users-icon v-if="nodes.location === 'team-folders'" size="17" class="icon vue-feather" :class="{ 'text-theme dark-text-theme': isSelectedItem }" />
-            <user-plus-icon v-if="nodes.location === 'shared-with-me'" size="17" class="icon vue-feather" :class="{ 'text-theme dark-text-theme': isSelectedItem }" />
-            <folder-icon v-if="!nodes.location" size="17" class="icon vue-feather" :class="{ 'text-theme dark-text-theme': isSelectedItem }" />
+            <hard-drive-icon
+                v-if="['public', 'files'].includes(nodes.location)"
+                size="17"
+                class="icon vue-feather"
+                :class="{ 'text-theme dark-text-theme': isSelectedItem }"
+            />
+            <users-icon
+                v-if="nodes.location === 'team-folders'"
+                size="17"
+                class="icon vue-feather"
+                :class="{ 'text-theme dark-text-theme': isSelectedItem }"
+            />
+            <user-plus-icon
+                v-if="nodes.location === 'shared-with-me'"
+                size="17"
+                class="icon vue-feather"
+                :class="{ 'text-theme dark-text-theme': isSelectedItem }"
+            />
+            <folder-icon
+                v-if="!nodes.location"
+                size="17"
+                class="icon vue-feather"
+                :class="{ 'text-theme dark-text-theme': isSelectedItem }"
+            />
 
             <!--Item label-->
             <b
@@ -40,7 +60,14 @@
         </div>
 
         <!--Children-->
-        <tree-node :disabled-by-id="disabledById" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
+        <tree-node
+            :disabled-by-id="disabledById"
+            :depth="depth + 1"
+            v-if="isVisible"
+            :nodes="item"
+            v-for="item in nodes.folders"
+            :key="item.id"
+        />
     </div>
 </template>
 
diff --git a/resources/js/components/Others/TreeMenuNavigator.vue b/resources/js/components/Others/TreeMenuNavigator.vue
index fad5ef4c..54983d9c 100644
--- a/resources/js/components/Others/TreeMenuNavigator.vue
+++ b/resources/js/components/Others/TreeMenuNavigator.vue
@@ -23,11 +23,21 @@
                 />
             </div>
             <folder-icon size="17" class="vue-feather mr-2.5" :class="{ 'text-theme': isSelected }" />
-            <b class="max-w-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold" :class="{ 'text-theme': isSelected }">
+            <b
+                class="max-w-1 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold"
+                :class="{ 'text-theme': isSelected }"
+            >
                 {{ nodes.name }}
             </b>
         </div>
-        <tree-node :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id" />
+        <tree-node
+            :disabled="disableChildren"
+            :depth="depth + 1"
+            v-if="isVisible"
+            :nodes="item"
+            v-for="item in nodes.folders"
+            :key="item.id"
+        />
     </div>
 </template>
 
diff --git a/resources/js/components/Others/Vignette.vue b/resources/js/components/Others/Vignette.vue
index 5cd9c6cd..20908628 100644
--- a/resources/js/components/Others/Vignette.vue
+++ b/resources/js/components/Others/Vignette.vue
@@ -1,6 +1,10 @@
 <template>
     <transition name="vignette">
-        <div v-if="isVisible" class="vignette bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]" @click="closePopup"></div>
+        <div
+            v-if="isVisible"
+            class="vignette bg-dark-background bg-opacity-[0.35] dark:bg-opacity-[0.45]"
+            @click="closePopup"
+        ></div>
     </transition>
 </template>
 
diff --git a/resources/js/components/Sidebar/ContentGroup.vue b/resources/js/components/Sidebar/ContentGroup.vue
index 299f972c..ee4feea0 100644
--- a/resources/js/components/Sidebar/ContentGroup.vue
+++ b/resources/js/components/Sidebar/ContentGroup.vue
@@ -4,7 +4,12 @@
             <small class="text-xs font-bold text-gray-400 dark:text-gray-600">
                 {{ title }}
             </small>
-            <chevron-up-icon v-if="canCollapseWrapper" size="12" class="vue-feather mr-5 transform cursor-pointer text-gray-300" :class="{ 'rotate-180': !isVisible }" />
+            <chevron-up-icon
+                v-if="canCollapseWrapper"
+                size="12"
+                class="vue-feather mr-5 transform cursor-pointer text-gray-300"
+                :class="{ 'rotate-180': !isVisible }"
+            />
         </div>
 
         <slot v-if="isVisible" />
diff --git a/resources/js/components/Sidebar/ContentSidebar.vue b/resources/js/components/Sidebar/ContentSidebar.vue
index a3f97166..aa73876e 100644
--- a/resources/js/components/Sidebar/ContentSidebar.vue
+++ b/resources/js/components/Sidebar/ContentSidebar.vue
@@ -1,5 +1,8 @@
 <template>
-    <section class="content-sidebar z-10 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">
+    <section
+        class="content-sidebar z-10 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>
     </section>
 </template>
diff --git a/resources/js/components/Sidebar/SidebarNavigation.vue b/resources/js/components/Sidebar/SidebarNavigation.vue
index bf38d839..899b9d9b 100644
--- a/resources/js/components/Sidebar/SidebarNavigation.vue
+++ b/resources/js/components/Sidebar/SidebarNavigation.vue
@@ -1,11 +1,17 @@
 <template>
-    <nav v-if="isVisibleNavigationBars" class="menu-bar z-10 hidden w-16 flex-none select-none bg-light-background pt-7 dark:bg-dark-foreground lg:grid xl:w-20">
+    <nav
+        v-if="isVisibleNavigationBars"
+        class="menu-bar z-10 hidden w-16 flex-none select-none bg-light-background pt-7 dark:bg-dark-foreground lg:grid xl:w-20"
+    >
         <!--Navigation-->
         <div v-if="user" class="mb-auto text-center">
             <MemberAvatar class="mx-auto inline-block" :size="44" :is-border="false" :member="user" />
 
             <!--Usage-->
-            <div v-if="config.subscriptionType === 'metered' && user.data.meta.usages" class="mt-1 text-center leading-3">
+            <div
+                v-if="config.subscriptionType === 'metered' && user.data.meta.usages"
+                class="mt-1 text-center leading-3"
+            >
                 <b class="text-theme block text-xs font-bold leading-3">
                     {{ user.data.meta.usages.costEstimate }}
                 </b>
@@ -24,7 +30,9 @@
                     :class="[{ 'router-link-active': isSection(item.section) }, item.icon]"
                     class="mb-1.5 block"
                 >
-                    <div class="button-icon text-theme inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground">
+                    <div
+                        class="button-icon text-theme inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
+                    >
                         <hard-drive-icon v-if="item.icon === 'home'" size="20" />
                         <settings-icon v-if="item.icon === 'settings'" size="20" />
                         <user-icon v-if="item.icon === 'user'" size="20" />
@@ -34,7 +42,9 @@
 
             <!--Toggle Dark/Light mode-->
             <div @click="$store.dispatch('toggleThemeMode')" :title="$t('dark_mode_toggle')" class="mt-6 block">
-                <div class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground">
+                <div
+                    class="button-icon inline-block cursor-pointer rounded-xl p-3 hover:bg-light-300 dark:hover:bg-4x-dark-foreground"
+                >
                     <sun-icon v-if="isDarkMode" size="20" />
                     <moon-icon v-if="!isDarkMode" size="20" />
                 </div>
@@ -57,7 +67,16 @@
 <script>
 import MemberAvatar from '../FilesView/MemberAvatar'
 import { mapGetters } from 'vuex'
-import { MoonIcon, SunIcon, HardDriveIcon, SettingsIcon, Trash2Icon, UserIcon, PowerIcon, ShareIcon } from 'vue-feather-icons'
+import {
+    MoonIcon,
+    SunIcon,
+    HardDriveIcon,
+    SettingsIcon,
+    Trash2Icon,
+    UserIcon,
+    PowerIcon,
+    ShareIcon,
+} from 'vue-feather-icons'
 
 export default {
     name: 'SidebarNavigation',
diff --git a/resources/js/components/Spotlight/FilterSuggestion.vue b/resources/js/components/Spotlight/FilterSuggestion.vue
index 8e0d2d22..e2dc288a 100644
--- a/resources/js/components/Spotlight/FilterSuggestion.vue
+++ b/resources/js/components/Spotlight/FilterSuggestion.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="flex cursor-pointer items-center py-2">
-        <span class="dark-text-theme rounded-lg bg-light-background py-1 px-2 text-sm font-bold dark:bg-4x-dark-foreground"> {{ keyword }} + {{ $t('space') }} </span>
+        <span
+            class="dark-text-theme rounded-lg bg-light-background py-1 px-2 text-sm font-bold dark:bg-4x-dark-foreground"
+        >
+            {{ keyword }} + {{ $t('space') }}
+        </span>
         <p class="ml-3 text-sm font-semibold text-gray-500">
             {{ description }}
         </p>
diff --git a/resources/js/components/Spotlight/Spotlight.vue b/resources/js/components/Spotlight/Spotlight.vue
index 06bc2ebe..10449c2e 100644
--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -1,17 +1,33 @@
 <template>
-    <div v-if="isVisible" @keyup.esc="exitSpotlight" @click.exact.self="exitSpotlight" tabindex="-1" class="fixed z-50 h-full w-full left-0 right-0 bottom-0 top-0 z-50 md:absolute dark:bg-dark-background bg-white md:bg-dark-background dark:md:bg-opacity-[0.45] md:bg-opacity-[0.35]">
-        <div class="relative z-50 mx-auto w-full overflow-y-auto md:mt-8 md:max-w-xl md:rounded-xl 2xl:mt-20 md:bg-white dark:md:bg-2x-dark-foreground md:shadow-xl">
+    <div
+        v-if="isVisible"
+        @keyup.esc="exitSpotlight"
+        @click.exact.self="exitSpotlight"
+        tabindex="-1"
+        class="fixed left-0 right-0 bottom-0 top-0 z-50 z-50 h-full w-full bg-white dark:bg-dark-background md:absolute md:bg-dark-background md:bg-opacity-[0.35] dark:md:bg-opacity-[0.45]"
+    >
+        <div
+            class="relative z-50 mx-auto w-full overflow-y-auto md:mt-8 md:max-w-xl md:rounded-xl md:bg-white md:shadow-xl dark:md:bg-2x-dark-foreground 2xl:mt-20"
+        >
             <!--Query bar-->
             <div class="z-50 mx-auto flex items-center px-5 py-4">
                 <div class="relative mr-4">
                     <div v-if="isLoading" class="spinner-icon origin-center translate-y-2.5 scale-50 transform">
                         <Spinner />
                     </div>
-                    <search-icon :class="{ 'opacity-0': isLoading }" size="22" class="magnify dark-text-theme text-theme vue-feather" />
+                    <search-icon
+                        :class="{ 'opacity-0': isLoading }"
+                        size="22"
+                        class="magnify dark-text-theme text-theme vue-feather"
+                    />
                 </div>
 
                 <!--Filter-->
-                <div v-if="activeFilter" @click="removeFilter" class="mr-3 flex cursor-pointer items-center rounded-lg bg-light-background px-2 py-1 dark:bg-4x-dark-foreground">
+                <div
+                    v-if="activeFilter"
+                    @click="removeFilter"
+                    class="mr-3 flex cursor-pointer items-center rounded-lg bg-light-background px-2 py-1 dark:bg-4x-dark-foreground"
+                >
                     <b class="dark-text-theme -mt-0.5 pr-1.5 text-sm font-bold">
                         {{ activeFilter }}
                     </b>
@@ -44,12 +60,21 @@
             </div>
 
             <!--Show tips-->
-            <div v-if="isEmptyQuery && !activeFilter && ! $isThisRoute($route, ['Public'])" class="relative z-50 px-4 pb-4">
+            <div
+                v-if="isEmptyQuery && !activeFilter && !$isThisRoute($route, ['Public'])"
+                class="relative z-50 px-4 pb-4"
+            >
                 <CategoryName>
                     {{ $t('Suggested Filters') }}
                 </CategoryName>
 
-                <FilterSuggestion v-for="filter in filters" :key="filter.slug" :keyword="filter.keyword" :description="filter.description" @click.native="setFilter(filter.slug)" />
+                <FilterSuggestion
+                    v-for="filter in filters"
+                    :key="filter.slug"
+                    :keyword="filter.keyword"
+                    :description="filter.description"
+                    @click.native="setFilter(filter.slug)"
+                />
             </div>
 
             <!--Results-->
@@ -68,30 +93,126 @@
                                 'rounded-xl bg-light-background dark:bg-4x-dark-foreground': i === index,
                             }"
                         >
-                            <settings-icon v-if="['AppOthers', 'Profile', 'Password'].includes(result.action.value)" size="18" class="vue-feather text-theme" />
-                            <credit-card-icon v-if="result.action.value === 'AppPayments'" size="18" class="vue-feather text-theme" />
-                            <home-icon v-if="result.action.value === 'Files'" size="18" class="vue-feather text-theme" />
-                            <trash2-icon v-if="result.action.value === 'Trash'" size="18" class="vue-feather text-theme" />
-                            <database-icon v-if="['CreateFixedPlan', 'CreateMeteredPlan'].includes(result.action.value)" size="18" class="vue-feather text-theme" />
-                            <user-plus-icon v-if="result.action.value === 'UserCreate'" size="18" class="vue-feather text-theme" />
-                            <users-icon v-if="['TeamFolders', 'Users'].includes(result.action.value)" size="18" class="vue-feather text-theme" />
-                            <user-check-icon v-if="result.action.value === 'SharedWithMe'" size="18" class="vue-feather text-theme" />
-                            <link-icon v-if="result.action.value === 'MySharedItems'" size="18" class="vue-feather text-theme" />
-                            <upload-cloud-icon v-if="result.action.value === 'RecentUploads'" size="18" class="vue-feather text-theme" />
-                            <file-text-icon v-if="['Invoices', 'Invoice'].includes(result.action.value)" size="18" class="vue-feather text-theme" />
-                            <database-icon v-if="result.action.value === 'Plans'" size="18" class="vue-feather text-theme" />
-                            <dollar-sign-icon v-if="['Subscriptions', 'Billing'].includes(result.action.value)" size="18" class="vue-feather text-theme" />
-                            <globe-icon v-if="result.action.value === 'Language'" size="18" class="vue-feather text-theme" />
-                            <monitor-icon v-if="result.action.value === 'Pages'" size="18" class="vue-feather text-theme" />
-                            <box-icon v-if="result.action.value === 'Dashboard'" size="18" class="vue-feather text-theme" />
-                            <hard-drive-icon v-if="result.action.value === 'Storage'" size="18" class="vue-feather text-theme" />
-                            <moon-icon v-if="result.action.value === 'dark-mode'" size="18" class="vue-feather text-theme" />
-                            <maximize2-icon v-if="result.action.value === 'full-screen-mode'" size="18" class="vue-feather text-theme" />
-                            <power-icon v-if="result.action.value === 'log-out'" size="18" class="vue-feather text-theme" />
-                            <trash-icon v-if="result.action.value === 'empty-trash'" size="18" class="vue-feather text-theme" />
-                            <grid-icon v-if="result.action.value === 'toggle-grid-list'" size="18" class="vue-feather text-theme" />
-                            <smile-icon v-if="result.action.value === 'toggle-emoji'" size="18" class="vue-feather text-theme" />
-                            <folder-plus-icon v-if="result.action.value === 'create-team-folder'" size="18" class="vue-feather text-theme" />
+                            <settings-icon
+                                v-if="['AppOthers', 'Profile', 'Password'].includes(result.action.value)"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <credit-card-icon
+                                v-if="result.action.value === 'AppPayments'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <home-icon
+                                v-if="result.action.value === 'Files'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <trash2-icon
+                                v-if="result.action.value === 'Trash'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <database-icon
+                                v-if="['CreateFixedPlan', 'CreateMeteredPlan'].includes(result.action.value)"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <user-plus-icon
+                                v-if="result.action.value === 'UserCreate'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <users-icon
+                                v-if="['TeamFolders', 'Users'].includes(result.action.value)"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <user-check-icon
+                                v-if="result.action.value === 'SharedWithMe'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <link-icon
+                                v-if="result.action.value === 'MySharedItems'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <upload-cloud-icon
+                                v-if="result.action.value === 'RecentUploads'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <file-text-icon
+                                v-if="['Invoices', 'Invoice'].includes(result.action.value)"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <database-icon
+                                v-if="result.action.value === 'Plans'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <dollar-sign-icon
+                                v-if="['Subscriptions', 'Billing'].includes(result.action.value)"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <globe-icon
+                                v-if="result.action.value === 'Language'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <monitor-icon
+                                v-if="result.action.value === 'Pages'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <box-icon
+                                v-if="result.action.value === 'Dashboard'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <hard-drive-icon
+                                v-if="result.action.value === 'Storage'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <moon-icon
+                                v-if="result.action.value === 'dark-mode'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <maximize2-icon
+                                v-if="result.action.value === 'full-screen-mode'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <power-icon
+                                v-if="result.action.value === 'log-out'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <trash-icon
+                                v-if="result.action.value === 'empty-trash'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <grid-icon
+                                v-if="result.action.value === 'toggle-grid-list'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <smile-icon
+                                v-if="result.action.value === 'toggle-emoji'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
+                            <folder-plus-icon
+                                v-if="result.action.value === 'create-team-folder'"
+                                size="18"
+                                class="vue-feather text-theme"
+                            />
 
                             <b class="ml-3.5 text-sm font-bold">
                                 {{ result.title }}
@@ -122,7 +243,10 @@
                     >
                         <MemberAvatar :is-border="false" :size="44" :member="result" />
                         <div class="ml-3">
-                            <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                            <b
+                                class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                style="max-width: 155px"
+                            >
                                 {{ result.data.attributes.name }}
                             </b>
                             <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -145,12 +269,17 @@
 
                     <!--Keyboard shortcut hint-->
                     <div v-if="!$isMobile()" class="absolute right-4 top-1/2 -translate-y-1/2 transform">
-                        <span class="text-xs text-gray-400">{{ i + actions.length === 0 ? '↵' : metaKeyIcon + (i + actions.length) }}</span>
+                        <span class="text-xs text-gray-400">{{
+                            i + actions.length === 0 ? '↵' : metaKeyIcon + (i + actions.length)
+                        }}</span>
                     </div>
                 </div>
 
                 <!--Show Empty message-->
-                <span v-if="results.length === 0 && actions.length === 0" class="p-2.5 text-sm text-gray-700 dark:text-gray-400">
+                <span
+                    v-if="results.length === 0 && actions.length === 0"
+                    class="p-2.5 text-sm text-gray-700 dark:text-gray-400"
+                >
                     {{ $t('messages.nothing_was_found') }}
                 </span>
             </div>
@@ -172,7 +301,7 @@ import KeyboardHints from './KeyboardHints'
 import axios from 'axios'
 import { debounce } from 'lodash'
 import {
-	FolderPlusIcon,
+    FolderPlusIcon,
     SmileIcon,
     BoxIcon,
     CreditCardIcon,
@@ -203,7 +332,7 @@ import { mapGetters } from 'vuex'
 export default {
     name: 'Spotlight',
     components: {
-		FolderPlusIcon,
+        FolderPlusIcon,
         SmileIcon,
         KeyboardHints,
         CreditCardIcon,
@@ -381,31 +510,31 @@ export default {
                         value: 'Billing',
                     },
                 },
-				{
-					title: this.$t('Empty Your Trash'),
-					action: {
-						type: 'function',
-						value: 'empty-trash',
-					},
-				},
-				{
-					title: this.$t('Log Out'),
-					action: {
-						type: 'function',
-						value: 'log-out',
-					},
-				},
+                {
+                    title: this.$t('Empty Your Trash'),
+                    action: {
+                        type: 'function',
+                        value: 'empty-trash',
+                    },
+                },
+                {
+                    title: this.$t('Log Out'),
+                    action: {
+                        type: 'function',
+                        value: 'log-out',
+                    },
+                },
             ]
 
-			let createList = [
-				{
-					title: this.$t('Create Team Folder'),
-					action: {
-						type: 'function',
-						value: 'create-team-folder',
-					},
-				},
-			]
+            let createList = [
+                {
+                    title: this.$t('Create Team Folder'),
+                    action: {
+                        type: 'function',
+                        value: 'create-team-folder',
+                    },
+                },
+            ]
 
             let functionList = [
                 {
@@ -442,12 +571,12 @@ export default {
                 })
             }
 
-			// Return commands for public page
-			if (this.$isThisRoute(this.$route, ['Public'])) {
-				return [].concat.apply([], [functionList])
-			}
+            // Return commands for public page
+            if (this.$isThisRoute(this.$route, ['Public'])) {
+                return [].concat.apply([], [functionList])
+            }
 
-			// Return commands for logged admin
+            // Return commands for logged admin
             if (this.user.data.attributes.role === 'admin') {
                 // Available only for fixed subscription
                 if (this.config.subscriptionType === 'fixed') {
@@ -461,7 +590,10 @@ export default {
                 }
 
                 // Available only when is metered billing and plan doesnt exist or when is fixed billing
-                if ((this.config.subscriptionType === 'metered' && !this.config.isCreatedMeteredPlan) || this.config.subscriptionType === 'fixed') {
+                if (
+                    (this.config.subscriptionType === 'metered' && !this.config.isCreatedMeteredPlan) ||
+                    this.config.subscriptionType === 'fixed'
+                ) {
                     adminActions.push({
                         title: this.$t('Create Plan'),
                         action: {
@@ -471,11 +603,14 @@ export default {
                     })
                 }
 
-                return [].concat.apply([], [functionList, createList, userSettings, fileLocations, adminLocations, adminActions])
+                return [].concat.apply(
+                    [],
+                    [functionList, createList, userSettings, fileLocations, adminLocations, adminActions]
+                )
             }
 
-			// Return commands for logged user
-			if (this.user.data.attributes.role === 'user') {
+            // Return commands for logged user
+            if (this.user.data.attributes.role === 'user') {
                 return [].concat.apply([], [functionList, createList, userSettings, fileLocations])
             }
         },
@@ -533,7 +668,9 @@ export default {
 
             // Browse actions
             if (!this.activeFilter) {
-                this.actions = this.actionList.filter((el) => el.title.toLowerCase().indexOf(formattedQuery) > -1).slice(0, 3)
+                this.actions = this.actionList
+                    .filter((el) => el.title.toLowerCase().indexOf(formattedQuery) > -1)
+                    .slice(0, 3)
             }
 
             this.findResult(formattedQuery)
@@ -623,16 +760,15 @@ export default {
         openItem(file) {
             // Show folder
             if (file.data.type === 'folder') {
-
-				if (this.$isThisRoute(this.$route, ['Public'])) {
-					this.$router.push({
-						name: 'Public',
-						params: {
-							token: this.sharedDetail.data.attributes.token,
-							id: file.data.id,
-						},
-					})
-				} else if (file.data.attributes.isTeamFolder) {
+                if (this.$isThisRoute(this.$route, ['Public'])) {
+                    this.$router.push({
+                        name: 'Public',
+                        params: {
+                            token: this.sharedDetail.data.attributes.token,
+                            id: file.data.id,
+                        },
+                    })
+                } else if (file.data.attributes.isTeamFolder) {
                     if (file.data.relationships.owner.data.id === this.user.data.id) {
                         this.$router.push({
                             name: 'TeamFolders',
@@ -657,7 +793,10 @@ export default {
 
                     events.$emit('file-preview:show')
                 } else {
-                    this.$downloadFile(file.data.attributes.file_url, file.data.attributes.name + '.' + file.data.attributes.mimetype)
+                    this.$downloadFile(
+                        file.data.attributes.file_url,
+                        file.data.attributes.name + '.' + file.data.attributes.mimetype
+                    )
                 }
             }
 
@@ -671,8 +810,8 @@ export default {
 
             // Get route
             let route = this.$store.getters.sharedDetail
-				? `/api/browse/search/${this.$router.currentRoute.params.token}`
-				: '/api/browse/search'
+                ? `/api/browse/search/${this.$router.currentRoute.params.token}`
+                : '/api/browse/search'
 
             axios
                 .get(`${route}?filter=${this.activeFilter}`, {
diff --git a/resources/js/components/Subscription/FixedTransactionRow.vue b/resources/js/components/Subscription/FixedTransactionRow.vue
index 7659f727..ab351dca 100644
--- a/resources/js/components/Subscription/FixedTransactionRow.vue
+++ b/resources/js/components/Subscription/FixedTransactionRow.vue
@@ -9,7 +9,10 @@
             <div v-if="row.data.relationships.user" class="flex items-center">
                 <MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
                 <div class="ml-3 pr-10">
-                    <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                    <b
+                        class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                        style="max-width: 155px"
+                    >
                         {{ row.data.relationships.user.data.attributes.name }}
                     </b>
                     <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -38,7 +41,11 @@
         </td>
         <td class="px-3 md:px-1">
             <div class="w-28">
-                <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
+                <img
+                    class="inline-block max-h-5"
+                    :src="$getPaymentLogo(row.data.attributes.driver)"
+                    :alt="row.data.attributes.driver"
+                />
             </div>
         </td>
         <td class="pl-3 text-right md:pl-1">
diff --git a/resources/js/components/Subscription/MeteredTransactionRow.vue b/resources/js/components/Subscription/MeteredTransactionRow.vue
index abcd3152..cb03f055 100644
--- a/resources/js/components/Subscription/MeteredTransactionRow.vue
+++ b/resources/js/components/Subscription/MeteredTransactionRow.vue
@@ -9,7 +9,10 @@
             <div v-if="row.data.relationships.user" class="flex items-center">
                 <MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
                 <div class="ml-3 pr-10">
-                    <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                    <b
+                        class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                        style="max-width: 155px"
+                    >
                         {{ row.data.relationships.user.data.attributes.name }}
                     </b>
                     <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -43,7 +46,11 @@
         </td>
         <td class="px-3 md:px-1">
             <div class="w-28">
-                <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
+                <img
+                    class="inline-block max-h-5"
+                    :src="$getPaymentLogo(row.data.attributes.driver)"
+                    :alt="row.data.attributes.driver"
+                />
             </div>
         </td>
         <td class="pl-3 text-right md:pl-1">
diff --git a/resources/js/components/Subscription/PaymentCard.vue b/resources/js/components/Subscription/PaymentCard.vue
index 9a1e14fd..173d1db3 100644
--- a/resources/js/components/Subscription/PaymentCard.vue
+++ b/resources/js/components/Subscription/PaymentCard.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="flex items-center justify-between rounded-lg bg-light-background py-3 px-2 dark:bg-2x-dark-foreground md:px-4">
+    <div
+        class="flex items-center justify-between rounded-lg bg-light-background py-3 px-2 dark:bg-2x-dark-foreground md:px-4"
+    >
         <div class="flex items-center">
             <img :src="`/assets/gateways/${card.data.attributes.brand}.svg`" alt="" class="mr-3 h-5 rounded" />
             <b class="whitespace-nowrap text-sm font-bold capitalize leading-none">
@@ -26,7 +28,9 @@ export default {
         deleteCreditCard(id) {
             events.$emit('confirm:open', {
                 title: this.$t('Are you sure you want to delete your credit card?'),
-                message: this.$t('We will no longer settle your payments automatically and you will have to fund your account for the next payments.'),
+                message: this.$t(
+                    'We will no longer settle your payments automatically and you will have to fund your account for the next payments.'
+                ),
                 action: {
                     id: id,
                     operation: 'delete-credit-card',
diff --git a/resources/js/components/Subscription/PlanDetail.vue b/resources/js/components/Subscription/PlanDetail.vue
index 89561265..61018406 100644
--- a/resources/js/components/Subscription/PlanDetail.vue
+++ b/resources/js/components/Subscription/PlanDetail.vue
@@ -10,7 +10,9 @@
             <b class="flex-1 pl-4 text-left text-lg">
                 {{ plan.data.attributes.name }}
             </b>
-            <span class="text-theme bg-theme-100 ml-9 inline-block whitespace-nowrap rounded-xl py-1 px-2 text-sm font-extrabold">
+            <span
+                class="text-theme bg-theme-100 ml-9 inline-block whitespace-nowrap rounded-xl py-1 px-2 text-sm font-extrabold"
+            >
                 {{ plan.data.attributes.price }} /
                 {{ $t(`interval.${plan.data.attributes.interval}`) }}
             </span>
diff --git a/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue b/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
index ae37368a..e099759c 100644
--- a/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
+++ b/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
@@ -6,11 +6,19 @@
         <div v-if="isPaymentOptionPage">
             <PopupContent>
                 <!--Stripe implementation-->
-                <PaymentMethod v-if="config.isStripe" driver="stripe" :description="$t('Pay by your credit card or Apple Pay')">
+                <PaymentMethod
+                    v-if="config.isStripe"
+                    driver="stripe"
+                    :description="$t('Pay by your credit card or Apple Pay')"
+                >
                     <div v-if="stripe.isGettingCheckoutLink" class="translate-y-3 scale-50 transform">
                         <Spinner />
                     </div>
-                    <span @click="payByStripe" :class="{ 'opacity-0': stripe.isGettingCheckoutLink }" class="text-theme cursor-pointer text-sm font-bold">
+                    <span
+                        @click="payByStripe"
+                        :class="{ 'opacity-0': stripe.isGettingCheckoutLink }"
+                        class="text-theme cursor-pointer text-sm font-bold"
+                    >
                         {{ $t('Select') }}
                     </span>
                 </PaymentMethod>
@@ -22,11 +30,19 @@
                         'mb-2 rounded-xl bg-light-background px-4 dark:bg-2x-dark-foreground': paypal.isMethodsLoaded,
                     }"
                 >
-                    <PaymentMethod @click.native="pickedPaymentMethod('paypal')" driver="paypal" :description="$t('Available PayPal Credit, Debit or Credit Card.')">
+                    <PaymentMethod
+                        @click.native="pickedPaymentMethod('paypal')"
+                        driver="paypal"
+                        :description="$t('Available PayPal Credit, Debit or Credit Card.')"
+                    >
                         <div v-if="paypal.isMethodLoading" class="translate-y-3 scale-50 transform">
                             <Spinner />
                         </div>
-                        <span v-if="!paypal.isMethodsLoaded" :class="{ 'opacity-0': paypal.isMethodLoading }" class="text-theme cursor-pointer text-sm font-bold">
+                        <span
+                            v-if="!paypal.isMethodsLoaded"
+                            :class="{ 'opacity-0': paypal.isMethodLoading }"
+                            class="text-theme cursor-pointer text-sm font-bold"
+                        >
                             {{ $t('Select') }}
                         </span>
                     </PaymentMethod>
@@ -36,7 +52,11 @@
                 </div>
 
                 <!--Paystack implementation-->
-                <PaymentMethod v-if="config.isPaystack" driver="paystack" :description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')">
+                <PaymentMethod
+                    v-if="config.isPaystack"
+                    driver="paystack"
+                    :description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')"
+                >
                     <paystack
                         v-if="user && config"
                         :channels="['bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']"
@@ -67,18 +87,24 @@
         <!--Select Payment Plans-->
         <div v-if="!isPaymentOptionPage">
             <PopupContent v-if="plans">
-
-				<InfoBox v-if="plans.data.length === 0" class="!mb-0">
-					<p>There isn't any plan yet.</p>
-				</InfoBox>
+                <InfoBox v-if="plans.data.length === 0" class="!mb-0">
+                    <p>There isn't any plan yet.</p>
+                </InfoBox>
 
                 <!--Toggle yearly billing-->
                 <div v-if="hasYearlyPlans.length > 0" class="mb-2 px-5 text-right">
-                    <label :class="{ 'text-gray-400': !isSelectedYearlyPlans }" class="cursor-pointer text-xs font-bold">
+                    <label
+                        :class="{ 'text-gray-400': !isSelectedYearlyPlans }"
+                        class="cursor-pointer text-xs font-bold"
+                    >
                         {{ $t('Billed Annually') }}
                     </label>
                     <div class="relative inline-block w-12 select-none align-middle">
-                        <SwitchInput class="scale-75 transform" v-model="isSelectedYearlyPlans" :state="isSelectedYearlyPlans" />
+                        <SwitchInput
+                            class="scale-75 transform"
+                            v-model="isSelectedYearlyPlans"
+                            :state="isSelectedYearlyPlans"
+                        />
                     </div>
                 </div>
 
@@ -88,7 +114,9 @@
                         v-for="(plan, i) in plans.data"
                         :plan="plan"
                         :key="plan.data.id"
-                        v-if="plan.data.attributes.interval === intervalPlanType && userSubscribedPlanId !== plan.data.id"
+                        v-if="
+                            plan.data.attributes.interval === intervalPlanType && userSubscribedPlanId !== plan.data.id
+                        "
                         :is-selected="selectedPlan && selectedPlan.data.id === plan.data.id"
                         @click.native="selectPlan(plan)"
                     />
@@ -97,8 +125,16 @@
 
             <!--Actions-->
             <PopupActions>
-                <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
-                <ButtonBase class="w-full" v-if="plans.data.length !== 0" :button-style="buttonStyle" @click.native="isPaymentOptionPage = true">{{ $t('Upgrade Account') }} </ButtonBase>
+                <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary"
+                    >{{ $t('popup_move_item.cancel') }}
+                </ButtonBase>
+                <ButtonBase
+                    class="w-full"
+                    v-if="plans.data.length !== 0"
+                    :button-style="buttonStyle"
+                    @click.native="isPaymentOptionPage = true"
+                    >{{ $t('Upgrade Account') }}
+                </ButtonBase>
             </PopupActions>
         </div>
     </PopupWrapper>
@@ -119,12 +155,12 @@ import { mapGetters } from 'vuex'
 import { events } from '../../bus'
 import axios from 'axios'
 import Spinner from '../FilesView/Spinner'
-import InfoBox from "../Others/Forms/InfoBox";
+import InfoBox from '../Others/Forms/InfoBox'
 
 export default {
     name: 'SelectPlanSubscriptionPopup',
     components: {
-		InfoBox,
+        InfoBox,
         Spinner,
         PaymentMethod,
         paystack,
@@ -150,7 +186,11 @@ export default {
             return this.selectedPlan ? 'theme' : 'secondary'
         },
         userSubscribedPlanId() {
-            return this.user && this.user.data.relationships.subscription && this.user.data.relationships.subscription.data.relationships.plan.data.id
+            return (
+                this.user &&
+                this.user.data.relationships.subscription &&
+                this.user.data.relationships.subscription.data.relationships.plan.data.id
+            )
         },
         hasYearlyPlans() {
             return this.plans.data.filter((plan) => plan.data.attributes.interval === 'year')
diff --git a/resources/js/components/Subscription/UserBalance.vue b/resources/js/components/Subscription/UserBalance.vue
index c4e90362..d37ea83e 100644
--- a/resources/js/components/Subscription/UserBalance.vue
+++ b/resources/js/components/Subscription/UserBalance.vue
@@ -9,9 +9,27 @@
         </b>
 
         <!-- Make payment form -->
-        <ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
-            <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Amount" :rules="`required|min_value:${user.data.meta.totalDebt.amount}`">
-                <AppInputText :description="$t('The amount will be increased as soon as we register your charge from payment gateway.')" :error="errors[0]" :is-last="true">
+        <ValidationObserver
+            ref="fundAccount"
+            @submit.prevent="makePayment"
+            v-slot="{ invalid }"
+            tag="form"
+            class="mt-6"
+        >
+            <ValidationProvider
+                tag="div"
+                v-slot="{ errors }"
+                mode="passive"
+                name="Amount"
+                :rules="`required|min_value:${user.data.meta.totalDebt.amount}`"
+            >
+                <AppInputText
+                    :description="
+                        $t('The amount will be increased as soon as we register your charge from payment gateway.')
+                    "
+                    :error="errors[0]"
+                    :is-last="true"
+                >
                     <div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
                         <input
                             v-model="chargeAmount"
diff --git a/resources/js/components/Subscription/UserBillingAlerts.vue b/resources/js/components/Subscription/UserBillingAlerts.vue
index 6f7af884..b92940cd 100644
--- a/resources/js/components/Subscription/UserBillingAlerts.vue
+++ b/resources/js/components/Subscription/UserBillingAlerts.vue
@@ -13,7 +13,12 @@
                     size="12"
                     class="vue-feather ml-2 -translate-y-0.5 transform cursor-pointer"
                 />
-                <trash2-icon v-if="showUpdateBillingAlertForm" @click="deleteBillingAlert" size="12" class="vue-feather ml-2 -translate-y-0.5 transform cursor-pointer" />
+                <trash2-icon
+                    v-if="showUpdateBillingAlertForm"
+                    @click="deleteBillingAlert"
+                    size="12"
+                    class="vue-feather ml-2 -translate-y-0.5 transform cursor-pointer"
+                />
             </b>
 
             <b class="block text-sm text-gray-400">
@@ -21,9 +26,24 @@
             </b>
         </div>
 
-        <ValidationObserver v-if="showUpdateBillingAlertForm" ref="updatebillingAlertForm" @submit.prevent="updateBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
+        <ValidationObserver
+            v-if="showUpdateBillingAlertForm"
+            ref="updatebillingAlertForm"
+            @submit.prevent="updateBillingAlert"
+            v-slot="{ invalid }"
+            tag="form"
+            class="mt-6"
+        >
             <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
-                <AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
+                <AppInputText
+                    :description="
+                        $t(
+                            'You will receive an email whenever your monthly balance reaches the specified amount above.'
+                        )
+                    "
+                    :error="errors[0]"
+                    :is-last="true"
+                >
                     <div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
                         <input
                             v-model="billingAlertAmount"
@@ -34,7 +54,13 @@
                             class="focus-border-theme input-dark"
                             :class="{ 'border-red': errors[0] }"
                         />
-                        <ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="w-full sm:w-auto">
+                        <ButtonBase
+                            :loadint="isSendingBillingAlert"
+                            :disabled="isSendingBillingAlert"
+                            type="submit"
+                            button-style="theme"
+                            class="w-full sm:w-auto"
+                        >
                             {{ $t('Update Alert') }}
                         </ButtonBase>
                     </div>
@@ -42,9 +68,24 @@
             </ValidationProvider>
         </ValidationObserver>
 
-        <ValidationObserver v-if="!user.data.relationships.alert" ref="billingAlertForm" @submit.prevent="setBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
+        <ValidationObserver
+            v-if="!user.data.relationships.alert"
+            ref="billingAlertForm"
+            @submit.prevent="setBillingAlert"
+            v-slot="{ invalid }"
+            tag="form"
+            class="mt-6"
+        >
             <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
-                <AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
+                <AppInputText
+                    :description="
+                        $t(
+                            'You will receive an email whenever your monthly balance reaches the specified amount above.'
+                        )
+                    "
+                    :error="errors[0]"
+                    :is-last="true"
+                >
                     <div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
                         <input
                             v-model="billingAlertAmount"
@@ -55,7 +96,13 @@
                             class="focus-border-theme input-dark"
                             :class="{ 'border-red': errors[0] }"
                         />
-                        <ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="w-full sm:w-auto">
+                        <ButtonBase
+                            :loadint="isSendingBillingAlert"
+                            :disabled="isSendingBillingAlert"
+                            type="submit"
+                            button-style="theme"
+                            class="w-full sm:w-auto"
+                        >
                             {{ $t('Set Alert') }}
                         </ButtonBase>
                     </div>
@@ -161,7 +208,9 @@ export default {
         deleteBillingAlert() {
             events.$emit('confirm:open', {
                 title: this.$t('Are you sure you want to delete your alert?'),
-                message: this.$t('You will no longer receive any notifications that your billing limit has been exceeded.'),
+                message: this.$t(
+                    'You will no longer receive any notifications that your billing limit has been exceeded.'
+                ),
                 action: {
                     id: this.user.data.relationships.alert.data.id,
                     operation: 'delete-billing-alert',
diff --git a/resources/js/components/Subscription/UserEditSubscription.vue b/resources/js/components/Subscription/UserEditSubscription.vue
index ad801c06..1de647aa 100644
--- a/resources/js/components/Subscription/UserEditSubscription.vue
+++ b/resources/js/components/Subscription/UserEditSubscription.vue
@@ -7,14 +7,27 @@
         <AppInputButton
             v-if="subscription.attributes.status !== 'cancelled'"
             :title="$t('Cancel Subscription')"
-            :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')"
+            :description="
+                $t(
+                    'You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.'
+                )
+            "
         >
-            <ButtonBase @click.native="cancelSubscriptionConfirmation" :loading="isCancelling" class="w-full sm:w-auto" button-style="secondary">
+            <ButtonBase
+                @click.native="cancelSubscriptionConfirmation"
+                :loading="isCancelling"
+                class="w-full sm:w-auto"
+                button-style="secondary"
+            >
                 {{ $t('Cancel Now') }}
             </ButtonBase>
         </AppInputButton>
 
-        <AppInputButton :title="$t('Upgrade or Downgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
+        <AppInputButton
+            :title="$t('Upgrade or Downgrade Plan')"
+            :description="$t('You can upgrade your plan at any time you want.')"
+            :is-last="true"
+        >
             <ButtonBase @click.native="$openUpgradeOptions" class="w-full sm:w-auto" button-style="secondary">
                 {{ $t('Change Plan') }}
             </ButtonBase>
@@ -57,7 +70,9 @@ export default {
         cancelSubscriptionConfirmation() {
             events.$emit('confirm:open', {
                 title: this.$t('Are you sure you want to cancel subscription?'),
-                message: this.$t("You'll continue to have access to the features you've paid for until the end of your billing cycle."),
+                message: this.$t(
+                    "You'll continue to have access to the features you've paid for until the end of your billing cycle."
+                ),
                 action: {
                     operation: 'cancel-subscription',
                 },
diff --git a/resources/js/components/Subscription/UserEmptySubscription.vue b/resources/js/components/Subscription/UserEmptySubscription.vue
index 0777c6fd..2c18542c 100644
--- a/resources/js/components/Subscription/UserEmptySubscription.vue
+++ b/resources/js/components/Subscription/UserEmptySubscription.vue
@@ -12,7 +12,13 @@
             {{ $t('Upgrade your account to get more.') }}
         </b>
 
-        <ButtonBase v-if="$store.getters.config.allowed_payments" @click.native="$openUpgradeOptions" type="submit" button-style="theme" class="mt-4 w-full">
+        <ButtonBase
+            v-if="$store.getters.config.allowed_payments"
+            @click.native="$openUpgradeOptions"
+            type="submit"
+            button-style="theme"
+            class="mt-4 w-full"
+        >
             {{ $t('Upgrade Your Account') }}
         </ButtonBase>
     </div>
diff --git a/resources/js/components/Subscription/UserFailedPayments.vue b/resources/js/components/Subscription/UserFailedPayments.vue
index baf7d18a..f363e76c 100644
--- a/resources/js/components/Subscription/UserFailedPayments.vue
+++ b/resources/js/components/Subscription/UserFailedPayments.vue
@@ -1,13 +1,22 @@
 <template>
-    <div v-if="user.data.relationships.failedPayments && user.data.relationships.failedPayments.data.length > 0" class="card shadow-card">
+    <div
+        v-if="user.data.relationships.failedPayments && user.data.relationships.failedPayments.data.length > 0"
+        class="card shadow-card"
+    >
         <FormLabel icon="frown">
             {{ $t('Failed Payments') }}
         </FormLabel>
 
-        <b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl"> -{{ user.data.meta.totalDebt.formatted }} </b>
+        <b class="-mt-3 mb-0.5 block text-2xl font-extrabold sm:text-3xl">
+            -{{ user.data.meta.totalDebt.formatted }}
+        </b>
 
         <b class="mb-3 mb-5 block text-sm text-gray-400">
-            {{ $t("We are unable to charge your usage. Please register new credit card or fund your account with sufficient amount and we'll give it another try!") }}
+            {{
+                $t(
+                    "We are unable to charge your usage. Please register new credit card or fund your account with sufficient amount and we'll give it another try!"
+                )
+            }}
         </b>
 
         <!--Failed Payments-->
diff --git a/resources/js/components/Subscription/UserStoredPaymentMethods.vue b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
index f1b6d928..66495a00 100644
--- a/resources/js/components/Subscription/UserStoredPaymentMethods.vue
+++ b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
@@ -6,7 +6,12 @@
 
         <!-- User has registered payment method -->
         <div v-if="hasPaymentMethod">
-            <b v-if="config.subscriptionType === 'metered' && user.data.relationships.balance.data.attributes.balance > 0" class="mb-3 mb-5 block text-sm">
+            <b
+                v-if="
+                    config.subscriptionType === 'metered' && user.data.relationships.balance.data.attributes.balance > 0
+                "
+                class="mb-3 mb-5 block text-sm"
+            >
                 {{
                     $t('credit_to_auto_withdraw', {
                         credit: user.data.relationships.balance.data.attributes.formatted,
@@ -44,7 +49,12 @@
                 <div id="payment-element">
                     <!-- Elements will create form elements here -->
                 </div>
-                <ButtonBase :loading="stripe.storingStripePaymentMethod" type="submit" button-style="theme" class="mt-4 w-full">
+                <ButtonBase
+                    :loading="stripe.storingStripePaymentMethod"
+                    type="submit"
+                    button-style="theme"
+                    class="mt-4 w-full"
+                >
                     {{ $t('Store My Credit Card') }}
                 </ButtonBase>
                 <div id="error-message">
diff --git a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
index 6ff96cf8..5880c760 100644
--- a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
@@ -4,7 +4,12 @@
             {{ $t('Transactions') }}
         </FormLabel>
 
-        <DatatableWrapper class="overflow-x-auto" api="/api/subscriptions/transactions" :paginator="true" :columns="columns">
+        <DatatableWrapper
+            class="overflow-x-auto"
+            api="/api/subscriptions/transactions"
+            :paginator="true"
+            :columns="columns"
+        >
             <template slot-scope="{ row }">
                 <FixedTransactionRow :row="row" />
             </template>
@@ -36,7 +41,9 @@ export default {
     },
     computed: {
         columns() {
-            return this.$store.getters.transactionColumns.filter((column) => !['type', 'user_id'].includes(column.field))
+            return this.$store.getters.transactionColumns.filter(
+                (column) => !['type', 'user_id'].includes(column.field)
+            )
         },
     },
 }
diff --git a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
index 67a79ac8..8386f190 100644
--- a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
@@ -10,7 +10,10 @@
                 <MeteredTransactionRow :row="row" @showDetail="showTransactionDetail" />
 
                 <!--Transaction detail-->
-                <MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
+                <MeteredTransactionDetailRow
+                    v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id"
+                    :row="row"
+                />
             </template>
 
             <!--Empty page-->
diff --git a/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue b/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
index 439bef56..f198902a 100644
--- a/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
+++ b/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
@@ -4,8 +4,17 @@
             {{ $t('Update Payments') }}
         </FormLabel>
 
-        <AppInputButton :title="$t('Update your Payment Method')" :description="$t('You will be redirected to your payment provider to edit your payment method.')" :is-last="true">
-            <ButtonBase @click.native="updatePaymentMethod" :loading="isGeneratedUpdateLink" class="w-full sm:w-auto" button-style="theme">
+        <AppInputButton
+            :title="$t('Update your Payment Method')"
+            :description="$t('You will be redirected to your payment provider to edit your payment method.')"
+            :is-last="true"
+        >
+            <ButtonBase
+                @click.native="updatePaymentMethod"
+                :loading="isGeneratedUpdateLink"
+                class="w-full sm:w-auto"
+                button-style="theme"
+            >
                 {{ $t('Update Payments') }}
             </ButtonBase>
         </AppInputButton>
@@ -30,7 +39,11 @@ export default {
     },
     computed: {
         canShowForSubscription() {
-            return this.hasSubscription && !this.subscription.attributes.is_cancelled && ['paystack', 'paypal'].includes(this.subscription.attributes.driver)
+            return (
+                this.hasSubscription &&
+                !this.subscription.attributes.is_cancelled &&
+                ['paystack', 'paypal'].includes(this.subscription.attributes.driver)
+            )
         },
         subscription() {
             return this.$store.getters.user.data.relationships.subscription.data
diff --git a/resources/js/components/Teams/Components/TeamList.vue b/resources/js/components/Teams/Components/TeamList.vue
index c2fe1cbb..1a0a8fab 100644
--- a/resources/js/components/Teams/Components/TeamList.vue
+++ b/resources/js/components/Teams/Components/TeamList.vue
@@ -1,6 +1,11 @@
 <template>
     <ul>
-        <li v-if="Object.values(members).length > 0 && entry.id !== user.data.id" v-for="(entry, i) in members" :key="i" class="flex items-center py-2">
+        <li
+            v-if="Object.values(members).length > 0 && entry.id !== user.data.id"
+            v-for="(entry, i) in members"
+            :key="i"
+            class="flex items-center py-2"
+        >
             <!--Remove Member-->
             <div @click="deleteMember(entry)" class="-ml-1.5 cursor-pointer py-2 px-1 leading-none">
                 <x-icon size="14" class="vue-feather dark:text-gray-600" />
@@ -13,7 +18,10 @@
 
                 <!--Member-->
                 <div v-if="entry.type === 'member'" class="info">
-                    <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                    <b
+                        class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                        style="max-width: 155px"
+                    >
                         {{ entry.name }}
                     </b>
                     <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -23,7 +31,10 @@
 
                 <!--Invitation-->
                 <div v-if="entry.type === 'invitation'" class="info">
-                    <b class="block max-w-xs overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                    <b
+                        class="block max-w-xs overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                        style="max-width: 155px"
+                    >
                         {{ entry.email }}
                     </b>
                     <span v-if="entry.id" class="block text-xs text-gray-600 dark:text-gray-500">
diff --git a/resources/js/components/Teams/Components/TeamMembersButton.vue b/resources/js/components/Teams/Components/TeamMembersButton.vue
index 896f9ec3..abc416b5 100644
--- a/resources/js/components/Teams/Components/TeamMembersButton.vue
+++ b/resources/js/components/Teams/Components/TeamMembersButton.vue
@@ -5,7 +5,13 @@
                 {{ $t('Not selected') }}
             </span>
         </div>
-        <TeamMembersPreview v-else :folder="teamFolder" :limit="true" :avatar-size="size" class="justify-end md:justify-center" />
+        <TeamMembersPreview
+            v-else
+            :folder="teamFolder"
+            :limit="true"
+            :avatar-size="size"
+            class="justify-end md:justify-center"
+        />
     </div>
 </template>
 
diff --git a/resources/js/components/Teams/Components/TeamMembersPreview.vue b/resources/js/components/Teams/Components/TeamMembersPreview.vue
index 974b1798..283f2082 100644
--- a/resources/js/components/Teams/Components/TeamMembersPreview.vue
+++ b/resources/js/components/Teams/Components/TeamMembersPreview.vue
@@ -2,7 +2,12 @@
     <div class="team-folder">
         <span v-if="limit && membersCount > 3" class="member-count"> +{{ membersCount - 3 }} </span>
         <div class="members">
-            <div v-for="member in members" :key="member.data.id" :title="member.data.attributes.email" class="member-preview z-10">
+            <div
+                v-for="member in members"
+                :key="member.data.id"
+                :title="member.data.attributes.email"
+                class="member-preview z-10"
+            >
                 <MemberAvatar :is-border="true" :size="34" :member="member" />
             </div>
         </div>
@@ -20,10 +25,15 @@ export default {
     },
     computed: {
         membersCount() {
-            return this.folder.data.relationships.members.data.length + this.folder.data.relationships.invitations.data.length
+            return (
+                this.folder.data.relationships.members.data.length +
+                this.folder.data.relationships.invitations.data.length
+            )
         },
         members() {
-            let allMembers = this.folder.data.relationships.members.data.concat(this.folder.data.relationships.invitations.data)
+            let allMembers = this.folder.data.relationships.members.data.concat(
+                this.folder.data.relationships.invitations.data
+            )
 
             if (this.limit) {
                 return allMembers.slice(0, 3)
diff --git a/resources/js/components/Teams/CreateTeamFolderPopup.vue b/resources/js/components/Teams/CreateTeamFolderPopup.vue
index 6b9ab47e..aacfc1a2 100644
--- a/resources/js/components/Teams/CreateTeamFolderPopup.vue
+++ b/resources/js/components/Teams/CreateTeamFolderPopup.vue
@@ -11,7 +11,14 @@
             <!--Form to set team folder-->
             <ValidationObserver @submit.prevent="createTeamFolder" ref="teamFolderForm" v-slot="{ invalid }" tag="form">
                 <!--Set folder name-->
-                <ValidationProvider v-if="isNewFolderTeamCreation" tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    v-if="isNewFolderTeamCreation"
+                    tag="div"
+                    mode="passive"
+                    name="Name"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <AppInputText :title="$t('popup_create_folder.label')" :error="errors[0]">
                         <input
                             v-model="name"
@@ -50,16 +57,16 @@
 
                 <!--Member list-->
                 <ValidationProvider tag="div" mode="passive" name="Members" rules="required" v-slot="{ errors }">
-					<AppInputText :title="$t('Your Members')" :error="errors[0]" :is-last="true">
-						<span v-if="errors[0]" class="error-message" style="margin-top: -5px">
-							{{ $t('Please add at least one member.') }}
-						</span>
+                    <AppInputText :title="$t('Your Members')" :error="errors[0]" :is-last="true">
+                        <span v-if="errors[0]" class="error-message" style="margin-top: -5px">
+                            {{ $t('Please add at least one member.') }}
+                        </span>
 
-						<TeamList v-model="invitations" />
+                        <TeamList v-model="invitations" />
 
-						<p v-if="Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
-							{{ $t('Please add at least one member into your Team Folders.') }}
-						</p>
+                        <p v-if="Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
+                            {{ $t('Please add at least one member into your Team Folders.') }}
+                        </p>
                     </AppInputText>
                 </ValidationProvider>
 
@@ -71,8 +78,17 @@
 
         <!--Actions-->
         <PopupActions>
-            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
-            <ButtonBase class="w-full" @click.native="createTeamFolder" button-style="theme" :loading="isLoading" :disabled="isLoading">{{ popupSubmit }} </ButtonBase>
+            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary"
+                >{{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+                class="w-full"
+                @click.native="createTeamFolder"
+                button-style="theme"
+                :loading="isLoading"
+                :disabled="isLoading"
+                >{{ popupSubmit }}
+            </ButtonBase>
         </PopupActions>
     </PopupWrapper>
 </template>
diff --git a/resources/js/components/Teams/EditTeamFolderPopup.vue b/resources/js/components/Teams/EditTeamFolderPopup.vue
index 984ad6dd..0ed9867e 100644
--- a/resources/js/components/Teams/EditTeamFolderPopup.vue
+++ b/resources/js/components/Teams/EditTeamFolderPopup.vue
@@ -39,11 +39,16 @@
                 <!--Member list-->
                 <ValidationProvider tag="div" mode="passive" name="Members" v-slot="{ errors }">
                     <label class="input-label">{{ $t('Your Members') }}:</label>
-                    <span v-if="errors[0]" class="error-message" style="margin-top: -5px">{{ $t('Please add at least one member.') }}</span>
+                    <span v-if="errors[0]" class="error-message" style="margin-top: -5px">{{
+                        $t('Please add at least one member.')
+                    }}</span>
                     <TeamList v-model="members" />
                     <TeamList v-model="invitations" />
 
-                    <p v-if="Object.values(members).length === 0 && Object.values(invitations).length === 0" class="text-xs dark:text-gray-500">
+                    <p
+                        v-if="Object.values(members).length === 0 && Object.values(invitations).length === 0"
+                        class="text-xs dark:text-gray-500"
+                    >
                         {{ $t('Please add at least one member into your Team Folder.') }}
                     </p>
                 </ValidationProvider>
@@ -52,7 +57,9 @@
 
         <!--Actions-->
         <PopupActions>
-            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
+            <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary"
+                >{{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
             <ButtonBase
                 class="w-full"
                 @click.native="updateTeamFolder"
diff --git a/resources/js/components/UI/Bar.vue b/resources/js/components/UI/Bar.vue
index f656a4b8..73dfe9e0 100644
--- a/resources/js/components/UI/Bar.vue
+++ b/resources/js/components/UI/Bar.vue
@@ -1,6 +1,14 @@
 <template>
-    <div class="relative block cursor-pointer lg:mr-2 lg:w-2 2xl:w-3" :style="{ height: bar.percentage + '%' }" @mouseover="isVisible = true" @mouseleave="isVisible = false">
-        <div v-if="isVisible" class="absolute -top-4 z-10 ml-1.5 -translate-y-full -translate-x-1/2 transform rounded-lg bg-gray-800 py-2 px-3 shadow-lg dark:bg-white">
+    <div
+        class="relative block cursor-pointer lg:mr-2 lg:w-2 2xl:w-3"
+        :style="{ height: bar.percentage + '%' }"
+        @mouseover="isVisible = true"
+        @mouseleave="isVisible = false"
+    >
+        <div
+            v-if="isVisible"
+            class="absolute -top-4 z-10 ml-1.5 -translate-y-full -translate-x-1/2 transform rounded-lg bg-gray-800 py-2 px-3 shadow-lg dark:bg-white"
+        >
             <b class="mb-2 block whitespace-nowrap text-xs text-white dark:text-gray-800">
                 {{ bar.created_at }}
             </b>
diff --git a/resources/js/components/UI/BarChart.vue b/resources/js/components/UI/BarChart.vue
index ddde80ad..67991ad0 100644
--- a/resources/js/components/UI/BarChart.vue
+++ b/resources/js/components/UI/BarChart.vue
@@ -1,5 +1,7 @@
 <template>
-    <div class="grid h-20 grid-flow-col items-end gap-1 sm:h-28 sm:gap-2 lg:flex lg:items-end lg:justify-between lg:gap-0">
+    <div
+        class="grid h-20 grid-flow-col items-end gap-1 sm:h-28 sm:gap-2 lg:flex lg:items-end lg:justify-between lg:gap-0"
+    >
         <!--Data bar-->
         <Bar v-for="(item, i) in data" :key="i" :bar="item" />
 
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index 35079909..cec19672 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -288,6 +288,7 @@ const FunctionHelpers = {
                 return store.getters.currentFolder.data.attributes.name
             } else {
                 return {
+                    RequestUpload: this.$t('Home'),
                     RecentUploads: this.$t('Recent Uploads'),
                     MySharedItems: this.$t('sidebar.my_shared'),
                     Trash: this.$t('Trash'),
@@ -340,8 +341,12 @@ const FunctionHelpers = {
         Vue.prototype.$getPaymentLogo = function (driver) {
             return (
                 {
-                    paypal: store.getters.isDarkMode ? '/assets/payments/paypal-dark.svg' : '/assets/payments/paypal.svg',
-                    paystack: store.getters.isDarkMode ? '/assets/payments/paystack-dark.svg' : '/assets/payments/paystack.svg',
+                    paypal: store.getters.isDarkMode
+                        ? '/assets/payments/paypal-dark.svg'
+                        : '/assets/payments/paypal.svg',
+                    paystack: store.getters.isDarkMode
+                        ? '/assets/payments/paystack-dark.svg'
+                        : '/assets/payments/paystack.svg',
                     stripe: '/assets/payments/stripe.svg',
                     system: this.$getImage(store.getters.config.app_logo_horizontal),
                 }[driver] || this.$getImage(store.getters.config.app_logo_horizontal)
diff --git a/resources/js/helpers/itemHelpers.js b/resources/js/helpers/itemHelpers.js
index c325a18e..b3d588ae 100644
--- a/resources/js/helpers/itemHelpers.js
+++ b/resources/js/helpers/itemHelpers.js
@@ -53,7 +53,10 @@ const itemHelpers = {
 
             // Download single item
             if (item && item.data.type !== 'folder') {
-                Vue.prototype.$downloadFile(item.data.attributes.file_url, item.data.attributes.name + '.' + item.data.attributes.mimetype)
+                Vue.prototype.$downloadFile(
+                    item.data.attributes.file_url,
+                    item.data.attributes.name + '.' + item.data.attributes.mimetype
+                )
 
                 return
             }
@@ -69,7 +72,9 @@ const itemHelpers = {
         Vue.prototype.$dissolveTeamFolder = function (folder) {
             events.$emit('confirm:open', {
                 title: i18n.t('Are you sure you want to dissolve this team?'),
-                message: i18n.t('All team members will lose access to your files and existing folder will be moved into your "Files" section.'),
+                message: i18n.t(
+                    'All team members will lose access to your files and existing folder will be moved into your "Files" section.'
+                ),
                 action: {
                     id: folder.data.id,
                     operation: 'dissolve-team-folder',
@@ -80,7 +85,9 @@ const itemHelpers = {
         Vue.prototype.$detachMeFromTeamFolder = function (folder) {
             events.$emit('confirm:open', {
                 title: i18n.t('Are you sure you want to leave this team folder?'),
-                message: i18n.t("You will don't have access to the files and all your previously uploaded content will be part of this Team Folder you are leaving."),
+                message: i18n.t(
+                    "You will don't have access to the files and all your previously uploaded content will be part of this Team Folder you are leaving."
+                ),
                 action: {
                     id: folder.data.id,
                     operation: 'leave-team-folder',
diff --git a/resources/js/router.js b/resources/js/router.js
index 29a7eb77..0f258a1c 100644
--- a/resources/js/router.js
+++ b/resources/js/router.js
@@ -1,3 +1,4 @@
+import routesUploadRequest from './routes/routesUploadRequest'
 import routesMaintenance from './routes/routesMaintenance'
 import routesShared from './routes/routesShared'
 import routesOthers from './routes/routesOthers'
@@ -15,7 +16,18 @@ Vue.use(Router)
 
 const router = new Router({
     mode: 'history',
-    routes: [...routesMaintenance, ...routesShared, ...routesOthers, ...routesAdmin, ...routesIndex, ...routesAuth, ...routesUser, ...routesFile, ...routesTeam],
+    routes: [
+        ...routesUploadRequest,
+        ...routesMaintenance,
+        ...routesShared,
+        ...routesOthers,
+        ...routesAdmin,
+        ...routesIndex,
+        ...routesAuth,
+        ...routesUser,
+        ...routesFile,
+        ...routesTeam,
+    ],
     scrollBehavior(to, from, savedPosition) {
         if (savedPosition) {
             return savedPosition
diff --git a/resources/js/routes/routesAdmin.js b/resources/js/routes/routesAdmin.js
index 9616f785..e896f437 100644
--- a/resources/js/routes/routesAdmin.js
+++ b/resources/js/routes/routesAdmin.js
@@ -83,7 +83,10 @@ const routesAdmin = [
             {
                 name: 'CreateFixedPlan',
                 path: '/admin/plan/create/fixed',
-                component: () => import(/* webpackChunkName: "chunks/plan-create/fixed" */ '../views/Admin/Plans/Create/CreateFixedPlan'),
+                component: () =>
+                    import(
+                        /* webpackChunkName: "chunks/plan-create/fixed" */ '../views/Admin/Plans/Create/CreateFixedPlan'
+                    ),
                 meta: {
                     requiresAuth: true,
                     title: 'routes_title.plan_create',
@@ -92,7 +95,10 @@ const routesAdmin = [
             {
                 name: 'CreateMeteredPlan',
                 path: '/admin/plan/create/metered',
-                component: () => import(/* webpackChunkName: "chunks/plan-create/metered" */ '../views/Admin/Plans/Create/CreateMeteredPlan'),
+                component: () =>
+                    import(
+                        /* webpackChunkName: "chunks/plan-create/metered" */ '../views/Admin/Plans/Create/CreateMeteredPlan'
+                    ),
                 meta: {
                     requiresAuth: true,
                     title: 'routes_title.plan_create',
@@ -109,7 +115,10 @@ const routesAdmin = [
                     {
                         name: 'UserDetail',
                         path: '/admin/user/:id/details',
-                        component: () => import(/* webpackChunkName: "chunks/user-detail" */ '../views/Admin/Users/UserTabs/UserDetail'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/user-detail" */ '../views/Admin/Users/UserTabs/UserDetail'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.users_detail',
@@ -118,7 +127,10 @@ const routesAdmin = [
                     {
                         name: 'UserStorage',
                         path: '/admin/user/:id/storage',
-                        component: () => import(/* webpackChunkName: "chunks/user-storage" */ '../views/Admin/Users/UserTabs/UserStorage'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/user-storage" */ '../views/Admin/Users/UserTabs/UserStorage'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.users_storage_usage',
@@ -127,7 +139,10 @@ const routesAdmin = [
                     {
                         name: 'UserSubscription',
                         path: '/admin/user/:id/subscription',
-                        component: () => import(/* webpackChunkName: "chunks/user-subscription" */ '../views/Admin/Users/UserTabs/UserSubscription'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/user-subscription" */ '../views/Admin/Users/UserTabs/UserSubscription'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.subscription',
@@ -136,7 +151,10 @@ const routesAdmin = [
                     {
                         name: 'UserPassword',
                         path: '/admin/user/:id/password',
-                        component: () => import(/* webpackChunkName: "chunks/user-password" */ '../views/Admin/Users/UserTabs/UserPassword'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/user-password" */ '../views/Admin/Users/UserTabs/UserPassword'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.users_password',
@@ -145,7 +163,10 @@ const routesAdmin = [
                     {
                         name: 'UserDelete',
                         path: '/admin/user/:id/delete',
-                        component: () => import(/* webpackChunkName: "chunks/user-delete" */ '../views/Admin/Users/UserTabs/UserDelete'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/user-delete" */ '../views/Admin/Users/UserTabs/UserDelete'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.users_delete',
@@ -165,7 +186,10 @@ const routesAdmin = [
                     {
                         name: 'PlanFixedSubscribers',
                         path: '/admin/plan/:id/fixed/subscribers',
-                        component: () => import(/* webpackChunkName: "chunks/plan-subscribers" */ '../views/Admin/Plans/Tabs/PlanSubscribers'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/plan-subscribers" */ '../views/Admin/Plans/Tabs/PlanSubscribers'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.subscribers',
@@ -174,7 +198,10 @@ const routesAdmin = [
                     {
                         name: 'PlanFixedSettings',
                         path: '/admin/plan/:id/fixed/settings',
-                        component: () => import(/* webpackChunkName: "chunks/plan-settings" */ '../views/Admin/Plans/Tabs/PlanFixedSettings'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/plan-settings" */ '../views/Admin/Plans/Tabs/PlanFixedSettings'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.plan_settings',
@@ -183,7 +210,8 @@ const routesAdmin = [
                     {
                         name: 'PlanFixedDelete',
                         path: '/admin/plan/:id/fixed/delete',
-                        component: () => import(/* webpackChunkName: "chunks/plan-delete" */ '../views/Admin/Plans/Tabs/PlanDelete'),
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/plan-delete" */ '../views/Admin/Plans/Tabs/PlanDelete'),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.plan_delete',
@@ -203,7 +231,10 @@ const routesAdmin = [
                     {
                         name: 'PlanMeteredSubscribers',
                         path: '/admin/plan/:id/metered/subscribers',
-                        component: () => import(/* webpackChunkName: "chunks/plan-subscribers" */ '../views/Admin/Plans/Tabs/PlanSubscribers'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/plan-subscribers" */ '../views/Admin/Plans/Tabs/PlanSubscribers'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.subscribers',
@@ -212,7 +243,10 @@ const routesAdmin = [
                     {
                         name: 'PlanMeteredSettings',
                         path: '/admin/plan/:id/metered/settings',
-                        component: () => import(/* webpackChunkName: "chunks/plan-settings" */ '../views/Admin/Plans/Tabs/PlanMeteredSettings'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/plan-settings" */ '../views/Admin/Plans/Tabs/PlanMeteredSettings'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.plan_settings',
@@ -221,7 +255,8 @@ const routesAdmin = [
                     {
                         name: 'PlanMeteredDelete',
                         path: '/admin/plan/:id/metered/delete',
-                        component: () => import(/* webpackChunkName: "chunks/plan-delete" */ '../views/Admin/Plans/Tabs/PlanDelete'),
+                        component: () =>
+                            import(/* webpackChunkName: "chunks/plan-delete" */ '../views/Admin/Plans/Tabs/PlanDelete'),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.plan_delete',
@@ -232,7 +267,8 @@ const routesAdmin = [
             {
                 name: 'PaymentSettings',
                 path: '/admin/payments',
-                component: () => import(/* webpackChunkName: "chunks/payments" */ '../views/Admin/PaymentSettings/PaymentSettings'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/payments" */ '../views/Admin/PaymentSettings/PaymentSettings'),
                 meta: {
                     requiresAuth: true,
                     title: 'Payment Settings',
@@ -241,7 +277,10 @@ const routesAdmin = [
                     {
                         name: 'AppBillings',
                         path: '/admin/payments/billings',
-                        component: () => import(/* webpackChunkName: "chunks/payments/billings" */ '../views/Admin/PaymentSettings/PaymentSettingsTab/Billings'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/payments/billings" */ '../views/Admin/PaymentSettings/PaymentSettingsTab/Billings'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.billings',
@@ -250,7 +289,10 @@ const routesAdmin = [
                     {
                         name: 'AppPayments',
                         path: '/admin/payments/payments',
-                        component: () => import(/* webpackChunkName: "chunks/payments/settings" */ '../views/Admin/PaymentSettings/PaymentSettingsTab/Payments'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/payments/settings" */ '../views/Admin/PaymentSettings/PaymentSettingsTab/Payments'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.payments',
@@ -261,7 +303,8 @@ const routesAdmin = [
             {
                 name: 'AppSettings',
                 path: '/admin/settings',
-                component: () => import(/* webpackChunkName: "chunks/app-settings" */ '../views/Admin/AppSettings/AppSettings'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/app-settings" */ '../views/Admin/AppSettings/AppSettings'),
                 meta: {
                     requiresAuth: true,
                     title: 'routes_title.settings',
@@ -270,7 +313,10 @@ const routesAdmin = [
                     {
                         name: 'AppAppearance',
                         path: '/admin/settings/appearance',
-                        component: () => import(/* webpackChunkName: "chunks/app-appearance" */ '../views/Admin/AppSettings/AppSettingsTabs/Appearance'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/app-appearance" */ '../views/Admin/AppSettings/AppSettingsTabs/Appearance'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.appearance',
@@ -279,7 +325,10 @@ const routesAdmin = [
                     {
                         name: 'AppIndex',
                         path: '/admin/settings/index',
-                        component: () => import(/* webpackChunkName: "chunks/app-index" */ '../views/Admin/AppSettings/AppSettingsTabs/Index'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/app-index" */ '../views/Admin/AppSettings/AppSettingsTabs/Index'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'Index',
@@ -288,7 +337,10 @@ const routesAdmin = [
                     {
                         name: 'AppEmail',
                         path: '/admin/settings/email',
-                        component: () => import(/* webpackChunkName: "chunks/app-email" */ '../views/Admin/AppSettings/AppSettingsTabs/Email'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/app-email" */ '../views/Admin/AppSettings/AppSettingsTabs/Email'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.email',
@@ -297,7 +349,10 @@ const routesAdmin = [
                     {
                         name: 'AppOthers',
                         path: '/admin/settings/others',
-                        component: () => import(/* webpackChunkName: "chunks/app-others" */ '../views/Admin/AppSettings/AppSettingsTabs/Others'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/app-others" */ '../views/Admin/AppSettings/AppSettingsTabs/Others'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'routes_title.others',
@@ -306,7 +361,10 @@ const routesAdmin = [
                     {
                         name: 'AppSignInUp',
                         path: '/admin/settings/sign-in',
-                        component: () => import(/* webpackChunkName: "chunks/app-sign-in-out" */ '../views/Admin/AppSettings/AppSettingsTabs/SignInUp'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/app-sign-in-out" */ '../views/Admin/AppSettings/AppSettingsTabs/SignInUp'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'Sign In/Up',
@@ -315,7 +373,10 @@ const routesAdmin = [
                     {
                         name: 'AppAdsense',
                         path: '/admin/settings/adsense',
-                        component: () => import(/* webpackChunkName: "chunks/app-adsense" */ '../views/Admin/AppSettings/AppSettingsTabs/Adsense'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/app-adsense" */ '../views/Admin/AppSettings/AppSettingsTabs/Adsense'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'Adsense',
@@ -324,7 +385,10 @@ const routesAdmin = [
                     {
                         name: 'AppServer',
                         path: '/admin/settings/server',
-                        component: () => import(/* webpackChunkName: "chunks/app-server" */ '../views/Admin/AppSettings/AppSettingsTabs/Server'),
+                        component: () =>
+                            import(
+                                /* webpackChunkName: "chunks/app-server" */ '../views/Admin/AppSettings/AppSettingsTabs/Server'
+                            ),
                         meta: {
                             requiresAuth: true,
                             title: 'Server',
@@ -335,7 +399,8 @@ const routesAdmin = [
             {
                 name: 'Language',
                 path: '/admin/language',
-                component: () => import(/* webpackChunkName: "chunks/app-language" */ '../views/Admin/Languages/Language'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/app-language" */ '../views/Admin/Languages/Language'),
                 meta: {
                     requiresAuth: true,
                     title: 'Language Editor',
diff --git a/resources/js/routes/routesAuth.js b/resources/js/routes/routesAuth.js
index f88d1d33..d34c3586 100644
--- a/resources/js/routes/routesAuth.js
+++ b/resources/js/routes/routesAuth.js
@@ -10,7 +10,8 @@ const routesAuth = [
     {
         name: 'SuccessfullyVerified',
         path: '/successfully-verified',
-        component: () => import(/* webpackChunkName: "chunks/email-verified" */ '../views/Auth/SuccessfullyEmailVerified'),
+        component: () =>
+            import(/* webpackChunkName: "chunks/email-verified" */ '../views/Auth/SuccessfullyEmailVerified'),
         meta: {
             requiresAuth: false,
         },
diff --git a/resources/js/routes/routesFile.js b/resources/js/routes/routesFile.js
index e9c518c5..8c39c50f 100644
--- a/resources/js/routes/routesFile.js
+++ b/resources/js/routes/routesFile.js
@@ -15,7 +15,8 @@ const routesFile = [
             {
                 name: 'RecentUploads',
                 path: '/platform/recent-uploads',
-                component: () => import(/* webpackChunkName: "chunks/recent-uploads" */ '../views/FileView/RecentUploads'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/recent-uploads" */ '../views/FileView/RecentUploads'),
                 meta: {
                     requiresAuth: true,
                 },
@@ -23,7 +24,8 @@ const routesFile = [
             {
                 name: 'MySharedItems',
                 path: '/platform/my-shared-items',
-                component: () => import(/* webpackChunkName: "chunks/my-shared-items" */ '../views/FileView/MySharedItems'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/my-shared-items" */ '../views/FileView/MySharedItems'),
                 meta: {
                     requiresAuth: true,
                 },
@@ -47,7 +49,8 @@ const routesFile = [
             {
                 name: 'SharedWithMe',
                 path: '/platform/shared-with-me/:id?',
-                component: () => import(/* webpackChunkName: "chunks/shared-with-me" */ '../views/FileView/SharedWithMe'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/shared-with-me" */ '../views/FileView/SharedWithMe'),
                 meta: {
                     requiresAuth: true,
                 },
diff --git a/resources/js/routes/routesMaintenance.js b/resources/js/routes/routesMaintenance.js
index 4c49a432..6a2e8877 100644
--- a/resources/js/routes/routesMaintenance.js
+++ b/resources/js/routes/routesMaintenance.js
@@ -10,7 +10,8 @@ const routesMaintenance = [
             {
                 name: 'StatusCheck',
                 path: '/setup-wizard/status-check',
-                component: () => import(/* webpackChunkName: "chunks/status-check" */ '../views/SetupWizard/StatusCheck'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/status-check" */ '../views/SetupWizard/StatusCheck'),
                 meta: {
                     requiresAuth: false,
                 },
@@ -18,7 +19,8 @@ const routesMaintenance = [
             {
                 name: 'PurchaseCode',
                 path: '/setup-wizard/purchase-code',
-                component: () => import(/* webpackChunkName: "chunks/purchase-code" */ '../views/SetupWizard/PurchaseCode'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/purchase-code" */ '../views/SetupWizard/PurchaseCode'),
                 meta: {
                     requiresAuth: false,
                 },
@@ -34,7 +36,8 @@ const routesMaintenance = [
             {
                 name: 'EnvironmentSetup',
                 path: '/setup-wizard/environment-setup',
-                component: () => import(/* webpackChunkName: "chunks/environment-setup" */ '../views/SetupWizard/EnvironmentSetup'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/environment-setup" */ '../views/SetupWizard/EnvironmentSetup'),
                 meta: {
                     requiresAuth: false,
                 },
@@ -50,7 +53,8 @@ const routesMaintenance = [
             {
                 name: 'AdminAccount',
                 path: '/setup-wizard/admin-setup',
-                component: () => import(/* webpackChunkName: "chunks/admin-account" */ '../views/SetupWizard/AdminAccount'),
+                component: () =>
+                    import(/* webpackChunkName: "chunks/admin-account" */ '../views/SetupWizard/AdminAccount'),
                 meta: {
                     requiresAuth: false,
                 },
diff --git a/resources/js/routes/routesUploadRequest.js b/resources/js/routes/routesUploadRequest.js
new file mode 100644
index 00000000..09674fa7
--- /dev/null
+++ b/resources/js/routes/routesUploadRequest.js
@@ -0,0 +1,23 @@
+const routesShared = [
+    {
+        name: 'Request',
+        path: '/request',
+        component: () => import(/* webpackChunkName: "chunks/request" */ '../views/UploadRequest'),
+        meta: {
+            requiresAuth: false,
+        },
+        children: [
+            {
+                name: 'RequestUpload',
+                path: '/request/:token/upload/:id?',
+                component: () =>
+                    import(/* webpackChunkName: "chunks/request-upload" */ '../views/FileView/UploadRequestFiles'),
+                meta: {
+                    requiresAuth: false,
+                },
+            },
+        ],
+    },
+]
+
+export default routesShared
diff --git a/resources/js/store/index.js b/resources/js/store/index.js
index 4100d61d..b3a607f3 100644
--- a/resources/js/store/index.js
+++ b/resources/js/store/index.js
@@ -1,6 +1,7 @@
 import Vuex from 'vuex'
 import Vue from 'vue'
 
+import uploadRequest from './modules/uploadRequest'
 import fileFunctions from './modules/fileFunctions'
 import fileBrowser from './modules/fileBrowser'
 import payments from './modules/payments'
@@ -14,6 +15,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
     modules: {
+        uploadRequest,
         fileFunctions,
         fileBrowser,
         payments,
diff --git a/resources/js/store/modules/app.js b/resources/js/store/modules/app.js
index 07933ab5..7f2665ac 100644
--- a/resources/js/store/modules/app.js
+++ b/resources/js/store/modules/app.js
@@ -1,194 +1,195 @@
 import i18n from '../../i18n'
 import axios from 'axios'
 import Vue from 'vue'
-import router from "../../router";
+import router from '../../router'
 
 const defaultState = {
-	isVisibleNavigationBars: localStorage.getItem('is_navigation_bars') !== 'false',
-	isDarkMode: false,
-	isVisibleSidebar: localStorage.getItem('file_info_visibility') === 'true' || false,
-	itemViewType: localStorage.getItem('preview_type') || 'list',
-	config: undefined,
-	index: undefined,
-	requestedPlan: undefined,
-	emojis: undefined,
-	sorting: {
-		sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
-		field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
-	},
+    isVisibleNavigationBars: localStorage.getItem('is_navigation_bars') !== 'false',
+    isDarkMode: false,
+    isVisibleSidebar: localStorage.getItem('file_info_visibility') === 'true' || false,
+    itemViewType: localStorage.getItem('preview_type') || 'list',
+    config: undefined,
+    index: undefined,
+    requestedPlan: undefined,
+    emojis: undefined,
+    sorting: {
+        sort: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).sort : 'DESC',
+        field: localStorage.getItem('sorting') ? JSON.parse(localStorage.getItem('sorting')).field : 'created_at',
+    },
 }
 const actions = {
-	toggleThemeMode: ({commit}, mode = undefined) => {
-		const app = document.getElementsByTagName('html')[0]
+    toggleThemeMode: ({ commit }, mode = undefined) => {
+        const app = document.getElementsByTagName('html')[0]
 
-		if (!mode) {
-			mode = app.classList.contains('dark') ? 'light' : 'dark'
-		}
+        if (!mode) {
+            mode = app.classList.contains('dark') ? 'light' : 'dark'
+        }
 
-		commit('REPLACE_CONFIG_VALUE', {
-			key: 'defaultThemeMode',
-			value: mode,
-		})
+        commit('REPLACE_CONFIG_VALUE', {
+            key: 'defaultThemeMode',
+            value: mode,
+        })
 
-		// Update user settings
-		if (!Vue.prototype.$isThisRoute(router.currentRoute, ['Public'])) {
-			Vue.prototype.$updateText('/user/settings', 'theme_mode', mode)
-		}
-	},
-	toggleNavigationBars: ({commit, state}) => {
-		// Store dark mode into localStorage
-		localStorage.setItem('is_navigation_bars', !state.isVisibleNavigationBars)
+        // Update user settings
+        if (!Vue.prototype.$isThisRoute(router.currentRoute, ['Public'])) {
+            Vue.prototype.$updateText('/user/settings', 'theme_mode', mode)
+        }
+    },
+    toggleNavigationBars: ({ commit, state }) => {
+        // Store dark mode into localStorage
+        localStorage.setItem('is_navigation_bars', !state.isVisibleNavigationBars)
 
-		// Change preview
-		commit('TOGGLE_NAVIGATION_BARS')
-	},
-	togglePreviewType: ({commit, state}, preview) => {
-		// Get preview type
-		let previewType = preview ? preview : state.itemViewType === 'list' ? 'grid' : 'list'
+        // Change preview
+        commit('TOGGLE_NAVIGATION_BARS')
+    },
+    togglePreviewType: ({ commit, state }, preview) => {
+        // Get preview type
+        let previewType = preview ? preview : state.itemViewType === 'list' ? 'grid' : 'list'
 
-		// Store preview type to localStorage
-		localStorage.setItem('preview_type', previewType)
+        // Store preview type to localStorage
+        localStorage.setItem('preview_type', previewType)
 
-		// Change preview
-		commit('CHANGE_PREVIEW', previewType)
-	},
-	toggleEmojiType: ({commit, getters}, type = undefined) => {
-		let newType = type ? type : getters.config.defaultEmoji === 'twemoji' ? 'applemoji' : 'twemoji'
+        // Change preview
+        commit('CHANGE_PREVIEW', previewType)
+    },
+    toggleEmojiType: ({ commit, getters }, type = undefined) => {
+        let newType = type ? type : getters.config.defaultEmoji === 'twemoji' ? 'applemoji' : 'twemoji'
 
-		// Update config
-		commit('REPLACE_CONFIG_VALUE', {
-			key: 'defaultEmoji',
-			value: newType,
-		})
+        // Update config
+        commit('REPLACE_CONFIG_VALUE', {
+            key: 'defaultEmoji',
+            value: newType,
+        })
 
-		// Update user settings
-		Vue.prototype.$updateText('/user/settings', 'emoji_type', newType)
-	},
-	fileInfoToggle: (context, visibility = undefined) => {
-		if (!visibility) {
-			if (context.state.isVisibleSidebar) {
-				context.commit('FILE_INFO_TOGGLE', false)
-			} else {
-				context.commit('FILE_INFO_TOGGLE', true)
-			}
-		} else {
-			context.commit('FILE_INFO_TOGGLE', visibility)
-		}
-	},
-	getLanguageTranslations: ({commit, state}, lang) => {
-		return new Promise((resolve, reject) => {
-			axios.get(`/translations/${lang}`)
-				.then((response) => {
-					i18n.setLocaleMessage(lang, response.data)
-					i18n.locale = lang
+        // Update user settings
+        Vue.prototype.$updateText('/user/settings', 'emoji_type', newType)
+    },
+    fileInfoToggle: (context, visibility = undefined) => {
+        if (!visibility) {
+            if (context.state.isVisibleSidebar) {
+                context.commit('FILE_INFO_TOGGLE', false)
+            } else {
+                context.commit('FILE_INFO_TOGGLE', true)
+            }
+        } else {
+            context.commit('FILE_INFO_TOGGLE', visibility)
+        }
+    },
+    getLanguageTranslations: ({ commit, state }, lang) => {
+        return new Promise((resolve, reject) => {
+            axios
+                .get(`/translations/${lang}`)
+                .then((response) => {
+                    i18n.setLocaleMessage(lang, response.data)
+                    i18n.locale = lang
 
-					resolve(response)
-				})
-				.catch((error) => {
-					if (!error.response) {
-						location.reload()
-					}
-				})
-		})
-	},
+                    resolve(response)
+                })
+                .catch((error) => {
+                    if (!error.response) {
+                        location.reload()
+                    }
+                })
+        })
+    },
 }
 
 const mutations = {
-	LOAD_EMOJIS_LIST(state, data) {
-		state.emojis = data
-	},
-	UPDATE_SORTING(state) {
-		state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
-		state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
-	},
-	INIT(state, data) {
-		state.config = data.config
-	},
-	SET_SAAS(state, data) {
-		state.config.isSaaS = data
-	},
-	FILE_INFO_TOGGLE(state, isVisible) {
-		state.isVisibleSidebar = isVisible
+    LOAD_EMOJIS_LIST(state, data) {
+        state.emojis = data
+    },
+    UPDATE_SORTING(state) {
+        state.sorting.field = JSON.parse(localStorage.getItem('sorting')).field
+        state.sorting.sort = JSON.parse(localStorage.getItem('sorting')).sort
+    },
+    INIT(state, data) {
+        state.config = data.config
+    },
+    SET_SAAS(state, data) {
+        state.config.isSaaS = data
+    },
+    FILE_INFO_TOGGLE(state, isVisible) {
+        state.isVisibleSidebar = isVisible
 
-		localStorage.setItem('file_info_visibility', isVisible)
-	},
-	SET_AUTHORIZED(state, value) {
-		state.config.isAuthenticated = value
-	},
-	SET_INDEX_CONTENT(state, data) {
-		state.index = data
-	},
-	CHANGE_PREVIEW(state, type) {
-		state.itemViewType = type
-	},
-	TOGGLE_NAVIGATION_BARS(state) {
-		state.isVisibleNavigationBars = !state.isVisibleNavigationBars
-	},
-	STORE_REQUESTED_PLAN(state, plan) {
-		state.requestedPlan = plan
-	},
-	REPLACE_CONFIG_VALUE(state, {key, value}) {
-		state.config[key] = value
-	},
-	SET_SOCIAL_LOGIN_CONFIGURED(state, service) {
-		if (service === 'facebook') {
-			state.config.allowedFacebookLogin = true
-			state.config.isFacebookLoginConfigured = true
-		}
+        localStorage.setItem('file_info_visibility', isVisible)
+    },
+    SET_AUTHORIZED(state, value) {
+        state.config.isAuthenticated = value
+    },
+    SET_INDEX_CONTENT(state, data) {
+        state.index = data
+    },
+    CHANGE_PREVIEW(state, type) {
+        state.itemViewType = type
+    },
+    TOGGLE_NAVIGATION_BARS(state) {
+        state.isVisibleNavigationBars = !state.isVisibleNavigationBars
+    },
+    STORE_REQUESTED_PLAN(state, plan) {
+        state.requestedPlan = plan
+    },
+    REPLACE_CONFIG_VALUE(state, { key, value }) {
+        state.config[key] = value
+    },
+    SET_SOCIAL_LOGIN_CONFIGURED(state, service) {
+        if (service === 'facebook') {
+            state.config.allowedFacebookLogin = true
+            state.config.isFacebookLoginConfigured = true
+        }
 
-		if (service === 'google') {
-			state.config.allowedGoogleLogin = true
-			state.config.isGoogleLoginConfigured = true
-		}
+        if (service === 'google') {
+            state.config.allowedGoogleLogin = true
+            state.config.isGoogleLoginConfigured = true
+        }
 
-		if (service === 'github') {
-			state.config.allowedGithubLogin = true
-			state.config.isGithubLoginConfigured = true
-		}
+        if (service === 'github') {
+            state.config.allowedGithubLogin = true
+            state.config.isGithubLoginConfigured = true
+        }
 
-		if (service === 'recaptcha') {
-			state.config.allowedRecaptcha = true
-			state.config.isRecaptchaConfigured = true
-		}
-	},
-	SET_STRIPE_CREDENTIALS(state, data) {
-		state.config.stripe_public_key = data.key
-		state.config.isStripe = true
-	},
-	SET_PAYSTACK_CREDENTIALS(state, data) {
-		state.config.paystack_public_key = data.key
-		state.config.isPaystack = true
-	},
-	SET_PAYPAL_CREDENTIALS(state, data) {
-		state.config.paypal_client_id = data.key
-		state.config.isPayPal = true
-	},
-	UPDATE_DARK_MODE_STATUS(state, val) {
-		state.isDarkMode = val
-	},
+        if (service === 'recaptcha') {
+            state.config.allowedRecaptcha = true
+            state.config.isRecaptchaConfigured = true
+        }
+    },
+    SET_STRIPE_CREDENTIALS(state, data) {
+        state.config.stripe_public_key = data.key
+        state.config.isStripe = true
+    },
+    SET_PAYSTACK_CREDENTIALS(state, data) {
+        state.config.paystack_public_key = data.key
+        state.config.isPaystack = true
+    },
+    SET_PAYPAL_CREDENTIALS(state, data) {
+        state.config.paypal_client_id = data.key
+        state.config.isPayPal = true
+    },
+    UPDATE_DARK_MODE_STATUS(state, val) {
+        state.isDarkMode = val
+    },
 }
 
 const getters = {
-	isVisibleNavigationBars: (state) => state.isVisibleNavigationBars,
-	isVisibleSidebar: (state) => state.isVisibleSidebar,
-	itemViewType: (state) => state.itemViewType,
-	requestedPlan: (state) => state.requestedPlan,
-	api: (state) => state.config.api,
-	config: (state) => state.config,
-	emojis: (state) => state.emojis,
-	index: (state) => state.index,
-	isDarkMode: (state) => state.isDarkMode,
-	sorting: (state) => {
-		return {
-			sorting: state.sorting,
-			URI: '?sort=' + state.sorting.field + '&direction=' + state.sorting.sort,
-		}
-	},
+    isVisibleNavigationBars: (state) => state.isVisibleNavigationBars,
+    isVisibleSidebar: (state) => state.isVisibleSidebar,
+    itemViewType: (state) => state.itemViewType,
+    requestedPlan: (state) => state.requestedPlan,
+    api: (state) => state.config.api,
+    config: (state) => state.config,
+    emojis: (state) => state.emojis,
+    index: (state) => state.index,
+    isDarkMode: (state) => state.isDarkMode,
+    sorting: (state) => {
+        return {
+            sorting: state.sorting,
+            URI: '?sort=' + state.sorting.field + '&direction=' + state.sorting.sort,
+        }
+    },
 }
 
 export default {
-	state: defaultState,
-	getters,
-	actions,
-	mutations,
+    state: defaultState,
+    getters,
+    actions,
+    mutations,
 }
diff --git a/resources/js/store/modules/fileBrowser.js b/resources/js/store/modules/fileBrowser.js
index aac371b8..3072b7ff 100644
--- a/resources/js/store/modules/fileBrowser.js
+++ b/resources/js/store/modules/fileBrowser.js
@@ -140,7 +140,7 @@ const mutations = {
         })
     },
     CHANGE_ITEM_NAME(state, file) {
-        state.entries.find(item => {
+        state.entries.find((item) => {
             if (item.data.id === file.data.id) {
                 item.data.attributes.name = file.data.attributes.name
                 item.data.attributes.color = file.data.attributes.color ? file.data.attributes.color : null
diff --git a/resources/js/store/modules/fileFunctions.js b/resources/js/store/modules/fileFunctions.js
index 7177ec23..adb82f42 100644
--- a/resources/js/store/modules/fileFunctions.js
+++ b/resources/js/store/modules/fileFunctions.js
@@ -203,7 +203,6 @@ const actions = {
 
                             // Reload File data after folder uploading is finished
                             if (getters.isUploadingFolder) {
-
                                 // Reload files after upload is done
                                 Vue.prototype.$getDataByLocation()
 
@@ -330,7 +329,7 @@ const actions = {
             .then(() => {
                 itemsToDelete.forEach((data) => {
                     // If is folder, update app data
-                    if (data.type === 'folder' && (getters.currentFolder && data.id === getters.currentFolder.data.id)) {
+                    if (data.type === 'folder' && getters.currentFolder && data.id === getters.currentFolder.data.id) {
                         router.back()
                     }
                 })
diff --git a/resources/js/store/modules/sharing.js b/resources/js/store/modules/sharing.js
index dc8d6fdc..81b3ead6 100644
--- a/resources/js/store/modules/sharing.js
+++ b/resources/js/store/modules/sharing.js
@@ -88,7 +88,10 @@ const actions = {
                 .then(() => {
                     items.forEach((item) => {
                         // Remove item from file browser
-                        if (getters.currentFolder && Vue.prototype.$isThisRoute(router.currentRoute, ['MySharedItems'])) {
+                        if (
+                            getters.currentFolder &&
+                            Vue.prototype.$isThisRoute(router.currentRoute, ['MySharedItems'])
+                        ) {
                             commit('REMOVE_ITEM', item.data.id)
                         }
 
diff --git a/resources/js/store/modules/teams.js b/resources/js/store/modules/teams.js
index bf823b59..4cac8427 100644
--- a/resources/js/store/modules/teams.js
+++ b/resources/js/store/modules/teams.js
@@ -28,7 +28,10 @@ const actions = {
                 })
                 commit('SET_CURRENT_FOLDER', response.data.root)
 
-                if (!getters.currentTeamFolder || getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id) {
+                if (
+                    !getters.currentTeamFolder ||
+                    getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id
+                ) {
                     commit('SET_CURRENT_TEAM_FOLDER', response.data.teamFolder)
                 }
 
@@ -67,7 +70,10 @@ const actions = {
                 })
                 commit('SET_CURRENT_FOLDER', response.data.root)
 
-                if (!getters.currentTeamFolder || getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id) {
+                if (
+                    !getters.currentTeamFolder ||
+                    getters.currentTeamFolder.data.id !== response.data.teamFolder.data.id
+                ) {
                     commit('SET_CURRENT_TEAM_FOLDER', response.data.teamFolder)
                 }
 
diff --git a/resources/js/store/modules/uploadRequest.js b/resources/js/store/modules/uploadRequest.js
new file mode 100644
index 00000000..881d261a
--- /dev/null
+++ b/resources/js/store/modules/uploadRequest.js
@@ -0,0 +1,28 @@
+import router from '../../router'
+import { events } from '../../bus'
+import i18n from '../../i18n'
+import axios from 'axios'
+import Vue from 'vue'
+
+const defaultState = {
+    uploadRequest: undefined,
+}
+
+const actions = {}
+
+const mutations = {
+    SET_UPLOAD_REQUEST(state, payload) {
+        state.uploadRequest = payload
+    },
+}
+
+const getters = {
+    uploadRequest: (state) => state.uploadRequest,
+}
+
+export default {
+    state: defaultState,
+    getters,
+    actions,
+    mutations,
+}
diff --git a/resources/js/store/modules/userAuth.js b/resources/js/store/modules/userAuth.js
index 8e2da067..51898c4d 100644
--- a/resources/js/store/modules/userAuth.js
+++ b/resources/js/store/modules/userAuth.js
@@ -64,7 +64,10 @@ const actions = {
 
         items.forEach((item) => {
             if (item.data.type === 'folder') {
-                if (context.getters.user.data.relationships.favourites.data.find((folder) => folder.id === item.data.id)) return
+                if (
+                    context.getters.user.data.relationships.favourites.data.find((folder) => folder.id === item.data.id)
+                )
+                    return
 
                 addFavourites.push({ id: item.data.id })
             }
@@ -137,7 +140,9 @@ const mutations = {
         state.user.data.relationships.settings.data.attributes.avatar.sm = avatar
     },
     REMOVE_ITEM_FROM_FAVOURITES(state, item) {
-        state.user.data.relationships.favourites.data = state.user.data.relationships.favourites.data.filter((folder) => folder.data.id !== item.data.id)
+        state.user.data.relationships.favourites.data = state.user.data.relationships.favourites.data.filter(
+            (folder) => folder.data.id !== item.data.id
+        )
     },
     UPDATE_NAME_IN_FAVOURITES(state, data) {
         state.user.data.relationships.favourites.data.find((folder) => {
@@ -149,7 +154,10 @@ const mutations = {
 }
 
 const getters = {
-    isLimitedUser: (state) => state.user && state.user.data.relationships.failedPayments && state.user.data.relationships.failedPayments.data.length === 3,
+    isLimitedUser: (state) =>
+        state.user &&
+        state.user.data.relationships.failedPayments &&
+        state.user.data.relationships.failedPayments.data.length === 3,
     permission: (state) => state.permission,
     user: (state) => state.user,
 }
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index a0db3008..48827643 100644
--- a/resources/js/views/Admin.vue
+++ b/resources/js/views/Admin.vue
@@ -19,14 +19,22 @@
         <MobileNavigationToolbar />
 
         <ContentSidebar>
-            <ContentGroup v-for="(menu, i) in nav" :key="i" :title="menu.groupTitle" :slug="menu.groupTitle" :can-collapse="false">
+            <ContentGroup
+                v-for="(menu, i) in nav"
+                :key="i"
+                :title="menu.groupTitle"
+                :slug="menu.groupTitle"
+                :can-collapse="false"
+            >
                 <router-link
                     v-for="(item, i) in menu.groupLinks"
                     :key="i"
                     :to="{ name: item.route }"
                     class="flex items-center py-2.5"
                     :class="{
-                        'router-link-active': item.linkActivation && item.linkActivation.includes($router.currentRoute.fullPath.split('/')[2]),
+                        'router-link-active':
+                            item.linkActivation &&
+                            item.linkActivation.includes($router.currentRoute.fullPath.split('/')[2]),
                     }"
                 >
                     <box-icon v-if="item.icon === 'box'" size="17" class="vue-feather icon-active mr-2.5" />
@@ -124,57 +132,57 @@ export default {
                 ],
             }[this.config.subscriptionType]
 
-			let sections = [
-				{
-					groupCollapsable: false,
-					groupTitle: this.$t('global.admin'),
-					groupLinks: [
-						{
-							title: this.$t('admin_menu.dashboard'),
-							route: 'Dashboard',
-							icon: 'box',
-						},
-						{
-							title: this.$t('admin_menu.users'),
-							route: 'Users',
-							icon: 'users',
-							linkActivation: ['users', 'user'],
-						},
-						{
-							title: this.$t('admin_menu.settings'),
-							route: 'AppSettings',
-							icon: 'settings',
-						},
-					],
-				},
-				{
-					groupCollapsable: false,
-					groupTitle: this.$t('Content'),
-					groupLinks: [
-						{
-							title: this.$t('admin_menu.pages'),
-							route: 'Pages',
-							icon: 'monitor',
-						},
-						{
-							title: this.$t('admin_menu.languages'),
-							route: 'Language',
-							icon: 'globe',
-						},
-					],
-				},
-			]
+            let sections = [
+                {
+                    groupCollapsable: false,
+                    groupTitle: this.$t('global.admin'),
+                    groupLinks: [
+                        {
+                            title: this.$t('admin_menu.dashboard'),
+                            route: 'Dashboard',
+                            icon: 'box',
+                        },
+                        {
+                            title: this.$t('admin_menu.users'),
+                            route: 'Users',
+                            icon: 'users',
+                            linkActivation: ['users', 'user'],
+                        },
+                        {
+                            title: this.$t('admin_menu.settings'),
+                            route: 'AppSettings',
+                            icon: 'settings',
+                        },
+                    ],
+                },
+                {
+                    groupCollapsable: false,
+                    groupTitle: this.$t('Content'),
+                    groupLinks: [
+                        {
+                            title: this.$t('admin_menu.pages'),
+                            route: 'Pages',
+                            icon: 'monitor',
+                        },
+                        {
+                            title: this.$t('admin_menu.languages'),
+                            route: 'Language',
+                            icon: 'globe',
+                        },
+                    ],
+                },
+            ]
 
-			// Push subscription if there is metered or fixed type
-			if (this.config.subscriptionType !== 'none') {
-				sections.push({
-					groupCollapsable: false,
-					groupTitle: this.$t('Subscription'),
-					groupLinks: subscriptionLinks,
-				})
-			}
+            // Push subscription if there is metered or fixed type
+            if (this.config.subscriptionType !== 'none') {
+                sections.push({
+                    groupCollapsable: false,
+                    groupTitle: this.$t('Subscription'),
+                    groupLinks: subscriptionLinks,
+                })
+            }
 
-			return sections
+            return sections
         },
     },
     components: {
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Adsense.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Adsense.vue
index 18115cf9..093bee82 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Adsense.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Adsense.vue
@@ -6,19 +6,20 @@
                 {{ $t('Basic Setup') }}
             </FormLabel>
 
-			<AppInputSwitch
-				:title="$t('Allow Google Adsense')"
-				:description="$t('Allow ads on app pages.')"
-			>
+            <AppInputSwitch :title="$t('Allow Google Adsense')" :description="$t('Allow ads on app pages.')">
                 <SwitchInput
-					@input="$updateText('/admin/settings', 'allowed_adsense', adsense.allowedService)"
-					v-model="adsense.allowedService"
-					class="switch"
-					:state="adsense.allowedService"
-				/>
+                    @input="$updateText('/admin/settings', 'allowed_adsense', adsense.allowedService)"
+                    v-model="adsense.allowedService"
+                    class="switch"
+                    :state="adsense.allowedService"
+                />
             </AppInputSwitch>
 
-            <AppInputText :title="$t('Client Id')" :description="$t('Paste your Adsense Client ID e.g. ca-pub-XXXXXXXXXXXXXXXXX')" :is-last="true">
+            <AppInputText
+                :title="$t('Client Id')"
+                :description="$t('Paste your Adsense Client ID e.g. ca-pub-XXXXXXXXXXXXXXXXX')"
+                :is-last="true"
+            >
                 <input
                     @input="$updateText('/admin/settings', 'adsense_client_id', adsense.clientId, true)"
                     v-model="adsense.clientId"
@@ -35,37 +36,47 @@
                 {{ $t('Ads') }}
             </FormLabel>
 
-			<AppInputText :title="$t('File Viewport Banner')" :description="$t('This banner will be showed above user files')">
+            <AppInputText
+                :title="$t('File Viewport Banner')"
+                :description="$t('This banner will be showed above user files')"
+            >
                 <textarea
-					rows="3"
-					@input="$updateText('/admin/settings', 'adsense_banner_01', adsense.banner01, true)"
-					v-model="adsense.banner01"
-					:placeholder="$t('Paste the <ins></ins> tag here...')"
-					type="text"
-					class="focus-border-theme input-dark"
-				/>
+                    rows="3"
+                    @input="$updateText('/admin/settings', 'adsense_banner_01', adsense.banner01, true)"
+                    v-model="adsense.banner01"
+                    :placeholder="$t('Paste the <ins></ins> tag here...')"
+                    type="text"
+                    class="focus-border-theme input-dark"
+                />
             </AppInputText>
 
-			<AppInputText :title="$t('Download Page Banner')" :description="$t('This banner will be showed below file download page')">
+            <AppInputText
+                :title="$t('Download Page Banner')"
+                :description="$t('This banner will be showed below file download page')"
+            >
                 <textarea
-					rows="3"
-					@input="$updateText('/admin/settings', 'adsense_banner_02', adsense.banner02, true)"
-					v-model="adsense.banner02"
-					:placeholder="$t('Paste the <ins></ins> tag here...')"
-					type="text"
-					class="focus-border-theme input-dark"
-				/>
+                    rows="3"
+                    @input="$updateText('/admin/settings', 'adsense_banner_02', adsense.banner02, true)"
+                    v-model="adsense.banner02"
+                    :placeholder="$t('Paste the <ins></ins> tag here...')"
+                    type="text"
+                    class="focus-border-theme input-dark"
+                />
             </AppInputText>
 
-			<AppInputText :title="$t('Homepage Banner')" :description="$t('This banner will be showed on the homepage')" :is-last="true">
+            <AppInputText
+                :title="$t('Homepage Banner')"
+                :description="$t('This banner will be showed on the homepage')"
+                :is-last="true"
+            >
                 <textarea
-					rows="3"
-					@input="$updateText('/admin/settings', 'adsense_banner_03', adsense.banner03, true)"
-					v-model="adsense.banner03"
-					:placeholder="$t('Paste the <ins></ins> tag here...')"
-					type="text"
-					class="focus-border-theme input-dark"
-				/>
+                    rows="3"
+                    @input="$updateText('/admin/settings', 'adsense_banner_03', adsense.banner03, true)"
+                    v-model="adsense.banner03"
+                    :placeholder="$t('Paste the <ins></ins> tag here...')"
+                    type="text"
+                    class="focus-border-theme input-dark"
+                />
             </AppInputText>
         </div>
     </PageTab>
@@ -98,18 +109,18 @@ export default {
             adsense: {
                 allowedService: undefined,
                 clientId: undefined,
-				banner01: undefined,
+                banner01: undefined,
             },
         }
     },
     created() {
         this.adsense = {
-			allowedService: this.config.allowedAdsense,
-			clientId: this.config.adsenseClientId,
-			banner01: this.config.adsenseBanner01,
-			banner02: this.config.adsenseBanner02,
-			banner03: this.config.adsenseBanner03,
-		}
+            allowedService: this.config.allowedAdsense,
+            clientId: this.config.adsenseClientId,
+            banner01: this.config.adsenseBanner01,
+            banner02: this.config.adsenseBanner02,
+            banner03: this.config.adsenseBanner03,
+        }
     },
 }
 </script>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
index fe4e9870..6cf53bc8 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
@@ -6,7 +6,12 @@
             </FormLabel>
 
             <AppInputSwitch :title="$t('color_theme')" :description="$t('color_theme_description')">
-                <input @input="$updateText('/admin/settings', 'app_color', app.color)" v-model="app.color" :placeholder="$t('admin_settings.appearance.title_plac')" type="color" />
+                <input
+                    @input="$updateText('/admin/settings', 'app_color', app.color)"
+                    v-model="app.color"
+                    :placeholder="$t('admin_settings.appearance.title_plac')"
+                    type="color"
+                />
             </AppInputSwitch>
 
             <AppInputText :title="$t('admin_settings.appearance.title')">
@@ -35,7 +40,11 @@
             </FormLabel>
 
             <AppInputText :title="$t('admin_settings.appearance.logo')">
-                <ImageInput @input="$updateImage('/admin/settings', 'app_logo', app.logo)" :image="$getImage(app.logo)" v-model="app.logo" />
+                <ImageInput
+                    @input="$updateImage('/admin/settings', 'app_logo', app.logo)"
+                    :image="$getImage(app.logo)"
+                    v-model="app.logo"
+                />
             </AppInputText>
 
             <AppInputText :title="$t('admin_settings.appearance.logo_horizontal')">
@@ -47,15 +56,27 @@
             </AppInputText>
 
             <AppInputText :title="$t('admin_settings.appearance.favicon')">
-                <ImageInput @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)" :image="$getImage(app.favicon)" v-model="app.favicon" />
+                <ImageInput
+                    @input="$updateImage('/admin/settings', 'app_favicon', app.favicon)"
+                    :image="$getImage(app.favicon)"
+                    v-model="app.favicon"
+                />
             </AppInputText>
 
             <AppInputText :title="$t('og_image')" :description="$t('og_image_description')">
-                <ImageInput @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)" :image="$getImage(app.og_image)" v-model="app.og_image" />
+                <ImageInput
+                    @input="$updateImage('/admin/settings', 'app_og_image', app.og_image)"
+                    :image="$getImage(app.og_image)"
+                    v-model="app.og_image"
+                />
             </AppInputText>
 
             <AppInputText :title="$t('app_touch_icon')" :description="$t('app_touch_icon_description')" :is-last="true">
-                <ImageInput @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)" :image="$getImage(app.touch_icon)" v-model="app.touch_icon" />
+                <ImageInput
+                    @input="$updateImage('/admin/settings', 'app_touch_icon', app.touch_icon)"
+                    :image="$getImage(app.touch_icon)"
+                    v-model="app.touch_icon"
+                />
             </AppInputText>
         </div>
     </PageTab>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
index 4b6242b5..653ba73d 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
@@ -1,101 +1,209 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <ValidationObserver @submit.prevent="EmailSetupSubmit" ref="EmailSetup" v-slot="{ invalid }" tag="form" class="card shadow-card">
+        <ValidationObserver
+            @submit.prevent="EmailSetupSubmit"
+            ref="EmailSetup"
+            v-slot="{ invalid }"
+            tag="form"
+            class="card shadow-card"
+        >
             <FormLabel>{{ $t('admin_settings.email.section_email') }}</FormLabel>
 
-			<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
-				<AppInputText title="Mail Driver" :error="errors[0]">
-					<SelectInput v-model="mailDriver" :default="mailDriver" :options="mailDriverList" placeholder="Select your mail driver" :isError="errors[0]" />
-				</AppInputText>
-			</ValidationProvider>
+            <ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
+                <AppInputText title="Mail Driver" :error="errors[0]">
+                    <SelectInput
+                        v-model="mailDriver"
+                        :default="mailDriver"
+                        :options="mailDriverList"
+                        placeholder="Select your mail driver"
+                        :isError="errors[0]"
+                    />
+                </AppInputText>
+            </ValidationProvider>
 
-			<div v-if="mailDriver === 'smtp'">
-				<ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
-					<AppInputText title="Mail Host" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="smtp.host" placeholder="Type your mail host" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+            <div v-if="mailDriver === 'smtp'">
+                <ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Mail Host" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="smtp.host"
+                            placeholder="Type your mail host"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
-					<AppInputText title="Mail Port" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="smtp.port" placeholder="Type your mail port" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Mail Port" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="smtp.port"
+                            placeholder="Type your mail port"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
-					<AppInputText title="Mail Username" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="smtp.username" placeholder="Type your mail username" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Mail Username" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="smtp.username"
+                            placeholder="Type your mail username"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
-					<AppInputText title="Mail Password" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="smtp.password" placeholder="Type your mail password" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Mail Password" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="smtp.password"
+                            placeholder="Type your mail password"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Mail Encryption" rules="required" v-slot="{ errors }">
-					<AppInputText title="Mail Encryption" :error="errors[0]">
-						<SelectInput v-model="smtp.encryption" :default="smtp.encryption" :options="mailEncryptionList" placeholder="Select your mail encryption" :isError="errors[0]" />
-					</AppInputText>
-				</ValidationProvider>
-			</div>
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="Mail Encryption"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
+                    <AppInputText title="Mail Encryption" :error="errors[0]">
+                        <SelectInput
+                            v-model="smtp.encryption"
+                            :default="smtp.encryption"
+                            :options="mailEncryptionList"
+                            placeholder="Select your mail encryption"
+                            :isError="errors[0]"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
+            </div>
 
-			<div v-if="mailDriver === 'mailgun'">
-				<ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
-					<AppInputText title="Domain" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="mailgun.domain" placeholder="Type your domain" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+            <div v-if="mailDriver === 'mailgun'">
+                <ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Domain" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="mailgun.domain"
+                            placeholder="Type your domain"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
-					<AppInputText title="Secret" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="mailgun.secret" placeholder="Type your secret" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Secret" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="mailgun.secret"
+                            placeholder="Type your secret"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
-					<AppInputText title="Endpoint" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="mailgun.endpoint" placeholder="Type your endpoint" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
-			</div>
+                <ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Endpoint" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="mailgun.endpoint"
+                            placeholder="Type your endpoint"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
+            </div>
 
-			<div v-if="mailDriver === 'postmark'">
-				<ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
-					<AppInputText title="Token" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="postmark.token" placeholder="Type your token" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
-			</div>
+            <div v-if="mailDriver === 'postmark'">
+                <ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Token" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="postmark.token"
+                            placeholder="Type your token"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
+            </div>
 
-			<div v-if="mailDriver === 'ses'">
-				<ValidationProvider tag="div" mode="passive" name="Access Key" rules="required" v-slot="{ errors }">
-					<AppInputText title="Access Key" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="ses.access_key" placeholder="Type your access key" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+            <div v-if="mailDriver === 'ses'">
+                <ValidationProvider tag="div" mode="passive" name="Access Key" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Access Key" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="ses.access_key"
+                            placeholder="Type your access key"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Secret Access Key" rules="required" v-slot="{ errors }">
-					<AppInputText title="Secret Access Key" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="ses.secret_access_key" placeholder="Type your secret access key" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="Secret Access Key"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
+                    <AppInputText title="Secret Access Key" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="ses.secret_access_key"
+                            placeholder="Type your secret access key"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
-					<AppInputText title="Default Region" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="ses.default_region" placeholder="Type your default region" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Default Region" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="ses.default_region"
+                            placeholder="Type your default region"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
-					<AppInputText title="Session Token" :error="errors[0]">
-						<input class="focus-border-theme input-dark" v-model="ses.session_token" placeholder="Type your session token" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
-			</div>
+                <ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
+                    <AppInputText title="Session Token" :error="errors[0]">
+                        <input
+                            class="focus-border-theme input-dark"
+                            v-model="ses.session_token"
+                            placeholder="Type your session token"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
+            </div>
 
-            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="w-full sm:w-auto">
+            <ButtonBase
+                :loading="isSendingRequest"
+                :disabled="isSendingRequest"
+                type="submit"
+                button-style="theme"
+                class="w-full sm:w-auto"
+            >
                 {{ $t('admin_settings.email.save_button') }}
             </ButtonBase>
         </ValidationObserver>
@@ -116,7 +224,7 @@ import InfoBox from '../../../../components/Others/Forms/InfoBox'
 import { required } from 'vee-validate/dist/rules'
 import { events } from '../../../../bus'
 import axios from 'axios'
-import {mapGetters} from "vuex";
+import { mapGetters } from 'vuex'
 
 export default {
     name: 'AppAppearance',
@@ -134,78 +242,73 @@ export default {
         PageTab,
         InfoBox,
     },
-	computed: {
-		...mapGetters([
-			'mailEncryptionList',
-			'mailDriverList',
-		]),
-	},
+    computed: {
+        ...mapGetters(['mailEncryptionList', 'mailDriverList']),
+    },
     data() {
         return {
             isLoading: false,
             isSendingRequest: false,
-			mailDriver: undefined,
-			ses: {
-				access_key: undefined,
-				secret_access_key: undefined,
-				default_region: undefined,
-				session_token: undefined,
-			},
-			smtp: {
-				host: undefined,
-				port: undefined,
-				username: undefined,
-				password: undefined,
-				encryption: undefined,
-			},
-			mailgun: {
-				domain: undefined,
-				secret: undefined,
-				endpoint: undefined,
-			},
-			postmark: {
-				token: undefined,
-			},
+            mailDriver: undefined,
+            ses: {
+                access_key: undefined,
+                secret_access_key: undefined,
+                default_region: undefined,
+                session_token: undefined,
+            },
+            smtp: {
+                host: undefined,
+                port: undefined,
+                username: undefined,
+                password: undefined,
+                encryption: undefined,
+            },
+            mailgun: {
+                domain: undefined,
+                secret: undefined,
+                endpoint: undefined,
+            },
+            postmark: {
+                token: undefined,
+            },
         }
     },
     methods: {
         async EmailSetupSubmit() {
+            // Validate fields
+            const isValid = await this.$refs.EmailSetup.validate()
 
-			// Validate fields
-			const isValid = await this.$refs.EmailSetup.validate()
+            if (!isValid) return
 
-			if (!isValid) return
+            // Start loading
+            this.isSendingRequest = true
 
-			// Start loading
-			this.isSendingRequest = true
-
-			// Send request to get verify account
-			axios
-				.post('/api/admin/settings/email', {
-					environment: this.environment,
-					storage: this.storage,
-					mailDriver: this.mailDriver,
-					smtp: this.smtp,
-					mailgun: this.mailgun,
-					ses: this.ses,
-					postmark: this.postmark,
-				})
-				.then(() => {
-					events.$emit('toaster', {
-						type: 'success',
-						message: this.$t('toaster.email_set'),
-					})
-				})
-				.catch((error) => {
-					events.$emit('alert:open', {
-						title: this.$t('popup_error.title'),
-						message: this.$t('popup_error.message'),
-					})
-
-				})
-				.finally(() => {
-					this.isSendingRequest = false
-				})
+            // Send request to get verify account
+            axios
+                .post('/api/admin/settings/email', {
+                    environment: this.environment,
+                    storage: this.storage,
+                    mailDriver: this.mailDriver,
+                    smtp: this.smtp,
+                    mailgun: this.mailgun,
+                    ses: this.ses,
+                    postmark: this.postmark,
+                })
+                .then(() => {
+                    events.$emit('toaster', {
+                        type: 'success',
+                        message: this.$t('toaster.email_set'),
+                    })
+                })
+                .catch((error) => {
+                    events.$emit('alert:open', {
+                        title: this.$t('popup_error.title'),
+                        message: this.$t('popup_error.message'),
+                    })
+                })
+                .finally(() => {
+                    this.isSendingRequest = false
+                })
         },
     },
 }
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
index 6b2a2b7a..a6c5e7eb 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
@@ -7,7 +7,11 @@
                         {{ $t('Homepage') }}
                     </FormLabel>
 
-                    <AppInputSwitch :title="$t('Allow Homepage')" :description="$t('When this is turned on, your visitors can visit your default homepage.')" :is-last="true">
+                    <AppInputSwitch
+                        :title="$t('Allow Homepage')"
+                        :description="$t('When this is turned on, your visitors can visit your default homepage.')"
+                        :is-last="true"
+                    >
                         <SwitchInput
                             @input="$updateText('/admin/settings', 'allow_homepage', app.allow_homepage)"
                             v-model="app.allow_homepage"
@@ -27,7 +31,13 @@
 
                     <div class="block-wrapper">
                         <label>Title:</label>
-                        <ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="App Title"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
                             <input
                                 @input="$updateText('/admin/settings', 'header_title', app.header_title)"
                                 v-model="app.header_title"
@@ -41,7 +51,13 @@
 
                     <div class="block-wrapper">
                         <label>Description:</label>
-                        <ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="App Description"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
                             <textarea
                                 @input="$updateText('/admin/settings', 'header_description', app.header_description)"
                                 rows="2"
@@ -81,7 +97,13 @@
 
                         <div class="block-wrapper">
                             <label>Title:</label>
-                            <ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="App Title"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <input
                                     @input="$updateText('/admin/settings', 'features_title', app.features_title)"
                                     v-model="app.features_title"
@@ -95,9 +117,17 @@
 
                         <div class="block-wrapper">
                             <label>Description:</label>
-                            <ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="App Description"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <textarea
-                                    @input="$updateText('/admin/settings', 'features_description', app.features_description)"
+                                    @input="
+                                        $updateText('/admin/settings', 'features_description', app.features_description)
+                                    "
                                     rows="2"
                                     v-model="app.features_description"
                                     :class="{ 'border-red': errors[0] }"
@@ -120,7 +150,13 @@
                                     <label class="input-label"> Show section: </label>
                                 </div>
                                 <SwitchInput
-                                    @input="$updateText('/admin/settings', 'section_feature_boxes', app.section_feature_boxes)"
+                                    @input="
+                                        $updateText(
+                                            '/admin/settings',
+                                            'section_feature_boxes',
+                                            app.section_feature_boxes
+                                        )
+                                    "
                                     v-model="app.section_feature_boxes"
                                     class="switch"
                                     :state="app.section_feature_boxes"
@@ -135,7 +171,13 @@
                         </div>
                         <div class="block-wrapper">
                             <label>First Box Title:</label>
-                            <ValidationProvider tag="div" mode="passive" name="Feature Title 1" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="Feature Title 1"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <input
                                     @input="$updateText('/admin/settings', 'feature_title_1', app.feature_title_1)"
                                     v-model="app.feature_title_1"
@@ -148,9 +190,21 @@
                         </div>
                         <div class="block-wrapper">
                             <label>First Box Description:</label>
-                            <ValidationProvider tag="div" mode="passive" name="Feature Description 1" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="Feature Description 1"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <textarea
-                                    @input="$updateText('/admin/settings', 'feature_description_1', app.feature_description_1)"
+                                    @input="
+                                        $updateText(
+                                            '/admin/settings',
+                                            'feature_description_1',
+                                            app.feature_description_1
+                                        )
+                                    "
                                     rows="2"
                                     v-model="app.feature_description_1"
                                     :class="{ 'border-red': errors[0] }"
@@ -161,7 +215,13 @@
                         </div>
                         <div class="block-wrapper">
                             <label>Second Box Title:</label>
-                            <ValidationProvider tag="div" mode="passive" name="Feature Title 2" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="Feature Title 2"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <input
                                     @input="$updateText('/admin/settings', 'feature_title_2', app.feature_title_2)"
                                     v-model="app.feature_title_2"
@@ -174,9 +234,21 @@
                         </div>
                         <div class="block-wrapper">
                             <label>Second Box Description:</label>
-                            <ValidationProvider tag="div" mode="passive" name="Feature Description 2" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="Feature Description 2"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <textarea
-                                    @input="$updateText('/admin/settings', 'feature_description_2', app.feature_description_2)"
+                                    @input="
+                                        $updateText(
+                                            '/admin/settings',
+                                            'feature_description_2',
+                                            app.feature_description_2
+                                        )
+                                    "
                                     rows="2"
                                     v-model="app.feature_description_2"
                                     :class="{ 'border-red': errors[0] }"
@@ -187,7 +259,13 @@
                         </div>
                         <div class="block-wrapper">
                             <label>Third Box Title:</label>
-                            <ValidationProvider tag="div" mode="passive" name="Feature Title 3" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="Feature Title 3"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <input
                                     @input="$updateText('/admin/settings', 'feature_title_3', app.feature_title_3)"
                                     v-model="app.feature_title_3"
@@ -200,9 +278,21 @@
                         </div>
                         <div class="block-wrapper">
                             <label>Third Box Description:</label>
-                            <ValidationProvider tag="div" mode="passive" name="Feature Description 3" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="Feature Description 3"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <textarea
-                                    @input="$updateText('/admin/settings', 'feature_description_3', app.feature_description_3)"
+                                    @input="
+                                        $updateText(
+                                            '/admin/settings',
+                                            'feature_description_3',
+                                            app.feature_description_3
+                                        )
+                                    "
                                     rows="2"
                                     v-model="app.feature_description_3"
                                     :class="{ 'border-red': errors[0] }"
@@ -225,7 +315,13 @@
                                     <label class="input-label"> Show section: </label>
                                 </div>
                                 <SwitchInput
-                                    @input="$updateText('/admin/settings', 'section_pricing_content', app.section_pricing_content)"
+                                    @input="
+                                        $updateText(
+                                            '/admin/settings',
+                                            'section_pricing_content',
+                                            app.section_pricing_content
+                                        )
+                                    "
                                     v-model="app.section_pricing_content"
                                     class="switch"
                                     :state="app.section_pricing_content"
@@ -236,11 +332,21 @@
 
                     <div v-if="app.section_pricing_content">
                         <div class="block-wrapper">
-                            <img src="/assets/images/admin/pricing-content.jpg" alt="Main Features" class="page-image" />
+                            <img
+                                src="/assets/images/admin/pricing-content.jpg"
+                                alt="Main Features"
+                                class="page-image"
+                            />
                         </div>
                         <div class="block-wrapper">
                             <label>Title:</label>
-                            <ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="App Title"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <input
                                     @input="$updateText('/admin/settings', 'pricing_title', app.pricing_title)"
                                     v-model="app.pricing_title"
@@ -254,9 +360,17 @@
 
                         <div class="block-wrapper">
                             <label>Description:</label>
-                            <ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="App Description"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <textarea
-                                    @input="$updateText('/admin/settings', 'pricing_description', app.pricing_description)"
+                                    @input="
+                                        $updateText('/admin/settings', 'pricing_description', app.pricing_description)
+                                    "
                                     rows="2"
                                     v-model="app.pricing_description"
                                     :class="{ 'border-red': errors[0] }"
@@ -279,7 +393,9 @@
                                     <label class="input-label"> Show section: </label>
                                 </div>
                                 <SwitchInput
-                                    @input="$updateText('/admin/settings', 'section_get_started', app.section_get_started)"
+                                    @input="
+                                        $updateText('/admin/settings', 'section_get_started', app.section_get_started)
+                                    "
                                     v-model="app.section_get_started"
                                     class="switch"
                                     :state="app.section_get_started"
@@ -290,11 +406,21 @@
 
                     <div v-if="app.section_get_started">
                         <div class="block-wrapper">
-                            <img src="/assets/images/admin/get-started-content.jpg" alt="Main Features" class="page-image" />
+                            <img
+                                src="/assets/images/admin/get-started-content.jpg"
+                                alt="Main Features"
+                                class="page-image"
+                            />
                         </div>
                         <div class="block-wrapper">
                             <label>Title:</label>
-                            <ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="App Title"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <input
                                     @input="$updateText('/admin/settings', 'get_started_title', app.get_started_title)"
                                     v-model="app.get_started_title"
@@ -308,9 +434,21 @@
 
                         <div class="block-wrapper">
                             <label>Description:</label>
-                            <ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
+                            <ValidationProvider
+                                tag="div"
+                                mode="passive"
+                                name="App Description"
+                                rules="required"
+                                v-slot="{ errors }"
+                            >
                                 <textarea
-                                    @input="$updateText('/admin/settings', 'get_started_description', app.get_started_description)"
+                                    @input="
+                                        $updateText(
+                                            '/admin/settings',
+                                            'get_started_description',
+                                            app.get_started_description
+                                        )
+                                    "
                                     rows="2"
                                     v-model="app.get_started_description"
                                     :class="{ 'border-red': errors[0] }"
@@ -328,7 +466,13 @@
 
                     <div class="block-wrapper">
                         <label>Footer content:</label>
-                        <ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="App Title"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
                             <input
                                 @input="$updateText('/admin/settings', 'footer_content', app.footer_content)"
                                 v-model="app.footer_content"
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
index df180b9d..4b24ebfa 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
@@ -8,7 +8,10 @@
 
             <!--Available only when is not metered billing-->
             <div v-if="config.subscriptionType !== 'metered'">
-                <AppInputSwitch :title="$t('admin_settings.others.storage_limit')" :description="$t('admin_settings.others.storage_limit_help')">
+                <AppInputSwitch
+                    :title="$t('admin_settings.others.storage_limit')"
+                    :description="$t('admin_settings.others.storage_limit_help')"
+                >
                     <SwitchInput
                         @input="$updateText('/admin/settings', 'storage_limitation', app.storageLimitation)"
                         v-model="app.storageLimitation"
@@ -30,7 +33,10 @@
                 </AppInputText>
             </div>
 
-            <AppInputText :title="$t('admin_settings.others.upload_limit')" :description="$t('admin_settings.others.upload_limit_help')">
+            <AppInputText
+                :title="$t('admin_settings.others.upload_limit')"
+                :description="$t('admin_settings.others.upload_limit_help')"
+            >
                 <input
                     @input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit, true)"
                     v-model="app.uploadLimit"
@@ -42,7 +48,11 @@
                 />
             </AppInputText>
 
-            <AppInputText :title="$t('admin_settings.others.mimetypes_blacklist')" :description="$t('admin_settings.others.mimetypes_blacklist_help')" :is-last="true">
+            <AppInputText
+                :title="$t('admin_settings.others.mimetypes_blacklist')"
+                :description="$t('admin_settings.others.mimetypes_blacklist_help')"
+                :is-last="true"
+            >
                 <textarea
                     rows="2"
                     @input="$updateText('/admin/settings', 'mimetypes_blacklist', app.mimetypesBlacklist, true)"
@@ -60,8 +70,17 @@
                 {{ $t('Application') }}
             </FormLabel>
 
-            <AppInputButton :title="$t('Cache')" :description="$t('Did you change anything in your .env file? Then clear your cache.')">
-                <ButtonBase @click.native="flushCache" :loading="isFlushingCache" :disabled="isFlushingCache" class="w-full sm:w-auto" button-style="theme">
+            <AppInputButton
+                :title="$t('Cache')"
+                :description="$t('Did you change anything in your .env file? Then clear your cache.')"
+            >
+                <ButtonBase
+                    @click.native="flushCache"
+                    :loading="isFlushingCache"
+                    :disabled="isFlushingCache"
+                    class="w-full sm:w-auto"
+                    button-style="theme"
+                >
                     {{ $t('admin_settings.others.cache_clear') }}
                 </ButtonBase>
             </AppInputButton>
@@ -153,7 +172,13 @@
                     </AppInputText>
                 </ValidationProvider>
 
-                <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
+                <ButtonBase
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    button-style="theme"
+                    type="submit"
+                    class="w-full"
+                >
                     {{ $t('Store Credentials') }}
                 </ButtonBase>
             </ValidationObserver>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
index 579dcf0f..46f62f99 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
@@ -1,179 +1,208 @@
 <template>
-    <PageTab v-if="! isLoading">
-		<!--Cron check-->
-		<div class="card shadow-card">
-			<FormLabel icon="info">
-				Cron
-			</FormLabel>
+    <PageTab v-if="!isLoading">
+        <!--Cron check-->
+        <div class="card shadow-card">
+            <FormLabel icon="info"> Cron </FormLabel>
 
-			<div class="flex items-center justify-between">
-				<div class="text-left">
-					<b class="text-sm font-bold block">Cron Jobs</b>
-					<small v-if="!cron.running" class="text-xs text-gray-600">
-						We detect, your cron jobs probably doesn't work correctly, please check it.
-					</small>
-					<small v-if="cron.running" class="text-xs text-gray-600">
-						Latest Update: {{ cron.lastUpdate }}
-					</small>
-				</div>
-				<div class="flex items-center">
-					<check-icon v-if="cron.running" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
-					<x-icon v-if="!cron.running" size="16" class="vue-feather text-red-600 dark:text-red-600" />
+            <div class="flex items-center justify-between">
+                <div class="text-left">
+                    <b class="block text-sm font-bold">Cron Jobs</b>
+                    <small v-if="!cron.running" class="text-xs text-gray-600">
+                        We detect, your cron jobs probably doesn't work correctly, please check it.
+                    </small>
+                    <small v-if="cron.running" class="text-xs text-gray-600">
+                        Latest Update: {{ cron.lastUpdate }}
+                    </small>
+                </div>
+                <div class="flex items-center">
+                    <check-icon v-if="cron.running" size="16" class="vue-feather text-green-600 dark:text-green-600" />
+                    <x-icon v-if="!cron.running" size="16" class="vue-feather text-red-600 dark:text-red-600" />
 
-					<span class="ml-3 text-sm font-bold" :class="cron.running ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
-						{{ cron.running ? 'Working correctly' : "Doesn't work" }}
-					</span>
-				</div>
-			</div>
-		</div>
+                    <span
+                        class="ml-3 text-sm font-bold"
+                        :class="cron.running ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'"
+                    >
+                        {{ cron.running ? 'Working correctly' : "Doesn't work" }}
+                    </span>
+                </div>
+            </div>
+        </div>
 
-		<!--Database Backups check-->
-		<div class="card shadow-card">
-			<FormLabel icon="database">
-				Latest Database Backups
-			</FormLabel>
+        <!--Database Backups check-->
+        <div class="card shadow-card">
+            <FormLabel icon="database"> Latest Database Backups </FormLabel>
 
-			<InfoBox v-if="! backups.length" class="!mb-0">
-				<p v-html="$t('There is not any database backup stored.')"></p>
-			</InfoBox>
+            <InfoBox v-if="!backups.length" class="!mb-0">
+                <p v-html="$t('There is not any database backup stored.')"></p>
+            </InfoBox>
 
-			<InfoBox v-if="backups.length" class="!mb-3">
-				<p v-html="$t('You can find your backups in <b>/storage/app/app-backups</b>.')"></p>
-			</InfoBox>
+            <InfoBox v-if="backups.length" class="!mb-3">
+                <p v-html="$t('You can find your backups in <b>/storage/app/app-backups</b>.')"></p>
+            </InfoBox>
 
-			<div v-if="backups.length" v-for="(filename, i) in backups" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
-				<div class="text-left">
-					<b class="text-sm font-bold block">{{ filename }}</b>
-				</div>
-				<div class="flex items-center">
-					<check-icon size="16" class="vue-feather text-green-600 dark:text-green-600"/>
+            <div
+                v-if="backups.length"
+                v-for="(filename, i) in backups"
+                :key="i"
+                class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
+            >
+                <div class="text-left">
+                    <b class="block text-sm font-bold">{{ filename }}</b>
+                </div>
+                <div class="flex items-center">
+                    <check-icon size="16" class="vue-feather text-green-600 dark:text-green-600" />
 
-					<span class="ml-3 text-sm font-bold text-green-600 dark:text-green-600">
-						Stored Successfully
-					</span>
-				</div>
-			</div>
-		</div>
+                    <span class="ml-3 text-sm font-bold text-green-600 dark:text-green-600"> Stored Successfully </span>
+                </div>
+            </div>
+        </div>
 
-		<!--PHP version and ini check-->
-		<div class="card shadow-card">
-			<FormLabel icon="info">
-				PHP Settings
-			</FormLabel>
+        <!--PHP version and ini check-->
+        <div class="card shadow-card">
+            <FormLabel icon="info"> PHP Settings </FormLabel>
 
-			<div class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
-				<div class="text-left">
-					<b class="text-sm font-bold block">PHP Version</b>
-					<small v-if="!phpVersion.acceptable" class="text-xs text-gray-600">
-						You need PHP version at least {{ phpVersion.minimal }}.
-					</small>
-				</div>
-				<div class="flex items-center">
-					<check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
-					<x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600 dark:text-red-600" />
+            <div
+                class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
+            >
+                <div class="text-left">
+                    <b class="block text-sm font-bold">PHP Version</b>
+                    <small v-if="!phpVersion.acceptable" class="text-xs text-gray-600">
+                        You need PHP version at least {{ phpVersion.minimal }}.
+                    </small>
+                </div>
+                <div class="flex items-center">
+                    <check-icon
+                        v-if="phpVersion.acceptable"
+                        size="16"
+                        class="vue-feather text-green-600 dark:text-green-600"
+                    />
+                    <x-icon
+                        v-if="!phpVersion.acceptable"
+                        size="16"
+                        class="vue-feather text-red-600 dark:text-red-600"
+                    />
 
-					<span class="ml-3 text-sm font-bold" :class="phpVersion.acceptable ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
-						{{ phpVersion.current }}
-					</span>
-				</div>
-			</div>
+                    <span
+                        class="ml-3 text-sm font-bold"
+                        :class="
+                            phpVersion.acceptable
+                                ? 'text-green-600 dark:text-green-600'
+                                : 'text-red-600 dark:text-red-600'
+                        "
+                    >
+                        {{ phpVersion.current }}
+                    </span>
+                </div>
+            </div>
 
-			<div v-for="(values, setting, i) in ini" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
-				<div class="text-left">
-					<b class="text-sm font-bold block">{{ setting }}</b>
-					<small v-if="!values.status" class="text-xs text-gray-600">
-						We recommend set this value at least {{ values.minimal }}.
-					</small>
-				</div>
-				<div class="flex items-center">
-					<check-icon v-if="values.status" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
-					<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600 dark:text-red-600" />
+            <div
+                v-for="(values, setting, i) in ini"
+                :key="i"
+                class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
+            >
+                <div class="text-left">
+                    <b class="block text-sm font-bold">{{ setting }}</b>
+                    <small v-if="!values.status" class="text-xs text-gray-600">
+                        We recommend set this value at least {{ values.minimal }}.
+                    </small>
+                </div>
+                <div class="flex items-center">
+                    <check-icon v-if="values.status" size="16" class="vue-feather text-green-600 dark:text-green-600" />
+                    <x-icon v-if="!values.status" size="16" class="vue-feather text-red-600 dark:text-red-600" />
 
-					<span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
-						{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
-					</span>
-				</div>
-			</div>
-		</div>
+                    <span
+                        class="ml-3 text-sm font-bold"
+                        :class="values.status ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'"
+                    >
+                        {{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
+                    </span>
+                </div>
+            </div>
+        </div>
 
-		<!--PHP Extension info-->
-		<div class="card shadow-card">
-			<FormLabel icon="info">
-				PHP Extensions
-			</FormLabel>
+        <!--PHP Extension info-->
+        <div class="card shadow-card">
+            <FormLabel icon="info"> PHP Extensions </FormLabel>
 
-			<div v-if="modules" v-for="(value, module, i) in modules" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
-				<b class="text-sm font-bold">
-					{{ module }}
-				</b>
-				<div class="flex items-center">
-					<check-icon v-if="value" size="16" class="vue-feather text-green-600 dark:text-green-600"/>
-					<x-icon v-if="!value" size="16" class="vue-feather text-red-600 dark:text-red-600"/>
+            <div
+                v-if="modules"
+                v-for="(value, module, i) in modules"
+                :key="i"
+                class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
+            >
+                <b class="text-sm font-bold">
+                    {{ module }}
+                </b>
+                <div class="flex items-center">
+                    <check-icon v-if="value" size="16" class="vue-feather text-green-600 dark:text-green-600" />
+                    <x-icon v-if="!value" size="16" class="vue-feather text-red-600 dark:text-red-600" />
 
-					<span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'">
-						{{ value ? 'Module Installed' : 'Missing Module' }}
-					</span>
-				</div>
-			</div>
-		</div>
+                    <span
+                        class="ml-3 text-sm font-bold"
+                        :class="value ? 'text-green-600 dark:text-green-600' : 'text-red-600 dark:text-red-600'"
+                    >
+                        {{ value ? 'Module Installed' : 'Missing Module' }}
+                    </span>
+                </div>
+            </div>
+        </div>
     </PageTab>
 </template>
 
 <script>
-import InfoBox from "../../../../components/Others/Forms/InfoBox"
+import InfoBox from '../../../../components/Others/Forms/InfoBox'
 import FormLabel from '../../../../components/Others/Forms/FormLabel'
 import PageTab from '../../../../components/Others/Layout/PageTab'
 import { CheckIcon, XIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
-import axios from "axios";
+import axios from 'axios'
 
 export default {
     name: 'Server',
     components: {
         FormLabel,
-		InfoBox,
+        InfoBox,
         PageTab,
-		CheckIcon,
-		XIcon,
+        CheckIcon,
+        XIcon,
     },
     computed: {
         ...mapGetters(['config']),
-		isCheckedAPI() {
-			return typeof this.apiRunning !== 'undefined'
-		},
+        isCheckedAPI() {
+            return typeof this.apiRunning !== 'undefined'
+        },
     },
     data() {
         return {
-			isLoading: true,
-			ini: undefined,
-			cron: undefined,
-			modules: undefined,
-			phpVersion: undefined,
-			apiRunning: undefined,
-			backups: undefined,
+            isLoading: true,
+            ini: undefined,
+            cron: undefined,
+            modules: undefined,
+            phpVersion: undefined,
+            apiRunning: undefined,
+            backups: undefined,
         }
     },
     created() {
-		// Get status
-		axios.get('/api/admin/status')
-			.then(response => {
-				this.isLoading = false
-				this.ini = response.data.ini
-				this.cron = response.data.cron
-				this.modules = response.data.modules
-				this.phpVersion = response.data.php_version
-				this.backups = response.data.backups
-			})
+        // Get status
+        axios.get('/api/admin/status').then((response) => {
+            this.isLoading = false
+            this.ini = response.data.ini
+            this.cron = response.data.cron
+            this.modules = response.data.modules
+            this.phpVersion = response.data.php_version
+            this.backups = response.data.backups
+        })
 
-		// Ping API
-		axios
-			.get('/api/ping')
-			.then((response) => {
-				this.apiRunning = response.data === 'pong';
-			})
-			.catch(() => {
-				this.apiRunning = false
-			})
+        // Ping API
+        axios
+            .get('/api/ping')
+            .then((response) => {
+                this.apiRunning = response.data === 'pong'
+            })
+            .catch(() => {
+                this.apiRunning = false
+            })
     },
 }
 </script>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/SignInUp.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/SignInUp.vue
index ecb05b4a..8e1f6a92 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/SignInUp.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/SignInUp.vue
@@ -6,7 +6,10 @@
                 {{ $t('User Login/Registration') }}
             </FormLabel>
 
-            <AppInputSwitch :title="$t('admin_settings.others.allow_registration')" :description="$t('admin_settings.others.allow_registration_help')">
+            <AppInputSwitch
+                :title="$t('admin_settings.others.allow_registration')"
+                :description="$t('admin_settings.others.allow_registration_help')"
+            >
                 <SwitchInput
                     @input="$updateText('/admin/settings', 'registration', app.userRegistration)"
                     v-model="app.userRegistration"
@@ -15,7 +18,11 @@
                 />
             </AppInputSwitch>
 
-            <AppInputSwitch :title="$t('Require Email Verification')" :description="$t('admin_settings.others.allow_user_verification_help')" :is-last="true">
+            <AppInputSwitch
+                :title="$t('Require Email Verification')"
+                :description="$t('admin_settings.others.allow_user_verification_help')"
+                :is-last="true"
+            >
                 <SwitchInput
                     @input="$updateText('/admin/settings', 'user_verification', app.userVerification)"
                     v-model="app.userVerification"
@@ -29,7 +36,11 @@
         <div class="card shadow-card">
             <img :src="$getSocialLogo('facebook')" alt="Facebook" class="mb-8 h-5" />
 
-            <AppInputSwitch :title="$t('Allow Login via Facebook')" :description="$t('You users will be able to login via Facebook account.')" :is-last="!facebook.allowedService">
+            <AppInputSwitch
+                :title="$t('Allow Login via Facebook')"
+                :description="$t('You users will be able to login via Facebook account.')"
+                :is-last="!facebook.allowedService"
+            >
                 <SwitchInput
                     @input="$updateText('/admin/settings', 'allowed_facebook_login', facebook.allowedService)"
                     v-model="facebook.allowedService"
@@ -50,7 +61,9 @@
 
             <!--Set up facebook credentials-->
             <ValidationObserver
-                v-if="(!config.isFacebookLoginConfigured || facebook.isVisibleCredentialsForm) && facebook.allowedService"
+                v-if="
+                    (!config.isFacebookLoginConfigured || facebook.isVisibleCredentialsForm) && facebook.allowedService
+                "
                 @submit.prevent="storeCredentials('facebook_login')"
                 ref="credentialsForm"
                 v-slot="{ invalid }"
@@ -85,7 +98,13 @@
                     </AppInputText>
                 </ValidationProvider>
 
-                <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
+                <ButtonBase
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    button-style="theme"
+                    type="submit"
+                    class="w-full"
+                >
                     {{ $t('Store Credentials') }}
                 </ButtonBase>
             </ValidationObserver>
@@ -95,7 +114,11 @@
         <div class="card shadow-card">
             <img :src="$getSocialLogo('google')" alt="Google" class="mb-8 h-7" />
 
-            <AppInputSwitch :title="$t('Allow Login via Google')" :description="$t('You users will be able to login via Google account.')" :is-last="!google.allowedService">
+            <AppInputSwitch
+                :title="$t('Allow Login via Google')"
+                :description="$t('You users will be able to login via Google account.')"
+                :is-last="!google.allowedService"
+            >
                 <SwitchInput
                     @input="$updateText('/admin/settings', 'allowed_google_login', google.allowedService)"
                     v-model="google.allowedService"
@@ -151,7 +174,13 @@
                     </AppInputText>
                 </ValidationProvider>
 
-                <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
+                <ButtonBase
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    button-style="theme"
+                    type="submit"
+                    class="w-full"
+                >
                     {{ $t('Store Credentials') }}
                 </ButtonBase>
             </ValidationObserver>
@@ -161,7 +190,11 @@
         <div class="card shadow-card">
             <img :src="$getSocialLogo('github')" alt="Github" class="mb-8 h-5" />
 
-            <AppInputSwitch :title="$t('Allow Login via GitHub')" :description="$t('You users will be able to login via GitHub account.')" :is-last="!github.allowedService">
+            <AppInputSwitch
+                :title="$t('Allow Login via GitHub')"
+                :description="$t('You users will be able to login via GitHub account.')"
+                :is-last="!github.allowedService"
+            >
                 <SwitchInput
                     @input="$updateText('/admin/settings', 'allowed_github_login', github.allowedService)"
                     v-model="github.allowedService"
@@ -217,7 +250,13 @@
                     </AppInputText>
                 </ValidationProvider>
 
-                <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
+                <ButtonBase
+                    :disabled="isLoading"
+                    :loading="isLoading"
+                    button-style="theme"
+                    type="submit"
+                    class="w-full"
+                >
                     {{ $t('Store Credentials') }}
                 </ButtonBase>
             </ValidationObserver>
diff --git a/resources/js/views/Admin/Dashboard.vue b/resources/js/views/Admin/Dashboard.vue
index 3f88d255..932b940a 100644
--- a/resources/js/views/Admin/Dashboard.vue
+++ b/resources/js/views/Admin/Dashboard.vue
@@ -5,18 +5,30 @@
             <div v-if="config.isAdminVueFileManagerBar" class="mb-4 hidden justify-between md:mb-6 md:block md:flex">
                 <!--VueFileManager logo-->
                 <a href="https://vuefilemanager.com" target="_blank">
-                    <img src="/assets/images/vuefilemanager-horizontal-logo.svg" alt="VueFileManager" class="light-mode" />
+                    <img
+                        src="/assets/images/vuefilemanager-horizontal-logo.svg"
+                        alt="VueFileManager"
+                        class="light-mode"
+                    />
                 </a>
 
                 <!--App Info-->
                 <div class="mt-4 flex items-center md:mt-0">
-                    <a href="https://gist.github.com/MakingCG/9c07f8af392081ae5d5290d920a79b5d" target="_blank" class="mr-4 inline-block">
+                    <a
+                        href="https://gist.github.com/MakingCG/9c07f8af392081ae5d5290d920a79b5d"
+                        target="_blank"
+                        class="mr-4 inline-block"
+                    >
                         <span class="text-sm font-bold"> {{ $t('admin_page_dashboard.version') }}: </span>
                         <ColorLabel color="purple">
                             {{ data.app.version }}
                         </ColorLabel>
                     </a>
-                    <a href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986" target="_blank" class="mr-4 inline-block">
+                    <a
+                        href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986"
+                        target="_blank"
+                        class="mr-4 inline-block"
+                    >
                         <span class="text-sm font-bold"> {{ $t('admin_page_dashboard.license') }}: </span>
                         <ColorLabel color="purple">
                             {{ data.app.license }}
@@ -28,7 +40,11 @@
                             {{ config.subscriptionType }}
                         </ColorLabel>
                     </b>
-                    <a href="https://bit.ly/VueFileManager-survey" target="_blank" class="bg-theme-100 lg:ml-4 ml-8 inline-block hidden items-center rounded-lg py-1.5 px-3 md:flex">
+                    <a
+                        href="https://bit.ly/VueFileManager-survey"
+                        target="_blank"
+                        class="bg-theme-100 ml-8 inline-block hidden items-center rounded-lg py-1.5 px-3 md:flex lg:ml-4"
+                    >
                         <thumbs-up-icon size="15" class="vue-feather text-theme mr-2.5" />
                         <span class="text-theme text-sm font-bold">
                             {{ $t('Write a Feedback') }}
@@ -37,17 +53,33 @@
                 </div>
             </div>
 
-			<!--Create metered plan alert-->
-			<div v-if="config.subscriptionType === 'metered' && config.isEmptyPlans" class="p-5 bg-rose-200 rounded-xl shadow-card mb-6 flex items-center">
-				<alert-octagon-icon size="18" class="vue-feather text-rose-700 mr-4 shrink-0"/>
-				<p class="text-sm text-rose-700">As you installed app with metered subscription type, you have to <router-link :to="{name: 'CreateMeteredPlan'}" class="font-bold underline text-sm">create your plan</router-link> as soon as possible to prevent new user registration without automatically assigned subscription plan.</p>
-			</div>
+            <!--Create metered plan alert-->
+            <div
+                v-if="config.subscriptionType === 'metered' && config.isEmptyPlans"
+                class="mb-6 flex items-center rounded-xl bg-rose-200 p-5 shadow-card"
+            >
+                <alert-octagon-icon size="18" class="vue-feather mr-4 shrink-0 text-rose-700" />
+                <p class="text-sm text-rose-700">
+                    As you installed app with metered subscription type, you have to
+                    <router-link :to="{ name: 'CreateMeteredPlan' }" class="text-sm font-bold underline"
+                        >create your plan</router-link
+                    >
+                    as soon as possible to prevent new user registration without automatically assigned subscription
+                    plan.
+                </p>
+            </div>
 
-			<!--Cron Alert-->
-			<div v-if="! data.app.isRunningCron && !config.isDev" class="p-5 bg-rose-200 rounded-xl shadow-card mb-6 flex items-center">
-				<alert-octagon-icon size="18" class="vue-feather text-rose-700 mr-4 shrink-0"/>
-				<p class="text-sm text-rose-700">We detect your cron jobs probably doesn't work correctly, please check it, you need it for running app correctly. If you set your cron job, please get back one minute later.</p>
-			</div>
+            <!--Cron Alert-->
+            <div
+                v-if="!data.app.isRunningCron && !config.isDev"
+                class="mb-6 flex items-center rounded-xl bg-rose-200 p-5 shadow-card"
+            >
+                <alert-octagon-icon size="18" class="vue-feather mr-4 shrink-0 text-rose-700" />
+                <p class="text-sm text-rose-700">
+                    We detect your cron jobs probably doesn't work correctly, please check it, you need it for running
+                    app correctly. If you set your cron job, please get back one minute later.
+                </p>
+            </div>
 
             <!--Metric widgets-->
             <div class="mb-2 md:mb-6 md:flex md:space-x-6">
@@ -145,7 +177,10 @@
             </div>
 
             <!--Latest transactions widgets-->
-            <div v-if="['fixed', 'metered'].includes(this.config.subscriptionType)" class="card mb-4 shadow-card md:mb-6">
+            <div
+                v-if="['fixed', 'metered'].includes(this.config.subscriptionType)"
+                class="card mb-4 shadow-card md:mb-6"
+            >
                 <FormLabel icon="dollar">
                     {{ $t('Latest Transactions') }}
                 </FormLabel>
@@ -170,16 +205,16 @@ import BarChart from '../../components/UI/BarChart'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
 import WidgetLatestTransactions from '../../components/Admin/WidgetLatestTransactions'
-import InfoBox from "../../components/Others/Forms/InfoBox";
+import InfoBox from '../../components/Others/Forms/InfoBox'
 
 export default {
     name: 'Dashboard',
     components: {
-		InfoBox,
+        InfoBox,
         WidgetLatestTransactions,
         WidgetLatestRegistrations,
         ChevronRightIcon,
-		AlertOctagonIcon,
+        AlertOctagonIcon,
         WidgetWrapper,
         ThumbsUpIcon,
         ColorLabel,
diff --git a/resources/js/views/Admin/Invoices.vue b/resources/js/views/Admin/Invoices.vue
index 41f36503..4aebada0 100644
--- a/resources/js/views/Admin/Invoices.vue
+++ b/resources/js/views/Admin/Invoices.vue
@@ -1,22 +1,40 @@
 <template>
     <div>
         <!--Datatable-->
-        <DatatableWrapper v-if="!config.isEmptyTransactions" class="card overflow-x-auto shadow-card" api="/api/admin/transactions" :paginator="true" :columns="columns">
+        <DatatableWrapper
+            v-if="!config.isEmptyTransactions"
+            class="card overflow-x-auto shadow-card"
+            api="/api/admin/transactions"
+            :paginator="true"
+            :columns="columns"
+        >
             <template slot-scope="{ row }">
                 <!--Transaction rows-->
-                <MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" :user="true" @showDetail="showTransactionDetail" />
+                <MeteredTransactionRow
+                    v-if="config.subscriptionType === 'metered'"
+                    :row="row"
+                    :user="true"
+                    @showDetail="showTransactionDetail"
+                />
 
                 <FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" :user="true" />
 
                 <!--Transaction detail-->
-                <MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
+                <MeteredTransactionDetailRow
+                    v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id"
+                    :row="row"
+                />
             </template>
         </DatatableWrapper>
 
         <!--Empty State-->
         <div v-if="config.isEmptyTransactions" class="flex h-full items-center justify-center">
             <div class="text-center">
-                <img class="mb-6 inline-block w-28" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9ee.svg" alt="transaction" />
+                <img
+                    class="mb-6 inline-block w-28"
+                    src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9ee.svg"
+                    alt="transaction"
+                />
                 <h1 class="mb-1 text-2xl font-bold">
                     {{ $t('There is Nothing') }}
                 </h1>
diff --git a/resources/js/views/Admin/Languages/Language.vue b/resources/js/views/Admin/Languages/Language.vue
index 5c093c3c..b8791509 100644
--- a/resources/js/views/Admin/Languages/Language.vue
+++ b/resources/js/views/Admin/Languages/Language.vue
@@ -5,7 +5,8 @@
             <div
                 class="z-20 bg-white pt-3 sm:pt-5"
                 :class="{
-                    'fixed top-0 left-0 right-0 z-10 rounded-none bg-white bg-opacity-70 px-6 backdrop-blur-lg backdrop-filter dark:bg-dark-foreground': fixedNav,
+                    'fixed top-0 left-0 right-0 z-10 rounded-none bg-white bg-opacity-70 px-6 backdrop-blur-lg backdrop-filter dark:bg-dark-foreground':
+                        fixedNav,
                     'card sticky top-0 z-10 block py-0 shadow-card md:hidden': !fixedNav,
                 }"
             >
@@ -19,8 +20,12 @@
                         :key="language.data.id"
                         class="border-bottom-theme inline-block border-b-2 border-transparent px-4 py-5 text-sm font-bold"
                         :class="{
-                            'text-theme router-link-active': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale,
-                            'text-gray-600': !selectedLanguage && selectedLanguage.data.attributes.locale !== language.data.attributes.locale,
+                            'text-theme router-link-active':
+                                selectedLanguage &&
+                                selectedLanguage.data.attributes.locale === language.data.attributes.locale,
+                            'text-gray-600':
+                                !selectedLanguage &&
+                                selectedLanguage.data.attributes.locale !== language.data.attributes.locale,
                         }"
                     >
                         {{ language.data.attributes.name }}
@@ -52,12 +57,19 @@
                         <label
                             class="text-base font-bold"
                             :class="{
-                                'text-theme': selectedLanguage && selectedLanguage.data.attributes.locale === language.data.attributes.locale,
+                                'text-theme':
+                                    selectedLanguage &&
+                                    selectedLanguage.data.attributes.locale === language.data.attributes.locale,
                             }"
                         >
                             {{ language.data.attributes.name }}
                         </label>
-                        <x-icon v-if="language.data.attributes.locale !== 'en'" @click.stop="deleteLanguage(language)" class="opacity-0 group-hover:opacity-100" size="12" />
+                        <x-icon
+                            v-if="language.data.attributes.locale !== 'en'"
+                            @click.stop="deleteLanguage(language)"
+                            class="opacity-0 group-hover:opacity-100"
+                            size="12"
+                        />
                     </div>
 
                     <!-- Create Language button -->
@@ -78,10 +90,22 @@
                             {{ $t('language_settings') }}
                         </FormLabel>
 
-                        <ValidationProvider tag="div" mode="passive" name="Language name" rules="required" v-slot="{ errors }">
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Language name"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
                             <AppInputText :title="$t('language_name')" :error="errors[0]">
                                 <input
-                                    @input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'name', selectedLanguage.data.attributes.name)"
+                                    @input="
+                                        $updateText(
+                                            `/admin/languages/${selectedLanguage.data.id}`,
+                                            'name',
+                                            selectedLanguage.data.attributes.name
+                                        )
+                                    "
                                     v-model="selectedLanguage.data.attributes.name"
                                     :placeholder="$t('admin_settings.appearance.description_plac')"
                                     type="text"
@@ -93,14 +117,19 @@
 
                         <AppInputSwitch
                             :title="$t('set_as_default_language')"
-                            :description="$t('If this language is set as default, app will appear in this language for all users.')"
+                            :description="
+                                $t(
+                                    'If this language is set as default, app will appear in this language for all users.'
+                                )
+                            "
                             :is-last="true"
                         >
                             <SwitchInput
                                 @input="setDefaultLanguage"
                                 class="switch"
                                 :class="{
-                                    'disable-switch': selectedLanguage.data.attributes.locale === this.defaultLanguageLocale,
+                                    'disable-switch':
+                                        selectedLanguage.data.attributes.locale === this.defaultLanguageLocale,
                                 }"
                                 :state="selectedLanguage.data.attributes.locale === this.defaultLanguageLocale"
                             />
@@ -126,10 +155,21 @@
                         </div>
 
                         <ValidationProvider tag="div" name="Language string" rules="required" v-slot="{ errors }">
-                            <AppInputText :title="referenceTranslations[key]" :error="errors[0]" v-for="(translation, key) in translationList" :key="key">
+                            <AppInputText
+                                :title="referenceTranslations[key]"
+                                :error="errors[0]"
+                                v-for="(translation, key) in translationList"
+                                :key="key"
+                            >
                                 <textarea
                                     v-model="selectedLanguage.data.attributes.translations[key]"
-                                    @input="$updateText(`/admin/languages/${selectedLanguage.data.id}/strings`, key, selectedLanguage.data.attributes.translations[key])"
+                                    @input="
+                                        $updateText(
+                                            `/admin/languages/${selectedLanguage.data.id}/strings`,
+                                            key,
+                                            selectedLanguage.data.attributes.translations[key]
+                                        )
+                                    "
                                     :rows="selectedLanguage.data.attributes.translations[key].length >= 80 ? 3 : 1"
                                     class="focus-border-theme input-dark"
                                     :class="{ 'border-red': errors[0] }"
@@ -210,7 +250,9 @@ export default {
             return this.searchedTranslationResults && this.query !== ''
         },
         translationList() {
-            return this.isSearching ? this.searchedTranslationResults : this.selectedLanguage.data.attributes.translations
+            return this.isSearching
+                ? this.searchedTranslationResults
+                : this.selectedLanguage.data.attributes.translations
         },
     },
     methods: {
diff --git a/resources/js/views/Admin/Pages.vue b/resources/js/views/Admin/Pages.vue
index 7d87b85a..3f555b39 100644
--- a/resources/js/views/Admin/Pages.vue
+++ b/resources/js/views/Admin/Pages.vue
@@ -1,7 +1,13 @@
 <template>
     <div>
         <div class="card shadow-card">
-            <DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="overflow-x-auto">
+            <DatatableWrapper
+                @init="isLoading = false"
+                api="/api/admin/pages"
+                :paginator="false"
+                :columns="columns"
+                class="overflow-x-auto"
+            >
                 <template slot-scope="{ row }">
                     <tr class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
                         <td class="py-5 pr-3 md:pr-1">
@@ -24,7 +30,13 @@
                         <td class="px-3 md:px-1">
                             <span class="text-sm font-bold">
                                 <SwitchInput
-                                    @input="$updateText(`/admin/pages/${row.data.id}`, 'visibility', row.data.attributes.visibility)"
+                                    @input="
+                                        $updateText(
+                                            `/admin/pages/${row.data.id}`,
+                                            'visibility',
+                                            row.data.attributes.visibility
+                                        )
+                                    "
                                     v-model="row.data.attributes.visibility"
                                     :state="row.data.attributes.visibility"
                                     class="switch"
diff --git a/resources/js/views/Admin/Pages/PageEdit.vue b/resources/js/views/Admin/Pages/PageEdit.vue
index 418b5eb6..7e204001 100644
--- a/resources/js/views/Admin/Pages/PageEdit.vue
+++ b/resources/js/views/Admin/Pages/PageEdit.vue
@@ -4,7 +4,10 @@
             <FormLabel>
                 {{ page.data.attributes.title }}
             </FormLabel>
-            <AppInputSwitch :title="$t('admin_pages.form.visibility')" :description="$t('admin_pages.form.visibility_help')">
+            <AppInputSwitch
+                :title="$t('admin_pages.form.visibility')"
+                :description="$t('admin_pages.form.visibility_help')"
+            >
                 <SwitchInput @input="changeStatus" class="switch" :state="page.data.attributes.visibility" />
             </AppInputSwitch>
             <AppInputText :title="$t('admin_pages.form.title')">
diff --git a/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Billings.vue b/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Billings.vue
index cde90536..b9eede13 100644
--- a/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Billings.vue
+++ b/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Billings.vue
@@ -63,7 +63,13 @@
 
                 <AppInputText :title="$t('admin_settings.billings.postal_code')" class="w-full">
                     <input
-                        @input="$updateText('/admin/settings', 'billing_postal_code', billingInformation.billing_postal_code)"
+                        @input="
+                            $updateText(
+                                '/admin/settings',
+                                'billing_postal_code',
+                                billingInformation.billing_postal_code
+                            )
+                        "
                         v-model="billingInformation.billing_postal_code"
                         :placeholder="$t('admin_settings.billings.postal_code_plac')"
                         type="text"
@@ -84,7 +90,9 @@
 
             <AppInputText :title="$t('admin_settings.billings.phone_number')" :is-last="true">
                 <input
-                    @input="$updateText('/admin/settings', 'billing_phone_number', billingInformation.billing_phone_number)"
+                    @input="
+                        $updateText('/admin/settings', 'billing_phone_number', billingInformation.billing_phone_number)
+                    "
                     v-model="billingInformation.billing_phone_number"
                     :placeholder="$t('admin_settings.billings.phone_number_plac')"
                     type="text"
diff --git a/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue b/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue
index b7a89ecf..7ed01470 100644
--- a/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue
+++ b/resources/js/views/Admin/PaymentSettings/PaymentSettingsTab/Payments.vue
@@ -6,12 +6,25 @@
                 {{ $t('Subscription Payments') }}
             </FormLabel>
 
-            <AppInputSwitch :title="$t('Allow Subscription Payments')" :description="$t('User can subscribe to fixed or metered plan')" :is-last="!allowedPayments">
-                <SwitchInput @input="$updateText('/admin/settings', 'allowed_payments', allowedPayments)" v-model="allowedPayments" :state="allowedPayments" />
+            <AppInputSwitch
+                :title="$t('Allow Subscription Payments')"
+                :description="$t('User can subscribe to fixed or metered plan')"
+                :is-last="!allowedPayments"
+            >
+                <SwitchInput
+                    @input="$updateText('/admin/settings', 'allowed_payments', allowedPayments)"
+                    v-model="allowedPayments"
+                    :state="allowedPayments"
+                />
             </AppInputSwitch>
 
             <AppInputText v-if="allowedPayments" :title="$t('Subscription Type')" :is-last="true">
-                <SelectInput @change="subscriptionTypeChange" :default="config.subscriptionType" :options="subscriptionTypes" :placeholder="$t('Select your subscription type')" />
+                <SelectInput
+                    @change="subscriptionTypeChange"
+                    :default="config.subscriptionType"
+                    :options="subscriptionTypes"
+                    :placeholder="$t('Select your subscription type')"
+                />
             </AppInputText>
         </div>
 
@@ -21,7 +34,10 @@
                 {{ $t('Metered Billing Settings') }}
             </FormLabel>
 
-            <AppInputSwitch :title="$t('Allow Registration Bonus')" :description="$t('Credit user automatically bonus to his balance after registration.')">
+            <AppInputSwitch
+                :title="$t('Allow Registration Bonus')"
+                :description="$t('Credit user automatically bonus to his balance after registration.')"
+            >
                 <SwitchInput
                     @input="$updateText('/admin/settings', 'allowed_registration_bonus', allowedRegistrationBonus)"
                     v-model="allowedRegistrationBonus"
@@ -43,7 +59,11 @@
                 />
             </AppInputText>
 
-            <AppInputButton :title="$t('Metered Plan')" :description="$t('Your price set up for billing multiple features by user usage.')" :is-last="true">
+            <AppInputButton
+                :title="$t('Metered Plan')"
+                :description="$t('Your price set up for billing multiple features by user usage.')"
+                :is-last="true"
+            >
                 <router-link
                     v-if="config.isCreatedMeteredPlan"
                     :to="{
@@ -68,8 +88,16 @@
         <div v-if="allowedPayments" class="card shadow-card">
             <img :src="$getPaymentLogo('stripe')" alt="Stripe" class="mb-8 h-8" />
 
-            <AppInputSwitch :title="$t('Allow Stripe Service')" :description="$t('Allow your users pay by their credit card')" :is-last="!stripe.allowedService">
-                <SwitchInput @input="$updateText('/admin/settings', 'allowed_stripe', stripe.allowedService)" v-model="stripe.allowedService" :state="stripe.allowedService" />
+            <AppInputSwitch
+                :title="$t('Allow Stripe Service')"
+                :description="$t('Allow your users pay by their credit card')"
+                :is-last="!stripe.allowedService"
+            >
+                <SwitchInput
+                    @input="$updateText('/admin/settings', 'allowed_stripe', stripe.allowedService)"
+                    v-model="stripe.allowedService"
+                    :state="stripe.allowedService"
+                />
             </AppInputSwitch>
 
             <!--Stripe credentials are set up-->
@@ -82,15 +110,27 @@
                     >
                         <textarea
                             rows="2"
-                            @input="$updateText('/admin/settings', 'stripe_payment_description', stripe.paymentDescription, true)"
+                            @input="
+                                $updateText(
+                                    '/admin/settings',
+                                    'stripe_payment_description',
+                                    stripe.paymentDescription,
+                                    true
+                                )
+                            "
                             v-model="stripe.paymentDescription"
-                            :placeholder="$t('Describe in short which methods user can pay with this payment method...')"
+                            :placeholder="
+                                $t('Describe in short which methods user can pay with this payment method...')
+                            "
                             type="text"
                             class="focus-border-theme input-dark"
                         />
                     </AppInputText>
 
-                    <AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
+                    <AppInputText
+                        :title="$t('Your Webhook URL')"
+                        :description="$t('Please copy your url and paste it to the service webhook setup.')"
+                    >
                         <CopyInput size="small" :str="getWebhookEndpoint('stripe')" />
                     </AppInputText>
 
@@ -116,7 +156,13 @@
                     <FormLabel v-if="!stripe.isConfigured" icon="shield">
                         {{ $t('Configure Your Credentials') }}
                     </FormLabel>
-                    <ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Publishable Key"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
                             <input
                                 v-model="stripe.credentials.key"
@@ -138,7 +184,13 @@
                             />
                         </AppInputText>
                     </ValidationProvider>
-                    <ValidationProvider tag="div" mode="passive" name="Webhook Secret" rules="required" v-slot="{ errors }">
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Webhook Secret"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <AppInputText :title="$t('Webhook Secret')" :error="errors[0]">
                             <input
                                 v-model="stripe.credentials.webhook"
@@ -150,7 +202,13 @@
                         </AppInputText>
                     </ValidationProvider>
 
-                    <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
+                    <ButtonBase
+                        :disabled="isLoading"
+                        :loading="isLoading"
+                        button-style="theme"
+                        type="submit"
+                        class="w-full"
+                    >
                         {{ $t('Store Credentials') }}
                     </ButtonBase>
                 </ValidationObserver>
@@ -161,7 +219,11 @@
         <div v-if="allowedPayments" class="card shadow-card">
             <img :src="$getPaymentLogo('paystack')" alt="Paystack" class="mb-8 h-7" />
 
-            <AppInputSwitch :title="$t('Allow Paystack Service')" :description="$t('Allow your users pay by their credit card')" :is-last="!paystack.allowedService">
+            <AppInputSwitch
+                :title="$t('Allow Paystack Service')"
+                :description="$t('Allow your users pay by their credit card')"
+                :is-last="!paystack.allowedService"
+            >
                 <SwitchInput
                     @input="$updateText('/admin/settings', 'allowed_paystack', paystack.allowedService)"
                     v-model="paystack.allowedService"
@@ -173,21 +235,35 @@
             <div v-if="paystack.allowedService">
                 <div v-if="paystack.isConfigured">
                     <AppInputText
-                        @input="$updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription)"
+                        @input="
+                            $updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription)
+                        "
                         :title="$t('Payment Description')"
                         :description="$t('The description showed below user payment method selection.')"
                     >
                         <textarea
                             rows="2"
-                            @input="$updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription, true)"
+                            @input="
+                                $updateText(
+                                    '/admin/settings',
+                                    'paystack_payment_description',
+                                    paystack.paymentDescription,
+                                    true
+                                )
+                            "
                             v-model="paystack.paymentDescription"
-                            :placeholder="$t('Describe in short which methods user can pay with this payment method...')"
+                            :placeholder="
+                                $t('Describe in short which methods user can pay with this payment method...')
+                            "
                             type="text"
                             class="focus-border-theme input-dark"
                         />
                     </AppInputText>
 
-                    <AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
+                    <AppInputText
+                        :title="$t('Your Webhook URL')"
+                        :description="$t('Please copy your url and paste it to the service webhook setup.')"
+                    >
                         <CopyInput size="small" :str="getWebhookEndpoint('paystack')" />
                     </AppInputText>
 
@@ -213,7 +289,13 @@
                     <FormLabel v-if="!paystack.isConfigured" icon="shield">
                         {{ $t('Configure Your Credentials') }}
                     </FormLabel>
-                    <ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Publishable Key"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
                             <input
                                 v-model="paystack.credentials.key"
@@ -236,7 +318,13 @@
                         </AppInputText>
                     </ValidationProvider>
 
-                    <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
+                    <ButtonBase
+                        :disabled="isLoading"
+                        :loading="isLoading"
+                        button-style="theme"
+                        type="submit"
+                        class="w-full"
+                    >
                         {{ $t('Store Credentials') }}
                     </ButtonBase>
                 </ValidationObserver>
@@ -247,15 +335,27 @@
         <div v-if="allowedPayments" class="card shadow-card">
             <img :src="$getPaymentLogo('paypal')" alt="PayPal" class="mb-8 h-8" />
 
-            <AppInputSwitch :title="$t('Allow PayPal Service')" :description="$t('Allow your users pay by their credit card')" :is-last="!paypal.allowedService">
-                <SwitchInput @input="$updateText('/admin/settings', 'allowed_paypal', paypal.allowedService)" v-model="paypal.allowedService" :state="paypal.allowedService" />
+            <AppInputSwitch
+                :title="$t('Allow PayPal Service')"
+                :description="$t('Allow your users pay by their credit card')"
+                :is-last="!paypal.allowedService"
+            >
+                <SwitchInput
+                    @input="$updateText('/admin/settings', 'allowed_paypal', paypal.allowedService)"
+                    v-model="paypal.allowedService"
+                    :state="paypal.allowedService"
+                />
             </AppInputSwitch>
 
             <!--Stripe credentials are set up-->
             <div v-if="paypal.allowedService">
                 <div v-if="paypal.isConfigured">
                     <AppInputSwitch :title="$t('Live Mode')" :description="$t('Toggle amid live and sandbox mode')">
-                        <SwitchInput @input="$updateText('/admin/settings', 'paypal_live', config.isPayPalLive)" v-model="config.isPayPalLive" :state="config.isPayPalLive" />
+                        <SwitchInput
+                            @input="$updateText('/admin/settings', 'paypal_live', config.isPayPalLive)"
+                            v-model="config.isPayPalLive"
+                            :state="config.isPayPalLive"
+                        />
                     </AppInputSwitch>
 
                     <AppInputText
@@ -265,15 +365,27 @@
                     >
                         <textarea
                             rows="2"
-                            @input="$updateText('/admin/settings', 'paypal_payment_description', paypal.paymentDescription, true)"
+                            @input="
+                                $updateText(
+                                    '/admin/settings',
+                                    'paypal_payment_description',
+                                    paypal.paymentDescription,
+                                    true
+                                )
+                            "
                             v-model="paypal.paymentDescription"
-                            :placeholder="$t('Describe in short which methods user can pay with this payment method...')"
+                            :placeholder="
+                                $t('Describe in short which methods user can pay with this payment method...')
+                            "
                             type="text"
                             class="focus-border-theme input-dark"
                         />
                     </AppInputText>
 
-                    <AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
+                    <AppInputText
+                        :title="$t('Your Webhook URL')"
+                        :description="$t('Please copy your url and paste it to the service webhook setup.')"
+                    >
                         <CopyInput size="small" :str="getWebhookEndpoint('paypal')" />
                     </AppInputText>
 
@@ -299,7 +411,13 @@
                     <FormLabel v-if="!paypal.isConfigured" icon="shield">
                         {{ $t('Configure Your Credentials') }}
                     </FormLabel>
-                    <ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Publishable Key"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
                             <input
                                 v-model="paypal.credentials.key"
@@ -333,7 +451,13 @@
                         </AppInputText>
                     </ValidationProvider>
 
-                    <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
+                    <ButtonBase
+                        :disabled="isLoading"
+                        :loading="isLoading"
+                        button-style="theme"
+                        type="submit"
+                        class="w-full"
+                    >
                         {{ $t('Store Credentials') }}
                     </ButtonBase>
                 </ValidationObserver>
@@ -390,7 +514,9 @@ export default {
     computed: {
         ...mapGetters(['subscriptionTypes', 'config']),
         submitButtonText() {
-            return this.isLoading ? this.$t('admin_settings.payments.button_testing') : this.$t('admin_settings.payments.button_submit')
+            return this.isLoading
+                ? this.$t('admin_settings.payments.button_testing')
+                : this.$t('admin_settings.payments.button_submit')
         },
     },
     data() {
@@ -528,9 +654,10 @@ export default {
         },
     },
     created() {
-		events.$on('action:confirmed', (data) => {
-			if (data.operation === 'change-subscription-type') this.$updateText('/admin/settings', 'subscription_type', data.type)
-		})
+        events.$on('action:confirmed', (data) => {
+            if (data.operation === 'change-subscription-type')
+                this.$updateText('/admin/settings', 'subscription_type', data.type)
+        })
 
         // Set payment description
         this.stripe.paymentDescription = this.config.stripe_payment_description
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index 6ef99c21..0691e846 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -12,10 +12,20 @@
             </div>
 
             <!--Datatable-->
-            <DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/admin/plans" :paginator="true" :columns="columns" class="overflow-x-auto">
+            <DatatableWrapper
+                @data="plans = $event"
+                @init="isLoading = false"
+                api="/api/subscriptions/admin/plans"
+                :paginator="true"
+                :columns="columns"
+                class="overflow-x-auto"
+            >
                 <template slot-scope="{ row }">
                     <!--Metered subscription-->
-                    <tr v-if="config.subscriptionType === 'metered'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+                    <tr
+                        v-if="config.subscriptionType === 'metered'"
+                        class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+                    >
                         <td class="py-5 pr-3 md:pr-1">
                             <router-link
                                 class="text-sm font-bold"
@@ -73,10 +83,19 @@
                     </tr>
 
                     <!--Fixed subscription-->
-                    <tr v-if="config.subscriptionType === 'fixed'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+                    <tr
+                        v-if="config.subscriptionType === 'fixed'"
+                        class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+                    >
                         <td class="py-5 pr-3 md:pr-1">
                             <SwitchInput
-                                @input="$updateInput(`/subscriptions/admin/plans/${row.data.id}`, 'visible', row.data.attributes.visible)"
+                                @input="
+                                    $updateInput(
+                                        `/subscriptions/admin/plans/${row.data.id}`,
+                                        'visible',
+                                        row.data.attributes.visible
+                                    )
+                                "
                                 v-model="row.data.attributes.visible"
                                 :state="row.data.attributes.visible"
                                 class="switch"
@@ -144,7 +163,11 @@
         <!--Empty State-->
         <div v-if="config.isEmptyPlans" class="flex h-full items-center justify-center">
             <div class="text-center">
-                <img class="mb-6 inline-block w-28" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9fe.svg" alt="transaction" />
+                <img
+                    class="mb-6 inline-block w-28"
+                    src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f9fe.svg"
+                    alt="transaction"
+                />
 
                 <h1 class="mb-1 text-2xl font-bold">
                     {{ $t('There is Nothing') }}
diff --git a/resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue b/resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue
index 8d4ab4eb..7cb430e6 100644
--- a/resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue
+++ b/resources/js/views/Admin/Plans/Create/CreateFixedPlan.vue
@@ -39,7 +39,14 @@
 
             <div class="justify-items md:flex md:space-x-4">
                 <!--Price-->
-                <ValidationProvider tag="div" mode="passive" name="Price" rules="required" v-slot="{ errors }" class="w-full">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="Price"
+                    rules="required"
+                    v-slot="{ errors }"
+                    class="w-full"
+                >
                     <AppInputText :title="$t('admin_page_plans.form.price')" class="w-full">
                         <input
                             v-model="plan.amount"
@@ -55,9 +62,21 @@
                 </ValidationProvider>
 
                 <!--Currency-->
-                <ValidationProvider tag="div" mode="passive" name="Currency" rules="required" v-slot="{ errors }" class="w-full">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="Currency"
+                    rules="required"
+                    v-slot="{ errors }"
+                    class="w-full"
+                >
                     <AppInputText :title="$t('Currency')" class="w-full">
-                        <SelectInput v-model="plan.currency" :options="currencyList" :placeholder="$t('Select plan currency')" :isError="errors[0]" />
+                        <SelectInput
+                            v-model="plan.currency"
+                            :options="currencyList"
+                            :placeholder="$t('Select plan currency')"
+                            :isError="errors[0]"
+                        />
                     </AppInputText>
                 </ValidationProvider>
             </div>
@@ -65,7 +84,12 @@
             <!--Interval-->
             <ValidationProvider tag="div" mode="passive" name="Interval" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('Interval')" :is-last="true">
-                    <SelectInput v-model="plan.interval" :options="intervalList" :placeholder="$t('Select billing interval')" :isError="errors[0]" />
+                    <SelectInput
+                        v-model="plan.interval"
+                        :options="intervalList"
+                        :placeholder="$t('Select billing interval')"
+                        :isError="errors[0]"
+                    />
                 </AppInputText>
             </ValidationProvider>
         </div>
@@ -76,8 +100,17 @@
             </FormLabel>
 
             <!--Storage Capacity-->
-            <ValidationProvider tag="div" mode="passive" name="Max Storage Capacity" rules="required" v-slot="{ errors }">
-                <AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
+            <ValidationProvider
+                tag="div"
+                mode="passive"
+                name="Max Storage Capacity"
+                rules="required"
+                v-slot="{ errors }"
+            >
+                <AppInputText
+                    :title="$t('admin_page_plans.form.storage')"
+                    :description="$t('admin_page_plans.form.storage_helper')"
+                >
                     <input
                         v-model="plan.features.max_storage_amount"
                         :placeholder="$t('admin_page_plans.form.storage_plac')"
@@ -92,7 +125,11 @@
 
             <!--Team Members-->
             <ValidationProvider tag="div" mode="passive" name="Max Team Members" rules="required" v-slot="{ errors }">
-                <AppInputText :title="$t('Team Members')" :description="$t('To set unlimited team members, type -1 into form')" :is-last="true">
+                <AppInputText
+                    :title="$t('Team Members')"
+                    :description="$t('To set unlimited team members, type -1 into form')"
+                    :is-last="true"
+                >
                     <input
                         v-model="plan.features.max_team_members"
                         :placeholder="$t('Add max team members in number')"
diff --git a/resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue b/resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue
index ee1b4556..799335f9 100644
--- a/resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue
+++ b/resources/js/views/Admin/Plans/Create/CreateMeteredPlan.vue
@@ -33,7 +33,12 @@
             <!--Currency-->
             <ValidationProvider tag="div" mode="passive" name="Currency" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('Currency')" class="w-full" :is-last="true">
-                    <SelectInput v-model="plan.currency" :options="currencyList" :placeholder="$t('Select plan currency')" :isError="errors[0]" />
+                    <SelectInput
+                        v-model="plan.currency"
+                        :options="currencyList"
+                        :placeholder="$t('Select plan currency')"
+                        :isError="errors[0]"
+                    />
                 </AppInputText>
             </ValidationProvider>
         </div>
@@ -45,11 +50,26 @@
 
             <!--Bandwidth-->
             <div>
-                <AppInputSwitch :title="$t('Bandwidth Price per 1GB')" :description="$t('Charge your user by the amount of data he upload or download.')">
-                    <SwitchInput v-model="plan.features.bandwidth.active" class="switch" :state="plan.features.bandwidth.active" />
+                <AppInputSwitch
+                    :title="$t('Bandwidth Price per 1GB')"
+                    :description="$t('Charge your user by the amount of data he upload or download.')"
+                >
+                    <SwitchInput
+                        v-model="plan.features.bandwidth.active"
+                        class="switch"
+                        :state="plan.features.bandwidth.active"
+                    />
                 </AppInputSwitch>
 
-                <ValidationProvider v-if="plan.features.bandwidth.active" class="-mt-3" tag="div" mode="passive" name="Bandwidth Price" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    v-if="plan.features.bandwidth.active"
+                    class="-mt-3"
+                    tag="div"
+                    mode="passive"
+                    name="Bandwidth Price"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <AppInputText class="w-full">
                         <input
                             v-model="plan.features.bandwidth.per_unit"
@@ -67,12 +87,27 @@
 
             <!--Storage-->
             <div>
-                <AppInputSwitch :title="$t('Storage Price per 1GB')" :description="$t('Charge your user by the amount of data he has stored on the disk per 1GB.')">
-                    <SwitchInput v-model="plan.features.storage.active" class="switch" :state="plan.features.storage.active" />
+                <AppInputSwitch
+                    :title="$t('Storage Price per 1GB')"
+                    :description="$t('Charge your user by the amount of data he has stored on the disk per 1GB.')"
+                >
+                    <SwitchInput
+                        v-model="plan.features.storage.active"
+                        class="switch"
+                        :state="plan.features.storage.active"
+                    />
                 </AppInputSwitch>
             </div>
 
-            <ValidationProvider v-if="plan.features.storage.active" class="-mt-3" tag="div" mode="passive" name="Storage Price" rules="required" v-slot="{ errors }">
+            <ValidationProvider
+                v-if="plan.features.storage.active"
+                class="-mt-3"
+                tag="div"
+                mode="passive"
+                name="Storage Price"
+                rules="required"
+                v-slot="{ errors }"
+            >
                 <AppInputText class="w-full">
                     <input
                         v-model="plan.features.storage.per_unit"
@@ -89,12 +124,27 @@
 
             <!--Member-->
             <div>
-                <AppInputSwitch :title="$t('Price per 1 Member')" :description="$t('Charge your user by the total members he use in his Team Folders.')">
-                    <SwitchInput v-model="plan.features.member.active" class="switch" :state="plan.features.member.active" />
+                <AppInputSwitch
+                    :title="$t('Price per 1 Member')"
+                    :description="$t('Charge your user by the total members he use in his Team Folders.')"
+                >
+                    <SwitchInput
+                        v-model="plan.features.member.active"
+                        class="switch"
+                        :state="plan.features.member.active"
+                    />
                 </AppInputSwitch>
             </div>
 
-            <ValidationProvider v-if="plan.features.member.active" class="-mt-3" tag="div" mode="passive" name="Member Price" rules="required" v-slot="{ errors }">
+            <ValidationProvider
+                v-if="plan.features.member.active"
+                class="-mt-3"
+                tag="div"
+                mode="passive"
+                name="Member Price"
+                rules="required"
+                v-slot="{ errors }"
+            >
                 <AppInputText class="w-full">
                     <input
                         v-model="plan.features.member.per_unit"
@@ -111,11 +161,27 @@
 
             <!--Flat Fee-->
             <div>
-                <AppInputSwitch :title="$t('Flat Fee per Cycle')" :description="$t('Charge monthly flat fee.')" :is-last="!plan.features.flatFee.active">
-                    <SwitchInput v-model="plan.features.flatFee.active" class="switch" :state="plan.features.flatFee.active" />
+                <AppInputSwitch
+                    :title="$t('Flat Fee per Cycle')"
+                    :description="$t('Charge monthly flat fee.')"
+                    :is-last="!plan.features.flatFee.active"
+                >
+                    <SwitchInput
+                        v-model="plan.features.flatFee.active"
+                        class="switch"
+                        :state="plan.features.flatFee.active"
+                    />
                 </AppInputSwitch>
 
-                <ValidationProvider v-if="plan.features.flatFee.active" class="-mt-3" tag="div" mode="passive" name="FlatFee Price" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    v-if="plan.features.flatFee.active"
+                    class="-mt-3"
+                    tag="div"
+                    mode="passive"
+                    name="FlatFee Price"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <AppInputText class="w-full" :is-last="true">
                         <input
                             v-model="plan.features.flatFee.per_unit"
@@ -273,7 +339,7 @@ export default {
                     }
                 })
                 .catch((error) => {
-					console.log(error);
+                    console.log(error)
                     events.$emit('toaster', {
                         type: 'danger',
                         message: this.$t('popup_error.title'),
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanDelete.vue b/resources/js/views/Admin/Plans/Tabs/PlanDelete.vue
index 6be4df74..9117f991 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanDelete.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanDelete.vue
@@ -4,7 +4,13 @@
             {{ $t('admin_page_plans.form.title_delete') }}
         </FormLabel>
         <ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form">
-            <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Plan name" :rules="'required|is:' + plan.attributes.name">
+            <ValidationProvider
+                tag="div"
+                v-slot="{ errors }"
+                mode="passive"
+                name="Plan name"
+                :rules="'required|is:' + plan.attributes.name"
+            >
                 <AppInputText
                     :title="
                         $t('admin_page_user.label_delete_user', {
@@ -23,7 +29,13 @@
                             :class="{ 'border-red': errors[0] }"
                             class="focus-border-theme input-dark"
                         />
-                        <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="w-full sm:w-auto">
+                        <ButtonBase
+                            :loading="isSendingRequest"
+                            :disabled="isSendingRequest"
+                            type="submit"
+                            button-style="danger"
+                            class="w-full sm:w-auto"
+                        >
                             {{ $t('admin_page_plans.delete_plan_button') }}
                         </ButtonBase>
                     </div>
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue b/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
index 7e8f0385..302f53a2 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanFixedSettings.vue
@@ -6,9 +6,18 @@
             </FormLabel>
 
             <!--Visible-->
-            <AppInputSwitch :title="$t('admin_page_plans.form.status')" :description="$t('admin_page_plans.form.status_help')">
+            <AppInputSwitch
+                :title="$t('admin_page_plans.form.status')"
+                :description="$t('admin_page_plans.form.status_help')"
+            >
                 <SwitchInput
-                    @input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'visible', plan.attributes.visible)"
+                    @input="
+                        $updateInput(
+                            '/subscriptions/admin/plans/' + $route.params.id,
+                            'visible',
+                            plan.attributes.visible
+                        )
+                    "
                     v-model="plan.attributes.visible"
                     class="switch"
                     :state="plan.attributes.visible"
@@ -18,7 +27,9 @@
             <!--Name-->
             <AppInputText :title="$t('admin_page_plans.form.name')">
                 <input
-                    @input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'name', plan.attributes.name)"
+                    @input="
+                        $updateInput('/subscriptions/admin/plans/' + $route.params.id, 'name', plan.attributes.name)
+                    "
                     v-model="plan.attributes.name"
                     :placeholder="$t('admin_page_plans.form.name_plac')"
                     type="text"
@@ -29,7 +40,13 @@
             <!--Description-->
             <AppInputText :title="$t('admin_page_plans.form.description')">
                 <textarea
-                    @input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'description', plan.attributes.description)"
+                    @input="
+                        $updateInput(
+                            '/subscriptions/admin/plans/' + $route.params.id,
+                            'description',
+                            plan.attributes.description
+                        )
+                    "
                     v-model="plan.attributes.description"
                     :placeholder="$t('admin_page_plans.form.description_plac')"
                     class="focus-border-theme input-dark"
@@ -38,7 +55,11 @@
 
             <InfoBox style="margin-bottom: 0">
                 <p>
-                    {{ $t('Price change is not possible. If you would like to change your price or currency, please feel free to create a new plan.') }}
+                    {{
+                        $t(
+                            'Price change is not possible. If you would like to change your price or currency, please feel free to create a new plan.'
+                        )
+                    }}
                 </p>
             </InfoBox>
         </div>
@@ -48,9 +69,18 @@
             </FormLabel>
 
             <!--Storage Capacity-->
-            <AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
+            <AppInputText
+                :title="$t('admin_page_plans.form.storage')"
+                :description="$t('admin_page_plans.form.storage_helper')"
+            >
                 <input
-                    @input="$updateInput(`/subscriptions/admin/plans/${$route.params.id}/features`, 'max_storage_amount', plan.attributes.features.max_storage_amount)"
+                    @input="
+                        $updateInput(
+                            `/subscriptions/admin/plans/${$route.params.id}/features`,
+                            'max_storage_amount',
+                            plan.attributes.features.max_storage_amount
+                        )
+                    "
                     v-model="plan.attributes.features.max_storage_amount"
                     :placeholder="$t('admin_page_plans.form.storage_plac')"
                     type="number"
@@ -63,7 +93,13 @@
             <!--Team Members-->
             <AppInputText :title="$t('Max Team Members')" is-last="true">
                 <input
-                    @input="$updateInput(`/subscriptions/admin/plans/${$route.params.id}/features`, 'max_team_members', plan.attributes.features.max_team_members)"
+                    @input="
+                        $updateInput(
+                            `/subscriptions/admin/plans/${$route.params.id}/features`,
+                            'max_team_members',
+                            plan.attributes.features.max_team_members
+                        )
+                    "
                     v-model="plan.attributes.features.max_team_members"
                     :placeholder="$t('Add max team members in number')"
                     type="number"
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue b/resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue
index 1604b84d..04c038d8 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanMeteredSettings.vue
@@ -8,7 +8,9 @@
             <!--Name-->
             <AppInputText :title="$t('admin_page_plans.form.name')">
                 <input
-                    @input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'name', plan.attributes.name)"
+                    @input="
+                        $updateInput('/subscriptions/admin/plans/' + $route.params.id, 'name', plan.attributes.name)
+                    "
                     v-model="plan.attributes.name"
                     :placeholder="$t('admin_page_plans.form.name_plac')"
                     type="text"
@@ -19,7 +21,13 @@
             <!--Description-->
             <AppInputText :title="$t('admin_page_plans.form.description')" :is-last="true">
                 <textarea
-                    @input="$updateInput('/subscriptions/admin/plans/' + $route.params.id, 'description', plan.attributes.description)"
+                    @input="
+                        $updateInput(
+                            '/subscriptions/admin/plans/' + $route.params.id,
+                            'description',
+                            plan.attributes.description
+                        )
+                    "
                     v-model="plan.attributes.description"
                     :placeholder="$t('admin_page_plans.form.description_plac')"
                     class="focus-border-theme input-dark"
@@ -39,7 +47,9 @@
                 class="w-full"
             >
                 <input
-                    :value="formatCurrency(plan.attributes.currency, plan.attributes.features.bandwidth.tiers[0].per_unit)"
+                    :value="
+                        formatCurrency(plan.attributes.currency, plan.attributes.features.bandwidth.tiers[0].per_unit)
+                    "
                     type="text"
                     class="focus-border-theme input-dark"
                     disabled
@@ -54,7 +64,9 @@
                 class="w-full"
             >
                 <input
-                    :value="formatCurrency(plan.attributes.currency, plan.attributes.features.storage.tiers[0].per_unit)"
+                    :value="
+                        formatCurrency(plan.attributes.currency, plan.attributes.features.storage.tiers[0].per_unit)
+                    "
                     type="text"
                     class="focus-border-theme input-dark"
                     disabled
@@ -77,9 +89,16 @@
             </AppInputText>
 
             <!--Flat Fee-->
-            <AppInputText v-if="plan.attributes.features.flatFee" :title="$t('Flat Fee per Cycle')" :description="$t('Charge monthly flat fee.')" class="w-full">
+            <AppInputText
+                v-if="plan.attributes.features.flatFee"
+                :title="$t('Flat Fee per Cycle')"
+                :description="$t('Charge monthly flat fee.')"
+                class="w-full"
+            >
                 <input
-                    :value="formatCurrency(plan.attributes.currency, plan.attributes.features.flatFee.tiers[0].per_unit)"
+                    :value="
+                        formatCurrency(plan.attributes.currency, plan.attributes.features.flatFee.tiers[0].per_unit)
+                    "
                     type="text"
                     class="focus-border-theme input-dark"
                     disabled
@@ -88,7 +107,11 @@
 
             <InfoBox style="margin-bottom: 0">
                 <p>
-                    {{ $t('Price change is not possible. If you would like to change your price or currency, please feel free to create a new plan.') }}
+                    {{
+                        $t(
+                            'Price change is not possible. If you would like to change your price or currency, please feel free to create a new plan.'
+                        )
+                    }}
                 </p>
             </InfoBox>
         </div>
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue b/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
index e4b8e67e..9aaa031e 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
@@ -10,7 +10,10 @@
         >
             <!--Table data content-->
             <template slot-scope="{ row }">
-                <tr v-if="config.subscriptionType === 'metered'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+                <tr
+                    v-if="config.subscriptionType === 'metered'"
+                    class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+                >
                     <td class="py-3 pr-3 md:pr-1">
                         <router-link
                             class="flex items-center"
@@ -23,7 +26,10 @@
                         >
                             <MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
                             <div class="ml-3 pr-10">
-                                <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                                <b
+                                    class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                    style="max-width: 155px"
+                                >
                                     {{ row.data.relationships.user.data.attributes.name }}
                                 </b>
                                 <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -38,10 +44,17 @@
                         </span>
                     </td>
                     <td class="pl-3 text-right md:pl-1">
-                        <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
+                        <img
+                            class="inline-block max-h-5"
+                            :src="$getPaymentLogo(row.data.attributes.driver)"
+                            :alt="row.data.attributes.driver"
+                        />
                     </td>
                 </tr>
-                <tr v-if="config.subscriptionType === 'fixed'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+                <tr
+                    v-if="config.subscriptionType === 'fixed'"
+                    class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+                >
                     <td class="py-3 pr-3 md:pr-1">
                         <router-link
                             class="flex items-center"
@@ -54,7 +67,10 @@
                         >
                             <MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
                             <div class="ml-3 pr-10">
-                                <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                                <b
+                                    class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                    style="max-width: 155px"
+                                >
                                     {{ row.data.relationships.user.data.attributes.name }}
                                 </b>
                                 <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -76,7 +92,11 @@
                     <td class="px-3 md:px-1">
                         <span class="text-sm font-bold">
                             <!--todo: update renew attribute-->
-                            {{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
+                            {{
+                                row.data.attributes.renews_at
+                                    ? row.data.attributes.renews_at
+                                    : row.data.attributes.created_at
+                            }}
                         </span>
                     </td>
                     <td class="px-3 md:px-1">
@@ -85,7 +105,11 @@
                         </span>
                     </td>
                     <td class="pl-3 text-right md:pl-1">
-                        <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
+                        <img
+                            class="inline-block max-h-5"
+                            :src="$getPaymentLogo(row.data.attributes.driver)"
+                            :alt="row.data.attributes.driver"
+                        />
                     </td>
                 </tr>
             </template>
diff --git a/resources/js/views/Admin/Subscriptions.vue b/resources/js/views/Admin/Subscriptions.vue
index 8908c68c..c39d3b6c 100644
--- a/resources/js/views/Admin/Subscriptions.vue
+++ b/resources/js/views/Admin/Subscriptions.vue
@@ -24,7 +24,10 @@
                         >
                             <MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
                             <div class="ml-3 pr-10">
-                                <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                                <b
+                                    class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                    style="max-width: 155px"
+                                >
                                     {{ row.data.relationships.user.data.attributes.name }}
                                 </b>
                                 <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -51,7 +54,11 @@
                     <td class="px-3 md:px-1">
                         <span class="text-sm font-bold">
                             <!--todo: update renew attribute-->
-                            {{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
+                            {{
+                                row.data.attributes.renews_at
+                                    ? row.data.attributes.renews_at
+                                    : row.data.attributes.created_at
+                            }}
                         </span>
                     </td>
                     <td class="px-3 md:px-1">
@@ -60,7 +67,11 @@
                         </span>
                     </td>
                     <td class="pl-3 text-right md:pl-1">
-                        <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
+                        <img
+                            class="inline-block max-h-5"
+                            :src="$getPaymentLogo(row.data.attributes.driver)"
+                            :alt="row.data.attributes.driver"
+                        />
                     </td>
                 </tr>
             </template>
@@ -69,7 +80,11 @@
         <!--Empty State-->
         <div v-if="config.isEmptySubscriptions" class="flex h-full items-center justify-center">
             <div class="text-center">
-                <img class="mb-6 inline-block w-28" src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f5c3.svg" alt="transaction" />
+                <img
+                    class="mb-6 inline-block w-28"
+                    src="https://twemoji.maxcdn.com/v/13.1.0/svg/1f5c3.svg"
+                    alt="transaction"
+                />
 
                 <h1 class="mb-1 text-2xl font-bold">
                     {{ $t('There is Nothing') }}
diff --git a/resources/js/views/Admin/Users.vue b/resources/js/views/Admin/Users.vue
index 34a89f44..0f793913 100644
--- a/resources/js/views/Admin/Users.vue
+++ b/resources/js/views/Admin/Users.vue
@@ -14,10 +14,19 @@
             </div>
 
             <!--Datatable-->
-            <DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="overflow-x-auto">
+            <DatatableWrapper
+                @init="isLoading = false"
+                api="/api/admin/users"
+                :paginator="true"
+                :columns="columns"
+                class="overflow-x-auto"
+            >
                 <template slot-scope="{ row }">
                     <!--Not a subscription-->
-                    <tr v-if="config.subscriptionType === 'none'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+                    <tr
+                        v-if="config.subscriptionType === 'none'"
+                        class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+                    >
                         <td class="py-3 pr-3 md:pr-1">
                             <router-link
                                 :to="{
@@ -26,9 +35,16 @@
                                 }"
                             >
                                 <div class="flex items-center">
-                                    <MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
+                                    <MemberAvatar
+                                        :is-border="false"
+                                        :size="44"
+                                        :member="row.data.relationships.settings"
+                                    />
                                     <div class="ml-3 pr-10">
-                                        <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                                        <b
+                                            class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                            style="max-width: 155px"
+                                        >
                                             {{ row.data.relationships.settings.data.attributes.name }}
                                         </b>
                                         <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -85,7 +101,10 @@
                     </tr>
 
                     <!--Fixed subscription-->
-                    <tr v-if="config.subscriptionType === 'fixed'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+                    <tr
+                        v-if="config.subscriptionType === 'fixed'"
+                        class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+                    >
                         <td class="py-3 pr-3 md:pr-1">
                             <router-link
                                 :to="{
@@ -94,9 +113,16 @@
                                 }"
                             >
                                 <div class="flex items-center">
-                                    <MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
+                                    <MemberAvatar
+                                        :is-border="false"
+                                        :size="44"
+                                        :member="row.data.relationships.settings"
+                                    />
                                     <div class="ml-3 pr-10">
-                                        <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                                        <b
+                                            class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                            style="max-width: 155px"
+                                        >
                                             {{ row.data.relationships.settings.data.attributes.name }}
                                         </b>
                                         <span class="block text-xs text-gray-600 dark:text-gray-500">
@@ -158,7 +184,10 @@
                     </tr>
 
                     <!--Metered subscription-->
-                    <tr v-if="config.subscriptionType === 'metered'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
+                    <tr
+                        v-if="config.subscriptionType === 'metered'"
+                        class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5"
+                    >
                         <td class="py-3 pr-3 md:pr-1">
                             <router-link
                                 :to="{
@@ -167,9 +196,16 @@
                                 }"
                             >
                                 <div class="flex items-center">
-                                    <MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
+                                    <MemberAvatar
+                                        :is-border="false"
+                                        :size="44"
+                                        :member="row.data.relationships.settings"
+                                    />
                                     <div class="ml-3 pr-10">
-                                        <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
+                                        <b
+                                            class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold"
+                                            style="max-width: 155px"
+                                        >
                                             {{ row.data.relationships.settings.data.attributes.name }}
                                         </b>
                                         <span class="block text-xs text-gray-600 dark:text-gray-500">
diff --git a/resources/js/views/Admin/Users/UserCreate.vue b/resources/js/views/Admin/Users/UserCreate.vue
index 07334af9..2eb9880d 100644
--- a/resources/js/views/Admin/Users/UserCreate.vue
+++ b/resources/js/views/Admin/Users/UserCreate.vue
@@ -10,10 +10,15 @@
                 </AppInputText>
             </ValidationProvider>
 
-			<!--User Role-->
+            <!--User Role-->
             <ValidationProvider tag="div" mode="passive" name="permission" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_page_user.select_role')" :error="errors[0]">
-                    <SelectInput v-model="user.role" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
+                    <SelectInput
+                        v-model="user.role"
+                        :options="$translateSelectOptions(roles)"
+                        :placeholder="$t('admin_page_user.select_role')"
+                        :isError="errors[0]"
+                    />
                 </AppInputText>
             </ValidationProvider>
 
@@ -45,7 +50,14 @@
 
             <!--Password-->
             <div class="flex space-x-4">
-                <ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="password"
+                    rules="required"
+                    v-slot="{ errors }"
+                    class="w-full"
+                >
                     <AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]" :is-last="true">
                         <input
                             v-model="user.password"
@@ -56,8 +68,19 @@
                         />
                     </AppInputText>
                 </ValidationProvider>
-                <ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
-                    <AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]" :is-last="true">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="password confirm"
+                    rules="required"
+                    v-slot="{ errors }"
+                    class="w-full"
+                >
+                    <AppInputText
+                        :title="$t('page_registration.label_confirm_pass')"
+                        :error="errors[0]"
+                        :is-last="true"
+                    >
                         <input
                             v-model="user.password_confirmation"
                             :placeholder="$t('admin_page_user.create_user.label_conf_pass')"
@@ -70,7 +93,13 @@
             </div>
         </div>
         <div class="form-group">
-            <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full sm:w-auto">
+            <ButtonBase
+                :disabled="isLoading"
+                :loading="isLoading"
+                button-style="theme"
+                type="submit"
+                class="w-full sm:w-auto"
+            >
                 {{ $t('admin_page_user.create_user.submit') }}
             </ButtonBase>
         </div>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
index 9bd5daf0..4f943630 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
@@ -23,7 +23,13 @@
                             class="focus-border-theme input-dark"
                             :class="{ 'border-red': errors[0] }"
                         />
-                        <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="w-full sm:w-auto">
+                        <ButtonBase
+                            :loading="isSendingRequest"
+                            :disabled="isSendingRequest"
+                            type="submit"
+                            button-style="danger"
+                            class="w-full sm:w-auto"
+                        >
                             {{ $t('admin_page_user.delete_user') }}
                         </ButtonBase>
                     </div>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
index 8fbb83b0..847b92a8 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
@@ -7,10 +7,26 @@
             </FormLabel>
             <ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form">
                 <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Role" rules="required">
-                    <AppInputText :title="$t('admin_page_user.select_role')" :description="$t('user_box_role.description')" :error="errors[0]" :is-last="true">
+                    <AppInputText
+                        :title="$t('admin_page_user.select_role')"
+                        :description="$t('user_box_role.description')"
+                        :error="errors[0]"
+                        :is-last="true"
+                    >
                         <div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
-                            <SelectInput v-model="userRole" :options="$translateSelectOptions(roles)" :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]" />
-                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="w-full sm:w-auto">
+                            <SelectInput
+                                v-model="userRole"
+                                :options="$translateSelectOptions(roles)"
+                                :placeholder="$t('admin_page_user.select_role')"
+                                :isError="errors[0]"
+                            />
+                            <ButtonBase
+                                :loading="isSendingRequest"
+                                :disabled="isSendingRequest"
+                                type="submit"
+                                button-style="theme"
+                                class="w-full sm:w-auto"
+                            >
                                 {{ $t('admin_page_user.save_role') }}
                             </ButtonBase>
                         </div>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
index dd523045..d9cb901d 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
@@ -10,9 +10,19 @@
                 {{ user.data.relationships.balance.data.attributes.formatted }}
             </b>
 
-            <ValidationObserver ref="creditUserBalance" @submit.prevent="increaseBalance" v-slot="{ invalid }" tag="form" class="mt-6">
+            <ValidationObserver
+                ref="creditUserBalance"
+                @submit.prevent="increaseBalance"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mt-6"
+            >
                 <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Balance Amount" rules="required">
-                    <AppInputText :description="$t('User balance will be increased for the amount above.')" :error="errors[0]" :is-last="true">
+                    <AppInputText
+                        :description="$t('User balance will be increased for the amount above.')"
+                        :error="errors[0]"
+                        :is-last="true"
+                    >
                         <div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
                             <input
                                 v-model="balanceAmount"
@@ -23,7 +33,13 @@
                                 class="focus-border-theme input-dark"
                                 :class="{ 'border-red': errors[0] }"
                             />
-                            <ButtonBase type="submit" button-style="theme" class="w-full sm:w-auto" :loading="isUpdatingBalanceAmount" :disabled="isUpdatingBalanceAmount">
+                            <ButtonBase
+                                type="submit"
+                                button-style="theme"
+                                class="w-full sm:w-auto"
+                                :loading="isUpdatingBalanceAmount"
+                                :disabled="isUpdatingBalanceAmount"
+                            >
                                 {{ $t('Increase Balance') }}
                             </ButtonBase>
                         </div>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserPassword.vue b/resources/js/views/Admin/Users/UserTabs/UserPassword.vue
index d4f45726..27a65571 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserPassword.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserPassword.vue
@@ -5,8 +5,18 @@
                 {{ $t('user_box_password.title') }}
             </FormLabel>
 
-            <AppInputText :title="$t('Reset User Password')" :description="$t('user_box_password.description')" :is-last="true">
-                <ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest" :disabled="isSendingRequest" class="w-full sm:w-auto" button-style="theme">
+            <AppInputText
+                :title="$t('Reset User Password')"
+                :description="$t('user_box_password.description')"
+                :is-last="true"
+            >
+                <ButtonBase
+                    @click.native="requestPasswordResetEmail"
+                    :loading="isSendingRequest"
+                    :disabled="isSendingRequest"
+                    class="w-full sm:w-auto"
+                    button-style="theme"
+                >
                     {{ $t('admin_page_user.send_password_link') }}
                 </ButtonBase>
             </AppInputText>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
index 7c87f39b..b0274434 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
@@ -10,7 +10,12 @@
                 {{ storage.data.attributes.used }}
             </b>
 
-            <b v-if="config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)" class="mt-0.5 block text-sm text-gray-400">
+            <b
+                v-if="
+                    config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)
+                "
+                class="mt-0.5 block text-sm text-gray-400"
+            >
                 {{ $t('Total of') }} {{ storage.data.attributes.capacity }}
                 {{ $t('Used') }}
             </b>
@@ -53,13 +58,26 @@
         </div>
 
         <!--Set Storage Size-->
-        <div v-if="config.storageLimit && !user.data.attributes.subscription && config.subscriptionType !== 'metered'" class="card shadow-card">
+        <div
+            v-if="config.storageLimit && !user.data.attributes.subscription && config.subscriptionType !== 'metered'"
+            class="card shadow-card"
+        >
             <FormLabel>
                 {{ $t('user_box_storage.title') }}
             </FormLabel>
-            <ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form">
+            <ValidationObserver
+                ref="changeStorageCapacity"
+                @submit.prevent="changeStorageCapacity"
+                v-slot="{ invalid }"
+                tag="form"
+            >
                 <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
-                    <AppInputText :title="$t('admin_page_user.label_change_capacity')" :description="$t('user_box_storage.description')" :error="errors[0]" :is-last="true">
+                    <AppInputText
+                        :title="$t('admin_page_user.label_change_capacity')"
+                        :description="$t('user_box_storage.description')"
+                        :error="errors[0]"
+                        :is-last="true"
+                    >
                         <div class="space-y-4 sm:flex sm:space-x-4 sm:space-y-0">
                             <input
                                 v-model="capacity"
@@ -70,7 +88,13 @@
                                 class="focus-border-theme input-dark"
                                 :class="{ 'border-red': errors[0] }"
                             />
-                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="w-full sm:w-auto">
+                            <ButtonBase
+                                :loading="isSendingRequest"
+                                :disabled="isSendingRequest"
+                                type="submit"
+                                button-style="theme"
+                                class="w-full sm:w-auto"
+                            >
                                 {{ $t('admin_page_user.change_capacity') }}
                             </ButtonBase>
                         </div>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
index 635eb26f..6ea8587b 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
@@ -1,8 +1,16 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <UserMeteredSubscription v-if="subscription && config.subscriptionType === 'metered'" :subscription="subscription" :user="user" />
+        <UserMeteredSubscription
+            v-if="subscription && config.subscriptionType === 'metered'"
+            :subscription="subscription"
+            :user="user"
+        />
 
-        <UserFixedSubscription v-if="subscription && config.subscriptionType === 'fixed'" :subscription="subscription" :user="user" />
+        <UserFixedSubscription
+            v-if="subscription && config.subscriptionType === 'fixed'"
+            :subscription="subscription"
+            :user="user"
+        />
 
         <!--Free Plan-->
         <div v-if="!subscription && config.subscriptionType === 'fixed'" class="card shadow-card">
@@ -34,11 +42,18 @@
             >
                 <template slot-scope="{ row }">
                     <!--Transaction rows-->
-                    <MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" @showDetail="showTransactionDetail" />
+                    <MeteredTransactionRow
+                        v-if="config.subscriptionType === 'metered'"
+                        :row="row"
+                        @showDetail="showTransactionDetail"
+                    />
                     <FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" />
 
                     <!--Transaction detail-->
-                    <MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
+                    <MeteredTransactionDetailRow
+                        v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id"
+                        :row="row"
+                    />
                 </template>
 
                 <!--Empty page-->
@@ -89,7 +104,9 @@ export default {
                 fixed: ['type', 'user_id'],
             }
 
-            return this.$store.getters.transactionColumns.filter((column) => !filter[config.subscriptionType].includes(column.field))
+            return this.$store.getters.transactionColumns.filter(
+                (column) => !filter[config.subscriptionType].includes(column.field)
+            )
         },
     },
     data() {
diff --git a/resources/js/views/Auth/CreateNewPassword.vue b/resources/js/views/Auth/CreateNewPassword.vue
index 2fad554c..868eafec 100644
--- a/resources/js/views/Auth/CreateNewPassword.vue
+++ b/resources/js/views/Auth/CreateNewPassword.vue
@@ -4,10 +4,25 @@
         <AuthContent name="create-new-password" :visible="true">
             <Headline :title="$t('page_create_password.title')" :description="$t('page_create_password.subtitle')" />
 
-            <ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }" tag="form" class="mb-12 space-y-4 text-left">
+            <ValidationObserver
+                @submit.prevent="createNewPassword"
+                ref="create_new_password"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mb-12 space-y-4 text-left"
+            >
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_create_password.label_email') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="E-Mail" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_create_password.label_email') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="E-Mail"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="recoverPassword.email"
                             :placeholder="$t('page_login.placeholder_email')"
@@ -20,8 +35,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_create_password.label_new_pass') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="New Password" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_create_password.label_new_pass') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="New Password"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="recoverPassword.newPassword"
                             :placeholder="$t('page_create_password.label_new_pass')"
@@ -34,8 +58,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_create_password.label_confirm_pass') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Confirm Password" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_create_password.label_confirm_pass') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="Confirm Password"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="recoverPassword.newPasswordConfirm"
                             :placeholder="$t('page_create_password.label_confirm_pass')"
diff --git a/resources/js/views/Auth/ForgottenPassword.vue b/resources/js/views/Auth/ForgottenPassword.vue
index a2b6b313..795d337d 100644
--- a/resources/js/views/Auth/ForgottenPassword.vue
+++ b/resources/js/views/Auth/ForgottenPassword.vue
@@ -2,7 +2,10 @@
     <AuthContentWrapper ref="auth" class="h-screen">
         <!--Forgotten your password?-->
         <AuthContent name="forgotten-password" :visible="true">
-            <Headline :title="$t('page_forgotten_password.title')" :description="$t('page_forgotten_password.subtitle')" />
+            <Headline
+                :title="$t('page_forgotten_password.title')"
+                :description="$t('page_forgotten_password.subtitle')"
+            />
 
             <ValidationObserver
                 @submit.prevent="forgottenPassword"
@@ -11,7 +14,14 @@
                 tag="form"
                 class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0"
             >
-                <ValidationProvider tag="div" mode="passive" class="relative w-full text-left" name="E-Mail" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="relative w-full text-left"
+                    name="E-Mail"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         v-model="recoverEmail"
                         :placeholder="$t('page_login.placeholder_email')"
@@ -41,7 +51,10 @@
 
         <!--Password reset link send-->
         <AuthContent name="password-reset-link-sended" :visible="false">
-            <Headline :title="$t('page_forgotten_password.pass_sennded_title')" :description="$t('page_forgotten_password.pass_sennded_subtitle')" />
+            <Headline
+                :title="$t('page_forgotten_password.pass_sennded_title')"
+                :description="$t('page_forgotten_password.pass_sennded_subtitle')"
+            />
 
             <span class="block">
                 {{ $t('page_forgotten_password.password_remember_text') }}
diff --git a/resources/js/views/Auth/Headline.vue b/resources/js/views/Auth/Headline.vue
index a2ae4f43..5bf5b004 100644
--- a/resources/js/views/Auth/Headline.vue
+++ b/resources/js/views/Auth/Headline.vue
@@ -6,7 +6,12 @@
         <!--Default application logo-->
         <div v-if="!$slots.default">
             <!--Image logo-->
-            <img v-if="config.app_logo" class="mx-auto mb-6 w-28 md:w-32" :src="$getImage(config.app_logo)" :alt="config.app_name" />
+            <img
+                v-if="config.app_logo"
+                class="mx-auto mb-6 w-28 md:w-32"
+                :src="$getImage(config.app_logo)"
+                :alt="config.app_name"
+            />
 
             <!--Text logo if image isn't available-->
             <b v-if="!config.app_logo" class="mb-10 block text-xl font-bold">
diff --git a/resources/js/views/Auth/SignIn.vue b/resources/js/views/Auth/SignIn.vue
index 2228dcd8..4c8067b7 100644
--- a/resources/js/views/Auth/SignIn.vue
+++ b/resources/js/views/Auth/SignIn.vue
@@ -4,8 +4,21 @@
         <AuthContent name="log-in" :visible="true">
             <Headline :title="$t('page_login.title')" :description="$t('page_login.subtitle')" />
 
-            <ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form" class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0">
-                <ValidationProvider class="w-full text-left" tag="div" mode="passive" name="E-Mail" rules="required" v-slot="{ errors }">
+            <ValidationObserver
+                @submit.prevent="logIn"
+                ref="log_in"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0"
+            >
+                <ValidationProvider
+                    class="w-full text-left"
+                    tag="div"
+                    mode="passive"
+                    name="E-Mail"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
                         :class="{ 'border-red': errors[0] }"
@@ -16,7 +29,13 @@
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <AuthButton class="w-full justify-center md:w-min" icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading" :disabled="isLoading" />
+                <AuthButton
+                    class="w-full justify-center md:w-min"
+                    icon="chevron-right"
+                    :text="$t('page_login.button_next')"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                />
             </ValidationObserver>
 
             <SocialiteAuthenticationButtons />
@@ -31,12 +50,33 @@
 
         <!--Log in By Password-->
         <AuthContent name="sign-in" :visible="false">
-            <Headline v-if="checkedAccount" :title="$t('page_sign_in.title', { name: checkedAccount.name })" :description="$t('page_sign_in.subtitle')">
-                <img class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl" :src="checkedAccount.avatar.md" :alt="checkedAccount.name" />
+            <Headline
+                v-if="checkedAccount"
+                :title="$t('page_sign_in.title', { name: checkedAccount.name })"
+                :description="$t('page_sign_in.subtitle')"
+            >
+                <img
+                    class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl"
+                    :src="checkedAccount.avatar.md"
+                    :alt="checkedAccount.name"
+                />
             </Headline>
 
-            <ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form" class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0">
-                <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="User Password" rules="required" v-slot="{ errors }">
+            <ValidationObserver
+                @submit.prevent="singIn"
+                ref="sign_in"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0"
+            >
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="w-full text-left"
+                    name="User Password"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         v-model="loginPassword"
                         :placeholder="$t('page_sign_in.placeholder_password')"
@@ -47,7 +87,13 @@
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <AuthButton class="w-full justify-center md:w-min" icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading" :disabled="isLoading" />
+                <AuthButton
+                    class="w-full justify-center md:w-min"
+                    icon="chevron-right"
+                    :text="$t('page_sign_in.button_log_in')"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                />
             </ValidationObserver>
 
             <span class="block">
@@ -60,8 +106,16 @@
 
         <!--Resend verification email-->
         <AuthContent name="not-verified" :visible="false">
-            <Headline v-if="checkedAccount" :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })" :description="$t('page_not_verified.subtitle')">
-                <img class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl" :src="checkedAccount.avatar.md" :alt="checkedAccount.name" />
+            <Headline
+                v-if="checkedAccount"
+                :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })"
+                :description="$t('page_not_verified.subtitle')"
+            >
+                <img
+                    class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl"
+                    :src="checkedAccount.avatar.md"
+                    :alt="checkedAccount.name"
+                />
             </Headline>
 
             <span class="block">
@@ -74,12 +128,27 @@
 
         <!-- Log in by 2fa -->
         <AuthContent name="two-factor-authentication" :visible="false">
-            <Headline v-if="checkedAccount" :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })" :description="$t('page_sign_in_2fa_subtitle')">
-                <img class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl" :src="checkedAccount.avatar.md" :alt="checkedAccount.name" />
+            <Headline
+                v-if="checkedAccount"
+                :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })"
+                :description="$t('page_sign_in_2fa_subtitle')"
+            >
+                <img
+                    class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl"
+                    :src="checkedAccount.avatar.md"
+                    :alt="checkedAccount.name"
+                />
             </Headline>
 
             <ValidationObserver ref="two_factor_authentication" v-slot="{ invalid }" tag="form" class="mb-12">
-                <ValidationProvider tag="div" mode="passive" class="mx-auto" name="Two Factor Authentication" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="mx-auto"
+                    name="Two Factor Authentication"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         v-model="twoFactorCode"
                         ref="twoFactorCodeInput"
@@ -108,12 +177,27 @@
 
         <!-- Log in by 2fa with recovery code -->
         <AuthContent name="two-factor-recovery" :visible="false">
-            <Headline v-if="checkedAccount" :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })" :description="$t('page_sign_in.2fa_recovery_subtitle')">
-                <img class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl" :src="checkedAccount.avatar.md" :alt="checkedAccount.name" />
+            <Headline
+                v-if="checkedAccount"
+                :title="$t('page_sign_in_2fa_title', { name: checkedAccount.name })"
+                :description="$t('page_sign_in.2fa_recovery_subtitle')"
+            >
+                <img
+                    class="user-avatar mx-auto mb-6 w-28 rounded-xl shadow-xl"
+                    :src="checkedAccount.avatar.md"
+                    :alt="checkedAccount.name"
+                />
             </Headline>
 
             <ValidationObserver ref="two_factor_recovery" v-slot="{ invalid }" tag="form" class="mb-12">
-                <ValidationProvider tag="div" mode="passive" class="mx-auto" name="Two Factor Recovery" rules="required" v-slot="{ errors }">
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="mx-auto"
+                    name="Two Factor Recovery"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
                     <input
                         v-model="twoFactorRecoveryCode"
                         :placeholder="$t('page_sign_in.placeholder_2fa_recovery')"
@@ -299,7 +383,10 @@ export default {
         },
         async twoFactorChallenge(recovery) {
             // Check if is normal authentication or recovery
-            if ((!recovery && this.twoFactorCode.length === 6) || (recovery && this.twoFactorRecoveryCode.length === 21)) {
+            if (
+                (!recovery && this.twoFactorCode.length === 6) ||
+                (recovery && this.twoFactorRecoveryCode.length === 21)
+            ) {
                 this.isLoading = true
 
                 let payload = recovery ? { recovery_code: this.twoFactorRecoveryCode } : { code: this.twoFactorCode }
diff --git a/resources/js/views/Auth/SignUp.vue b/resources/js/views/Auth/SignUp.vue
index 0d782dcf..86b09c3a 100644
--- a/resources/js/views/Auth/SignUp.vue
+++ b/resources/js/views/Auth/SignUp.vue
@@ -4,10 +4,25 @@
         <AuthContent name="sign-up" :visible="true" class="mt-4 mb-12">
             <Headline :title="$t('page_registration.title')" :description="$t('page_registration.subtitle')" />
 
-            <ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form" class="mb-12 space-y-4 text-left">
+            <ValidationObserver
+                @submit.prevent="signUp"
+                ref="sign_up"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mb-12 space-y-4 text-left"
+            >
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_registration.label_email') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="E-Mail" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_registration.label_email') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="E-Mail"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="register.email"
                             :placeholder="$t('page_registration.placeholder_email')"
@@ -20,8 +35,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_registration.label_name') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Full Name" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_registration.label_name') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="Full Name"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="register.name"
                             :placeholder="$t('page_registration.placeholder_name')"
@@ -34,8 +58,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_registration.label_pass') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Your New Password" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_registration.label_pass') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="Your New Password"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="register.password"
                             :placeholder="$t('page_registration.placeholder_pass')"
@@ -48,8 +81,17 @@
                 </div>
 
                 <div class="mx-auto mb-5 md:flex md:max-w-lg md:items-center">
-                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right"> {{ $t('page_registration.label_confirm_pass') }}: </label>
-                    <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Confirm Your Password" rules="required" v-slot="{ errors }">
+                    <label class="mb-1.5 block font-bold md:mb-0 md:w-72 md:pr-4 md:text-right">
+                        {{ $t('page_registration.label_confirm_pass') }}:
+                    </label>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        class="w-full text-left"
+                        name="Confirm Your Password"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
                         <input
                             v-model="register.password_confirmation"
                             :placeholder="$t('page_registration.placeholder_confirm_pass')"
diff --git a/resources/js/views/Auth/SuccessfullyEmailVerified.vue b/resources/js/views/Auth/SuccessfullyEmailVerified.vue
index 088da10e..322b5731 100644
--- a/resources/js/views/Auth/SuccessfullyEmailVerified.vue
+++ b/resources/js/views/Auth/SuccessfullyEmailVerified.vue
@@ -1,7 +1,10 @@
 <template>
     <AuthContentWrapper class="h-screen">
         <AuthContent :visible="true">
-            <Headline :title="$t('page_email_successfully_verified.title')" :description="$t('page_email_successfully_verified.subtitle')" />
+            <Headline
+                :title="$t('page_email_successfully_verified.title')"
+                :description="$t('page_email_successfully_verified.subtitle')"
+            />
 
             <router-link :to="{ name: 'SignIn' }">
                 <AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" />
diff --git a/resources/js/views/Auth/SuccessfullySendEmail.vue b/resources/js/views/Auth/SuccessfullySendEmail.vue
index 41013f50..a334dfe9 100644
--- a/resources/js/views/Auth/SuccessfullySendEmail.vue
+++ b/resources/js/views/Auth/SuccessfullySendEmail.vue
@@ -1,7 +1,10 @@
 <template>
     <AuthContentWrapper class="h-screen">
         <AuthContent :visible="true">
-            <Headline :title="$t('page_email_successfully_send.title')" :description="$t('page_email_successfully_send.subtitle')" />
+            <Headline
+                :title="$t('page_email_successfully_send.title')"
+                :description="$t('page_email_successfully_send.subtitle')"
+            />
 
             <span class="block">
                 <router-link :to="{ name: 'Homepage' }" class="text-theme font-bold">
diff --git a/resources/js/views/FileView/Components/NavigationSharePanel.vue b/resources/js/views/FileView/Components/NavigationSharePanel.vue
index 15c14500..d0d2f747 100644
--- a/resources/js/views/FileView/Components/NavigationSharePanel.vue
+++ b/resources/js/views/FileView/Components/NavigationSharePanel.vue
@@ -1,53 +1,84 @@
 <template>
-    <ContentSidebar v-if="(navigationTree && navigationTree.length >= 1) && isVisibleNavigationBars" class="relative lg:!grid">
-
-		<!--Full screen button-->
-        <div @click="$store.dispatch('toggleNavigationBars')" class="absolute top-2.5 right-0 inline-block cursor-pointer p-3 opacity-0 transition-all duration-200 hover:opacity-70">
+    <ContentSidebar
+        v-if="navigationTree && navigationTree.length >= 1 && isVisibleNavigationBars"
+        class="relative lg:!grid"
+    >
+        <!--Full screen button-->
+        <div
+            @click="$store.dispatch('toggleNavigationBars')"
+            class="absolute top-2.5 right-0 inline-block cursor-pointer p-3 opacity-0 transition-all duration-200 hover:opacity-70"
+        >
             <chevrons-left-icon size="18" />
         </div>
 
-		<div class="mb-auto">
-			<!--Locations-->
-			<ContentGroup :title="$t('Base')">
-				<b @click="goHome" class="flex items-center py-2.5 cursor-pointer" :class="{'router-link-active': $route.params.id === sharedDetail.data.attributes.item_id}">
-					<home-icon size="17" class="vue-feather icon-active mr-2.5" />
-					<small class="text-active text-xs font-bold">
-						{{ $t('Home') }}
-					</small>
-				</b>
-			</ContentGroup>
+        <div class="mb-auto">
+            <!--Locations-->
+            <ContentGroup :title="$t('Base')">
+                <b
+                    @click="goHome"
+                    class="flex cursor-pointer items-center py-2.5"
+                    :class="{ 'router-link-active': $route.params.id === sharedDetail.data.attributes.item_id }"
+                >
+                    <home-icon size="17" class="vue-feather icon-active mr-2.5" />
+                    <small class="text-active text-xs font-bold">
+                        {{ $t('Home') }}
+                    </small>
+                </b>
+            </ContentGroup>
 
-			<!--Navigator-->
-			<ContentGroup :title="$t('sidebar.navigator_title')" can-collapse="true">
-				<TreeMenuNavigator class="folder-tree" :depth="0" :nodes="folder" v-for="folder in navigationTree" :key="folder.id" />
-			</ContentGroup>
-		</div>
+            <!--Navigator-->
+            <ContentGroup :title="$t('sidebar.navigator_title')" can-collapse="true">
+                <TreeMenuNavigator
+                    class="folder-tree"
+                    :depth="0"
+                    :nodes="folder"
+                    v-for="folder in navigationTree"
+                    :key="folder.id"
+                />
+            </ContentGroup>
+        </div>
 
-		<ContentGroup class="mt-auto">
-			<router-link v-if="! config.isAuthenticated" :to="{name: 'SignIn'}" class="flex items-center cursor-pointer group py-2.5">
+        <ContentGroup class="mt-auto">
+            <router-link
+                v-if="!config.isAuthenticated"
+                :to="{ name: 'SignIn' }"
+                class="group flex cursor-pointer items-center py-2.5"
+            >
                 <div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
                     <user-icon size="14" class="vue-feather group-hover-text-theme" />
                 </div>
-				<b class="text-xs group-hover-text-theme">
-					Sign In or Create Account
-				</b>
+                <b class="group-hover-text-theme text-xs"> Sign In or Create Account </b>
             </router-link>
-			<div @click="$store.dispatch('toggleThemeMode')" :title="$t('dark_mode_toggle')" class="flex items-center cursor-pointer group py-2.5">
+            <div
+                @click="$store.dispatch('toggleThemeMode')"
+                :title="$t('dark_mode_toggle')"
+                class="group flex cursor-pointer items-center py-2.5"
+            >
                 <div class="button-icon inline-block cursor-pointer rounded-xl pr-3">
                     <sun-icon v-if="isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
                     <moon-icon v-if="!isDarkMode" size="14" class="vue-feather group-hover-text-theme" />
                 </div>
-				<b class="text-xs group-hover-text-theme">
-					Set {{ isDarkMode ? 'Light' : 'Dark' }} Mode
-				</b>
+                <b class="group-hover-text-theme text-xs"> Set {{ isDarkMode ? 'Light' : 'Dark' }} Mode </b>
             </div>
-		</ContentGroup>
-
+        </ContentGroup>
     </ContentSidebar>
 </template>
 
 <script>
-import { UserIcon, SunIcon, MoonIcon, ChevronsLeftIcon, FolderIcon, HomeIcon, LinkIcon, Trash2Icon, UploadCloudIcon, UserCheckIcon, UsersIcon, XIcon } from 'vue-feather-icons'
+import {
+    UserIcon,
+    SunIcon,
+    MoonIcon,
+    ChevronsLeftIcon,
+    FolderIcon,
+    HomeIcon,
+    LinkIcon,
+    Trash2Icon,
+    UploadCloudIcon,
+    UserCheckIcon,
+    UsersIcon,
+    XIcon,
+} from 'vue-feather-icons'
 import TreeMenuNavigator from '../../../components/Others/TreeMenuNavigator'
 import ContentSidebar from '../../../components/Sidebar/ContentSidebar'
 import ContentGroup from '../../../components/Sidebar/ContentGroup'
@@ -60,11 +91,11 @@ export default {
         TreeMenuNavigator,
         ContentSidebar,
         ContentGroup,
-		UserIcon,
-		SunIcon,
-		MoonIcon,
+        UserIcon,
+        SunIcon,
+        MoonIcon,
         UploadCloudIcon,
-		ChevronsLeftIcon,
+        ChevronsLeftIcon,
         UserCheckIcon,
         FolderIcon,
         Trash2Icon,
@@ -74,7 +105,15 @@ export default {
         XIcon,
     },
     computed: {
-        ...mapGetters(['sharedDetail', 'navigation', 'clipboard', 'config', 'user', 'isVisibleNavigationBars', 'isDarkMode']),
+        ...mapGetters([
+            'sharedDetail',
+            'navigation',
+            'clipboard',
+            'config',
+            'user',
+            'isVisibleNavigationBars',
+            'isDarkMode',
+        ]),
         favourites() {
             return this.user.data.relationships.favourites.data.attributes.folders
         },
diff --git a/resources/js/views/FileView/Components/PanelNavigationFiles.vue b/resources/js/views/FileView/Components/PanelNavigationFiles.vue
index 0d2672ad..e249f299 100644
--- a/resources/js/views/FileView/Components/PanelNavigationFiles.vue
+++ b/resources/js/views/FileView/Components/PanelNavigationFiles.vue
@@ -54,8 +54,8 @@
                 @dragover.prevent="dragEnter"
                 @dragleave="dragLeave"
                 @drop="dragFinish($event)"
-                :class="{'border-theme': area}"
-                class="pl-5 -ml-5 rounded-lg border-2 border-dashed border-transparent"
+                :class="{ 'border-theme': area }"
+                class="-ml-5 rounded-lg border-2 border-dashed border-transparent pl-5"
             >
                 <!--Empty message-->
                 <small v-if="favourites.length === 0" class="text-xs text-gray-500 dark:text-gray-500" :key="0">
@@ -86,12 +86,9 @@
                             {{ folder.data.attributes.name }}
                         </span>
                     </div>
-					<div @click.stop="$removeFavourite(folder)" class="p-2 -m-2">
-						<x-icon
-							size="12"
-							class="mr-5 opacity-0 group-hover:opacity-100"
-						/>
-					</div>
+                    <div @click.stop="$removeFavourite(folder)" class="-m-2 p-2">
+                        <x-icon size="12" class="mr-5 opacity-0 group-hover:opacity-100" />
+                    </div>
                 </div>
             </div>
         </ContentGroup>
diff --git a/resources/js/views/FileView/Files.vue b/resources/js/views/FileView/Files.vue
index f7a306b8..267c89b5 100644
--- a/resources/js/views/FileView/Files.vue
+++ b/resources/js/views/FileView/Files.vue
@@ -4,7 +4,11 @@
             <OptionGroup v-if="item && isFolder">
                 <Option
                     @click.native="addToFavourites"
-                    :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
+                    :title="
+                        isInFavourites
+                            ? $t('context_menu.remove_from_favourites')
+                            : $t('context_menu.add_to_favourites')
+                    "
                     icon="favourites"
                 />
             </OptionGroup>
@@ -14,8 +18,17 @@
                 <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
             </OptionGroup>
             <OptionGroup v-if="item">
-                <Option @click.native="$shareFileOrFolder(item)" :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
-                <Option @click.native="$convertAsTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="users" />
+                <Option
+                    @click.native="$shareFileOrFolder(item)"
+                    :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
+                    icon="share"
+                />
+                <Option
+                    @click.native="$convertAsTeamFolder(item)"
+                    v-if="isFolder"
+                    :title="$t('Convert as Team Folder')"
+                    icon="users"
+                />
             </OptionGroup>
 
             <OptionGroup v-if="item">
@@ -25,12 +38,27 @@
 
         <MobileCreateMenu>
             <OptionGroup :title="$t('Upload')">
-                <OptionUpload :class="{ 'is-inactive': !hasCapacity }" :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
+                <OptionUpload
+                    :class="{ 'is-inactive': !hasCapacity }"
+                    :title="$t('actions.upload')"
+                    type="file"
+                    :is-hover-disabled="true"
+                />
                 <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
             </OptionGroup>
             <OptionGroup :title="$t('Create')">
-                <Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
-                <Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
+                <Option
+                    @click.stop.native="$createTeamFolder"
+                    :title="$t('Create Team Folder')"
+                    icon="users"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.stop.native="createFolder"
+                    :title="$t('actions.create_folder')"
+                    icon="folder-plus"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
         </MobileCreateMenu>
 
@@ -49,7 +77,12 @@
                 :class="{ 'is-inactive': clipboard.length < 1 }"
                 :action="$t('actions.delete')"
             />
-            <ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
+            <ToolbarButton
+                @click.native="$downloadSelection(item)"
+                class="action-btn"
+                source="download"
+                :action="$t('actions.download')"
+            />
         </MobileMultiSelectToolbar>
 
         <ContextMenu>
@@ -59,7 +92,11 @@
                     <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
                 </OptionGroup>
                 <OptionGroup>
-                    <Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
+                    <Option
+                        @click.native="$createFolder"
+                        :title="$t('context_menu.create_folder')"
+                        icon="create-folder"
+                    />
                 </OptionGroup>
             </template>
 
@@ -67,26 +104,51 @@
                 <OptionGroup v-if="isFolder">
                     <Option
                         @click.native="addToFavourites"
-                        :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
+                        :title="
+                            isInFavourites
+                                ? $t('context_menu.remove_from_favourites')
+                                : $t('context_menu.add_to_favourites')
+                        "
                         icon="favourites"
                     />
                 </OptionGroup>
                 <OptionGroup>
-                    <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+                    <Option
+                        @click.native="$renameFileOrFolder(item)"
+                        :title="$t('context_menu.rename')"
+                        icon="rename"
+                    />
                     <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
                     <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
                 </OptionGroup>
                 <OptionGroup>
                     <Option
                         @click.native="$shareFileOrFolder(item)"
-                        :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
+                        :title="
+                            item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')
+                        "
                         icon="share"
                     />
-                    <Option @click.native="$convertAsTeamFolder(item)" v-if="isFolder" :title="$t('Convert as Team Folder')" icon="user-plus" />
+                    <Option
+                        @click.native="$convertAsTeamFolder(item)"
+                        v-if="isFolder"
+                        :title="$t('Convert as Team Folder')"
+                        icon="user-plus"
+                    />
+                    <Option
+                        @click.native="$convertAsTeamFolder(item)"
+                        v-if="isFolder"
+                        :title="$t('Send Upload Request')"
+                        icon="upload-cloud"
+                    />
                 </OptionGroup>
                 <OptionGroup>
                     <Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
-                    <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+                    <Option
+                        @click.native="$downloadSelection(item)"
+                        :title="$t('context_menu.download')"
+                        icon="download"
+                    />
                 </OptionGroup>
             </template>
 
@@ -94,7 +156,11 @@
                 <OptionGroup v-if="!hasFile">
                     <Option
                         @click.native="addToFavourites"
-                        :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
+                        :title="
+                            isInFavourites
+                                ? $t('context_menu.remove_from_favourites')
+                                : $t('context_menu.add_to_favourites')
+                        "
                         icon="favourites"
                     />
                 </OptionGroup>
@@ -115,7 +181,11 @@
             <MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
                 {{ $getCurrentSectionName() }}
             </MobileActionButton>
-            <MobileActionButton @click.native="$showMobileMenu('create-list')" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
+            <MobileActionButton
+                @click.native="$showMobileMenu('create-list')"
+                v-if="$checkPermission(['master', 'editor'])"
+                icon="cloud-plus"
+            >
                 {{ $t('mobile.create') }}
             </MobileActionButton>
             <MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
diff --git a/resources/js/views/FileView/MySharedItems.vue b/resources/js/views/FileView/MySharedItems.vue
index 118bb1d1..3c723ac2 100644
--- a/resources/js/views/FileView/MySharedItems.vue
+++ b/resources/js/views/FileView/MySharedItems.vue
@@ -5,24 +5,38 @@
                 <OptionGroup v-if="isFolder">
                     <Option
                         @click.native="addToFavourites"
-                        :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
+                        :title="
+                            isInFavourites
+                                ? $t('context_menu.remove_from_favourites')
+                                : $t('context_menu.add_to_favourites')
+                        "
                         icon="favourites"
                     />
                 </OptionGroup>
                 <OptionGroup>
-                    <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+                    <Option
+                        @click.native="$renameFileOrFolder(item)"
+                        :title="$t('context_menu.rename')"
+                        icon="rename"
+                    />
                     <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
                 </OptionGroup>
                 <OptionGroup>
                     <Option
                         @click.native="$shareFileOrFolder(item)"
-                        :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
+                        :title="
+                            item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')
+                        "
                         icon="share"
                     />
                 </OptionGroup>
                 <OptionGroup>
                     <Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
-                    <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+                    <Option
+                        @click.native="$downloadSelection(item)"
+                        :title="$t('context_menu.download')"
+                        icon="download"
+                    />
                 </OptionGroup>
             </template>
 
@@ -30,7 +44,11 @@
                 <OptionGroup v-if="!hasFile">
                     <Option
                         @click.native="addToFavourites"
-                        :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
+                        :title="
+                            isInFavourites
+                                ? $t('context_menu.remove_from_favourites')
+                                : $t('context_menu.add_to_favourites')
+                        "
                         icon="favourites"
                     />
                 </OptionGroup>
@@ -48,7 +66,11 @@
             <OptionGroup v-if="isFolder">
                 <Option
                     @click.native="addToFavourites"
-                    :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
+                    :title="
+                        isInFavourites
+                            ? $t('context_menu.remove_from_favourites')
+                            : $t('context_menu.add_to_favourites')
+                    "
                     icon="favourites"
                 />
             </OptionGroup>
@@ -57,7 +79,15 @@
                 <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
             </OptionGroup>
             <OptionGroup>
-                <Option @click.native="$shareFileOrFolder(item)" :title="item && item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
+                <Option
+                    @click.native="$shareFileOrFolder(item)"
+                    :title="
+                        item && item.data.relationships.shared
+                            ? $t('context_menu.share_edit')
+                            : $t('context_menu.share')
+                    "
+                    icon="share"
+                />
             </OptionGroup>
             <OptionGroup>
                 <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
@@ -86,7 +116,12 @@
         <FileBrowser />
 
         <MobileMultiSelectToolbar>
-            <ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
+            <ToolbarButton
+                @click.native="$downloadSelection(item)"
+                class="action-btn"
+                source="download"
+                :action="$t('actions.download')"
+            />
             <ToolbarButton @click.native="$shareCancel" class="action-btn" source="shared-off" />
         </MobileMultiSelectToolbar>
     </div>
diff --git a/resources/js/views/FileView/Public.vue b/resources/js/views/FileView/Public.vue
index c3f15676..37b9903f 100644
--- a/resources/js/views/FileView/Public.vue
+++ b/resources/js/views/FileView/Public.vue
@@ -3,17 +3,35 @@
         <MobileContextMenu>
             <template v-slot:editor>
                 <OptionGroup>
-                    <Option v-if="item" @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
-                    <Option v-if="item" @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
+                    <Option
+                        v-if="item"
+                        @click.native="$renameFileOrFolder(item)"
+                        :title="$t('context_menu.rename')"
+                        icon="rename"
+                    />
+                    <Option
+                        v-if="item"
+                        @click.native="$moveFileOrFolder(item)"
+                        :title="$t('context_menu.move')"
+                        icon="move-item"
+                    />
                     <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
                 </OptionGroup>
                 <OptionGroup>
-                    <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+                    <Option
+                        @click.native="$downloadSelection(item)"
+                        :title="$t('context_menu.download')"
+                        icon="download"
+                    />
                 </OptionGroup>
             </template>
             <template v-slot:visitor>
                 <OptionGroup>
-                    <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+                    <Option
+                        @click.native="$downloadSelection(item)"
+                        :title="$t('context_menu.download')"
+                        icon="download"
+                    />
                 </OptionGroup>
             </template>
         </MobileContextMenu>
@@ -24,13 +42,23 @@
                 <OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
             </OptionGroup>
             <OptionGroup>
-                <Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
+                <Option
+                    @click.stop.native="createFolder"
+                    :title="$t('actions.create_folder')"
+                    icon="folder-plus"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
         </MobileCreateMenu>
 
         <MobileMultiSelectToolbar>
             <template v-slot:visitor>
-                <ToolbarButton @click.native="$downloadSelection()" class="action-btn" source="download" :action="$t('actions.download')" />
+                <ToolbarButton
+                    @click.native="$downloadSelection()"
+                    class="action-btn"
+                    source="download"
+                    :action="$t('actions.download')"
+                />
             </template>
             <template v-slot:editor>
                 <ToolbarButton
@@ -47,7 +75,12 @@
                     :class="{ 'is-inactive': clipboard.length < 1 }"
                     :action="$t('actions.delete')"
                 />
-                <ToolbarButton @click.native="$downloadSelection()" class="action-btn" source="download" :action="$t('actions.download')" />
+                <ToolbarButton
+                    @click.native="$downloadSelection()"
+                    class="action-btn"
+                    source="download"
+                    :action="$t('actions.download')"
+                />
             </template>
         </MobileMultiSelectToolbar>
 
@@ -58,19 +91,31 @@
                     <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
                 </OptionGroup>
                 <OptionGroup>
-                    <Option @click.native="$createFolder" :title="$t('context_menu.create_folder')" icon="create-folder" />
+                    <Option
+                        @click.native="$createFolder"
+                        :title="$t('context_menu.create_folder')"
+                        icon="create-folder"
+                    />
                 </OptionGroup>
             </template>
 
             <template v-slot:single-select v-if="item">
                 <OptionGroup v-if="$checkPermission('editor')">
-                    <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+                    <Option
+                        @click.native="$renameFileOrFolder(item)"
+                        :title="$t('context_menu.rename')"
+                        icon="rename"
+                    />
                     <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
                     <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
                 </OptionGroup>
                 <OptionGroup>
                     <Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
-                    <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+                    <Option
+                        @click.native="$downloadSelection(item)"
+                        :title="$t('context_menu.download')"
+                        icon="download"
+                    />
                 </OptionGroup>
             </template>
 
@@ -188,7 +233,7 @@ export default {
 
         events.$on('context-menu:show', (event, item) => (this.item = item))
         events.$on('mobile-context-menu:show', (item) => (this.item = item))
-		events.$on('context-menu:current-folder', (folder) => (this.item = folder))
-	},
+        events.$on('context-menu:current-folder', (folder) => (this.item = folder))
+    },
 }
 </script>
diff --git a/resources/js/views/FileView/RecentUploads.vue b/resources/js/views/FileView/RecentUploads.vue
index 1d073ac2..6a089323 100644
--- a/resources/js/views/FileView/RecentUploads.vue
+++ b/resources/js/views/FileView/RecentUploads.vue
@@ -3,20 +3,30 @@
         <ContextMenu>
             <template v-slot:single-select v-if="item">
                 <OptionGroup>
-                    <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+                    <Option
+                        @click.native="$renameFileOrFolder(item)"
+                        :title="$t('context_menu.rename')"
+                        icon="rename"
+                    />
                     <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
                     <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
                 </OptionGroup>
                 <OptionGroup>
                     <Option
                         @click.native="$shareFileOrFolder(item)"
-                        :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
+                        :title="
+                            item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')
+                        "
                         icon="share"
                     />
                 </OptionGroup>
                 <OptionGroup>
                     <Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
-                    <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+                    <Option
+                        @click.native="$downloadSelection(item)"
+                        :title="$t('context_menu.download')"
+                        icon="download"
+                    />
                 </OptionGroup>
             </template>
 
@@ -36,7 +46,15 @@
                 <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
                 <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
                 <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
-                <Option @click.native="$shareFileOrFolder(item)" :title="item && item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
+                <Option
+                    @click.native="$shareFileOrFolder(item)"
+                    :title="
+                        item && item.data.relationships.shared
+                            ? $t('context_menu.share_edit')
+                            : $t('context_menu.share')
+                    "
+                    icon="share"
+                />
             </OptionGroup>
             <OptionGroup>
                 <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
@@ -83,7 +101,12 @@
                 :class="{ 'is-inactive': clipboard.length < 1 }"
                 :action="$t('actions.delete')"
             />
-            <ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
+            <ToolbarButton
+                @click.native="$downloadSelection(item)"
+                class="action-btn"
+                source="download"
+                :action="$t('actions.download')"
+            />
         </MobileMultiSelectToolbar>
     </div>
 </template>
diff --git a/resources/js/views/FileView/SharedWithMe.vue b/resources/js/views/FileView/SharedWithMe.vue
index 78a12f54..3daf773c 100644
--- a/resources/js/views/FileView/SharedWithMe.vue
+++ b/resources/js/views/FileView/SharedWithMe.vue
@@ -17,13 +17,22 @@
                 <OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
             </OptionGroup>
             <OptionGroup :title="$t('Create')">
-                <Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
+                <Option
+                    @click.stop.native="createFolder"
+                    :title="$t('actions.create_folder')"
+                    icon="folder-plus"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
         </MobileCreateMenu>
 
         <MobileTeamContextMenu>
             <OptionGroup>
-                <Option @click.native="$detachMeFromTeamFolder(teamFolder)" :title="$t('Leave the Team Folder')" icon="user-minus" />
+                <Option
+                    @click.native="$detachMeFromTeamFolder(teamFolder)"
+                    :title="$t('Leave the Team Folder')"
+                    icon="user-minus"
+                />
             </OptionGroup>
         </MobileTeamContextMenu>
 
@@ -44,7 +53,12 @@
                 :class="{ 'is-inactive': clipboard.length < 1 }"
                 :action="$t('actions.delete')"
             />
-            <ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
+            <ToolbarButton
+                @click.native="$downloadSelection(item)"
+                class="action-btn"
+                source="download"
+                :action="$t('actions.download')"
+            />
         </MobileMultiSelectToolbar>
 
         <ContextMenu>
@@ -54,19 +68,31 @@
                     <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
                 </OptionGroup>
                 <OptionGroup v-if="!isTeamFolderHomepage">
-                    <Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
+                    <Option
+                        @click.stop.native="$createFolder"
+                        :title="$t('actions.create_folder')"
+                        icon="folder-plus"
+                    />
                 </OptionGroup>
             </template>
 
             <template v-slot:single-select v-if="item">
                 <OptionGroup v-if="canEdit">
-                    <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+                    <Option
+                        @click.native="$renameFileOrFolder(item)"
+                        :title="$t('context_menu.rename')"
+                        icon="rename"
+                    />
                     <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
                     <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
                 </OptionGroup>
                 <OptionGroup>
                     <Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
-                    <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+                    <Option
+                        @click.native="$downloadSelection(item)"
+                        :title="$t('context_menu.download')"
+                        icon="download"
+                    />
                 </OptionGroup>
             </template>
 
@@ -182,7 +208,9 @@ export default {
         },
         canEdit() {
             if (this.currentTeamFolder && this.user) {
-                let member = this.currentTeamFolder.data.relationships.members.data.find((member) => member.data.id === this.user.data.id)
+                let member = this.currentTeamFolder.data.relationships.members.data.find(
+                    (member) => member.data.id === this.user.data.id
+                )
 
                 return member.data.attributes.permission === 'can-edit'
             }
diff --git a/resources/js/views/FileView/TeamFolders.vue b/resources/js/views/FileView/TeamFolders.vue
index 733abc6e..4b64a61c 100644
--- a/resources/js/views/FileView/TeamFolders.vue
+++ b/resources/js/views/FileView/TeamFolders.vue
@@ -4,7 +4,11 @@
             <OptionGroup v-if="item && isFolder">
                 <Option
                     @click.native="addToFavourites"
-                    :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
+                    :title="
+                        isInFavourites
+                            ? $t('context_menu.remove_from_favourites')
+                            : $t('context_menu.add_to_favourites')
+                    "
                     icon="favourites"
                 />
             </OptionGroup>
@@ -15,8 +19,17 @@
                 <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
             </OptionGroup>
             <OptionGroup v-if="item">
-                <Option @click.native="$shareFileOrFolder(item)" :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
-                <Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Edit Team Members')" icon="users" />
+                <Option
+                    @click.native="$shareFileOrFolder(item)"
+                    :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
+                    icon="share"
+                />
+                <Option
+                    @click.native="$updateTeamFolder(item)"
+                    v-if="isFolder"
+                    :title="$t('Edit Team Members')"
+                    icon="users"
+                />
             </OptionGroup>
 
             <OptionGroup v-if="item">
@@ -30,8 +43,18 @@
                 <OptionUpload :title="$t('actions.upload_folder')" type="folder" :is-hover-disabled="true" />
             </OptionGroup>
             <OptionGroup :title="$t('Create')">
-                <Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" :is-hover-disabled="true" />
-                <Option @click.stop.native="createFolder" :title="$t('actions.create_folder')" icon="folder-plus" :is-hover-disabled="true" />
+                <Option
+                    @click.stop.native="$createTeamFolder"
+                    :title="$t('Create Team Folder')"
+                    icon="users"
+                    :is-hover-disabled="true"
+                />
+                <Option
+                    @click.stop.native="createFolder"
+                    :title="$t('actions.create_folder')"
+                    icon="folder-plus"
+                    :is-hover-disabled="true"
+                />
             </OptionGroup>
         </MobileCreateMenu>
 
@@ -57,7 +80,12 @@
                 :class="{ 'is-inactive': clipboard.length < 1 }"
                 :action="$t('actions.delete')"
             />
-            <ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
+            <ToolbarButton
+                @click.native="$downloadSelection(item)"
+                class="action-btn"
+                source="download"
+                :action="$t('actions.download')"
+            />
         </MobileMultiSelectToolbar>
 
         <ContextMenu>
@@ -65,7 +93,11 @@
                 <OptionGroup v-if="!isTeamFolderHomepage">
                     <OptionUpload :title="$t('actions.upload')" type="file" />
                     <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
-                    <Option @click.stop.native="$createFolder" :title="$t('actions.create_folder')" icon="folder-plus" />
+                    <Option
+                        @click.stop.native="$createFolder"
+                        :title="$t('actions.create_folder')"
+                        icon="folder-plus"
+                    />
                 </OptionGroup>
                 <OptionGroup v-if="isTeamFolderHomepage">
                     <Option @click.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" />
@@ -76,26 +108,45 @@
                 <OptionGroup v-if="isFolder">
                     <Option
                         @click.native="addToFavourites"
-                        :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
+                        :title="
+                            isInFavourites
+                                ? $t('context_menu.remove_from_favourites')
+                                : $t('context_menu.add_to_favourites')
+                        "
                         icon="favourites"
                     />
                 </OptionGroup>
                 <OptionGroup>
-                    <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+                    <Option
+                        @click.native="$renameFileOrFolder(item)"
+                        :title="$t('context_menu.rename')"
+                        icon="rename"
+                    />
                     <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
                     <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
                 </OptionGroup>
                 <OptionGroup>
                     <Option
                         @click.native="$shareFileOrFolder(item)"
-                        :title="item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')"
+                        :title="
+                            item.data.relationships.shared ? $t('context_menu.share_edit') : $t('context_menu.share')
+                        "
                         icon="share"
                     />
-                    <Option @click.native="$updateTeamFolder(item)" v-if="isFolder" :title="$t('Edit Team Members')" icon="users" />
+                    <Option
+                        @click.native="$updateTeamFolder(item)"
+                        v-if="isFolder"
+                        :title="$t('Edit Team Members')"
+                        icon="users"
+                    />
                 </OptionGroup>
                 <OptionGroup>
                     <Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
-                    <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+                    <Option
+                        @click.native="$downloadSelection(item)"
+                        :title="$t('context_menu.download')"
+                        icon="download"
+                    />
                 </OptionGroup>
             </template>
 
@@ -103,7 +154,11 @@
                 <OptionGroup v-if="!hasFile">
                     <Option
                         @click.native="addToFavourites"
-                        :title="isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites')"
+                        :title="
+                            isInFavourites
+                                ? $t('context_menu.remove_from_favourites')
+                                : $t('context_menu.add_to_favourites')
+                        "
                         icon="favourites"
                     />
                 </OptionGroup>
@@ -124,7 +179,11 @@
             <MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
                 {{ $getCurrentSectionName() }}
             </MobileActionButton>
-            <MobileActionButton @click.native="$showMobileMenu('create-list')" v-if="$checkPermission(['master', 'editor'])" icon="cloud-plus">
+            <MobileActionButton
+                @click.native="$showMobileMenu('create-list')"
+                v-if="$checkPermission(['master', 'editor'])"
+                icon="cloud-plus"
+            >
                 {{ $t('mobile.create') }}
             </MobileActionButton>
             <MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
diff --git a/resources/js/views/FileView/Trash.vue b/resources/js/views/FileView/Trash.vue
index 22a48c59..5ed8e8db 100644
--- a/resources/js/views/FileView/Trash.vue
+++ b/resources/js/views/FileView/Trash.vue
@@ -9,19 +9,38 @@
 
             <template v-slot:single-select v-if="item">
                 <OptionGroup>
-                    <Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
-                    <Option @click.native="$deleteFileOrFolder(item)" v-if="item" :title="$t('context_menu.delete')" icon="trash" />
+                    <Option
+                        @click.native="$restoreFileOrFolder(item)"
+                        v-if="item"
+                        :title="$t('context_menu.restore')"
+                        icon="restore"
+                    />
+                    <Option
+                        @click.native="$deleteFileOrFolder(item)"
+                        v-if="item"
+                        :title="$t('context_menu.delete')"
+                        icon="trash"
+                    />
                     <Option @click.native="$emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
                 </OptionGroup>
                 <OptionGroup>
                     <Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
-                    <Option @click.native="$downloadSelection(item)" :title="$t('context_menu.download')" icon="download" />
+                    <Option
+                        @click.native="$downloadSelection(item)"
+                        :title="$t('context_menu.download')"
+                        icon="download"
+                    />
                 </OptionGroup>
             </template>
 
             <template v-slot:multiple-select v-if="item">
                 <OptionGroup>
-                    <Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
+                    <Option
+                        @click.native="$restoreFileOrFolder(item)"
+                        v-if="item"
+                        :title="$t('context_menu.restore')"
+                        icon="restore"
+                    />
                     <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
                     <Option @click.native="$emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash" />
                 </OptionGroup>
@@ -33,7 +52,12 @@
 
         <MobileContextMenu>
             <OptionGroup v-if="item">
-                <Option @click.native="$restoreFileOrFolder(item)" v-if="item" :title="$t('context_menu.restore')" icon="restore" />
+                <Option
+                    @click.native="$restoreFileOrFolder(item)"
+                    v-if="item"
+                    :title="$t('context_menu.restore')"
+                    icon="restore"
+                />
                 <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
             </OptionGroup>
 
@@ -74,7 +98,12 @@
                 :class="{ 'is-inactive': clipboard.length < 1 }"
                 :action="$t('actions.delete')"
             />
-            <ToolbarButton @click.native="$downloadSelection(item)" class="action-btn" source="download" :action="$t('actions.download')" />
+            <ToolbarButton
+                @click.native="$downloadSelection(item)"
+                class="action-btn"
+                source="download"
+                :action="$t('actions.download')"
+            />
         </MobileMultiSelectToolbar>
     </div>
 </template>
diff --git a/resources/js/views/FileView/UploadRequestFiles.vue b/resources/js/views/FileView/UploadRequestFiles.vue
new file mode 100644
index 00000000..db310f89
--- /dev/null
+++ b/resources/js/views/FileView/UploadRequestFiles.vue
@@ -0,0 +1,198 @@
+<template>
+    <div>
+        <MobileContextMenu>
+            <OptionGroup v-if="item">
+                <Option @click.native="$renameFileOrFolder(item)" :title="$t('context_menu.rename')" icon="rename" />
+                <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
+                <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
+            </OptionGroup>
+        </MobileContextMenu>
+
+        <MobileCreateMenu>
+            <OptionGroup :title="$t('Upload')">
+                <OptionUpload :title="$t('actions.upload')" type="file" :is-hover-disabled="true" />
+                <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
+            </OptionGroup>
+            <OptionGroup :title="$t('Create')">
+                <Option
+                    @click.stop.native="createFolder"
+                    :title="$t('actions.create_folder')"
+                    icon="folder-plus"
+                    :is-hover-disabled="true"
+                />
+            </OptionGroup>
+        </MobileCreateMenu>
+
+        <MobileMultiSelectToolbar>
+            <ToolbarButton
+                @click.native="$moveFileOrFolder(clipboard)"
+                class="action-btn"
+                source="move"
+                :action="$t('actions.move')"
+                :class="{ 'is-inactive': clipboard.length < 1 }"
+            />
+            <ToolbarButton
+                @click.native="$deleteFileOrFolder(clipboard)"
+                class="action-btn"
+                source="trash"
+                :class="{ 'is-inactive': clipboard.length < 1 }"
+                :action="$t('actions.delete')"
+            />
+        </MobileMultiSelectToolbar>
+
+        <ContextMenu>
+            <template v-slot:empty-select>
+                <OptionGroup>
+                    <OptionUpload :title="$t('actions.upload')" type="file" />
+                    <OptionUpload :title="$t('actions.upload_folder')" type="folder" />
+                </OptionGroup>
+                <OptionGroup>
+                    <Option
+                        @click.native="$createFolder"
+                        :title="$t('context_menu.create_folder')"
+                        icon="create-folder"
+                    />
+                </OptionGroup>
+            </template>
+
+            <template v-slot:single-select v-if="item">
+                <OptionGroup>
+                    <Option
+                        @click.native="$renameFileOrFolder(item)"
+                        :title="$t('context_menu.rename')"
+                        icon="rename"
+                    />
+                    <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
+                    <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
+                </OptionGroup>
+                <OptionGroup>
+                    <Option @click.native="$openInDetailPanel(item)" :title="$t('context_menu.detail')" icon="detail" />
+                </OptionGroup>
+            </template>
+
+            <template v-slot:multiple-select v-if="item">
+                <OptionGroup>
+                    <Option @click.native="$moveFileOrFolder(item)" :title="$t('context_menu.move')" icon="move-item" />
+                    <Option @click.native="$deleteFileOrFolder(item)" :title="$t('context_menu.delete')" icon="trash" />
+                </OptionGroup>
+                <OptionGroup>
+                    <Option @click.native="$downloadSelection()" :title="$t('context_menu.download')" icon="download" />
+                </OptionGroup>
+            </template>
+        </ContextMenu>
+
+        <FileActionsMobile v-if="entries.length">
+            <MobileActionButton @click.native="$openSpotlight()" icon="search">
+                {{ $t('Spotlight') }}
+            </MobileActionButton>
+            <MobileActionButton
+                @click.native="$showMobileMenu('create-list')"
+                v-if="$checkPermission(['master', 'editor'])"
+                icon="cloud-plus"
+            >
+                {{ $t('mobile.create') }}
+            </MobileActionButton>
+            <MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
+                {{ $t('context_menu.select') }}
+            </MobileActionButton>
+            <MobileActionButton @click.native="$showMobileMenu('file-sorting')" icon="preview-sorting">
+                {{ $t('preview_sorting.preview_sorting_button') }}
+            </MobileActionButton>
+        </FileActionsMobile>
+
+        <EmptyFilePage>
+            <div v-if="uploadRequest" class="relative mx-auto mb-8 w-24 text-center">
+                <VueFolderIcon class="inline-block w-28" />
+                <MemberAvatar
+                    :member="uploadRequest.user"
+                    class="absolute -bottom-2.5 -right-2"
+                    :is-border="true"
+                    :size="32"
+                />
+            </div>
+
+            <h1 class="title">
+                {{ $t('Jane Request You for File Upload') }}
+            </h1>
+            <p class="description max-w-[420px]">
+                {{
+                    $t(
+                        'Your files will be uploaded automatically and after that, you can organize your files in folders.'
+                    )
+                }}
+            </p>
+            <ButtonUpload button-style="theme">
+                {{ $t('empty_page.call_to_action') }}
+            </ButtonUpload>
+        </EmptyFilePage>
+
+        <FileBrowser />
+    </div>
+</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 VueFolderIcon from '../../components/FilesView/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 { events } from '../../bus'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'Files',
+    components: {
+        MobileMultiSelectToolbar,
+        MobileActionButton,
+        FileActionsMobile,
+        MobileContextMenu,
+        MobileCreateMenu,
+        EmptyFilePage,
+        VueFolderIcon,
+        ToolbarButton,
+        MemberAvatar,
+        ButtonUpload,
+        OptionUpload,
+        OptionGroup,
+        FileBrowser,
+        ContextMenu,
+        Option,
+    },
+    computed: {
+        ...mapGetters(['fastPreview', 'clipboard', 'config', 'user', 'entries', 'uploadRequest']),
+        isFolder() {
+            return this.item && this.item.data.type === 'folder'
+        },
+    },
+    data() {
+        return {
+            item: undefined,
+        }
+    },
+    methods: {
+        createFolder() {
+            events.$emit('popup:open', { name: 'create-folder' })
+        },
+    },
+    created() {
+        //this.$store.dispatch('getFolder', this.$route.params.id)
+        this.$store.commit('LOADING_STATE', { loading: false, data: [] })
+
+        axios.get('/api/request').then((response) => this.$store.commit('SET_UPLOAD_REQUEST', response.data))
+
+        events.$on('context-menu:show', (event, item) => (this.item = item))
+        events.$on('context-menu:current-folder', (folder) => (this.item = folder))
+        events.$on('mobile-context-menu:show', (item) => (this.item = item))
+    },
+}
+</script>
diff --git a/resources/js/views/Frontpage/ContactUs.vue b/resources/js/views/Frontpage/ContactUs.vue
index 07fdef49..a94df734 100644
--- a/resources/js/views/Frontpage/ContactUs.vue
+++ b/resources/js/views/Frontpage/ContactUs.vue
@@ -6,9 +6,20 @@
         <!--Page content-->
         <div class="page-wrapper small">
             <!--Headline-->
-            <PageTitle class="headline" :title="$t('page_contact_us.title')" :description="$t('page_contact_us.description')"></PageTitle>
+            <PageTitle
+                class="headline"
+                :title="$t('page_contact_us.title')"
+                :description="$t('page_contact_us.description')"
+            ></PageTitle>
 
-            <ValidationObserver v-if="!isSuccess" @submit.prevent="contactForm" ref="contactForm" v-slot="{ invalid }" tag="form" class="form block-form">
+            <ValidationObserver
+                v-if="!isSuccess"
+                @submit.prevent="contactForm"
+                ref="contactForm"
+                v-slot="{ invalid }"
+                tag="form"
+                class="form block-form"
+            >
                 <div class="block-wrapper">
                     <label>{{ $t('page_contact_us.form.email') }}:</label>
                     <ValidationProvider tag="div" mode="passive" name="E-Mail" rules="required" v-slot="{ errors }">
@@ -42,7 +53,13 @@
                 </InfoBox>
 
                 <div>
-                    <AuthButton class="submit-button" icon="chevron-right" :text="$t('page_contact_us.form.submit_button')" :loading="isLoading" :disabled="isLoading" />
+                    <AuthButton
+                        class="submit-button"
+                        icon="chevron-right"
+                        :text="$t('page_contact_us.form.submit_button')"
+                        :loading="isLoading"
+                        :disabled="isLoading"
+                    />
                 </div>
             </ValidationObserver>
             <InfoBox v-if="isSuccess">
diff --git a/resources/js/views/Frontpage/Homepage.vue b/resources/js/views/Frontpage/Homepage.vue
index bec6cb0b..a65f6da7 100644
--- a/resources/js/views/Frontpage/Homepage.vue
+++ b/resources/js/views/Frontpage/Homepage.vue
@@ -10,8 +10,8 @@
             <!--VueFileManager ScreenShot-->
             <HeroScreenshot />
 
-			<!--Google Adsense banner-->
-			<div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="min-h-[120px] mb-5"></div>
+            <!--Google Adsense banner-->
+            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="mb-5 min-h-[120px]"></div>
 
             <!--Main Features-->
             <MainFeatures />
diff --git a/resources/js/views/Platform.vue b/resources/js/views/Platform.vue
index 7d0f8bc2..299a6216 100644
--- a/resources/js/views/Platform.vue
+++ b/resources/js/views/Platform.vue
@@ -41,7 +41,7 @@
             <MobileToolbar />
 
             <!--Google Adsense banner-->
-            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="min-h-[120px] mb-5"></div>
+            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="mb-5 min-h-[120px]"></div>
 
             <!--File list & info sidebar-->
             <div class="flex space-x-3 lg:overflow-hidden">
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index f0674999..cc0f0061 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -26,13 +26,19 @@
 
         <MobileNavigationToolbar />
 
-        <div v-if="user" class="relative mx-auto w-full overflow-x-hidden px-2.5 pb-12 md:max-w-4xl md:px-6 lg:pt-6 lg:pb-0 xl:max-w-screen-lg">
+        <div
+            v-if="user"
+            class="relative mx-auto w-full overflow-x-hidden px-2.5 pb-12 md:max-w-4xl md:px-6 lg:pt-6 lg:pb-0 xl:max-w-screen-lg"
+        >
             <div v-if="!isLoading" id="page-content">
                 <div class="card sticky top-0 z-10 shadow-card" style="padding-bottom: 0">
                     <!--User thumbnail-->
                     <div class="mb-3 flex items-center">
                         <!--Image input for replace avatar-->
-                        <AvatarInput v-model="avatar" :avatar="user.data.relationships.settings.data.attributes.avatar.md" />
+                        <AvatarInput
+                            v-model="avatar"
+                            :avatar="user.data.relationships.settings.data.attributes.avatar.md"
+                        />
 
                         <!--User name & email-->
                         <div class="ml-4">
diff --git a/resources/js/views/SetupWizard.vue b/resources/js/views/SetupWizard.vue
index 3c51dd73..58def93b 100644
--- a/resources/js/views/SetupWizard.vue
+++ b/resources/js/views/SetupWizard.vue
@@ -3,13 +3,12 @@
 </template>
 
 <script>
-	export default {
-		name: 'SetupWizard',
-		mounted() {
-			let status = this.$root.$data.config.installation
+export default {
+    name: 'SetupWizard',
+    mounted() {
+        let status = this.$root.$data.config.installation
 
-			if (status && status === 'installation-done')
-				this.$router.push({ name: 'SignIn' })
-		},
-	}
+        if (status && status === 'installation-done') this.$router.push({ name: 'SignIn' })
+    },
+}
 </script>
diff --git a/resources/js/views/SetupWizard/AdminAccount.vue b/resources/js/views/SetupWizard/AdminAccount.vue
index 9cc23b27..26ebfec0 100644
--- a/resources/js/views/SetupWizard/AdminAccount.vue
+++ b/resources/js/views/SetupWizard/AdminAccount.vue
@@ -1,54 +1,108 @@
 <template>
     <AuthContentWrapper ref="auth">
         <!--Database Credentials-->
-        <AuthContent name="database-credentials" :visible="true" class="!max-w-2xl mt-6 mb-12">
-			<Headline class="mx-auto max-w-screen-sm !mb-10" title="Setup Wizard" description="Create your admin account.">
-                <settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
+        <AuthContent name="database-credentials" :visible="true" class="mt-6 mb-12 !max-w-2xl">
+            <Headline
+                class="mx-auto !mb-10 max-w-screen-sm"
+                title="Setup Wizard"
+                description="Create your admin account."
+            >
+                <settings-icon
+                    size="40"
+                    class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
+                />
             </Headline>
 
-            <ValidationObserver @submit.prevent="adminAccountSubmit" ref="adminAccount" v-slot="{ invalid }" tag="form" class="card shadow-card text-left">
-                <FormLabel>
-					Create Admin Account
-				</FormLabel>
+            <ValidationObserver
+                @submit.prevent="adminAccountSubmit"
+                ref="adminAccount"
+                v-slot="{ invalid }"
+                tag="form"
+                class="card text-left shadow-card"
+            >
+                <FormLabel> Create Admin Account </FormLabel>
 
-				<ValidationProvider tag="div" mode="passive" name="Avatar" v-slot="{ errors }">
-					<AppInputText title="Avatar (optional)" :error="errors[0]">
+                <ValidationProvider tag="div" mode="passive" name="Avatar" v-slot="{ errors }">
+                    <AppInputText title="Avatar (optional)" :error="errors[0]">
                         <ImageInput v-model="admin.avatar" :error="errors[0]" />
-					</AppInputText>
-				</ValidationProvider>
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Full Name" rules="required" v-slot="{ errors }">
-					<AppInputText title="Full Name" :error="errors[0]">
-						<input v-model="admin.name" class="focus-border-theme input-dark" placeholder="Type your full name" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Full Name" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Full Name" :error="errors[0]">
+                        <input
+                            v-model="admin.name"
+                            class="focus-border-theme input-dark"
+                            placeholder="Type your full name"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
-					<AppInputText title="Email" :error="errors[0]">
-						<input v-model="admin.email" class="focus-border-theme input-dark" placeholder="Type your email" type="email" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Email" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Email" :error="errors[0]">
+                        <input
+                            v-model="admin.email"
+                            class="focus-border-theme input-dark"
+                            placeholder="Type your email"
+                            type="email"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Password" rules="required|confirmed:confirmation" v-slot="{ errors }">
-					<AppInputText title="Password" :error="errors[0]">
-                        <input v-model="admin.password" class="focus-border-theme input-dark" placeholder="Type your password" type="password" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="Password"
+                    rules="required|confirmed:confirmation"
+                    v-slot="{ errors }"
+                >
+                    <AppInputText title="Password" :error="errors[0]">
+                        <input
+                            v-model="admin.password"
+                            class="focus-border-theme input-dark"
+                            placeholder="Type your password"
+                            type="password"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" name="confirmation" rules="required" vid="confirmation" v-slot="{ errors }">
-					<AppInputText title="Password Confirmation" :error="errors[0]" :is-last="true">
-                        <input v-model="admin.password_confirmation" class="focus-border-theme input-dark" placeholder="Confirm your password" type="password" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider
+                    tag="div"
+                    name="confirmation"
+                    rules="required"
+                    vid="confirmation"
+                    v-slot="{ errors }"
+                >
+                    <AppInputText title="Password Confirmation" :error="errors[0]" :is-last="true">
+                        <input
+                            v-model="admin.password_confirmation"
+                            class="focus-border-theme input-dark"
+                            placeholder="Confirm your password"
+                            type="password"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
             </ValidationObserver>
 
-			<AuthButton @click.native="adminAccountSubmit" class="w-full justify-center" icon="chevron-right" text="Create Admin and Login" :loading="isLoading" :disabled="isLoading" />
+            <AuthButton
+                @click.native="adminAccountSubmit"
+                class="w-full justify-center"
+                icon="chevron-right"
+                text="Create Admin and Login"
+                :loading="isLoading"
+                :disabled="isLoading"
+            />
         </AuthContent>
     </AuthContentWrapper>
 </template>
 
 <script>
-import AppInputText from "../../components/Admin/AppInputText";
+import AppInputText from '../../components/Admin/AppInputText'
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
 import AuthContentWrapper from '../../components/Auth/AuthContentWrapper'
 import SelectInput from '../../components/Others/Forms/SelectInput'
@@ -60,7 +114,7 @@ import AuthContent from '../../components/Auth/AuthContent'
 import AuthButton from '../../components/Auth/AuthButton'
 import { required } from 'vee-validate/dist/rules'
 import { SettingsIcon } from 'vue-feather-icons'
-import Headline from "../Auth/Headline"
+import Headline from '../Auth/Headline'
 import { events } from '../../bus'
 import axios from 'axios'
 
@@ -70,7 +124,7 @@ export default {
         AuthContentWrapper,
         ValidationProvider,
         ValidationObserver,
-		AppInputText,
+        AppInputText,
         SettingsIcon,
         SelectInput,
         SwitchInput,
@@ -79,7 +133,7 @@ export default {
         AuthButton,
         FormLabel,
         required,
-		Headline,
+        Headline,
         InfoBox,
     },
     data() {
@@ -125,12 +179,10 @@ export default {
                     },
                 })
                 .then((response) => {
-
                     // Go to sign page
-					window.location = '/sign-in'
+                    window.location = '/sign-in'
                 })
                 .catch((error) => {
-
                     if (error.response.status === 500) {
                         events.$emit('alert:open', {
                             emoji: '🤔',
@@ -152,22 +204,22 @@ export default {
                             })
                         }
                     }
-
-                }).finally(() => this.isLoading = false)
+                })
+                .finally(() => (this.isLoading = false))
         },
     },
     created() {
         this.$scrollTop()
 
-		if (this.$root.$data.config.isSetupWizardDebug) {
-			this.admin = {
-				name: 'Jane Doe',
-				email: 'howdy@hi5ve.digital',
-				avatar: undefined,
-				password: 'vuefilemanager',
-				password_confirmation: 'vuefilemanager',
-			}
-		}
+        if (this.$root.$data.config.isSetupWizardDebug) {
+            this.admin = {
+                name: 'Jane Doe',
+                email: 'howdy@hi5ve.digital',
+                avatar: undefined,
+                password: 'vuefilemanager',
+                password_confirmation: 'vuefilemanager',
+            }
+        }
     },
 }
 </script>
diff --git a/resources/js/views/SetupWizard/AppSetup.vue b/resources/js/views/SetupWizard/AppSetup.vue
index 72253497..e2795eb5 100644
--- a/resources/js/views/SetupWizard/AppSetup.vue
+++ b/resources/js/views/SetupWizard/AppSetup.vue
@@ -1,126 +1,217 @@
 <template>
     <AuthContentWrapper ref="auth">
         <!--Database Credentials-->
-        <AuthContent name="database-credentials" :visible="true" class="!max-w-2xl mt-6 mb-12">
-            <Headline class="mx-auto max-w-screen-sm !mb-10" title="Setup Wizard" description="Set up your application appearance, analytics, etc.">
-                <settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
+        <AuthContent name="database-credentials" :visible="true" class="mt-6 mb-12 !max-w-2xl">
+            <Headline
+                class="mx-auto !mb-10 max-w-screen-sm"
+                title="Setup Wizard"
+                description="Set up your application appearance, analytics, etc."
+            >
+                <settings-icon
+                    size="40"
+                    class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
+                />
             </Headline>
 
             <ValidationObserver @submit.prevent="appSetupSubmit" ref="appSetup" v-slot="{ invalid }" tag="form">
+                <div class="card text-left shadow-card">
+                    <FormLabel>General Settings</FormLabel>
 
-				<div class="card shadow-card text-left">
-					<FormLabel>General Settings</FormLabel>
+                    <ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
+                        <AppInputText title="App Title" :error="errors[0]">
+                            <input
+                                class="focus-border-theme input-dark"
+                                v-model="app.title"
+                                placeholder="Type your app title"
+                                type="text"
+                                :class="{ 'border-red': errors[0] }"
+                            />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="App Title" rules="required" v-slot="{ errors }">
-						<AppInputText title="App Title" :error="errors[0]">
-							<input class="focus-border-theme input-dark" v-model="app.title" placeholder="Type your app title" type="text" :class="{ 'border-red': errors[0] }" />
-						</AppInputText>
-					</ValidationProvider>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="App Description"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
+                        <AppInputText title="App Description" :error="errors[0]" :is-last="true">
+                            <textarea
+                                class="focus-border-theme input-dark"
+                                v-model="app.description"
+                                placeholder="Type your app description"
+                                type="text"
+                                :class="{ 'border-red': errors[0] }"
+                            ></textarea>
+                        </AppInputText>
+                    </ValidationProvider>
+                </div>
 
-					<ValidationProvider tag="div" mode="passive" name="App Description" rules="required" v-slot="{ errors }">
-						<AppInputText title="App Description" :error="errors[0]" :is-last="true">
-							<textarea class="focus-border-theme input-dark" v-model="app.description" placeholder="Type your app description" type="text" :class="{ 'border-red': errors[0] }"></textarea>
-						</AppInputText>
-					</ValidationProvider>
-				</div>
+                <div class="card text-left shadow-card">
+                    <FormLabel>Appearance</FormLabel>
 
-				<div class="card shadow-card text-left">
-					<FormLabel>Appearance</FormLabel>
+                    <ValidationProvider tag="div" mode="passive" name="Theme Color" v-slot="{ errors }">
+                        <AppInputSwitch title="Color Theme">
+                            <input v-model="app.color" type="color" />
+                        </AppInputSwitch>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="Theme Color" v-slot="{ errors }">
-						<AppInputSwitch title="Color Theme">
-							<input v-model="app.color" type="color" />
-						</AppInputSwitch>
-					</ValidationProvider>
+                    <ValidationProvider tag="div" mode="passive" name="App Logo" v-slot="{ errors }">
+                        <AppInputText title="App Logo (optional)" :error="errors[0]">
+                            <ImageInput v-model="app.logo" :error="errors[0]" />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="App Logo" v-slot="{ errors }">
-						<AppInputText title="App Logo (optional)" :error="errors[0]">
-							<ImageInput v-model="app.logo" :error="errors[0]" />
-						</AppInputText>
-					</ValidationProvider>
+                    <ValidationProvider tag="div" mode="passive" name="App Logo" v-slot="{ errors }">
+                        <AppInputText title="App Logo Horizontal (optional)" :error="errors[0]">
+                            <ImageInput v-model="app.logo_horizontal" :error="errors[0]" />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="App Logo" v-slot="{ errors }">
-						<AppInputText title="App Logo Horizontal (optional)" :error="errors[0]">
-							<ImageInput v-model="app.logo_horizontal" :error="errors[0]" />
-						</AppInputText>
-					</ValidationProvider>
+                    <ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
+                        <AppInputText title="App Favicon (optional)" :error="errors[0]">
+                            <ImageInput v-model="app.favicon" :error="errors[0]" />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
-						<AppInputText title="App Favicon (optional)" :error="errors[0]">
-							<ImageInput v-model="app.favicon" :error="errors[0]" />
-						</AppInputText>
-					</ValidationProvider>
+                    <ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
+                        <AppInputText
+                            title="OG Image (optional)"
+                            description="Image that appear when someone shares the content to Facebook or any other social medium. Preferred size is 1200x627"
+                            :error="errors[0]"
+                        >
+                            <ImageInput v-model="app.og_image" :error="errors[0]" />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
-						<AppInputText title="OG Image (optional)" description="Image that appear when someone shares the content to Facebook or any other social medium. Preferred size is 1200x627" :error="errors[0]">
-							<ImageInput v-model="app.og_image" :error="errors[0]" />
-						</AppInputText>
-					</ValidationProvider>
+                    <ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
+                        <AppInputText
+                            title="App Touch Icon (optional)"
+                            description="If user store bookmark on his phone screen, this icon appear in app thumbnail. Preferred size is 156x156"
+                            :error="errors[0]"
+                            :is-last="true"
+                        >
+                            <ImageInput v-model="app.touch_icon" :error="errors[0]" />
+                        </AppInputText>
+                    </ValidationProvider>
+                </div>
 
-					<ValidationProvider tag="div" mode="passive" name="App Favicon" v-slot="{ errors }">
-						<AppInputText title="App Touch Icon (optional)" description="If user store bookmark on his phone screen, this icon appear in app thumbnail. Preferred size is 156x156" :error="errors[0]" :is-last="true">
-							<ImageInput v-model="app.touch_icon" :error="errors[0]" />
-						</AppInputText>
-					</ValidationProvider>
-				</div>
+                <div class="card text-left shadow-card">
+                    <FormLabel>Application</FormLabel>
 
-				<div class="card shadow-card text-left">
-					<FormLabel>Application</FormLabel>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Contact Email"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
+                        <AppInputText title="Contact Email" :error="errors[0]">
+                            <input
+                                class="focus-border-theme input-dark"
+                                v-model="app.contactMail"
+                                placeholder="Type your contact email"
+                                type="email"
+                                :class="{ 'border-red': errors[0] }"
+                            />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="Contact Email" rules="required" v-slot="{ errors }">
-						<AppInputText title="Contact Email" :error="errors[0]">
-							<input class="focus-border-theme input-dark" v-model="app.contactMail" placeholder="Type your contact email" type="email" :class="{ 'border-red': errors[0] }" />
-						</AppInputText>
-					</ValidationProvider>
+                    <ValidationProvider tag="div" mode="passive" name="Google Analytics Code" v-slot="{ errors }">
+                        <AppInputText title="Google Analytics Code (optional)" :error="errors[0]">
+                            <input
+                                class="focus-border-theme input-dark"
+                                v-model="app.googleAnalytics"
+                                placeholder="Paste your Google Analytics Code"
+                                type="text"
+                                :class="{ 'border-red': errors[0] }"
+                            />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="Google Analytics Code" v-slot="{ errors }">
-						<AppInputText title="Google Analytics Code (optional)" :error="errors[0]">
-							<input class="focus-border-theme input-dark" v-model="app.googleAnalytics" placeholder="Paste your Google Analytics Code" type="text" :class="{ 'border-red': errors[0] }" />
-						</AppInputText>
-					</ValidationProvider>
+                    <AppInputSwitch
+                        title="Storage Limitation"
+                        description="If this value is off, all users will have infinity storage capacity and you won't be able to charge your users for storage plan."
+                    >
+                        <SwitchInput v-model="app.storageLimitation" :state="app.storageLimitation" />
+                    </AppInputSwitch>
 
-					<AppInputSwitch title="Storage Limitation" description="If this value is off, all users will have infinity storage capacity and you won't be able to charge your users for storage plan.">
-						<SwitchInput v-model="app.storageLimitation" :state="app.storageLimitation" />
-					</AppInputSwitch>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Default Storage Space"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
+                        <AppInputText
+                            v-if="app.storageLimitation"
+                            title="Default Storage Space for Accounts"
+                            :error="errors[0]"
+                        >
+                            <input
+                                class="focus-border-theme input-dark"
+                                v-model="app.defaultStorage"
+                                min="1"
+                                max="999999999"
+                                placeholder="Set default storage space in GB"
+                                type="number"
+                                :class="{ 'border-red': errors[0] }"
+                            />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="Default Storage Space" rules="required" v-slot="{ errors }">
-						<AppInputText v-if="app.storageLimitation" title="Default Storage Space for Accounts" :error="errors[0]">
-							<input
-								class="focus-border-theme input-dark"
-								v-model="app.defaultStorage"
-								min="1"
-								max="999999999"
-								placeholder="Set default storage space in GB"
-								type="number"
-								:class="{ 'border-red': errors[0] }"
-							/>
-						</AppInputText>
-					</ValidationProvider>
+                    <AppInputSwitch
+                        title="Allow User Registration"
+                        description="You can disable public registration for new users. You will still able to create new users in administration panel."
+                    >
+                        <SwitchInput v-model="app.userRegistration" class="switch" :state="app.userRegistration" />
+                    </AppInputSwitch>
 
-					<AppInputSwitch title="Allow User Registration" description="You can disable public registration for new users. You will still able to create new users in administration panel.">
-						<SwitchInput v-model="app.userRegistration" class="switch" :state="app.userRegistration" />
-					</AppInputSwitch>
+                    <AppInputSwitch
+                        title="Require Email Verification"
+                        description="Turn on, if you want to allow user email verification."
+                        :is-last="true"
+                    >
+                        <SwitchInput v-model="app.userVerification" class="switch" :state="app.userVerification" />
+                    </AppInputSwitch>
+                </div>
 
-					<AppInputSwitch title="Require Email Verification" description="Turn on, if you want to allow user email verification." :is-last="true">
-						<SwitchInput v-model="app.userVerification" class="switch" :state="app.userVerification" />
-					</AppInputSwitch>
-				</div>
+                <div v-if="isExtended" class="card text-left shadow-card">
+                    <FormLabel>Subscription</FormLabel>
 
-				<div v-if="isExtended" class="card shadow-card text-left">
-					<FormLabel>Subscription</FormLabel>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Contact Email"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
+                        <AppInputText
+                            :title="$t('Subscription Type')"
+                            description="Choose your preferred subscription system in advance. After installation and any other user registration, you can't change this setting later."
+                        >
+                            <SelectInput
+                                v-model="app.subscriptionType"
+                                :default="app.subscriptionType"
+                                :options="$store.getters.subscriptionTypes"
+                                :placeholder="$t('Select your subscription type')"
+                            />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="Contact Email" rules="required" v-slot="{ errors }">
-						<AppInputText :title="$t('Subscription Type')" description="Choose your preferred subscription system in advance. After installation and any other user registration, you can't change this setting later.">
-							<SelectInput v-model="app.subscriptionType" :default="app.subscriptionType" :options="$store.getters.subscriptionTypes" :placeholder="$t('Select your subscription type')" />
-						</AppInputText>
-					</ValidationProvider>
+                    <InfoBox class="!mb-2">
+                        <p>Any other subscription related settings you will be able set up later in admin panel.</p>
+                    </InfoBox>
+                </div>
 
-					<InfoBox class="!mb-2">
-						<p>Any other subscription related settings you will be able set up later in admin panel.</p>
-					</InfoBox>
-				</div>
-
-				<AuthButton class="w-full justify-center" icon="chevron-right" text="Save and Create Admin" :loading="isLoading" :disabled="isLoading" />
+                <AuthButton
+                    class="w-full justify-center"
+                    icon="chevron-right"
+                    text="Save and Create Admin"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                />
             </ValidationObserver>
         </AuthContent>
     </AuthContentWrapper>
@@ -131,10 +222,10 @@ import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-va
 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 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 AppInputText from '../../components/Admin/AppInputText'
 import InfoBox from '../../components/Others/Forms/InfoBox'
 import AuthContent from '../../components/Auth/AuthContent'
 import AuthButton from '../../components/Auth/AuthButton'
@@ -146,8 +237,8 @@ import axios from 'axios'
 export default {
     name: 'EnvironmentSetup',
     components: {
-		AppInputText,
-		AppInputSwitch,
+        AppInputText,
+        AppInputSwitch,
         AuthContentWrapper,
         ValidationProvider,
         ValidationObserver,
@@ -165,10 +256,10 @@ export default {
     data() {
         return {
             isLoading: false,
-			isExtended: undefined,
+            isExtended: undefined,
             app: {
                 color: '#00BC7E',
-				subscriptionType: undefined,
+                subscriptionType: undefined,
                 title: '',
                 description: '',
                 logo: undefined,
@@ -181,15 +272,15 @@ export default {
                 defaultStorage: '5',
                 userRegistration: 1,
                 storageLimitation: 1,
-				userVerification: 0,
+                userVerification: 0,
             },
         }
     },
     methods: {
         async appSetupSubmit() {
-			if (this.$root.$data.config.isSetupWizardDemo) {
-				this.$router.push({name: 'AdminAccount'})
-			}
+            if (this.$root.$data.config.isSetupWizardDemo) {
+                this.$router.push({ name: 'AdminAccount' })
+            }
 
             // Validate fields
             const isValid = await this.$refs.appSetup.validate()
@@ -212,26 +303,19 @@ export default {
             formData.append('userRegistration', Boolean(this.app.userRegistration) ? 1 : 0)
             formData.append('storageLimitation', Boolean(this.app.storageLimitation) ? 1 : 0)
 
-            if (this.app.googleAnalytics)
-				formData.append('googleAnalytics', this.app.googleAnalytics)
+            if (this.app.googleAnalytics) formData.append('googleAnalytics', this.app.googleAnalytics)
 
-            if (this.app.defaultStorage)
-				formData.append('defaultStorage', this.app.defaultStorage)
+            if (this.app.defaultStorage) formData.append('defaultStorage', this.app.defaultStorage)
 
-            if (this.app.logo)
-				formData.append('logo', this.app.logo)
+            if (this.app.logo) formData.append('logo', this.app.logo)
 
-            if (this.app.logo_horizontal)
-				formData.append('logo_horizontal', this.app.logo_horizontal)
+            if (this.app.logo_horizontal) formData.append('logo_horizontal', this.app.logo_horizontal)
 
-            if (this.app.og_image)
-				formData.append('og_image', this.app.og_image)
+            if (this.app.og_image) formData.append('og_image', this.app.og_image)
 
-            if (this.app.touch_icon)
-				formData.append('touch_icon', this.app.touch_icon)
+            if (this.app.touch_icon) formData.append('touch_icon', this.app.touch_icon)
 
-            if (this.app.favicon)
-				formData.append('favicon', this.app.favicon)
+            if (this.app.favicon) formData.append('favicon', this.app.favicon)
 
             // Send request to get verify account
             axios
@@ -256,19 +340,19 @@ export default {
     created() {
         this.$scrollTop()
 
-		this.isExtended = localStorage.getItem('license') === 'Extended'
+        this.isExtended = localStorage.getItem('license') === 'Extended'
 
-		if (this.$root.$data.config.isSetupWizardDebug) {
-			this.app.subscriptionType = 'metered'
-			this.app.title = 'VueFileManager'
-			this.app.description = 'Your private cloud storage software build on Laravel & Vue.js.'
-			this.app.contactMail = 'howdy@hi5ve.digital'
-			this.app.googleAnalytics = 'UA-123456789'
-			this.app.defaultStorage = '5'
-			this.app.userRegistration = 1
-			this.app.storageLimitation = 1
-			this.app.userVerification = 0
-		}
+        if (this.$root.$data.config.isSetupWizardDebug) {
+            this.app.subscriptionType = 'metered'
+            this.app.title = 'VueFileManager'
+            this.app.description = 'Your private cloud storage software build on Laravel & Vue.js.'
+            this.app.contactMail = 'howdy@hi5ve.digital'
+            this.app.googleAnalytics = 'UA-123456789'
+            this.app.defaultStorage = '5'
+            this.app.userRegistration = 1
+            this.app.storageLimitation = 1
+            this.app.userVerification = 0
+        }
     },
 }
 </script>
diff --git a/resources/js/views/SetupWizard/Database.vue b/resources/js/views/SetupWizard/Database.vue
index d1881d22..69d7ad2b 100644
--- a/resources/js/views/SetupWizard/Database.vue
+++ b/resources/js/views/SetupWizard/Database.vue
@@ -1,79 +1,144 @@
 <template>
     <AuthContentWrapper ref="auth">
         <!--Database Credentials-->
-        <AuthContent name="database-credentials" :visible="true" class="!max-w-2xl mt-6 mb-12">
-            <Headline class="mx-auto max-w-screen-sm !mb-10" title="Setup Wizard" description="Set up your database connection to install application database.">
-                <settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
+        <AuthContent name="database-credentials" :visible="true" class="mt-6 mb-12 !max-w-2xl">
+            <Headline
+                class="mx-auto !mb-10 max-w-screen-sm"
+                title="Setup Wizard"
+                description="Set up your database connection to install application database."
+            >
+                <settings-icon
+                    size="40"
+                    class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
+                />
             </Headline>
 
-            <ValidationObserver @submit.prevent="databaseCredentialsSubmit" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="card shadow-card text-left">
-                <FormLabel>
-					Database Credentials
-				</FormLabel>
+            <ValidationObserver
+                @submit.prevent="databaseCredentialsSubmit"
+                ref="verifyPurchaseCode"
+                v-slot="{ invalid }"
+                tag="form"
+                class="card text-left shadow-card"
+            >
+                <FormLabel> Database Credentials </FormLabel>
 
                 <InfoBox>
                     <p>
-                        We strongly recommend use MySQL or MariaDB database. Create new database, set all privileges and get credentials. For those who use cPanel or Plesk, here is
-                        useful resources:
+                        We strongly recommend use MySQL or MariaDB database. Create new database, set all privileges and
+                        get credentials. For those who use cPanel or Plesk, here is useful resources:
                     </p>
                     <ul>
                         <li>
-                            <a href="https://www.inmotionhosting.com/support/edu/cpanel/create-database-2/" target="_blank">1. cPanel - MySQL Database Wizard</a>
-                            <a href="https://docs.plesk.com/en-US/obsidian/customer-guide/65157/" target="_blank">2. Plesk - Website databases</a>
+                            <a
+                                href="https://www.inmotionhosting.com/support/edu/cpanel/create-database-2/"
+                                target="_blank"
+                                >1. cPanel - MySQL Database Wizard</a
+                            >
+                            <a href="https://docs.plesk.com/en-US/obsidian/customer-guide/65157/" target="_blank"
+                                >2. Plesk - Website databases</a
+                            >
                         </li>
                     </ul>
                 </InfoBox>
 
-				<ValidationProvider tag="div" mode="passive" name="Connection" rules="required" v-slot="{ errors }">
-					<AppInputText title="Connection" :error="errors[0]">
-						<SelectInput
-							v-model="databaseCredentials.connection"
-							:options="connectionList"
-							default="mysql"
-							placeholder="Select your database connection"
-							:isError="errors[0]"
-						/>
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Connection" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Connection" :error="errors[0]">
+                        <SelectInput
+                            v-model="databaseCredentials.connection"
+                            :options="connectionList"
+                            default="mysql"
+                            placeholder="Select your database connection"
+                            :isError="errors[0]"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
-					<AppInputText title="Host" :error="errors[0]">
-						<input v-model="databaseCredentials.host" class="focus-border-theme input-dark" placeholder="Type your database host" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Host" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Host" :error="errors[0]">
+                        <input
+                            v-model="databaseCredentials.host"
+                            class="focus-border-theme input-dark"
+                            placeholder="Type your database host"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
-					<AppInputText title="Port" :error="errors[0]">
-						<input v-model="databaseCredentials.port" class="focus-border-theme input-dark" placeholder="Type your database port" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Port" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Port" :error="errors[0]">
+                        <input
+                            v-model="databaseCredentials.port"
+                            class="focus-border-theme input-dark"
+                            placeholder="Type your database port"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Database Name" rules="required" v-slot="{ errors }">
-					<AppInputText title="Database Name" :error="errors[0]">
-						<input v-model="databaseCredentials.name" class="focus-border-theme input-dark" placeholder="Select your database name" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider tag="div" mode="passive" name="Database Name" rules="required" v-slot="{ errors }">
+                    <AppInputText title="Database Name" :error="errors[0]">
+                        <input
+                            v-model="databaseCredentials.name"
+                            class="focus-border-theme input-dark"
+                            placeholder="Select your database name"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Database Username" rules="required" v-slot="{ errors }">
-					<AppInputText title="Database Username" :error="errors[0]">
-						<input v-model="databaseCredentials.username" class="focus-border-theme input-dark" placeholder="Select your database name" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="Database Username"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
+                    <AppInputText title="Database Username" :error="errors[0]">
+                        <input
+                            v-model="databaseCredentials.username"
+                            class="focus-border-theme input-dark"
+                            placeholder="Select your database name"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
-				<ValidationProvider tag="div" mode="passive" name="Database Password" rules="required" v-slot="{ errors }">
-					<AppInputText title="Database Password" :error="errors[0]" :is-last="true">
-						<input v-model="databaseCredentials.password" class="focus-border-theme input-dark" placeholder="Select your database password" type="text" :class="{ 'border-red': errors[0] }" />
-					</AppInputText>
-				</ValidationProvider>
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    name="Database Password"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
+                    <AppInputText title="Database Password" :error="errors[0]" :is-last="true">
+                        <input
+                            v-model="databaseCredentials.password"
+                            class="focus-border-theme input-dark"
+                            placeholder="Select your database password"
+                            type="text"
+                            :class="{ 'border-red': errors[0] }"
+                        />
+                    </AppInputText>
+                </ValidationProvider>
 
                 <InfoBox v-if="isError" type="error" style="margin-bottom: 10px">
                     <p>We couldn't establish database connection. Please double check your database credentials.</p>
                     <br />
                     <p>Detailed error: {{ errorMessage }}</p>
                 </InfoBox>
-
             </ValidationObserver>
-			<AuthButton @click.native="databaseCredentialsSubmit" class="w-full justify-center" icon="chevron-right" :text="submitButtonText" :loading="isLoading" :disabled="isLoading" />
+            <AuthButton
+                @click.native="databaseCredentialsSubmit"
+                class="w-full justify-center"
+                icon="chevron-right"
+                :text="submitButtonText"
+                :loading="isLoading"
+                :disabled="isLoading"
+            />
         </AuthContent>
     </AuthContentWrapper>
 </template>
@@ -82,7 +147,7 @@
 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 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'
@@ -99,7 +164,7 @@ export default {
         AuthContentWrapper,
         ValidationProvider,
         ValidationObserver,
-		AppInputText,
+        AppInputText,
         SettingsIcon,
         SelectInput,
         AuthContent,
@@ -137,10 +202,10 @@ export default {
     },
     methods: {
         async databaseCredentialsSubmit() {
-			if (this.$root.$data.config.isSetupWizardDemo) {
-				this.$router.push({name: 'EnvironmentSetup'})
-				return
-			}
+            if (this.$root.$data.config.isSetupWizardDemo) {
+                this.$router.push({ name: 'EnvironmentSetup' })
+                return
+            }
 
             // Validate fields
             const isValid = await this.$refs.verifyPurchaseCode.validate()
@@ -175,16 +240,16 @@ export default {
     created() {
         this.$scrollTop()
 
-		if (this.$root.$data.config.isSetupWizardDebug) {
-			this.databaseCredentials = {
-				connection: 'mysql',
-				host: '127.0.0.1',
-				port: '3306',
-				name: 'vuefilemanager-v2',
-				username: 'root',
-				password: 'secret',
-			}
-		}
+        if (this.$root.$data.config.isSetupWizardDebug) {
+            this.databaseCredentials = {
+                connection: 'mysql',
+                host: '127.0.0.1',
+                port: '3306',
+                name: 'vuefilemanager-v2',
+                username: 'root',
+                password: 'secret',
+            }
+        }
     },
 }
 </script>
diff --git a/resources/js/views/SetupWizard/EnvironmentSetup.vue b/resources/js/views/SetupWizard/EnvironmentSetup.vue
index aa402bfa..3c1f19e2 100644
--- a/resources/js/views/SetupWizard/EnvironmentSetup.vue
+++ b/resources/js/views/SetupWizard/EnvironmentSetup.vue
@@ -1,574 +1,804 @@
 <template>
     <AuthContentWrapper ref="auth">
         <!--Database Credentials-->
-        <AuthContent name="database-credentials" :visible="true" class="!max-w-2xl mt-6 mb-12">
-            <Headline class="mx-auto max-w-screen-sm !mb-10" title="Setup Wizard" description="Set up your storage driver and email client.">
-                <settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
+        <AuthContent name="database-credentials" :visible="true" class="mt-6 mb-12 !max-w-2xl">
+            <Headline
+                class="mx-auto !mb-10 max-w-screen-sm"
+                title="Setup Wizard"
+                description="Set up your storage driver and email client."
+            >
+                <settings-icon
+                    size="40"
+                    class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
+                />
             </Headline>
 
-            <ValidationObserver @submit.prevent="EnvironmentSetupSubmit" ref="environmentSetup" v-slot="{ invalid }" tag="form">
+            <ValidationObserver
+                @submit.prevent="EnvironmentSetupSubmit"
+                ref="environmentSetup"
+                v-slot="{ invalid }"
+                tag="form"
+            >
+                <div class="card text-left shadow-card">
+                    <FormLabel>Storage Setup</FormLabel>
 
-				<div class="card shadow-card text-left">
-					<FormLabel>Storage Setup</FormLabel>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Storage Service"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
+                        <AppInputText title="Storage Service" :error="errors[0]" :is-last="storage.driver === 'local'">
+                            <SelectInput
+                                v-model="storage.driver"
+                                :options="storageServiceList"
+                                :default="storage.driver"
+                                placeholder="Select your storage service"
+                                :isError="errors[0]"
+                            />
+                        </AppInputText>
+                    </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="Storage Service" rules="required" v-slot="{ errors }">
-						<AppInputText title="Storage Service" :error="errors[0]" :is-last="storage.driver === 'local'">
-							<SelectInput v-model="storage.driver" :options="storageServiceList" :default="storage.driver" placeholder="Select your storage service" :isError="errors[0]" />
-						</AppInputText>
-					</ValidationProvider>
+                    <div v-if="storage.driver !== 'local'">
+                        <ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }">
+                            <AppInputText title="Key" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="storage.key"
+                                    placeholder="Paste your key"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-					<div v-if="storage.driver !== 'local'">
+                        <ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
+                            <AppInputText title="Secret" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="storage.secret"
+                                    placeholder="Paste your secret"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-						<ValidationProvider tag="div" mode="passive" name="Key" rules="required" v-slot="{ errors }">
-							<AppInputText title="Key" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="storage.key" placeholder="Paste your key" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                        <ValidationProvider tag="div" mode="passive" name="Region" rules="required" v-slot="{ errors }">
+                            <AppInputText
+                                title="Region"
+                                description="Select your region where is your bucket/space created."
+                                :error="errors[0]"
+                            >
+                                <SelectInput
+                                    v-model="storage.region"
+                                    :options="regionList"
+                                    :default="storage.region"
+                                    placeholder="Select your region"
+                                    :isError="errors[0]"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-						<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
-							<AppInputText title="Secret" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="storage.secret" placeholder="Paste your secret" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Endpoint"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText v-if="storage.driver !== 's3'" title="Endpoint URL" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="storage.endpoint"
+                                    placeholder="Type your endpoint"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                    readonly
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-						<ValidationProvider tag="div" mode="passive" name="Region" rules="required" v-slot="{ errors }">
-							<AppInputText title="Region" description="Select your region where is your bucket/space created." :error="errors[0]">
-								<SelectInput v-model="storage.region" :options="regionList" :default="storage.region" placeholder="Select your region" :isError="errors[0]" />
-							</AppInputText>
-						</ValidationProvider>
+                        <ValidationProvider tag="div" mode="passive" name="Bucket" rules="required" v-slot="{ errors }">
+                            <AppInputText
+                                title="Bucket"
+                                description="Provide your created unique bucket name"
+                                :error="errors[0]"
+                                :is-last="true"
+                            >
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="storage.bucket"
+                                    placeholder="Type your bucket name"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
+                    </div>
+                </div>
 
-						<ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
-							<AppInputText v-if="storage.driver !== 's3'" title="Endpoint URL" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="storage.endpoint" placeholder="Type your endpoint" type="text" :class="{ 'border-red': errors[0] }" readonly />
-							</AppInputText>
-						</ValidationProvider>
+                <div class="card text-left shadow-card">
+                    <FormLabel>Email Setup</FormLabel>
 
-						<ValidationProvider tag="div" mode="passive" name="Bucket" rules="required" v-slot="{ errors }">
-							<AppInputText title="Bucket" description="Provide your created unique bucket name" :error="errors[0]" :is-last="true">
-								<input class="focus-border-theme input-dark" v-model="storage.bucket" placeholder="Type your bucket name" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
-					</div>
-				</div>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Mail Driver"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
+                        <AppInputText
+                            title="Mail Driver"
+                            :error="errors[0]"
+                            :is-last="!mailDriver || mailDriver === 'log'"
+                        >
+                            <SelectInput
+                                v-model="mailDriver"
+                                :default="mailDriver"
+                                :options="mailDriverList"
+                                placeholder="Select your mail driver"
+                                :isError="errors[0]"
+                            />
+                        </AppInputText>
+                    </ValidationProvider>
 
-				<div class="card shadow-card text-left">
-					<FormLabel>Email Setup</FormLabel>
+                    <div v-if="mailDriver === 'smtp'">
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Mail Host"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText title="Mail Host" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="smtp.host"
+                                    placeholder="Type your mail host"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-					<ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
-						<AppInputText title="Mail Driver" :error="errors[0]" :is-last="!mailDriver || mailDriver === 'log'">
-							<SelectInput v-model="mailDriver" :default="mailDriver" :options="mailDriverList" placeholder="Select your mail driver" :isError="errors[0]" />
-						</AppInputText>
-					</ValidationProvider>
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Mail Port"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText title="Mail Port" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="smtp.port"
+                                    placeholder="Type your mail port"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-					<div v-if="mailDriver === 'smtp'">
-						<ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
-							<AppInputText title="Mail Host" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="smtp.host" placeholder="Type your mail host" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Mail Username"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText title="Mail Username" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="smtp.username"
+                                    placeholder="Type your mail username"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-						<ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
-							<AppInputText title="Mail Port" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="smtp.port" placeholder="Type your mail port" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Mail Password"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText title="Mail Password" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="smtp.password"
+                                    placeholder="Type your mail password"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-						<ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
-							<AppInputText title="Mail Username" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="smtp.username" placeholder="Type your mail username" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Mail Encryption"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText title="Mail Encryption" :error="errors[0]" :is-last="true">
+                                <SelectInput
+                                    v-model="smtp.encryption"
+                                    :default="smtp.encryption"
+                                    :options="mailEncryptionList"
+                                    placeholder="Select your mail encryption"
+                                    :isError="errors[0]"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
+                    </div>
 
-						<ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
-							<AppInputText title="Mail Password" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="smtp.password" placeholder="Type your mail password" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                    <div v-if="mailDriver === 'mailgun'">
+                        <ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
+                            <AppInputText title="Domain" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="mailgun.domain"
+                                    placeholder="Type your domain"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-						<ValidationProvider tag="div" mode="passive" name="Mail Encryption" rules="required" v-slot="{ errors }">
-							<AppInputText title="Mail Encryption" :error="errors[0]" :is-last="true">
-								<SelectInput v-model="smtp.encryption" :default="smtp.encryption" :options="mailEncryptionList" placeholder="Select your mail encryption" :isError="errors[0]" />
-							</AppInputText>
-						</ValidationProvider>
-					</div>
+                        <ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
+                            <AppInputText title="Secret" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="mailgun.secret"
+                                    placeholder="Type your secret"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-					<div v-if="mailDriver === 'mailgun'">
-						<ValidationProvider tag="div" mode="passive" name="Domain" rules="required" v-slot="{ errors }">
-							<AppInputText title="Domain" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="mailgun.domain" placeholder="Type your domain" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Endpoint"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText title="Endpoint" :error="errors[0]" :is-last="true">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="mailgun.endpoint"
+                                    placeholder="Type your endpoint"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
+                    </div>
 
-						<ValidationProvider tag="div" mode="passive" name="Secret" rules="required" v-slot="{ errors }">
-							<AppInputText title="Secret" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="mailgun.secret" placeholder="Type your secret" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                    <div v-if="mailDriver === 'postmark'">
+                        <ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
+                            <AppInputText title="Token" :error="errors[0]" :is-last="true">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="postmark.token"
+                                    placeholder="Type your token"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
+                    </div>
 
-						<ValidationProvider tag="div" mode="passive" name="Endpoint" rules="required" v-slot="{ errors }">
-							<AppInputText title="Endpoint" :error="errors[0]" :is-last="true">
-								<input class="focus-border-theme input-dark" v-model="mailgun.endpoint" placeholder="Type your endpoint" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
-					</div>
+                    <div v-if="mailDriver === 'ses'">
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Access Key"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText title="Access Key" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="ses.access_key"
+                                    placeholder="Type your access key"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-					<div v-if="mailDriver === 'postmark'">
-						<ValidationProvider tag="div" mode="passive" name="Token" rules="required" v-slot="{ errors }">
-							<AppInputText title="Token" :error="errors[0]" :is-last="true">
-								<input class="focus-border-theme input-dark" v-model="postmark.token" placeholder="Type your token" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
-					</div>
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Secret Access Key"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText title="Secret Access Key" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="ses.secret_access_key"
+                                    placeholder="Type your secret access key"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-					<div v-if="mailDriver === 'ses'">
-						<ValidationProvider tag="div" mode="passive" name="Access Key" rules="required" v-slot="{ errors }">
-							<AppInputText title="Access Key" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="ses.access_key" placeholder="Type your access key" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                        <ValidationProvider
+                            tag="div"
+                            mode="passive"
+                            name="Default Region"
+                            rules="required"
+                            v-slot="{ errors }"
+                        >
+                            <AppInputText title="Default Region" :error="errors[0]">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="ses.default_region"
+                                    placeholder="Type your default region"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
 
-						<ValidationProvider tag="div" mode="passive" name="Secret Access Key" rules="required" v-slot="{ errors }">
-							<AppInputText title="Secret Access Key" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="ses.secret_access_key" placeholder="Type your secret access key" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                        <ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
+                            <AppInputText title="Session Token" :error="errors[0]" :is-last="true">
+                                <input
+                                    class="focus-border-theme input-dark"
+                                    v-model="ses.session_token"
+                                    placeholder="Type your session token"
+                                    type="text"
+                                    :class="{ 'border-red': errors[0] }"
+                                />
+                            </AppInputText>
+                        </ValidationProvider>
+                    </div>
+                </div>
 
-						<ValidationProvider tag="div" mode="passive" name="Default Region" rules="required" v-slot="{ errors }">
-							<AppInputText title="Default Region" :error="errors[0]">
-								<input class="focus-border-theme input-dark" v-model="ses.default_region" placeholder="Type your default region" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
+                <div class="card text-left shadow-card">
+                    <FormLabel>Environment Setup</FormLabel>
 
-						<ValidationProvider tag="div" mode="passive" name="Session Token" v-slot="{ errors }">
-							<AppInputText title="Session Token" :error="errors[0]" :is-last="true">
-								<input class="focus-border-theme input-dark" v-model="ses.session_token" placeholder="Type your session token" type="text" :class="{ 'border-red': errors[0] }" />
-							</AppInputText>
-						</ValidationProvider>
-					</div>
-				</div>
+                    <ValidationProvider
+                        tag="div"
+                        mode="passive"
+                        name="Environment"
+                        rules="required"
+                        v-slot="{ errors }"
+                    >
+                        <AppInputText title="Environment" :error="errors[0]" :is-last="true">
+                            <SelectInput
+                                v-model="environment"
+                                :options="environmentSetupList"
+                                default="production"
+                                placeholder="Select your environment setup"
+                                :isError="errors[0]"
+                            />
+                        </AppInputText>
+                    </ValidationProvider>
+                </div>
 
-				<div class="card shadow-card text-left">
-					<FormLabel>Environment Setup</FormLabel>
-
-					<ValidationProvider tag="div" mode="passive" name="Environment" rules="required" v-slot="{ errors }">
-						<AppInputText title="Environment" :error="errors[0]" :is-last="true">
-							<SelectInput v-model="environment" :options="environmentSetupList" default="production" placeholder="Select your environment setup" :isError="errors[0]" />
-						</AppInputText>
-					</ValidationProvider>
-				</div>
-
-				<InfoBox v-if="isError" type="error" class="!mb-5">
+                <InfoBox v-if="isError" type="error" class="!mb-5">
                     <p>Whooops, something went wrong, please try it again.</p>
                 </InfoBox>
 
-				<AuthButton class="w-full justify-center" icon="chevron-right" text="Save and Set General Settings" :loading="isLoading" :disabled="isLoading" />
+                <AuthButton
+                    class="w-full justify-center"
+                    icon="chevron-right"
+                    text="Save and Set General Settings"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                />
             </ValidationObserver>
         </AuthContent>
     </AuthContentWrapper>
 </template>
 
 <script>
-import AppInputText from "../../components/Admin/AppInputText";
-import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+import AppInputText from '../../components/Admin/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 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 {SettingsIcon} from 'vue-feather-icons'
+import { SettingsIcon } from 'vue-feather-icons'
 import Headline from '../Auth/Headline'
-import {required} from 'vee-validate/dist/rules'
+import { required } from 'vee-validate/dist/rules'
 import axios from 'axios'
-import {mapGetters} from "vuex";
+import { mapGetters } from 'vuex'
 
 export default {
-	name: 'EnvironmentSetup',
-	components: {
-		AuthContentWrapper,
-		ValidationProvider,
-		ValidationObserver,
-		AppInputText,
-		SettingsIcon,
-		SelectInput,
-		AuthContent,
-		AuthButton,
-		FormLabel,
-		required,
-		InfoBox,
-		Headline,
-	},
-	watch: {
-		'storage.driver': function () {
-			this.storage.region = ''
-		},
-		'storage.region': function (val) {
-			this.storage.endpoint = {
-				storj: 'https://gateway.' + val + '.storjshare.io',
-				spaces: 'https://' + val + '.digitaloceanspaces.com',
-				wasabi: 'https://s3.' + val + '.wasabisys.com',
-				backblaze: 'https://s3.' + val + '.backblazeb2.com',
-				oss: 'https://' + val + '.aliyuncs.com',
-			}[this.storage.driver]
-		},
-	},
-	computed: {
-		...mapGetters([
-			'mailEncryptionList',
-			'mailDriverList',
-		]),
-		regionList() {
-			return {
-				storj: this.storjRegions,
-				s3: this.s3Regions,
-				spaces: this.digitalOceanRegions,
-				wasabi: this.wasabiRegions,
-				backblaze: this.backblazeRegions,
-				oss: this.ossRegions,
-			}[this.storage.driver]
-		},
-	},
-	data() {
-		return {
-			isError: false,
-			isLoading: false,
-			environment: 'production',
-			environmentSetupList: [
-				{
-					label: 'Production',
-					value: 'production',
-				},
-				{
-					label: 'Dev',
-					value: 'local',
-				},
-			],
-			ossRegions: [
-				{
-					label: 'China (Hangzhou)',
-					value: 'oss-cn-hangzhou',
-				},
-				{
-					label: 'China (Shanghai)',
-					value: 'oss-cn-shanghai',
-				},
-				{
-					label: 'China (Qingdao)',
-					value: 'oss-cn-qingdao',
-				},
-				{
-					label: 'China (Beijing)',
-					value: 'oss-cn-beijing',
-				},
-				{
-					label: 'China (Zhangjiakou)',
-					value: 'oss-cn-zhangjiakou',
-				},
-				{
-					label: 'China (Hohhot)',
-					value: 'oss-cn-huhehaote',
-				},
-				{
-					label: 'China (Ulanqab)',
-					value: 'oss-cn-wulanchabu',
-				},
-				{
-					label: 'China (Shenzhen)',
-					value: 'oss-cn-shenzhen',
-				},
-				{
-					label: 'China (Heyuan)',
-					value: 'oss-cn-heyuan',
-				},
-				{
-					label: 'China (Guangzhou)',
-					value: 'oss-cn-guangzhou',
-				},
-				{
-					label: 'China (Chengdu)',
-					value: 'oss-cn-chengdu',
-				},
-				{
-					label: 'China (Hong Kong)',
-					value: 'oss-cn-hongkong',
-				},
-			],
-			wasabiRegions: [
-				{
-					label: 'US East 1 (N. Virginia)',
-					value: 'us-east-1',
-				},
-				{
-					label: 'US East 2 (N. Virginia)',
-					value: 'us-east-2',
-				},
-				{
-					label: 'US West 1 (Oregon)',
-					value: 'us-west-1',
-				},
-				{
-					label: 'EU Central 1 (Amsterdam)',
-					value: 'eu-central-1',
-				},
-			],
-			storjRegions: [
-				{
-					label: 'EU Central 1',
-					value: 'eu1',
-				},
-				{
-					label: 'US Central 1',
-					value: 'us1',
-				},
-				{
-					label: 'AP Central 1',
-					value: 'ap1',
-				},
-			],
-			backblazeRegions: [
-				{
-					label: 'us-west-001',
-					value: 'us-west-001',
-				},
-				{
-					label: 'us-west-002',
-					value: 'us-west-002',
-				},
-				{
-					label: 'eu-central-003',
-					value: 'eu-central-003',
-				},
-			],
-			digitalOceanRegions: [
-				{
-					label: 'New York',
-					value: 'nyc3',
-				},
-				{
-					label: 'San Francisco',
-					value: 'sfo2',
-				},
-				{
-					label: 'Amsterdam',
-					value: 'ams3',
-				},
-				{
-					label: 'Singapore',
-					value: 'sgp1',
-				},
-				{
-					label: 'Frankfurt',
-					value: 'fra1',
-				},
-			],
-			s3Regions: [
-				{
-					label: 'us-east-1',
-					value: 'us-east-1',
-				},
-				{
-					label: 'us-east-2',
-					value: 'us-east-2',
-				},
-				{
-					label: 'us-west-1',
-					value: 'us-west-1',
-				},
-				{
-					label: 'us-west-2',
-					value: 'us-west-2',
-				},
-				{
-					label: 'af-south-1',
-					value: 'af-south-1',
-				},
-				{
-					label: 'ap-east-1',
-					value: 'ap-east-1',
-				},
-				{
-					label: 'ap-south-1',
-					value: 'ap-south-1',
-				},
-				{
-					label: 'ap-northeast-2',
-					value: 'ap-northeast-2',
-				},
-				{
-					label: 'ap-southeast-1',
-					value: 'ap-southeast-1',
-				},
-				{
-					label: 'ap-southeast-2',
-					value: 'ap-southeast-2',
-				},
-				{
-					label: 'ap-northeast-1',
-					value: 'ap-northeast-1',
-				},
-				{
-					label: 'ca-central-1',
-					value: 'ca-central-1',
-				},
-				{
-					label: 'eu-central-1',
-					value: 'eu-central-1',
-				},
-				{
-					label: 'eu-west-1',
-					value: 'eu-west-1',
-				},
-				{
-					label: 'eu-west-2',
-					value: 'eu-west-2',
-				},
-				{
-					label: 'eu-south-1',
-					value: 'eu-south-1',
-				},
-				{
-					label: 'eu-west-3',
-					value: 'eu-west-3',
-				},
-				{
-					label: 'eu-north-1',
-					value: 'eu-north-1',
-				},
-				{
-					label: 'me-south-1',
-					value: 'me-south-1',
-				},
-				{
-					label: 'sa-east-1',
-					value: 'sa-east-1',
-				},
-			],
-			storageServiceList: [
-				{
-					label: 'Local Driver',
-					value: 'local',
-				},
-				{
-					label: 'Amazon Web Services S3',
-					value: 's3',
-				},
-				{
-					label: 'Storj',
-					value: 'storj',
-				},
-				{
-					label: 'Digital Ocean Spaces',
-					value: 'spaces',
-				},
-				{
-					label: 'Object Cloud Storage by Wasabi',
-					value: 'wasabi',
-				},
-				{
-					label: 'Backblaze B2 Cloud Storage',
-					value: 'backblaze',
-				},
-				{
-					label: 'Alibaba Cloud OSS',
-					value: 'oss',
-				},
-			],
-			storage: {
-				driver: 'local',
-				key: undefined,
-				secret: undefined,
-				endpoint: undefined,
-				region: undefined,
-				bucket: undefined,
-			},
-			mailDriver: undefined,
-			ses: {
-				access_key: undefined,
-				secret_access_key: undefined,
-				default_region: undefined,
-				session_token: undefined,
-			},
-			smtp: {
-				host: undefined,
-				port: undefined,
-				username: undefined,
-				password: undefined,
-				encryption: undefined,
-			},
-			mailgun: {
-				domain: undefined,
-				secret: undefined,
-				endpoint: undefined,
-			},
-			postmark: {
-				token: undefined,
-			},
-		}
-	},
-	methods: {
-		async EnvironmentSetupSubmit() {
-			if (this.$root.$data.config.isSetupWizardDemo) {
-				this.$router.push({name: 'AppSetup'})
-				return
-			}
+    name: 'EnvironmentSetup',
+    components: {
+        AuthContentWrapper,
+        ValidationProvider,
+        ValidationObserver,
+        AppInputText,
+        SettingsIcon,
+        SelectInput,
+        AuthContent,
+        AuthButton,
+        FormLabel,
+        required,
+        InfoBox,
+        Headline,
+    },
+    watch: {
+        'storage.driver': function () {
+            this.storage.region = ''
+        },
+        'storage.region': function (val) {
+            this.storage.endpoint = {
+                storj: 'https://gateway.' + val + '.storjshare.io',
+                spaces: 'https://' + val + '.digitaloceanspaces.com',
+                wasabi: 'https://s3.' + val + '.wasabisys.com',
+                backblaze: 'https://s3.' + val + '.backblazeb2.com',
+                oss: 'https://' + val + '.aliyuncs.com',
+            }[this.storage.driver]
+        },
+    },
+    computed: {
+        ...mapGetters(['mailEncryptionList', 'mailDriverList']),
+        regionList() {
+            return {
+                storj: this.storjRegions,
+                s3: this.s3Regions,
+                spaces: this.digitalOceanRegions,
+                wasabi: this.wasabiRegions,
+                backblaze: this.backblazeRegions,
+                oss: this.ossRegions,
+            }[this.storage.driver]
+        },
+    },
+    data() {
+        return {
+            isError: false,
+            isLoading: false,
+            environment: 'production',
+            environmentSetupList: [
+                {
+                    label: 'Production',
+                    value: 'production',
+                },
+                {
+                    label: 'Dev',
+                    value: 'local',
+                },
+            ],
+            ossRegions: [
+                {
+                    label: 'China (Hangzhou)',
+                    value: 'oss-cn-hangzhou',
+                },
+                {
+                    label: 'China (Shanghai)',
+                    value: 'oss-cn-shanghai',
+                },
+                {
+                    label: 'China (Qingdao)',
+                    value: 'oss-cn-qingdao',
+                },
+                {
+                    label: 'China (Beijing)',
+                    value: 'oss-cn-beijing',
+                },
+                {
+                    label: 'China (Zhangjiakou)',
+                    value: 'oss-cn-zhangjiakou',
+                },
+                {
+                    label: 'China (Hohhot)',
+                    value: 'oss-cn-huhehaote',
+                },
+                {
+                    label: 'China (Ulanqab)',
+                    value: 'oss-cn-wulanchabu',
+                },
+                {
+                    label: 'China (Shenzhen)',
+                    value: 'oss-cn-shenzhen',
+                },
+                {
+                    label: 'China (Heyuan)',
+                    value: 'oss-cn-heyuan',
+                },
+                {
+                    label: 'China (Guangzhou)',
+                    value: 'oss-cn-guangzhou',
+                },
+                {
+                    label: 'China (Chengdu)',
+                    value: 'oss-cn-chengdu',
+                },
+                {
+                    label: 'China (Hong Kong)',
+                    value: 'oss-cn-hongkong',
+                },
+            ],
+            wasabiRegions: [
+                {
+                    label: 'US East 1 (N. Virginia)',
+                    value: 'us-east-1',
+                },
+                {
+                    label: 'US East 2 (N. Virginia)',
+                    value: 'us-east-2',
+                },
+                {
+                    label: 'US West 1 (Oregon)',
+                    value: 'us-west-1',
+                },
+                {
+                    label: 'EU Central 1 (Amsterdam)',
+                    value: 'eu-central-1',
+                },
+            ],
+            storjRegions: [
+                {
+                    label: 'EU Central 1',
+                    value: 'eu1',
+                },
+                {
+                    label: 'US Central 1',
+                    value: 'us1',
+                },
+                {
+                    label: 'AP Central 1',
+                    value: 'ap1',
+                },
+            ],
+            backblazeRegions: [
+                {
+                    label: 'us-west-001',
+                    value: 'us-west-001',
+                },
+                {
+                    label: 'us-west-002',
+                    value: 'us-west-002',
+                },
+                {
+                    label: 'eu-central-003',
+                    value: 'eu-central-003',
+                },
+            ],
+            digitalOceanRegions: [
+                {
+                    label: 'New York',
+                    value: 'nyc3',
+                },
+                {
+                    label: 'San Francisco',
+                    value: 'sfo2',
+                },
+                {
+                    label: 'Amsterdam',
+                    value: 'ams3',
+                },
+                {
+                    label: 'Singapore',
+                    value: 'sgp1',
+                },
+                {
+                    label: 'Frankfurt',
+                    value: 'fra1',
+                },
+            ],
+            s3Regions: [
+                {
+                    label: 'us-east-1',
+                    value: 'us-east-1',
+                },
+                {
+                    label: 'us-east-2',
+                    value: 'us-east-2',
+                },
+                {
+                    label: 'us-west-1',
+                    value: 'us-west-1',
+                },
+                {
+                    label: 'us-west-2',
+                    value: 'us-west-2',
+                },
+                {
+                    label: 'af-south-1',
+                    value: 'af-south-1',
+                },
+                {
+                    label: 'ap-east-1',
+                    value: 'ap-east-1',
+                },
+                {
+                    label: 'ap-south-1',
+                    value: 'ap-south-1',
+                },
+                {
+                    label: 'ap-northeast-2',
+                    value: 'ap-northeast-2',
+                },
+                {
+                    label: 'ap-southeast-1',
+                    value: 'ap-southeast-1',
+                },
+                {
+                    label: 'ap-southeast-2',
+                    value: 'ap-southeast-2',
+                },
+                {
+                    label: 'ap-northeast-1',
+                    value: 'ap-northeast-1',
+                },
+                {
+                    label: 'ca-central-1',
+                    value: 'ca-central-1',
+                },
+                {
+                    label: 'eu-central-1',
+                    value: 'eu-central-1',
+                },
+                {
+                    label: 'eu-west-1',
+                    value: 'eu-west-1',
+                },
+                {
+                    label: 'eu-west-2',
+                    value: 'eu-west-2',
+                },
+                {
+                    label: 'eu-south-1',
+                    value: 'eu-south-1',
+                },
+                {
+                    label: 'eu-west-3',
+                    value: 'eu-west-3',
+                },
+                {
+                    label: 'eu-north-1',
+                    value: 'eu-north-1',
+                },
+                {
+                    label: 'me-south-1',
+                    value: 'me-south-1',
+                },
+                {
+                    label: 'sa-east-1',
+                    value: 'sa-east-1',
+                },
+            ],
+            storageServiceList: [
+                {
+                    label: 'Local Driver',
+                    value: 'local',
+                },
+                {
+                    label: 'Amazon Web Services S3',
+                    value: 's3',
+                },
+                {
+                    label: 'Storj',
+                    value: 'storj',
+                },
+                {
+                    label: 'Digital Ocean Spaces',
+                    value: 'spaces',
+                },
+                {
+                    label: 'Object Cloud Storage by Wasabi',
+                    value: 'wasabi',
+                },
+                {
+                    label: 'Backblaze B2 Cloud Storage',
+                    value: 'backblaze',
+                },
+                {
+                    label: 'Alibaba Cloud OSS',
+                    value: 'oss',
+                },
+            ],
+            storage: {
+                driver: 'local',
+                key: undefined,
+                secret: undefined,
+                endpoint: undefined,
+                region: undefined,
+                bucket: undefined,
+            },
+            mailDriver: undefined,
+            ses: {
+                access_key: undefined,
+                secret_access_key: undefined,
+                default_region: undefined,
+                session_token: undefined,
+            },
+            smtp: {
+                host: undefined,
+                port: undefined,
+                username: undefined,
+                password: undefined,
+                encryption: undefined,
+            },
+            mailgun: {
+                domain: undefined,
+                secret: undefined,
+                endpoint: undefined,
+            },
+            postmark: {
+                token: undefined,
+            },
+        }
+    },
+    methods: {
+        async EnvironmentSetupSubmit() {
+            if (this.$root.$data.config.isSetupWizardDemo) {
+                this.$router.push({ name: 'AppSetup' })
+                return
+            }
 
-			// Validate fields
-			const isValid = await this.$refs.environmentSetup.validate()
+            // Validate fields
+            const isValid = await this.$refs.environmentSetup.validate()
 
-			if (!isValid) return
+            if (!isValid) return
 
-			// Start loading
-			this.isLoading = true
+            // Start loading
+            this.isLoading = true
 
-			// Send request to get verify account
-			axios
-				.post('/api/setup/environment-setup', {
-					environment: this.environment,
-					storage: this.storage,
-					mailDriver: this.mailDriver,
-					smtp: this.smtp,
-					mailgun: this.mailgun,
-					ses: this.ses,
-					postmark: this.postmark,
-				})
-				.then(() => {
-					// Redirect to next step
-					this.$router.push({name: 'AppSetup'})
-				})
-				.catch((error) => {
-					this.isError = true
+            // Send request to get verify account
+            axios
+                .post('/api/setup/environment-setup', {
+                    environment: this.environment,
+                    storage: this.storage,
+                    mailDriver: this.mailDriver,
+                    smtp: this.smtp,
+                    mailgun: this.mailgun,
+                    ses: this.ses,
+                    postmark: this.postmark,
+                })
+                .then(() => {
+                    // Redirect to next step
+                    this.$router.push({ name: 'AppSetup' })
+                })
+                .catch((error) => {
+                    this.isError = true
+                })
+                .finally(() => {
+                    this.isLoading = false
+                })
+        },
+    },
+    beforeMount() {
+        if (this.$root.$data.config.isSetupWizardDebug) {
+            this.mailDriver = 'smtp'
 
-				})
-				.finally(() => {
-					this.isLoading = false
-				})
-		},
-	},
-	beforeMount() {
-		if (this.$root.$data.config.isSetupWizardDebug) {
-			this.mailDriver = 'smtp'
+            this.smtp = {
+                host: 'test.mail.com',
+                port: 445,
+                username: 'howdy@hi5ve.digital',
+                password: 'root',
+                encryption: 'ssl',
+            }
 
-			this.smtp = {
-				host: 'test.mail.com',
-				port: 445,
-				username: 'howdy@hi5ve.digital',
-				password: 'root',
-				encryption: 'ssl',
-			}
+            this.environment = 'local'
 
-			this.environment = 'local'
-
-			this.storage.driver = 'local'
-			//this.storage.key = '51oLNVBaNKcxHG0lFucxBbJyhxmTwmF3WnzVLRqMZj0'
-			//this.storage.secret = 'sC1YuKsbWv7MdWugb9ZsYBqv2QZJ+QOuHZHEddOsAao'
-			//this.storage.endpoint = 'https://nyc3.digitaloceanspaces.com'
-			//this.storage.bucket = 'cloud'
-			//this.storage.region = 'nyc3'
-			setTimeout(() => this.storage.region = 'nyc3', 100)
-		}
-	},
-	created() {
-		this.$scrollTop()
-	},
+            this.storage.driver = 'local'
+            //this.storage.key = '51oLNVBaNKcxHG0lFucxBbJyhxmTwmF3WnzVLRqMZj0'
+            //this.storage.secret = 'sC1YuKsbWv7MdWugb9ZsYBqv2QZJ+QOuHZHEddOsAao'
+            //this.storage.endpoint = 'https://nyc3.digitaloceanspaces.com'
+            //this.storage.bucket = 'cloud'
+            //this.storage.region = 'nyc3'
+            setTimeout(() => (this.storage.region = 'nyc3'), 100)
+        }
+    },
+    created() {
+        this.$scrollTop()
+    },
 }
 </script>
diff --git a/resources/js/views/SetupWizard/PurchaseCode.vue b/resources/js/views/SetupWizard/PurchaseCode.vue
index dbb152e1..a9d89392 100644
--- a/resources/js/views/SetupWizard/PurchaseCode.vue
+++ b/resources/js/views/SetupWizard/PurchaseCode.vue
@@ -1,22 +1,63 @@
 <template>
-    <AuthContentWrapper ref="auth" class="h-screen dark:bg-dark-background bg-white">
+    <AuthContentWrapper ref="auth" class="h-screen bg-white dark:bg-dark-background">
         <!--Licence Verify-->
         <AuthContent name="licence-verify" :visible="true">
-            <Headline title="Setup Wizard" description="Please set your purchase code before continue to set up your application.">
-                <settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
+            <Headline
+                title="Setup Wizard"
+                description="Please set your purchase code before continue to set up your application."
+            >
+                <settings-icon
+                    size="40"
+                    class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
+                />
             </Headline>
 
-            <ValidationObserver @submit.prevent="verifyPurchaseCode" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0">
-                <ValidationProvider tag="div" mode="passive" class="w-full text-left" name="Purchase Code" rules="required" v-slot="{ errors }">
-                    <input v-model="purchaseCode" placeholder="Paste your purchase code" type="text" class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground" :class="{ 'border-red': errors[0] }" />
+            <ValidationObserver
+                @submit.prevent="verifyPurchaseCode"
+                ref="verifyPurchaseCode"
+                v-slot="{ invalid }"
+                tag="form"
+                class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0"
+            >
+                <ValidationProvider
+                    tag="div"
+                    mode="passive"
+                    class="w-full text-left"
+                    name="Purchase Code"
+                    rules="required"
+                    v-slot="{ errors }"
+                >
+                    <input
+                        v-model="purchaseCode"
+                        placeholder="Paste your purchase code"
+                        type="text"
+                        class="focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
+                        :class="{ 'border-red': errors[0] }"
+                    />
                     <span class="text-left text-xs text-red-600" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
-                <AuthButton icon="chevron-right" text="Verify" class="w-full justify-center md:w-min" :loading="isLoading" :disabled="isLoading" />
+                <AuthButton
+                    icon="chevron-right"
+                    text="Verify"
+                    class="w-full justify-center md:w-min"
+                    :loading="isLoading"
+                    :disabled="isLoading"
+                />
             </ValidationObserver>
 
             <p class="block">
-                <a href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-" target="_blank" class="text-theme font-bold">Where I can find purchase code? </a>
-                <a class="black-link" href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986" target="_blank">Don’t have purchase code? </a>
+                <a
+                    href="https://help.market.envato.com/hc/en-us/articles/202822600-Where-Is-My-Purchase-Code-"
+                    target="_blank"
+                    class="text-theme font-bold"
+                    >Where I can find purchase code?
+                </a>
+                <a
+                    class="black-link"
+                    href="https://codecanyon.net/item/vue-file-manager-with-laravel-backend/25815986"
+                    target="_blank"
+                    >Don’t have purchase code?
+                </a>
             </p>
         </AuthContent>
     </AuthContentWrapper>
@@ -55,9 +96,9 @@ export default {
     },
     methods: {
         async verifyPurchaseCode() {
-			if (this.$root.$data.config.isSetupWizardDemo) {
-				this.$router.push({name: 'Database'})
-			}
+            if (this.$root.$data.config.isSetupWizardDemo) {
+                this.$router.push({ name: 'Database' })
+            }
 
             // Validate fields
             const isValid = await this.$refs.verifyPurchaseCode.validate()
@@ -76,15 +117,15 @@ export default {
                     // End loading
                     this.isLoading = false
 
-					console.log(response);
+                    console.log(response)
 
-					if (response.data === 'b6896a44017217c36f4a6fdc56699728') {
-						this.isExtended = true
-						localStorage.setItem('license', 'Extended')
-					} else {
-						this.isExtended = false
-						localStorage.setItem('license', 'Regular')
-					}
+                    if (response.data === 'b6896a44017217c36f4a6fdc56699728') {
+                        this.isExtended = true
+                        localStorage.setItem('license', 'Extended')
+                    } else {
+                        this.isExtended = false
+                        localStorage.setItem('license', 'Regular')
+                    }
 
                     localStorage.setItem('purchase_code', this.purchaseCode)
 
@@ -101,7 +142,9 @@ export default {
                         })
                     } else if (error.response.status === 404) {
                         this.$refs.verifyPurchaseCode.setErrors({
-                            'Purchase Code': ['You may have misconfigured the app, please read the readme file and try it again.'],
+                            'Purchase Code': [
+                                'You may have misconfigured the app, please read the readme file and try it again.',
+                            ],
                         })
                     } else {
                         this.$refs.verifyPurchaseCode.setErrors({
diff --git a/resources/js/views/SetupWizard/StatusCheck.vue b/resources/js/views/SetupWizard/StatusCheck.vue
index 5b4a8be5..c53ddfea 100644
--- a/resources/js/views/SetupWizard/StatusCheck.vue
+++ b/resources/js/views/SetupWizard/StatusCheck.vue
@@ -1,119 +1,146 @@
 <template>
     <AuthContentWrapper ref="auth">
         <!--Server Check-->
-        <AuthContent :visible="true" class="!max-w-2xl mt-6 mb-12">
+        <AuthContent :visible="true" class="mt-6 mb-12 !max-w-2xl">
             <Headline
-                class="mx-auto max-w-screen-sm !mb-10"
+                class="mx-auto !mb-10 max-w-screen-sm"
                 title="Server Check"
                 description="At first, we have to check if all modules and setup is ready for running VueFileManager"
             >
-                <settings-icon size="40" class="vue-feather text-theme mx-auto animate-[spin_5s_linear_infinite] mb-3" />
+                <settings-icon
+                    size="40"
+                    class="vue-feather text-theme mx-auto mb-3 animate-[spin_5s_linear_infinite]"
+                />
             </Headline>
 
-			<!--PHP version and ini check-->
-			<div class="card shadow-card">
-                <FormLabel>
-					PHP Setup
-				</FormLabel>
-
-                <InfoBox class="!mb-2">
-                    <p>Those PHP settings are needed for accurate running VueFileManager on your server, please check and tweak in your php.ini if needed.</p>
-                </InfoBox>
-
-				<div class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
-					<div class="text-left">
-						<b class="text-sm font-bold block">PHP Version</b>
-						<small v-if="!phpVersion.acceptable" class="text-xs text-gray-600">
-							You need PHP version at least {{ phpVersion.minimal }}.
-						</small>
-					</div>
-					<div class="flex items-center">
-						<check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-theme"/>
-						<x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600" />
-
-						<span class="ml-3 text-sm font-bold" :class="phpVersion.acceptable ? 'text-green-600' : 'text-red-600'">
-							{{ phpVersion.current }}
-						</span>
-					</div>
-				</div>
-
-				<div v-for="(values, setting, i) in ini" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
-					<div class="text-left">
-						<b class="text-sm font-bold block">{{ setting }}</b>
-						<small v-if="!values.status" class="text-xs text-gray-600">
-							We recommend set this value at least {{ values.minimal }}.
-						</small>
-					</div>
-					<div class="flex items-center">
-						<check-icon v-if="values.status" size="16" class="vue-feather text-theme"/>
-						<x-icon v-if="!values.status" size="16" class="vue-feather text-red-600" />
-
-						<span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600' : 'text-red-600'">
-							{{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
-						</span>
-					</div>
-				</div>
-			</div>
-
-			<!--PHP Extension info-->
+            <!--PHP version and ini check-->
             <div class="card shadow-card">
-                <FormLabel>
-					Required PHP Extensions
-				</FormLabel>
+                <FormLabel> PHP Setup </FormLabel>
 
                 <InfoBox class="!mb-2">
-                    <p>Those PHP modules are needed for accurate running VueFileManager on your server, please check and install if some is missing.</p>
+                    <p>
+                        Those PHP settings are needed for accurate running VueFileManager on your server, please check
+                        and tweak in your php.ini if needed.
+                    </p>
                 </InfoBox>
 
-				<div v-if="modules" v-for="(value, module, i) in modules" :key="i" class="py-3 flex items-center justify-between border-b border-dashed border-light dark:border-opacity-5">
-					<b class="text-sm font-bold">
-						{{ module }}
-					</b>
-					<div class="flex items-center">
-						<check-icon v-if="value" size="16" class="vue-feather text-theme"/>
-						<x-icon v-if="!value" size="16" class="vue-feather text-red-600"/>
+                <div
+                    class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
+                >
+                    <div class="text-left">
+                        <b class="block text-sm font-bold">PHP Version</b>
+                        <small v-if="!phpVersion.acceptable" class="text-xs text-gray-600">
+                            You need PHP version at least {{ phpVersion.minimal }}.
+                        </small>
+                    </div>
+                    <div class="flex items-center">
+                        <check-icon v-if="phpVersion.acceptable" size="16" class="vue-feather text-theme" />
+                        <x-icon v-if="!phpVersion.acceptable" size="16" class="vue-feather text-red-600" />
 
-						<span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600' : 'text-red-600'">
-							{{ value ? 'Module Installed' : 'Missing Module' }}
-						</span>
-					</div>
-				</div>
-			</div>
+                        <span
+                            class="ml-3 text-sm font-bold"
+                            :class="phpVersion.acceptable ? 'text-green-600' : 'text-red-600'"
+                        >
+                            {{ phpVersion.current }}
+                        </span>
+                    </div>
+                </div>
 
-			<!--API check-->
-			<div class="card shadow-card">
-                <FormLabel>
-					API
-				</FormLabel>
+                <div
+                    v-for="(values, setting, i) in ini"
+                    :key="i"
+                    class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
+                >
+                    <div class="text-left">
+                        <b class="block text-sm font-bold">{{ setting }}</b>
+                        <small v-if="!values.status" class="text-xs text-gray-600">
+                            We recommend set this value at least {{ values.minimal }}.
+                        </small>
+                    </div>
+                    <div class="flex items-center">
+                        <check-icon v-if="values.status" size="16" class="vue-feather text-theme" />
+                        <x-icon v-if="!values.status" size="16" class="vue-feather text-red-600" />
+
+                        <span class="ml-3 text-sm font-bold" :class="values.status ? 'text-green-600' : 'text-red-600'">
+                            {{ values.current }}{{ setting !== 'max_execution_time' ? 'M' : '' }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!--PHP Extension info-->
+            <div class="card shadow-card">
+                <FormLabel> Required PHP Extensions </FormLabel>
+
+                <InfoBox class="!mb-2">
+                    <p>
+                        Those PHP modules are needed for accurate running VueFileManager on your server, please check
+                        and install if some is missing.
+                    </p>
+                </InfoBox>
+
+                <div
+                    v-if="modules"
+                    v-for="(value, module, i) in modules"
+                    :key="i"
+                    class="flex items-center justify-between border-b border-dashed border-light py-3 dark:border-opacity-5"
+                >
+                    <b class="text-sm font-bold">
+                        {{ module }}
+                    </b>
+                    <div class="flex items-center">
+                        <check-icon v-if="value" size="16" class="vue-feather text-theme" />
+                        <x-icon v-if="!value" size="16" class="vue-feather text-red-600" />
+
+                        <span class="ml-3 text-sm font-bold" :class="value ? 'text-green-600' : 'text-red-600'">
+                            {{ value ? 'Module Installed' : 'Missing Module' }}
+                        </span>
+                    </div>
+                </div>
+            </div>
+
+            <!--API check-->
+            <div class="card shadow-card">
+                <FormLabel> API </FormLabel>
 
                 <InfoBox class="!mb-2">
                     <p>The check, if your domain is set correctly.</p>
                 </InfoBox>
 
-				<div class="pt-3 flex items-center justify-between">
-					<div class="text-left">
-						<b class="text-sm font-bold block">API</b>
-						<small v-if="isCheckedAPI && !apiRunning" class="text-xs text-gray-600">
-							We detect, your domain root is not set correctly, please check it.
-						</small>
-					</div>
-					<div v-if="isCheckedAPI" class="flex items-center">
-						<check-icon v-if="apiRunning" size="16" class="vue-feather text-theme"/>
-						<x-icon v-if="!apiRunning" size="16" class="vue-feather text-red-600" />
+                <div class="flex items-center justify-between pt-3">
+                    <div class="text-left">
+                        <b class="block text-sm font-bold">API</b>
+                        <small v-if="isCheckedAPI && !apiRunning" class="text-xs text-gray-600">
+                            We detect, your domain root is not set correctly, please check it.
+                        </small>
+                    </div>
+                    <div v-if="isCheckedAPI" class="flex items-center">
+                        <check-icon v-if="apiRunning" size="16" class="vue-feather text-theme" />
+                        <x-icon v-if="!apiRunning" size="16" class="vue-feather text-red-600" />
 
-						<span class="ml-3 text-sm font-bold" :class="apiRunning ? 'text-green-600' : 'text-red-600'">
-							{{ apiRunning ? 'Working correctly' : "Doesn't work" }}
-						</span>
-					</div>
-					<span v-if="!isCheckedAPI" class="ml-3 text-sm font-bold text-gray-600">Checking your API...</span>
-				</div>
+                        <span class="ml-3 text-sm font-bold" :class="apiRunning ? 'text-green-600' : 'text-red-600'">
+                            {{ apiRunning ? 'Working correctly' : "Doesn't work" }}
+                        </span>
+                    </div>
+                    <span v-if="!isCheckedAPI" class="ml-3 text-sm font-bold text-gray-600">Checking your API...</span>
+                </div>
 
                 <InfoBox v-if="isError" type="error" class="!mb-2">
-                    <p>We can't proceed to the next step because there are unresolved issues. Please solve it at first and next continue.</p>
+                    <p>
+                        We can't proceed to the next step because there are unresolved issues. Please solve it at first
+                        and next continue.
+                    </p>
                 </InfoBox>
-			</div>
+            </div>
 
-			<AuthButton @click.native="lastCheckBeforeNextPage" class="w-full justify-center" icon="chevron-right" text="Awesome, I'm done!" :loading="isLoading" :disabled="isLoading" />
+            <AuthButton
+                @click.native="lastCheckBeforeNextPage"
+                class="w-full justify-center"
+                icon="chevron-right"
+                text="Awesome, I'm done!"
+                :loading="isLoading"
+                :disabled="isLoading"
+            />
         </AuthContent>
     </AuthContentWrapper>
 </template>
@@ -172,9 +199,13 @@ export default {
     },
     methods: {
         lastCheckBeforeNextPage() {
-            let modulesCheck = Object.values(this.$root.$data.config.statusCheck.modules).every((module) => module === true)
+            let modulesCheck = Object.values(this.$root.$data.config.statusCheck.modules).every(
+                (module) => module === true
+            )
 
-            let iniCheck = Object.values(this.$root.$data.config.statusCheck.ini).every((setting) => setting.status === true)
+            let iniCheck = Object.values(this.$root.$data.config.statusCheck.ini).every(
+                (setting) => setting.status === true
+            )
 
             if (modulesCheck && iniCheck && this.apiRunning && this.phpVersion.acceptable) {
                 this.$router.push({ name: 'PurchaseCode' })
@@ -186,7 +217,7 @@ export default {
             axios
                 .get('/api/ping')
                 .then((response) => {
-                    this.apiRunning = response.data === 'pong';
+                    this.apiRunning = response.data === 'pong'
                 })
                 .catch(() => {
                     this.apiRunning = false
@@ -198,4 +229,4 @@ export default {
         this.pingAPI()
     },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/js/views/Shared.vue b/resources/js/views/Shared.vue
index c2e58c46..462c4195 100644
--- a/resources/js/views/Shared.vue
+++ b/resources/js/views/Shared.vue
@@ -61,13 +61,13 @@ import DragUI from '../components/FilesView/DragUI'
 import Alert from '../components/FilesView/Alert'
 import { mapGetters } from 'vuex'
 import { events } from '../bus'
-import router from "../router";
-import DesktopSharepageToolbar from "../components/FilesView/DesktopSharepageToolbar";
+import router from '../router'
+import DesktopSharepageToolbar from '../components/FilesView/DesktopSharepageToolbar'
 
 export default {
     name: 'Shared',
     components: {
-		DesktopSharepageToolbar,
+        DesktopSharepageToolbar,
         MobileToolbar,
         InfoSidebar,
         NavigationSharePanel,
@@ -102,8 +102,9 @@ export default {
         events.$on('mobile-menu:show', () => (this.isScaledDown = true))
         events.$on('mobile-menu:hide', () => (this.isScaledDown = false))
 
-		this.$store.dispatch('getShareDetail', this.$router.currentRoute.params.token)
-			.then(() => this.$store.dispatch('getFolderTree'))
+        this.$store
+            .dispatch('getShareDetail', this.$router.currentRoute.params.token)
+            .then(() => this.$store.dispatch('getFolderTree'))
     },
 }
 </script>
diff --git a/resources/js/views/SharedAuthentication.vue b/resources/js/views/SharedAuthentication.vue
index e98f90df..b82d4f2b 100644
--- a/resources/js/views/SharedAuthentication.vue
+++ b/resources/js/views/SharedAuthentication.vue
@@ -83,7 +83,7 @@ export default {
                 })
                 .then((response) => {
                     // Show file browser
-                    if ( response.data.data.attributes.type === 'folder' ) {
+                    if (response.data.data.attributes.type === 'folder') {
                         this.$router.replace({
                             name: 'Public',
                             params: {
@@ -94,7 +94,7 @@ export default {
                     }
 
                     // Show single file
-                    if ( response.data.data.attributes.type !== 'folder' ) {
+                    if (response.data.data.attributes.type !== 'folder') {
                         this.$router.push({ name: 'SharedSingleFile' })
                     }
                 })
diff --git a/resources/js/views/SharedSingleFile.vue b/resources/js/views/SharedSingleFile.vue
index de5c63d1..0bb2c734 100644
--- a/resources/js/views/SharedSingleFile.vue
+++ b/resources/js/views/SharedSingleFile.vue
@@ -1,61 +1,73 @@
 <template>
     <div class="flex h-screen items-center justify-center p-4">
+        <!--App logo-->
+        <div v-if="file && !isVideo" class="fixed top-4 left-0 right-0">
+            <router-link :to="{ name: 'SignIn' }" class="block">
+                <!--Image logo-->
+                <img
+                    v-if="config.app_logo_horizontal"
+                    class="mx-auto w-44"
+                    :src="$getImage(config.app_logo_horizontal)"
+                    :alt="config.app_name"
+                />
 
-		<!--App logo-->
-		<div v-if="file && !isVideo" class="fixed top-4 left-0 right-0">
-			<router-link :to="{name: 'SignIn'}" class="block">
-				<!--Image logo-->
-				<img v-if="config.app_logo_horizontal" class="mx-auto w-44" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
+                <!--Text logo if image isn't available-->
+                <b v-if="!config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
+                    {{ config.app_name }}
+                </b>
+            </router-link>
+        </div>
 
-				<!--Text logo if image isn't available-->
-				<b v-if="! config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
-					{{ config.app_name }}
-				</b>
-			</router-link>
-		</div>
-
-		<!--File preview-->
+        <!--File preview-->
         <div v-if="file" class="w-full text-center">
+            <!--App logo-->
+            <router-link v-if="isVideo" :to="{ name: 'SignIn' }" class="block">
+                <!--Image logo-->
+                <img
+                    v-if="config.app_logo_horizontal"
+                    class="mx-auto w-44"
+                    :src="$getImage(config.app_logo_horizontal)"
+                    :alt="config.app_name"
+                />
 
-			<!--App logo-->
-			<router-link v-if="isVideo" :to="{name: 'SignIn'}" class="block">
-				<!--Image logo-->
-				<img v-if="config.app_logo_horizontal" class="mx-auto w-44" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
+                <!--Text logo if image isn't available-->
+                <b v-if="!config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
+                    {{ config.app_name }}
+                </b>
+            </router-link>
 
-				<!--Text logo if image isn't available-->
-				<b v-if="! config.app_logo_horizontal" class="mb-4 block text-xl font-bold">
-					{{ config.app_name }}
-				</b>
-			</router-link>
+            <!--File item-->
+            <ItemGrid v-if="!isVideo" :entry="file" :mobile-handler="false" class="mt-2" />
 
-			<!--File item-->
-            <ItemGrid v-if="! isVideo" :entry="file" :mobile-handler="false" class="mt-2" />
+            <!--Video preview-->
+            <div v-if="isVideo" class="mb-4">
+                <!--Video preview-->
+                <Video
+                    :file="file"
+                    class="mx-auto my-10 w-full self-center rounded-lg shadow-xl lg:max-w-xl xl:max-w-3xl 2xl:max-w-5xl"
+                />
 
-			<!--Video preview-->
-			<div v-if="isVideo" class="mb-4">
+                <!--Item Info-->
+                <div class="text-center">
+                    <!--Item Title-->
+                    <b class="inline-block w-full text-sm tracking-tight md:px-6">
+                        {{ file.data.attributes.name }}
+                    </b>
 
-				<!--Video preview-->
-				<Video :file="file" class="w-full lg:max-w-xl xl:max-w-3xl 2xl:max-w-5xl self-center mx-auto my-10 shadow-xl rounded-lg"/>
+                    <!--Item sub line-->
+                    <div class="flex items-center justify-center">
+                        <!--File & Image sub line-->
+                        <small class="block text-xs text-gray-500 dark:text-gray-500">
+                            {{ file.data.attributes.filesize
+                            }}<span class="text-xs text-gray-500 lg:inline-block"
+                                >, {{ file.data.attributes.created_at }}</span
+                            >
+                        </small>
+                    </div>
+                </div>
+            </div>
 
-				<!--Item Info-->
-				<div class="text-center">
-					<!--Item Title-->
-					<b class="tracking-tight inline-block w-full text-sm md:px-6">
-						{{ file.data.attributes.name }}
-					</b>
-
-					<!--Item sub line-->
-					<div class="flex items-center justify-center">
-
-						<!--File & Image sub line-->
-						<small class="block text-xs text-gray-500 dark:text-gray-500">
-							{{ file.data.attributes.filesize }}<span class="text-xs text-gray-500 lg:inline-block">, {{ file.data.attributes.created_at }}</span>
-						</small>
-					</div>
-				</div>
-			</div>
-
-			<!--Download button-->
+            <!--Download button-->
             <ButtonBase @click.native="$downloadSelection(file)" button-style="theme" class="mx-auto">
                 {{ $t('page_shared.download_file') }}
             </ButtonBase>
@@ -68,7 +80,7 @@
 
 <script>
 import ButtonBase from '../components/FilesView/ButtonBase'
-import Video from "../components/FilePreview/Media/Video"
+import Video from '../components/FilePreview/Media/Video'
 import ItemGrid from '../components/FilesView/ItemGrid'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
@@ -78,13 +90,13 @@ export default {
     components: {
         ButtonBase,
         ItemGrid,
-		Video,
+        Video,
     },
     computed: {
         ...mapGetters(['config']),
-		isVideo() {
-			return this.file.data.type === 'video'
-		}
+        isVideo() {
+            return this.file.data.type === 'video'
+        },
     },
     data() {
         return {
@@ -98,8 +110,7 @@ export default {
                 this.file = response.data
             })
             .catch((error) => {
-                if (error.response.status === 403)
-					this.$router.push({ name: 'SharedAuthentication' })
+                if (error.response.status === 403) this.$router.push({ name: 'SharedAuthentication' })
             })
     },
 }
diff --git a/resources/js/views/Teams/Invitation.vue b/resources/js/views/Teams/Invitation.vue
index fdf84e61..9cd0f3a1 100644
--- a/resources/js/views/Teams/Invitation.vue
+++ b/resources/js/views/Teams/Invitation.vue
@@ -166,12 +166,11 @@ export default {
             axios
                 .put(`/api/teams/invitations/${this.$router.currentRoute.params.id}`)
                 .then(() => {
-
-					if (this.invitation.data.attributes.isExistedUser) {
-                    	this.goToAuthPage('accepted')
-					} else {
-						this.$router.push({name: 'SignUp'})
-					}
+                    if (this.invitation.data.attributes.isExistedUser) {
+                        this.goToAuthPage('accepted')
+                    } else {
+                        this.$router.push({ name: 'SignUp' })
+                    }
                 })
                 .catch(() => {
                     this.$isSomethingWrong()
diff --git a/resources/js/views/TemporaryUnavailable.vue b/resources/js/views/TemporaryUnavailable.vue
index 81c4b0a2..1cb98cf7 100644
--- a/resources/js/views/TemporaryUnavailable.vue
+++ b/resources/js/views/TemporaryUnavailable.vue
@@ -1,7 +1,10 @@
 <template>
     <AuthContentWrapper ref="auth" class="h-screen">
         <AuthContent :visible="true">
-            <Headline :title="$t('Temporary Unavailable')" :description="$t('Unfortunately, this shared link is temporary unavailable. Please try it later.')" />
+            <Headline
+                :title="$t('Temporary Unavailable')"
+                :description="$t('Unfortunately, this shared link is temporary unavailable. Please try it later.')"
+            />
 
             <span class="additional-link"
                 >{{ $t('page_registration.have_an_account') }}
diff --git a/resources/js/views/UploadRequest.vue b/resources/js/views/UploadRequest.vue
new file mode 100644
index 00000000..73326d23
--- /dev/null
+++ b/resources/js/views/UploadRequest.vue
@@ -0,0 +1,90 @@
+<template>
+    <div class="lg:flex lg:h-screen lg:overflow-hidden">
+        <!--On Top of App Components-->
+        <FilePreview />
+        <Spotlight />
+
+        <!--Popups-->
+        <CreateFolderPopup />
+        <RenameItemPopup />
+        <MoveItemPopup />
+
+        <!--Mobile components-->
+        <FileSortingMobile />
+        <FileFilterMobile />
+
+        <!--Others-->
+        <DragUI />
+
+        <div
+            @contextmenu.prevent.capture="contextMenu($event, undefined)"
+            class="transition-transform duration-200 lg:grid lg:flex-grow lg:content-start lg:px-3.5"
+        >
+            <DesktopUploadRequestToolbar v-if="entries.length" />
+            <!--<MobileToolbar />-->
+
+            <!--Google Adsense banner-->
+            <div v-if="config.allowedAdsense" v-html="config.adsenseBanner01" class="mb-5 min-h-[120px]"></div>
+
+            <!--File list & info sidebar-->
+            <div class="flex space-x-3 lg:overflow-hidden">
+                <router-view id="file-view" class="relative w-full" :key="$route.fullPath" />
+
+                <!--<InfoSidebar v-if="isVisibleSidebar" />-->
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import DesktopUploadRequestToolbar from '../components/FilesView/DesktopUploadRequestToolbar'
+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 RenameItemPopup from '../components/Others/RenameItemPopup'
+import MobileToolbar from '../components/FilesView/MobileToolbar'
+import FilePreview from '../components/FilePreview/FilePreview'
+import MoveItemPopup from '../components/Others/MoveItemPopup'
+import InfoSidebar from '../components/FilesView/InfoSidebar'
+import Spotlight from '../components/Spotlight/Spotlight'
+import DragUI from '../components/FilesView/DragUI'
+import { mapGetters } from 'vuex'
+import { events } from '../bus'
+
+export default {
+    name: 'UploadRequest',
+    components: {
+        DesktopUploadRequestToolbar,
+        CreateFolderPopup,
+        FileSortingMobile,
+        FileFilterMobile,
+        RenameItemPopup,
+        DesktopToolbar,
+        MoveItemPopup,
+        MobileToolbar,
+        InfoSidebar,
+        FilePreview,
+        Spotlight,
+        DragUI,
+    },
+    computed: {
+        ...mapGetters(['isVisibleSidebar', 'config', 'entries']),
+    },
+    data() {
+        return {
+            isScaledDown: false,
+        }
+    },
+    methods: {
+        contextMenu(event, item) {
+            events.$emit('context-menu:show', event, item)
+        },
+    },
+    mounted() {
+        // TODO: new scaledown effect
+        events.$on('mobile-menu:show', () => (this.isScaledDown = true))
+        events.$on('mobile-menu:hide', () => (this.isScaledDown = false))
+    },
+}
+</script>
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index c539afd1..76abd9be 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -5,8 +5,16 @@
             <FormLabel icon="smartphone">
                 {{ $t('2fa.settings.title') }}
             </FormLabel>
-            <AppInputSwitch :title="$t('popup_2fa.switch_title')" :description="$t('popup_2fa.switch_info')" :is-last="!user.data.attributes.two_factor_authentication">
-                <SwitchInput v-model="user.data.attributes.two_factor_authentication" class="switch" :state="user.data.attributes.two_factor_authentication" />
+            <AppInputSwitch
+                :title="$t('popup_2fa.switch_title')"
+                :description="$t('popup_2fa.switch_info')"
+                :is-last="!user.data.attributes.two_factor_authentication"
+            >
+                <SwitchInput
+                    v-model="user.data.attributes.two_factor_authentication"
+                    class="switch"
+                    :state="user.data.attributes.two_factor_authentication"
+                />
             </AppInputSwitch>
             <AppInputButton
                 v-if="user && user.data.attributes.two_factor_authentication"
@@ -56,13 +64,24 @@
                 </div>
             </div>
 
-            <ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="w-full sm:w-auto">
+            <ButtonBase
+                @click.native="openCreateTokenPopup"
+                type="submit"
+                button-style="theme"
+                class="w-full sm:w-auto"
+            >
                 {{ $t('personal_token.create_token') }}
             </ButtonBase>
         </div>
 
         <!--Change password-->
-        <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="card shadow-card">
+        <ValidationObserver
+            ref="password"
+            @submit.prevent="resetPassword"
+            v-slot="{ invalid }"
+            tag="form"
+            class="card shadow-card"
+        >
             <FormLabel>
                 {{ $t('user_password.title') }}
             </FormLabel>
@@ -91,7 +110,13 @@
                 </AppInputText>
             </ValidationProvider>
 
-            <ValidationProvider tag="div" mode="passive" name="Confirm Your Password" rules="required" v-slot="{ errors }">
+            <ValidationProvider
+                tag="div"
+                mode="passive"
+                name="Confirm Your Password"
+                rules="required"
+                v-slot="{ errors }"
+            >
                 <AppInputText :title="$t('page_create_password.label_confirm_pass')" :error="errors[0]">
                     <input
                         v-model="passwordForm.password_confirmation"
diff --git a/resources/js/views/User/Settings.vue b/resources/js/views/User/Settings.vue
index 7d279956..39b9037c 100644
--- a/resources/js/views/User/Settings.vue
+++ b/resources/js/views/User/Settings.vue
@@ -28,7 +28,13 @@
 
             <AppInputText :title="$t('GMT')" :is-last="true">
                 <SelectInput
-                    @input="$updateText('/user/settings', 'timezone', user.data.relationships.settings.data.attributes.timezone)"
+                    @input="
+                        $updateText(
+                            '/user/settings',
+                            'timezone',
+                            user.data.relationships.settings.data.attributes.timezone
+                        )
+                    "
                     v-model="user.data.relationships.settings.data.attributes.timezone"
                     :default="user.data.relationships.settings.data.attributes.timezone"
                     :options="timezones"
@@ -43,7 +49,13 @@
             </FormLabel>
             <AppInputText :title="$t('user_settings.address')">
                 <input
-                    @keyup="$updateText('/user/settings', 'address', user.data.relationships.settings.data.attributes.address)"
+                    @keyup="
+                        $updateText(
+                            '/user/settings',
+                            'address',
+                            user.data.relationships.settings.data.attributes.address
+                        )
+                    "
                     v-model="user.data.relationships.settings.data.attributes.address"
                     :placeholder="$t('user_settings.address_plac')"
                     type="text"
@@ -53,7 +65,9 @@
             <div class="flex space-x-4">
                 <AppInputText :title="$t('user_settings.city')" class="w-full">
                     <input
-                        @keyup="$updateText('/user/settings', 'city', user.data.relationships.settings.data.attributes.city)"
+                        @keyup="
+                            $updateText('/user/settings', 'city', user.data.relationships.settings.data.attributes.city)
+                        "
                         v-model="user.data.relationships.settings.data.attributes.city"
                         :placeholder="$t('user_settings.city_plac')"
                         type="text"
@@ -62,7 +76,13 @@
                 </AppInputText>
                 <AppInputText :title="$t('user_settings.postal_code')" class="w-full">
                     <input
-                        @keyup="$updateText('/user/settings', 'postal_code', user.data.relationships.settings.data.attributes.postal_code)"
+                        @keyup="
+                            $updateText(
+                                '/user/settings',
+                                'postal_code',
+                                user.data.relationships.settings.data.attributes.postal_code
+                            )
+                        "
                         v-model="user.data.relationships.settings.data.attributes.postal_code"
                         :placeholder="$t('user_settings.postal_code_plac')"
                         type="text"
@@ -72,7 +92,13 @@
             </div>
             <AppInputText :title="$t('user_settings.country')">
                 <SelectInput
-                    @input="$updateText('/user/settings', 'country', user.data.relationships.settings.data.attributes.country)"
+                    @input="
+                        $updateText(
+                            '/user/settings',
+                            'country',
+                            user.data.relationships.settings.data.attributes.country
+                        )
+                    "
                     v-model="user.data.relationships.settings.data.attributes.country"
                     :default="user.data.relationships.settings.data.attributes.country"
                     :options="countries"
@@ -81,7 +107,9 @@
             </AppInputText>
             <AppInputText :title="$t('user_settings.state')" :description="$t('State, county, province, or region.')">
                 <input
-                    @keyup="$updateText('/user/settings', 'state', user.data.relationships.settings.data.attributes.state)"
+                    @keyup="
+                        $updateText('/user/settings', 'state', user.data.relationships.settings.data.attributes.state)
+                    "
                     v-model="user.data.relationships.settings.data.attributes.state"
                     :placeholder="$t('user_settings.state_plac')"
                     type="text"
@@ -90,7 +118,13 @@
             </AppInputText>
             <AppInputText :title="$t('user_settings.phone_number')" :is-last="true">
                 <input
-                    @keyup="$updateText('/user/settings', 'phone_number', user.data.relationships.settings.data.attributes.phone_number)"
+                    @keyup="
+                        $updateText(
+                            '/user/settings',
+                            'phone_number',
+                            user.data.relationships.settings.data.attributes.phone_number
+                        )
+                    "
                     v-model="user.data.relationships.settings.data.attributes.phone_number"
                     :placeholder="$t('user_settings.phone_number_plac')"
                     type="text"
@@ -99,48 +133,60 @@
             </AppInputText>
         </div>
 
-		<div class="card shadow-card">
+        <div class="card shadow-card">
             <FormLabel>
                 {{ $t('Appearance') }}
             </FormLabel>
 
-            <AppInputText :title="$t('Theme Mode')" :description="$t('Set your theme mode on dark, light or based on your system settings.')" :is-last="!$isApple()">
+            <AppInputText
+                :title="$t('Theme Mode')"
+                :description="$t('Set your theme mode on dark, light or based on your system settings.')"
+                :is-last="!$isApple()"
+            >
                 <div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
                     <div
-						v-for="(theme, i) in themeSetup"
-						:key="i"
-						:title="theme.title"
-						@click="$store.dispatch('toggleThemeMode', theme.type)"
-						class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
-						:class="{
+                        v-for="(theme, i) in themeSetup"
+                        :key="i"
+                        :title="theme.title"
+                        @click="$store.dispatch('toggleThemeMode', theme.type)"
+                        class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
+                        :class="{
                             'border-theme': config.defaultThemeMode === theme.type,
                             'border-transparent': config.defaultThemeMode !== theme.type,
                         }"
-					>
-                        <img :src="theme.image" :alt="theme.type" class="w-full"/>
+                    >
+                        <img :src="theme.image" :alt="theme.type" class="w-full" />
                     </div>
                 </div>
             </AppInputText>
 
             <AppInputText
-				v-if="$isApple()"
-				:title="$t('Default Emojis')"
-				:description="$t('Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.')"
-				:is-last="true"
-			>
+                v-if="$isApple()"
+                :title="$t('Default Emojis')"
+                :description="
+                    $t(
+                        'Set your default emojis for your folder custom icons. You can set Twemoji or default Apple emojis.'
+                    )
+                "
+                :is-last="true"
+            >
                 <div class="items-center space-y-4 md:flex md:space-x-6 md:space-x-4 md:space-y-0">
                     <div
-						v-for="(emoji, i) in emojiSetup"
-						:key="i"
-						:title="emoji.title"
-						@click="$store.dispatch('toggleEmojiType', emoji.type)"
-						class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
-						:class="{
+                        v-for="(emoji, i) in emojiSetup"
+                        :key="i"
+                        :title="emoji.title"
+                        @click="$store.dispatch('toggleEmojiType', emoji.type)"
+                        class="w-full cursor-pointer overflow-hidden rounded-xl border-3 shadow-lg"
+                        :class="{
                             'border-theme': currentEmojis === emoji.type,
                             'border-transparent': currentEmojis !== emoji.type,
                         }"
-					>
-                        <img :src="isDarkMode ? emoji.image.dark : emoji.image.light" :alt="emoji.type" class="w-full" />
+                    >
+                        <img
+                            :src="isDarkMode ? emoji.image.dark : emoji.image.light"
+                            :alt="emoji.type"
+                            class="w-full"
+                        />
                     </div>
                 </div>
             </AppInputText>
@@ -213,11 +259,19 @@ export default {
     methods: {
         updateFirstName() {
             this.$store.commit('UPDATE_FIRST_NAME', this.user.data.relationships.settings.data.attributes.first_name)
-            this.$updateText('/user/settings', 'first_name', this.user.data.relationships.settings.data.attributes.first_name)
+            this.$updateText(
+                '/user/settings',
+                'first_name',
+                this.user.data.relationships.settings.data.attributes.first_name
+            )
         },
         updateLastName() {
             this.$store.commit('UPDATE_LAST_NAME', this.user.data.relationships.settings.data.attributes.last_name)
-            this.$updateText('/user/settings', 'last_name', this.user.data.relationships.settings.data.attributes.last_name)
+            this.$updateText(
+                '/user/settings',
+                'last_name',
+                this.user.data.relationships.settings.data.attributes.last_name
+            )
         },
     },
 }
diff --git a/resources/js/views/User/Storage.vue b/resources/js/views/User/Storage.vue
index 083aac66..66f4ebc6 100644
--- a/resources/js/views/User/Storage.vue
+++ b/resources/js/views/User/Storage.vue
@@ -9,7 +9,12 @@
                 {{ storage.data.attributes.used }}
             </b>
 
-            <b v-if="config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)" class="mt-0.5 block text-sm text-gray-400">
+            <b
+                v-if="
+                    config.subscriptionType === 'fixed' || (config.subscriptionType === 'none' && config.storageLimit)
+                "
+                class="mt-0.5 block text-sm text-gray-400"
+            >
                 {{ $t('Total of') }} {{ storage.data.attributes.capacity }}
                 {{ $t('Used') }}
             </b>
diff --git a/routes/api.php b/routes/api.php
index 2d8d2d2b..b4dcf5a7 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -27,10 +27,14 @@ use Domain\Browsing\Controllers\BrowseTrashContentController;
 use Domain\Homepage\Controllers\SendContactMessageController;
 use Domain\Sharing\Controllers\GetShareLinkViaQrCodeController;
 use App\Users\Controllers\Authentication\RegisterUserController;
+use Domain\UploadRequest\Controllers\GetUploadRequestController;
 
 // Ping Pong
 Route::get('/ping', PingAPIController::class);
 
+// Upload Request
+Route::get('/request', GetUploadRequestController::class);
+
 // Pages
 Route::apiResource('/page', PagesController::class);
 
diff --git a/src/Domain/UploadRequest/Controllers/GetUploadRequestController.php b/src/Domain/UploadRequest/Controllers/GetUploadRequestController.php
new file mode 100644
index 00000000..7c2d6e41
--- /dev/null
+++ b/src/Domain/UploadRequest/Controllers/GetUploadRequestController.php
@@ -0,0 +1,25 @@
+<?php
+namespace Domain\UploadRequest\Controllers;
+
+class GetUploadRequestController
+{
+    public function __invoke()
+    {
+        return [
+            'user' => [
+                'data' => [
+                    'attributes' => [
+                        'name'   => 'Jane Doe',
+                        'avatar' => [
+                            'md' => 'http://192.168.1.112:8000/avatars/md-f45abbe5-962c-4229-aef2-9991e96d54d9.png',
+                            'sm' => 'http://192.168.1.112:8000/avatars/md-f45abbe5-962c-4229-aef2-9991e96d54d9.png',
+                            'xs' => 'http://192.168.1.112:8000/avatars/md-f45abbe5-962c-4229-aef2-9991e96d54d9.png',
+                        ],
+                    ],
+                    'id'   => '123',
+                    'type' => 'user',
+                ],
+            ],
+        ];
+    }
+}