diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index dcb66507..01ae86b5 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -2,7 +2,7 @@
     "/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=4648dcc5c93c59d5e458",
+    "/chunks/admin.js": "/chunks/admin.js?id=e13a9c1ff69347e1f7fd",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=1d297064a7b806655c53",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=b6966627bd253eda63ba",
     "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js?id=d7a8e5b5b913858da427",
@@ -33,7 +33,7 @@
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=3d0bbcd0c36d74bf739a",
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=65ee559ca803555be568",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=55135fff8801bdf735c4",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=2cf7518289765027a590",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=27638c489fec8b00d89a",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=b168c187bef89955172b",
     "/chunks/database.js": "/chunks/database.js?id=18549b910ac0b115d2f1",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
@@ -47,17 +47,17 @@
     "/chunks/homepage.js": "/chunks/homepage.js?id=b89dd81804b8a0bd3f0b",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=1579259e826aa89fb00a",
     "/chunks/invitation.js": "/chunks/invitation.js?id=c9cd3541ee362ae8d5f7",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=dde37879c074c8bf91b1",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=2ab21de500ba46c3b968",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
     "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=b0235e76cbd41a62a331",
-    "/chunks/pages.js": "/chunks/pages.js?id=dfcc3f3955d14f41860d",
+    "/chunks/pages.js": "/chunks/pages.js?id=76c49d9da3808bc58699",
     "/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
     "/chunks/plan-create.js": "/chunks/plan-create.js?id=c1ad8299871917f21f8e",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=a4db8cc9a98a81eed8d1",
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=b3287cc8a37898410410",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=6c052021e0f162f6942d",
-    "/chunks/plans.js": "/chunks/plans.js?id=1dd67aa61e7482424e6d",
+    "/chunks/plans.js": "/chunks/plans.js?id=85ae6e573a4d322752af",
     "/chunks/platform.js": "/chunks/platform.js?id=f8e1c28f9e64711f0c57",
     "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js": "/chunks/platform~chunks/settings-subscription~chunks/shared~chunks/user-subscription.js?id=8656b69a97cace919251",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=b9673d70cdfa5f083a18",
@@ -66,9 +66,9 @@
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=4c9656de6fa221022bf5",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=f8b2619e393a5823bf29",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=22f629caf127051898e9",
-    "/chunks/settings.js": "/chunks/settings.js?id=17e49d22d9c7fa2cfb24",
+    "/chunks/settings.js": "/chunks/settings.js?id=89028eea52ba0abf077b",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=cacac1c92fcaa4f21f69",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=f28ea2adab3e870dc9b3",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=5a69146b6daf08cff500",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=68dafd28e0eff002bf5f",
     "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=3a88e55341d1f1ffe12d",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=c1a4036392db4eea190f",
@@ -96,11 +96,11 @@
     "/chunks/user-create.js": "/chunks/user-create.js?id=e88511a44794a13905a7",
     "/chunks/user-delete.js": "/chunks/user-delete.js?id=ce3ff1769cb97e99427b",
     "/chunks/user-detail.js": "/chunks/user-detail.js?id=6d798cc57ea2ae5c924f",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a03cdaa3511d88acdd97",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=4d1c15daa55934945068",
     "/chunks/user-password.js": "/chunks/user-password.js?id=ce6c12a5b038f5481bd1",
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=0e46d73f77f2778bb395",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=9af6308cdf06b91d0f9f",
-    "/chunks/users.js": "/chunks/users.js?id=19fad0b439bc53b68d22",
+    "/chunks/users.js": "/chunks/users.js?id=43d63dcd2782caf9425d",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8",
     "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712",
@@ -1125,7 +1125,7 @@
     "/js/main.24005a1f46cf5560118b.hot-update.js": "/js/main.24005a1f46cf5560118b.hot-update.js",
     "/chunks/admin.24005a1f46cf5560118b.hot-update.js": "/chunks/admin.24005a1f46cf5560118b.hot-update.js",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.24005a1f46cf5560118b.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.24005a1f46cf5560118b.hot-update.js",
