diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index b16c8202..765ecb6b 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -2,13 +2,13 @@
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
     "/css/tailwind.css": "/css/tailwind.css",
-    "/chunks/admin.js": "/chunks/admin.js?id=4efeccd4e4dc2b765b8a",
+    "/chunks/admin.js": "/chunks/admin.js?id=be1c010006b71bcaf568",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=6e28465565ea92af804f",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunk~9f5cf693.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app-others~chunk~9f5cf693.js?id=b315e8dcb5e79c1c8e7c",
     "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a2d1c36e.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a2d1c36e.js?id=bbdda6115aa358c2209e",
     "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app~f4e3acb1.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~chunks/app~f4e3acb1.js?id=08ee54ab4c19d49dc342",
     "/chunks/admin~chunks/app-language~chunks/files~chunks/my-shared-items~chunks/pages~chunks/plans~chunk~31d2e0e5.js": "/chunks/admin~chunks/app-language~chunks/files~chunks/my-shared-items~chunks/pages~chunks/plans~chunk~31d2e0e5.js?id=45350439fb9bcb879f5b",
-    "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js": "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js?id=0ae7b3d840e0e20fe358",
+    "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js": "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.js?id=c6c725d13c180d43632a",
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~673d1ac3.js?id=34845d890e9e65d2adc0",
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/settin~97130d1f.js?id=41e0723e62e5d0d133fd",
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=3d3f164e568760d8a9cf",
@@ -26,15 +26,15 @@
     "/chunks/app-others~chunks/payments/settings.js": "/chunks/app-others~chunks/payments/settings.js?id=a9748a3aa53098b75df6",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=62ce73b2d66590912cbc",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=eccbfcc8ca52a7739539",
-    "/chunks/billing.js": "/chunks/billing.js?id=f35adaf4630e2cf78891",
+    "/chunks/billing.js": "/chunks/billing.js?id=9b7a2baac9a321749fd8",
     "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=8d98791de2ec92174b6e",
     "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/payments/settings~chunks/plan-su~cdf8788b.js": "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/payments/settings~chunks/plan-su~cdf8788b.js?id=4714188c1549bd8829ab",
     "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js": "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js?id=669bd6d15cfa4c6e75df",
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=8d151dcf54d769f95c78",
     "/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=ff5ae86590a117661ac1",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=1e46584a4f5562b7a8b5",
-    "/chunks/dashboard~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/plan-subscribers~chunks/users.js?id=9bb04319263a6c0742f0",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=68bea69aaed67fa533bb",
+    "/chunks/dashboard~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/plan-subscribers~chunks/users.js?id=42c543286b06a591f0b7",
     "/chunks/database.js": "/chunks/database.js?id=38021b64e8ab2d213c19",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
     "/chunks/email-verified.js": "/chunks/email-verified.js?id=fcba9acf60a855b730d5",
@@ -48,11 +48,11 @@
     "/chunks/homepage.js": "/chunks/homepage.js?id=6a14173a7751010222ed",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=103caafd51390f5c7896",
     "/chunks/invitation.js": "/chunks/invitation.js?id=ce0aa06dd9c62f505b9b",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=2e6f38d77e5dfd6cd38b",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=2a61a6196dc553fe193d",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ef0a2dbe808eaee42c1f",
     "/chunks/not-found.js": "/chunks/not-found.js?id=bd6cc309172531900b13",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=1ce1c4f40fbb672c6c3e",
-    "/chunks/pages.js": "/chunks/pages.js?id=188434ad0acb6921abdd",
+    "/chunks/pages.js": "/chunks/pages.js?id=1ce97ecc061c94d203c3",
     "/chunks/payments.js": "/chunks/payments.js?id=56a633689fc98ab71b92",
     "/chunks/payments/billings.js": "/chunks/payments/billings.js?id=21c286ff2723603036ea",
     "/chunks/payments/settings.js": "/chunks/payments/settings.js?id=2ae059b694da0f255e47",
@@ -61,15 +61,15 @@
     "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=22a5c4fb60a77b72cd4e",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=8289ae01c7e56404239b",
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=7f623c8a4002f17eecef",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=24e47be06cbf2fedbf05",
-    "/chunks/plans.js": "/chunks/plans.js?id=20dc794bb02887a46f04",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=58d2f439052b4a01bb78",
+    "/chunks/plans.js": "/chunks/plans.js?id=1ac621b39dd45f6d33de",
     "/chunks/platform.js": "/chunks/platform.js?id=c571ce8c6e3dcdc87c31",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=be5c13376dec07e289ff",
     "/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=66e964be4ab127b1f723",
     "/chunks/profile.js": "/chunks/profile.js?id=675055279ec50a36de80",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=d9af0efad2af2679954b",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=8577d4c771602671b38a",
-    "/chunks/settings.js": "/chunks/settings.js?id=ca2f68325d4588952183",
+    "/chunks/settings.js": "/chunks/settings.js?id=d0439508484fe741322e",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=1aeaaad4a4c6b719d31e",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=d1504f06d93b88572249",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=aafc9cd6aa47b01bc25a",
@@ -86,7 +86,7 @@
     "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=a91cba41a099c8ecad24",
     "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=5238c711e2b9af197b22",
     "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=3fffee3b8bab3e23ba18",
-    "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=35bad12ad938c334ce10",
+    "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=d36f7ea9fc48b0226565",
     "/chunks/team-folders.js": "/chunks/team-folders.js?id=d0b1bb2f9e63fa36dd50",
     "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=145f1b0766214eee1aad",
     "/chunks/trash.js": "/chunks/trash.js?id=1f5f349fb9ec23ba2e93",
@@ -96,8 +96,8 @@
     "/chunks/user-detail.js": "/chunks/user-detail.js?id=1639da11ff1a649d6dbf",
     "/chunks/user-password.js": "/chunks/user-password.js?id=979fd45e82e25a8445b4",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=e6ccfc8aa085e00af593",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=ab860189f1c734dc042c",
-    "/chunks/users.js": "/chunks/users.js?id=cafd1ff7bc92dfe45f69",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=fc53187b5026f2a610dd",
+    "/chunks/users.js": "/chunks/users.js?id=216e24e62ae9d5f79f2d",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~9be62a3c.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~9be62a3c.js?id=f6dd33e4294d33d5e335",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~d86004d6.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-email~chunks/app-index~ch~d86004d6.js?id=b40f5f673ec2ab7de20b",
     "/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=ab29ab0a0c2d5a40b39d",
@@ -158,5 +158,224 @@
     "/chunks/settings.0696c817c6f54b57c8fe.hot-update.js": "/chunks/settings.0696c817c6f54b57c8fe.hot-update.js",
     "/chunks/admin.9969ae991f4da48670e6.hot-update.js": "/chunks/admin.9969ae991f4da48670e6.hot-update.js",
     "/chunks/admin.6b88b55bc84662cb336d.hot-update.js": "/chunks/admin.6b88b55bc84662cb336d.hot-update.js",
