diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 325e9188..ab5079b2 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -33,10 +33,10 @@
     "/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=d2f7592e42f8fd34fe80",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=45dac5af51764ff6be94",
     "/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",
+    "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js?id=f72a1b2efde61b53a755",
     "/chunks/database.js": "/chunks/database.js?id=18549b910ac0b115d2f1",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
     "/chunks/email-verified.js": "/chunks/email-verified.js?id=253ce639751cc8799458",
@@ -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=55183ce2f1ac6f308b3d",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=53443e2b53de1ee72cf6",
     "/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=57cb88433843d50803cc",
-    "/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
+    "/chunks/plan.js": "/chunks/plan.js?id=455369be23d3cd71dff8",
     "/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=ba0fd1ca9218342819b7",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=1758abef76d231b6518e",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=666e27c41ff13620423f",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=ce4702351692c66cc960",
+    "/chunks/plans.js": "/chunks/plans.js?id=3b56fd7dabcdba705177",
     "/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=a8c2b20dde8afaeea0c3",
+    "/chunks/users.js": "/chunks/users.js?id=5d94a7373e00c8f27ae6",
     "/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",
@@ -261,5 +261,130 @@
     "/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"
+    "/chunks/plans.c7644df05e70a501dce0.hot-update.js": "/chunks/plans.c7644df05e70a501dce0.hot-update.js",
+    "/chunks/plan.d9edeb08ab6e3d33b4f6.hot-update.js": "/chunks/plan.d9edeb08ab6e3d33b4f6.hot-update.js",
+    "/chunks/plan.2fa243b751e26ace2405.hot-update.js": "/chunks/plan.2fa243b751e26ace2405.hot-update.js",
+    "/chunks/plan.5867de564757b1d14466.hot-update.js": "/chunks/plan.5867de564757b1d14466.hot-update.js",
+    "/chunks/plan.42d3b2f96a91dae5dc09.hot-update.js": "/chunks/plan.42d3b2f96a91dae5dc09.hot-update.js",
+    "/chunks/plan.aaafb5e9893e9e88cd01.hot-update.js": "/chunks/plan.aaafb5e9893e9e88cd01.hot-update.js",
+    "/js/main.a1e3cc57d124220fcbe3.hot-update.js": "/js/main.a1e3cc57d124220fcbe3.hot-update.js",
+    "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~1a92dd55.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~1a92dd55.js?id=75317652be9e911b6013",
+    "/chunks/plan.a1e3cc57d124220fcbe3.hot-update.js": "/chunks/plan.a1e3cc57d124220fcbe3.hot-update.js",
+    "/chunks/plans.6af881bb7ab2a4854e5a.hot-update.js": "/chunks/plans.6af881bb7ab2a4854e5a.hot-update.js",
+    "/chunks/plan-settings.55afcfd486b6a889a75b.hot-update.js": "/chunks/plan-settings.55afcfd486b6a889a75b.hot-update.js",
+    "/chunks/plan-settings.8ed3845c0ebe8875286f.hot-update.js": "/chunks/plan-settings.8ed3845c0ebe8875286f.hot-update.js",
+    "/chunks/plan-settings.9caeb5dbef271c7a667b.hot-update.js": "/chunks/plan-settings.9caeb5dbef271c7a667b.hot-update.js",
+    "/chunks/plan-settings.88e32b36859511560096.hot-update.js": "/chunks/plan-settings.88e32b36859511560096.hot-update.js",
+    "/chunks/plan-settings.f96dd0099cc9c35e0cb0.hot-update.js": "/chunks/plan-settings.f96dd0099cc9c35e0cb0.hot-update.js",
+    "/chunks/plan-settings.8491fffbbeb3e70fb098.hot-update.js": "/chunks/plan-settings.8491fffbbeb3e70fb098.hot-update.js",
+    "/chunks/plan-settings.2cffabb6f3b38c74381d.hot-update.js": "/chunks/plan-settings.2cffabb6f3b38c74381d.hot-update.js",
+    "/chunks/plan-settings.4aa0751d06a2e60c8dd9.hot-update.js": "/chunks/plan-settings.4aa0751d06a2e60c8dd9.hot-update.js",
+    "/chunks/plan-settings.c412f283997714dff389.hot-update.js": "/chunks/plan-settings.c412f283997714dff389.hot-update.js",
+    "/chunks/plan-settings.54516ce9bc4712deae84.hot-update.js": "/chunks/plan-settings.54516ce9bc4712deae84.hot-update.js",
+    "/chunks/plan-settings.8003a7c826b369f37f9f.hot-update.js": "/chunks/plan-settings.8003a7c826b369f37f9f.hot-update.js",
+    "/chunks/plan-settings.1fde8c90726ce569a997.hot-update.js": "/chunks/plan-settings.1fde8c90726ce569a997.hot-update.js",
+    "/js/main.75777cc588a650e5f48f.hot-update.js": "/js/main.75777cc588a650e5f48f.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~404e5bed.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~404e5bed.js?id=f45b9b3f8acdeffc7079",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~7d97632e.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~7d97632e.js?id=6b285cb7252cd896c23e",
+    "/chunks/plan-settings.75777cc588a650e5f48f.hot-update.js": "/chunks/plan-settings.75777cc588a650e5f48f.hot-update.js",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~35bc7519.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~35bc7519.js?id=ae06aafc3749254fe4aa",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~47733ac6.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~47733ac6.js?id=1579cd824e874deff582",
+    "/chunks/plan-settings.dc92de204a19f08a88dc.hot-update.js": "/chunks/plan-settings.dc92de204a19f08a88dc.hot-update.js",
+    "/chunks/plan-settings.1799b0e2aae1c1cd0d42.hot-update.js": "/chunks/plan-settings.1799b0e2aae1c1cd0d42.hot-update.js",
+    "/chunks/plan-settings.a8f46223cb5e7b7231c0.hot-update.js": "/chunks/plan-settings.a8f46223cb5e7b7231c0.hot-update.js",
+    "/chunks/plan-settings.335631084e49277f7bb4.hot-update.js": "/chunks/plan-settings.335631084e49277f7bb4.hot-update.js",
+    "/chunks/plan-settings.b39595be1e295f8fab78.hot-update.js": "/chunks/plan-settings.b39595be1e295f8fab78.hot-update.js",
+    "/chunks/plan-settings.71ab268e4dfb33161708.hot-update.js": "/chunks/plan-settings.71ab268e4dfb33161708.hot-update.js",
+    "/chunks/plan-settings.16f961989a2756605a81.hot-update.js": "/chunks/plan-settings.16f961989a2756605a81.hot-update.js",
+    "/chunks/plan-settings.31b5358dbaed44f0b95e.hot-update.js": "/chunks/plan-settings.31b5358dbaed44f0b95e.hot-update.js",
+    "/chunks/plan-settings.8e54e5209b62710a787f.hot-update.js": "/chunks/plan-settings.8e54e5209b62710a787f.hot-update.js",
+    "/chunks/plan-settings.5bf208f1a606f086b0fb.hot-update.js": "/chunks/plan-settings.5bf208f1a606f086b0fb.hot-update.js",
+    "/chunks/plan-delete.8070b9365f3e37069995.hot-update.js": "/chunks/plan-delete.8070b9365f3e37069995.hot-update.js",
+    "/chunks/plan-delete.b435b7bf3c1a1e5af920.hot-update.js": "/chunks/plan-delete.b435b7bf3c1a1e5af920.hot-update.js",
+    "/chunks/plan-delete.8cd5cbe248c9d703f414.hot-update.js": "/chunks/plan-delete.8cd5cbe248c9d703f414.hot-update.js",
+    "/chunks/plan-delete.e667cee3f2a0c69478ee.hot-update.js": "/chunks/plan-delete.e667cee3f2a0c69478ee.hot-update.js",
+    "/chunks/plan-delete.8882866223053e92837f.hot-update.js": "/chunks/plan-delete.8882866223053e92837f.hot-update.js",
+    "/chunks/plan-delete.68758fc7e76992f140be.hot-update.js": "/chunks/plan-delete.68758fc7e76992f140be.hot-update.js",
+    "/chunks/plan-delete.bf5737e21d9a8795de79.hot-update.js": "/chunks/plan-delete.bf5737e21d9a8795de79.hot-update.js",
+    "/js/main.31b2e8ad3837c993e752.hot-update.js": "/js/main.31b2e8ad3837c993e752.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js?id=c3244f82e049a3364a6a",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~fa9d08c1.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~fa9d08c1.js?id=741acf06489eac45774e",
+    "/chunks/plan-delete.31b2e8ad3837c993e752.hot-update.js": "/chunks/plan-delete.31b2e8ad3837c993e752.hot-update.js",
+    "/chunks/plan-delete.b9193d7940fdbe739612.hot-update.js": "/chunks/plan-delete.b9193d7940fdbe739612.hot-update.js",
+    "/chunks/plan-delete.429e54ff19808b36dd1c.hot-update.js": "/chunks/plan-delete.429e54ff19808b36dd1c.hot-update.js",
+    "/chunks/plan-delete.3b45b85eb25686f8d49a.hot-update.js": "/chunks/plan-delete.3b45b85eb25686f8d49a.hot-update.js",
+    "/chunks/plan-settings.b7d1ab10ee43590b68ce.hot-update.js": "/chunks/plan-settings.b7d1ab10ee43590b68ce.hot-update.js",
+    "/chunks/plan-settings.bd42f434fca55dfbec92.hot-update.js": "/chunks/plan-settings.bd42f434fca55dfbec92.hot-update.js",
+    "/chunks/plan-subscribers.96953b4a54fe30124dd1.hot-update.js": "/chunks/plan-subscribers.96953b4a54fe30124dd1.hot-update.js",
+    "/chunks/plan-subscribers.c9f7578af0f084f49f96.hot-update.js": "/chunks/plan-subscribers.c9f7578af0f084f49f96.hot-update.js",
+    "/chunks/plan-subscribers.36826472459296cddd13.hot-update.js": "/chunks/plan-subscribers.36826472459296cddd13.hot-update.js",
+    "/chunks/plan-subscribers.45e6b4c0eedc4d02a294.hot-update.js": "/chunks/plan-subscribers.45e6b4c0eedc4d02a294.hot-update.js",
+    "/chunks/plan-subscribers.f40e5e0ef1959b7990f1.hot-update.js": "/chunks/plan-subscribers.f40e5e0ef1959b7990f1.hot-update.js",
+    "/chunks/plan-subscribers.57eef9ed2c7a99f5255c.hot-update.js": "/chunks/plan-subscribers.57eef9ed2c7a99f5255c.hot-update.js",
+    "/chunks/plan-subscribers.9277938f1f2c3a94cf34.hot-update.js": "/chunks/plan-subscribers.9277938f1f2c3a94cf34.hot-update.js",
+    "/chunks/plan-subscribers.0d1b65f310c07e9aa958.hot-update.js": "/chunks/plan-subscribers.0d1b65f310c07e9aa958.hot-update.js",
+    "/chunks/plan-subscribers.85128a4db3350d782756.hot-update.js": "/chunks/plan-subscribers.85128a4db3350d782756.hot-update.js",
+    "/chunks/plan-subscribers.aab5c2a692c2a9160da7.hot-update.js": "/chunks/plan-subscribers.aab5c2a692c2a9160da7.hot-update.js",
+    "/chunks/plan-subscribers.0aa11209ae5af000182d.hot-update.js": "/chunks/plan-subscribers.0aa11209ae5af000182d.hot-update.js",
+    "/chunks/plan-subscribers.90b4d3a17ca23c3b62f1.hot-update.js": "/chunks/plan-subscribers.90b4d3a17ca23c3b62f1.hot-update.js",
+    "/chunks/plan-subscribers.1c1d6f0d302ed884268a.hot-update.js": "/chunks/plan-subscribers.1c1d6f0d302ed884268a.hot-update.js",
+    "/chunks/plan-subscribers.b2e259dc0a4e85c5c6fc.hot-update.js": "/chunks/plan-subscribers.b2e259dc0a4e85c5c6fc.hot-update.js",
+    "/chunks/plan-subscribers.c8a4ccf55d6b03e90e1c.hot-update.js": "/chunks/plan-subscribers.c8a4ccf55d6b03e90e1c.hot-update.js",
+    "/chunks/plan-subscribers.353160526a576131b69a.hot-update.js": "/chunks/plan-subscribers.353160526a576131b69a.hot-update.js",
+    "/chunks/plan-subscribers.beade47a8925e1fdec44.hot-update.js": "/chunks/plan-subscribers.beade47a8925e1fdec44.hot-update.js",
+    "/chunks/plan-subscribers.5f182f31992161b6b4f0.hot-update.js": "/chunks/plan-subscribers.5f182f31992161b6b4f0.hot-update.js",
+    "/chunks/plan-subscribers.e4999efaa746d63b6399.hot-update.js": "/chunks/plan-subscribers.e4999efaa746d63b6399.hot-update.js",
+    "/chunks/plan-subscribers.5645278a68eb00e26835.hot-update.js": "/chunks/plan-subscribers.5645278a68eb00e26835.hot-update.js",
+    "/chunks/plan-subscribers.3d54df2d58e690ce185e.hot-update.js": "/chunks/plan-subscribers.3d54df2d58e690ce185e.hot-update.js",
+    "/chunks/plan-subscribers.4440fbe46370fc9d55c9.hot-update.js": "/chunks/plan-subscribers.4440fbe46370fc9d55c9.hot-update.js",
+    "/chunks/plan-subscribers.dd70f0c1159661dffcf2.hot-update.js": "/chunks/plan-subscribers.dd70f0c1159661dffcf2.hot-update.js",
+    "/chunks/dashboard.b1f5d118c3e8596965b8.hot-update.js": "/chunks/dashboard.b1f5d118c3e8596965b8.hot-update.js",
+    "/chunks/invoices.b1f5d118c3e8596965b8.hot-update.js": "/chunks/invoices.b1f5d118c3e8596965b8.hot-update.js",
+    "/chunks/plan-subscribers.b1f5d118c3e8596965b8.hot-update.js": "/chunks/plan-subscribers.b1f5d118c3e8596965b8.hot-update.js",
+    "/chunks/users.b1f5d118c3e8596965b8.hot-update.js": "/chunks/users.b1f5d118c3e8596965b8.hot-update.js",
+    "/js/main.1cd1be380447fd4fe2a4.hot-update.js": "/js/main.1cd1be380447fd4fe2a4.hot-update.js",
+    "/chunks/plan-subscribers.1cd1be380447fd4fe2a4.hot-update.js": "/chunks/plan-subscribers.1cd1be380447fd4fe2a4.hot-update.js",
+    "/js/main.3e3796d3a8627212fea5.hot-update.js": "/js/main.3e3796d3a8627212fea5.hot-update.js",
+    "/js/main.20c09c5ee8054305796a.hot-update.js": "/js/main.20c09c5ee8054305796a.hot-update.js",
+    "/chunks/plan-subscribers.7fde12d085fc3755f445.hot-update.js": "/chunks/plan-subscribers.7fde12d085fc3755f445.hot-update.js",
+    "/chunks/plan-subscribers.8ba160c507f801d04067.hot-update.js": "/chunks/plan-subscribers.8ba160c507f801d04067.hot-update.js",
+    "/chunks/plan-subscribers.a2395a817890f3c78686.hot-update.js": "/chunks/plan-subscribers.a2395a817890f3c78686.hot-update.js",
+    "/chunks/plan-subscribers.eee8774f443715e26ac1.hot-update.js": "/chunks/plan-subscribers.eee8774f443715e26ac1.hot-update.js",
+    "/chunks/plan-subscribers.258eed83b7d871b54244.hot-update.js": "/chunks/plan-subscribers.258eed83b7d871b54244.hot-update.js",
+    "/chunks/plan-subscribers.1834bd117de66b917e29.hot-update.js": "/chunks/plan-subscribers.1834bd117de66b917e29.hot-update.js",
+    "/chunks/plan-subscribers.9c57e80be34bbb91ad99.hot-update.js": "/chunks/plan-subscribers.9c57e80be34bbb91ad99.hot-update.js",
+    "/chunks/plan-subscribers.b6cfe8e39116288450a3.hot-update.js": "/chunks/plan-subscribers.b6cfe8e39116288450a3.hot-update.js",
+    "/chunks/plan-subscribers.eba573aa1c85bd6c501d.hot-update.js": "/chunks/plan-subscribers.eba573aa1c85bd6c501d.hot-update.js",
+    "/chunks/plan-subscribers.11918c0bab35a6df86c7.hot-update.js": "/chunks/plan-subscribers.11918c0bab35a6df86c7.hot-update.js",
+    "/chunks/plan-subscribers.c8830d4e6e1042e2b72f.hot-update.js": "/chunks/plan-subscribers.c8830d4e6e1042e2b72f.hot-update.js",
+    "/chunks/plan-subscribers.a4a0bc3c6921f10bbc0d.hot-update.js": "/chunks/plan-subscribers.a4a0bc3c6921f10bbc0d.hot-update.js",
+    "/chunks/plan-subscribers.584d3beee748b9584eba.hot-update.js": "/chunks/plan-subscribers.584d3beee748b9584eba.hot-update.js",
+    "/chunks/plan-subscribers.861e4516adce490257af.hot-update.js": "/chunks/plan-subscribers.861e4516adce490257af.hot-update.js",
+    "/js/main.1d3fd3196dddfd81852f.hot-update.js": "/js/main.1d3fd3196dddfd81852f.hot-update.js",
+    "/chunks/plan-subscribers.beae03b16ac7370d53c9.hot-update.js": "/chunks/plan-subscribers.beae03b16ac7370d53c9.hot-update.js",
+    "/chunks/plan.5ee678a8404c1302a38c.hot-update.js": "/chunks/plan.5ee678a8404c1302a38c.hot-update.js",
+    "/chunks/plan.f7273a9083142ae9bd0b.hot-update.js": "/chunks/plan.f7273a9083142ae9bd0b.hot-update.js",
+    "/chunks/plan.f5eac98db170d18a77c7.hot-update.js": "/chunks/plan.f5eac98db170d18a77c7.hot-update.js",
+    "/chunks/plan.f3ee944cacdbc64389eb.hot-update.js": "/chunks/plan.f3ee944cacdbc64389eb.hot-update.js",
+    "/chunks/plan.e7ed0f94b0c894d3da3b.hot-update.js": "/chunks/plan.e7ed0f94b0c894d3da3b.hot-update.js",
+    "/chunks/plan.ac2b49960b82200871c2.hot-update.js": "/chunks/plan.ac2b49960b82200871c2.hot-update.js",
+    "/chunks/plan.9493ce03d2efbda06d54.hot-update.js": "/chunks/plan.9493ce03d2efbda06d54.hot-update.js",
+    "/chunks/plan.4d5e3cbc319a1bc95625.hot-update.js": "/chunks/plan.4d5e3cbc319a1bc95625.hot-update.js",
+    "/chunks/plan.9fdf5fcb51dd9ef9c256.hot-update.js": "/chunks/plan.9fdf5fcb51dd9ef9c256.hot-update.js",
+    "/chunks/plan.8acc6688641b6a949405.hot-update.js": "/chunks/plan.8acc6688641b6a949405.hot-update.js",
+    "/chunks/plan.b6e83bbbf2dd196a1314.hot-update.js": "/chunks/plan.b6e83bbbf2dd196a1314.hot-update.js",
+    "/chunks/plan.9a391f1caea9462c1610.hot-update.js": "/chunks/plan.9a391f1caea9462c1610.hot-update.js",
+    "/chunks/plan.ee4b7b2c5b298232f729.hot-update.js": "/chunks/plan.ee4b7b2c5b298232f729.hot-update.js",
+    "/chunks/plan.1c89f70d76fb284f0f4c.hot-update.js": "/chunks/plan.1c89f70d76fb284f0f4c.hot-update.js",
+    "/chunks/plan.70900a3b34ec21071c23.hot-update.js": "/chunks/plan.70900a3b34ec21071c23.hot-update.js",
+    "/chunks/plan.92836d23ed3f26f8c76b.hot-update.js": "/chunks/plan.92836d23ed3f26f8c76b.hot-update.js",
+    "/chunks/plan.e69ffff7e7842ccb16e1.hot-update.js": "/chunks/plan.e69ffff7e7842ccb16e1.hot-update.js",
+    "/chunks/plan.f6ffb34918856b814a74.hot-update.js": "/chunks/plan.f6ffb34918856b814a74.hot-update.js",
+    "/chunks/plan.363ccd1f7db6b6dd5306.hot-update.js": "/chunks/plan.363ccd1f7db6b6dd5306.hot-update.js",
+    "/chunks/plan.cbd50dac8ca08a0aeca5.hot-update.js": "/chunks/plan.cbd50dac8ca08a0aeca5.hot-update.js",
+    "/chunks/plan.25af84472ba3d8555582.hot-update.js": "/chunks/plan.25af84472ba3d8555582.hot-update.js",
+    "/chunks/plans.7b393e64ca4234f841f4.hot-update.js": "/chunks/plans.7b393e64ca4234f841f4.hot-update.js",
+    "/chunks/plans.3a81c8451624f125bbbb.hot-update.js": "/chunks/plans.3a81c8451624f125bbbb.hot-update.js",
+    "/chunks/plan-subscribers.8b4339208930e77219f6.hot-update.js": "/chunks/plan-subscribers.8b4339208930e77219f6.hot-update.js",
+    "/chunks/plan-subscribers.3adaea2b4186727f2968.hot-update.js": "/chunks/plan-subscribers.3adaea2b4186727f2968.hot-update.js"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 5eb13103..28443d32 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -142,6 +142,10 @@ export default {
 	@apply w-full dark:bg-2x-dark-foreground bg-light-background py-3 px-5 rounded-lg appearance-none border-transparent text-base font-bold border
 }
 
