diff --git a/resources/js/App.vue b/resources/js/App.vue
index f85e45f7..c4d5eaa1 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -51,6 +51,16 @@ export default {
         'config.defaultThemeMode': function () {
             this.handleDarkMode()
         },
+		'$route' () {
+			let section = this.$router.currentRoute.fullPath.split('/')[1]
+			const app = document.getElementsByTagName('body')[0]
+
+			if (['admin', 'user'].includes(section)) {
+				app.classList.add('dark:bg-dark-background', 'bg-light-background')
+			} else {
+				app.classList.remove('dark:bg-dark-background', 'bg-light-background')
+			}
+		}
     },
     methods: {
         spotlightListener(e) {
diff --git a/resources/js/components/FilesView/EmptyFilePage.vue b/resources/js/components/FilesView/EmptyFilePage.vue
index d2326fe8..97157c78 100644
--- a/resources/js/components/FilesView/EmptyFilePage.vue
+++ b/resources/js/components/FilesView/EmptyFilePage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex h-screen items-center justify-center md:px-0 px-4" v-if="isLoading || isEmpty">
+    <div class="flex items-center justify-center fixed top-20 bottom-0 left-0 right-0 md:px-0 px-4" v-if="isLoading || isEmpty">
         <!--Show message for user-->
         <div v-if="!isLoading" class="text-content text-center">
             <slot></slot>
diff --git a/resources/js/components/Mobile/MobileNavigationToolbar.vue b/resources/js/components/Mobile/MobileNavigationToolbar.vue
index 53dfd8f2..0d8bdb01 100644
--- a/resources/js/components/Mobile/MobileNavigationToolbar.vue
+++ b/resources/js/components/Mobile/MobileNavigationToolbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="z-20 block flex w-full items-center justify-between py-5 px-5 text-center lg:hidden">
+    <div class="z-20 relative block flex w-full items-center justify-between py-5 px-5 text-center lg:hidden">
         <!--Location Title-->
         <div
             class="inline-block overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 dark:text-gray-100"
diff --git a/resources/js/components/Others/Forms/ImageInput.vue b/resources/js/components/Others/Forms/ImageInput.vue
index 3ee71786..0a4b69d4 100644
--- a/resources/js/components/Others/Forms/ImageInput.vue
+++ b/resources/js/components/Others/Forms/ImageInput.vue
@@ -7,7 +7,7 @@
         <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"
+            class="absolute right-0 top-0 z-[9] 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>
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index ea69fc1d..6215bd8e 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -64,7 +64,7 @@ const FunctionHelpers = {
         }
 
         Vue.prototype.$scrollTop = function () {
-            var container = document.getElementById('vuefilemanager')
+            const container = document.getElementsByTagName('html')[0]
 
             if (container) {
                 container.scrollTop = 0
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index 09f6301c..97243066 100644
--- a/resources/js/views/Admin.vue
+++ b/resources/js/views/Admin.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-light-background dark:bg-dark-background md:h-screen md:overflow-hidden lg:flex">
+    <div class="md:h-screen md:overflow-hidden lg:flex">
         <!--On Top of App Components-->
         <FilePreview />
         <Spotlight />
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
index 46f62f99..9921513f 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Server.vue
@@ -2,15 +2,15 @@
     <PageTab v-if="!isLoading">
         <!--Cron check-->
         <div class="card shadow-card">
-            <FormLabel icon="info"> Cron </FormLabel>
+            <FormLabel icon="info">Cron</FormLabel>
 
-            <div class="flex items-center justify-between">
+            <div class="lg:flex lg:space-y-0 space-y-3 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">
+                    <small v-if="!cron.running" class="text-xs text-gray-600 pt-1 block leading-normal">
                         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">
+                    <small v-if="cron.running" class="text-xs text-gray-600 pt-1 block leading-normal">
                         Latest Update: {{ cron.lastUpdate }}
                     </small>
                 </div>
@@ -44,7 +44,7 @@
                 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"
+                class="md:flex md:space-y-0 space-y-3 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>
@@ -66,7 +66,7 @@
             >
                 <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">
+                    <small v-if="!phpVersion.acceptable" class="text-xs text-gray-600 pt-1 block leading-normal">
                         You need PHP version at least {{ phpVersion.minimal }}.
                     </small>
                 </div>
@@ -102,7 +102,7 @@
             >
                 <div class="text-left">
                     <b class="block text-sm font-bold">{{ setting }}</b>
-                    <small v-if="!values.status" class="text-xs text-gray-600">
+                    <small v-if="!values.status" class="text-xs text-gray-600 pt-1 block leading-normal">
                         We recommend set this value at least {{ values.minimal }}.
                     </small>
                 </div>
diff --git a/resources/js/views/Admin/Invoices.vue b/resources/js/views/Admin/Invoices.vue
index 4aebada0..87903465 100644
--- a/resources/js/views/Admin/Invoices.vue
+++ b/resources/js/views/Admin/Invoices.vue
@@ -28,7 +28,7 @@
         </DatatableWrapper>
 
         <!--Empty State-->
-        <div v-if="config.isEmptyTransactions" class="flex h-full items-center justify-center">
+        <div v-if="config.isEmptyTransactions" class="flex items-center justify-center fixed top-0 bottom-0 left-0 right-0">
             <div class="text-center">
                 <img
                     class="mb-6 inline-block w-28"
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index 0691e846..546d7a01 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -161,7 +161,7 @@
         </div>
 
         <!--Empty State-->
-        <div v-if="config.isEmptyPlans" class="flex h-full items-center justify-center">
+        <div v-if="config.isEmptyPlans" class="flex items-center justify-center fixed top-0 bottom-0 left-0 right-0">
             <div class="text-center">
                 <img
                     class="mb-6 inline-block w-28"
diff --git a/resources/js/views/Admin/Subscriptions.vue b/resources/js/views/Admin/Subscriptions.vue
index c39d3b6c..938f4247 100644
--- a/resources/js/views/Admin/Subscriptions.vue
+++ b/resources/js/views/Admin/Subscriptions.vue
@@ -78,7 +78,7 @@
         </DatatableWrapper>
 
         <!--Empty State-->
-        <div v-if="config.isEmptySubscriptions" class="flex h-full items-center justify-center">
+        <div v-if="config.isEmptySubscriptions" class="flex items-center justify-center fixed top-0 bottom-0 left-0 right-0">
             <div class="text-center">
                 <img
                     class="mb-6 inline-block w-28"
diff --git a/resources/js/views/FileView/Files.vue b/resources/js/views/FileView/Files.vue
index 01e53cfe..688918c8 100644
--- a/resources/js/views/FileView/Files.vue
+++ b/resources/js/views/FileView/Files.vue
@@ -177,7 +177,7 @@
             <MobileActionButton @click.native="$openSpotlight()" icon="search">
                 {{ $t('Spotlight') }}
             </MobileActionButton>
-            <MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
+            <MobileActionButton @click.native="$showMobileMenu('file-filter')" icon="filter">
                 {{ $getCurrentSectionName() }}
             </MobileActionButton>
             <MobileActionButton
diff --git a/resources/js/views/FileView/MySharedItems.vue b/resources/js/views/FileView/MySharedItems.vue
index ac7490a2..29f684f4 100644
--- a/resources/js/views/FileView/MySharedItems.vue
+++ b/resources/js/views/FileView/MySharedItems.vue
@@ -98,7 +98,7 @@
             <MobileActionButton @click.native="$openSpotlight()" icon="search">
                 {{ $t('Spotlight') }}
             </MobileActionButton>
-            <MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
+            <MobileActionButton @click.native="$showMobileMenu('file-filter')" icon="filter">
                 {{ $getCurrentSectionName() }}
             </MobileActionButton>
             <MobileActionButton @click.native="$enableMultiSelectMode" icon="check-square">
diff --git a/resources/js/views/FileView/RecentUploads.vue b/resources/js/views/FileView/RecentUploads.vue
index 6a089323..0946198b 100644
--- a/resources/js/views/FileView/RecentUploads.vue
+++ b/resources/js/views/FileView/RecentUploads.vue
@@ -65,7 +65,7 @@
             <MobileActionButton @click.native="$openSpotlight()" icon="search">
                 {{ $t('Spotlight') }}
             </MobileActionButton>
-            <MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
+            <MobileActionButton @click.native="$showMobileMenu('file-filter')" icon="filter">
                 {{ $getCurrentSectionName() }}
             </MobileActionButton>
             <MobileActionButtonUpload>
diff --git a/resources/js/views/FileView/SharedWithMe.vue b/resources/js/views/FileView/SharedWithMe.vue
index a469f568..30913db1 100644
--- a/resources/js/views/FileView/SharedWithMe.vue
+++ b/resources/js/views/FileView/SharedWithMe.vue
@@ -111,7 +111,7 @@
             <MobileActionButton @click.native="$openSpotlight()" icon="search">
                 {{ $t('Spotlight') }}
             </MobileActionButton>
-            <MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
+            <MobileActionButton @click.native="$showMobileMenu('file-filter')" icon="filter">
                 {{ $getCurrentSectionName() }}
             </MobileActionButton>
             <MobileActionButton v-if="canEdit" @click.native="$showMobileMenu('create-list')" icon="cloud-plus">
diff --git a/resources/js/views/FileView/TeamFolders.vue b/resources/js/views/FileView/TeamFolders.vue
index 0f401dfb..906a7c46 100644
--- a/resources/js/views/FileView/TeamFolders.vue
+++ b/resources/js/views/FileView/TeamFolders.vue
@@ -176,7 +176,7 @@
             <MobileActionButton @click.native="$openSpotlight()" icon="search">
                 {{ $t('Spotlight') }}
             </MobileActionButton>
-            <MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
+            <MobileActionButton @click.native="$showMobileMenu('file-filter')" icon="filter">
                 {{ $getCurrentSectionName() }}
             </MobileActionButton>
             <MobileActionButton
diff --git a/resources/js/views/FileView/Trash.vue b/resources/js/views/FileView/Trash.vue
index 5ed8e8db..a992b7eb 100644
--- a/resources/js/views/FileView/Trash.vue
+++ b/resources/js/views/FileView/Trash.vue
@@ -70,7 +70,7 @@
             <MobileActionButton @click.native="$openSpotlight()" icon="search">
                 {{ $t('Spotlight') }}
             </MobileActionButton>
-            <MobileActionButton @click.native="$showMobileMenu('file-filter')" :icon="$getCurrentSectionIcon()">
+            <MobileActionButton @click.native="$showMobileMenu('file-filter')" icon="filter">
                 {{ $getCurrentSectionName() }}
             </MobileActionButton>
             <MobileActionButton @click.native="$emptyTrash" icon="trash">
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 4728afb1..122cb6c1 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-light-background dark:bg-dark-background md:h-screen md:overflow-hidden lg:flex">
+    <div class="md:h-screen md:overflow-hidden lg:flex">
         <!--On Top of App Components-->
         <FilePreview />
         <Spotlight />
diff --git a/resources/js/views/SetupWizard/StatusCheck.vue b/resources/js/views/SetupWizard/StatusCheck.vue
index c53ddfea..b46089d7 100644
--- a/resources/js/views/SetupWizard/StatusCheck.vue
+++ b/resources/js/views/SetupWizard/StatusCheck.vue
@@ -29,7 +29,7 @@
                 >
                     <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">
+                        <small v-if="!phpVersion.acceptable" class="text-xs text-gray-600 pt-1 block leading-normal">
                             You need PHP version at least {{ phpVersion.minimal }}.
                         </small>
                     </div>
@@ -53,7 +53,7 @@
                 >
                     <div class="text-left">
                         <b class="block text-sm font-bold">{{ setting }}</b>
-                        <small v-if="!values.status" class="text-xs text-gray-600">
+                        <small v-if="!values.status" class="text-xs text-gray-600 pt-1 block leading-normal">
                             We recommend set this value at least {{ values.minimal }}.
                         </small>
                     </div>
@@ -110,7 +110,7 @@
                 <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">
+                        <small v-if="isCheckedAPI && !apiRunning" class="text-xs text-gray-600 pt-1 block leading-normal">
                             We detect, your domain root is not set correctly, please check it.
                         </small>
                     </div>
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 13892551..bd84c4ac 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -28,13 +28,13 @@
 @endphp
 
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html style="min-height: 100%" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
-    <meta name="theme-color" content="{{ $settings->app_color ?? '#00BC7E' }}">
+<!--    <meta name="theme-color" content="{{ $settings->app_color ?? '#00BC7E' }}">-->
 
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <meta name="description" content="{{ $settings->app_description ?? __t('app_description') }}">
 
     <title>
@@ -66,7 +66,7 @@
 
     @include('vuefilemanager.others.color-template')
 </head>
-<body class="{{ $installation === 'installation-needed' ? 'bg-light-background' : '' }} {{ is_dev() ? 'debug-screens' : '' }}">
+<body style="min-height: 100%" class="{{ $installation === 'installation-needed' ? 'bg-light-background' : '' }} {{ is_dev() ? 'debug-screens' : '' }}">
 
     <div id="app"></div>
 
diff --git a/resources/views/vuefilemanager/crawler/og-view.blade.php b/resources/views/vuefilemanager/crawler/og-view.blade.php
index 8169ea3e..58c471d0 100644
--- a/resources/views/vuefilemanager/crawler/og-view.blade.php
+++ b/resources/views/vuefilemanager/crawler/og-view.blade.php
@@ -23,7 +23,6 @@
     @if(! $metadata['is_protected'])
 
         @if($metadata['thumbnail'])
-
             <meta property="og:image" content="{{ $metadata['thumbnail']['md'] }}">
         @endif