-    "/chunks/admin.8b1fdcfb0752bdf86031.hot-update.js": "/chunks/admin.8b1fdcfb0752bdf86031.hot-update.js"
+    "/chunks/admin.8b1fdcfb0752bdf86031.hot-update.js": "/chunks/admin.8b1fdcfb0752bdf86031.hot-update.js",
+    "/chunks/user-subscription.6bbc6e4daa454ecb1502.hot-update.js": "/chunks/user-subscription.6bbc6e4daa454ecb1502.hot-update.js",
+    "/chunks/user-subscription.db2a905b056f43af9577.hot-update.js": "/chunks/user-subscription.db2a905b056f43af9577.hot-update.js",
+    "/chunks/billing.98fabee3ada8f5432f41.hot-update.js": "/chunks/billing.98fabee3ada8f5432f41.hot-update.js",
+    "/chunks/dashboard.98fabee3ada8f5432f41.hot-update.js": "/chunks/dashboard.98fabee3ada8f5432f41.hot-update.js",
+    "/chunks/invoices.98fabee3ada8f5432f41.hot-update.js": "/chunks/invoices.98fabee3ada8f5432f41.hot-update.js",
+    "/chunks/pages.98fabee3ada8f5432f41.hot-update.js": "/chunks/pages.98fabee3ada8f5432f41.hot-update.js",
+    "/chunks/subscriptions.98fabee3ada8f5432f41.hot-update.js": "/chunks/subscriptions.98fabee3ada8f5432f41.hot-update.js",
+    "/chunks/user-subscription.98fabee3ada8f5432f41.hot-update.js": "/chunks/user-subscription.98fabee3ada8f5432f41.hot-update.js",
+    "/chunks/user-subscription.a55892bd0b64a07bea2e.hot-update.js": "/chunks/user-subscription.a55892bd0b64a07bea2e.hot-update.js",
+    "/chunks/user-subscription.356efc91322b978ba566.hot-update.js": "/chunks/user-subscription.356efc91322b978ba566.hot-update.js",
+    "/chunks/user-subscription.723ee6ee97db5be09137.hot-update.js": "/chunks/user-subscription.723ee6ee97db5be09137.hot-update.js",
+    "/chunks/user-subscription.182d95d4734b0dd71da4.hot-update.js": "/chunks/user-subscription.182d95d4734b0dd71da4.hot-update.js",
+    "/chunks/user-subscription.7d2aad0a845f7ac55eef.hot-update.js": "/chunks/user-subscription.7d2aad0a845f7ac55eef.hot-update.js",
+    "/chunks/user-subscription.5fd55d71620924029c69.hot-update.js": "/chunks/user-subscription.5fd55d71620924029c69.hot-update.js",
+    "/chunks/user-subscription.ea70e863d93bc84a7a4c.hot-update.js": "/chunks/user-subscription.ea70e863d93bc84a7a4c.hot-update.js",
+    "/chunks/billing.6fd7ccfd387093a3b6ad.hot-update.js": "/chunks/billing.6fd7ccfd387093a3b6ad.hot-update.js",
+    "/chunks/billing.da5be93b58a6bc4d90c2.hot-update.js": "/chunks/billing.da5be93b58a6bc4d90c2.hot-update.js",
+    "/js/main.0dd4f3cf95bf2f0b13fb.hot-update.js": "/js/main.0dd4f3cf95bf2f0b13fb.hot-update.js",
+    "/chunks/billing.0dd4f3cf95bf2f0b13fb.hot-update.js": "/chunks/billing.0dd4f3cf95bf2f0b13fb.hot-update.js",
+    "/chunks/billing~chunks/user-subscription.js": "/chunks/billing~chunks/user-subscription.js?id=06d54a98712165372021",
+    "/chunks/user-subscription.0dd4f3cf95bf2f0b13fb.hot-update.js": "/chunks/user-subscription.0dd4f3cf95bf2f0b13fb.hot-update.js",
+    "/chunks/user-subscription.6ffe92f6f9a606fd24e0.hot-update.js": "/chunks/user-subscription.6ffe92f6f9a606fd24e0.hot-update.js",
+    "/chunks/user-subscription.d969bbc86cabe0e335f6.hot-update.js": "/chunks/user-subscription.d969bbc86cabe0e335f6.hot-update.js",
+    "/chunks/user-subscription.13cf756800531ff3c91f.hot-update.js": "/chunks/user-subscription.13cf756800531ff3c91f.hot-update.js",
+    "/chunks/billing.4a468a5d133ec9337e77.hot-update.js": "/chunks/billing.4a468a5d133ec9337e77.hot-update.js",
+    "/chunks/billing~chunks/user-subscription.647d0325b35fcc78db46.hot-update.js": "/chunks/billing~chunks/user-subscription.647d0325b35fcc78db46.hot-update.js",
+    "/js/main.357e8197c710600d6c83.hot-update.js": "/js/main.357e8197c710600d6c83.hot-update.js",
+    "/chunks/billing.357e8197c710600d6c83.hot-update.js": "/chunks/billing.357e8197c710600d6c83.hot-update.js",
+    "/chunks/user-subscription.357e8197c710600d6c83.hot-update.js": "/chunks/user-subscription.357e8197c710600d6c83.hot-update.js",
+    "/js/main.67389814c1561990efe0.hot-update.js": "/js/main.67389814c1561990efe0.hot-update.js",
+    "/js/main.67e5d55e6f6909293b64.hot-update.js": "/js/main.67e5d55e6f6909293b64.hot-update.js",
+    "/js/main.44f03f56615bd7507b2d.hot-update.js": "/js/main.44f03f56615bd7507b2d.hot-update.js",
+    "/chunks/billing.44f03f56615bd7507b2d.hot-update.js": "/chunks/billing.44f03f56615bd7507b2d.hot-update.js",
+    "/chunks/user-subscription.44f03f56615bd7507b2d.hot-update.js": "/chunks/user-subscription.44f03f56615bd7507b2d.hot-update.js",
+    "/chunks/billing.4d9f40381ebcc8b8033b.hot-update.js": "/chunks/billing.4d9f40381ebcc8b8033b.hot-update.js",
+    "/chunks/user-subscription.4d9f40381ebcc8b8033b.hot-update.js": "/chunks/user-subscription.4d9f40381ebcc8b8033b.hot-update.js",
+    "/js/main.a489697ac52fa38f59b2.hot-update.js": "/js/main.a489697ac52fa38f59b2.hot-update.js",
+    "/chunks/user-subscription.2f4df3c3911d920ab117.hot-update.js": "/chunks/user-subscription.2f4df3c3911d920ab117.hot-update.js",
+    "/chunks/user-subscription.e98ac019bcfc40fc40a5.hot-update.js": "/chunks/user-subscription.e98ac019bcfc40fc40a5.hot-update.js",
+    "/chunks/user-subscription.428b7965f96b0bb29ff3.hot-update.js": "/chunks/user-subscription.428b7965f96b0bb29ff3.hot-update.js",
+    "/chunks/user-subscription.0e94bdcb7952a04b420c.hot-update.js": "/chunks/user-subscription.0e94bdcb7952a04b420c.hot-update.js",
+    "/chunks/user-subscription.2febb4d48277bebf8c1a.hot-update.js": "/chunks/user-subscription.2febb4d48277bebf8c1a.hot-update.js",
+    "/chunks/user-subscription.ecd239b04518bafc9123.hot-update.js": "/chunks/user-subscription.ecd239b04518bafc9123.hot-update.js",
+    "/chunks/user-subscription.2528a70d758e29478f9e.hot-update.js": "/chunks/user-subscription.2528a70d758e29478f9e.hot-update.js",
+    "/chunks/user-subscription.1f36cd69bbb3070b9352.hot-update.js": "/chunks/user-subscription.1f36cd69bbb3070b9352.hot-update.js",
+    "/chunks/user-subscription.cd38eae7149ae4749cf2.hot-update.js": "/chunks/user-subscription.cd38eae7149ae4749cf2.hot-update.js",
+    "/chunks/user-subscription.badbf9d35c0189487af9.hot-update.js": "/chunks/user-subscription.badbf9d35c0189487af9.hot-update.js",
+    "/chunks/user-subscription.d109d3aafe728c498033.hot-update.js": "/chunks/user-subscription.d109d3aafe728c498033.hot-update.js",
+    "/chunks/user-subscription.78a6168595117b0cae68.hot-update.js": "/chunks/user-subscription.78a6168595117b0cae68.hot-update.js",
+    "/chunks/user-subscription.5b66ae1a1125c4745a6d.hot-update.js": "/chunks/user-subscription.5b66ae1a1125c4745a6d.hot-update.js",
+    "/chunks/user-subscription.ae7671153fdd550e7530.hot-update.js": "/chunks/user-subscription.ae7671153fdd550e7530.hot-update.js",
+    "/chunks/user-subscription.0161805c14c752bd9f69.hot-update.js": "/chunks/user-subscription.0161805c14c752bd9f69.hot-update.js",
+    "/chunks/user-subscription.e6869bd71d2ed8d961fc.hot-update.js": "/chunks/user-subscription.e6869bd71d2ed8d961fc.hot-update.js",
+    "/chunks/user-subscription.21484bf6d37ffcda8fde.hot-update.js": "/chunks/user-subscription.21484bf6d37ffcda8fde.hot-update.js",
+    "/chunks/user-subscription.e14a4f1d043083cca7c7.hot-update.js": "/chunks/user-subscription.e14a4f1d043083cca7c7.hot-update.js",
+    "/chunks/user-subscription.0931781723971cb5066a.hot-update.js": "/chunks/user-subscription.0931781723971cb5066a.hot-update.js",
+    "/chunks/user-subscription.42a3fc3efb2d20a105d3.hot-update.js": "/chunks/user-subscription.42a3fc3efb2d20a105d3.hot-update.js",
+    "/chunks/billing.d76b100afa4d1df3a98d.hot-update.js": "/chunks/billing.d76b100afa4d1df3a98d.hot-update.js",
+    "/chunks/user-subscription.d76b100afa4d1df3a98d.hot-update.js": "/chunks/user-subscription.d76b100afa4d1df3a98d.hot-update.js",
+    "/chunks/billing.620b21a29cd9dedefe57.hot-update.js": "/chunks/billing.620b21a29cd9dedefe57.hot-update.js",
+    "/chunks/admin.58932178dae35d376d8f.hot-update.js": "/chunks/admin.58932178dae35d376d8f.hot-update.js",
+    "/chunks/settings.58932178dae35d376d8f.hot-update.js": "/chunks/settings.58932178dae35d376d8f.hot-update.js",
+    "/chunks/billing~chunks/user-subscription.30251a9536e12cd7788a.hot-update.js": "/chunks/billing~chunks/user-subscription.30251a9536e12cd7788a.hot-update.js",
+    "/chunks/billing~chunks/user-subscription.3f71e40d63f307e4d8a5.hot-update.js": "/chunks/billing~chunks/user-subscription.3f71e40d63f307e4d8a5.hot-update.js",
+    "/chunks/user-subscription.3f71e40d63f307e4d8a5.hot-update.js": "/chunks/user-subscription.3f71e40d63f307e4d8a5.hot-update.js",
+    "/chunks/billing.520342878b37f4110ed4.hot-update.js": "/chunks/billing.520342878b37f4110ed4.hot-update.js",
+    "/chunks/user-subscription.520342878b37f4110ed4.hot-update.js": "/chunks/user-subscription.520342878b37f4110ed4.hot-update.js",
+    "/chunks/invoices.32cebb2ef2e5f0cf9b35.hot-update.js": "/chunks/invoices.32cebb2ef2e5f0cf9b35.hot-update.js",
+    "/js/main.d6d1b0a85f1ba8418452.hot-update.js": "/js/main.d6d1b0a85f1ba8418452.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.js?id=0a793b45760336bd8c0a",
+    "/chunks/invoices.d6d1b0a85f1ba8418452.hot-update.js": "/chunks/invoices.d6d1b0a85f1ba8418452.hot-update.js",
+    "/chunks/invoices.2f88e2df6b3b7b3a2035.hot-update.js": "/chunks/invoices.2f88e2df6b3b7b3a2035.hot-update.js",
+    "/chunks/invoices.9069f4407189d8ec46d0.hot-update.js": "/chunks/invoices.9069f4407189d8ec46d0.hot-update.js",
+    "/chunks/invoices.636bab7b49a9dc7e2809.hot-update.js": "/chunks/invoices.636bab7b49a9dc7e2809.hot-update.js",
+    "/chunks/invoices.63246abeddd12ca5c910.hot-update.js": "/chunks/invoices.63246abeddd12ca5c910.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.c67d11e8645f47fa6d11.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.c67d11e8645f47fa6d11.hot-update.js",
+    "/chunks/invoices.c67d11e8645f47fa6d11.hot-update.js": "/chunks/invoices.c67d11e8645f47fa6d11.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.005f6d706ceb17be2db1.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.005f6d706ceb17be2db1.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.afbd6f40805528be679d.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.afbd6f40805528be679d.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.943fd8704fb25b6b806b.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.943fd8704fb25b6b806b.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.9ef3f9100b73c09e3fe0.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.9ef3f9100b73c09e3fe0.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.e1a16a30955b8019b1a1.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.e1a16a30955b8019b1a1.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.547294033452d5a107df.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.547294033452d5a107df.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.53138ac9d5ab21ca59ec.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.53138ac9d5ab21ca59ec.hot-update.js",
+    "/chunks/invoices.3b9c45b07572c18275d0.hot-update.js": "/chunks/invoices.3b9c45b07572c18275d0.hot-update.js",
+    "/chunks/invoices.475cc78d986ab5118ecd.hot-update.js": "/chunks/invoices.475cc78d986ab5118ecd.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.91045dc5d2ffb5e725f3.hot-update.js": "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.91045dc5d2ffb5e725f3.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.91045dc5d2ffb5e725f3.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.91045dc5d2ffb5e725f3.hot-update.js",
+    "/chunks/dashboard~chunks/plan-subscribers~chunks/users.91045dc5d2ffb5e725f3.hot-update.js": "/chunks/dashboard~chunks/plan-subscribers~chunks/users.91045dc5d2ffb5e725f3.hot-update.js",
+    "/chunks/subscriptions.91045dc5d2ffb5e725f3.hot-update.js": "/chunks/subscriptions.91045dc5d2ffb5e725f3.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.07a7b15d8814d8e8f0f6.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.07a7b15d8814d8e8f0f6.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.ee2b765a09a76fb768f1.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.ee2b765a09a76fb768f1.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.a813ba78902dc5b0c3b9.hot-update.js": "/chunks/admin~chunks/files~chunks/invitation~chunks/my-shared-items~chunks/platform~chunks/recent-upl~dfa67595.a813ba78902dc5b0c3b9.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.a813ba78902dc5b0c3b9.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.a813ba78902dc5b0c3b9.hot-update.js",
+    "/chunks/dashboard~chunks/plan-subscribers~chunks/users.a813ba78902dc5b0c3b9.hot-update.js": "/chunks/dashboard~chunks/plan-subscribers~chunks/users.a813ba78902dc5b0c3b9.hot-update.js",
+    "/chunks/subscriptions.a813ba78902dc5b0c3b9.hot-update.js": "/chunks/subscriptions.a813ba78902dc5b0c3b9.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.8ebed64fa590cefdd5a9.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.8ebed64fa590cefdd5a9.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.79723865fe6ca6b1c584.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.79723865fe6ca6b1c584.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.6df84cfbb390f5620eb7.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.6df84cfbb390f5620eb7.hot-update.js",
+    "/chunks/invoices.8383cfffddd11641d2fe.hot-update.js": "/chunks/invoices.8383cfffddd11641d2fe.hot-update.js",
+    "/chunks/invoices.3256bff6c59fdd99feed.hot-update.js": "/chunks/invoices.3256bff6c59fdd99feed.hot-update.js",
+    "/chunks/invoices.747bc72e2ebe7215c598.hot-update.js": "/chunks/invoices.747bc72e2ebe7215c598.hot-update.js",
+    "/chunks/user-subscription.fafaed46680bab1171c2.hot-update.js": "/chunks/user-subscription.fafaed46680bab1171c2.hot-update.js",
+    "/js/main.cac420632425cd0e71af.hot-update.js": "/js/main.cac420632425cd0e71af.hot-update.js",
+    "/chunks/billing.3808a73d72d860922d94.hot-update.js": "/chunks/billing.3808a73d72d860922d94.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.c36648089362c266d28b.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.c36648089362c266d28b.hot-update.js",
+    "/chunks/billing~chunks/invoices~chunks/user-subscription.069e8717f8985f2e2ecd.hot-update.js": "/chunks/billing~chunks/invoices~chunks/user-subscription.069e8717f8985f2e2ecd.hot-update.js",
+    "/chunks/dashboard.9c676c82e66d5b746e78.hot-update.js": "/chunks/dashboard.9c676c82e66d5b746e78.hot-update.js",
+    "/chunks/dashboard.a2458bc353058735795a.hot-update.js": "/chunks/dashboard.a2458bc353058735795a.hot-update.js",
+    "/chunks/dashboard.4db87a6631390d4df24e.hot-update.js": "/chunks/dashboard.4db87a6631390d4df24e.hot-update.js",
+    "/chunks/dashboard.155b6facd082d6cdf783.hot-update.js": "/chunks/dashboard.155b6facd082d6cdf783.hot-update.js",
+    "/chunks/dashboard.78660bef3aad1110dd7d.hot-update.js": "/chunks/dashboard.78660bef3aad1110dd7d.hot-update.js",
+    "/chunks/plan-subscribers.78660bef3aad1110dd7d.hot-update.js": "/chunks/plan-subscribers.78660bef3aad1110dd7d.hot-update.js",
+    "/chunks/subscriptions.78660bef3aad1110dd7d.hot-update.js": "/chunks/subscriptions.78660bef3aad1110dd7d.hot-update.js",
+    "/chunks/users.78660bef3aad1110dd7d.hot-update.js": "/chunks/users.78660bef3aad1110dd7d.hot-update.js",
+    "/chunks/dashboard.973f9952e4e735e21182.hot-update.js": "/chunks/dashboard.973f9952e4e735e21182.hot-update.js",
+    "/chunks/dashboard.39ce7f55ff6554e078e9.hot-update.js": "/chunks/dashboard.39ce7f55ff6554e078e9.hot-update.js",
+    "/chunks/dashboard.40a23cbdb5c2c723f6df.hot-update.js": "/chunks/dashboard.40a23cbdb5c2c723f6df.hot-update.js",
+    "/chunks/dashboard.530db57e8392d4941f47.hot-update.js": "/chunks/dashboard.530db57e8392d4941f47.hot-update.js",
+    "/chunks/dashboard.033021b607ba3fc1cac6.hot-update.js": "/chunks/dashboard.033021b607ba3fc1cac6.hot-update.js",
+    "/chunks/dashboard.67fb55097b2e16c79584.hot-update.js": "/chunks/dashboard.67fb55097b2e16c79584.hot-update.js",
+    "/chunks/dashboard.9067a8e40010fc6c536e.hot-update.js": "/chunks/dashboard.9067a8e40010fc6c536e.hot-update.js",
+    "/chunks/dashboard.af96e58ff1ffe917c313.hot-update.js": "/chunks/dashboard.af96e58ff1ffe917c313.hot-update.js",
+    "/chunks/dashboard.a2ca18a17f08c64da26f.hot-update.js": "/chunks/dashboard.a2ca18a17f08c64da26f.hot-update.js",
+    "/chunks/dashboard.ecd862ee55743229d9c0.hot-update.js": "/chunks/dashboard.ecd862ee55743229d9c0.hot-update.js",
+    "/chunks/dashboard.031e6d6cb9fda4b80014.hot-update.js": "/chunks/dashboard.031e6d6cb9fda4b80014.hot-update.js",
+    "/chunks/dashboard.64026be184dc5410bc24.hot-update.js": "/chunks/dashboard.64026be184dc5410bc24.hot-update.js",
+    "/chunks/dashboard.3cdb6347c7a98d749bf9.hot-update.js": "/chunks/dashboard.3cdb6347c7a98d749bf9.hot-update.js",
+    "/chunks/users.5f581f2b7a3ebe203303.hot-update.js": "/chunks/users.5f581f2b7a3ebe203303.hot-update.js",
+    "/chunks/users.f2e8531eaed2eff45298.hot-update.js": "/chunks/users.f2e8531eaed2eff45298.hot-update.js",
+    "/chunks/pages.495e8b8d22c1e7ff00e6.hot-update.js": "/chunks/pages.495e8b8d22c1e7ff00e6.hot-update.js",
+    "/chunks/users.106b315dc90346e188c6.hot-update.js": "/chunks/users.106b315dc90346e188c6.hot-update.js",
+    "/chunks/users.f0f973ad2b750a0ddb6d.hot-update.js": "/chunks/users.f0f973ad2b750a0ddb6d.hot-update.js",
+    "/chunks/dashboard.4a6b8c106a18199e0cd5.hot-update.js": "/chunks/dashboard.4a6b8c106a18199e0cd5.hot-update.js",
+    "/chunks/pages.369590145a54c9938b83.hot-update.js": "/chunks/pages.369590145a54c9938b83.hot-update.js",
+    "/chunks/pages.b3049b3a6d87ae531a75.hot-update.js": "/chunks/pages.b3049b3a6d87ae531a75.hot-update.js",
+    "/chunks/pages.6384b717804d2fa0f705.hot-update.js": "/chunks/pages.6384b717804d2fa0f705.hot-update.js",
+    "/chunks/pages.172ede2b74a040f09e90.hot-update.js": "/chunks/pages.172ede2b74a040f09e90.hot-update.js",
+    "/chunks/plan-subscribers.88f25fc52f21f694ec5f.hot-update.js": "/chunks/plan-subscribers.88f25fc52f21f694ec5f.hot-update.js",
+    "/chunks/plan-subscribers.2f182b935e2b133295ee.hot-update.js": "/chunks/plan-subscribers.2f182b935e2b133295ee.hot-update.js",
+    "/chunks/plans.36f738ff5d13e0eb876a.hot-update.js": "/chunks/plans.36f738ff5d13e0eb876a.hot-update.js",
+    "/chunks/plans.ea38888e45c430e6839b.hot-update.js": "/chunks/plans.ea38888e45c430e6839b.hot-update.js",
+    "/chunks/plans.80432946246c8b633cc5.hot-update.js": "/chunks/plans.80432946246c8b633cc5.hot-update.js",
+    "/chunks/invoices.a1509c7a588987fd606a.hot-update.js": "/chunks/invoices.a1509c7a588987fd606a.hot-update.js",
+    "/chunks/invoices.0c0f4c5311df11db30a0.hot-update.js": "/chunks/invoices.0c0f4c5311df11db30a0.hot-update.js",
+    "/chunks/invoices.2641d3bebc77427dc778.hot-update.js": "/chunks/invoices.2641d3bebc77427dc778.hot-update.js",
+    "/chunks/invoices.8587d6f6cffad4d45732.hot-update.js": "/chunks/invoices.8587d6f6cffad4d45732.hot-update.js",
+    "/chunks/invoices.f142c7a60f8df8483ab1.hot-update.js": "/chunks/invoices.f142c7a60f8df8483ab1.hot-update.js",
+    "/chunks/invoices.8de368c7fdb7b200489d.hot-update.js": "/chunks/invoices.8de368c7fdb7b200489d.hot-update.js",
+    "/js/main.b562eb53cea183f530fc.hot-update.js": "/js/main.b562eb53cea183f530fc.hot-update.js",
+    "/chunks/invoices.7056ba70015088f33899.hot-update.js": "/chunks/invoices.7056ba70015088f33899.hot-update.js",
+    "/chunks/invoices.fc27512cb9a5673ebc11.hot-update.js": "/chunks/invoices.fc27512cb9a5673ebc11.hot-update.js",
+    "/chunks/invoices.5f5dff1981c45f8338f4.hot-update.js": "/chunks/invoices.5f5dff1981c45f8338f4.hot-update.js",
+    "/chunks/invoices.f2635195aab8c55195b7.hot-update.js": "/chunks/invoices.f2635195aab8c55195b7.hot-update.js",
+    "/chunks/invoices.4d7a6f9c5626688888cc.hot-update.js": "/chunks/invoices.4d7a6f9c5626688888cc.hot-update.js",
+    "/chunks/invoices.b416ca585064fb25a7c0.hot-update.js": "/chunks/invoices.b416ca585064fb25a7c0.hot-update.js",
+    "/chunks/invoices.c630320457c2637eefe7.hot-update.js": "/chunks/invoices.c630320457c2637eefe7.hot-update.js",
+    "/chunks/invoices.39320b446d7a2c84ac84.hot-update.js": "/chunks/invoices.39320b446d7a2c84ac84.hot-update.js",
+    "/chunks/invoices.19f25afd906187bc2f57.hot-update.js": "/chunks/invoices.19f25afd906187bc2f57.hot-update.js",
+    "/chunks/invoices.714efbc5f28d5996a954.hot-update.js": "/chunks/invoices.714efbc5f28d5996a954.hot-update.js",
+    "/chunks/invoices.a20da3456e60865b222c.hot-update.js": "/chunks/invoices.a20da3456e60865b222c.hot-update.js",
+    "/chunks/invoices.5d6daf6ea5385994d4a0.hot-update.js": "/chunks/invoices.5d6daf6ea5385994d4a0.hot-update.js",
+    "/chunks/invoices.1dff06cea9ecdb9c2239.hot-update.js": "/chunks/invoices.1dff06cea9ecdb9c2239.hot-update.js",
+    "/chunks/invoices.b9811af6de7ff5c2044f.hot-update.js": "/chunks/invoices.b9811af6de7ff5c2044f.hot-update.js",
+    "/chunks/invoices.f419344bf3dfa457b619.hot-update.js": "/chunks/invoices.f419344bf3dfa457b619.hot-update.js",
+    "/chunks/invoices.95dd15a135d661b29e01.hot-update.js": "/chunks/invoices.95dd15a135d661b29e01.hot-update.js",
+    "/chunks/invoices.5902a34b589ab2f67c2e.hot-update.js": "/chunks/invoices.5902a34b589ab2f67c2e.hot-update.js",
+    "/chunks/invoices.7a2639c00f7dbf9b3324.hot-update.js": "/chunks/invoices.7a2639c00f7dbf9b3324.hot-update.js",
+    "/chunks/invoices.76930d528de33222931f.hot-update.js": "/chunks/invoices.76930d528de33222931f.hot-update.js",
+    "/chunks/invoices.d5857ec9be5582050535.hot-update.js": "/chunks/invoices.d5857ec9be5582050535.hot-update.js",
+    "/chunks/invoices.6f65d58de9298945cbc2.hot-update.js": "/chunks/invoices.6f65d58de9298945cbc2.hot-update.js",
+    "/chunks/invoices.116bfd044297a86a9ab1.hot-update.js": "/chunks/invoices.116bfd044297a86a9ab1.hot-update.js",
+    "/chunks/invoices.5b6bfa110dd42d33dad4.hot-update.js": "/chunks/invoices.5b6bfa110dd42d33dad4.hot-update.js",
+    "/chunks/invoices.bd4c3a000f91b2691c32.hot-update.js": "/chunks/invoices.bd4c3a000f91b2691c32.hot-update.js",
+    "/chunks/invoices.e58e15a3306a5610f379.hot-update.js": "/chunks/invoices.e58e15a3306a5610f379.hot-update.js",
+    "/js/main.f16140517ccc8e4afe5f.hot-update.js": "/js/main.f16140517ccc8e4afe5f.hot-update.js",
+    "/chunks/billing.f16140517ccc8e4afe5f.hot-update.js": "/chunks/billing.f16140517ccc8e4afe5f.hot-update.js",
+    "/chunks/invoices.f16140517ccc8e4afe5f.hot-update.js": "/chunks/invoices.f16140517ccc8e4afe5f.hot-update.js",
+    "/chunks/user-subscription.f16140517ccc8e4afe5f.hot-update.js": "/chunks/user-subscription.f16140517ccc8e4afe5f.hot-update.js",
+    "/chunks/invoices.6b8d80da366ba79bf1ba.hot-update.js": "/chunks/invoices.6b8d80da366ba79bf1ba.hot-update.js",
+    "/chunks/invoices.30603c80a0dfb6752b26.hot-update.js": "/chunks/invoices.30603c80a0dfb6752b26.hot-update.js",
+    "/chunks/billing.456aff173b45ec607a5d.hot-update.js": "/chunks/billing.456aff173b45ec607a5d.hot-update.js",
+    "/chunks/billing.2d5aca6a72c7686c2695.hot-update.js": "/chunks/billing.2d5aca6a72c7686c2695.hot-update.js",
+    "/chunks/billing.839956cdc90ecd35eafc.hot-update.js": "/chunks/billing.839956cdc90ecd35eafc.hot-update.js",
+    "/chunks/billing.6b5a8a05bb9036e9f44d.hot-update.js": "/chunks/billing.6b5a8a05bb9036e9f44d.hot-update.js",
+    "/chunks/billing.49d4e171322c6ac3ad87.hot-update.js": "/chunks/billing.49d4e171322c6ac3ad87.hot-update.js",
+    "/js/main.155fff5c6cef9c3728d3.hot-update.js": "/js/main.155fff5c6cef9c3728d3.hot-update.js",
+    "/chunks/billing.0de1e92d6b6b91ebd2ac.hot-update.js": "/chunks/billing.0de1e92d6b6b91ebd2ac.hot-update.js",
+    "/chunks/billing.6d4dce5d18d7513dabe0.hot-update.js": "/chunks/billing.6d4dce5d18d7513dabe0.hot-update.js",
+    "/chunks/billing.5dd21657106f60c05c08.hot-update.js": "/chunks/billing.5dd21657106f60c05c08.hot-update.js",
+    "/chunks/billing.63d54ee44a6d8e5cd509.hot-update.js": "/chunks/billing.63d54ee44a6d8e5cd509.hot-update.js",
+    "/chunks/billing.2e775723ff45e73f6c8a.hot-update.js": "/chunks/billing.2e775723ff45e73f6c8a.hot-update.js",
+    "/chunks/billing.e79f309d2cbcc61b218a.hot-update.js": "/chunks/billing.e79f309d2cbcc61b218a.hot-update.js",
+    "/chunks/billing.791003567c6de993a28f.hot-update.js": "/chunks/billing.791003567c6de993a28f.hot-update.js",
+    "/chunks/billing.0ab5e7b553550471e8fd.hot-update.js": "/chunks/billing.0ab5e7b553550471e8fd.hot-update.js",
+    "/chunks/billing.10c8d5f1fdbc65b788c9.hot-update.js": "/chunks/billing.10c8d5f1fdbc65b788c9.hot-update.js",
+    "/chunks/billing.8be60110728addec4353.hot-update.js": "/chunks/billing.8be60110728addec4353.hot-update.js",
+    "/chunks/billing.e9d9558b73edd6c6cae9.hot-update.js": "/chunks/billing.e9d9558b73edd6c6cae9.hot-update.js",
+    "/chunks/billing.352ae800aac2071d1936.hot-update.js": "/chunks/billing.352ae800aac2071d1936.hot-update.js",
+    "/chunks/billing.5b457608acd917718437.hot-update.js": "/chunks/billing.5b457608acd917718437.hot-update.js",
+    "/chunks/billing.76757fdf45977c834b13.hot-update.js": "/chunks/billing.76757fdf45977c834b13.hot-update.js",
+    "/chunks/billing.50ed085cb028e498822f.hot-update.js": "/chunks/billing.50ed085cb028e498822f.hot-update.js",
+    "/chunks/invoices.50ed085cb028e498822f.hot-update.js": "/chunks/invoices.50ed085cb028e498822f.hot-update.js",
+    "/chunks/user-subscription.50ed085cb028e498822f.hot-update.js": "/chunks/user-subscription.50ed085cb028e498822f.hot-update.js",
+    "/chunks/user-subscription.ce67ba8cb9871729d83e.hot-update.js": "/chunks/user-subscription.ce67ba8cb9871729d83e.hot-update.js",
+    "/chunks/user-subscription.7fa13406d666280c9ea2.hot-update.js": "/chunks/user-subscription.7fa13406d666280c9ea2.hot-update.js",
+    "/chunks/user-subscription.25ffb7e0af6ae21d4ac1.hot-update.js": "/chunks/user-subscription.25ffb7e0af6ae21d4ac1.hot-update.js",
+    "/chunks/user-subscription.bb836be22a14033b9903.hot-update.js": "/chunks/user-subscription.bb836be22a14033b9903.hot-update.js",
+    "/chunks/user-subscription.7ff5c394590838f7e934.hot-update.js": "/chunks/user-subscription.7ff5c394590838f7e934.hot-update.js",
+    "/chunks/user-subscription.e11ca3831cb55215b625.hot-update.js": "/chunks/user-subscription.e11ca3831cb55215b625.hot-update.js",
+    "/chunks/billing.355392b822a699460bf5.hot-update.js": "/chunks/billing.355392b822a699460bf5.hot-update.js",
+    "/chunks/billing.ddda3415cf8e9ba68e91.hot-update.js": "/chunks/billing.ddda3415cf8e9ba68e91.hot-update.js",
+    "/chunks/user-subscription.b10b9686e11201b16b33.hot-update.js": "/chunks/user-subscription.b10b9686e11201b16b33.hot-update.js",
+    "/chunks/subscriptions.323a80a7bddafc8cf177.hot-update.js": "/chunks/subscriptions.323a80a7bddafc8cf177.hot-update.js",
+    "/chunks/plan-subscribers.db32435a365d551be99e.hot-update.js": "/chunks/plan-subscribers.db32435a365d551be99e.hot-update.js",
+    "/chunks/plan-subscribers.4614a1e1688c31c58f73.hot-update.js": "/chunks/plan-subscribers.4614a1e1688c31c58f73.hot-update.js",
+    "/chunks/plan-subscribers.5fb18978de9b73629b06.hot-update.js": "/chunks/plan-subscribers.5fb18978de9b73629b06.hot-update.js",
+    "/chunks/plan-subscribers.ccff2ffcc6d5dde6f5ca.hot-update.js": "/chunks/plan-subscribers.ccff2ffcc6d5dde6f5ca.hot-update.js",
+    "/chunks/plan-subscribers.b11c79b269e209b629ad.hot-update.js": "/chunks/plan-subscribers.b11c79b269e209b629ad.hot-update.js"
 }
