diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index fea4bc73..325e9188 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -33,7 +33,7 @@
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=3d0bbcd0c36d74bf739a",
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=65ee559ca803555be568",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=55135fff8801bdf735c4",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=6215349bfe593c9d97e0",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=d2f7592e42f8fd34fe80",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~5475de6f.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~5475de6f.js?id=c5c36cfe8a9f7e56aa25",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans.js?id=d62ce026c0c13d14242f",
     "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js?id=7c627ccb1eb284aee632",
@@ -49,17 +49,17 @@
     "/chunks/homepage.js": "/chunks/homepage.js?id=b89dd81804b8a0bd3f0b",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=1579259e826aa89fb00a",
     "/chunks/invitation.js": "/chunks/invitation.js?id=c9cd3541ee362ae8d5f7",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=78fcd51a8a763766fd5f",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=55183ce2f1ac6f308b3d",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
     "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=d116a63e3c59bc0a5133",
-    "/chunks/pages.js": "/chunks/pages.js?id=c3bb5975ae17947872be",
+    "/chunks/pages.js": "/chunks/pages.js?id=57cb88433843d50803cc",
     "/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
     "/chunks/plan-create.js": "/chunks/plan-create.js?id=c1ad8299871917f21f8e",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=a4db8cc9a98a81eed8d1",
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=b3287cc8a37898410410",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=6c052021e0f162f6942d",
-    "/chunks/plans.js": "/chunks/plans.js?id=85ae6e573a4d322752af",
+    "/chunks/plans.js": "/chunks/plans.js?id=ba0fd1ca9218342819b7",
     "/chunks/platform.js": "/chunks/platform.js?id=dc3c6677ab43d4475b66",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=e64e3b67ccb89de9dd55",
     "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=7d983dfdc91de607d737",
@@ -102,7 +102,7 @@
     "/chunks/user-password.js": "/chunks/user-password.js?id=ce6c12a5b038f5481bd1",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=71b90f0987d1ebe7ead6",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e0a857f37b2bc6df43ca",
-    "/chunks/users.js": "/chunks/users.js?id=f725bb798eb8da710ca7",
+    "/chunks/users.js": "/chunks/users.js?id=a8c2b20dde8afaeea0c3",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8",
     "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712",
@@ -230,5 +230,36 @@
     "/chunks/admin.395f3f63ae78b853df8a.hot-update.js": "/chunks/admin.395f3f63ae78b853df8a.hot-update.js",
     "/chunks/admin.573a6e1ca9bd529a5c8d.hot-update.js": "/chunks/admin.573a6e1ca9bd529a5c8d.hot-update.js",
     "/chunks/admin.0c0cac7fa6eaaddd78a7.hot-update.js": "/chunks/admin.0c0cac7fa6eaaddd78a7.hot-update.js",