-    "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=d84618207715010b9b02",
+    "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=16daae21d6ae3cfcb4e4",
     "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~30207cf2.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~30207cf2.js?id=b4c321d86574e6bc3947",
     "/chunks/platform~chunks/shared.24005a1f46cf5560118b.hot-update.js": "/chunks/platform~chunks/shared.24005a1f46cf5560118b.hot-update.js",
     "/chunks/settings.24005a1f46cf5560118b.hot-update.js": "/chunks/settings.24005a1f46cf5560118b.hot-update.js",
@@ -1509,5 +1509,76 @@
     "/chunks/pages.ed3168fbc9fb29240c2a.hot-update.js": "/chunks/pages.ed3168fbc9fb29240c2a.hot-update.js",
     "/chunks/pages.abae00f1c2a44698b730.hot-update.js": "/chunks/pages.abae00f1c2a44698b730.hot-update.js",
     "/chunks/pages.c740ee4bcddc55967983.hot-update.js": "/chunks/pages.c740ee4bcddc55967983.hot-update.js",
-    "/chunks/users.65eb11620508e831009f.hot-update.js": "/chunks/users.65eb11620508e831009f.hot-update.js"
+    "/chunks/users.65eb11620508e831009f.hot-update.js": "/chunks/users.65eb11620508e831009f.hot-update.js",
+    "/chunks/user-invoices.cbb5844c807fc3f88893.hot-update.js": "/chunks/user-invoices.cbb5844c807fc3f88893.hot-update.js",
+    "/chunks/user-invoices.d81329856d3b10e76a42.hot-update.js": "/chunks/user-invoices.d81329856d3b10e76a42.hot-update.js",
+    "/chunks/user-invoices.a32e46852eace16708f2.hot-update.js": "/chunks/user-invoices.a32e46852eace16708f2.hot-update.js",
+    "/chunks/user-invoices.a6bf45c471937ba4f772.hot-update.js": "/chunks/user-invoices.a6bf45c471937ba4f772.hot-update.js",
+    "/chunks/user-invoices.322e05a97140a07ff6f2.hot-update.js": "/chunks/user-invoices.322e05a97140a07ff6f2.hot-update.js",
+    "/chunks/user-invoices.105e9723cebc30dfefdd.hot-update.js": "/chunks/user-invoices.105e9723cebc30dfefdd.hot-update.js",
+    "/chunks/user-invoices.978963a472f2c694fcf1.hot-update.js": "/chunks/user-invoices.978963a472f2c694fcf1.hot-update.js",
+    "/chunks/user-invoices.3c5afb6cb46fce172daf.hot-update.js": "/chunks/user-invoices.3c5afb6cb46fce172daf.hot-update.js",
+    "/chunks/user-invoices.24a01501604c4b6b615a.hot-update.js": "/chunks/user-invoices.24a01501604c4b6b615a.hot-update.js",
+    "/chunks/user-invoices.87da3acbfade98c2563d.hot-update.js": "/chunks/user-invoices.87da3acbfade98c2563d.hot-update.js",
+    "/chunks/user-invoices.466927c77a388381a00d.hot-update.js": "/chunks/user-invoices.466927c77a388381a00d.hot-update.js",
+    "/chunks/user-invoices.a0bb274b3c2a9adaeccd.hot-update.js": "/chunks/user-invoices.a0bb274b3c2a9adaeccd.hot-update.js",
+    "/chunks/user-invoices.9389b2f487eb3c334933.hot-update.js": "/chunks/user-invoices.9389b2f487eb3c334933.hot-update.js",
+    "/chunks/user-invoices.5a3d5e558bd4d9eabbf1.hot-update.js": "/chunks/user-invoices.5a3d5e558bd4d9eabbf1.hot-update.js",
+    "/chunks/user-invoices.4399093297a3aee39a7b.hot-update.js": "/chunks/user-invoices.4399093297a3aee39a7b.hot-update.js",
+    "/chunks/user-invoices.2cc8093678004fdeeb51.hot-update.js": "/chunks/user-invoices.2cc8093678004fdeeb51.hot-update.js",
+    "/chunks/user-invoices.15aad3e518930d5cfd92.hot-update.js": "/chunks/user-invoices.15aad3e518930d5cfd92.hot-update.js",
+    "/js/main.78c3ca353a0ecf703475.hot-update.js": "/js/main.78c3ca353a0ecf703475.hot-update.js",
+    "/chunks/dashboard.78c3ca353a0ecf703475.hot-update.js": "/chunks/dashboard.78c3ca353a0ecf703475.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/user-invoices.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/user-invoices.js?id=59b19ecfe3a32d2985df",
+    "/chunks/invoices.78c3ca353a0ecf703475.hot-update.js": "/chunks/invoices.78c3ca353a0ecf703475.hot-update.js",
+    "/chunks/pages.78c3ca353a0ecf703475.hot-update.js": "/chunks/pages.78c3ca353a0ecf703475.hot-update.js",
+    "/chunks/plans.78c3ca353a0ecf703475.hot-update.js": "/chunks/plans.78c3ca353a0ecf703475.hot-update.js",
+    "/chunks/user-invoices.78c3ca353a0ecf703475.hot-update.js": "/chunks/user-invoices.78c3ca353a0ecf703475.hot-update.js",
+    "/chunks/user-invoices.20175eb67908b2240cee.hot-update.js": "/chunks/user-invoices.20175eb67908b2240cee.hot-update.js",
+    "/chunks/user-invoices.c731ad6164108b94951c.hot-update.js": "/chunks/user-invoices.c731ad6164108b94951c.hot-update.js",
+    "/chunks/user-invoices.6c4e20f255c2534e3d5e.hot-update.js": "/chunks/user-invoices.6c4e20f255c2534e3d5e.hot-update.js",
+    "/chunks/user-invoices.24d31032daf87f69d6bf.hot-update.js": "/chunks/user-invoices.24d31032daf87f69d6bf.hot-update.js",
+    "/chunks/user-invoices.cd7d9855577880201d92.hot-update.js": "/chunks/user-invoices.cd7d9855577880201d92.hot-update.js",
+    "/chunks/user-invoices.cce379345b08dc351f7f.hot-update.js": "/chunks/user-invoices.cce379345b08dc351f7f.hot-update.js",
+    "/chunks/user-invoices.e3a53277d60638290ee4.hot-update.js": "/chunks/user-invoices.e3a53277d60638290ee4.hot-update.js",
+    "/chunks/user-invoices.8dedd3669f43a9d9502d.hot-update.js": "/chunks/user-invoices.8dedd3669f43a9d9502d.hot-update.js",
+    "/chunks/user-invoices.0c83b78fba1796af8e44.hot-update.js": "/chunks/user-invoices.0c83b78fba1796af8e44.hot-update.js",
+    "/chunks/user-invoices.9d039c6213324cbc9700.hot-update.js": "/chunks/user-invoices.9d039c6213324cbc9700.hot-update.js",
+    "/chunks/user-invoices.ed8b8a46c84ef8b002b1.hot-update.js": "/chunks/user-invoices.ed8b8a46c84ef8b002b1.hot-update.js",
+    "/chunks/user-invoices.8ae552d260f0e9db8b38.hot-update.js": "/chunks/user-invoices.8ae552d260f0e9db8b38.hot-update.js",
+    "/chunks/users.52f9adb2aac33bea7718.hot-update.js": "/chunks/users.52f9adb2aac33bea7718.hot-update.js",
+    "/chunks/pages.f2fb26121ddf39a243f8.hot-update.js": "/chunks/pages.f2fb26121ddf39a243f8.hot-update.js",
+    "/js/main.ee0b06fb8b1cb8afdc06.hot-update.js": "/js/main.ee0b06fb8b1cb8afdc06.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~2136b8da.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~2136b8da.js?id=edd095267f6204c60770",
+    "/chunks/dashboard.ee0b06fb8b1cb8afdc06.hot-update.js": "/chunks/dashboard.ee0b06fb8b1cb8afdc06.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans.js?id=d62ce026c0c13d14242f",
+    "/chunks/invoices.ee0b06fb8b1cb8afdc06.hot-update.js": "/chunks/invoices.ee0b06fb8b1cb8afdc06.hot-update.js",
+    "/chunks/pages.ee0b06fb8b1cb8afdc06.hot-update.js": "/chunks/pages.ee0b06fb8b1cb8afdc06.hot-update.js",
+    "/chunks/plans.ee0b06fb8b1cb8afdc06.hot-update.js": "/chunks/plans.ee0b06fb8b1cb8afdc06.hot-update.js",
+    "/chunks/user-invoices.ee0b06fb8b1cb8afdc06.hot-update.js": "/chunks/user-invoices.ee0b06fb8b1cb8afdc06.hot-update.js",
+    "/chunks/user-invoices.08a8b51bba3642d762e9.hot-update.js": "/chunks/user-invoices.08a8b51bba3642d762e9.hot-update.js",
+    "/chunks/user-invoices.a80bd8664b1ff9d3623e.hot-update.js": "/chunks/user-invoices.a80bd8664b1ff9d3623e.hot-update.js",
+    "/chunks/user-invoices.5b019ec0a77fea42264b.hot-update.js": "/chunks/user-invoices.5b019ec0a77fea42264b.hot-update.js",
+    "/chunks/user-invoices.3e476a38afd2d88f4a3a.hot-update.js": "/chunks/user-invoices.3e476a38afd2d88f4a3a.hot-update.js",
+    "/chunks/user-invoices.40006668fbc96c66c699.hot-update.js": "/chunks/user-invoices.40006668fbc96c66c699.hot-update.js",
+    "/chunks/user-invoices.35dbeca259476f151b65.hot-update.js": "/chunks/user-invoices.35dbeca259476f151b65.hot-update.js",
+    "/js/main.2490a70aeb50b94b1ea5.hot-update.js": "/js/main.2490a70aeb50b94b1ea5.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~eb798ce5.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~eb798ce5.js?id=84dfa92baf18eb589af6",
+    "/chunks/settings-invoices.2490a70aeb50b94b1ea5.hot-update.js": "/chunks/settings-invoices.2490a70aeb50b94b1ea5.hot-update.js",
+    "/chunks/settings-invoices.9f3d9a053c7075afda20.hot-update.js": "/chunks/settings-invoices.9f3d9a053c7075afda20.hot-update.js",
+    "/chunks/settings-invoices.c51e948ef40b124d8b46.hot-update.js": "/chunks/settings-invoices.c51e948ef40b124d8b46.hot-update.js",
+    "/chunks/settings-invoices.a580694f55b1a0553240.hot-update.js": "/chunks/settings-invoices.a580694f55b1a0553240.hot-update.js",
+    "/chunks/settings-invoices.52a3b31fea9f028c335a.hot-update.js": "/chunks/settings-invoices.52a3b31fea9f028c335a.hot-update.js",
+    "/chunks/settings-invoices.c4b8009d3cc143f30e34.hot-update.js": "/chunks/settings-invoices.c4b8009d3cc143f30e34.hot-update.js",
+    "/chunks/settings-invoices.a763ca26c9cdaec5f624.hot-update.js": "/chunks/settings-invoices.a763ca26c9cdaec5f624.hot-update.js",
+    "/chunks/settings-invoices.2780078260ad1b41d4d5.hot-update.js": "/chunks/settings-invoices.2780078260ad1b41d4d5.hot-update.js",
+    "/chunks/settings-invoices.3b747878c72c01b5704b.hot-update.js": "/chunks/settings-invoices.3b747878c72c01b5704b.hot-update.js",
+    "/chunks/settings-invoices.3973b27265947a0b9e0e.hot-update.js": "/chunks/settings-invoices.3973b27265947a0b9e0e.hot-update.js",
+    "/chunks/settings.a8e561b2b4fc7f9e1812.hot-update.js": "/chunks/settings.a8e561b2b4fc7f9e1812.hot-update.js",
+    "/chunks/admin.35c42af427bc66774fcd.hot-update.js": "/chunks/admin.35c42af427bc66774fcd.hot-update.js",
+    "/chunks/settings.35c42af427bc66774fcd.hot-update.js": "/chunks/settings.35c42af427bc66774fcd.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/shared.80f2cecae46ce30c3168.hot-update.js": "/chunks/admin~chunks/platform~chunks/shared.80f2cecae46ce30c3168.hot-update.js",
+    "/chunks/admin.e4da1c0c334e08d3cb87.hot-update.js": "/chunks/admin.e4da1c0c334e08d3cb87.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/shared.e4da1c0c334e08d3cb87.hot-update.js": "/chunks/admin~chunks/platform~chunks/shared.e4da1c0c334e08d3cb87.hot-update.js",
+    "/chunks/settings.e4da1c0c334e08d3cb87.hot-update.js": "/chunks/settings.e4da1c0c334e08d3cb87.hot-update.js"
 }