diff --git a/resources/js/components/Admin/WidgetLatestRegistrations.vue b/resources/js/components/Admin/WidgetLatestRegistrations.vue
index 0cc3a01a..b5f55023 100644
--- a/resources/js/components/Admin/WidgetLatestRegistrations.vue
+++ b/resources/js/components/Admin/WidgetLatestRegistrations.vue
@@ -1,182 +1,182 @@
 <template>
-	<DatatableWrapper  @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="table table-users mt-6">
+	<DatatableWrapper  @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="overflow-x-auto mt-6">
 		<template slot-scope="{ row }">
-				<!--Not a subscription-->
-				<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed">
-					<td class="py-3">
-						<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
-							<div class="flex items-center">
-								<MemberAvatar
-									:is-border="false"
-									:size="44"
-									:member="row.data.relationships.settings"
-								/>
-								<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.settings.data.attributes.name }}
-									</b>
-									<span class="block text-xs dark:text-gray-500 text-gray-600">
-										{{ row.data.attributes.email }}
-									</span>
-								</div>
+			<!--Not a subscription-->
+			<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+				<td class="py-3 md:pr-1 pr-3">
+					<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
+						<div class="flex items-center">
+							<MemberAvatar
+								:is-border="false"
+								:size="44"
+								:member="row.data.relationships.settings"
+							/>
+							<div class="ml-3 pr-10">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+									{{ row.data.relationships.settings.data.attributes.name }}
+								</b>
+								<span class="block text-xs dark:text-gray-500 text-gray-600">
+									{{ row.data.attributes.email }}
+								</span>
 							</div>