+.text-limit {
+	@apply whitespace-nowrap overflow-ellipsis overflow-x-hidden block
+}
+
 [v-cloak],
 [v-cloak] > * {
     display: none
diff --git a/resources/js/components/Others/Tables/DatatableWrapper.vue b/resources/js/components/Others/Tables/DatatableWrapper.vue
index 4a2965d6..318d84e6 100644
--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/Others/Tables/DatatableWrapper.vue
@@ -32,7 +32,7 @@
             </tbody>
         </table>
 
-        <slot v-if="! isLoading  && ! hasData" name="empty-page"></slot>
+        <slot v-if="! isLoading && ! hasData" name="empty-page"></slot>
 
 		<!--Paginator-->
         <div v-if="paginator && hasData" class="paginator-wrapper">
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index a20b5155..19ebfccf 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -313,6 +313,15 @@ const FunctionHelpers = {
             }[driver]
         }
 
+        Vue.prototype.getSubscriptionStatusColor = function (status) {
+
+            return {
+                'active': 'green',
+                'cancelled': 'yellow',
+                'completed': 'purple',
+            }[status]
+        }
+
         Vue.prototype.$goToFileView = function (id) {
 
             let locations = {
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index 72149928..05d5d4dd 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -17,9 +17,9 @@
 							<SwitchInput @input="changeStatus($event, row.data.id)" class="switch" :state="row.data.attributes.visible"/>
 						</td>
                         <td>
-                            <span class="text-sm font-bold">
+							<router-link class="text-sm font-bold" :to="{name: 'PlanSettings', params: {id: row.data.id}}">
                             	{{ row.data.attributes.name }}
-                            </span>
+							</router-link>
                         </td>
                         <td>
                             <span class="text-sm font-bold">
diff --git a/resources/js/views/Admin/Plans/Plan.vue b/resources/js/views/Admin/Plans/Plan.vue
index 13c47cdf..2906ddba 100644
--- a/resources/js/views/Admin/Plans/Plan.vue
+++ b/resources/js/views/Admin/Plans/Plan.vue
@@ -1,48 +1,21 @@
 <template>
-    <div id="single-page">
-        <div id="page-content" v-if="! isLoading">
-            <MobileHeader :title="$t($router.currentRoute.meta.title)"/>
-            <PageHeader :can-back="true" :title="$t($router.currentRoute.meta.title)"/>
+    <div>
+		<div class="card shadow-card pb-0 sticky top-0 z-10">
 
-            <div class="content-page">
+			<div class="mb-2">
+				<h1 class="font-bold text-xl">
+					{{ plan.attributes.name }}
+				</h1>
+				<small class="text-sm font-bold text-gray-500">
+					{{ plan.attributes.price }} / {{ $t(`interval.${plan.attributes.interval}`) }}
+				</small>
+			</div>
 
-                <!--Page Tab links-->
-                <div class="menu-list-wrapper horizontal">
-                    <router-link replace :to="{name: 'PlanSettings', params: {id: plan.id}}"
-                                 class="menu-list-item link link border-bottom-theme">
-                        <div class="icon text-theme">
-                            <settings-icon size="17" />
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('admin_page_plans.tabs.settings') }}
-                        </div>
-                    </router-link>
+			<CardNavigation :pages="pages" class="-mx-3.5" />
+		</div>
 