diff --git a/resources/js/components/Sidebar/ContentSidebar.vue b/resources/js/components/Sidebar/ContentSidebar.vue
index 65948769..256d45da 100644
--- a/resources/js/components/Sidebar/ContentSidebar.vue
+++ b/resources/js/components/Sidebar/ContentSidebar.vue
@@ -15,7 +15,7 @@
     @import '/resources/sass/vuefilemanager/_mixins';
 
     .content-sidebar {
-        background: rgba($light_background, 0.6);
+        background: rgb(249, 249, 250);
     }
 
     .dark .content-sidebar {
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index 9ee99050..30fcb4ac 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" style="background: rgba(244, 245, 246, 0.6)">
+    <div class="sm:flex md:h-screen md:overflow-hidden" style="background: rgb(249, 249, 250)">
 		<!--On Top of App Components-->
         <FilePreview />
 		<Spotlight />
diff --git a/resources/js/views/Admin/Pages.vue b/resources/js/views/Admin/Pages.vue
index 12c472fc..d3f61a71 100644
--- a/resources/js/views/Admin/Pages.vue
+++ b/resources/js/views/Admin/Pages.vue
@@ -4,7 +4,7 @@
 			<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>
+						<tr  style="border-bottom: 1px dashed #f3f3f3;">
 							<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 }}