-						</router-link>
-					</td>
-					<td>
-						<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
-							{{ row.data.attributes.role }}
-						</ColorLabel>
-					</td>
-					<td>
-						<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
-							{{ row.data.attributes.storage.used_formatted }}
-						</span>
-						<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-							-
-						</span>
-					</td>
-					<td v-if="config.storageLimit">
-						<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
-							{{ row.data.attributes.storage.capacity_formatted }}
-						</span>
-						<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-							-
-						</span>
-					</td>
-					<td>
-						<span class="text-sm font-bold">
-							{{ row.data.attributes.created_at }}
-						</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: 'UserDetail', params: {id: row.data.id}}">
-								<Edit2Icon size="15" class="opacity-75" />
-							</router-link>
-							<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: 'UserDelete', params: {id: row.data.id}}">
-								<Trash2Icon size="15" class="opacity-75" />
-							</router-link>
 						</div>
-					</td>
-				</tr>
+					</router-link>
+				</td>
+				<td class="md:px-1 px-3">
+					<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
+						{{ row.data.attributes.role }}
+					</ColorLabel>
+				</td>
+				<td class="md:px-1 px-3">
+					<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
+						{{ row.data.attributes.storage.used_formatted }}
+					</span>
+					<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
+						-
+					</span>
+				</td>
+				<td class="md:px-1 px-3" v-if="config.storageLimit">
+					<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
+						{{ row.data.attributes.storage.capacity_formatted }}
+					</span>
+					<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
+						-
+					</span>
+				</td>
+				<td class="md:px-1 px-3">
+					<span class="text-sm font-bold">
+						{{ row.data.attributes.created_at }}
+					</span>
+				</td>
+				<td class="md:pl-1 pl-3 text-right">
+					<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: 'UserDetail', params: {id: row.data.id}}">
+							<Edit2Icon size="15" class="opacity-75" />
+						</router-link>
+						<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: 'UserDelete', params: {id: row.data.id}}">
+							<Trash2Icon size="15" class="opacity-75" />
+						</router-link>
+					</div>
+				</td>
+			</tr>
 
-				<!--Fixed subscription-->
-				<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
-					<td class="py-3">
-						<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
-							<div class="flex items-center">
-								<MemberAvatar
-									:is-border="false"
-									:size="44"
-									:member="row.data.relationships.settings"
-								/>
-								<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.settings.data.attributes.name }}
-									</b>
-									<span class="block text-xs dark:text-gray-500 text-gray-600">
-										{{ row.data.attributes.email }}
-									</span>
-								</div>
+			<!--Fixed subscription-->
+			<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+				<td class="py-3 md:pr-1 pr-3">
+					<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
+						<div class="flex items-center">
+							<MemberAvatar
+								:is-border="false"
+								:size="44"
+								:member="row.data.relationships.settings"
+							/>
+							<div class="ml-3 pr-10">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+									{{ row.data.relationships.settings.data.attributes.name }}
+								</b>
+								<span class="block text-xs dark:text-gray-500 text-gray-600">
+									{{ row.data.attributes.email }}
+								</span>
 							</div>
-						</router-link>
-					</td>
-					<td>
-						<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
-							{{ row.data.attributes.role }}
-						</ColorLabel>
-					</td>
-					<td v-if="config.isSaaS">
-						<span class="text-sm font-bold">
-							{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
-						</span>
-					</td>
-					<td>
-						<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
-							{{ row.data.attributes.storage.used_formatted }}
-						</span>
-						<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-							-
-						</span>
-					</td>
-					<td v-if="config.storageLimit">
-						<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
-							{{ row.data.attributes.storage.capacity_formatted }}
-						</span>
-						<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
-							-
-						</span>
-					</td>
-					<td>
-						<span class="text-sm font-bold">
-							{{ row.data.attributes.created_at }}
-						</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: 'UserDetail', params: {id: row.data.id}}">
-								<Edit2Icon size="15" class="opacity-75" />
-							</router-link>
-							<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: 'UserDelete', params: {id: row.data.id}}">
-								<Trash2Icon size="15" class="opacity-75" />
-							</router-link>
 						</div>
-					</td>
-				</tr>
+					</router-link>
+				</td>
+				<td class="md:px-1 px-3">
+					<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
+						{{ row.data.attributes.role }}
+					</ColorLabel>
+				</td>
+				<td class="md:px-1 px-3" v-if="config.isSaaS">
+					<span class="text-sm font-bold">
+						{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
+					</span>
+				</td>
+				<td class="md:px-1 px-3">
+					<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
+						{{ row.data.attributes.storage.used_formatted }}
+					</span>
+					<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
+						-
+					</span>
+				</td>
+				<td class="md:px-1 px-3" v-if="config.storageLimit">
+					<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
+						{{ row.data.attributes.storage.capacity_formatted }}
+					</span>
+					<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold">
+						-
+					</span>
+				</td>
+				<td class="md:px-1 px-3">
+					<span class="text-sm font-bold">
+						{{ row.data.attributes.created_at }}
+					</span>
+				</td>
+				<td class="md:pl-1 pl-3 text-right">
+					<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: 'UserDetail', params: {id: row.data.id}}">
+							<Edit2Icon size="15" class="opacity-75" />
+						</router-link>
+						<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: 'UserDelete', params: {id: row.data.id}}">
+							<Trash2Icon size="15" class="opacity-75" />
+						</router-link>
+					</div>
+				</td>
+			</tr>
 
-				<!--Metered subscription-->
-				<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
-					<td class="py-3">
-						<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
-							<div class="flex items-center">
-								<MemberAvatar
-									:is-border="false"
-									:size="44"
-									:member="row.data.relationships.settings"
-								/>
-								<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.settings.data.attributes.name }}
-									</b>
-									<span class="block text-xs dark:text-gray-500 text-gray-600">
-										{{ row.data.attributes.email }}
-									</span>
-								</div>
+			<!--Metered subscription-->
+			<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+				<td class="py-3 md:pr-1 pr-3">
+					<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
+						<div class="flex items-center">
+							<MemberAvatar
+								:is-border="false"
+								:size="44"
+								:member="row.data.relationships.settings"
+							/>
+							<div class="ml-3 pr-10">
+								<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
+									{{ row.data.relationships.settings.data.attributes.name }}
+								</b>
+								<span class="block text-xs dark:text-gray-500 text-gray-600">
+									{{ row.data.attributes.email }}
+								</span>
 							</div>