-                    <router-link replace :to="{name: 'PlanSubscribers', params: {id: plan.id}}"
-                                 class="menu-list-item link link border-bottom-theme">
-                        <div class="icon text-theme">
-                            <users-icon size="17" />
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('admin_page_plans.tabs.subscribers') }}
-                        </div>
-                    </router-link>
+		<router-view v-if="! isLoading" :plan="plan" />
 
-                    <router-link replace :to="{name: 'PlanDelete', params: {id: plan.id}}"
-                                 class="menu-list-item link link border-bottom-theme">
-                        <div class="icon text-theme">
-                            <trash2-icon size="17" />
-                        </div>
-                        <div class="label text-theme">
-                            {{ $t('admin_page_plans.tabs.delete') }}
-                        </div>
-                    </router-link>
-                </div>
-
-                <!--Router Content-->
-                <router-view :plan="plan"/>
-            </div>
-        </div>
         <div id="loader" v-if="isLoading">
             <Spinner></Spinner>
         </div>
@@ -50,89 +23,44 @@
 </template>
 
 <script>
-    import {UsersIcon, SettingsIcon, Trash2Icon} from 'vue-feather-icons'
-    import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
-    import SectionTitle from '/resources/js/components/Others/SectionTitle'
-    import PageHeader from '/resources/js/components/Others/PageHeader'
-    import Spinner from '/resources/js/components/FilesView/Spinner'
-    import axios from 'axios'
+	import CardNavigation from "../../../components/Admin/CardNavigation"
+	import Spinner from '/resources/js/components/FilesView/Spinner'
+	import axios from 'axios'
 