diff --git a/resources/js/views/Admin/Users.vue b/resources/js/views/Admin/Users.vue
index 8164a97f..4a003992 100644
--- a/resources/js/views/Admin/Users.vue
+++ b/resources/js/views/Admin/Users.vue
@@ -11,7 +11,7 @@
 			<!--Datatable-->
             <DatatableWrapper @init="isLoading = false" api="/api/admin/users" :paginator="true" :columns="columns" class="table table-users">
                 <template slot-scope="{ row }">
-                    <tr>
+                    <tr style="border-bottom: 1px dashed #f3f3f3;">
                         <td class="py-3">
                             <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
                                 <DatatableCellImage
diff --git a/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue b/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
index a74db1a2..92e1dc1c 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
@@ -1,74 +1,64 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <PageTabGroup>
-            <DatatableWrapper
-                @init="isLoading = false"
-                :api="'/api/admin/users/' + this.$route.params.id + '/invoices'"
-                :paginator="false"
-                :columns="columns"
-                class="table"
-            >
-
-                <!--Table data content-->
+		<div class="card shadow-card">
+			<DatatableWrapper
+				@init="isLoading = false"
+				:api="'/api/subscription/users/' + this.$route.params.id + '/transactions'"
+				:paginator="true"
+				:columns="columns"
+			>
                 <template slot-scope="{ row }">
