diff --git a/app/Http/Controllers/Admin/UserController.php b/app/Http/Controllers/Admin/UserController.php
index 9d861fa8..1108fc62 100644
--- a/app/Http/Controllers/Admin/UserController.php
+++ b/app/Http/Controllers/Admin/UserController.php
@@ -83,6 +83,12 @@ class UserController extends Controller
      */
     public function subscription($id)
     {
+        $user = User::find($id);
+
+        if (! $user->stripeId()) {
+            return response('User is not stripe customer', 404);
+        }
+
         return new UserSubscription(
             User::find($id)
         );
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index e7fce826..00f525b1 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -77,5 +77,106 @@
     "/js/main.95f2eda8c8f6eddf91c4.hot-update.js": "/js/main.95f2eda8c8f6eddf91c4.hot-update.js",
     "/js/main.c6d99369d738f4a74fe5.hot-update.js": "/js/main.c6d99369d738f4a74fe5.hot-update.js",
     "/js/main.1cf2639585cda2d389ca.hot-update.js": "/js/main.1cf2639585cda2d389ca.hot-update.js",
-    "/js/main.4597a7e63646bbbda998.hot-update.js": "/js/main.4597a7e63646bbbda998.hot-update.js"
+    "/js/main.4597a7e63646bbbda998.hot-update.js": "/js/main.4597a7e63646bbbda998.hot-update.js",
+    "/js/main.e2469ce1cec32623dabe.hot-update.js": "/js/main.e2469ce1cec32623dabe.hot-update.js",
+    "/js/main.c65ce2fa2d3062f4862d.hot-update.js": "/js/main.c65ce2fa2d3062f4862d.hot-update.js",
+    "/js/main.b8644dee1a163e3fb94e.hot-update.js": "/js/main.b8644dee1a163e3fb94e.hot-update.js",
+    "/js/main.84815c8f5d9a62546026.hot-update.js": "/js/main.84815c8f5d9a62546026.hot-update.js",
+    "/js/main.6a573d874a47123bca89.hot-update.js": "/js/main.6a573d874a47123bca89.hot-update.js",
+    "/js/main.80cf720080ad37703502.hot-update.js": "/js/main.80cf720080ad37703502.hot-update.js",
+    "/js/main.9a22345ac9c67687657e.hot-update.js": "/js/main.9a22345ac9c67687657e.hot-update.js",
+    "/js/main.a8980315578840682a58.hot-update.js": "/js/main.a8980315578840682a58.hot-update.js",
+    "/js/main.dd5053d86ae64c99e47a.hot-update.js": "/js/main.dd5053d86ae64c99e47a.hot-update.js",
+    "/js/main.dc23da6ed6b923a8631c.hot-update.js": "/js/main.dc23da6ed6b923a8631c.hot-update.js",
+    "/js/main.14efc460b0e00a761312.hot-update.js": "/js/main.14efc460b0e00a761312.hot-update.js",
+    "/js/main.65e4697b8522747b7a55.hot-update.js": "/js/main.65e4697b8522747b7a55.hot-update.js",
+    "/js/main.bfb0a41fc85267032c3e.hot-update.js": "/js/main.bfb0a41fc85267032c3e.hot-update.js",
+    "/js/main.51a2a715a914dd1e8a06.hot-update.js": "/js/main.51a2a715a914dd1e8a06.hot-update.js",
+    "/js/main.5c2d35b8c4f196807a29.hot-update.js": "/js/main.5c2d35b8c4f196807a29.hot-update.js",
+    "/js/main.6f92c12049b8062dab0d.hot-update.js": "/js/main.6f92c12049b8062dab0d.hot-update.js",
+    "/js/main.e845e1fea71344b06a40.hot-update.js": "/js/main.e845e1fea71344b06a40.hot-update.js",
+    "/js/main.2ad1a51e6f6ca6411354.hot-update.js": "/js/main.2ad1a51e6f6ca6411354.hot-update.js",
+    "/js/main.1292a383af7dc998f9d6.hot-update.js": "/js/main.1292a383af7dc998f9d6.hot-update.js",
+    "/js/main.8a9a5e6e982b7a6e4834.hot-update.js": "/js/main.8a9a5e6e982b7a6e4834.hot-update.js",
+    "/js/main.790228adae3eb321d000.hot-update.js": "/js/main.790228adae3eb321d000.hot-update.js",
+    "/js/main.2b15bb4b8a7361b8af7b.hot-update.js": "/js/main.2b15bb4b8a7361b8af7b.hot-update.js",
+    "/js/main.9f435c70d1a45f2c39cb.hot-update.js": "/js/main.9f435c70d1a45f2c39cb.hot-update.js",
+    "/js/main.a6e046bec1a3976e3aec.hot-update.js": "/js/main.a6e046bec1a3976e3aec.hot-update.js",
+    "/js/main.ccd9c0762ede3e367015.hot-update.js": "/js/main.ccd9c0762ede3e367015.hot-update.js",
+    "/js/main.7f40f0030a21000ae153.hot-update.js": "/js/main.7f40f0030a21000ae153.hot-update.js",
+    "/js/main.be67e993ad365d080bad.hot-update.js": "/js/main.be67e993ad365d080bad.hot-update.js",
+    "/js/main.2b08f1fb4891cc2fd2bc.hot-update.js": "/js/main.2b08f1fb4891cc2fd2bc.hot-update.js",
+    "/js/main.a7e4a81f74a77f03a37f.hot-update.js": "/js/main.a7e4a81f74a77f03a37f.hot-update.js",
+    "/js/main.587310d2c741d5d4730d.hot-update.js": "/js/main.587310d2c741d5d4730d.hot-update.js",
+    "/js/main.d1ecb52bcc001d6e1f2c.hot-update.js": "/js/main.d1ecb52bcc001d6e1f2c.hot-update.js",
+    "/js/main.dda73e3f56ac3ed7aa68.hot-update.js": "/js/main.dda73e3f56ac3ed7aa68.hot-update.js",
+    "/js/main.eaeb84e7346581e39a1d.hot-update.js": "/js/main.eaeb84e7346581e39a1d.hot-update.js",
+    "/js/main.9e922583983080939088.hot-update.js": "/js/main.9e922583983080939088.hot-update.js",
+    "/js/main.68e92b32573c00e1a1c6.hot-update.js": "/js/main.68e92b32573c00e1a1c6.hot-update.js",
+    "/js/main.d7700219a6c6dc8f152f.hot-update.js": "/js/main.d7700219a6c6dc8f152f.hot-update.js",
+    "/js/main.75d92a2cc7b6522a6e17.hot-update.js": "/js/main.75d92a2cc7b6522a6e17.hot-update.js",
+    "/js/main.a4de077bce2df0f69571.hot-update.js": "/js/main.a4de077bce2df0f69571.hot-update.js",
+    "/js/main.718205baff18bafe32d1.hot-update.js": "/js/main.718205baff18bafe32d1.hot-update.js",
+    "/js/main.d0a7a15861717656ff4b.hot-update.js": "/js/main.d0a7a15861717656ff4b.hot-update.js",
+    "/js/main.f56f5e6df91a059ba662.hot-update.js": "/js/main.f56f5e6df91a059ba662.hot-update.js",
+    "/js/main.b161f326250f38288053.hot-update.js": "/js/main.b161f326250f38288053.hot-update.js",
+    "/js/main.0a3e5f7d914defa9f19a.hot-update.js": "/js/main.0a3e5f7d914defa9f19a.hot-update.js",
+    "/js/main.5f67a4347204c33a8a78.hot-update.js": "/js/main.5f67a4347204c33a8a78.hot-update.js",
+    "/js/main.947e138447a38375c536.hot-update.js": "/js/main.947e138447a38375c536.hot-update.js",
+    "/js/main.28854b0e7935d8be3e71.hot-update.js": "/js/main.28854b0e7935d8be3e71.hot-update.js",
+    "/js/main.09896e483163ade42217.hot-update.js": "/js/main.09896e483163ade42217.hot-update.js",
+    "/js/main.0679c18da1e5f3a0401b.hot-update.js": "/js/main.0679c18da1e5f3a0401b.hot-update.js",
+    "/js/main.43d0df9d193d6d800053.hot-update.js": "/js/main.43d0df9d193d6d800053.hot-update.js",
+    "/js/main.69e592acb3a2685c88bf.hot-update.js": "/js/main.69e592acb3a2685c88bf.hot-update.js",
+    "/js/main.a6a27a19d6f9917ca89c.hot-update.js": "/js/main.a6a27a19d6f9917ca89c.hot-update.js",
+    "/js/main.d31193d605ee035b2c6b.hot-update.js": "/js/main.d31193d605ee035b2c6b.hot-update.js",
+    "/js/main.a2b4795c91d64a312bfe.hot-update.js": "/js/main.a2b4795c91d64a312bfe.hot-update.js",
+    "/js/main.faf97c5fdd6bfb2b6961.hot-update.js": "/js/main.faf97c5fdd6bfb2b6961.hot-update.js",
+    "/js/main.b5a35727aaf17a7797e1.hot-update.js": "/js/main.b5a35727aaf17a7797e1.hot-update.js",
+    "/js/main.cbed727fc9169c35ddfc.hot-update.js": "/js/main.cbed727fc9169c35ddfc.hot-update.js",
+    "/js/main.188cdee78d82bbed2d2a.hot-update.js": "/js/main.188cdee78d82bbed2d2a.hot-update.js",
+    "/js/main.87a15316ae916f0a5fb9.hot-update.js": "/js/main.87a15316ae916f0a5fb9.hot-update.js",
+    "/js/main.c26e09bb3f19f9009fd4.hot-update.js": "/js/main.c26e09bb3f19f9009fd4.hot-update.js",
+    "/js/main.66ed0a280967a42f68be.hot-update.js": "/js/main.66ed0a280967a42f68be.hot-update.js",
+    "/js/main.34fead007f792960947a.hot-update.js": "/js/main.34fead007f792960947a.hot-update.js",
+    "/js/main.2e095129830f14a84ad2.hot-update.js": "/js/main.2e095129830f14a84ad2.hot-update.js",
+    "/js/main.4a61e48014b38fddddf5.hot-update.js": "/js/main.4a61e48014b38fddddf5.hot-update.js",
+    "/js/main.1786e4fb380504a02582.hot-update.js": "/js/main.1786e4fb380504a02582.hot-update.js",
+    "/js/main.19fae1912d0672ec2de6.hot-update.js": "/js/main.19fae1912d0672ec2de6.hot-update.js",
+    "/js/main.9f778815313dd17ea990.hot-update.js": "/js/main.9f778815313dd17ea990.hot-update.js",
+    "/js/main.9c6b0435cdf5642130f0.hot-update.js": "/js/main.9c6b0435cdf5642130f0.hot-update.js",
+    "/js/main.d4b9361c73535c1c9fcc.hot-update.js": "/js/main.d4b9361c73535c1c9fcc.hot-update.js",
+    "/js/main.9ba1689dbd6182a392c5.hot-update.js": "/js/main.9ba1689dbd6182a392c5.hot-update.js",
+    "/js/main.6ff950279ee2850d3e38.hot-update.js": "/js/main.6ff950279ee2850d3e38.hot-update.js",
+    "/js/main.b9036db1af5883e368f7.hot-update.js": "/js/main.b9036db1af5883e368f7.hot-update.js",
+    "/js/main.f2f180153841e408c342.hot-update.js": "/js/main.f2f180153841e408c342.hot-update.js",
+    "/js/main.d44ace2b797d29814e0b.hot-update.js": "/js/main.d44ace2b797d29814e0b.hot-update.js",
+    "/js/main.e9c5d32a329c3f426479.hot-update.js": "/js/main.e9c5d32a329c3f426479.hot-update.js",
+    "/js/main.335200a4015b20789260.hot-update.js": "/js/main.335200a4015b20789260.hot-update.js",
+    "/js/main.e8fd524031567bafcd85.hot-update.js": "/js/main.e8fd524031567bafcd85.hot-update.js",
+    "/js/main.560c9239961c69d32879.hot-update.js": "/js/main.560c9239961c69d32879.hot-update.js",
+    "/js/main.55d14b7524c9928b4cc2.hot-update.js": "/js/main.55d14b7524c9928b4cc2.hot-update.js",
+    "/js/main.7dec95a5940133f8c442.hot-update.js": "/js/main.7dec95a5940133f8c442.hot-update.js",
+    "/js/main.4801da054617712db2e3.hot-update.js": "/js/main.4801da054617712db2e3.hot-update.js",
+    "/js/main.1bd8c400e68c98d9721a.hot-update.js": "/js/main.1bd8c400e68c98d9721a.hot-update.js",
+    "/js/main.9aa73738cb5480bf91b3.hot-update.js": "/js/main.9aa73738cb5480bf91b3.hot-update.js",
+    "/js/main.65a58030423d10cc3032.hot-update.js": "/js/main.65a58030423d10cc3032.hot-update.js",
+    "/js/main.dc4ac1275fb9d6fa5e20.hot-update.js": "/js/main.dc4ac1275fb9d6fa5e20.hot-update.js",
+    "/js/main.e925afc5bb26f79cd7ef.hot-update.js": "/js/main.e925afc5bb26f79cd7ef.hot-update.js",
+    "/js/main.1d60a2a4329d53d56db4.hot-update.js": "/js/main.1d60a2a4329d53d56db4.hot-update.js",
+    "/js/main.86dcc65bb2b270ed2f0b.hot-update.js": "/js/main.86dcc65bb2b270ed2f0b.hot-update.js",
+    "/js/main.02a4b82ea83eb187c1ff.hot-update.js": "/js/main.02a4b82ea83eb187c1ff.hot-update.js",
+    "/js/main.1020ec0bb60553552fab.hot-update.js": "/js/main.1020ec0bb60553552fab.hot-update.js",
+    "/js/main.503ac3cabd0793d3686a.hot-update.js": "/js/main.503ac3cabd0793d3686a.hot-update.js",
+    "/js/main.72dd6eb33eea06a79e09.hot-update.js": "/js/main.72dd6eb33eea06a79e09.hot-update.js",
+    "/js/main.0ac83e2d51373634e487.hot-update.js": "/js/main.0ac83e2d51373634e487.hot-update.js",
+    "/js/main.2c1cb7e9cfb937e4ffb6.hot-update.js": "/js/main.2c1cb7e9cfb937e4ffb6.hot-update.js",
+    "/js/main.c96dbb1c4121a9443097.hot-update.js": "/js/main.c96dbb1c4121a9443097.hot-update.js",
+    "/js/main.0efacacb737b99bec58c.hot-update.js": "/js/main.0efacacb737b99bec58c.hot-update.js",
+    "/js/main.c5ea4f30b9b7f1df8744.hot-update.js": "/js/main.c5ea4f30b9b7f1df8744.hot-update.js",
+    "/js/main.21aaeeaaf06e5cbbc9ef.hot-update.js": "/js/main.21aaeeaaf06e5cbbc9ef.hot-update.js",
+    "/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"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 959f341a..fa8cdc8e 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -104,11 +104,11 @@
 
             // Redirect to database verify code
             if ( installation === 'setup-database') {
-                this.$router.push({name: 'PurchaseCode'})
+                //this.$router.push({name: 'PurchaseCode'})
 
             // Redirect to starting installation process
             } else if ( installation === 'setup-disclaimer' ) {
-                this.$router.push({name: 'InstallationDisclaimer'})
+                //this.$router.push({name: 'InstallationDisclaimer'})
             }
         },
         mounted() {
diff --git a/resources/js/components/Others/Forms/FormLabel.vue b/resources/js/components/Others/Forms/FormLabel.vue
index d32951f4..23832451 100644
--- a/resources/js/components/Others/Forms/FormLabel.vue
+++ b/resources/js/components/Others/Forms/FormLabel.vue
@@ -25,7 +25,7 @@
     .form-label {
         display: flex;
         align-items: center;
-        margin-bottom: 20px;
+        margin-bottom: 30px;
 
         .icon {
             margin-right: 10px;
diff --git a/resources/js/components/Others/Layout/PageTab.vue b/resources/js/components/Others/Layout/PageTab.vue
index cccfc98c..e41f9a5d 100644
--- a/resources/js/components/Others/Layout/PageTab.vue
+++ b/resources/js/components/Others/Layout/PageTab.vue
@@ -22,6 +22,4 @@
 <style lang="scss" scoped>
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
-
-
-</style>
+</style>
\ No newline at end of file
diff --git a/resources/js/components/Others/Layout/PageTabGroup.vue b/resources/js/components/Others/Layout/PageTabGroup.vue
index 72eb6220..597a5643 100644
--- a/resources/js/components/Others/Layout/PageTabGroup.vue
+++ b/resources/js/components/Others/Layout/PageTabGroup.vue
@@ -15,6 +15,6 @@
     @import '@assets/vue-file-manager/_mixins';
 
     .page-tab-group {
-        margin-bottom: 45px;
+        margin-bottom: 65px;
     }
 </style>
diff --git a/resources/js/components/Others/PageHeader.vue b/resources/js/components/Others/PageHeader.vue
index 43dee051..b96e6130 100644
--- a/resources/js/components/Others/PageHeader.vue
+++ b/resources/js/components/Others/PageHeader.vue
@@ -35,7 +35,7 @@
         width: 100%;
         position: sticky;
         top: 0;
-        padding: 20px 0;
+        padding-bottom: 20px;
 
         .title {
             @include font-size(18);
diff --git a/resources/js/components/Others/StorageItemDetail.vue b/resources/js/components/Others/StorageItemDetail.vue
index fd16afc7..7a8dc902 100644
--- a/resources/js/components/Others/StorageItemDetail.vue
+++ b/resources/js/components/Others/StorageItemDetail.vue
@@ -49,14 +49,14 @@
             .icon {
 
                 path, line, polyline, rect, circle, polygon {
-                    stroke: $theme;
+                    stroke: $text;
                 }
             }
 
             .storage-progress {
 
                 /deep/ span {
-                    background: $theme;
+                    background: $text;
                 }
             }
         }
diff --git a/resources/js/components/Sidebar/UserHeadline.vue b/resources/js/components/Sidebar/UserHeadline.vue
index f8221347..94ceae1f 100644
--- a/resources/js/components/Sidebar/UserHeadline.vue
+++ b/resources/js/components/Sidebar/UserHeadline.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="user-meta" v-if="app">
+    <div class="user-meta" v-if="user">
         <b class="name">{{ user.data.attributes.name }}</b>
         <span class="email">{{ user.data.attributes.email }}</span>
     </div>
diff --git a/resources/js/i18n/lang/en.json b/resources/js/i18n/lang/en.json
index 8d6faa3d..ceb86284 100644
--- a/resources/js/i18n/lang/en.json
+++ b/resources/js/i18n/lang/en.json
@@ -123,7 +123,7 @@
     },
     "storage": {
         "sec_capacity": "Storage Capacity",
-        "sec_details": "Capacity Used Details",
+        "sec_details": "Capacity Usage Details",
         "total_used": "Total used {used}",
         "total_capacity": "Your storage capacity {capacity}",
         "images": "Images",
diff --git a/resources/js/router.js b/resources/js/router.js
index 8db973cf..5d8951d8 100644
--- a/resources/js/router.js
+++ b/resources/js/router.js
@@ -29,12 +29,6 @@ import AdminMobileMenu from './views/Mobile/AdminMobileMenu'
 import Admin from './views/Admin'
 import Invoices from './views/Admin/Invoices'
 
-// Payment Methods
-import Gateways from './views/Admin/Gateways'
-import Gateway from './views/Admin/Gateways/Gateway'
-import GatewaySettings from './views/Admin/Gateways/GatewayTabs/GatewaySettings'
-import GatewayTransactions from './views/Admin/Gateways/GatewayTabs/GatewayTransactions'
-
 // Plans
 import Plans from './views/Admin/Plans'
 import Plan from './views/Admin/Plans/Plan'
@@ -79,17 +73,6 @@ const routesAdmin = [
             title: 'Admin'
         },
         children: [
-
-            // List Pages
-            {
-                name: 'Gateways',
-                path: '/admin/payment-methods',
-                component: Gateways,
-                meta: {
-                    requiresAuth: true,
-                    title: 'Payment Methods'
-                },
-            },
             {
                 name: 'Invoices',
                 path: '/admin/invoices',
@@ -204,35 +187,6 @@ const routesAdmin = [
                     },
                 ]
             },
-            {
-                name: 'Gateway',
-                path: '/admin/payment-method/:slug',
-                component: Gateway,
-                meta: {
-                    requiresAuth: true,
-                    title: 'Payment Method'
-                },
-                children: [
-                    {
-                        name: 'GatewayTransactions',
-                        path: '/admin/payment-methods/:slug/transactions',
-                        component: GatewayTransactions,
-                        meta: {
-                            requiresAuth: true,
-                            title: 'Transactions'
-                        },
-                    },
-                    {
-                        name: 'GatewaySettings',
-                        path: '/admin/payment-methods/:slug/settings',
-                        component: GatewaySettings,
-                        meta: {
-                            requiresAuth: true,
-                            title: 'Settings',
-                        },
-                    },
-                ]
-            },
             {
                 name: 'Plan',
                 path: '/admin/plan/:id',
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index 0a8d63e6..682dfe65 100644
--- a/resources/js/views/Admin.vue
+++ b/resources/js/views/Admin.vue
@@ -3,36 +3,6 @@
 
         <ContentSidebar>
 
-            <!--SaaS-->
-            <ContentGroup v-if="config.isSaaS" title="SaaS" class="navigator">
-                <div class="menu-list-wrapper vertical">
-                    <router-link :to="{name: 'Plans'}" class="menu-list-item link">
-                        <div class="icon">
-                            <database-icon size="17"></database-icon>
-                        </div>
-                        <div class="label">
-                            Plans
-                        </div>
-                    </router-link>
-                    <router-link :to="{name: 'Gateways'}" class="menu-list-item link">
-                        <div class="icon">
-                            <credit-card-icon size="17"></credit-card-icon>
-                        </div>
-                        <div class="label">
-                            Payment Methods
-                        </div>
-                    </router-link>
-                    <router-link :to="{name: 'Invoices'}" class="menu-list-item link">
-                        <div class="icon">
-                            <file-text-icon size="17"></file-text-icon>
-                        </div>
-                        <div class="label">
-                            Invoices
-                        </div>
-                    </router-link>
-                </div>
-            </ContentGroup>
-
             <!--Admin-->
             <ContentGroup :title="$t('admin_menu.admin_label')" class="navigator">
                 <div class="menu-list-wrapper vertical">
@@ -54,6 +24,28 @@
                     </router-link>
                 </div>
             </ContentGroup>
+
+            <!--SaaS-->
+            <ContentGroup v-if="config.isSaaS" title="SaaS" class="navigator">
+                <div class="menu-list-wrapper vertical">
+                    <router-link :to="{name: 'Plans'}" class="menu-list-item link">
+                        <div class="icon">
+                            <database-icon size="17"></database-icon>
+                        </div>
+                        <div class="label">
+                            Plans
+                        </div>
+                    </router-link>
+                    <router-link :to="{name: 'Invoices'}" class="menu-list-item link">
+                        <div class="icon">
+                            <file-text-icon size="17"></file-text-icon>
+                        </div>
+                        <div class="label">
+                            Invoices
+                        </div>
+                    </router-link>
+                </div>
+            </ContentGroup>
         </ContentSidebar>
 
         <router-view/>
diff --git a/resources/js/views/Admin/Gateways/Gateway.vue b/resources/js/views/Admin/Gateways/Gateway.vue
deleted file mode 100644
index 1e0119e8..00000000
--- a/resources/js/views/Admin/Gateways/Gateway.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-    <div id="single-page">
-        <div id="page-content" v-if="! isLoading">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
-
-            <div class="content-page" v-if="gateway">
-
-                <!--User thumbnail-->
-                <div class="user-thumbnail">
-                    <div class="avatar">
-                        <img :src="gateway.attributes.logo" :alt="gateway.attributes.name">
-                    </div>
-                    <div class="info">
-                        <b class="name">{{ gateway.attributes.name }}</b>
-                        <span class="email">Payment Gateway</span>
-                    </div>
-                </div>
-
-                <!--Page Tab links-->
-                <div class="menu-list-wrapper horizontal">
-                    <router-link replace :to="{name: 'GatewaySettings', params: {name: gateway.attributes.slug}}" class="menu-list-item link">
-                        <div class="icon">
-                            <settings-icon size="17"></settings-icon>
-                        </div>
-                        <div class="label">
-                            Settings
-                        </div>
-                    </router-link>
-
-                    <router-link replace :to="{name: 'GatewayTransactions', params: {name: gateway.attributes.slug}}"
-                                 class="menu-list-item link">
-                        <div class="icon">
-                            <credit-card-icon size="17"></credit-card-icon>
-                        </div>
-                        <div class="label">
-                            Transactions
-                        </div>
-                    </router-link>
-                </div>
-
-                <!--Router Content-->
-                <router-view :gateway="gateway"/>
-            </div>
-        </div>
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
-        </div>
-    </div>
-</template>
-
-<script>
-    import {CreditCardIcon, SettingsIcon} 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 {mapGetters} from 'vuex'
-    import axios from 'axios'
-
-    export default {
-        name: 'Gateway',
-        components: {
-            SettingsIcon,
-            CreditCardIcon,
-            SectionTitle,
-            MobileHeader,
-            PageHeader,
-            Spinner,
-        },
-        data() {
-            return {
-                isLoading: false,
-                gateway: undefined,
-            }
-        },
-        created() {
-            axios.get('/api/gateways/' + this.$route.params.slug)
-                .then(response => {
-                    this.gateway = response.data.data
-                    this.isLoading = false
-                })
-        }
-    }
-</script>
-
-<style lang="scss" scoped>
-    @import '@assets/vue-file-manager/_variables';
-    @import '@assets/vue-file-manager/_mixins';
-
-    .user-thumbnail {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        .avatar {
-            margin-right: 20px;
-
-            img {
-                line-height: 0;
-                width: 62px;
-                height: 62px;
-                border-radius: 12px;
-            }
-        }
-
-        .info {
-
-            .name {
-                display: block;
-                @include font-size(17);
-                line-height: 1;
-            }
-
-            .email {
-                color: $text-muted;
-                @include font-size(14);
-            }
-        }
-    }
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .user-thumbnail {
-
-            .info {
-
-                .email {
-                    color: $dark_mode_text_secondary;
-                }
-            }
-        }
-    }
-
-</style>
diff --git a/resources/js/views/Admin/Gateways/GatewayTabs/GatewaySettings.vue b/resources/js/views/Admin/Gateways/GatewayTabs/GatewaySettings.vue
deleted file mode 100644
index 4f75f75e..00000000
--- a/resources/js/views/Admin/Gateways/GatewayTabs/GatewaySettings.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-    <PageTab>
-        <ValidationObserver v-if="gateway.attributes.slug === 'paypal'" ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
-
-            <PageTabGroup>
-                <div class="block-wrapper">
-                    <div class="input-wrapper">
-                        <div class="inline-wrapper">
-                            <div class="switch-label">
-                                <label class="input-label">Status:</label>
-                                <small class="input-help">Status of your payment gateway on website.</small>
-                            </div>
-                            <SwitchInput @input="$updateText('/gateways/paypal', 'status', paymentGateway.attributes.status)" v-model="paymentGateway.attributes.status" class="switch" :state="paymentGateway.attributes.status"/>
-                        </div>
-                    </div>
-                </div>
-                <div class="block-wrapper">
-                    <div class="input-wrapper">
-                        <div class="inline-wrapper">
-                            <div class="switch-label">
-                                <label class="input-label">Sandbox Mode:</label>
-                                <small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
-                            </div>
-                            <SwitchInput @input="$updateText('/gateways/paypal', 'sandbox', paymentGateway.attributes.sandbox)" v-model="paymentGateway.attributes.sandbox" class="switch" :state="paymentGateway.attributes.sandbox"/>
-                        </div>
-                    </div>
-                </div>
-            </PageTabGroup>
-            <PageTabGroup>
-                    <b class="form-group-label">PayPal Secrets</b>
-
-                    <!--Paypal Client ID-->
-                    <div class="block-wrapper">
-                        <label>Paypal Client ID</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ClientID" rules="required"
-                                            v-slot="{ errors }">
-                            <input @keyup="$updateText('/gateways/paypal', 'client_id', paymentGateway.attributes.client_id)" v-model="paymentGateway.attributes.client_id" placeholder="Paste PayPal client id here" type="text" />
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </ValidationProvider>
-                    </div>
-
-                    <!--Paypal Secret-->
-                    <div class="block-wrapper">
-                        <label>Paypal Secret</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="PayPalSecret" rules="required"
-                                            v-slot="{ errors }">
-                            <input @keyup="$updateText('/gateways/paypal', 'secret', paymentGateway.attributes.secret)" v-model="paymentGateway.attributes.secret" placeholder="Paste PayPal secret here" type="text" />
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </ValidationProvider>
-                    </div>
-
-                    <!--Paypal Webhook ID-->
-                    <div class="block-wrapper">
-                        <label>Paypal Webhook ID</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="PayPalSecret" rules="required"
-                                            v-slot="{ errors }">
-                            <input @keyup="$updateText('/gateways/paypal', 'webhook', paymentGateway.attributes.webhook)" v-model="paymentGateway.attributes.webhook" placeholder="Paste PayPal webhook here" type="text" />
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </ValidationProvider>
-                    </div>
-            </PageTabGroup>
-        </ValidationObserver>
-
-        <ValidationObserver v-if="gateway.attributes.slug === 'stripe'" ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
-            <PageTabGroup>
-                <div class="block-wrapper">
-                    <div class="input-wrapper">
-                        <div class="inline-wrapper">
-                            <div class="switch-label">
-                                <label class="input-label">Status:</label>
-                                <small class="input-help">Status of your payment gateway on website.</small>
-                            </div>
-                            <SwitchInput @input="$updateText('/gateways/stripe', 'status', paymentGateway.attributes.status)" v-model="paymentGateway.attributes.status" class="switch" :state="paymentGateway.attributes.status"/>
-                        </div>
-                    </div>
-                </div>
-                <div class="block-wrapper">
-                    <div class="input-wrapper">
-                        <div class="inline-wrapper">
-                            <div class="switch-label">
-                                <label class="input-label">Sandbox Mode:</label>
-                                <small class="input-help">With sandbox mode on, you can test your payment process on you website.</small>
-                            </div>
-                            <SwitchInput @input="$updateText('/gateways/stripe', 'sandbox', paymentGateway.attributes.sandbox)" v-model="paymentGateway.attributes.sandbox" class="switch" :state="paymentGateway.attributes.sandbox"/>
-                        </div>
-                    </div>
-                </div>
-            </PageTabGroup>
-            <PageTabGroup>
-                    <b class="form-group-label">Stripe Secret</b>
-
-                    <!--Stripe Client ID-->
-                    <div class="block-wrapper">
-                        <label>Stripe Client ID</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ClientID" rules="required" v-slot="{ errors }">
-                            <input @keyup="$updateText('/gateways/stripe', 'client_id', paymentGateway.attributes.client_id)" v-model="paymentGateway.attributes.client_id" placeholder="Paste stripe client id here" type="text" />
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </ValidationProvider>
-                    </div>
-
-                    <!--Stripe Secret-->
-                    <div class="block-wrapper">
-                        <label>Stripe Secret</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="StripeSecret" rules="required"
-                                            v-slot="{ errors }">
-                            <input @keyup="$updateText('/gateways/stripe', 'secret', paymentGateway.attributes.secret)" v-model="paymentGateway.attributes.secret" placeholder="Paste stripe secret here" type="text" />
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </ValidationProvider>
-                    </div>
-            </PageTabGroup>
-        </ValidationObserver>
-    </PageTab>
-</template>
-
-<script>
-    import SwitchInput from '@/components/Others/Forms/SwitchInput'
-    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
-    import PageTab from '@/components/Others/Layout/PageTab'
-    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import StorageItemDetail from '@/components/Others/StorageItemDetail'
-    import SelectInput from '@/components/Others/Forms/SelectInput'
-    import ButtonBase from '@/components/FilesView/ButtonBase'
-    import SetupBox from '@/components/Others/Forms/SetupBox'
-    import {required} from 'vee-validate/dist/rules'
-
-    export default {
-        name: 'GatewaySettings',
-        props: [
-            'gateway'
-        ],
-        components: {
-            SwitchInput,
-            PageTabGroup,
-            PageTab,
-            ValidationProvider,
-            ValidationObserver,
-            StorageItemDetail,
-            SelectInput,
-            ButtonBase,
-            SetupBox,
-            required,
-        },
-        data() {
-            return {
-                isLoading: false,
-                isSendingRequest: false,
-                paymentGateway: undefined,
-            }
-        },
-        created() {
-            this.paymentGateway = this.gateway
-        }
-    }
-</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/Gateways/GatewayTabs/GatewayTransactions.vue b/resources/js/views/Admin/Gateways/GatewayTabs/GatewayTransactions.vue
deleted file mode 100644
index a1985a8f..00000000
--- a/resources/js/views/Admin/Gateways/GatewayTabs/GatewayTransactions.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-    <PageTab>
-        <PageTabGroup v-if="transactions.length > 0">
-            <DatatableWrapper :paginator="true" :columns="columns" :data="transactions" class="table">
-                <template scope="{ row }">
-                    <tr>
-                        <td>
-                            <a :href="'/invoice/' + row.data.attributes.token" target="_blank" class="cell-item">
-                                {{ row.data.attributes.order }}
-                            </a>
-                        </td>
-                        <td>
-                                <span class="cell-item">
-                                    ${{ row.data.attributes.total }}
-                                </span>
-                        </td>
-                        <td>
-                                <span class="cell-item">
-                                    {{ row.data.attributes.bag[0].description }}
-                                </span>
-                        </td>
-                        <td>
-                                <span class="cell-item">
-                                    {{ row.data.attributes.created_at_formatted }}
-                                </span>
-                        </td>
-                        <td>
-                            <router-link :to="{name: 'UserInvoices', params: {id: row.relationships.user.data.id}}">
-                                <DatatableCellImage
-                                        image-size="small"
-                                        :image="row.relationships.user.data.attributes.avatar"
-                                        :title="row.relationships.user.data.attributes.name"
-                                />
-                            </router-link>
-                        </td>
-                        <td>
-                            <div class="action-icons">
-                                <a :href="'/invoice/' + row.data.attributes.token" target="_blank">
-                                    <external-link-icon size="15" class="icon"></external-link-icon>
-                                </a>
-                            </div>
-                        </td>
-                    </tr>
-                </template>
-            </DatatableWrapper>
-        </PageTabGroup>
-        <PageTabGroup v-else>
-            You don't have any transactions yet.
-        </PageTabGroup>
-    </PageTab>
-</template>
-
-<script>
-    import DatatableCellImage from '@/components/Others/Tables/DatatableCellImage'
-    import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
-    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
-    import PageTab from '@/components/Others/Layout/PageTab'
-    import {ExternalLinkIcon} from "vue-feather-icons";
-    import axios from 'axios'
-
-    export default {
-        name: 'GatewayTransactions',
-        components: {
-            DatatableCellImage,
-            ExternalLinkIcon,
-            DatatableWrapper,
-            PageTabGroup,
-            PageTab,
-        },
-        data() {
-            return {
-                isLoading: false,
-                transactions: [],
-                columns: [
-                    {
-                        label: 'Invoice Number',
-                        field: 'attributes.total',
-                        sortable: true
-                    },
-                    {
-                        label: 'Total',
-                        field: 'attributes.total',
-                        sortable: true
-                    },
-                    {
-                        label: 'Plan',
-                        field: 'attributes.plan',
-                        sortable: true
-                    },
-                    {
-                        label: 'Payed',
-                        field: 'attributes.created_at',
-                        sortable: true
-                    },
-                    {
-                        label: 'User',
-                        field: 'relationships.user.data.id',
-                        sortable: true
-                    },
-                    {
-                        label: this.$t('admin_page_user.table.action'),
-                        field: 'data.action',
-                        sortable: false
-                    },
-                ],
-            }
-        },
-        created() {
-            axios.get('/api/gateways/' + this.$route.params.slug + '/transactions')
-                .then(response => {
-                    this.transactions = response.data.data
-                    this.isLoading = false
-                })
-        }
-    }
-</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/PlanCreate.vue b/resources/js/views/Admin/Plans/PlanCreate.vue
index cc09e545..bcb0f866 100644
--- a/resources/js/views/Admin/Plans/PlanCreate.vue
+++ b/resources/js/views/Admin/Plans/PlanCreate.vue
@@ -2,15 +2,13 @@
     <div id="single-page">
         <div id="page-content" class="small-width">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+            <!--<PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>-->
 
             <div class="content-page">
-                <ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form">
+                <ValidationObserver @submit.prevent="createPlan" ref="createPlan" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
 
                     <div class="form-group">
-                        <b class="form-group-label">
-                            Plan Details
-                        </b>
+                        <FormLabel>Plan Details</FormLabel>
 
                         <!--Name-->
                         <div class="block-wrapper">
@@ -30,6 +28,9 @@
                             </ValidationProvider>
                         </div>
 
+                        <FormLabel>Plan Pricing</FormLabel>
+
+
                         <!--Price-->
                         <div class="block-wrapper">
                             <label>Price:</label>
@@ -66,6 +67,7 @@
     import SelectInput from '@/components/Others/Forms/SelectInput'
     import ImageInput from '@/components/Others/Forms/ImageInput'
     import MobileHeader from '@/components/Mobile/MobileHeader'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import SectionTitle from '@/components/Others/SectionTitle'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import PageHeader from '@/components/Others/PageHeader'
@@ -85,6 +87,7 @@
             ButtonBase,
             ImageInput,
             PageHeader,
+            FormLabel,
             required,
         },
         data() {
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue
index eb2c9bfe..a1ea26fd 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue
@@ -1,36 +1,37 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup>
-            <SetupBox
-                    theme="danger"
-                    title="Delete Plan"
-                    description="You can delete plan, but, pay attention!"
-            >
-                <ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form"
-                                    class="form block-form">
-                    <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
-                                        name="Plan name" :rules="'required|is:' + plan.attributes.name">
-                        <label>{{ $t('admin_page_user.label_delete_user', {user: plan.attributes.name}) }}:</label>
-                        <div class="single-line-form">
-                            <input v-model="planName"
-                                   placeholder="Type plan name"
-                                   type="text"
-                                   :class="{'is-error': errors[0]}"
-                            />
-                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
-                                        button-style="danger" class="submit-button">
-                                Delete Plan
-                            </ButtonBase>
-                        </div>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </ValidationObserver>
-            </SetupBox>
+            <FormLabel>Delete Plan</FormLabel>
+            <InfoBox>
+                <p>You can delete plan, but, pay attention!</p>
+            </InfoBox>
+            <ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form"
+                                class="form block-form">
+                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
+                                    name="Plan name" :rules="'required|is:' + plan.attributes.name">
+                    <label>{{ $t('admin_page_user.label_delete_user', {user: plan.attributes.name}) }}:</label>
+                    <div class="single-line-form">
+                        <input v-model="planName"
+                               placeholder="Type plan name"
+                               type="text"
+                               :class="{'is-error': errors[0]}"
+                        />
+                        <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
+                                    button-style="danger" class="submit-button">
+                            Delete Plan
+                        </ButtonBase>
+                    </div>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
         </PageTabGroup>
     </PageTab>
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
@@ -46,6 +47,8 @@
             'plan'
         ],
         components: {
+            FormLabel,
+            InfoBox,
             PageTabGroup,
             PageTab,
             ValidationProvider,
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
index 6c90c45f..2cf2e426 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
@@ -1,7 +1,8 @@
 <template>
     <PageTab>
-        <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
+        <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
             <PageTabGroup>
+                <FormLabel>Plan details</FormLabel>
 
                 <!--Visible-->
                 <div class="block-wrapper">
@@ -49,6 +50,7 @@
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import SwitchInput from '@/components/Others/Forms/SwitchInput'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
@@ -65,6 +67,7 @@
             'plan'
         ],
         components: {
+            FormLabel,
             SwitchInput,
             PageTabGroup,
             PageTab,
diff --git a/resources/js/views/Admin/Users/UserCreate.vue b/resources/js/views/Admin/Users/UserCreate.vue
index 5795bc9e..021087e6 100644
--- a/resources/js/views/Admin/Users/UserCreate.vue
+++ b/resources/js/views/Admin/Users/UserCreate.vue
@@ -8,9 +8,7 @@
                 <ValidationObserver @submit.prevent="createUser" ref="createUser" v-slot="{ invalid }" tag="form" class="form block-form">
 
                     <div class="form-group">
-                        <b class="form-group-label">
-                            {{ $t('admin_page_user.create_user.group_details') }}
-                        </b>
+                        <FormLabel>{{ $t('admin_page_user.create_user.group_details') }}</FormLabel>
 
                         <!--Avatar-->
                         <div class="block-wrapper">
@@ -59,10 +57,7 @@
                     </div>
 
                     <div class="form-group">
-                        <b class="form-group-label">
-                            {{ $t('admin_page_user.create_user.group_settings') }}
-                        </b>
-
+                        <FormLabel>{{ $t('admin_page_user.create_user.group_settings') }}</FormLabel>
 
                         <!--User Role-->
                         <div class="block-wrapper">
@@ -98,6 +93,7 @@
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import SelectInput from '@/components/Others/Forms/SelectInput'
     import ImageInput from '@/components/Others/Forms/ImageInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import SectionTitle from '@/components/Others/SectionTitle'
     import ButtonBase from '@/components/FilesView/ButtonBase'
@@ -118,6 +114,7 @@
             ButtonBase,
             ImageInput,
             PageHeader,
+            FormLabel,
             required,
         },
         computed: {
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
index af93e818..751a1f4b 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
@@ -1,36 +1,35 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup>
-            <SetupBox
-                    theme="danger"
-                    :title="$t('user_box_delete.title')"
-                    :description="$t('user_box_delete.description')"
-            >
-                <ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form"
-                                    class="form block-form">
-                    <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive"
-                                        name="User name" :rules="'required|is:' + user.data.attributes.name">
-                        <label>{{ $t('admin_page_user.label_delete_user', {user: user.data.attributes.name}) }}:</label>
-                        <div class="single-line-form">
-                            <input v-model="userName"
-                                   :placeholder="$t('admin_page_user.placeholder_delete_user')"
-                                   type="text"
-                                   :class="{'is-error': errors[0]}"
-                            />
-                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
-                                        button-style="danger" class="submit-button">
-                                {{ $t('admin_page_user.delete_user') }}
-                            </ButtonBase>
-                        </div>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </ValidationObserver>
-            </SetupBox>
+            <FormLabel>{{ $t('user_box_delete.title') }}</FormLabel>
+            <InfoBox>
+                <p>{{ $t('user_box_delete.description') }}</p>
+            </InfoBox>
+            <ValidationObserver ref="deleteUser" @submit.prevent="deleteUser" v-slot="{ invalid }" tag="form" class="form block-form">
+                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="User name" :rules="'required|is:' + user.data.attributes.name">
+                    <label>{{ $t('admin_page_user.label_delete_user', {user: user.data.attributes.name}) }}:</label>
+                    <div class="single-line-form">
+                        <input v-model="userName"
+                               :placeholder="$t('admin_page_user.placeholder_delete_user')"
+                               type="text"
+                               :class="{'is-error': errors[0]}"
+                        />
+                        <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
+                                    button-style="danger" class="submit-button">
+                            {{ $t('admin_page_user.delete_user') }}
+                        </ButtonBase>
+                    </div>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
         </PageTabGroup>
     </PageTab>
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
@@ -46,6 +45,8 @@
             'user'
         ],
         components: {
+            FormLabel,
+            InfoBox,
             PageTabGroup,
             PageTab,
             ValidationProvider,
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
index 451be535..067bfb8e 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
@@ -1,36 +1,37 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
 
         <!--Change role-->
         <PageTabGroup>
-            <SetupBox
-                    theme="base"
-                    :title="$t('user_box_role.title')"
-                    :description="$t('user_box_role.description')"
-            >
-                <ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form"
-                                    class="form block-form">
-                    <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Role"
-                                        rules="required">
-                        <label>{{ $t('admin_page_user.select_role') }}:</label>
-                        <div class="single-line-form">
-                            <SelectInput v-model="userRole" :options="roles"
-                                         :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
-                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
-                                        button-style="theme" class="submit-button">
-                                {{ $t('admin_page_user.save_role') }}
-                            </ButtonBase>
-                        </div>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </ValidationObserver>
-            </SetupBox>
+            <FormLabel>{{ $t('user_box_role.title') }}</FormLabel>
+
+            <InfoBox>
+                <p>{{ $t('user_box_role.description') }}</p>
+            </InfoBox>
+
+            <ValidationObserver ref="changeRole" @submit.prevent="changeRole" v-slot="{ invalid }" tag="form"
+                                class="form block-form">
+                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Role"
+                                    rules="required">
+                    <label>{{ $t('admin_page_user.select_role') }}:</label>
+                    <div class="single-line-form">
+                        <SelectInput v-model="userRole" :options="roles"
+                                     :placeholder="$t('admin_page_user.select_role')" :isError="errors[0]"/>
+                        <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
+                                    button-style="theme" class="submit-button">
+                            {{ $t('admin_page_user.save_role') }}
+                        </ButtonBase>
+                    </div>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
         </PageTabGroup>
 
         <!--Personal Information-->
         <PageTabGroup>
             <div class="form block-form">
-                <b class="form-group-label">{{ $t('admin_page_user.label_person_info') }}</b>
+                <FormLabel>{{ $t('admin_page_user.label_person_info') }}</FormLabel>
+
                 <div class="wrapper-inline">
 
                     <!--Email-->
@@ -63,7 +64,8 @@
         <!--Billing Information-->
         <PageTabGroup>
             <div class="form block-form">
-                <b class="form-group-label">Billing Information</b>
+                <FormLabel>Billing Information</FormLabel>
+
                 <div class="block-wrapper">
                     <label>Name:</label>
                     <div class="input-wrapper">
@@ -135,11 +137,13 @@
 </template>
 
 <script>
+    import InfoBox from '@/components/Others/Forms/InfoBox'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import StorageItemDetail from '@/components/Others/StorageItemDetail'
     import SelectInput from '@/components/Others/Forms/SelectInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import SetupBox from '@/components/Others/Forms/SetupBox'
     import {required} from 'vee-validate/dist/rules'
@@ -155,6 +159,8 @@
         components: {
             PageTabGroup,
             PageTab,
+            InfoBox,
+            FormLabel,
             ValidationProvider,
             ValidationObserver,
             StorageItemDetail,
diff --git a/resources/js/views/Admin/Users/UserTabs/UserPassword.vue b/resources/js/views/Admin/Users/UserTabs/UserPassword.vue
index ec8160a2..db66c5e7 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserPassword.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserPassword.vue
@@ -1,21 +1,21 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup>
-            <SetupBox
-                    theme="base"
-                    :title="$t('user_box_password.title')"
-                    :description="$t('user_box_password.description')"
-            >
-                <ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest"
-                            :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
-                    {{ $t('admin_page_user.send_password_link') }}
-                </ButtonBase>
-            </SetupBox>
+            <FormLabel>{{ $t('user_box_password.title') }}</FormLabel>
+            <InfoBox>
+                <p>{{ $t('user_box_password.description') }}</p>
+            </InfoBox>
+            <ButtonBase @click.native="requestPasswordResetEmail" :loading="isSendingRequest"
+                        :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
+                {{ $t('admin_page_user.send_password_link') }}
+            </ButtonBase>
         </PageTabGroup>
     </PageTab>
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
@@ -28,6 +28,8 @@
     export default {
         name: 'UserPassword',
         components: {
+            FormLabel,
+            InfoBox,
             PageTabGroup,
             PageTab,
             ValidationProvider,
diff --git a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
index b72e91d9..86670d3a 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
@@ -1,41 +1,38 @@
 <template>
-    <PageTab v-if="storage">
-        <PageTabGroup>
-            <SetupBox
-                    v-if="! config.isSaaS || ! user.data.attributes.subscription"
-                    theme="base"
-                    :title="$t('user_box_storage.title')"
-                    :description="$t('user_box_storage.description')"
-            >
-                <ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form" class="form block-form">
+    <PageTab class="form-fixed-width" v-if="storage">
+        <PageTabGroup v-if="! config.isSaaS || ! user.data.attributes.subscription">
+            <FormLabel>{{ $t('user_box_storage.title') }}</FormLabel>
+            <InfoBox>
+                <p>{{ $t('user_box_storage.description') }}</p>
+            </InfoBox>
+            <ValidationObserver ref="changeStorageCapacity" @submit.prevent="changeStorageCapacity" v-slot="{ invalid }" tag="form" class="form block-form">
 
-                    <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
-                        <label>{{ $t('admin_page_user.label_change_capacity') }}:</label>
-                        <div class="single-line-form">
-                            <input v-model="capacity"
-                                   :placeholder="$t('admin_page_user.label_change_capacity')"
-                                   type="number"
-                                   min="1"
-                                   max="999999999"
-                                   :class="{'is-error': errors[0]}"
-                            />
-                            <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
-                                {{ $t('admin_page_user.change_capacity') }}
-                            </ButtonBase>
-                        </div>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </ValidationObserver>
-            </SetupBox>
+                <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
+                    <label>{{ $t('admin_page_user.label_change_capacity') }}:</label>
+                    <div class="single-line-form">
+                        <input v-model="capacity"
+                               :placeholder="$t('admin_page_user.label_change_capacity')"
+                               type="number"
+                               min="1"
+                               max="999999999"
+                               :class="{'is-error': errors[0]}"
+                        />
+                        <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
+                            {{ $t('admin_page_user.change_capacity') }}
+                        </ButtonBase>
+                    </div>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
+        </PageTabGroup>
+        <PageTabGroup>
+            <FormLabel>{{ $t('storage.sec_details') }}</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})"
             />
-        </PageTabGroup>
-        <PageTabGroup>
-            <b class="form-group-label">{{ $t('storage.sec_details') }}</b>
             <StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storage.meta.images.percentage" :used="storage.meta.images.used" />
             <StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storage.meta.videos.percentage" :used="storage.meta.videos.used" />
             <StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storage.meta.audios.percentage" :used="storage.meta.audios.used" />
@@ -46,6 +43,9 @@
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
@@ -62,7 +62,9 @@
         props: ['user'],
         components: {
             PageTabGroup,
+            FormLabel,
             PageTab,
+            InfoBox,
             ValidationProvider,
             ValidationObserver,
             StorageItemDetail,
diff --git a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
index 619dd182..f4f6f77b 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
@@ -1,5 +1,5 @@
 <template>
-    <PageTab :is-loading="isLoading">
+    <PageTab class="form-fixed-width" :is-loading="isLoading">
         <PageTabGroup v-if="subscription">
 
             <!--Info about active subscription-->
@@ -23,7 +23,7 @@
                 </ListInfo>
             </div>
         </PageTabGroup>
-        <PageTabGroup v-else>
+        <PageTabGroup v-if="! subscription">
             User don't have any subscription yet.
         </PageTabGroup>
     </PageTab>
@@ -37,7 +37,7 @@
     import PageTab from '@/components/Others/Layout/PageTab'
     import ListInfo from '@/components/Others/ListInfo'
     import {ExternalLinkIcon} from "vue-feather-icons"
-    import { mapGetters } from 'vuex'
+    import {mapGetters} from 'vuex'
     import {events} from "@/bus"
     import axios from 'axios'
 
@@ -73,7 +73,12 @@
                 .then(response => {
                     this.subscription = response.data.data
                     this.isLoading = false
-                })
+                }).catch(error => {
+
+                    if (error.response.status == 404) {
+                        this.isLoading = false
+                }
+            })
         }
     }
 </script>
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index b070338f..c3b60a64 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -1,41 +1,11 @@
 <template>
-    <div id="single-page" v-if="user">
-        <div id="page-content" class="medium-width" v-if="! isLoading">
-            <MobileHeader :title="$router.currentRoute.meta.title"/>
-            <PageHeader :title="$router.currentRoute.meta.title"/>
+    <section id="viewport">
 
-            <div class="content-page">
+        <ContentSidebar>
 
-                <!--User thumbnail-->
-                <div class="page-detail-headline">
-                    <div class="user-thumbnail">
-                        <div class="avatar">
-                            <UserImageInput
-                                    v-model="avatar"
-                                    :avatar="user.data.attributes.avatar"
-                            />
-                        </div>
-                        <div class="info">
-                            <b class="name">
-                                {{ user.data.attributes.name }}
-                                <ColorLabel v-if="config.isSaaS" :color="subscriptionColor">
-                                    {{ subscriptionStatus }}
-                                </ColorLabel>
-                            </b>
-                            <span class="email">{{ user.data.attributes.email }}</span>
-                        </div>
-                    </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">
-                                Upgrade Plan
-                            </ButtonBase>
-                        </router-link>
-                    </div>
-                </div>
-
-                <!--Page Tab links-->
-                <div class="menu-list-wrapper horizontal">
+            <!--Settings-->
+            <ContentGroup title="Menu" class="navigator">
+                <div class="menu-list-wrapper vertical">
                     <router-link replace :to="{name: 'Profile'}" class="menu-list-item link">
                         <div class="icon">
                             <user-icon size="17"></user-icon>
@@ -54,33 +24,6 @@
                         </div>
                     </router-link>
 
-                    <router-link v-if="canShowSubscriptionSettings" replace :to="{name: 'Subscription'}" class="menu-list-item link">
-                        <div class="icon">
-                            <cloud-icon size="17"></cloud-icon>
-                        </div>
-                        <div class="label">
-                            Subscription
-                        </div>
-                    </router-link>
-
-                    <router-link v-if="canShowSubscriptionSettings" replace :to="{name: 'PaymentMethods'}" class="menu-list-item link">
-                        <div class="icon">
-                            <credit-card-icon size="17"></credit-card-icon>
-                        </div>
-                        <div class="label">
-                            Payment Cards
-                        </div>
-                    </router-link>
-
-                    <router-link v-if="canShowSubscriptionSettings" replace :to="{name: 'Invoice'}" class="menu-list-item link">
-                        <div class="icon">
-                            <file-text-icon size="17"></file-text-icon>
-                        </div>
-                        <div class="label">
-                            Invoices
-                        </div>
-                    </router-link>
-
                     <router-link replace :to="{name: 'Password'}" class="menu-list-item link">
                         <div class="icon">
                             <lock-icon size="17"></lock-icon>
@@ -90,18 +33,88 @@
                         </div>
                     </router-link>
                 </div>
+            </ContentGroup>
+            <ContentGroup title="Subscription" class="navigator" v-if="canShowSubscriptionSettings">
+                <div class="menu-list-wrapper vertical">
+                    <router-link replace :to="{name: 'Subscription'}" class="menu-list-item link">
+                        <div class="icon">
+                            <cloud-icon size="17"></cloud-icon>
+                        </div>
+                        <div class="label">
+                            Subscription
+                        </div>
+                    </router-link>
 
-                <!--Router Content-->
-                <router-view :user="user" />
+                    <router-link replace :to="{name: 'PaymentMethods'}" class="menu-list-item link">
+                        <div class="icon">
+                            <credit-card-icon size="17"></credit-card-icon>
+                        </div>
+                        <div class="label">
+                            Payment Cards
+                        </div>
+                    </router-link>
+
+                    <router-link replace :to="{name: 'Invoice'}" class="menu-list-item link">
+                        <div class="icon">
+                            <file-text-icon size="17"></file-text-icon>
+                        </div>
+                        <div class="label">
+                            Invoices
+                        </div>
+                    </router-link>
+                </div>
+            </ContentGroup>
+        </ContentSidebar>
+
+        <div id="single-page" v-if="user">
+            <div id="page-content" class="medium-width" v-if="! isLoading">
+                <MobileHeader :title="$router.currentRoute.meta.title"/>
+
+                <div class="content-page">
+
+                    <!--User thumbnail-->
+                    <div class="page-detail-headline">
+                        <div class="user-thumbnail">
+                            <div class="avatar">
+                                <UserImageInput
+                                        v-model="avatar"
+                                        :avatar="user.data.attributes.avatar"
+                                />
+                            </div>
+                            <div class="info">
+                                <b class="name">
+                                    {{ user.data.attributes.name }}
+                                    <ColorLabel v-if="config.isSaaS" :color="subscriptionColor">
+                                        {{ subscriptionStatus }}
+                                    </ColorLabel>
+                                </b>
+                                <span class="email">{{ user.data.attributes.email }}</span>
+                            </div>
+                        </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">
+                                    Upgrade Plan
+                                </ButtonBase>
+                            </router-link>
+                        </div>
+                    </div>
+
+                    <!--Router Content-->
+                    <router-view :user="user" />
+                </div>
+            </div>
+            <div id="loader" v-if="isLoading">
+                <Spinner></Spinner>
             </div>
         </div>
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
-        </div>
-    </div>
+    </section>
+
 </template>
 
 <script>
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
     import UserImageInput from '@/components/Others/UserImageInput'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import ButtonBase from '@/components/FilesView/ButtonBase'
@@ -122,6 +135,8 @@
     export default {
         name: 'Settings',
         components: {
+            ContentSidebar,
+            ContentGroup,
             CloudIcon,
             ButtonBase,
             CreditCardIcon,
@@ -163,6 +178,7 @@
     .page-detail-headline {
         display: flex;
         justify-content: space-between;
+        margin-bottom: 50px;
     }
 
     .user-thumbnail {
diff --git a/resources/js/views/Upgrade/UpgradeBilling.vue b/resources/js/views/Upgrade/UpgradeBilling.vue
index 3596343b..d09e7346 100644
--- a/resources/js/views/Upgrade/UpgradeBilling.vue
+++ b/resources/js/views/Upgrade/UpgradeBilling.vue
@@ -2,7 +2,6 @@
     <div id="single-page">
         <div id="page-content" class="large-width center-page" v-show="! isLoading">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
-
             <div class="content-page">
 
                 <div class="plan-title">
@@ -17,7 +16,7 @@
                     <div class="steps">
 
                         <div class="payment-card">
-                            <b class="form-group-label">Payment Card:</b>
+                            <FormLabel>Payment Card</FormLabel>
 
                             <!-- Pay by new credit card -->
                             <div class="register-card" v-show="! defaultPaymentMethod || payByNewCard">
@@ -76,7 +75,8 @@
                             </div>
                         </div>
                         <div class="billing" v-if="billing">
-                            <b class="form-group-label">Billing Information:</b>
+                            <FormLabel>Billing Information</FormLabel>
+
                             <ValidationObserver ref="order" v-slot="{ invalid }" tag="form" class="form block-form">
                                 <div class="form block-form">
 
@@ -184,7 +184,7 @@
                         </div>
                     </div>
                     <div class="summary">
-                        <b class="form-group-label">Order Summary:</b>
+                        <FormLabel>Order Summary</FormLabel>
                         <div class="summary-list" :class="{'is-error': isError}" v-if="requestedPlan">
                             <div class="row">
                                 <div class="cell">
@@ -226,6 +226,7 @@
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import PlanPricingTables from '@/components/Others/PlanPricingTables'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import ColorLabel from '@/components/Others/ColorLabel'
@@ -252,6 +253,7 @@
             ButtonBase,
             PageHeader,
             ColorLabel,
+            FormLabel,
             required,
             Spinner,
         },
diff --git a/resources/js/views/User/Invoices.vue b/resources/js/views/User/Invoices.vue
index 77df705c..30b05a98 100644
--- a/resources/js/views/User/Invoices.vue
+++ b/resources/js/views/User/Invoices.vue
@@ -1,6 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="invoices && invoices.length > 0">
+            <FormLabel>Invoices</FormLabel>
             <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
                 <template scope="{ row }">
                     <tr>
@@ -42,19 +43,21 @@
 </template>
 
 <script>
-    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
-    import PageTab from '@/components/Others/Layout/PageTab'
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import {ExternalLinkIcon} from "vue-feather-icons";
     import axios from 'axios'
 
     export default {
         name: 'UserInvoices',
         components: {
-            PageTabGroup,
-            PageTab,
             DatatableWrapper,
             ExternalLinkIcon,
+            PageTabGroup,
+            FormLabel,
+            PageTab,
         },
         data() {
             return {
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index f0f87367..d730cdff 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -1,31 +1,28 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup>
-            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
-                                class="form block-form">
-                <div class="wrapper-inline">
-                    <div class="block-wrapper">
-                        <label>{{ $t('page_create_password.label_new_pass') }}:</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
-                                            rules="required" v-slot="{ errors }">
-                            <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
-                                   type="password"
-                                   :class="{'is-error': errors[0]}"/>
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </ValidationProvider>
-                    </div>
-                    <div class="block-wrapper">
-                        <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
-                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
-                                            rules="required" v-slot="{ errors }">
-                            <input v-model="newPasswordConfirmation"
-                                   :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
-                                   :class="{'is-error': errors[0]}"/>
-                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                        </ValidationProvider>
-                    </div>
+            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
+                <FormLabel>Change Your Password</FormLabel>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
+                               type="password"
+                               :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="newPasswordConfirmation"
+                               :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
+                               :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
                 </div>
-
                 <div class="block-wrapper">
                     <ButtonBase type="submit" button-style="theme" class="confirm-form">
                         {{ $t('profile.store_pass') }}
@@ -37,12 +34,13 @@
 </template>
 
 <script>
-    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
-    import PageTab from '@/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import UserImageInput from '@/components/Others/UserImageInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import PageHeader from '@/components/Others/PageHeader'
     import ThemeLabel from '@/components/Others/ThemeLabel'
     import {required} from 'vee-validate/dist/rules'
@@ -53,6 +51,7 @@
         name: 'Profile',
         components: {
             PageTabGroup,
+            FormLabel,
             PageTab,
             ValidationProvider,
             ValidationObserver,
diff --git a/resources/js/views/User/PaymentMethods.vue b/resources/js/views/User/PaymentMethods.vue
index ac507f38..501bc082 100644
--- a/resources/js/views/User/PaymentMethods.vue
+++ b/resources/js/views/User/PaymentMethods.vue
@@ -1,6 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="PaymentMethods && PaymentMethods.length > 0">
+            <FormLabel>Payment Methods</FormLabel>
             <DatatableWrapper :paginator="true" :columns="columns" :data="PaymentMethods" class="table">
                 <template scope="{ row }">
                     <tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
@@ -45,9 +46,10 @@
 <script>
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+    import {CreditCardIcon, Trash2Icon} from "vue-feather-icons"
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import PageTab from '@/components/Others/Layout/PageTab'
     import ColorLabel from '@/components/Others/ColorLabel'
-    import {CreditCardIcon, Trash2Icon} from "vue-feather-icons"
     import {events} from "@/bus"
     import axios from 'axios'
 
@@ -55,10 +57,11 @@
         name: 'UserPaymentMethods',
         components: {
             DatatableWrapper,
+            CreditCardIcon,
             PageTabGroup,
             Trash2Icon,
             ColorLabel,
-            CreditCardIcon,
+            FormLabel,
             PageTab,
         },
         data() {
diff --git a/resources/js/views/User/Settings.vue b/resources/js/views/User/Settings.vue
index eb6fd869..467146eb 100644
--- a/resources/js/views/User/Settings.vue
+++ b/resources/js/views/User/Settings.vue
@@ -1,34 +1,33 @@
 <template>
-    <PageTab>
+    <PageTab class="form-fixed-width">
         <PageTabGroup v-if="userInfo">
             <div class="form block-form">
-                <div class="wrapper-inline">
-                    <div class="block-wrapper">
-                        <label>{{ $t('page_registration.label_email') }}</label>
-                        <div class="input-wrapper">
-                            <input :value="userInfo.email"
-                                   :placeholder="$t('page_registration.placeholder_email')"
-                                   type="email"
-                                   disabled
-                            />
-                        </div>
+                <FormLabel>Account Information</FormLabel>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_registration.label_email') }}</label>
+                    <div class="input-wrapper">
+                        <input :value="userInfo.email"
+                               :placeholder="$t('page_registration.placeholder_email')"
+                               type="email"
+                               disabled
+                        />
                     </div>
-                    <div class="block-wrapper">
-                        <label>{{ $t('page_registration.label_name') }}</label>
-                        <div class="input-wrapper">
-                            <input @keyup="changeUserName"
-                                   v-model="userInfo.name"
-                                   :placeholder="$t('page_registration.placeholder_name')"
-                                   type="text"
-                            />
-                        </div>
+                </div>
+                <div class="block-wrapper">
+                    <label>{{ $t('page_registration.label_name') }}</label>
+                    <div class="input-wrapper">
+                        <input @keyup="changeUserName"
+                               v-model="userInfo.name"
+                               :placeholder="$t('page_registration.placeholder_name')"
+                               type="text"
+                        />
                     </div>
                 </div>
             </div>
         </PageTabGroup>
         <PageTabGroup v-if="billingInfo">
             <div class="form block-form">
-                <b class="form-group-label">Billing Information</b>
+                <FormLabel>Billing Information</FormLabel>
                 <div class="block-wrapper">
                     <label>Name:</label>
                     <div class="input-wrapper">
@@ -109,9 +108,10 @@
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
-    import PageTab from '@/components/Others/Layout/PageTab'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageTab from '@/components/Others/Layout/PageTab'
     import PageHeader from '@/components/Others/PageHeader'
     import ThemeLabel from '@/components/Others/ThemeLabel'
     import {required} from 'vee-validate/dist/rules'
@@ -125,6 +125,7 @@
         ],
         components: {
             PageTabGroup,
+            FormLabel,
             PageTab,
             ValidationProvider,
             ValidationObserver,
diff --git a/resources/js/views/User/Storage.vue b/resources/js/views/User/Storage.vue
index 5e8b919d..90eab6d2 100644
--- a/resources/js/views/User/Storage.vue
+++ b/resources/js/views/User/Storage.vue
@@ -1,10 +1,11 @@
 <template>
-    <PageTab v-if="storage">
+    <PageTab class="form-fixed-width" 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})"/>
         </PageTabGroup>
         <PageTabGroup>
-            <b class="form-group-label">{{ $t('storage.sec_details') }}</b>
+            <FormLabel>{{ $t('storage.sec_details') }}</FormLabel>
             <StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storage.meta.images.percentage" :used="storage.meta.images.used" />
             <StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storage.meta.videos.percentage" :used="storage.meta.videos.used" />
             <StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storage.meta.audios.percentage" :used="storage.meta.audios.used" />
@@ -15,6 +16,7 @@
 </template>
 
 <script>
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import PageTab from '@/components/Others/Layout/PageTab'
     import StorageItemDetail from '@/components/Others/StorageItemDetail'
@@ -28,6 +30,7 @@
         name: 'Profile',
         components: {
             PageTabGroup,
+            FormLabel,
             PageTab,
             StorageItemDetail,
             SectionTitle,
diff --git a/resources/js/views/User/Subscription.vue b/resources/js/views/User/Subscription.vue
index 51fc7e17..34870b54 100644
--- a/resources/js/views/User/Subscription.vue
+++ b/resources/js/views/User/Subscription.vue
@@ -1,6 +1,7 @@
 <template>
     <PageTab :is-loading="isLoading">
         <PageTabGroup v-if="subscription">
+            <FormLabel>Subscription Plan</FormLabel>
 
             <!--Info about active subscription-->
             <div v-if="! subscription.data.attributes.canceled" class="state active">
@@ -51,6 +52,7 @@
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
     import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
     import ListInfoItem from '@/components/Others/ListInfoItem'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import PageTab from '@/components/Others/Layout/PageTab'
     import ListInfo from '@/components/Others/ListInfo'
@@ -67,6 +69,7 @@
             ListInfoItem,
             PageTabGroup,
             ButtonBase,
+            FormLabel,
             ListInfo,
             PageTab,
         },
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 2eca379c..a26cd3ba 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -30,13 +30,14 @@
   #page-content {
     margin: 0 auto;
     padding-bottom: 50px;
+    padding-top: 35px;
 
     &.full-width {
       max-width: 100%;
     }
 
     &.medium-width {
-      max-width: 920px;
+      max-width: 700px;
     }
 
     &.large-width {
@@ -62,6 +63,11 @@
   }
 }
 
+.form-fixed-width {
+  width: 700px;
+  margin: 0 auto;
+}
+
 .form-group {
   margin-bottom: 25px;
 }
@@ -313,6 +319,10 @@
   #single-page {
     padding-left: 30px;
     padding-right: 30px;
+
+    #page-content {
+      padding-top: 0;
+    }
   }
 
   .menu-list-wrapper {
diff --git a/resources/sass/vue-file-manager/_forms.scss b/resources/sass/vue-file-manager/_forms.scss
index a42915d4..e847d66d 100644
--- a/resources/sass/vue-file-manager/_forms.scss
+++ b/resources/sass/vue-file-manager/_forms.scss
@@ -83,6 +83,14 @@
   }
 }
 
+.single-line-form {
+  display: flex;
+
+  .submit-button {
+    margin-left: 20px;
+  }
+}
+
 .error-message {
   @include font-size(14);
   color: $danger;
diff --git a/storage/framework/cache/data/00/31/00317b5e81771fa2c4f1ccbe161dfb1c492dde59 b/storage/framework/cache/data/00/31/00317b5e81771fa2c4f1ccbe161dfb1c492dde59
new file mode 100644
index 00000000..a9708265
--- /dev/null
+++ b/storage/framework/cache/data/00/31/00317b5e81771fa2c4f1ccbe161dfb1c492dde59
@@ -0,0 +1 @@
+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
new file mode 100644
index 00000000..4ec53af7
Binary files /dev/null and b/storage/framework/cache/data/1c/61/1c616af560fef7e36fda03094bba2b666636f36f differ
diff --git a/storage/framework/cache/data/21/01/2101d0482c1d6143d9f389063c1ab3d14fc9a75e b/storage/framework/cache/data/21/01/2101d0482c1d6143d9f389063c1ab3d14fc9a75e
new file mode 100644
index 00000000..57797510
Binary files /dev/null and b/storage/framework/cache/data/21/01/2101d0482c1d6143d9f389063c1ab3d14fc9a75e differ
diff --git a/storage/framework/cache/data/44/d1/44d142505dd1a3b497197e2f459d2aec779e9ed6 b/storage/framework/cache/data/44/d1/44d142505dd1a3b497197e2f459d2aec779e9ed6
index ec26796d..38e90eb5 100644
--- a/storage/framework/cache/data/44/d1/44d142505dd1a3b497197e2f459d2aec779e9ed6
+++ b/storage/framework/cache/data/44/d1/44d142505dd1a3b497197e2f459d2aec779e9ed6
@@ -1 +1 @@
-1593685585i:1593685585;
\ No newline at end of file
+1593705701i:1593705701;
\ No newline at end of file
diff --git a/storage/framework/cache/data/a6/63/a663cdace4dc048cf78c535fc8f9e6cc088ea346 b/storage/framework/cache/data/a6/63/a663cdace4dc048cf78c535fc8f9e6cc088ea346
new file mode 100644
index 00000000..74366fdc
--- /dev/null
+++ b/storage/framework/cache/data/a6/63/a663cdace4dc048cf78c535fc8f9e6cc088ea346
@@ -0,0 +1 @@
+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
new file mode 100644
index 00000000..c220e31e
--- /dev/null
+++ b/storage/framework/cache/data/ac/e1/ace142bb086c4aedd905d5564c585bd410e49db0
@@ -0,0 +1 @@
+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 c6919772..b78b0c0d 100644
--- a/storage/framework/cache/data/c2/4f/c24f92750673b2169c8cb7bfbc999cfa8457dc7c
+++ b/storage/framework/cache/data/c2/4f/c24f92750673b2169c8cb7bfbc999cfa8457dc7c
@@ -1 +1 @@
-1593685585i:1;
\ No newline at end of file
+1593705701i:3;
\ No newline at end of file