-    export default {
-        name: 'Plan',
-        components: {
-            UsersIcon,
-            Trash2Icon,
-            SettingsIcon,
-            SectionTitle,
-            MobileHeader,
-            PageHeader,
-            Spinner,
-        },
-        data() {
-            return {
-                isLoading: true,
-                plan: undefined,
-            }
-        },
-        created() {
-            axios.get('/api/admin/plans/' + this.$route.params.id)
-                .then(response => {
-                    this.plan = response.data.data
-                    this.isLoading = false
-                })
-        }
-    }
+	export default {
+		name: 'Plan',
+		components: {
+			CardNavigation,
+			Spinner,
+		},
+		data() {
+			return {
+				isLoading: true,
+				plan: undefined,
+				pages: [
+					{
+						title: this.$t('admin_page_plans.tabs.settings'),
+						route: 'PlanSettings',
+					},
+					{
+						title: this.$t('admin_page_plans.tabs.subscribers'),
+						route: 'PlanSubscribers',
+					},
+					{
+						title: this.$t('admin_page_plans.tabs.delete'),
+						route: 'PlanDelete',
+					},
+				]
+			}
+		},
+		created() {
+			axios.get('/api/subscription/plans/' + this.$route.params.id)
+				.then(response => {
+					this.plan = response.data.data
+				})
+				.finally(() => {
+					this.isLoading = false
+				})
+		}
+	}
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_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) {
-
-    }
-
-    .dark {
-        .user-thumbnail {
-
-            .info {
-
-                .email {
-                    color: $dark_mode_text_secondary;
-                }
-            }
-        }
-    }
-
-</style>
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue
index 5ada7e6e..4b65b3d0 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue
@@ -1,37 +1,32 @@
 <template>