-                    <tr>
-                        <td>
-                            <a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank" class="cell-item">
-                                {{ row.data.attributes.order }}
-                            </a>
+                    <tr style="border-bottom: 1px dashed #f3f3f3;">
+                        <td class="py-4">
+                            <span class="text-sm font-bold">
+								{{ row.data.attributes.plan_name }}
+							</span>
                         </td>
                         <td>
-                            <span class="cell-item">
-                                {{ row.data.attributes.total }}
+							<ColorLabel color="purple">
+                                {{ row.data.attributes.status }}
+							</ColorLabel>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold">
+                                {{ row.data.attributes.price }}
                             </span>
                         </td>
                         <td>
-                            <span class="cell-item" v-if="row.data.attributes.invoice_subscriptions[0].description">
-                                {{ row.data.attributes.invoice_subscriptions[0].description }}
+                            <span class="text-sm font-bold">
+                                {{ row.data.attributes.created_at }}
                             </span>
                         </td>
-                        <td>
-                            <span class="cell-item">
-                                {{ row.data.attributes.created_at_formatted }}
+                        <td class="text-right">
+                            <span class="text-sm font-bold w-full">
+                                {{ row.data.attributes.driver }}
                             </span>
                         </td>
-                        <td>
-                            <div class="action-icons">
-                                <a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank">
-                                    <external-link-icon size="15" class="icon"></external-link-icon>
-                                </a>
-                            </div>
-                        </td>
                     </tr>
                 </template>
 