-    "/chunks/admin.983a61bebc862cbccb59.hot-update.js": "/chunks/admin.983a61bebc862cbccb59.hot-update.js"
+    "/chunks/admin.983a61bebc862cbccb59.hot-update.js": "/chunks/admin.983a61bebc862cbccb59.hot-update.js",
+    "/chunks/plans.67cf1c817b91e6090415.hot-update.js": "/chunks/plans.67cf1c817b91e6090415.hot-update.js",
+    "/chunks/plans.66302f070bd7c649dcc6.hot-update.js": "/chunks/plans.66302f070bd7c649dcc6.hot-update.js",
+    "/chunks/plans.01d85e631004252f8dde.hot-update.js": "/chunks/plans.01d85e631004252f8dde.hot-update.js",
+    "/chunks/users.070c2250f8e0834ab63b.hot-update.js": "/chunks/users.070c2250f8e0834ab63b.hot-update.js",
+    "/chunks/plans.6aa57e14520e4d749c5a.hot-update.js": "/chunks/plans.6aa57e14520e4d749c5a.hot-update.js",
+    "/chunks/plans.acacfdd4e1d309e36d97.hot-update.js": "/chunks/plans.acacfdd4e1d309e36d97.hot-update.js",
+    "/chunks/plans.cde7a05f8fc5dee1e318.hot-update.js": "/chunks/plans.cde7a05f8fc5dee1e318.hot-update.js",
+    "/chunks/plans.c8f0a47cdecfa7736ee7.hot-update.js": "/chunks/plans.c8f0a47cdecfa7736ee7.hot-update.js",
+    "/chunks/plans.767f7d1c836059a6920a.hot-update.js": "/chunks/plans.767f7d1c836059a6920a.hot-update.js",
+    "/chunks/plans.44b4ea0dade7c1a7cbfa.hot-update.js": "/chunks/plans.44b4ea0dade7c1a7cbfa.hot-update.js",
+    "/chunks/plans.7f3608c457e2c262caa2.hot-update.js": "/chunks/plans.7f3608c457e2c262caa2.hot-update.js",
+    "/chunks/plans.dcaca8ba564be56b8660.hot-update.js": "/chunks/plans.dcaca8ba564be56b8660.hot-update.js",
+    "/chunks/plans.b177bdbbdee655318305.hot-update.js": "/chunks/plans.b177bdbbdee655318305.hot-update.js",
+    "/chunks/plans.c108b861003ce05be5ce.hot-update.js": "/chunks/plans.c108b861003ce05be5ce.hot-update.js",
+    "/chunks/plans.c961613fd95fab2e6d0c.hot-update.js": "/chunks/plans.c961613fd95fab2e6d0c.hot-update.js",
+    "/chunks/plans.162ff835fe7b00c2f040.hot-update.js": "/chunks/plans.162ff835fe7b00c2f040.hot-update.js",
+    "/chunks/plans.ed987c55d7ec9d95ca6b.hot-update.js": "/chunks/plans.ed987c55d7ec9d95ca6b.hot-update.js",
+    "/chunks/plans.5857b536c372900257e0.hot-update.js": "/chunks/plans.5857b536c372900257e0.hot-update.js",
+    "/chunks/plans.6229b2be3a1618d32a20.hot-update.js": "/chunks/plans.6229b2be3a1618d32a20.hot-update.js",
+    "/chunks/plans.0b9eb869c39de1feaccc.hot-update.js": "/chunks/plans.0b9eb869c39de1feaccc.hot-update.js",
+    "/chunks/plans.46438560404ae93671e3.hot-update.js": "/chunks/plans.46438560404ae93671e3.hot-update.js",
+    "/chunks/plans.4497f10f73da31fa4372.hot-update.js": "/chunks/plans.4497f10f73da31fa4372.hot-update.js",
+    "/chunks/plans.7ecfd4cbf042d4890347.hot-update.js": "/chunks/plans.7ecfd4cbf042d4890347.hot-update.js",
+    "/chunks/plans.c65887d5d408b03cf213.hot-update.js": "/chunks/plans.c65887d5d408b03cf213.hot-update.js",
+    "/chunks/plans.1c07c846e30a0a08e56f.hot-update.js": "/chunks/plans.1c07c846e30a0a08e56f.hot-update.js",
+    "/js/main.89d8f120d38967a5eb28.hot-update.js": "/js/main.89d8f120d38967a5eb28.hot-update.js",
+    "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~b00a1a94.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~b00a1a94.js?id=2c1cd2ab8a9eed8031f0",
+    "/chunks/plans.89d8f120d38967a5eb28.hot-update.js": "/chunks/plans.89d8f120d38967a5eb28.hot-update.js",
+    "/chunks/plans.eee36b9b18b21d73ef75.hot-update.js": "/chunks/plans.eee36b9b18b21d73ef75.hot-update.js",
+    "/chunks/plans.7d790c6d4cfd916c23ef.hot-update.js": "/chunks/plans.7d790c6d4cfd916c23ef.hot-update.js",
+    "/chunks/plans.c7644df05e70a501dce0.hot-update.js": "/chunks/plans.c7644df05e70a501dce0.hot-update.js"
 }
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index ff14320c..72149928 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -1,71 +1,63 @@
 <template>
-    <div id="single-page">
+    <div>
+		<div class="card shadow-card">
+			<div class="mb-6">
+				<router-link :to="{name: 'PlanCreate'}">
+					<MobileActionButton icon="plus">
+						{{ $t('admin_page_plans.create_plan_button') }}
+					</MobileActionButton>
+				</router-link>
+			</div>
 