-    <PageTab class="form-fixed-width">
-        <PageTabGroup>
-            <FormLabel>
-                {{ $t('admin_page_plans.form.title_delete') }}
-            </FormLabel>
-            <InfoBox>
-                <p>{{ $t('admin_page_plans.disclaimer_delete_plan') }}</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="$t('admin_page_plans.form.name_delete_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
-                        <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
-                            {{ $t('admin_page_plans.delete_plan_button') }}
-                        </ButtonBase>
-                    </div>
-                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                </ValidationProvider>
-            </ValidationObserver>
-        </PageTabGroup>
-    </PageTab>
+	<div class="card shadow-card">
+		<FormLabel>
+			{{ $t('admin_page_plans.form.title_delete') }}
+		</FormLabel>
+		<InfoBox>
+			<p>{{ $t('admin_page_plans.disclaimer_delete_plan') }}</p>
+		</InfoBox>
+		<ValidationObserver ref="deletePlan" @submit.prevent="deletePlan" v-slot="{ invalid }" tag="form">
+			<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Plan name" :rules="'required|is:' + plan.attributes.name">
+				<AppInputText :title="$t('admin_page_user.label_delete_user', {user: plan.attributes.name})" :is-last="true">
+					<div class="flex space-x-4">
+						<input v-model="planName" :placeholder="$t('admin_page_plans.form.name_delete_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+						<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
+							{{ $t('admin_page_plans.delete_plan_button') }}
+						</ButtonBase>
+					</div>
+				</AppInputText>
+			</ValidationProvider>
+		</ValidationObserver>
+	</div>
 </template>
 
 <script>