-                <!--Empty page-->
+				<!--Empty page-->
                 <template v-slot:empty-page>
-                    <InfoBox class="form-fixed-width">
+                    <InfoBox>
                         <p>{{ $t('admin_page_user.invoices.empty') }}</p>
                     </InfoBox>
                 </template>
             </DatatableWrapper>
-        </PageTabGroup>
+		</div>
     </PageTab>
 </template>
 
 <script>
     import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
-    import EmptyPageContent from '/resources/js/components/Others/EmptyPageContent'
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
+	import ColorLabel from "/resources/js/components/Others/ColorLabel"
     import PageTab from '/resources/js/components/Others/Layout/PageTab'
     import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-    import {ExternalLinkIcon} from "vue-feather-icons";
-    import axios from 'axios'
 
     export default {
         name: 'UserInvoices',
         components: {
-            EmptyPageContent,
             DatatableWrapper,
-            ExternalLinkIcon,
-            PageTabGroup,
+			ColorLabel,
             InfoBox,
             PageTab,
         },
@@ -77,41 +67,31 @@
                 isLoading: true,
                 columns: [
                     {
-                        label: this.$t('admin_page_invoices.table.number'),
-                        field: 'data.attributes.order',
-                        sortable: false
+                        label: this.$t('Plan'),
+                        field: 'plan_name',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('Status'),
+                        field: 'status',
+                        sortable: true
                     },
                     {
                         label: this.$t('admin_page_invoices.table.total'),
-                        field: 'data.attributes.bag.amount',
-                        sortable: false
+                        field: 'amount',
+                        sortable: true
                     },
                     {
-                        label: this.$t('admin_page_invoices.table.plan'),
-                        field: 'data.attributes.bag.amount',
-                        sortable: false
+                        label: this.$t('Payed At'),
+                        field: 'created_at',
+                        sortable: true
                     },
                     {
-                        label: this.$t('admin_page_invoices.table.payed'),
-                        field: 'data.attributes.created_at',
-                        sortable: false
-                    },
-                    {
-                        label: this.$t('admin_page_user.table.action'),
-                        sortable: false
+                        label: this.$t('Service'),
+                        sortable: true
                     },
                 ],
             }
         },
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-</style>
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 97dfa9ff..76a2713e 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" style="background: rgba(244, 245, 246, 0.6)">
+    <div class="sm:flex md:h-screen md:overflow-hidden" style="background: rgb(249, 249, 250)">
 		<!--On Top of App Components-->
         <FilePreview />
 		<Spotlight />
@@ -137,13 +137,13 @@
 						route: 'Subscription',
 					},
 					{
-						title: this.$t('menu.payment_cards'),
-						route: 'PaymentMethods',
-					},
-					{
-						title: this.$t('menu.invoices'),
+						title: this.$t('Transactions'),
 						route: 'Invoice',
 					},
+					/*{
+						title: this.$t('menu.payment_cards'),
+						route: 'PaymentMethods',
+					},*/
 				]
             }
         },
diff --git a/resources/js/views/User/Invoices.vue b/resources/js/views/User/Invoices.vue
index a29ceba3..78a2446a 100644
--- a/resources/js/views/User/Invoices.vue
+++ b/resources/js/views/User/Invoices.vue
@@ -1,69 +1,64 @@
 <template>
     <PageTab :is-loading="isLoading">