-						</router-link>
-					</td>
-					<td>
-						<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
-							{{ row.data.attributes.role }}
-						</ColorLabel>
-					</td>
-					<td>
-						<span class="text-sm font-bold">
-							{{ row.data.meta.usages.featureEstimates.storage.usage }}
-						</span>
-					</td>
-					<td>
-						<span class="text-sm font-bold">
-							{{ row.data.meta.usages.costEstimate }}
-						</span>
-					</td>
-					<td>
-						<span class="text-sm font-bold">
-							{{ row.data.attributes.created_at }}
-						</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: 'UserDetail', params: {id: row.data.id}}">
-								<Edit2Icon size="15" class="opacity-75" />
-							</router-link>
-							<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: 'UserDelete', params: {id: row.data.id}}">
-								<Trash2Icon size="15" class="opacity-75" />
-							</router-link>
 						</div>
-					</td>
-				</tr>
-			</template>
+					</router-link>
+				</td>
+				<td class="md:px-1 px-3">
+					<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
+						{{ row.data.attributes.role }}
+					</ColorLabel>
+				</td>
+				<td class="md:px-1 px-3">
+					<span class="text-sm font-bold">
+						{{ row.data.meta.usages.featureEstimates.storage.usage }}
+					</span>
+				</td>
+				<td class="md:px-1 px-3">
+					<span class="text-sm font-bold">
+						{{ row.data.meta.usages.costEstimate }}
+					</span>
+				</td>
+				<td class="md:px-1 px-3">
+					<span class="text-sm font-bold">
+						{{ row.data.attributes.created_at }}
+					</span>
+				</td>
+				<td class="md:pl-1 pl-3 text-right">
+					<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: 'UserDetail', params: {id: row.data.id}}">
+							<Edit2Icon size="15" class="opacity-75" />
+						</router-link>
+						<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: 'UserDelete', params: {id: row.data.id}}">
+							<Trash2Icon size="15" class="opacity-75" />
+						</router-link>
+					</div>
+				</td>
+			</tr>
+		</template>
 	</DatatableWrapper>
 </template>
 
@@ -311,12 +311,3 @@
         },
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .dark {
-
-    }
-</style>
diff --git a/resources/js/components/Admin/WidgetLatestTransactions.vue b/resources/js/components/Admin/WidgetLatestTransactions.vue
index 4ae7c9ea..03c7a448 100644
--- a/resources/js/components/Admin/WidgetLatestTransactions.vue
+++ b/resources/js/components/Admin/WidgetLatestTransactions.vue
@@ -2,22 +2,23 @@
 	<DatatableWrapper
 		api="/api/admin/dashboard/transactions"
 		:columns="columns"
+		class="overflow-x-auto"
 	>
 		<template slot-scope="{ row }">
-			<tr class="border-b dark:border-opacity-5 border-light border-dashed">
-				<td class="py-5">
+			<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+				<td class="py-5 md:pr-1 pr-3">
 					<span class="text-sm font-bold">
 						{{ row.data.attributes.note }}
 					</span>
 				</td>
-				<td>
+				<td class="md:px-1 px-3">
 					<div v-if="row.data.relationships.user" class="flex items-center">
 						<MemberAvatar
 							:is-border="false"
 							:size="36"
 							:member="row.data.relationships.user"
 						/>
-						<div class="ml-3">
+						<div class="ml-3 pr-10">
 							<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>
@@ -30,7 +31,7 @@
 						{{ $t('User was deleted') }}
 					</span>
 				</td>
-				<td>
+				<td class="md:px-1 px-3">
 					<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
 						{{ row.data.attributes.status }}
 					</ColorLabel>
@@ -38,18 +39,18 @@
 						{{ row.data.attributes.type }}
 					</ColorLabel>
 				</td>