+	import AppInputText from "../../../../components/Admin/AppInputText";
     import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
     import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
     import {required, is} from 'vee-validate/dist/rules'
     import {events} from '/resources/js/bus'
     import axios from 'axios'
@@ -44,13 +39,11 @@
         components: {
             ValidationProvider,
             ValidationObserver,
-            PageTabGroup,
+			AppInputText,
             ButtonBase,
             FormLabel,
-            SetupBox,
             required,
             InfoBox,
-            PageTab,
         },
         data() {
             return {
@@ -70,7 +63,7 @@
                 this.isSendingRequest = true
 
                 axios
-                    .post(this.$store.getters.api + '/admin/plans/' + this.$route.params.id,
+                    .post('/api/subscription/plans/' + this.$route.params.id,
                         {
                             data: {
                                 name: this.planName
@@ -79,37 +72,23 @@
                         }
                     )
                     .then(() => {
-                        this.isSendingRequest = false
-
-                        // Show message
-                        events.$emit('success:open', {
-                            emoji: '👍',
-                            title: this.$t('popup_deleted_plan.title'),
-                            message: this.$t('popup_deleted_plan.message'),
-                        })
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('popup_deleted_plan.title'),
+						})
 
                         this.$router.push({name: 'Plans'})
                     })
                     .catch(() => {
-
-                        this.isSendingRequest = false
-
-                        events.$emit('alert:open', {
-                            title: this.$t('popup_error.title'),
-                            message: this.$t('popup_error.message'),
-                        })
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('popup_error.title'),
+						})
                     })