-        <PageTabGroup v-show="! isLoading">
-            <FormLabel>{{ $t('user_invoices.title') }}</FormLabel>
-            <DatatableWrapper @init="isLoading = false" api="/api/user/subscription/invoices" :paginator="false" :columns="columns" class="table">
-
-                <!--Table data content-->
+		<div class="card shadow-card">
+			<DatatableWrapper
+				@init="isLoading = false"
+				api="/api/subscription/transactions"
+				:paginator="true"
+				:columns="columns"
+			>
                 <template slot-scope="{ row }">
-                    <tr>
-                        <td>
-                            <a :href="'/invoice/' + row.data.attributes.customer + '/' + row.data.id" target="_blank" class="cell-item">
-                                {{ row.data.attributes.order }}
-                            </a>
+                    <tr style="border-bottom: 1px dashed #f3f3f3;">
+                        <td class="py-4">
+                            <span class="text-sm font-bold">
+								{{ row.data.attributes.plan_name }}
+							</span>
                         </td>
                         <td>
-                            <span class="cell-item">
-                                {{ row.data.attributes.total }}
+							<ColorLabel color="purple">
+                                {{ row.data.attributes.status }}
+							</ColorLabel>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold">
+                                {{ row.data.attributes.price }}
                             </span>
                         </td>
                         <td>
-                            <span class="cell-item" v-if="row.data.attributes.invoice_subscriptions[0].description">
-                                {{ row.data.attributes.invoice_subscriptions[0].description }}
+                            <span class="text-sm font-bold">
+                                {{ row.data.attributes.created_at }}
                             </span>
                         </td>
-                        <td>
-                            <span class="cell-item">
-                                {{ row.data.attributes.created_at_formatted }}
+                        <td class="text-right">
+                            <span class="text-sm font-bold w-full">
+                                {{ row.data.attributes.driver }}
                             </span>
                         </td>
-                        <td>
-                            <div class="action-icons">
-                                <a :href="$getInvoiceLink(row.data.attributes.customer, row.data.id)" target="_blank">
-                                    <external-link-icon size="15" class="icon"></external-link-icon>
-                                </a>
-                            </div>
-                        </td>
                     </tr>
                 </template>
 
-                <!--Empty page-->
+				<!--Empty page-->
                 <template v-slot:empty-page>
                     <InfoBox>
-                        <p>{{ $t('user_invoices.empty') }}</p>
+                        <p>{{ $t('admin_page_user.invoices.empty') }}</p>
                     </InfoBox>
                 </template>
             </DatatableWrapper>
-        </PageTabGroup>
+		</div>
     </PageTab>
 </template>
 
 <script>
     import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
-    import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
     import PageTab from '/resources/js/components/Others/Layout/PageTab'
     import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-    import {ExternalLinkIcon} from "vue-feather-icons"
-    import axios from 'axios'
+	import ColorLabel from "/resources/js/components/Others/ColorLabel"
 
     export default {
         name: 'UserInvoices',
         components: {
             DatatableWrapper,
-            ExternalLinkIcon,
-            PageTabGroup,
-            FormLabel,
+			ColorLabel,
             InfoBox,
             PageTab,
         },
@@ -71,44 +66,33 @@
             return {
                 isLoading: true,
                 invoices: undefined,
-                columns: [
-                    {
-                        label: this.$t('rows.invoice.number'),
-                        field: 'data.attributes.order',
-                        sortable: false
-                    },
-                    {
-                        label: this.$t('rows.invoice.total'),
-                        field: 'data.attributes.bag.amount',
-                        sortable: false
-                    },
-                    {
-                        label: this.$t('rows.invoice.plan'),
-                        field: 'data.attributes.bag.amount',
-                        sortable: false
-                    },
-                    {
-                        label: this.$t('rows.invoice.payed'),
-                        field: 'data.attributes.created_at',
-                        sortable: false
-                    },
-                    {
-                        label: this.$t('admin_page_user.table.action'),
-                        sortable: false
-                    },
-                ],
+				columns: [
+					{
+						label: this.$t('Plan'),
+						field: 'plan_name',
+						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'),
+						sortable: true
+					},
+				],
             }
         },
     }
 </script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .block-form {
-        max-width: 100%;
-    }
-
-</style>