diff --git a/app/Http/Controllers/FileAccessController.php b/app/Http/Controllers/FileAccessController.php
index ce6b857b..2847d15f 100644
--- a/app/Http/Controllers/FileAccessController.php
+++ b/app/Http/Controllers/FileAccessController.php
@@ -36,6 +36,25 @@ class FileAccessController extends Controller
         return Storage::download($path, $basename);
     }
 
+    /**
+     * Get system image
+     *
+     * @param $basename
+     * @return mixed
+     * @throws \Illuminate\Contracts\Filesystem\FileNotFoundException
+     */
+    public function get_system_image($basename)
+    {
+        // Get file path
+        $path = '/system/' . $basename;
+
+        // Check if file exist
+        if (!Storage::exists($path)) abort(404);
+
+        // Return avatar
+        return Storage::download($path, $basename);
+    }
+
     /**
      * Get file
      *
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 00f525b1..0c142982 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -178,5 +178,55 @@
     "/js/main.e71f6bd71eef17aa1119.hot-update.js": "/js/main.e71f6bd71eef17aa1119.hot-update.js",
     "/js/main.0029144db32ea7c1e9a5.hot-update.js": "/js/main.0029144db32ea7c1e9a5.hot-update.js",
     "/js/main.d8f463bb144619871d2b.hot-update.js": "/js/main.d8f463bb144619871d2b.hot-update.js",
-    "/js/main.6589d0fca8e17d97d9cf.hot-update.js": "/js/main.6589d0fca8e17d97d9cf.hot-update.js"
+    "/js/main.6589d0fca8e17d97d9cf.hot-update.js": "/js/main.6589d0fca8e17d97d9cf.hot-update.js",
+    "/js/main.509485879ef2ae565133.hot-update.js": "/js/main.509485879ef2ae565133.hot-update.js",
+    "/js/main.687e63bc8be41f981313.hot-update.js": "/js/main.687e63bc8be41f981313.hot-update.js",
+    "/js/main.45ddf0054ecb7ce12e18.hot-update.js": "/js/main.45ddf0054ecb7ce12e18.hot-update.js",
+    "/js/main.fb11cdf11ab3bf5a7828.hot-update.js": "/js/main.fb11cdf11ab3bf5a7828.hot-update.js",
+    "/js/main.beab3c6280025f0ef1c7.hot-update.js": "/js/main.beab3c6280025f0ef1c7.hot-update.js",
+    "/js/main.dd8499eefc53baf1d563.hot-update.js": "/js/main.dd8499eefc53baf1d563.hot-update.js",
+    "/js/main.8e33ac29861dd449cb4b.hot-update.js": "/js/main.8e33ac29861dd449cb4b.hot-update.js",
+    "/js/main.d424af0746dea32de15f.hot-update.js": "/js/main.d424af0746dea32de15f.hot-update.js",
+    "/js/main.3b8184fedc668a2b3d77.hot-update.js": "/js/main.3b8184fedc668a2b3d77.hot-update.js",
+    "/js/main.f8b828790a62148945eb.hot-update.js": "/js/main.f8b828790a62148945eb.hot-update.js",
+    "/js/main.cea80e1125b5df229e57.hot-update.js": "/js/main.cea80e1125b5df229e57.hot-update.js",
+    "/js/main.657f537e64723438203f.hot-update.js": "/js/main.657f537e64723438203f.hot-update.js",
+    "/js/main.24a67f682d00f1c36306.hot-update.js": "/js/main.24a67f682d00f1c36306.hot-update.js",
+    "/js/main.c5e409b11f38596ad19f.hot-update.js": "/js/main.c5e409b11f38596ad19f.hot-update.js",
+    "/js/main.f4b2217acfd61015f519.hot-update.js": "/js/main.f4b2217acfd61015f519.hot-update.js",
+    "/js/main.6b77b11bc09febce1243.hot-update.js": "/js/main.6b77b11bc09febce1243.hot-update.js",
+    "/js/main.7e13d467124a70e40c12.hot-update.js": "/js/main.7e13d467124a70e40c12.hot-update.js",
+    "/js/main.4ccb71fa83f56cf61316.hot-update.js": "/js/main.4ccb71fa83f56cf61316.hot-update.js",
+    "/js/main.57345de2165add04473e.hot-update.js": "/js/main.57345de2165add04473e.hot-update.js",
+    "/js/main.6120a268b1625c6fbb32.hot-update.js": "/js/main.6120a268b1625c6fbb32.hot-update.js",
+    "/js/main.8aa7b533c1f75dfce2c7.hot-update.js": "/js/main.8aa7b533c1f75dfce2c7.hot-update.js",
+    "/js/main.60d43a51d0c18988c7e1.hot-update.js": "/js/main.60d43a51d0c18988c7e1.hot-update.js",
+    "/js/main.eb76cd56647f48d173fa.hot-update.js": "/js/main.eb76cd56647f48d173fa.hot-update.js",
+    "/js/main.ed851f3c5ef2bfbb595d.hot-update.js": "/js/main.ed851f3c5ef2bfbb595d.hot-update.js",
+    "/js/main.09c3644ca93b2e6d8f09.hot-update.js": "/js/main.09c3644ca93b2e6d8f09.hot-update.js",
+    "/js/main.cdcbfde1180ea16ecd5c.hot-update.js": "/js/main.cdcbfde1180ea16ecd5c.hot-update.js",
+    "/js/main.5a1cad47101c12e09f69.hot-update.js": "/js/main.5a1cad47101c12e09f69.hot-update.js",
+    "/js/main.2b7e6f4b4ced40d75147.hot-update.js": "/js/main.2b7e6f4b4ced40d75147.hot-update.js",
+    "/js/main.4274724ed8e30dd50f2b.hot-update.js": "/js/main.4274724ed8e30dd50f2b.hot-update.js",
+    "/js/main.4c543473038e6a0f4639.hot-update.js": "/js/main.4c543473038e6a0f4639.hot-update.js",
+    "/js/main.0a457ad4424536b8d7d5.hot-update.js": "/js/main.0a457ad4424536b8d7d5.hot-update.js",
+    "/js/main.3ab92d3466136060e695.hot-update.js": "/js/main.3ab92d3466136060e695.hot-update.js",
+    "/js/main.96ee31a86b16e7212789.hot-update.js": "/js/main.96ee31a86b16e7212789.hot-update.js",
+    "/js/main.ce31cafcbc6bcdbc1e7f.hot-update.js": "/js/main.ce31cafcbc6bcdbc1e7f.hot-update.js",
+    "/js/main.fa93a9650f8489b1830c.hot-update.js": "/js/main.fa93a9650f8489b1830c.hot-update.js",
+    "/js/main.809548951432ef627d16.hot-update.js": "/js/main.809548951432ef627d16.hot-update.js",
+    "/js/main.de03f7006def0145553a.hot-update.js": "/js/main.de03f7006def0145553a.hot-update.js",
+    "/js/main.99ee6db24c89a9b4ff24.hot-update.js": "/js/main.99ee6db24c89a9b4ff24.hot-update.js",
+    "/js/main.87ffb372acf169e7e603.hot-update.js": "/js/main.87ffb372acf169e7e603.hot-update.js",
+    "/js/main.373fbe1483dd92d27f5a.hot-update.js": "/js/main.373fbe1483dd92d27f5a.hot-update.js",
+    "/js/main.9d50db9529fee1ba1b18.hot-update.js": "/js/main.9d50db9529fee1ba1b18.hot-update.js",
+    "/js/main.9c009dbaf7d6d95b7d5d.hot-update.js": "/js/main.9c009dbaf7d6d95b7d5d.hot-update.js",
+    "/js/main.c0f41fb99be408a33861.hot-update.js": "/js/main.c0f41fb99be408a33861.hot-update.js",
+    "/js/main.cc89c6036a92c3d63dca.hot-update.js": "/js/main.cc89c6036a92c3d63dca.hot-update.js",
+    "/js/main.d317f27b8528101c8ef3.hot-update.js": "/js/main.d317f27b8528101c8ef3.hot-update.js",
+    "/js/main.84be16c4e8bcb948bf25.hot-update.js": "/js/main.84be16c4e8bcb948bf25.hot-update.js",
+    "/js/main.0cf8831e92ff6f5a1027.hot-update.js": "/js/main.0cf8831e92ff6f5a1027.hot-update.js",
+    "/js/main.5cbee996e80957a738f2.hot-update.js": "/js/main.5cbee996e80957a738f2.hot-update.js",
+    "/js/main.9a24bd7a75a877705d40.hot-update.js": "/js/main.9a24bd7a75a877705d40.hot-update.js",
+    "/js/main.2ecd9a546308a5bb528a.hot-update.js": "/js/main.2ecd9a546308a5bb528a.hot-update.js"
 }
diff --git a/resources/js/components/Mobile/MenuItemList.vue b/resources/js/components/Mobile/MenuItemList.vue
index 37cf738a..ad1242e6 100644
--- a/resources/js/components/Mobile/MenuItemList.vue
+++ b/resources/js/components/Mobile/MenuItemList.vue
@@ -14,6 +14,7 @@
                 <file-text-icon v-if="link.icon === 'file-text'" size="17"></file-text-icon>
                 <database-icon v-if="link.icon === 'database'" size="17"></database-icon>
                 <credit-card-icon v-if="link.icon === 'credit-card'" size="17"></credit-card-icon>
+                <cloud-icon v-if="link.icon === 'cloud'" size="17"></cloud-icon>
             </div>
             <b class="menu-link">
                 <span>{{ link.title }}</span>
@@ -33,6 +34,7 @@
         SettingsIcon,
         DatabaseIcon,
         Trash2Icon,
+        CloudIcon,
         PowerIcon,
         ShareIcon,
         UsersIcon,
@@ -43,14 +45,15 @@
     export default {
         name: 'MenuBar',
         components: {
-            CreditCardIcon,
-            DatabaseIcon,
-            FileTextIcon,
             ChevronRightIcon,
             UploadCloudIcon,
+            CreditCardIcon,
             HardDriveIcon,
+            DatabaseIcon,
+            FileTextIcon,
             SettingsIcon,
             Trash2Icon,
+            CloudIcon,
             PowerIcon,
             UsersIcon,
             ShareIcon,
diff --git a/resources/js/components/Others/MobileNavigation.vue b/resources/js/components/Others/MobileNavigation.vue
index 5252c41f..ab8d3d8c 100644
--- a/resources/js/components/Others/MobileNavigation.vue
+++ b/resources/js/components/Others/MobileNavigation.vue
@@ -27,7 +27,7 @@
     import {events} from '@/bus'
 
     export default {
-        name: 'MenuBar',
+        name: 'UserMobileNavigation',
         components: {
             MenuItemList,
             UserHeadline,
@@ -64,7 +64,7 @@
                     {
                         icon: 'user',
                         title: this.$t('menu.settings'),
-                        routeName: 'Profile',
+                        routeName: 'UserProfileMobileMenu',
                         isVisible: true,
                     },
                     {
diff --git a/resources/js/router.js b/resources/js/router.js
index 5d8951d8..dae63577 100644
--- a/resources/js/router.js
+++ b/resources/js/router.js
@@ -25,9 +25,17 @@ import UpgradePlan from './views/Upgrade/UpgradePlan'
 import UpgradeBilling from './views/Upgrade/UpgradeBilling'
 
 import AdminMobileMenu from './views/Mobile/AdminMobileMenu'
+import UserProfileMobileMenu from './views/Mobile/UserProfileMobileMenu'
 
 import Admin from './views/Admin'
 import Invoices from './views/Admin/Invoices'
+import AppSettings from './views/Admin/AppSettings/AppSettings'
+
+// App Settings
+import AppAppearance from './views/Admin/AppSettings/AppSettingsTabs/Appearance'
+import AppBillings from './views/Admin/AppSettings/AppSettingsTabs/Billings'
+import AppEmail from './views/Admin/AppSettings/AppSettingsTabs/Email'
+import AppOthers from './views/Admin/AppSettings/AppSettingsTabs/Others'
 
 // Plans
 import Plans from './views/Admin/Plans'
@@ -225,6 +233,53 @@ const routesAdmin = [
                     },
                 ]
             },
+            {
+                name: 'AppSettings',
+                path: '/admin/settings',
+                component: AppSettings,
+                meta: {
+                    requiresAuth: true,
+                    title: 'Settings'
+                },
+                children: [
+                    {
+                        name: 'AppAppearance',
+                        path: '/admin/settings/appearance',
+                        component: AppAppearance,
+                        meta: {
+                            requiresAuth: true,
+                            title: 'Appearance'
+                        },
+                    },
+                    {
+                        name: 'AppBillings',
+                        path: '/admin/settings/billings',
+                        component: AppBillings,
+                        meta: {
+                            requiresAuth: true,
+                            title: 'Billings'
+                        },
+                    },
+                    {
+                        name: 'AppEmail',
+                        path: '/admin/settings/email',
+                        component: AppEmail,
+                        meta: {
+                            requiresAuth: true,
+                            title: 'Email'
+                        },
+                    },
+                    {
+                        name: 'AppOthers',
+                        path: '/admin/settings/others',
+                        component: AppOthers,
+                        meta: {
+                            requiresAuth: true,
+                            title: 'Others'
+                        },
+                    },
+                ]
+            },
         ]
     },
     {
@@ -236,6 +291,15 @@ const routesAdmin = [
             title: i18n.t('routes_title.settings_mobile')
         },
     },
+    {
+        name: 'UserProfileMobileMenu',
+        path: '/user-menu',
+        component: UserProfileMobileMenu,
+        meta: {
+            requiresAuth: true,
+            title: 'Profile Settings'
+        },
+    },
 ]
 const routesShared = [
     {
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index 682dfe65..83160bf2 100644
--- a/resources/js/views/Admin.vue
+++ b/resources/js/views/Admin.vue
@@ -14,7 +14,7 @@
                             {{ $t('admin_menu.users') }}
                         </div>
                     </router-link>
-                    <router-link :to="{name: 'User'}" class="menu-list-item link">
+                    <router-link :to="{name: 'AppAppearance'}" class="menu-list-item link">
                         <div class="icon">
                             <settings-icon size="17"></settings-icon>
                         </div>
diff --git a/resources/js/views/Admin/AppSettings/AppSettings.vue b/resources/js/views/Admin/AppSettings/AppSettings.vue
new file mode 100644
index 00000000..8d072ab5
--- /dev/null
+++ b/resources/js/views/Admin/AppSettings/AppSettings.vue
@@ -0,0 +1,97 @@
+<template>
+    <div id="single-page">
+        <div id="page-content">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+
+                <!--Page Tab links-->
+                <div class="menu-list-wrapper horizontal">
+                    <router-link replace :to="{name: 'AppAppearance'}"
+                                 class="menu-list-item link">
+                        <div class="icon">
+                            <eye-icon size="17"></eye-icon>
+                        </div>
+                        <div class="label">
+                            Appearance
+                        </div>
+                    </router-link>
+
+                    <router-link replace :to="{name: 'AppBillings'}"
+                                 class="menu-list-item link">
+                        <div class="icon">
+                            <file-text-icon size="17"></file-text-icon>
+                        </div>
+                        <div class="label">
+                            Billings
+                        </div>
+                    </router-link>
+
+                    <router-link replace :to="{name: 'AppEmail'}"
+                                 class="menu-list-item link">
+                        <div class="icon">
+                            <mail-icon size="17"></mail-icon>
+                        </div>
+                        <div class="label">
+                            Email
+                        </div>
+                    </router-link>
+
+                    <router-link replace :to="{name: 'AppOthers'}"
+                                 class="menu-list-item link">
+                        <div class="icon">
+                            <code-icon size="17"></code-icon>
+                        </div>
+                        <div class="label">
+                            Others
+                        </div>
+                    </router-link>
+                </div>
+
+                <!--Router Content-->
+                <router-view/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {UsersIcon, SettingsIcon, Trash2Icon, EyeIcon, FileTextIcon, CodeIcon, MailIcon} from 'vue-feather-icons'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import PageHeader from '@/components/Others/PageHeader'
+    import Spinner from '@/components/FilesView/Spinner'
+    import axios from 'axios'
+
+    export default {
+        name: 'AppSettings',
+        components: {
+            CodeIcon,
+            MailIcon,
+            FileTextIcon,
+            EyeIcon,
+            UsersIcon,
+            Trash2Icon,
+            SettingsIcon,
+            SectionTitle,
+            MobileHeader,
+            PageHeader,
+            Spinner,
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
new file mode 100644
index 00000000..62d06da4
--- /dev/null
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
@@ -0,0 +1,104 @@
+<template>
+    <PageTab class="form-fixed-width">
+
+        <!--Personal Information-->
+        <PageTabGroup>
+            <div class="form block-form">
+                <FormLabel>General Settings</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>App Title:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
+                        <input v-model="app.title" placeholder="Type your app title" type="text" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>App Description:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
+                        <input v-model="app.description" placeholder="Type your app description" type="text" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>App Logo (optional):</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Logo" v-slot="{ errors }">
+                        <ImageInput v-model="app.logo" :error="errors[0]"/>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>App Favicon (optional):</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Favicon" v-slot="{ errors }">
+                        <ImageInput v-model="app.favicon" :error="errors[0]"/>
+                    </ValidationProvider>
+                </div>
+            </div>
+        </PageTabGroup>
+    </PageTab>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ImageInput from '@/components/Others/Forms/ImageInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import {required} from 'vee-validate/dist/rules'
+    import axios from 'axios'
+
+    export default {
+        name: 'AppAppearance',
+        components: {
+            ValidationObserver,
+            ValidationProvider,
+            StorageItemDetail,
+            PageTabGroup,
+            SelectInput,
+            ImageInput,
+            ButtonBase,
+            FormLabel,
+            SetupBox,
+            required,
+            PageTab,
+            InfoBox,
+        },
+        data() {
+            return {
+                isLoading: false,
+                app: {
+                    title: '',
+                    description: '',
+                    logo: undefined,
+                    favicon: undefined,
+                },
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .block-form {
+        max-width: 100%;
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
new file mode 100644
index 00000000..fadff362
--- /dev/null
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
@@ -0,0 +1,405 @@
+<template>
+    <PageTab class="form-fixed-width">
+
+        <!--Personal Information-->
+        <PageTabGroup>
+            <div class="form block-form">
+                <FormLabel>Company Information</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Company Name:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Name"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_name" placeholder="Type your company name"
+                               type="text" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>VAT Number:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Vat Number"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_vat_number" placeholder="Type your VAT number"
+                               type="text" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <FormLabel class="mt-70">Billing Information</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Billing Country:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Country"
+                                        rules="required" v-slot="{ errors }">
+                        <SelectInput v-model="billingInformation.billing_country" :options="countries" placeholder="Select your billing country" :isError="errors[0]"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Billing Address:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_address" placeholder="Type your billing address"
+                               type="text" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="wrapper-inline">
+                    <div class="block-wrapper">
+                        <label>Billing City:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City"
+                                            rules="required" v-slot="{ errors }">
+                            <input v-model="billingInformation.billing_city" placeholder="Type your billing city"
+                                   type="text" :class="{'is-error': errors[0]}"/>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                    <div class="block-wrapper">
+                        <label>Billing Postal Code:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Postal Code"
+                                            rules="required" v-slot="{ errors }">
+                            <input v-model="billingInformation.billing_postal_code"
+                                   placeholder="Type your billing postal code" type="text" :class="{'is-error': errors[0]}"/>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Billing State:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_state" placeholder="Type your billing state"
+                               type="text" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Billing Phone Number (optional):</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Phone Number"
+                                        v-slot="{ errors }">
+                        <input v-model="billingInformation.billing_phone_number" placeholder="Type your billing phone number"
+                               type="text" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+            </div>
+        </PageTabGroup>
+    </PageTab>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ImageInput from '@/components/Others/Forms/ImageInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import {required} from 'vee-validate/dist/rules'
+    import axios from 'axios'
+
+    export default {
+        name: 'AppAppearance',
+        components: {
+            ValidationObserver,
+            ValidationProvider,
+            StorageItemDetail,
+            PageTabGroup,
+            SelectInput,
+            ImageInput,
+            ButtonBase,
+            FormLabel,
+            SetupBox,
+            required,
+            PageTab,
+            InfoBox,
+        },
+        data() {
+            return {
+                isLoading: false,
+                countries: [
+                    {label: 'Afghanistan', value: 'AF'},
+                    {label: 'Åland Islands', value: 'AX'},
+                    {label: 'Albania', value: 'AL'},
+                    {label: 'Algeria', value: 'DZ'},
+                    {label: 'American Samoa', value: 'AS'},
+                    {label: 'AndorrA', value: 'AD'},
+                    {label: 'Angola', value: 'AO'},
+                    {label: 'Anguilla', value: 'AI'},
+                    {label: 'Antarctica', value: 'AQ'},
+                    {label: 'Antigua and Barbuda', value: 'AG'},
+                    {label: 'Argentina', value: 'AR'},
+                    {label: 'Armenia', value: 'AM'},
+                    {label: 'Aruba', value: 'AW'},
+                    {label: 'Australia', value: 'AU'},
+                    {label: 'Austria', value: 'AT'},
+                    {label: 'Azerbaijan', value: 'AZ'},
+                    {label: 'Bahamas', value: 'BS'},
+                    {label: 'Bahrain', value: 'BH'},
+                    {label: 'Bangladesh', value: 'BD'},
+                    {label: 'Barbados', value: 'BB'},
+                    {label: 'Belarus', value: 'BY'},
+                    {label: 'Belgium', value: 'BE'},
+                    {label: 'Belize', value: 'BZ'},
+                    {label: 'Benin', value: 'BJ'},
+                    {label: 'Bermuda', value: 'BM'},
+                    {label: 'Bhutan', value: 'BT'},
+                    {label: 'Bolivia', value: 'BO'},
+                    {label: 'Bosnia and Herzegovina', value: 'BA'},
+                    {label: 'Botswana', value: 'BW'},
+                    {label: 'Bouvet Island', value: 'BV'},
+                    {label: 'Brazil', value: 'BR'},
+                    {label: 'British Indian Ocean Territory', value: 'IO'},
+                    {label: 'Brunei Darussalam', value: 'BN'},
+                    {label: 'Bulgaria', value: 'BG'},
+                    {label: 'Burkina Faso', value: 'BF'},
+                    {label: 'Burundi', value: 'BI'},
+                    {label: 'Cambodia', value: 'KH'},
+                    {label: 'Cameroon', value: 'CM'},
+                    {label: 'Canada', value: 'CA'},
+                    {label: 'Cape Verde', value: 'CV'},
+                    {label: 'Cayman Islands', value: 'KY'},
+                    {label: 'Central African Republic', value: 'CF'},
+                    {label: 'Chad', value: 'TD'},
+                    {label: 'Chile', value: 'CL'},
+                    {label: 'China', value: 'CN'},
+                    {label: 'Christmas Island', value: 'CX'},
+                    {label: 'Cocos (Keeling) Islands', value: 'CC'},
+                    {label: 'Colombia', value: 'CO'},
+                    {label: 'Comoros', value: 'KM'},
+                    {label: 'Congo', value: 'CG'},
+                    {label: 'Congo, The Democratic Republic of the', value: 'CD'},
+                    {label: 'Cook Islands', value: 'CK'},
+                    {label: 'Costa Rica', value: 'CR'},
+                    {label: 'Cote D\'Ivoire', value: 'CI'},
+                    {label: 'Croatia', value: 'HR'},
+                    {label: 'Cuba', value: 'CU'},
+                    {label: 'Cyprus', value: 'CY'},
+                    {label: 'Czech Republic', value: 'CZ'},
+                    {label: 'Denmark', value: 'DK'},
+                    {label: 'Djibouti', value: 'DJ'},
+                    {label: 'Dominica', value: 'DM'},
+                    {label: 'Dominican Republic', value: 'DO'},
+                    {label: 'Ecuador', value: 'EC'},
+                    {label: 'Egypt', value: 'EG'},
+                    {label: 'El Salvador', value: 'SV'},
+                    {label: 'Equatorial Guinea', value: 'GQ'},
+                    {label: 'Eritrea', value: 'ER'},
+                    {label: 'Estonia', value: 'EE'},
+                    {label: 'Ethiopia', value: 'ET'},
+                    {label: 'Falkland Islands (Malvinas)', value: 'FK'},
+                    {label: 'Faroe Islands', value: 'FO'},
+                    {label: 'Fiji', value: 'FJ'},
+                    {label: 'Finland', value: 'FI'},
+                    {label: 'France', value: 'FR'},
+                    {label: 'French Guiana', value: 'GF'},
+                    {label: 'French Polynesia', value: 'PF'},
+                    {label: 'French Southern Territories', value: 'TF'},
+                    {label: 'Gabon', value: 'GA'},
+                    {label: 'Gambia', value: 'GM'},
+                    {label: 'Georgia', value: 'GE'},
+                    {label: 'Germany', value: 'DE'},
+                    {label: 'Ghana', value: 'GH'},
+                    {label: 'Gibraltar', value: 'GI'},
+                    {label: 'Greece', value: 'GR'},
+                    {label: 'Greenland', value: 'GL'},
+                    {label: 'Grenada', value: 'GD'},
+                    {label: 'Guadeloupe', value: 'GP'},
+                    {label: 'Guam', value: 'GU'},
+                    {label: 'Guatemala', value: 'GT'},
+                    {label: 'Guernsey', value: 'GG'},
+                    {label: 'Guinea', value: 'GN'},
+                    {label: 'Guinea-Bissau', value: 'GW'},
+                    {label: 'Guyana', value: 'GY'},
+                    {label: 'Haiti', value: 'HT'},
+                    {label: 'Heard Island and Mcdonald Islands', value: 'HM'},
+                    {label: 'Holy See (Vatican City State)', value: 'VA'},
+                    {label: 'Honduras', value: 'HN'},
+                    {label: 'Hong Kong', value: 'HK'},
+                    {label: 'Hungary', value: 'HU'},
+                    {label: 'Iceland', value: 'IS'},
+                    {label: 'India', value: 'IN'},
+                    {label: 'Indonesia', value: 'ID'},
+                    {label: 'Iran, Islamic Republic Of', value: 'IR'},
+                    {label: 'Iraq', value: 'IQ'},
+                    {label: 'Ireland', value: 'IE'},
+                    {label: 'Isle of Man', value: 'IM'},
+                    {label: 'Israel', value: 'IL'},
+                    {label: 'Italy', value: 'IT'},
+                    {label: 'Jamaica', value: 'JM'},
+                    {label: 'Japan', value: 'JP'},
+                    {label: 'Jersey', value: 'JE'},
+                    {label: 'Jordan', value: 'JO'},
+                    {label: 'Kazakhstan', value: 'KZ'},
+                    {label: 'Kenya', value: 'KE'},
+                    {label: 'Kiribati', value: 'KI'},
+                    {label: 'Korea, Democratic People\'S Republic of', value: 'KP'},
+                    {label: 'Korea, Republic of', value: 'KR'},
+                    {label: 'Kuwait', value: 'KW'},
+                    {label: 'Kyrgyzstan', value: 'KG'},
+                    {label: 'Lao People\'S Democratic Republic', value: 'LA'},
+                    {label: 'Latvia', value: 'LV'},
+                    {label: 'Lebanon', value: 'LB'},
+                    {label: 'Lesotho', value: 'LS'},
+                    {label: 'Liberia', value: 'LR'},
+                    {label: 'Libyan Arab Jamahiriya', value: 'LY'},
+                    {label: 'Liechtenstein', value: 'LI'},
+                    {label: 'Lithuania', value: 'LT'},
+                    {label: 'Luxembourg', value: 'LU'},
+                    {label: 'Macao', value: 'MO'},
+                    {label: 'Macedonia, The Former Yugoslav Republic of', value: 'MK'},
+                    {label: 'Madagascar', value: 'MG'},
+                    {label: 'Malawi', value: 'MW'},
+                    {label: 'Malaysia', value: 'MY'},
+                    {label: 'Maldives', value: 'MV'},
+                    {label: 'Mali', value: 'ML'},
+                    {label: 'Malta', value: 'MT'},
+                    {label: 'Marshall Islands', value: 'MH'},
+                    {label: 'Martinique', value: 'MQ'},
+                    {label: 'Mauritania', value: 'MR'},
+                    {label: 'Mauritius', value: 'MU'},
+                    {label: 'Mayotte', value: 'YT'},
+                    {label: 'Mexico', value: 'MX'},
+                    {label: 'Micronesia, Federated States of', value: 'FM'},
+                    {label: 'Moldova, Republic of', value: 'MD'},
+                    {label: 'Monaco', value: 'MC'},
+                    {label: 'Mongolia', value: 'MN'},
+                    {label: 'Montserrat', value: 'MS'},
+                    {label: 'Morocco', value: 'MA'},
+                    {label: 'Mozambique', value: 'MZ'},
+                    {label: 'Myanmar', value: 'MM'},
+                    {label: 'Namibia', value: 'NA'},
+                    {label: 'Nauru', value: 'NR'},
+                    {label: 'Nepal', value: 'NP'},
+                    {label: 'Netherlands', value: 'NL'},
+                    {label: 'Netherlands Antilles', value: 'AN'},
+                    {label: 'New Caledonia', value: 'NC'},
+                    {label: 'New Zealand', value: 'NZ'},
+                    {label: 'Nicaragua', value: 'NI'},
+                    {label: 'Niger', value: 'NE'},
+                    {label: 'Nigeria', value: 'NG'},
+                    {label: 'Niue', value: 'NU'},
+                    {label: 'Norfolk Island', value: 'NF'},
+                    {label: 'Northern Mariana Islands', value: 'MP'},
+                    {label: 'Norway', value: 'NO'},
+                    {label: 'Oman', value: 'OM'},
+                    {label: 'Pakistan', value: 'PK'},
+                    {label: 'Palau', value: 'PW'},
+                    {label: 'Palestinian Territory, Occupied', value: 'PS'},
+                    {label: 'Panama', value: 'PA'},
+                    {label: 'Papua New Guinea', value: 'PG'},
+                    {label: 'Paraguay', value: 'PY'},
+                    {label: 'Peru', value: 'PE'},
+                    {label: 'Philippines', value: 'PH'},
+                    {label: 'Pitcairn', value: 'PN'},
+                    {label: 'Poland', value: 'PL'},
+                    {label: 'Portugal', value: 'PT'},
+                    {label: 'Puerto Rico', value: 'PR'},
+                    {label: 'Qatar', value: 'QA'},
+                    {label: 'Reunion', value: 'RE'},
+                    {label: 'Romania', value: 'RO'},
+                    {label: 'Russian Federation', value: 'RU'},
+                    {label: 'RWANDA', value: 'RW'},
+                    {label: 'Saint Helena', value: 'SH'},
+                    {label: 'Saint Kitts and Nevis', value: 'KN'},
+                    {label: 'Saint Lucia', value: 'LC'},
+                    {label: 'Saint Pierre and Miquelon', value: 'PM'},
+                    {label: 'Saint Vincent and the Grenadines', value: 'VC'},
+                    {label: 'Samoa', value: 'WS'},
+                    {label: 'San Marino', value: 'SM'},
+                    {label: 'Sao Tome and Principe', value: 'ST'},
+                    {label: 'Saudi Arabia', value: 'SA'},
+                    {label: 'Senegal', value: 'SN'},
+                    {label: 'Serbia and Montenegro', value: 'CS'},
+                    {label: 'Seychelles', value: 'SC'},
+                    {label: 'Sierra Leone', value: 'SL'},
+                    {label: 'Singapore', value: 'SG'},
+                    {label: 'Slovakia', value: 'SK'},
+                    {label: 'Slovenia', value: 'SI'},
+                    {label: 'Solomon Islands', value: 'SB'},
+                    {label: 'Somalia', value: 'SO'},
+                    {label: 'South Africa', value: 'ZA'},
+                    {label: 'South Georgia and the South Sandwich Islands', value: 'GS'},
+                    {label: 'Spain', value: 'ES'},
+                    {label: 'Sri Lanka', value: 'LK'},
+                    {label: 'Sudan', value: 'SD'},
+                    {label: 'Suriname', value: 'SR'},
+                    {label: 'Svalbard and Jan Mayen', value: 'SJ'},
+                    {label: 'Swaziland', value: 'SZ'},
+                    {label: 'Sweden', value: 'SE'},
+                    {label: 'Switzerland', value: 'CH'},
+                    {label: 'Syrian Arab Republic', value: 'SY'},
+                    {label: 'Taiwan, Province of China', value: 'TW'},
+                    {label: 'Tajikistan', value: 'TJ'},
+                    {label: 'Tanzania, United Republic of', value: 'TZ'},
+                    {label: 'Thailand', value: 'TH'},
+                    {label: 'Timor-Leste', value: 'TL'},
+                    {label: 'Togo', value: 'TG'},
+                    {label: 'Tokelau', value: 'TK'},
+                    {label: 'Tonga', value: 'TO'},
+                    {label: 'Trinidad and Tobago', value: 'TT'},
+                    {label: 'Tunisia', value: 'TN'},
+                    {label: 'Turkey', value: 'TR'},
+                    {label: 'Turkmenistan', value: 'TM'},
+                    {label: 'Turks and Caicos Islands', value: 'TC'},
+                    {label: 'Tuvalu', value: 'TV'},
+                    {label: 'Uganda', value: 'UG'},
+                    {label: 'Ukraine', value: 'UA'},
+                    {label: 'United Arab Emirates', value: 'AE'},
+                    {label: 'United Kingdom', value: 'GB'},
+                    {label: 'United States', value: 'US'},
+                    {label: 'United States Minor Outlying Islands', value: 'UM'},
+                    {label: 'Uruguay', value: 'UY'},
+                    {label: 'Uzbekistan', value: 'UZ'},
+                    {label: 'Vanuatu', value: 'VU'},
+                    {label: 'Venezuela', value: 'VE'},
+                    {label: 'Viet Nam', value: 'VN'},
+                    {label: 'Virgin Islands, British', value: 'VG'},
+                    {label: 'Virgin Islands, U.S.', value: 'VI'},
+                    {label: 'Wallis and Futuna', value: 'WF'},
+                    {label: 'Western Sahara', value: 'EH'},
+                    {label: 'Yemen', value: 'YE'},
+                    {label: 'Zambia', value: 'ZM'},
+                    {label: 'Zimbabwe', value: 'ZW'}
+                ],
+                billingInformation: {
+                    billing_phone_number: '',
+                    billing_postal_code: '',
+                    billing_vat_number: '',
+                    billing_address: '',
+                    billing_country: '',
+                    billing_state: '',
+                    billing_city: '',
+                    billing_name: '',
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .block-form {
+        max-width: 100%;
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
new file mode 100644
index 00000000..3070f884
--- /dev/null
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
@@ -0,0 +1,134 @@
+<template>
+    <PageTab class="form-fixed-width">
+
+        <!--Personal Information-->
+        <PageTabGroup>
+            <div class="form block-form">
+                <FormLabel>Email Setup</FormLabel>
+
+                <div class="block-wrapper">
+                    <label>Mail Driver:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.driver" placeholder="Type your mail driver" type="text" :class="{'is-error': errors[0]}" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Host:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Host" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.host" placeholder="Type your mail host" type="text" :class="{'is-error': errors[0]}" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Port:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Port" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.port" placeholder="Type your mail port" type="text" :class="{'is-error': errors[0]}" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Username:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Username" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.username" placeholder="Type your mail username" type="text" :class="{'is-error': errors[0]}" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Password:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Password" rules="required" v-slot="{ errors }">
+                        <input v-model="mail.password" placeholder="Type your mail password" type="text" :class="{'is-error': errors[0]}" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Mail Encryption:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Encryption" rules="required" v-slot="{ errors }">
+                        <SelectInput v-model="mail.encryption" :options="encryptionList" placeholder="Select your mail encryption" :isError="errors[0]"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+            </div>
+        </PageTabGroup>
+    </PageTab>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ImageInput from '@/components/Others/Forms/ImageInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import {required} from 'vee-validate/dist/rules'
+    import axios from 'axios'
+
+    export default {
+        name: 'AppAppearance',
+        components: {
+            ValidationObserver,
+            ValidationProvider,
+            StorageItemDetail,
+            PageTabGroup,
+            SelectInput,
+            ImageInput,
+            ButtonBase,
+            FormLabel,
+            SetupBox,
+            required,
+            PageTab,
+            InfoBox,
+        },
+        data() {
+            return {
+                isLoading: false,
+                encryptionList: [
+                    {
+                        label: 'TLS',
+                        value: 'tls',
+                    },
+                    {
+                        label: 'SSL',
+                        value: 'ssl',
+                    },
+                ],
+                mail: {
+                    driver: '',
+                    host: '',
+                    port: '',
+                    username: '',
+                    password: '',
+                    encryption: '',
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .block-form {
+        max-width: 100%;
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
new file mode 100644
index 00000000..ed068320
--- /dev/null
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
@@ -0,0 +1,132 @@
+<template>
+    <PageTab class="form-fixed-width">
+
+        <!--Personal Information-->
+        <PageTabGroup>
+            <div class="form block-form">
+                <FormLabel>Others Settings</FormLabel>
+
+                <div class="block-wrapper">
+                    <div class="input-wrapper">
+                        <div class="inline-wrapper">
+                            <div class="switch-label">
+                                <label class="input-label">Allow User Registration:</label>
+                            </div>
+                            <SwitchInput v-model="app.userRegistration" class="switch" :state="app.userRegistration"/>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Contact Email:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Contact Email"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="app.contactMail" placeholder="Type your contact email" type="email" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>Google Analytics Code (optional):</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Google Analytics Code"
+                                        v-slot="{ errors }">
+                        <input v-model="app.googleAnalytics" placeholder="Paste your Google Analytics Code"
+                               type="text" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <div class="input-wrapper">
+                        <div class="inline-wrapper">
+                            <div class="switch-label">
+                                <label class="input-label">Storage Limitation:</label>
+                            </div>
+                            <SwitchInput v-model="app.storageLimitation" class="switch" :state="app.storageLimitation"/>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="block-wrapper" v-if="app.storageLimitation">
+                    <label>Default Storage Space for Accounts:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Default Storage Space" rules="required" v-slot="{ errors }">
+                        <input v-model="app.defaultStorage"
+                               min="1"
+                               max="999999999"
+                               placeholder="Set default storage space in GB"
+                               type="number"
+                               :class="{'is-error': errors[0]}"
+                        />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+            </div>
+        </PageTabGroup>
+    </PageTab>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import ImageInput from '@/components/Others/Forms/ImageInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import PageTab from '@/components/Others/Layout/PageTab'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import {required} from 'vee-validate/dist/rules'
+    import axios from 'axios'
+
+    export default {
+        name: 'AppOthers',
+        components: {
+            ValidationObserver,
+            ValidationProvider,
+            StorageItemDetail,
+            PageTabGroup,
+            SwitchInput,
+            SelectInput,
+            ImageInput,
+            ButtonBase,
+            FormLabel,
+            SetupBox,
+            required,
+            PageTab,
+            InfoBox,
+        },
+        data() {
+            return {
+                isLoading: false,
+                app: {
+                    contactMail: '',
+                    googleAnalytics: '',
+                    defaultStorage: '',
+                    userRegistration: 1,
+                    storageLimitation: 1,
+                },
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .block-form {
+        max-width: 100%;
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>
diff --git a/resources/js/views/Admin/Plans/Plan.vue b/resources/js/views/Admin/Plans/Plan.vue
index 90869ae4..54c00773 100644
--- a/resources/js/views/Admin/Plans/Plan.vue
+++ b/resources/js/views/Admin/Plans/Plan.vue
@@ -58,7 +58,7 @@
     import axios from 'axios'
 
     export default {
-        name: 'Gateway',
+        name: 'Plan',
         components: {
             UsersIcon,
             Trash2Icon,
diff --git a/resources/js/views/Mobile/AdminMobileMenu.vue b/resources/js/views/Mobile/AdminMobileMenu.vue
index cad4a76f..e61c82b0 100644
--- a/resources/js/views/Mobile/AdminMobileMenu.vue
+++ b/resources/js/views/Mobile/AdminMobileMenu.vue
@@ -9,13 +9,13 @@
             <div class="content-page">
                 <nav class="mobile-navigation">
 
-                    <!--SaaS menu-->
-                    <b class="mobile-menu-label">SaaS</b>
-                    <MenuItemList :navigation="SassNavigation" />
-
                     <!--Admin menu-->
                     <b class="mobile-menu-label">Admin</b>
                     <MenuItemList :navigation="AdminNavigation" />
+
+                    <!--SaaS menu-->
+                    <b class="mobile-menu-label">SaaS</b>
+                    <MenuItemList :navigation="SassNavigation" />
                 </nav>
             </div>
         </div>
@@ -56,12 +56,6 @@
                         routeName: 'Plans',
                         isVisible: true,
                     },
-                    {
-                        icon: 'credit-card',
-                        title: 'Payment Methods',
-                        routeName: 'Gateways',
-                        isVisible: true,
-                    },
                     {
                         icon: 'file-text',
                         title: 'Invoices',
diff --git a/resources/js/views/Mobile/UserProfileMobileMenu.vue b/resources/js/views/Mobile/UserProfileMobileMenu.vue
new file mode 100644
index 00000000..2a8571a1
--- /dev/null
+++ b/resources/js/views/Mobile/UserProfileMobileMenu.vue
@@ -0,0 +1,105 @@
+<template>
+    <div id="single-page">
+        <div id="page-content">
+
+            <!--Header-->
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+
+            <!--Content-->
+            <div class="content-page">
+                <nav class="mobile-navigation">
+
+                    <!--Admin menu-->
+                    <b class="mobile-menu-label">Menu</b>
+                    <MenuItemList :navigation="ProfileNavigation" />
+
+                    <!--SaaS menu-->
+                    <b class="mobile-menu-label">Subscription</b>
+                    <MenuItemList :navigation="SubscriptionNavigation" />
+                </nav>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import MenuItemList from '@/components/Mobile/MenuItemList'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+
+    export default {
+        name: 'UserProfileMobileMenu',
+        components: {
+            MenuItemList,
+            MobileHeader,
+        },
+        data() {
+            return {
+                ProfileNavigation: [
+                    {
+                        icon: 'user',
+                        title: 'Profile',
+                        routeName: 'Profile',
+                        isVisible: true,
+                    },
+                    {
+                        icon: 'hard-drive',
+                        title: 'Storage',
+                        routeName: 'Storage',
+                        isVisible: true,
+                    },
+                    {
+                        icon: 'lock',
+                        title: 'Password',
+                        routeName: 'Password',
+                        isVisible: true,
+                    },
+                ],
+                SubscriptionNavigation: [
+                    {
+                        icon: 'cloud',
+                        title: 'Subscription',
+                        routeName: 'Subscription',
+                        isVisible: true,
+                    },
+                    {
+                        icon: 'credit-card',
+                        title: 'Payment Cards',
+                        routeName: 'PaymentMethods',
+                        isVisible: true,
+                    },
+                    {
+                        icon: 'file-text',
+                        title: 'Invoices',
+                        routeName: 'Invoice',
+                        isVisible: true,
+                    },
+                ]
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .mobile-navigation {
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 99;
+
+        .mobile-menu-label {
+            margin-top: 30px;
+            margin-bottom: 5px;
+            @include font-size(11);
+            color: $text-muted;
+            display: block;
+
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+</style>
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index c3b60a64..69b64c2b 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -93,7 +93,7 @@
                         </div>
                         <div v-if="config.isSaaS" class="headline-actions">
                             <router-link :to="{name: 'UpgradePlan'}" v-if="! user.relationships.subscription || (user.relationships.subscription && ! user.relationships.subscription.data.attributes.is_highest)">
-                                <ButtonBase button-style="secondary" type="button">
+                                <ButtonBase class="upgrade-button" button-style="secondary" type="button">
                                     Upgrade Plan
                                 </ButtonBase>
                             </router-link>
@@ -223,4 +223,19 @@
             }
         }
     }
+
+    @media only screen and (max-width: 690px) {
+
+        .page-detail-headline {
+            display: block;
+
+            .headline-actions {
+                margin-top: 20px;
+
+                .upgrade-button {
+                    width: 100%;
+                }
+            }
+        }
+    }
 </style>
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index d730cdff..bf8c01c6 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -1,5 +1,5 @@
 <template>
-    <PageTab class="form-fixed-width">
+    <PageTab>
         <PageTabGroup>
             <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
                 <FormLabel>Change Your Password</FormLabel>
diff --git a/resources/js/views/User/Settings.vue b/resources/js/views/User/Settings.vue
index 467146eb..99e94c26 100644
--- a/resources/js/views/User/Settings.vue
+++ b/resources/js/views/User/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-    <PageTab class="form-fixed-width">
+    <PageTab>
         <PageTabGroup v-if="userInfo">
             <div class="form block-form">
                 <FormLabel>Account Information</FormLabel>
diff --git a/resources/js/views/User/Storage.vue b/resources/js/views/User/Storage.vue
index 90eab6d2..36dd42b1 100644
--- a/resources/js/views/User/Storage.vue
+++ b/resources/js/views/User/Storage.vue
@@ -1,5 +1,5 @@
 <template>
-    <PageTab class="form-fixed-width" v-if="storage">
+    <PageTab v-if="storage">
         <PageTabGroup>
             <FormLabel>Your disk Usage</FormLabel>
             <StorageItemDetail type="disk" :title="$t('storage.total_used', {used: storage.attributes.used})" :percentage="storage.attributes.percentage" :used="$t('storage.total_capacity', {capacity: storage.attributes.capacity})"/>
diff --git a/routes/web.php b/routes/web.php
index 59d90a61..8462c9c9 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -17,9 +17,12 @@ Route::post('/stripe/webhook', 'WebhookController@handleWebhook');
 // Deployment WebHook URL
 Route::post('/deploy/github', 'DeployController@github');
 
+// App public files
+Route::get('/avatars/{avatar}', 'FileAccessController@get_avatar')->name('avatar');
+Route::get('/system/{image}', 'FileAccessController@get_system_image');
+
 // Get public thumbnails and files
 Route::get('/thumbnail/{name}/public/{token}', 'FileAccessController@get_thumbnail_public');
-Route::get('/avatars/{avatar}', 'FileAccessController@get_avatar')->name('avatar');
 Route::get('/file/{name}/public/{token}', 'FileAccessController@get_file_public');
 
 // User master,editor,visitor access to image thumbnails and file downloads
diff --git a/storage/framework/cache/data/00/31/00317b5e81771fa2c4f1ccbe161dfb1c492dde59 b/storage/framework/cache/data/00/31/00317b5e81771fa2c4f1ccbe161dfb1c492dde59
deleted file mode 100644
index a9708265..00000000
--- a/storage/framework/cache/data/00/31/00317b5e81771fa2c4f1ccbe161dfb1c492dde59
+++ /dev/null
@@ -1 +0,0 @@
-9999999999a:2:{i:0;a:2:{s:4:"plan";a:20:{s:2:"id";s:17:"professional-pack";s:6:"object";s:4:"plan";s:6:"active";b:1;s:15:"aggregate_usage";N;s:6:"amount";i:2000;s:14:"amount_decimal";s:4:"2000";s:14:"billing_scheme";s:8:"per_unit";s:7:"created";i:1593685392;s:8:"currency";s:3:"usd";s:8:"interval";s:5:"month";s:14:"interval_count";i:1;s:8:"livemode";b:0;s:8:"metadata";a:0:{}s:8:"nickname";N;s:7:"product";s:19:"prod_HZYg39TNtwkP8e";s:5:"tiers";N;s:10:"tiers_mode";N;s:15:"transform_usage";N;s:17:"trial_period_days";N;s:10:"usage_type";s:8:"licensed";}s:7:"product";a:14:{s:2:"id";s:19:"prod_HZYg39TNtwkP8e";s:6:"object";s:7:"product";s:6:"active";b:1;s:10:"attributes";a:0:{}s:7:"created";i:1593685390;s:11:"description";s:17:"for real tru mans";s:6:"images";a:0:{}s:8:"livemode";b:0;s:8:"metadata";a:1:{s:8:"capacity";s:3:"999";}s:4:"name";s:17:"Professional Pack";s:20:"statement_descriptor";N;s:4:"type";s:7:"service";s:10:"unit_label";N;s:7:"updated";i:1593685392;}}i:1;a:2:{s:4:"plan";a:20:{s:2:"id";s:6:"fdsfds";s:6:"object";s:4:"plan";s:6:"active";b:1;s:15:"aggregate_usage";N;s:6:"amount";i:2200;s:14:"amount_decimal";s:4:"2200";s:14:"billing_scheme";s:8:"per_unit";s:7:"created";i:1593616395;s:8:"currency";s:3:"usd";s:8:"interval";s:5:"month";s:14:"interval_count";i:1;s:8:"livemode";b:0;s:8:"metadata";a:0:{}s:8:"nickname";N;s:7:"product";s:19:"prod_HZG82OMrPXyWyA";s:5:"tiers";N;s:10:"tiers_mode";N;s:15:"transform_usage";N;s:17:"trial_period_days";N;s:10:"usage_type";s:8:"licensed";}s:7:"product";a:14:{s:2:"id";s:19:"prod_HZG82OMrPXyWyA";s:6:"object";s:7:"product";s:6:"active";b:1;s:10:"attributes";a:0:{}s:7:"created";i:1593616395;s:11:"description";s:6:"fdsfsd";s:6:"images";a:0:{}s:8:"livemode";b:0;s:8:"metadata";a:1:{s:8:"capacity";s:2:"22";}s:4:"name";s:6:"fdsfds";s:20:"statement_descriptor";N;s:4:"type";s:7:"service";s:10:"unit_label";N;s:7:"updated";i:1593616395;}}}
\ No newline at end of file
diff --git a/storage/framework/cache/data/1c/61/1c616af560fef7e36fda03094bba2b666636f36f b/storage/framework/cache/data/1c/61/1c616af560fef7e36fda03094bba2b666636f36f
deleted file mode 100644
index 4ec53af7..00000000
Binary files a/storage/framework/cache/data/1c/61/1c616af560fef7e36fda03094bba2b666636f36f and /dev/null differ
diff --git a/storage/framework/cache/data/21/01/2101d0482c1d6143d9f389063c1ab3d14fc9a75e b/storage/framework/cache/data/21/01/2101d0482c1d6143d9f389063c1ab3d14fc9a75e
deleted file mode 100644
index 57797510..00000000
Binary files a/storage/framework/cache/data/21/01/2101d0482c1d6143d9f389063c1ab3d14fc9a75e and /dev/null differ
diff --git a/storage/framework/cache/data/3a/90/3a9055585a042324f4c9de4b2836d979bd8e3fa9 b/storage/framework/cache/data/3a/90/3a9055585a042324f4c9de4b2836d979bd8e3fa9
deleted file mode 100644
index a9708265..00000000
--- a/storage/framework/cache/data/3a/90/3a9055585a042324f4c9de4b2836d979bd8e3fa9
+++ /dev/null
@@ -1 +0,0 @@
-9999999999a:2:{i:0;a:2:{s:4:"plan";a:20:{s:2:"id";s:17:"professional-pack";s:6:"object";s:4:"plan";s:6:"active";b:1;s:15:"aggregate_usage";N;s:6:"amount";i:2000;s:14:"amount_decimal";s:4:"2000";s:14:"billing_scheme";s:8:"per_unit";s:7:"created";i:1593685392;s:8:"currency";s:3:"usd";s:8:"interval";s:5:"month";s:14:"interval_count";i:1;s:8:"livemode";b:0;s:8:"metadata";a:0:{}s:8:"nickname";N;s:7:"product";s:19:"prod_HZYg39TNtwkP8e";s:5:"tiers";N;s:10:"tiers_mode";N;s:15:"transform_usage";N;s:17:"trial_period_days";N;s:10:"usage_type";s:8:"licensed";}s:7:"product";a:14:{s:2:"id";s:19:"prod_HZYg39TNtwkP8e";s:6:"object";s:7:"product";s:6:"active";b:1;s:10:"attributes";a:0:{}s:7:"created";i:1593685390;s:11:"description";s:17:"for real tru mans";s:6:"images";a:0:{}s:8:"livemode";b:0;s:8:"metadata";a:1:{s:8:"capacity";s:3:"999";}s:4:"name";s:17:"Professional Pack";s:20:"statement_descriptor";N;s:4:"type";s:7:"service";s:10:"unit_label";N;s:7:"updated";i:1593685392;}}i:1;a:2:{s:4:"plan";a:20:{s:2:"id";s:6:"fdsfds";s:6:"object";s:4:"plan";s:6:"active";b:1;s:15:"aggregate_usage";N;s:6:"amount";i:2200;s:14:"amount_decimal";s:4:"2200";s:14:"billing_scheme";s:8:"per_unit";s:7:"created";i:1593616395;s:8:"currency";s:3:"usd";s:8:"interval";s:5:"month";s:14:"interval_count";i:1;s:8:"livemode";b:0;s:8:"metadata";a:0:{}s:8:"nickname";N;s:7:"product";s:19:"prod_HZG82OMrPXyWyA";s:5:"tiers";N;s:10:"tiers_mode";N;s:15:"transform_usage";N;s:17:"trial_period_days";N;s:10:"usage_type";s:8:"licensed";}s:7:"product";a:14:{s:2:"id";s:19:"prod_HZG82OMrPXyWyA";s:6:"object";s:7:"product";s:6:"active";b:1;s:10:"attributes";a:0:{}s:7:"created";i:1593616395;s:11:"description";s:6:"fdsfsd";s:6:"images";a:0:{}s:8:"livemode";b:0;s:8:"metadata";a:1:{s:8:"capacity";s:2:"22";}s:4:"name";s:6:"fdsfds";s:20:"statement_descriptor";N;s:4:"type";s:7:"service";s:10:"unit_label";N;s:7:"updated";i:1593616395;}}}
\ No newline at end of file
diff --git a/storage/framework/cache/data/44/d1/44d142505dd1a3b497197e2f459d2aec779e9ed6 b/storage/framework/cache/data/44/d1/44d142505dd1a3b497197e2f459d2aec779e9ed6
index 38e90eb5..fab1e56c 100644
--- a/storage/framework/cache/data/44/d1/44d142505dd1a3b497197e2f459d2aec779e9ed6
+++ b/storage/framework/cache/data/44/d1/44d142505dd1a3b497197e2f459d2aec779e9ed6
@@ -1 +1 @@
-1593705701i:1593705701;
\ No newline at end of file
+1593758028i:1593758028;
\ No newline at end of file
diff --git a/storage/framework/cache/data/a3/26/a3260a8cb32b241d3658f999f995858bba84948d b/storage/framework/cache/data/a3/26/a3260a8cb32b241d3658f999f995858bba84948d
deleted file mode 100644
index e04894f1..00000000
--- a/storage/framework/cache/data/a3/26/a3260a8cb32b241d3658f999f995858bba84948d
+++ /dev/null
@@ -1 +0,0 @@
-9999999999a:2:{s:4:"plan";a:20:{s:2:"id";s:17:"professional-pack";s:6:"object";s:4:"plan";s:6:"active";b:1;s:15:"aggregate_usage";N;s:6:"amount";i:2000;s:14:"amount_decimal";s:4:"2000";s:14:"billing_scheme";s:8:"per_unit";s:7:"created";i:1593685392;s:8:"currency";s:3:"usd";s:8:"interval";s:5:"month";s:14:"interval_count";i:1;s:8:"livemode";b:0;s:8:"metadata";a:0:{}s:8:"nickname";N;s:7:"product";s:19:"prod_HZYg39TNtwkP8e";s:5:"tiers";N;s:10:"tiers_mode";N;s:15:"transform_usage";N;s:17:"trial_period_days";N;s:10:"usage_type";s:8:"licensed";}s:7:"product";a:14:{s:2:"id";s:19:"prod_HZYg39TNtwkP8e";s:6:"object";s:7:"product";s:6:"active";b:1;s:10:"attributes";a:0:{}s:7:"created";i:1593685390;s:11:"description";s:17:"for real tru mans";s:6:"images";a:0:{}s:8:"livemode";b:0;s:8:"metadata";a:1:{s:8:"capacity";s:3:"999";}s:4:"name";s:17:"Professional Pack";s:20:"statement_descriptor";N;s:4:"type";s:7:"service";s:10:"unit_label";N;s:7:"updated";i:1593685392;}}
\ No newline at end of file
diff --git a/storage/framework/cache/data/a6/63/a663cdace4dc048cf78c535fc8f9e6cc088ea346 b/storage/framework/cache/data/a6/63/a663cdace4dc048cf78c535fc8f9e6cc088ea346
deleted file mode 100644
index 74366fdc..00000000
--- a/storage/framework/cache/data/a6/63/a663cdace4dc048cf78c535fc8f9e6cc088ea346
+++ /dev/null
@@ -1 +0,0 @@
-9999999999a:0:{}
\ No newline at end of file
diff --git a/storage/framework/cache/data/ac/e1/ace142bb086c4aedd905d5564c585bd410e49db0 b/storage/framework/cache/data/ac/e1/ace142bb086c4aedd905d5564c585bd410e49db0
deleted file mode 100644
index c220e31e..00000000
--- a/storage/framework/cache/data/ac/e1/ace142bb086c4aedd905d5564c585bd410e49db0
+++ /dev/null
@@ -1 +0,0 @@
-9999999999a:2:{s:4:"plan";a:20:{s:2:"id";s:6:"fdsfds";s:6:"object";s:4:"plan";s:6:"active";b:1;s:15:"aggregate_usage";N;s:6:"amount";i:2200;s:14:"amount_decimal";s:4:"2200";s:14:"billing_scheme";s:8:"per_unit";s:7:"created";i:1593616395;s:8:"currency";s:3:"usd";s:8:"interval";s:5:"month";s:14:"interval_count";i:1;s:8:"livemode";b:0;s:8:"metadata";a:0:{}s:8:"nickname";N;s:7:"product";s:19:"prod_HZG82OMrPXyWyA";s:5:"tiers";N;s:10:"tiers_mode";N;s:15:"transform_usage";N;s:17:"trial_period_days";N;s:10:"usage_type";s:8:"licensed";}s:7:"product";a:14:{s:2:"id";s:19:"prod_HZG82OMrPXyWyA";s:6:"object";s:7:"product";s:6:"active";b:1;s:10:"attributes";a:0:{}s:7:"created";i:1593616395;s:11:"description";s:6:"fdsfsd";s:6:"images";a:0:{}s:8:"livemode";b:0;s:8:"metadata";a:1:{s:8:"capacity";s:2:"22";}s:4:"name";s:6:"fdsfds";s:20:"statement_descriptor";N;s:4:"type";s:7:"service";s:10:"unit_label";N;s:7:"updated";i:1593616395;}}
\ No newline at end of file
diff --git a/storage/framework/cache/data/c2/4f/c24f92750673b2169c8cb7bfbc999cfa8457dc7c b/storage/framework/cache/data/c2/4f/c24f92750673b2169c8cb7bfbc999cfa8457dc7c
index b78b0c0d..e71253a0 100644
--- a/storage/framework/cache/data/c2/4f/c24f92750673b2169c8cb7bfbc999cfa8457dc7c
+++ b/storage/framework/cache/data/c2/4f/c24f92750673b2169c8cb7bfbc999cfa8457dc7c
@@ -1 +1 @@
-1593705701i:3;
\ No newline at end of file
+1593758028i:2;
\ No newline at end of file