+					.finally(() => {
+                        this.isSendingRequest = false
+					})
             }
         }
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-</style>
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
index d01a2c58..073b15ba 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
@@ -1,73 +1,42 @@
 <template>
-    <PageTab>
-        <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form form-fixed-width">
-            <PageTabGroup>
-                <FormLabel>
-                    {{ $t('admin_page_plans.form.title_details') }}
-                </FormLabel>
+	<div class="card shadow-card">
+		<FormLabel>
+			{{ $t('admin_page_plans.form.title_details') }}
+		</FormLabel>
 
-                <!--Visible-->
-                <div class="block-wrapper">
-                    <div class="input-wrapper">
-                        <div class="inline-wrapper">
-                            <div class="switch-label">
-                                <label class="input-label">{{ $t('admin_page_plans.form.status') }}:</label>
-                                <small class="input-help">{{ $t('admin_page_plans.form.status_help') }}</small>
-                            </div>
-                            <SwitchInput @input="changeStatus" class="switch" :state="plan.attributes.status"/>
-                        </div>
-                    </div>
-                </div>
+		<!--Visible-->
+		<AppInputSwitch :title="$t('admin_page_plans.form.status')" :description="$t('admin_page_plans.form.status_help')">
+			<SwitchInput @input="$updateText('/admin/plans/' + $route.params.id, 'visible', plan.attributes.visible)" v-model="visible" class="switch" :state="plan.attributes.visible"/>
+		</AppInputSwitch>
 