-				<td>
+				<td class="md:px-1 px-3">
 					<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
 						{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
 					</span>
 				</td>
-				<td>
+				<td class="md:px-1 px-3">
 					<span class="text-sm font-bold">
 						{{ row.data.attributes.created_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 class="md:pl-1 pl-3 text-right">
+					<img class="inline-block h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
 				</td>
 			</tr>
 		</template>
diff --git a/resources/js/components/FilesView/MemberAvatar.vue b/resources/js/components/FilesView/MemberAvatar.vue
index c218946d..d527f98f 100644
--- a/resources/js/components/FilesView/MemberAvatar.vue
+++ b/resources/js/components/FilesView/MemberAvatar.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="flex-shrink-0 flex-grow-0">
 		<img
 			:style="{width: size + 'px', height: size + 'px'}"
 			v-if="member.data.attributes.avatar"
diff --git a/resources/js/components/Subscription/FixedTransactionRow.vue b/resources/js/components/Subscription/FixedTransactionRow.vue
new file mode 100644
index 00000000..5d4b763e
--- /dev/null
+++ b/resources/js/components/Subscription/FixedTransactionRow.vue
@@ -0,0 +1,93 @@
+<template>
+	<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+		<td class="py-5 md:pr-1 pr-3">
+			<span class="text-sm font-bold">
+				{{ row.data.attributes.note }}
+			</span>
+		</td>
+		<td v-if="user" class="md:px-1 px-3 whitespace-nowrap">
+			<div v-if="row.data.relationships.user" class="flex items-center">
+				<MemberAvatar
+					:is-border="false"
+					:size="36"
+					:member="row.data.relationships.user"
+				/>
+				<div class="ml-3 pr-10">
+					<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>
+			<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
+				{{ $t('User was deleted') }}
+			</span>
+		</td>
+		<td class="md:px-1 px-3">
+			<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
+				{{ row.data.attributes.status }}
+			</ColorLabel>
+		</td>
+		<td class="md:px-1 px-3">
+			<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
+				{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
+			</span>
+		</td>
+		<td class="md:px-1 px-3">
+			<span class="text-sm font-bold">
+				{{ row.data.attributes.created_at }}
+			</span>
+		</td>
+		<td class="md:px-1 px-3">
+			<div class="w-28">
+				<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
+			</div>
+		</td>
+		<td class="md:pl-1 pl-3 text-right">
+			<div class="inline-block">
+				<a :href="$getInvoiceLink(row.data.id)" target="_blank" class="inline-block cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-purple-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
+					<FileTextIcon size="15" class="opacity-75" />
+				</a>
+			</div>
+		</td>
+	</tr>
+</template>
+<script>
+	import MemberAvatar from "../FilesView/MemberAvatar";
+	import MeteredTransactionDetailRow from "./MeteredTransactionDetailRow";
+	import ColorLabel from "/resources/js/components/Others/ColorLabel"
+	import {EyeIcon, FileTextIcon} from 'vue-feather-icons'
+
+	export default {
+		name: 'FixedTransactionRow',
+		components: {
+			MeteredTransactionDetailRow,
+			MemberAvatar,
+			FileTextIcon,
+			ColorLabel,
+			EyeIcon,
+		},
+		props: {
+			row: {},
+			user: {
+				type: Boolean,
+				default: false
+			},
+		},
+		data() {
+			return {
+				showedTransactionDetailById: undefined,
+			}
+		},
+		methods: {
+			showTransactionDetail(id) {
+				if (this.showedTransactionDetailById === id)
+					this.showedTransactionDetailById = undefined
+				else
+					this.showedTransactionDetailById = id
+			}
+		},
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/MeteredTransactionDetailRow.vue b/resources/js/components/Subscription/MeteredTransactionDetailRow.vue
new file mode 100644
index 00000000..411fb3fc
--- /dev/null
+++ b/resources/js/components/Subscription/MeteredTransactionDetailRow.vue
@@ -0,0 +1,34 @@
+<template>
+	<tr>
+		<td colspan="10" class="rounded-lg overflow-hidden py-2">
+			<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in row.data.attributes.metadata" :key="i">
+				<div class="w-2/4 leading-none">
+					<b class="text-sm font-bold leading-none">
+						{{ $t(usage.feature) }}
+					</b>
+					<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
+						{{ $t(`feature_usage_desc_${usage.feature}`) }}
+					</small>
+				</div>
+				<div class="text-left w-1/4">
+					<span class="text-sm font-bold text-gray-560">
+						{{ usage.usage }}
+					</span>
+				</div>
+				<div class="text-right w-1/4">
+					<span class="text-sm font-bold text-theme">
+						{{ usage.cost }}
+					</span>
+				</div>
+			</div>
+		</td>
+	</tr>
+</template>
+<script>
+export default {
+	name: 'MeteredTransactionDetailRow',
+	props: [
+		'row'
+	]
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/MeteredTransactionRow.vue b/resources/js/components/Subscription/MeteredTransactionRow.vue
new file mode 100644
index 00000000..909f8a6d
--- /dev/null
+++ b/resources/js/components/Subscription/MeteredTransactionRow.vue
@@ -0,0 +1,104 @@
+<template>
+	<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+		<td class="py-5 md:pr-1 pr-3">
+			<span class="text-sm font-bold">
+				{{ row.data.attributes.note }}
+			</span>
+		</td>
+		<td v-if="user" class="md:px-1 px-3 whitespace-nowrap">
+			<div v-if="row.data.relationships.user" class="flex items-center">
+				<MemberAvatar
+					:is-border="false"
+					:size="36"
+					:member="row.data.relationships.user"
+				/>
+				<div class="ml-3 pr-10">
+					<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>
+			<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
+				{{ $t('User was deleted') }}
+			</span>
+		</td>
+		<td class="md:px-1 px-3">
+			<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
+				{{ row.data.attributes.status }}
+			</ColorLabel>
+		</td>
+		<td class="md:px-1 px-3">
+			<span class="text-sm font-bold capitalize">
+				{{ $t(row.data.attributes.type) }}
+			</span>
+		</td>
+		<td class="md:px-1 px-3">
+			<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
+				{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
+			</span>
+		</td>
+		<td class="md:px-1 px-3">
+			<span class="text-sm font-bold">
+				{{ row.data.attributes.created_at }}
+			</span>
+		</td>
+		<td class="md:px-1 px-3">
+			<div class="w-28">
+				<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
+			</div>
+		</td>
+		<td class="md:pl-1 pl-3 text-right">
+			<div v-if="row.data.attributes.metadata" class="flex space-x-2 w-full justify-end">
+				<div @click="$emit('showDetail', row.data.id)" class="cursor-pointer 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">
+					<EyeIcon size="15" class="opacity-75" />
+				</div>
+				<a :href="$getInvoiceLink(row.data.id)" target="_blank" class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-purple-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
+					<FileTextIcon size="15" class="opacity-75" />
+				</a>
+			</div>
+			<div v-else>
+				-
+			</div>
+		</td>
+	</tr>
+</template>
+<script>
+	import MemberAvatar from "../FilesView/MemberAvatar";
+	import MeteredTransactionDetailRow from "./MeteredTransactionDetailRow";
+	import ColorLabel from "/resources/js/components/Others/ColorLabel"
+	import {EyeIcon, FileTextIcon} from 'vue-feather-icons'
+
+	export default {
+		name: 'MeteredTransactionRow',
+		components: {
+			MeteredTransactionDetailRow,
+			MemberAvatar,
+			FileTextIcon,
+			ColorLabel,
+			EyeIcon,
+		},
+		props: {
+			row: {},
+			user: {
+				type: Boolean,
+				default: false
+			},
+		},
+		data() {
+			return {
+				showedTransactionDetailById: undefined,
+			}
+		},
+		methods: {
+			showTransactionDetail(id) {
+				if (this.showedTransactionDetailById === id)
+					this.showedTransactionDetailById = undefined
+				else
+					this.showedTransactionDetailById = id
+			}
+		},
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
index f1ff25fc..fec83c90 100644
--- a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
@@ -5,36 +5,13 @@
 		</FormLabel>
 
 		<DatatableWrapper
+			class="overflow-x-auto"
 			api="/api/subscriptions/transactions"
 			:paginator="true"
 			:columns="columns"
 		>
 			<template slot-scope="{ row }">
-				<tr class="border-b dark:border-opacity-5 border-light border-dashed">
-					<td class="py-4">
-						<span class="text-sm font-bold">
-							{{ row.data.attributes.note }}
-						</span>
-					</td>
-					<td>
-						<ColorLabel :color="$getTransactionStatusColor(row.data.attributes.status)">
-							{{ row.data.attributes.status }}
-						</ColorLabel>
-					</td>
-					<td>
-						<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
-							{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
-						</span>
-					</td>
-					<td>
-						<span class="text-sm font-bold">
-							{{ row.data.attributes.created_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>
+				<FixedTransactionRow :row="row" />
 			</template>
 
 			<!--Empty page-->
@@ -47,44 +24,25 @@
 	</div>
 </template>
 <script>
-import ColorLabel from "../Others/ColorLabel"
-import DatatableWrapper from "../Others/Tables/DatatableWrapper"
-import FormLabel from "../Others/Forms/FormLabel"
 import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+import DatatableWrapper from "../Others/Tables/DatatableWrapper"
+import FixedTransactionRow from "./FixedTransactionRow"
+import FormLabel from "../Others/Forms/FormLabel"
+import ColorLabel from "../Others/ColorLabel"
 
 export default {
 	name: 'UserTransactionsForFixedBilling',
-	components: {ColorLabel, DatatableWrapper, FormLabel, InfoBox},
-	data() {
-		return {
-			columns: [
-				{
-					label: this.$t('Note'),
-					field: 'note',
-					sortable: true
-				},
-				{
-					label: this.$t('Status'),
-					field: 'status',
-					sortable: true
-				},
-				{
-					label: this.$t('admin_page_invoices.table.total'),
-					field: 'amount',
-					sortable: true
-				},
-				{
-					label: this.$t('Payed At'),
-					field: 'created_at',
-					sortable: true
-				},
-				{
-					label: this.$t('Service'),
-					field: 'driver',
-					sortable: true
-				},
-			],
+	components: {
+		FixedTransactionRow,
+		DatatableWrapper,
+		ColorLabel,
+		FormLabel,
+		InfoBox,
+	},
+	computed: {
+		columns() {
+			return this.$store.getters.transactionColumns.filter(column => ! ['type', 'user_id'].includes(column.field))
 		}
-	}
+	},
 }
 </script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
index bb254576..09ec3020 100644
--- a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
+++ b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
@@ -10,79 +10,12 @@
 			:paginator="true"
 			:columns="columns"
 		>
-			<!--TODO: refactor all tables as this template-->
 			<template slot-scope="{ row }">
-				<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
-					<td class="py-5 md:pr-1 pr-3">
-						<span class="text-sm font-bold">
-							{{ row.data.attributes.note }}
-						</span>
-					</td>
-					<td class="md:px-1 px-3">
-						<ColorLabel class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
-							{{ row.data.attributes.status }}
-						</ColorLabel>
-					</td>
-					<td class="md:px-1 px-3">
-						<span class="text-sm font-bold capitalize">
-							{{ $t(row.data.attributes.type) }}
-						</span>
-					</td>
-					<td class="md:px-1 px-3">
-						<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
-							{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
-						</span>
-					</td>
-					<td class="md:px-1 px-3">
-						<span class="text-sm font-bold">
-							{{ row.data.attributes.created_at }}
-						</span>
-					</td>
-					<td class="md:px-1 px-3">
-						<div class="w-28">
-							<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
-						</div>
-					</td>
-					<td class="md:pl-1 pl-3 text-right">
-						<div v-if="row.data.attributes.metadata" class="flex space-x-2 w-full justify-end">
-							<div @click="showTransactionDetail(row.data.id)" class="cursor-pointer 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">
-								<EyeIcon size="15" class="opacity-75" />
-							</div>
-							<a :href="$getInvoiceLink(row.data.id)" target="_blank" class="cursor-pointer flex items-center justify-center w-8 h-8 rounded-md hover:bg-purple-100 dark:bg-2x-dark-foreground bg-light-background transition-colors">
-								<FileTextIcon size="15" class="opacity-75" />
-							</a>
-						</div>
-						<div v-else>
-							-
-						</div>
-					</td>
-				</tr>
+				<!--Transaction rows-->
+				<MeteredTransactionRow :row="row" @showDetail="showTransactionDetail" />
 
 				<!--Transaction detail-->
-				<tr v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id">
-					<td colspan="7" class="rounded-lg overflow-hidden py-2">
-						<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in row.data.attributes.metadata" :key="i">
-							<div class="w-2/4 leading-none">
-								<b class="text-sm font-bold leading-none">
-									{{ $t(usage.feature) }}
-								</b>
-								<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
-									{{ $t(`feature_usage_desc_${usage.feature}`) }}
-								</small>
-							</div>
-							<div class="text-left w-1/4">
-								<span class="text-sm font-bold text-gray-560">
-									{{ usage.usage }}
-								</span>
-							</div>
-							<div class="text-right w-1/4">
-								<span class="text-sm font-bold text-theme">
-									{{ usage.cost }}
-								</span>
-							</div>
-						</div>
-					</td>
-				</tr>
+				<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
 			</template>
 
 			<!--Empty page-->
@@ -101,10 +34,14 @@
 	import FormLabel from "../Others/Forms/FormLabel"
 	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
 	import {mapGetters} from "vuex";
+	import MeteredTransactionDetailRow from "./MeteredTransactionDetailRow"
+	import MeteredTransactionRow from "./MeteredTransactionRow"
 
 	export default {
 		name: 'UserTransactionsForMeteredBilling',
 		components: {
+			MeteredTransactionDetailRow,
+			MeteredTransactionRow,
 			DatatableWrapper,
 			ColorLabel,
 			FormLabel,
@@ -115,47 +52,14 @@
 		computed: {
 			...mapGetters([
 				'user',
-			])
+			]),
+			columns() {
+				return this.$store.getters.transactionColumns.filter(column => column.field !== 'user_id')
+			}
 		},
 		data() {
 			return {
 				showedTransactionDetailById: undefined,
-				columns: [
-					{
-						label: this.$t('Note'),
-						field: 'note',
-						sortable: true
-					},
-					{
-						label: this.$t('Status'),
-						field: 'status',
-						sortable: true
-					},
-					{
-						label: this.$t('Type'),
-						field: 'status',
-						sortable: true
-					},
-					{
-						label: this.$t('admin_page_invoices.table.total'),
-						field: 'amount',
-						sortable: true
-					},
-					{
-						label: this.$t('Payed At'),
-						field: 'created_at',
-						sortable: true
-					},
-					{
-						label: this.$t('Service'),
-						field: 'driver',
-						sortable: true
-					},
-					{
-						label: this.$t('Actions'),
-						sortable: false
-					},
-				],
 			}
 		},
 		methods: {
diff --git a/resources/js/store/modules/lists.js b/resources/js/store/modules/lists.js
index ce156377..889ff8c2 100644
--- a/resources/js/store/modules/lists.js
+++ b/resources/js/store/modules/lists.js
@@ -1,4 +1,48 @@
+import i18n from '../../i18n'
+
 const defaultState = {
+	transactionColumns: [
+		{
+			label: i18n.t('Note'),
+			field: 'note',
+			sortable: true
+		},
+		{
+			label: i18n.t('user'),
+			field: 'user_id',
+			sortable: true
+		},
+		{
+			label: i18n.t('Status'),
+			field: 'status',
+			sortable: true
+		},
+		{
+			label: i18n.t('Type'),
+			field: 'type',
+			sortable: true
+		},
+		{
+			label: i18n.t('Total'),
+			field: 'amount',
+			sortable: true
+		},
+		{
+			label: i18n.t('Payed At'),
+			field: 'created_at',
+			sortable: true
+		},
+		{
+			label: i18n.t('Service'),
+			field: 'driver',
+			sortable: true
+		},
+		{
+			label: i18n.t('Actions'),
+			field: 'actions',
+			sortable: false
+		},
+	],
 	roles: [
 		{
 			label: 'roles.admin',
@@ -979,6 +1023,7 @@ const defaultState = {
 }
 
 const getters = {
+	transactionColumns: state => state.transactionColumns,
 	subscriptionTypes: state => state.subscriptionTypes,
 	teamPermissions: state => state.teamPermissions,
 	expirationList: state => state.expirationList,
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index 06f9f215..3c0f0db6 100644
--- a/resources/js/views/Admin.vue
+++ b/resources/js/views/Admin.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="sm:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
+    <div class="lg:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
 		<!--On Top of App Components-->
         <FilePreview />
 		<Spotlight />
diff --git a/resources/js/views/Admin/Dashboard.vue b/resources/js/views/Admin/Dashboard.vue
index b3433238..59f3a4e3 100644
--- a/resources/js/views/Admin/Dashboard.vue
+++ b/resources/js/views/Admin/Dashboard.vue
@@ -3,7 +3,7 @@
         <div id="page-content" v-if="! isLoading && data">
 
 			<!--Headline-->
-            <div v-if="config.isAdminVueFileManagerBar" class="md:flex justify-between md:mb-6 mb-4">
+            <div v-if="config.isAdminVueFileManagerBar" class="md:flex justify-between md:mb-6 mb-4 md:block hidden">
 
 				<!--VueFileManager logo-->
 				<a href="https://vuefilemanager.com" target="_blank">
diff --git a/resources/js/views/Admin/Invoices.vue b/resources/js/views/Admin/Invoices.vue
index 9a7f44ef..81809c00 100644
--- a/resources/js/views/Admin/Invoices.vue
+++ b/resources/js/views/Admin/Invoices.vue
@@ -2,61 +2,19 @@
     <div>
 		<!--Datatable-->
 		<DatatableWrapper
-			v-if="! config.isEmptyTransactions" class="card shadow-card"
-			@init="isLoading = false"
-			api="/api/subscriptions/admin/transactions"
+			v-if="! config.isEmptyTransactions" class="card shadow-card overflow-x-auto"
+			api="/api/admin/transactions"
 			:paginator="true"
 			:columns="columns"
 		>
 			<template slot-scope="{ row }">
-				<tr class="border-b dark:border-opacity-5 border-light border-dashed">
-					<td class="py-5">
-						<span class="text-sm font-bold">
-							{{ row.data.attributes.note }}
-						</span>
-					</td>
-					<td>
-						<div v-if="row.data.relationships.user" 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>
-						<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold">
-							{{ $t('User was deleted') }}
-						</span>
-					</td>
-					<td>
-						<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
-							{{ row.data.attributes.status }}
-						</ColorLabel>
-						<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
-							{{ row.data.attributes.type }}
-						</ColorLabel>
-					</td>
-					<td>
-						<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
-							{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
-						</span>
-					</td>
-					<td>
-						<span class="text-sm font-bold">
-							{{ row.data.attributes.created_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>
+				<!--Transaction rows-->
+				<MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" :user="true" @showDetail="showTransactionDetail" />
+
+				<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" :user="true" />
+
+				<!--Transaction detail-->
+				<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
 			</template>
 		</DatatableWrapper>
 
@@ -76,6 +34,9 @@
 </template>
 
 <script>
+	import FixedTransactionRow from "../../components/Subscription/FixedTransactionRow";
+	import MeteredTransactionDetailRow from "../../components/Subscription/MeteredTransactionDetailRow";
+	import MeteredTransactionRow from "../../components/Subscription/MeteredTransactionRow";
 	import MemberAvatar from "../../components/FilesView/MemberAvatar"
 	import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
 	import ColorLabel from '/resources/js/components/Others/ColorLabel'
@@ -84,6 +45,9 @@
 	export default {
 		name: 'Invoices',
 		components: {
+			MeteredTransactionDetailRow,
+			MeteredTransactionRow,
+			FixedTransactionRow,
 			DatatableWrapper,
 			MemberAvatar,
 			ColorLabel,
@@ -92,44 +56,22 @@
 			...mapGetters([
 				'config',
 			]),
+			columns() {
+				return this.$store.getters.transactionColumns.filter(column => ! ['type'].includes(column.field))
+			}
 		},
 		data() {
 			return {
-				isLoading: true,
-				invoices: [],
-				columns: [
-					{
-						label: this.$t('Note'),
-						field: 'note',
-						sortable: true
-					},
-					{
-						label: this.$t('User'),
-						field: 'user_id',
-						sortable: true
-					},
-					{
-						label: this.$t('Status'),
-						field: 'status',
-						sortable: true
-					},
-					{
-						label: this.$t('admin_page_invoices.table.total'),
-						field: 'amount',
-						sortable: true
-					},
-					{
-						label: this.$t('Payed At'),
-						field: 'created_at',
-						sortable: true
-					},
-					{
-						label: this.$t('Service'),
-						field: 'driver',
-						sortable: true
-					},
-				],
+				showedTransactionDetailById: undefined
 			}
 		},
+		methods: {
+			showTransactionDetail(id) {
+				if (this.showedTransactionDetailById === id)
+					this.showedTransactionDetailById = undefined
+				else
+					this.showedTransactionDetailById = id
+			}
+		}
 	}
 </script>
diff --git a/resources/js/views/Admin/Pages.vue b/resources/js/views/Admin/Pages.vue
index 59e736cb..13b751bf 100644
--- a/resources/js/views/Admin/Pages.vue
+++ b/resources/js/views/Admin/Pages.vue
@@ -1,42 +1,36 @@
 <template>
-    <div>
-        <div id="page-content" v-show="! isLoading">
-			<div class="card shadow-card">
-				<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="table table-users">
-					<template slot-scope="{ row }">
-						<tr class="border-b dark:border-opacity-5 border-light border-dashed">
-							<td class="py-4">
-								<router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="text-sm font-bold cursor-pointer" tag="div">
-									{{ row.data.attributes.title }}
+	<div>
+		<div class="card shadow-card">
+			<DatatableWrapper @init="isLoading = false" api="/api/admin/pages" :paginator="false" :columns="columns" class="overflow-x-auto">
+				<template slot-scope="{ row }">
+					<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+						<td class="py-5 md:pr-1 pr-3">
+							<router-link :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}" class="text-sm font-bold cursor-pointer" tag="div">
+								{{ row.data.attributes.title }}
+							</router-link>
+						</td>
+						<td class="md:px-1 px-3">
+							<span class="text-sm font-bold">
+								{{ row.data.attributes.slug }}
+							</span>
+						</td>
+						<td class="md:px-1 px-3">
+							<span class="text-sm font-bold">
+								<SwitchInput @input="$updateText(`/admin/pages/${row.data.id}`, 'visibility', row.data.attributes.visibility)" v-model="row.data.attributes.visibility" :state="row.data.attributes.visibility" class="switch"/>
+							</span>
+						</td>
+						<td class="md:pl-1 pl-3 text-right">
+							<div class="flex space-x-2 w-full justify-end">
+								<router-link class="flex items-center justify-center w-8 h-8 rounded-md dark:bg-2x-dark-foreground hover:bg-green-100 bg-light-background transition-colors" :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}">
+									<Edit2Icon size="15" class="opacity-75" />
 								</router-link>
-							</td>
-							<td>
-								<span class="text-sm font-bold">
-									{{ row.data.attributes.slug }}
-								</span>
-							</td>
-							<td>
-								<span class="text-sm font-bold">
-									<SwitchInput @input="$updateText(`/admin/pages/${row.data.id}`, 'visibility', row.data.attributes.visibility)" v-model="row.data.attributes.visibility" :state="row.data.attributes.visibility" class="switch"/>
-								</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 dark:bg-2x-dark-foreground hover:bg-green-100 bg-light-background transition-colors" :to="{name: 'PageEdit', params: {slug: row.data.attributes.slug}}">
-										<Edit2Icon size="15" class="opacity-75" />
-									</router-link>
-								</div>
-							</td>
-						</tr>
-					</template>
-				</DatatableWrapper>
-			</div>
-        </div>
-
-        <div id="loader" v-if="isLoading">
-            <Spinner></Spinner>
-        </div>
-    </div>
+							</div>
+						</td>
+					</tr>
+				</template>
+			</DatatableWrapper>
+		</div>
+	</div>
 </template>
 
 <script>
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
index 0d508ed3..d8ac5511 100644
--- a/resources/js/views/Admin/Plans.vue
+++ b/resources/js/views/Admin/Plans.vue
@@ -13,37 +13,37 @@
 			</div>
 
 			<!--Datatable-->
-            <DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/admin/plans" :paginator="true" :columns="columns">
+            <DatatableWrapper @data="plans = $event" @init="isLoading = false" api="/api/subscriptions/admin/plans" :paginator="true" :columns="columns" class="overflow-x-auto">
                 <template slot-scope="{ row }">
 
 					<!--Metered subscription-->
-                    <tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
-                        <td class="py-4">
+                    <tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+                        <td class="py-5 md:pr-1 pr-3">
 							<router-link class="text-sm font-bold" :to="{name: 'PlanMeteredSettings', params: {id: row.data.id}}">
                             	{{ row.data.attributes.name }}
 							</router-link>
                         </td>
-						<td>
+						<td class="md:px-1 px-3">
 							<ColorLabel :color="$getPlanStatusColor(row.data.attributes.status)">
 								{{ row.data.attributes.status }}
 							</ColorLabel>
 						</td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.currency }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold capitalize">
                             	{{ row.data.attributes.interval }}
                             </span>
                         </td>
-						<td>
+						<td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.subscribers }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:pl-1 pl-3 text-right">
                             <div class="flex space-x-2 w-full justify-end">
                                 <router-link
 									:to="{name: 'PlanMeteredSettings', params: {id: row.data.id}}"
@@ -63,36 +63,36 @@
                     </tr>
 
 					<!--Fixed subscription-->
-                    <tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
-						<td class="py-4">
+                    <tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+						<td class="py-5 md:pr-1 pr-3">
 							<SwitchInput @input="$updateInput(`/subscriptions/admin/plans/${row.data.id}`, 'visible', row.data.attributes.visible)" v-model="row.data.attributes.visible" :state="row.data.attributes.visible" class="switch"/>
 						</td>
-                        <td>
+                        <td class="md:px-1 px-3">
 							<router-link class="text-sm font-bold" :to="{name: 'PlanFixedSettings', params: {id: row.data.id}}">
                             	{{ row.data.attributes.name }}
 							</router-link>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.price }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold capitalize">
                             	{{ row.data.attributes.interval }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.subscribers }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.features.max_storage_amount }} GB
                             </span>
                         </td>
-                        <td>
+                        <td class="md:pl-1 pl-3 text-right">
                             <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: 'PlanFixedSettings', params: {id: row.data.id}}">
                                     <Edit2Icon size="15" class="opacity-75" />
diff --git a/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue b/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
index e235ff3b..54f61393 100644
--- a/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
+++ b/resources/js/views/Admin/Plans/Tabs/PlanSubscribers.vue
@@ -1,18 +1,18 @@
 <template>
     <PageTab :is-loading="isLoading">
-		<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscriptions/admin/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card">
+		<DatatableWrapper @data="subscribers = $event" @init="isLoading = false" :api="`/api/subscriptions/admin/plans/${this.$route.params.id}/subscribers`" :paginator="true" :columns="columns" class="card shadow-card overflow-x-auto">
 
 			<!--Table data content-->
 			<template slot-scope="{ row }">
-				<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
-					<td>
+				<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+					<td class="py-3 md:pr-1 pr-3">
 						<router-link class="flex items-center" :to="{name: 'UserDetail', params: {id: row.data.relationships.user.data.id}}">
 							<MemberAvatar
 								:is-border="false"
 								:size="36"
 								:member="row.data.relationships.user"
 							/>
-							<div class="ml-3">
+							<div class="ml-3 pr-10">
 								<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>
@@ -22,24 +22,24 @@
 							</div>
 						</router-link>
 					</td>
-					<td class="py-5">
-						<span class="text-sm font-bold">
+					<td class="md:px-1 px-3">
+						<span class="text-sm font-bold whitespace-nowrap">
 							{{ row.data.attributes.renews_at }}
 						</span>
 					</td>
-					<td class="text-right">
+					<td class="md:pl-1 pl-3 text-right">
 						<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
 					</td>
 				</tr>
-				<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
-					<td>
+				<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+					<td class="py-3 md:pr-1 pr-3">
 						<router-link class="flex items-center" :to="{name: 'UserDetail', params: {id: row.data.relationships.user.data.id}}">
 							<MemberAvatar
 								:is-border="false"
 								:size="36"
 								:member="row.data.relationships.user"
 							/>
-							<div class="ml-3">
+							<div class="ml-3 pr-10">
 								<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>
@@ -49,28 +49,28 @@
 							</div>
 						</router-link>
 					</td>
-					<td>
+					<td class="md:px-1 px-3">
 						<ColorLabel :color="$getSubscriptionStatusColor(row.data.attributes.status)">
 							{{ row.data.attributes.status }}
 						</ColorLabel>
 					</td>
-					<td class="py-5">
+					<td class="md:px-1 px-3">
 						<span class="text-sm font-bold capitalize text-limit" style="max-width: 160px">
 							{{ row.data.attributes.name }}
 						</span>
 					</td>
-					<td>
+					<td class="md:px-1 px-3">
 						<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>
+					<td class="md:px-1 px-3">
 						<span class="text-sm font-bold">
 							{{ row.data.attributes.ends_at ? row.data.attributes.ends_at : '-' }}
 						</span>
 					</td>
-					<td class="text-right">
+					<td class="md:pl-1 pl-3 text-right">
 						<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
 					</td>
 				</tr>
diff --git a/resources/js/views/Admin/Subscriptions.vue b/resources/js/views/Admin/Subscriptions.vue
index 5e5f41b8..f782d302 100644
--- a/resources/js/views/Admin/Subscriptions.vue
+++ b/resources/js/views/Admin/Subscriptions.vue
@@ -1,19 +1,19 @@
 <template>
     <div>
 		<!--Datatable-->
-		<DatatableWrapper v-if="! config.isEmptySubscriptions" @init="isLoading = false" api="/api/subscriptions/admin" :paginator="true" :columns="columns" class="card shadow-card">
+		<DatatableWrapper v-if="! config.isEmptySubscriptions" @init="isLoading = false" api="/api/subscriptions/admin" :paginator="true" :columns="columns" class="card shadow-card overflow-x-auto">
 
 			<!--Table data content-->
 			<template slot-scope="{ row }">
-				<tr class="border-b dark:border-opacity-5 border-light border-dashed">
-					<td>
+				<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+					<td class="py-5 md:pr-1 pr-3">
 						<router-link class="flex items-center" :to="{name: 'UserDetail', params: {id: row.data.relationships.user.data.id}}">
 							<MemberAvatar
 								:is-border="false"
 								:size="36"
 								:member="row.data.relationships.user"
 							/>
-							<div class="ml-3">
+							<div class="ml-3 pr-10">
 								<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>
@@ -23,12 +23,12 @@
 							</div>
 						</router-link>
 					</td>
-					<td>
+					<td class="md:px-1 px-3">
 						<ColorLabel :color="$getSubscriptionStatusColor(row.data.attributes.status)">
 							{{ row.data.attributes.status }}
 						</ColorLabel>
 					</td>
-					<td class="py-5">
+					<td class="md:px-1 px-3">
 						<span class="text-sm font-bold capitalize text-limit" style="max-width: 160px">
 							{{ row.data.attributes.name }}
 						</span>
@@ -36,18 +36,18 @@
 							{{ row.data.relationships.plan.data.attributes.price }} / {{ $t(`interval.${row.data.relationships.plan.data.attributes.interval}`) }}
 						</span>
 					</td>
-					<td>
+					<td class="md:px-1 px-3">
 						<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>
+					<td class="md:px-1 px-3">
 						<span class="text-sm font-bold">
 							{{ row.data.attributes.ends_at ? row.data.attributes.ends_at : '-' }}
 						</span>
 					</td>
-					<td class="text-right">
+					<td class="md:pl-1 pl-3 text-right">
 						<img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
 					</td>
 				</tr>
diff --git a/resources/js/views/Admin/Users.vue b/resources/js/views/Admin/Users.vue
index 47a2c56c..99cc689d 100644
--- a/resources/js/views/Admin/Users.vue
+++ b/resources/js/views/Admin/Users.vue
@@ -14,11 +14,11 @@
             </div>
 
 			<!--Datatable-->
-            <DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
+            <DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="overflow-x-auto">
                 <template slot-scope="{ row }">
 					<!--Not a subscription-->
-                    <tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed">
-                        <td class="py-3">
+                    <tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+                        <td class="py-3 md:pr-1 pr-3">
 							<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
 								<div class="flex items-center">
 									<MemberAvatar
@@ -26,7 +26,7 @@
 										:size="44"
 										:member="row.data.relationships.settings"
 									/>
-									<div class="ml-3">
+									<div class="ml-3 pr-10">
 										<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
 											{{ row.data.relationships.settings.data.attributes.name }}
 										</b>
@@ -37,12 +37,12 @@
 								</div>
 							</router-link>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
                                 {{ row.data.attributes.role }}
                             </ColorLabel>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
                             	{{ row.data.attributes.storage.used_formatted }}
                             </span>
@@ -50,7 +50,7 @@
                             	-
                             </span>
                         </td>
-                        <td v-if="config.storageLimit">
+                        <td class="md:px-1 px-3" v-if="config.storageLimit">
                             <span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
                             	{{ row.data.attributes.storage.capacity_formatted }}
                             </span>
@@ -58,12 +58,12 @@
                             	-
                             </span>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.created_at }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:pl-1 pl-3 text-right">
                             <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: 'UserDetail', params: {id: row.data.id}}">
                                     <Edit2Icon size="15" class="opacity-75" />
@@ -76,8 +76,8 @@
                     </tr>
 
 					<!--Fixed subscription-->
-                    <tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed">
-                        <td class="py-3">
+                    <tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+                        <td class="py-3 md:pr-1 pr-3">
 							<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
 								<div class="flex items-center">
 									<MemberAvatar
@@ -85,7 +85,7 @@
 										:size="44"
 										:member="row.data.relationships.settings"
 									/>
-									<div class="ml-3">
+									<div class="ml-3 pr-10">
 										<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
 											{{ row.data.relationships.settings.data.attributes.name }}
 										</b>
@@ -96,17 +96,17 @@
 								</div>
 							</router-link>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
                                 {{ row.data.attributes.role }}
                             </ColorLabel>
                         </td>
-                        <td v-if="config.isSaaS">
+                        <td class="md:px-1 px-3" v-if="config.isSaaS">
                             <span class="text-sm font-bold">
                             	{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
                             	{{ row.data.attributes.storage.used_formatted }}
                             </span>
@@ -114,7 +114,7 @@
                             	-
                             </span>
                         </td>
-                        <td v-if="config.storageLimit">
+                        <td class="md:px-1 px-3" v-if="config.storageLimit">
                             <span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
                             	{{ row.data.attributes.storage.capacity_formatted }}
                             </span>
@@ -122,12 +122,12 @@
                             	-
                             </span>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.created_at }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:pl-1 pl-3 text-right">
                             <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: 'UserDetail', params: {id: row.data.id}}">
                                     <Edit2Icon size="15" class="opacity-75" />
@@ -140,8 +140,8 @@
                     </tr>
 
 					<!--Metered subscription-->
-					<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed">
-                        <td class="py-3">
+					<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap">
+                        <td class="py-3 md:pr-1 pr-3">
 							<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
 								<div class="flex items-center">
 									<MemberAvatar
@@ -149,7 +149,7 @@
 										:size="44"
 										:member="row.data.relationships.settings"
 									/>
-									<div class="ml-3">
+									<div class="ml-3 pr-10">
 										<b class="text-sm font-bold block max-w-1 overflow-hidden overflow-ellipsis whitespace-nowrap" style="max-width: 155px;">
 											{{ row.data.relationships.settings.data.attributes.name }}
 										</b>
@@ -160,27 +160,27 @@
 								</div>
 							</router-link>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
                                 {{ row.data.attributes.role }}
                             </ColorLabel>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.meta.usages.featureEstimates.storage.usage }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.meta.usages.costEstimate }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:px-1 px-3">
                             <span class="text-sm font-bold">
                             	{{ row.data.attributes.created_at }}
                             </span>
                         </td>
-                        <td>
+                        <td class="md:pl-1 pl-3 text-right">
                             <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: 'UserDetail', params: {id: row.data.id}}">
                                     <Edit2Icon size="15" class="opacity-75" />
diff --git a/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
index 79b74636..31bae077 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
@@ -12,7 +12,7 @@
 			{{ subscription.relationships.plan.data.attributes.name }} / {{ price }}
 		</b>
 
-		<div v-for="(limit, i) in limitations" :key="i">
+		<div v-for="(limit, i) in limitations" :key="i" :class="{'mb-6': (Object.keys(limitations).length - 1) !== i}">
 			<b class="mb-3 block text-sm text-gray-400">
 				{{ limit.message }}
 			</b>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
index 805af6a5..dafae252 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
@@ -35,40 +35,21 @@
             </FormLabel>
 
 			<DatatableWrapper
+				class="overflow-x-auto"
 				@init="isLoading = false"
-				:api="'/api/subscriptions/admin/users/' + this.$route.params.id + '/transactions'"
+				:api="'/api/admin/users/' + this.$route.params.id + '/transactions'"
 				:paginator="true"
 				:columns="columns"
 			>
                 <template slot-scope="{ row }">
-                    <tr class="border-b dark:border-opacity-5 border-light border-dashed">
-                        <td class="py-4">
-                            <span class="text-sm font-bold">
-								{{ row.data.attributes.note }}
-							</span>
-                        </td>
-                        <td>
-							<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
-                                {{ row.data.attributes.status }}
-							</ColorLabel>
-							<ColorLabel v-if="config.subscriptionType === 'metered'" :color="$getTransactionTypeColor(row.data.attributes.type)">
-                                {{ row.data.attributes.type }}
-							</ColorLabel>
-                        </td>
-                        <td>
-                            <span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
-                                {{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
-                            </span>
-                        </td>
-                        <td>
-                            <span class="text-sm font-bold">
-                                {{ row.data.attributes.created_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>
+
+					<!--Transaction rows-->
+                    <MeteredTransactionRow v-if="config.subscriptionType === 'metered'" :row="row" @showDetail="showTransactionDetail" />
+					<FixedTransactionRow v-if="config.subscriptionType === 'fixed'" :row="row" />
+
+					<!--Transaction detail-->
+					<MeteredTransactionDetailRow v-if="row.data.attributes.metadata && showedTransactionDetailById === row.data.id" :row="row" />
+
                 </template>
 
 				<!--Empty page-->
@@ -83,14 +64,16 @@
 </template>
 
 <script>
-    import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
-	import FormLabel from "../../../../components/Others/Forms/FormLabel";
-	import ColorLabel from "/resources/js/components/Others/ColorLabel"
+	import MeteredTransactionDetailRow from "../../../../components/Subscription/MeteredTransactionDetailRow"
+	import MeteredTransactionRow from "../../../../components/Subscription/MeteredTransactionRow"
+	import FixedTransactionRow from "../../../../components/Subscription/FixedTransactionRow"
+	import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
+	import FormLabel from "../../../../components/Others/Forms/FormLabel"
 	import PageTab from '/resources/js/components/Others/Layout/PageTab'
 	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-	import UserMeteredSubscription from "./UserMeteredSubscription";
+	import UserMeteredSubscription from "./UserMeteredSubscription"
 	import UserFixedSubscription from "./UserFixedSubscription"
-	import {mapGetters} from "vuex";
+	import {mapGetters} from "vuex"
 	import axios from 'axios'
 
 	export default {
@@ -99,10 +82,12 @@
 			'user'
 		],
 		components: {
+			MeteredTransactionDetailRow,
 			UserMeteredSubscription,
+			MeteredTransactionRow,
 			UserFixedSubscription,
+			FixedTransactionRow,
 			DatatableWrapper,
-			ColorLabel,
 			FormLabel,
 			InfoBox,
 			PageTab,
@@ -111,38 +96,28 @@
 			...mapGetters([
 				'config',
 			]),
+			columns() {
+				let filter = {
+					metered: ['user_id'],
+					fixed: ['type', 'user_id'],
+				}
+
+				return this.$store.getters.transactionColumns.filter(column => !filter[config.subscriptionType].includes(column.field))
+			}
 		},
 		data() {
 			return {
+				showedTransactionDetailById: undefined,
 				subscription: undefined,
 				isLoading: true,
-				columns: [
-					{
-						label: this.$t('Note'),
-						field: 'note',
-						sortable: true
-					},
-					{
-						label: this.$t('Status'),
-						field: 'status',
-						sortable: true
-					},
-					{
-						label: this.$t('admin_page_invoices.table.total'),
-						field: 'amount',
-						sortable: true
-					},
-					{
-						label: this.$t('Payed At'),
-						field: 'created_at',
-						sortable: true
-					},
-					{
-						label: this.$t('Service'),
-						field: 'driver',
-						sortable: true
-					},
-				],
+			}
+		},
+		methods: {
+			showTransactionDetail(id) {
+				if (this.showedTransactionDetailById === id)
+					this.showedTransactionDetailById = undefined
+				else
+					this.showedTransactionDetailById = id
 			}
 		},
 		created() {
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 7b21a182..5ee21f5e 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="sm:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
+    <div class="lg:flex md:h-screen md:overflow-hidden dark:bg-dark-background bg-light-background">
 		<!--On Top of App Components-->
         <FilePreview />
 		<Spotlight />
diff --git a/routes/admin.php b/routes/admin.php
index bd80fa08..c76ed6b8 100644
--- a/routes/admin.php
+++ b/routes/admin.php
@@ -18,6 +18,8 @@ use Domain\Admin\Controllers\Dashboard\GetLatestTransactionsController;
 use Domain\Admin\Controllers\Users\ChangeUserStorageCapacityController;
 use Domain\Settings\Controllers\StoreSocialServiceCredentialsController;
 use Domain\Settings\Controllers\StorePaymentServiceCredentialsController;
+use Domain\Transactions\Controllers\GetAllTransactionsController;
+use Domain\Transactions\Controllers\GetUserTransactionsController;
 
 // Dashboard
 Route::group(['prefix' => 'dashboard'], function () {
@@ -30,15 +32,15 @@ Route::group(['prefix' => 'dashboard'], function () {
 Route::group(['prefix' => 'users'], function () {
     Route::patch('/{user}/capacity', ChangeUserStorageCapacityController::class);
     Route::post('/{user}/reset-password', ResetUserPasswordController::class);
+    Route::get('/{user}/transactions', GetUserTransactionsController::class);
     Route::get('/{user}/storage', ShowUserStorageCapacityController::class);
     Route::patch('/{user}/role', ChangeUserRoleController::class);
     Route::delete('/{user}/delete', DeleteUserController::class);
 });
 
-Route::apiResource('/users', UserController::class);
-
-// Pages
+Route::get('/transactions', GetAllTransactionsController::class);
 Route::apiResource('/pages', AdminPagesController::class);
+Route::apiResource('/users', UserController::class);
 
 // Settings
 Route::group(['prefix' => 'settings'], function () {
diff --git a/src/Domain/Transactions/Controllers/GetAllTransactionsController.php b/src/Domain/Transactions/Controllers/GetAllTransactionsController.php
new file mode 100644
index 00000000..1ba64c92
--- /dev/null
+++ b/src/Domain/Transactions/Controllers/GetAllTransactionsController.php
@@ -0,0 +1,19 @@
+<?php
+namespace Domain\Transactions\Controllers;
+
+use App\Users\Models\User;
+use App\Http\Controllers\Controller;
+use Domain\Transactions\Resources\TransactionCollection;
+use VueFileManager\Subscription\Domain\Transactions\Models\Transaction;
+
+class GetAllTransactionsController extends Controller
+{
+    public function __invoke(User $user)
+    {
+        $transactions = Transaction::with('user')
+            ->sortable(['created_at' => 'desc'])
+            ->paginate(20);
+
+        return new TransactionCollection($transactions);
+    }
+}
diff --git a/src/Domain/Transactions/Controllers/GetUserTransactionsController.php b/src/Domain/Transactions/Controllers/GetUserTransactionsController.php
new file mode 100644
index 00000000..6b7d2823
--- /dev/null
+++ b/src/Domain/Transactions/Controllers/GetUserTransactionsController.php
@@ -0,0 +1,19 @@
+<?php
+namespace Domain\Transactions\Controllers;
+
+use App\Http\Controllers\Controller;
+use App\Users\Models\User;
+use Domain\Transactions\Resources\TransactionCollection;
+
+class GetUserTransactionsController extends Controller
+{
+    public function __invoke(User $user)
+    {
+        $transactions = $user
+            ->transactions()
+            ->sortable(['created_at' => 'desc'])
+            ->paginate(20);
+
+        return new TransactionCollection($transactions);
+    }
+}