-        <!--Stripe plans-->
-        <div id="page-content" v-show="stripeConfiguredWithPlans">
-            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
-            <PageHeader :title="$t($router.currentRoute.meta.title)"/>
-
-            <div class="content-page" v-if="config.stripe_public_key">
-                <div class="table-tools">
-                    <div class="buttons">
-                        <router-link :to="{name: 'PlanCreate'}">
-                            <MobileActionButton icon="plus">
-                                {{ $t('admin_page_plans.create_plan_button') }}
-                            </MobileActionButton>
-                        </router-link>
-                    </div>
-                    <div class="searching">
-
-                    </div>
-                </div>
-                <DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/admin/plans" :paginator="false" :columns="columns" class="table table-users">
-                    <template slot-scope="{ row }">
-                        <tr>
-                            <td style="max-width: 80px">
-                                <span class="cell-item">
-                                    <SwitchInput @input="changeStatus($event, row.data.id)" class="switch" :state="row.data.attributes.status"/>
-                                </span>
-                            </td>
-                            <td class="name" style="min-width: 120px">
-                                <router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}" class="cell-item" tag="div">
-                                    <span>{{ row.data.attributes.name }}</span>
+			<!--Datatable-->
+            <DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscription/plans" :paginator="true" :columns="columns">
+                <template slot-scope="{ row }">
+                    <tr class="border-b dark:border-opacity-5 border-light border-dashed">
+						<td class="py-4">
+							<SwitchInput @input="changeStatus($event, row.data.id)" class="switch" :state="row.data.attributes.visible"/>
+						</td>
+                        <td>
+                            <span class="text-sm font-bold">
+                            	{{ row.data.attributes.name }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold">
+                            	{{ row.data.attributes.price }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold capitalize">
+                            	{{ row.data.attributes.interval }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold">
+                            	{{ row.data.attributes.subscribers }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold">
+                            	{{ row.data.attributes.features.max_storage_amount }} GB
+                            </span>
+                        </td>
+                        <td>
+                            <div class="flex space-x-2 w-full justify-end">
+                                <router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'PlanSettings', params: {id: row.data.id}}">
+                                    <Edit2Icon size="15" class="opacity-75" />
                                 </router-link>
-                            </td>
-
-                            <td>
-                                <span class="cell-item">
-                                    {{ row.data.attributes.subscribers }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="cell-item">
-                                    {{ row.data.attributes.price_formatted }}
-                                </span>
-                            </td>
-                            <td>
-                                <span class="cell-item">
-                                    {{ row.data.attributes.capacity_formatted }}
-                                </span>
-                            </td>
-                            <td>
-                                <div class="action-icons">
-                                    <router-link :to="{name: 'PlanSettings', params: {id: row.data.id}}">
-                                        <edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
-                                    </router-link>
-                                    <router-link :to="{name: 'PlanDelete', params: {id: row.data.id}}">
-                                        <trash2-icon size="15" class="icon icon-trash"></trash2-icon>
-                                    </router-link>
-                                </div>
-                            </td>
-                        </tr>
-                    </template>
-                </DatatableWrapper>
-            </div>
-        </div>
+                                <router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'PlanDelete', params: {id: row.data.id}}">
+                                    <Trash2Icon size="15" class="opacity-75" />
+                                </router-link>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </DatatableWrapper>
+		</div>
 
         <!--Stripe configured but has empty plans-->
-        <EmptyPageContent
+		<!--<EmptyPageContent
                 v-if="isEmptyPlans"
                 icon="file"
                 :title="$t('admin_page_plans.empty.title')"
@@ -74,10 +66,10 @@
             <router-link :to="{name: 'PlanCreate'}" tag="p">
                 <ButtonBase button-style="theme">{{ $t('admin_page_plans.empty.button') }}</ButtonBase>
             </router-link>
-        </EmptyPageContent>
+        </EmptyPageContent>-->
 
         <!--Stripe is Not Configured-->
-        <EmptyPageContent
+		<!--<EmptyPageContent
                 v-if="stripeIsNotConfigured"
                 icon="settings"
                 :title="$t('activation.stripe.title')"
@@ -86,7 +78,7 @@
             <router-link :to="{name: 'AppPayments'}">
                 <ButtonBase button-style="theme">{{ $t('activation.stripe.button') }}</ButtonBase>
             </router-link>
-        </EmptyPageContent>
+        </EmptyPageContent>-->
 
         <!--Spinner-->
         <div id="loader" v-if="isLoading">
@@ -100,15 +92,10 @@
     import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
     import EmptyPageContent from '/resources/js/components/Others/EmptyPageContent'
     import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
-    import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
-    import SectionTitle from '/resources/js/components/Others/SectionTitle'
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
     import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
-    import PageHeader from '/resources/js/components/Others/PageHeader'
-    import ColorLabel from '/resources/js/components/Others/ColorLabel'
     import Spinner from '/resources/js/components/FilesView/Spinner'
     import { mapGetters } from 'vuex'
-    import axios from 'axios'
 
     export default {
         name: 'Plans',
@@ -116,13 +103,9 @@
             MobileActionButton,
             EmptyPageContent,
             DatatableWrapper,
-            SectionTitle,
-            MobileHeader,
             SwitchInput,
             Trash2Icon,
-            PageHeader,
             ButtonBase,
-            ColorLabel,
             Edit2Icon,
             Spinner,
         },
@@ -144,27 +127,32 @@
                 plans: [],
                 columns: [
                     {
-                        label: this.$t('admin_page_plans.table.status'),
+                        label: this.$t('Visibility'),
                         field: 'data.attributes.status',
                         sortable: false
                     },
                     {
-                        label: this.$t('admin_page_plans.table.name'),
+                        label: this.$t('Name'),
                         field: 'data.attributes.name',
                         sortable: false
                     },
                     {
-                        label: this.$t('admin_page_plans.table.subscribers'),
+                        label: this.$t('Price'),
                         field: 'data.attributes.subscribers',
                         sortable: false
                     },
                     {
-                        label: this.$t('admin_page_plans.table.price'),
+                        label: this.$t('Interval'),
                         field: 'data.attributes.price',
                         sortable: false
                     },
                     {
-                        label: this.$t('admin_page_plans.table.storage_capacity'),
+                        label: this.$t('admin_page_plans.table.subscribers'),
+                        field: 'data.attributes.capacity',
+                        sortable: false
+                    },
+                    {
+                        label: this.$t('Storage'),
                         field: 'data.attributes.capacity',
                         sortable: false
                     },
@@ -177,7 +165,7 @@
         },
         methods: {
             changeStatus(val, id) {
-                this.$updateText('/admin/plans/' + id, 'is_active', val)
+                this.$updateText('/subscription/plans/' + id, 'visible', val)
             }
         },
         created() {
@@ -186,66 +174,3 @@
         }
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .table-tools {
-        background: white;
-        display: flex;
-        justify-content: space-between;
-        padding: 15px 0 10px;
-        position: sticky;
-        top: 40px;
-        z-index: 9;
-    }
-
-    .table {
-
-        .cell-item {
-            @include font-size(15);
-            white-space: nowrap;
-        }
-
-        .name {
-            font-weight: 700;
-            cursor: pointer;
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-        .table-tools {
-            padding: 0 0 5px;
-        }
-    }
-
-    .dark {
-
-        .table-tools {
-            background: $dark_mode_background;
-        }
-
-        .action-icons {
-
-            .icon {
-                cursor: pointer;
-
-                circle, path, line, polyline {
-                    stroke: $dark_mode_text_primary;
-                }
-            }
-        }
-
-        .user-thumbnail {
-
-            .info {
-
-                .email {
-                    color: $dark_mode_text_secondary;
-                }
-            }
-        }
-    }
-
-</style>
diff --git a/resources/js/views/Admin/Users.vue b/resources/js/views/Admin/Users.vue
index 201fe9f6..5ddb63a5 100644
--- a/resources/js/views/Admin/Users.vue
+++ b/resources/js/views/Admin/Users.vue
@@ -8,6 +8,7 @@
                     </MobileActionButton>
                 </router-link>
             </div>
+
 			<!--Datatable-->
             <DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
                 <template slot-scope="{ row }">