-                <!--Name-->
-                <div class="block-wrapper">
-                    <label>{{ $t('admin_page_plans.form.name') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
-                        <input @input="$updateText('/admin/plans/' + $route.params.id, 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
+		<!--Name-->
+		<AppInputText :title="$t('admin_page_plans.form.name')">
+			<input @input="$updateText('/admin/plans/' + $route.params.id, 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" class="focus-border-theme input-dark"/>
+		</AppInputText>
 
-                <!--Description-->
-                <div class="block-wrapper">
-                    <label>{{ $t('admin_page_plans.form.description') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
-                        <textarea @input="$updateText('/admin/plans/' + $route.params.id, 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
+		<!--Description-->
+		<AppInputText :title="$t('admin_page_plans.form.description')">
+			<textarea @input="$updateText('/admin/plans/' + $route.params.id, 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" class="focus-border-theme input-dark"></textarea>
+		</AppInputText>
 
-                <!--Storage Capacity-->
-                <div class="block-wrapper">
-                    <label>{{ $t('admin_page_plans.form.storage') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage capacity" rules="required" v-slot="{ errors }">
-                        <input @input="$updateText('/admin/plans/' + $route.params.id, 'capacity', plan.attributes.capacity)" v-model="plan.attributes.capacity" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                    <small class="input-help">
-                        {{ $t('admin_page_plans.form.storage_helper') }}
-                    </small>
-                </div>
+		<!--Storage Capacity-->
+		<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')" is-last="">
+			<input @input="$updateText('/admin/plans/' + $route.params.id, 'capacity', plan.attributes.capacity)" v-model="plan.attributes.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" class="focus-border-theme input-dark"/>
+		</AppInputText>
 
-                <InfoBox>
-                    <p>{{ $t('admin_page_plans.disclaimer_edit_price') }}</p>
-                </InfoBox>
-            </PageTabGroup>
-        </ValidationObserver>
-    </PageTab>
+		<InfoBox style="margin-bottom: 0">
+			<p>{{ $t('admin_page_plans.disclaimer_edit_price') }}</p>
+		</InfoBox>
+	</div>
 </template>
 
 <script>
-    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
     import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
     import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
+	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch"
     import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
+	import AppInputText from "../../../../components/Admin/AppInputText"
     import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-    import {required} from 'vee-validate/dist/rules'
 
     export default {
         name: 'PlanSettings',
@@ -75,38 +44,20 @@
             'plan'
         ],
         components: {
-            ValidationProvider,
-            ValidationObserver,
-            PageTabGroup,
+			AppInputSwitch,
+			AppInputText,
             SwitchInput,
             SelectInput,
-            ButtonBase,
             FormLabel,
-            SetupBox,
-            required,
             InfoBox,
-            PageTab,
         },
         data() {
-            return {
-                isLoading: false,
-                isSendingRequest: false,
-            }
-        },
-        methods: {
-            changeStatus(val) {
-                this.$updateText('/admin/plans/' + this.$route.params.id, 'is_active', val)
-            }
-        }
-    }
+			return {
+				visible: undefined
+			}
+		},
+		created() {
+			this.visible = this.plan.attributes.visible
+		}
+	}
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-</style>
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
index 592ee7d2..6ca04b70 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
@@ -1,50 +1,67 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <PageTabGroup>
-            <DatatableWrapper @init="isLoading = false" :api="`/api/admin/plans/${this.$route.params.id}/subscribers`" :paginator="false" :columns="columns" :data="subscribers" class="table">
+		<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscription/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card">
 
-                <!--Table data content-->
-                <template slot-scope="{ row }">
-                    <tr>
-                        <td>
-                            <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
-                                <DatatableCellImage
-                                        image-size="small"
-                                        :image="row.data.relationships.settings.data.attributes.avatar.sm"
-                                        :title="row.data.relationships.settings.data.attributes.name"
-                                />
-                            </router-link>
-                        </td>
-                        <td>
-                            <span class="cell-item">
-                                {{ row.data.attributes.storage.used }}%
-                            </span>
-                        </td>
-                        <td>
-                            <div class="action-icons">
-                                <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
-                                    <edit-2-icon size="15" class="icon icon-edit" />
-                                </router-link>
-                                <router-link :to="{name: 'UserDelete', params: {id: row.data.id}}">
-                                    <trash2-icon size="15" class="icon icon-trash" />
-                                </router-link>
-                            </div>
-                        </td>
-                    </tr>
-                </template>
+			<!--Table data content-->
+			<template slot-scope="{ row }">
+				<tr class="border-b dark:border-opacity-5 border-light border-dashed">
+					<td>
+						<div class="flex items-center">
+							<MemberAvatar
+								:is-border="false"
+								:size="36"
+								:member="row.data.relationships.user"
+							/>
+							<div class="ml-3">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+									{{ row.data.relationships.user.data.attributes.name }}
+								</b>
+								<span class="block text-xs dark:text-gray-500 text-gray-600">
+									{{ row.data.relationships.user.data.attributes.email }}
+								</span>
+							</div>
+						</div>
+					</td>
+					<td>
+						<ColorLabel :color="getSubscriptionStatusColor(row.data.attributes.status)">
+							{{ row.data.attributes.status }}
+						</ColorLabel>
+					</td>
+					<td class="py-5">
+						<span class="text-sm font-bold capitalize text-limit" style="max-width: 160px">
+							{{ row.data.attributes.name }}
+						</span>
+					</td>
+					<td>
+						<span class="text-sm font-bold">
+							<!--todo: update renew attribute-->
+							{{ row.data.attributes.renews_at ? row.data.attributes.renews_at : row.data.attributes.created_at }}
+						</span>
+					</td>
+					<td>
+						<span class="text-sm font-bold">
+							{{ row.data.attributes.ends_at ? row.data.attributes.ends_at : '-' }}
+						</span>
+					</td>
+					<td class="text-right">
+						<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
+					</td>
+				</tr>
+			</template>
 
-                <!--Empty page-->
-                <template v-slot:empty-page>
-                    <InfoBox>
-                        <p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
-                    </InfoBox>
-                </template>
-            </DatatableWrapper>
-        </PageTabGroup>
+			<!--Empty page-->
+			<template v-slot:empty-page>
+				<InfoBox style="margin-bottom: 0">
+					<p>{{ $t('admin_page_plans.subscribers.empty') }}</p>
+				</InfoBox>
+			</template>
+		</DatatableWrapper>
     </PageTab>
 </template>
 
 <script>
+	import ColorLabel from "../../../../components/Others/ColorLabel";
+	import MemberAvatar from "../../../../components/FilesView/MemberAvatar";
     import DatatableCellImage from '/resources/js/components/Others/Tables/DatatableCellImage'
     import {DownloadCloudIcon, Edit2Icon, Trash2Icon} from "vue-feather-icons"
     import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
@@ -60,6 +77,8 @@
             DownloadCloudIcon,
             DatatableWrapper,
             PageTabGroup,
+			MemberAvatar,
+			ColorLabel,
             Trash2Icon,
             Edit2Icon,
             PageTab,
@@ -76,12 +95,25 @@
                         sortable: true
                     },
                     {
-                        label: this.$t('admin_page_user.table.storage_used'),
+                        label: this.$t('Status'),
                         field: 'used',
                         sortable: false
                     },
                     {
-                        label: this.$t('admin_page_user.table.action'),
+                        label: this.$t('Plan'),
+                        field: 'name',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('Renews At'),
+                        sortable: false
+                    },
+                    {
+                        label: this.$t('Ends At'),
+                        sortable: false
+                    },
+                    {
+                        label: this.$t('Service'),
                         sortable: false
                     },
                 ],
@@ -89,13 +121,3 @@
         },
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-</style>