diff --git a/public/assets/images/paypal-logo-thumbnail.png b/public/assets/images/paypal-logo-thumbnail.png
new file mode 100644
index 00000000..7a0a3022
Binary files /dev/null and b/public/assets/images/paypal-logo-thumbnail.png differ
diff --git a/public/assets/images/stripe-logo-thumbnail.png b/public/assets/images/stripe-logo-thumbnail.png
new file mode 100644
index 00000000..1210cd16
Binary files /dev/null and b/public/assets/images/stripe-logo-thumbnail.png differ
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 84307b4c..02bab1e0 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,4 +1,158 @@
 {
     "/js/main.js": "/js/main.js",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/js/main.d7957c876d9ba1a28acf.hot-update.js": "/js/main.d7957c876d9ba1a28acf.hot-update.js",
+    "/js/main.4e890d86ed022b924615.hot-update.js": "/js/main.4e890d86ed022b924615.hot-update.js",
+    "/js/main.406974838684d3773447.hot-update.js": "/js/main.406974838684d3773447.hot-update.js",
+    "/js/main.f17c18aae6f004d2e19f.hot-update.js": "/js/main.f17c18aae6f004d2e19f.hot-update.js",
+    "/js/main.b2210354354904bce88b.hot-update.js": "/js/main.b2210354354904bce88b.hot-update.js",
+    "/js/main.e196bfd2f5640ac421e6.hot-update.js": "/js/main.e196bfd2f5640ac421e6.hot-update.js",
+    "/js/main.235e38e85b8ea0a2d5d5.hot-update.js": "/js/main.235e38e85b8ea0a2d5d5.hot-update.js",
+    "/js/main.d182164a8fa938d010c1.hot-update.js": "/js/main.d182164a8fa938d010c1.hot-update.js",
+    "/js/main.17a733153f2066d5a794.hot-update.js": "/js/main.17a733153f2066d5a794.hot-update.js",
+    "/js/main.0bff6239f282813df5af.hot-update.js": "/js/main.0bff6239f282813df5af.hot-update.js",
+    "/js/main.6d0fb5c2b8a6ab1145a7.hot-update.js": "/js/main.6d0fb5c2b8a6ab1145a7.hot-update.js",
+    "/js/main.d3594fdee4597bd29370.hot-update.js": "/js/main.d3594fdee4597bd29370.hot-update.js",
+    "/js/main.216266fda0b18a2befe8.hot-update.js": "/js/main.216266fda0b18a2befe8.hot-update.js",
+    "/js/main.e3cc83010ecd9e9ed286.hot-update.js": "/js/main.e3cc83010ecd9e9ed286.hot-update.js",
+    "/js/main.21909be5e014008e717c.hot-update.js": "/js/main.21909be5e014008e717c.hot-update.js",
+    "/js/main.f3ed01137423c3827454.hot-update.js": "/js/main.f3ed01137423c3827454.hot-update.js",
+    "/js/main.aaae9760f5d7471cb1eb.hot-update.js": "/js/main.aaae9760f5d7471cb1eb.hot-update.js",
+    "/js/main.b1773999204ba472dba4.hot-update.js": "/js/main.b1773999204ba472dba4.hot-update.js",
+    "/js/main.0fbf14dcd6be120e44a4.hot-update.js": "/js/main.0fbf14dcd6be120e44a4.hot-update.js",
+    "/js/main.f0ab3244c6eb96789913.hot-update.js": "/js/main.f0ab3244c6eb96789913.hot-update.js",
+    "/js/main.5d5cc40c4f1cfa679ab6.hot-update.js": "/js/main.5d5cc40c4f1cfa679ab6.hot-update.js",
+    "/js/main.4b46c7d8489a2963f782.hot-update.js": "/js/main.4b46c7d8489a2963f782.hot-update.js",
+    "/js/main.1f33c17f609d7f2670cd.hot-update.js": "/js/main.1f33c17f609d7f2670cd.hot-update.js",
+    "/js/main.a591a98dfebe1b296168.hot-update.js": "/js/main.a591a98dfebe1b296168.hot-update.js",
+    "/js/main.af9565da32f2499f9f32.hot-update.js": "/js/main.af9565da32f2499f9f32.hot-update.js",
+    "/js/main.995a9429f68543fcba26.hot-update.js": "/js/main.995a9429f68543fcba26.hot-update.js",
+    "/js/main.8356fb577bf68607f9da.hot-update.js": "/js/main.8356fb577bf68607f9da.hot-update.js",
+    "/js/main.89bae95020c01a66f07b.hot-update.js": "/js/main.89bae95020c01a66f07b.hot-update.js",
+    "/js/main.958a5cd37f4e86ddc7e5.hot-update.js": "/js/main.958a5cd37f4e86ddc7e5.hot-update.js",
+    "/js/main.a6ce1cd48e01aca7a4bb.hot-update.js": "/js/main.a6ce1cd48e01aca7a4bb.hot-update.js",
+    "/js/main.c02a14a2215eb041c737.hot-update.js": "/js/main.c02a14a2215eb041c737.hot-update.js",
+    "/js/main.00e22405fa00eb12d3f4.hot-update.js": "/js/main.00e22405fa00eb12d3f4.hot-update.js",
+    "/js/main.b6d5b3a27efe0885fb44.hot-update.js": "/js/main.b6d5b3a27efe0885fb44.hot-update.js",
+    "/js/main.6e6045af864dff0706f4.hot-update.js": "/js/main.6e6045af864dff0706f4.hot-update.js",
+    "/js/main.8b5e496f974b80a24c29.hot-update.js": "/js/main.8b5e496f974b80a24c29.hot-update.js",
+    "/js/main.2f0fcaff7c458c173a69.hot-update.js": "/js/main.2f0fcaff7c458c173a69.hot-update.js",
+    "/js/main.007d5e312105e246029a.hot-update.js": "/js/main.007d5e312105e246029a.hot-update.js",
+    "/js/main.dd10beff96a7b21afbf9.hot-update.js": "/js/main.dd10beff96a7b21afbf9.hot-update.js",
+    "/js/main.fa6bc81224f7dd0810a6.hot-update.js": "/js/main.fa6bc81224f7dd0810a6.hot-update.js",
+    "/js/main.b5a057b2b6a0db1245de.hot-update.js": "/js/main.b5a057b2b6a0db1245de.hot-update.js",
+    "/js/main.0a939c3814e21613d202.hot-update.js": "/js/main.0a939c3814e21613d202.hot-update.js",
+    "/js/main.5c85d90242cdb28c35b5.hot-update.js": "/js/main.5c85d90242cdb28c35b5.hot-update.js",
+    "/js/main.00774663299d249acfdd.hot-update.js": "/js/main.00774663299d249acfdd.hot-update.js",
+    "/js/main.cb173ba676a358025873.hot-update.js": "/js/main.cb173ba676a358025873.hot-update.js",
+    "/js/main.c61849a7dee8921d46e3.hot-update.js": "/js/main.c61849a7dee8921d46e3.hot-update.js",
+    "/js/main.d8623d8504cee2a375dd.hot-update.js": "/js/main.d8623d8504cee2a375dd.hot-update.js",
+    "/js/main.d215b7802b7c1cd9f95a.hot-update.js": "/js/main.d215b7802b7c1cd9f95a.hot-update.js",
+    "/js/main.0a55a269f88001575d61.hot-update.js": "/js/main.0a55a269f88001575d61.hot-update.js",
+    "/js/main.2f9f8d2a8df474b2341d.hot-update.js": "/js/main.2f9f8d2a8df474b2341d.hot-update.js",
+    "/js/main.bf2884d16aa9210fd381.hot-update.js": "/js/main.bf2884d16aa9210fd381.hot-update.js",
+    "/js/main.e2e117952746597a15c4.hot-update.js": "/js/main.e2e117952746597a15c4.hot-update.js",
+    "/js/main.d5bb875572c591c47a5b.hot-update.js": "/js/main.d5bb875572c591c47a5b.hot-update.js",
+    "/js/main.7fb140d0e8a234a008ba.hot-update.js": "/js/main.7fb140d0e8a234a008ba.hot-update.js",
+    "/js/main.dc4f89c89337cdf35843.hot-update.js": "/js/main.dc4f89c89337cdf35843.hot-update.js",
+    "/js/main.1e92515c79ede957817b.hot-update.js": "/js/main.1e92515c79ede957817b.hot-update.js",
+    "/js/main.5032d61205befa4ec2c8.hot-update.js": "/js/main.5032d61205befa4ec2c8.hot-update.js",
+    "/js/main.87ed7386802a5c9d729b.hot-update.js": "/js/main.87ed7386802a5c9d729b.hot-update.js",
+    "/js/main.ae92fc6a16f87c5928ee.hot-update.js": "/js/main.ae92fc6a16f87c5928ee.hot-update.js",
+    "/js/main.6a6b856011dc735059fd.hot-update.js": "/js/main.6a6b856011dc735059fd.hot-update.js",
+    "/js/main.1eb8ae64fa7e12ce0522.hot-update.js": "/js/main.1eb8ae64fa7e12ce0522.hot-update.js",
+    "/js/main.680d7cb31d67478009cf.hot-update.js": "/js/main.680d7cb31d67478009cf.hot-update.js",
+    "/js/main.55ccdbf3f71ee08e5c5a.hot-update.js": "/js/main.55ccdbf3f71ee08e5c5a.hot-update.js",
+    "/js/main.48bd4e9f7383d338d9d6.hot-update.js": "/js/main.48bd4e9f7383d338d9d6.hot-update.js",
+    "/js/main.7e4837faea1327fd0558.hot-update.js": "/js/main.7e4837faea1327fd0558.hot-update.js",
+    "/js/main.6b0b28a2695ca29a67e1.hot-update.js": "/js/main.6b0b28a2695ca29a67e1.hot-update.js",
+    "/js/main.6d404ee3d929a70f93e6.hot-update.js": "/js/main.6d404ee3d929a70f93e6.hot-update.js",
+    "/js/main.2756711f09f0cae3df54.hot-update.js": "/js/main.2756711f09f0cae3df54.hot-update.js",
+    "/js/main.0436c57836bdb9c85082.hot-update.js": "/js/main.0436c57836bdb9c85082.hot-update.js",
+    "/js/main.e0f332f5ea7dad4ed76a.hot-update.js": "/js/main.e0f332f5ea7dad4ed76a.hot-update.js",
+    "/js/main.8ba29dda57b43c22d0e5.hot-update.js": "/js/main.8ba29dda57b43c22d0e5.hot-update.js",
+    "/js/main.27fb467e6c01734bee77.hot-update.js": "/js/main.27fb467e6c01734bee77.hot-update.js",
+    "/js/main.24bb2ecc2f361e964b08.hot-update.js": "/js/main.24bb2ecc2f361e964b08.hot-update.js",
+    "/js/main.c046f5589ef378a7eedd.hot-update.js": "/js/main.c046f5589ef378a7eedd.hot-update.js",
+    "/js/main.124ecc2a54e393bd05a5.hot-update.js": "/js/main.124ecc2a54e393bd05a5.hot-update.js",
+    "/js/main.fec944d2d4120986ed76.hot-update.js": "/js/main.fec944d2d4120986ed76.hot-update.js",
+    "/js/main.87557d0f402313981ed7.hot-update.js": "/js/main.87557d0f402313981ed7.hot-update.js",
+    "/js/main.5cbc4fb5d1d5ccb6c67f.hot-update.js": "/js/main.5cbc4fb5d1d5ccb6c67f.hot-update.js",
+    "/js/main.f2302f079f17b5d8ea4f.hot-update.js": "/js/main.f2302f079f17b5d8ea4f.hot-update.js",
+    "/js/main.5e8ce1af3475e2c4fd03.hot-update.js": "/js/main.5e8ce1af3475e2c4fd03.hot-update.js",
+    "/js/main.7618fb00b4c7270e93f3.hot-update.js": "/js/main.7618fb00b4c7270e93f3.hot-update.js",
+    "/js/main.29f6da9ce9ce6d29e9a0.hot-update.js": "/js/main.29f6da9ce9ce6d29e9a0.hot-update.js",
+    "/js/main.9b65f148b0fbf422640b.hot-update.js": "/js/main.9b65f148b0fbf422640b.hot-update.js",
+    "/js/main.1ff2b5f4b07dd7ab3bf3.hot-update.js": "/js/main.1ff2b5f4b07dd7ab3bf3.hot-update.js",
+    "/js/main.bbdc5968e8099bf67d30.hot-update.js": "/js/main.bbdc5968e8099bf67d30.hot-update.js",
+    "/js/main.1d6a8e95a7e102c96034.hot-update.js": "/js/main.1d6a8e95a7e102c96034.hot-update.js",
+    "/js/main.8f9c402258b5159a3e1c.hot-update.js": "/js/main.8f9c402258b5159a3e1c.hot-update.js",
+    "/js/main.f36bcb5ff037f8383fb1.hot-update.js": "/js/main.f36bcb5ff037f8383fb1.hot-update.js",
+    "/js/main.b8300b820d69db843b36.hot-update.js": "/js/main.b8300b820d69db843b36.hot-update.js",
+    "/js/main.d2e3a6c4974a7e8ff873.hot-update.js": "/js/main.d2e3a6c4974a7e8ff873.hot-update.js",
+    "/js/main.fbedd16523ea43f39112.hot-update.js": "/js/main.fbedd16523ea43f39112.hot-update.js",
+    "/js/main.077210fa2c703275e641.hot-update.js": "/js/main.077210fa2c703275e641.hot-update.js",
+    "/js/main.6fe82ab7c1466601559d.hot-update.js": "/js/main.6fe82ab7c1466601559d.hot-update.js",
+    "/js/main.6b49cd105280c0d9eec1.hot-update.js": "/js/main.6b49cd105280c0d9eec1.hot-update.js",
+    "/js/main.d06c68b66224a3f57404.hot-update.js": "/js/main.d06c68b66224a3f57404.hot-update.js",
+    "/js/main.00e33c7f4f49d16b81c0.hot-update.js": "/js/main.00e33c7f4f49d16b81c0.hot-update.js",
+    "/js/main.4cb449cfacc1ad049b10.hot-update.js": "/js/main.4cb449cfacc1ad049b10.hot-update.js",
+    "/js/main.8a151536768e310a8be6.hot-update.js": "/js/main.8a151536768e310a8be6.hot-update.js",
+    "/js/main.b895caf874ee35ffad49.hot-update.js": "/js/main.b895caf874ee35ffad49.hot-update.js",
+    "/js/main.fedf26b87330c9d28ce6.hot-update.js": "/js/main.fedf26b87330c9d28ce6.hot-update.js",
+    "/js/main.eee182e375e0b730151b.hot-update.js": "/js/main.eee182e375e0b730151b.hot-update.js",
+    "/js/main.5a14acdac5c4e3f238fa.hot-update.js": "/js/main.5a14acdac5c4e3f238fa.hot-update.js",
+    "/js/main.91998cb13baa6fcc9e12.hot-update.js": "/js/main.91998cb13baa6fcc9e12.hot-update.js",
+    "/js/main.4364f483473c3422a3fe.hot-update.js": "/js/main.4364f483473c3422a3fe.hot-update.js",
+    "/js/main.3d2b454bd0f8433f4823.hot-update.js": "/js/main.3d2b454bd0f8433f4823.hot-update.js",
+    "/js/main.d4a4d11cdffebc8732b5.hot-update.js": "/js/main.d4a4d11cdffebc8732b5.hot-update.js",
+    "/js/main.983be6ed686be98e5dbc.hot-update.js": "/js/main.983be6ed686be98e5dbc.hot-update.js",
+    "/js/main.105b1ef9227de3315bc4.hot-update.js": "/js/main.105b1ef9227de3315bc4.hot-update.js",
+    "/js/main.feb71af0efe71368e38a.hot-update.js": "/js/main.feb71af0efe71368e38a.hot-update.js",
+    "/js/main.e22452ffaa3df68a13bb.hot-update.js": "/js/main.e22452ffaa3df68a13bb.hot-update.js",
+    "/js/main.9211640ac2b27c13036b.hot-update.js": "/js/main.9211640ac2b27c13036b.hot-update.js",
+    "/js/main.bfb622ba2160c1820dd7.hot-update.js": "/js/main.bfb622ba2160c1820dd7.hot-update.js",
+    "/js/main.5a62e36c7b60d0aec9a3.hot-update.js": "/js/main.5a62e36c7b60d0aec9a3.hot-update.js",
+    "/js/main.84390e51ac68296d613c.hot-update.js": "/js/main.84390e51ac68296d613c.hot-update.js",
+    "/js/main.c5d4758bbda279be494e.hot-update.js": "/js/main.c5d4758bbda279be494e.hot-update.js",
+    "/js/main.4ac065dcb6832f89542a.hot-update.js": "/js/main.4ac065dcb6832f89542a.hot-update.js",
+    "/js/main.bb626cbd51998139ec99.hot-update.js": "/js/main.bb626cbd51998139ec99.hot-update.js",
+    "/js/main.5e844a987d6b947820cb.hot-update.js": "/js/main.5e844a987d6b947820cb.hot-update.js",
+    "/js/main.10276fdc63c1427a7c35.hot-update.js": "/js/main.10276fdc63c1427a7c35.hot-update.js",
+    "/js/main.5470953155b8c49d75b2.hot-update.js": "/js/main.5470953155b8c49d75b2.hot-update.js",
+    "/js/main.a1847d8ccc07e9b27709.hot-update.js": "/js/main.a1847d8ccc07e9b27709.hot-update.js",
+    "/js/main.45ef729d7e90a2c182ef.hot-update.js": "/js/main.45ef729d7e90a2c182ef.hot-update.js",
+    "/js/main.65018038046a65411361.hot-update.js": "/js/main.65018038046a65411361.hot-update.js",
+    "/js/main.72654af8787c4e3d0b60.hot-update.js": "/js/main.72654af8787c4e3d0b60.hot-update.js",
+    "/js/main.531e7f60425caf85ed37.hot-update.js": "/js/main.531e7f60425caf85ed37.hot-update.js",
+    "/js/main.12ccdeac939866eef9f3.hot-update.js": "/js/main.12ccdeac939866eef9f3.hot-update.js",
+    "/js/main.cf3e841ddff22b0be3d4.hot-update.js": "/js/main.cf3e841ddff22b0be3d4.hot-update.js",
+    "/js/main.e9338e272019f23c85cd.hot-update.js": "/js/main.e9338e272019f23c85cd.hot-update.js",
+    "/js/main.0711c7f21d7fc686f0de.hot-update.js": "/js/main.0711c7f21d7fc686f0de.hot-update.js",
+    "/js/main.3e7b963de4493d7261e8.hot-update.js": "/js/main.3e7b963de4493d7261e8.hot-update.js",
+    "/js/main.0ce23740ff2afd6ca7fb.hot-update.js": "/js/main.0ce23740ff2afd6ca7fb.hot-update.js",
+    "/js/main.8c558ee8a17f29833410.hot-update.js": "/js/main.8c558ee8a17f29833410.hot-update.js",
+    "/js/main.d2f209053a4ec2a5f2cb.hot-update.js": "/js/main.d2f209053a4ec2a5f2cb.hot-update.js",
+    "/js/main.a067ed016dce4c1cbc4a.hot-update.js": "/js/main.a067ed016dce4c1cbc4a.hot-update.js",
+    "/js/main.8f4c07d1497862035a44.hot-update.js": "/js/main.8f4c07d1497862035a44.hot-update.js",
+    "/js/main.2a948f0bd086822c473b.hot-update.js": "/js/main.2a948f0bd086822c473b.hot-update.js",
+    "/js/main.1e0973fcb77de0c53b4c.hot-update.js": "/js/main.1e0973fcb77de0c53b4c.hot-update.js",
+    "/js/main.1c306f803d5092dc58e7.hot-update.js": "/js/main.1c306f803d5092dc58e7.hot-update.js",
+    "/js/main.7800f2f0da46630be27a.hot-update.js": "/js/main.7800f2f0da46630be27a.hot-update.js",
+    "/js/main.d1e07574dd7010cc4122.hot-update.js": "/js/main.d1e07574dd7010cc4122.hot-update.js",
+    "/js/main.7accb28998dd477ac303.hot-update.js": "/js/main.7accb28998dd477ac303.hot-update.js",
+    "/js/main.e160e66a41385e542810.hot-update.js": "/js/main.e160e66a41385e542810.hot-update.js",
+    "/js/main.9f6dc35302dff20e2b35.hot-update.js": "/js/main.9f6dc35302dff20e2b35.hot-update.js",
+    "/js/main.ec87834c8f3549ebf75a.hot-update.js": "/js/main.ec87834c8f3549ebf75a.hot-update.js",
+    "/js/main.cd06d1c2a7c7b9843e79.hot-update.js": "/js/main.cd06d1c2a7c7b9843e79.hot-update.js",
+    "/js/main.d6a4081a8417e7d18dd3.hot-update.js": "/js/main.d6a4081a8417e7d18dd3.hot-update.js",
+    "/js/main.d5b976745e134408d7ce.hot-update.js": "/js/main.d5b976745e134408d7ce.hot-update.js",
+    "/js/main.3aeb7f943ca75d272206.hot-update.js": "/js/main.3aeb7f943ca75d272206.hot-update.js",
+    "/js/main.3ddbe46fad29f85f428f.hot-update.js": "/js/main.3ddbe46fad29f85f428f.hot-update.js",
+    "/js/main.16f43954da58d892be9c.hot-update.js": "/js/main.16f43954da58d892be9c.hot-update.js",
+    "/js/main.3a2cc186ebd51958931f.hot-update.js": "/js/main.3a2cc186ebd51958931f.hot-update.js",
+    "/js/main.381ebae33717640ec595.hot-update.js": "/js/main.381ebae33717640ec595.hot-update.js",
+    "/js/main.33a9277a27bc43ed2a03.hot-update.js": "/js/main.33a9277a27bc43ed2a03.hot-update.js",
+    "/js/main.280a722c6db8975059a0.hot-update.js": "/js/main.280a722c6db8975059a0.hot-update.js",
+    "/js/main.22596cb51d24d038668d.hot-update.js": "/js/main.22596cb51d24d038668d.hot-update.js"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 8ab80cae..565ce1f8 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -124,6 +124,7 @@
         box-sizing: border-box;
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         font-size: 16px;
+        text-decoration: none;
     }
 
     #auth {
diff --git a/resources/js/components/FilesView/MobileActionButton.vue b/resources/js/components/FilesView/MobileActionButton.vue
index 9f78a89c..77bb6d03 100644
--- a/resources/js/components/FilesView/MobileActionButton.vue
+++ b/resources/js/components/FilesView/MobileActionButton.vue
@@ -6,6 +6,7 @@
             <trash-icon v-if="icon === 'trash'" size="15" class="icon"></trash-icon>
             <grid-icon v-if="icon === 'th'" size="15" class="icon"></grid-icon>
             <user-plus-icon v-if="icon === 'user-plus'" size="15" class="icon"></user-plus-icon>
+            <plus-icon v-if="icon === 'plus'" size="15" class="icon"></plus-icon>
             <span class="label">
                 <slot></slot>
             </span>
@@ -14,7 +15,7 @@
 </template>
 
 <script>
-    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon } from 'vue-feather-icons'
+    import { FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon } from 'vue-feather-icons'
 
     export default {
         name: 'MobileActionButton',
@@ -25,6 +26,7 @@
             FolderPlusIcon,
             UserPlusIcon,
             TrashIcon,
+            PlusIcon,
             ListIcon,
             GridIcon,
         }
diff --git a/resources/js/components/Others/Tables/DatatableCellImage.vue b/resources/js/components/Others/Tables/DatatableCellImage.vue
new file mode 100644
index 00000000..905ef90b
--- /dev/null
+++ b/resources/js/components/Others/Tables/DatatableCellImage.vue
@@ -0,0 +1,83 @@
+ <template>
+     <div class="cell-image-thumbnail">
+         <div class="image" :class="imageSize" v-if="image">
+             <img :src="image" :alt="title">
+         </div>
+         <div class="info">
+             <b class="name" v-if="title">{{ title }}</b>
+             <span class="description" v-if="description">{{ description }}</span>
+         </div>
+     </div>
+</template>
+
+<script>
+    export default {
+        name:'DatatableCellImage',
+        props: ['image', 'title', 'description', 'image-size'],
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .cell-image-thumbnail {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .image {
+            margin-right: 20px;
+            line-height: 0;
+
+            img {
+                line-height: 0;
+                width: 48px;
+                height: 48px;
+                border-radius: 8px;
+            }
+
+            &.small {
+                img {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+        }
+
+        .info {
+
+            .name, .description {
+                max-width: 150px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: block;
+            }
+
+            .name {
+                @include font-size(15);
+                line-height: 1;
+                color: $text;
+            }
+
+            .description {
+                color: $text-muted;
+                @include font-size(12);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .cell-image-thumbnail {
+
+            .info {
+
+                .description {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+</style>
diff --git a/resources/js/components/Others/Tables/DatatableWrapper.vue b/resources/js/components/Others/Tables/DatatableWrapper.vue
index 162b3cff..35b68526 100644
--- a/resources/js/components/Others/Tables/DatatableWrapper.vue
+++ b/resources/js/components/Others/Tables/DatatableWrapper.vue
@@ -198,7 +198,7 @@
                     padding: 12px;
 
                     span {
-                        color: #AFAFAF;
+                        color: $theme;
                         font-weight: 700;
                         @include font-size(12);
                         white-space: nowrap;
@@ -238,6 +238,7 @@
         .table-body {
             tr {
                 border-radius: 8px;
+                border-bottom: 1px solid #f5f5f5;
 
                 &:hover {
                     background: $light_background;
diff --git a/resources/js/components/Sidebar/MenuBar.vue b/resources/js/components/Sidebar/MenuBar.vue
index 462319dc..24a45c4d 100644
--- a/resources/js/components/Sidebar/MenuBar.vue
+++ b/resources/js/components/Sidebar/MenuBar.vue
@@ -28,13 +28,13 @@
 
             <router-link :to="{name: 'Profile'}" :class="{'is-active': $isThisRoute($route, ['Password', 'Profile', 'Storage'])}" class="icon-navigation-item settings">
                 <div class="button-icon">
-                    <settings-icon size="19"></settings-icon>
+                    <user-icon size="19"></user-icon>
                 </div>
             </router-link>
 
             <router-link v-if="app.user.role === 'admin'" :to="{name: 'Users'}" :class="{'is-active': $isThisRoute($route, ['Users', 'User', 'UserDetail', 'UserStorage', 'UserPassword', 'UserDelete'])}" class="icon-navigation-item users">
                 <div class="button-icon">
-                    <users-icon size="19"></users-icon>
+                    <settings-icon size="19"></settings-icon>
                 </div>
             </router-link>
         </div>
@@ -57,7 +57,7 @@
         HardDriveIcon,
         SettingsIcon,
         Trash2Icon,
-        UsersIcon,
+        UserIcon,
         PowerIcon,
         ShareIcon,
     } from 'vue-feather-icons'
@@ -71,7 +71,7 @@
             Trash2Icon,
             PowerIcon,
             ShareIcon,
-            UsersIcon,
+            UserIcon,
         },
         computed: {
             ...mapGetters(['app']),
diff --git a/resources/js/router.js b/resources/js/router.js
index 0b087dec..dea6bacf 100644
--- a/resources/js/router.js
+++ b/resources/js/router.js
@@ -20,14 +20,24 @@ import SharedFiles from './views/FilePages/SharedFiles'
 import MobileSettings from './views/Mobile/MobileSettings'
 
 import Admin from './views/Admin'
-import Users from './views/Admin/Users'
+import Plans from './views/Admin/Plans'
+import Invoices from './views/Admin/Invoices'
 
+// Payment Methods
+import PaymentMethods from './views/Admin/PaymentMethods'
+import PaymentMethod from './views/Admin/PaymentMethods/PaymentMethod'
+import GatewaySettings from './views/Admin/PaymentMethods/PaymentMethodTabs/GatewaySettings'
+import GatewayTransactions from './views/Admin/PaymentMethods/PaymentMethodTabs/GatewayTransactions'
+
+// Users
+import Users from './views/Admin/Users'
 import User from './views/Admin/Users/User'
 import UserCreate from './views/Admin/Users/UserCreate'
 import UserDetail from './views/Admin/Users/UserTabs/UserDetail'
 import UserDelete from './views/Admin/Users/UserTabs/UserDelete'
 import UserStorage from './views/Admin/Users/UserTabs/UserStorage'
 import UserPassword from './views/Admin/Users/UserTabs/UserPassword'
+import UserInvoices from './views/Admin/Users/UserTabs/UserInvoices'
 
 Vue.use(Router)
 
@@ -115,6 +125,35 @@ const router = new Router({
                 title: 'Admin'
             },
             children: [
+
+                // List Pages
+                {
+                    name: 'PaymentMethods',
+                    path: '/admin/payment-methods',
+                    component: PaymentMethods,
+                    meta: {
+                        requiresAuth: true,
+                        title: 'Payment Methods'
+                    },
+                },
+                {
+                    name: 'Invoices',
+                    path: '/admin/invoices',
+                    component: Invoices,
+                    meta: {
+                        requiresAuth: true,
+                        title: 'Invoices'
+                    },
+                },
+                {
+                    name: 'Plans',
+                    path: '/admin/plans',
+                    component: Plans,
+                    meta: {
+                        requiresAuth: true,
+                        title: 'Pricing Plans'
+                    },
+                },
                 {
                     name: 'Users',
                     path: '/admin/users',
@@ -124,6 +163,8 @@ const router = new Router({
                         title: i18n.t('routes_title.users_list')
                     },
                 },
+
+                // Create Pages
                 {
                     name: 'UserCreate',
                     path: '/admin/user/create',
@@ -133,6 +174,8 @@ const router = new Router({
                         title: i18n.t('routes_title.user_create')
                     },
                 },
+
+                // Single pages
                 {
                     name: 'User',
                     path: '/admin/user/:id',
@@ -160,6 +203,15 @@ const router = new Router({
                                 title: i18n.t('routes_title.users_storage_usage')
                             },
                         },
+                        {
+                            name: 'UserInvoices',
+                            path: '/admin/user/:id/invoices',
+                            component: UserInvoices,
+                            meta: {
+                                requiresAuth: true,
+                                title: 'Invoices'
+                            },
+                        },
                         {
                             name: 'UserPassword',
                             path: '/admin/user/:id/password',
@@ -180,6 +232,35 @@ const router = new Router({
                         },
                     ]
                 },
+                {
+                    name: 'PaymentMethod',
+                    path: '/admin/payment-method/:name',
+                    component: PaymentMethod,
+                    meta: {
+                        requiresAuth: true,
+                        title: 'Payment Method'
+                    },
+                    children: [
+                        {
+                            name: 'GatewaySettings',
+                            path: '/admin/payment-methods/:name/settings',
+                            component: GatewaySettings,
+                            meta: {
+                                requiresAuth: true,
+                                title: 'Settings'
+                            },
+                        },
+                        {
+                            name: 'GatewayTransactions',
+                            path: '/admin/payment-methods/:name/transactions',
+                            component: GatewayTransactions,
+                            meta: {
+                                requiresAuth: true,
+                                title: 'Transactions'
+                            },
+                        },
+                    ]
+                },
             ]
         },
         {
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index b09385da..53a2c552 100644
--- a/resources/js/views/Admin.vue
+++ b/resources/js/views/Admin.vue
@@ -1,7 +1,7 @@
 <template>
     <section id="viewport">
 
-        <ContentSidebar v-if="false">
+        <ContentSidebar>
 
             <!--Locations-->
             <ContentGroup :title="$t('admin_menu.admin_label')" class="navigator">
@@ -14,11 +14,48 @@
                             {{ $t('admin_menu.users') }}
                         </div>
                     </router-link>
+                    <router-link :to="{name: 'User'}" class="menu-list-item link">
+                        <div class="icon">
+                            <settings-icon size="17"></settings-icon>
+                        </div>
+                        <div class="label">
+                            Settings
+                        </div>
+                    </router-link>
+                </div>
+            </ContentGroup>
+
+            <ContentGroup title="SaaS" class="navigator">
+                <div class="menu-list-wrapper vertical">
+                    <router-link :to="{name: 'Invoices'}" class="menu-list-item link">
+                        <div class="icon">
+                            <file-text-icon size="17"></file-text-icon>
+                        </div>
+                        <div class="label">
+                            Invoices
+                        </div>
+                    </router-link>
+                    <router-link :to="{name: 'Plans'}" class="menu-list-item link">
+                        <div class="icon">
+                            <database-icon size="17"></database-icon>
+                        </div>
+                        <div class="label">
+                            Plans
+                        </div>
+                    </router-link>
+                    <router-link :to="{name: 'PaymentMethods'}" class="menu-list-item link">
+                        <div class="icon">
+                            <credit-card-icon size="17"></credit-card-icon>
+                        </div>
+                        <div class="label">
+                            Payment Methods
+                        </div>
+                    </router-link>
                 </div>
             </ContentGroup>
         </ContentSidebar>
 
-        <keep-alive :include="['Users']">
+        <keep-alive>
             <router-view/>
         </keep-alive>
     </section>
@@ -28,7 +65,7 @@
     import ContentSidebar from '@/components/Sidebar/ContentSidebar'
     import ContentGroup from '@/components/Sidebar/ContentGroup'
     import { mapGetters } from 'vuex'
-    import { UsersIcon } from 'vue-feather-icons'
+    import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon } from 'vue-feather-icons'
 
     export default {
         name: 'Settings',
@@ -36,6 +73,10 @@
             ...mapGetters(['config']),
         },
         components: {
+            DatabaseIcon,
+            CreditCardIcon,
+            FileTextIcon,
+            SettingsIcon,
             ContentSidebar,
             ContentGroup,
             UsersIcon,
diff --git a/resources/js/views/Admin/Invoices.vue b/resources/js/views/Admin/Invoices.vue
new file mode 100644
index 00000000..299ac617
--- /dev/null
+++ b/resources/js/views/Admin/Invoices.vue
@@ -0,0 +1,413 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" v-if="! isLoading">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+                <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
+                    <template scope="{ row }">
+                        <tr>
+                            <td>
+                                <span class="cell-item">
+                                    ${{ row.attributes.total }}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ row.attributes.plan }}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ row.attributes.created_at_formatted }}
+                                </span>
+                            </td>
+                            <td>
+                                <router-link :to="{name: 'UserInvoices', params: {id: row.relationships.user.data.id}}">
+                                    <DatatableCellImage
+                                            image-size="small"
+                                            :image="row.relationships.user.data.attributes.avatar"
+                                            :title="row.relationships.user.data.attributes.name"
+                                    />
+                                </router-link>
+                            </td>
+                            <td>
+                                <div class="action-icons">
+                                    <router-link :to="{name: 'UserDelete', params: {id: row.relationships.user.data.id}}">
+                                        <download-cloud-icon size="15" class="icon"></download-cloud-icon>
+                                    </router-link>
+                                </div>
+                            </td>
+                        </tr>
+                    </template>
+                </DatatableWrapper>
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import DatatableCellImage from '@/components/Others/Tables/DatatableCellImage'
+    import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {DownloadCloudIcon} from "vue-feather-icons";
+    import PageHeader from '@/components/Others/PageHeader'
+    import ColorLabel from '@/components/Others/ColorLabel'
+    import Spinner from '@/components/FilesView/Spinner'
+    import axios from 'axios'
+
+    export default {
+        name: 'Plans',
+        components: {
+            DownloadCloudIcon,
+            DatatableCellImage,
+            MobileActionButton,
+            DatatableWrapper,
+            SectionTitle,
+            MobileHeader,
+            SwitchInput,
+            PageHeader,
+            ButtonBase,
+            ColorLabel,
+            Spinner,
+        },
+        data() {
+            return {
+                isLoading: false,
+                invoices: [
+                    {
+                        id: '1',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: 'http://localhost:8000/avatars/6osmoXJo-avatar-01.png',
+                                        name: 'Jane Doe',
+                                        email: 'howdy@hi5ve.digital',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '2',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: 'http://localhost:8000/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
+                                        name: 'Peter Papp',
+                                        email: 'peterpapp@makingcg.com',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '3',
+                        type: 'invoices',
+                        attributes: {
+                            total: 49.99,
+                            plan: 'Business Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: 'http://localhost:8000/assets/images/default-avatar.png',
+                                        name: 'Pavel Svintsitskiy',
+                                        email: 'pashaUSA@gmail.com',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '4',
+                        type: 'invoices',
+                        attributes: {
+                            total: 29.99,
+                            plan: 'Professional Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: 'http://localhost:8000/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
+                                        name: 'Torsten',
+                                        email: 'torsten.hoegel@go-on-net.de',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '5',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: 'http://localhost:8000/avatars/6osmoXJo-avatar-01.png',
+                                        name: 'Jane Doe',
+                                        email: 'howdy@hi5ve.digital',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '6',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: 'http://localhost:8000/avatars/dSMRCbwF-69299654_2418248648259454_4545563304688353280_o.jpg',
+                                        name: 'Peter Papp',
+                                        email: 'peterpapp@makingcg.com',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '7',
+                        type: 'invoices',
+                        attributes: {
+                            total: 49.99,
+                            plan: 'Business Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: 'http://localhost:8000/assets/images/default-avatar.png',
+                                        name: 'Pavel Svintsitskiy',
+                                        email: 'pashaUSA@gmail.com',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    {
+                        id: '8',
+                        type: 'invoices',
+                        attributes: {
+                            total: 29.99,
+                            plan: 'Professional Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                        relationships: {
+                            user: {
+                                data: {
+                                    id: '1',
+                                    type: 'users',
+                                    attributes: {
+                                        avatar: 'http://localhost:8000/avatars/lTksMdJM-6D3529EF-5D8C-4959-BEC2-4BDE80A051C2.jpeg',
+                                        name: 'Torsten',
+                                        email: 'torsten.hoegel@go-on-net.de',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                ],
+                columns: [
+                    {
+                        label: 'Total',
+                        field: 'attributes.total',
+                        sortable: true
+                    },
+                    {
+                        label: 'Plan',
+                        field: 'attributes.plan',
+                        sortable: true
+                    },
+                    {
+                        label: 'Payed',
+                        field: 'attributes.created_at',
+                        sortable: true
+                    },
+                    {
+                        label: 'User',
+                        field: 'relationships.user.data.id',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.action'),
+                        field: 'data.action',
+                        sortable: false
+                    },
+                ],
+            }
+        },
+        created() {
+            /*axios.get('/api/invoices')
+                .then(response => {
+                    this.invoices = response.data.data
+                    this.isLoading = false
+                })*/
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .user-thumbnail {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .avatar {
+            margin-right: 20px;
+            line-height: 0;
+
+            img {
+                line-height: 0;
+                width: 48px;
+                height: 48px;
+                border-radius: 8px;
+            }
+        }
+
+        .info {
+
+            .name {
+                max-width: 150px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: block;
+            }
+
+            .name {
+                @include font-size(15);
+                line-height: 1;
+            }
+        }
+    }
+
+    .table-tools {
+        background: white;
+        display: flex;
+        justify-content: space-between;
+        padding: 15px 0 10px;
+        position: sticky;
+        top: 40px;
+        z-index: 9;
+    }
+
+    .table {
+
+        .cell-item {
+            @include font-size(15);
+            white-space: nowrap;
+        }
+
+        .name {
+            font-weight: 700;
+            cursor: pointer;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .table-tools {
+            padding: 0 0 5px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .table-tools {
+            background: $dark_mode_background;
+        }
+
+        .action-icons {
+
+            .icon {
+                cursor: pointer;
+
+                circle, path, line, polyline {
+                    stroke: $dark_mode_text_primary;
+                }
+            }
+        }
+
+        .user-thumbnail {
+
+            .info {
+
+                .email {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+
+</style>
diff --git a/resources/js/views/Admin/PaymentMethods.vue b/resources/js/views/Admin/PaymentMethods.vue
new file mode 100644
index 00000000..17f48219
--- /dev/null
+++ b/resources/js/views/Admin/PaymentMethods.vue
@@ -0,0 +1,245 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" v-if="! isLoading">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+                <DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
+                    <template scope="{ row }">
+                        <tr>
+                            <td>
+                                <router-link :to="{name: 'GatewaySettings', params: {name: row.attributes.type}}">
+                                    <DatatableCellImage
+                                        :image="row.attributes.avatar"
+                                        :title="row.attributes.gateway"
+                                    />
+                                </router-link>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    <SwitchInput class="switch" :state="row.attributes.status"/>
+                                </span>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ row.attributes.payments_processed }}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ row.attributes.active_subscribers }}
+                                </span>
+                            </td>
+                            <td>
+                                <div class="action-icons">
+                                    <router-link :to="{name: 'GatewaySettings', params: {name: row.attributes.type}}">
+                                        <edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
+                                    </router-link>
+                                </div>
+                            </td>
+                        </tr>
+                    </template>
+                </DatatableWrapper>
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import DatatableCellImage from '@/components/Others/Tables/DatatableCellImage'
+    import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
+    import PageHeader from '@/components/Others/PageHeader'
+    import ColorLabel from '@/components/Others/ColorLabel'
+    import Spinner from '@/components/FilesView/Spinner'
+    import axios from 'axios'
+
+    export default {
+        name: 'Plans',
+        components: {
+            DatatableCellImage,
+            MobileActionButton,
+            DatatableWrapper,
+            SectionTitle,
+            MobileHeader,
+            SwitchInput,
+            Trash2Icon,
+            PageHeader,
+            ButtonBase,
+            ColorLabel,
+            Edit2Icon,
+            Spinner,
+        },
+        data() {
+            return {
+                isLoading: false,
+                plans: [
+                    {
+                        id: '2',
+                        type: 'payment_method',
+                        attributes: {
+                            type: 'paypal',
+                            gateway: 'PayPal',
+                            avatar: '/assets/images/paypal-logo-thumbnail.png',
+                            status: 0,
+                            payments_processed: 234,
+                            active_subscribers: 2920,
+                        }
+                    },
+                    {
+                        id: '1',
+                        type: 'payment_method',
+                        attributes: {
+                            type: 'stripe',
+                            gateway: 'Stripe',
+                            avatar: '/assets/images/stripe-logo-thumbnail.png',
+                            status: 1,
+                            payments_processed: 798,
+                            active_subscribers: 3587,
+                        }
+                    },
+                ],
+                columns: [
+                    {
+                        label: 'Payment Gateway',
+                        field: 'attributes.gateway',
+                        sortable: true
+                    },
+                    {
+                        label: 'Status',
+                        field: 'attributes.status',
+                        sortable: true
+                    },
+                    {
+                        label: 'Payments Processed',
+                        field: 'attributes.payments_processed',
+                        sortable: true
+                    },
+                    {
+                        label: 'Active Subscribers',
+                        field: 'attributes.active_subscribers',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.action'),
+                        field: 'data.action',
+                        sortable: false
+                    },
+                ],
+            }
+        },
+        created() {
+            /*axios.get('/api/plans')
+                .then(response => {
+                    this.plans = response.data.data
+                    this.isLoading = false
+                })*/
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .user-thumbnail {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .avatar {
+            margin-right: 20px;
+            line-height: 0;
+
+            img {
+                line-height: 0;
+                width: 48px;
+                height: 48px;
+                border-radius: 8px;
+            }
+        }
+
+        .info {
+
+            .name {
+                max-width: 150px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: block;
+            }
+
+            .name {
+                @include font-size(15);
+                line-height: 1;
+            }
+        }
+    }
+
+    .table-tools {
+        background: white;
+        display: flex;
+        justify-content: space-between;
+        padding: 15px 0 10px;
+        position: sticky;
+        top: 40px;
+        z-index: 9;
+    }
+
+    .table {
+
+        .cell-item {
+            @include font-size(15);
+            white-space: nowrap;
+        }
+
+        .name {
+            font-weight: 700;
+            cursor: pointer;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .table-tools {
+            padding: 0 0 5px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .table-tools {
+            background: $dark_mode_background;
+        }
+
+        .action-icons {
+
+            .icon {
+                cursor: pointer;
+
+                circle, path, line, polyline {
+                    stroke: $dark_mode_text_primary;
+                }
+            }
+        }
+
+        .user-thumbnail {
+
+            .info {
+
+                .email {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+
+</style>
diff --git a/resources/js/views/Admin/PaymentMethods/PaymentMethod.vue b/resources/js/views/Admin/PaymentMethods/PaymentMethod.vue
new file mode 100644
index 00000000..d43e7d3f
--- /dev/null
+++ b/resources/js/views/Admin/PaymentMethods/PaymentMethod.vue
@@ -0,0 +1,148 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" class="medium-width" v-if="! isLoading">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :can-back="true" :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+
+                <!--User thumbnail-->
+                <div class="user-thumbnail">
+                    <div class="avatar">
+                        <img :src="gateway.attributes.avatar" :alt="gateway.attributes.gateway">
+                    </div>
+                    <div class="info">
+                        <b class="name">{{ gateway.attributes.gateway }}</b>
+                        <span class="email">Payment Gateway</span>
+                    </div>
+                </div>
+
+                <!--Page Tab links-->
+                <div class="menu-list-wrapper horizontal">
+                    <router-link replace :to="{name: 'GatewaySettings', params: {name: gateway.attributes.type}}" class="menu-list-item link">
+                        <div class="icon">
+                            <settings-icon size="17"></settings-icon>
+                        </div>
+                        <div class="label">
+                            Settings
+                        </div>
+                    </router-link>
+
+                    <router-link replace :to="{name: 'GatewayTransactions', params: {name: gateway.attributes.type}}" class="menu-list-item link">
+                        <div class="icon">
+                            <credit-card-icon size="17"></credit-card-icon>
+                        </div>
+                        <div class="label">
+                            Transactions
+                        </div>
+                    </router-link>
+                </div>
+
+                <!--Router Content-->
+                <router-view :gateway="gateway"/>
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {CreditCardIcon, SettingsIcon} from 'vue-feather-icons'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import PageHeader from '@/components/Others/PageHeader'
+    import Spinner from '@/components/FilesView/Spinner'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'Profile',
+        components: {
+            SettingsIcon,
+            CreditCardIcon,
+            SectionTitle,
+            MobileHeader,
+            PageHeader,
+            Spinner,
+        },
+        data() {
+            return {
+                isLoading: false,
+                gateway: {
+                    id: '1',
+                    type: 'payment_method',
+                    attributes: {
+                        type: 'stripe',
+                        gateway: 'Stripe',
+                        avatar: '/assets/images/stripe-logo-thumbnail.png',
+                        status: 1,
+                        payments_processed: 798,
+                        active_subscribers: 3587,
+                    }
+                },
+            }
+        },
+        created() {
+            /*axios.get('/api/users/' + this.$route.params.id + '/detail')
+                .then(response => {
+                    this.user = response.data.data
+                    this.isLoading = false
+                })*/
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .user-thumbnail {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+
+        .avatar {
+            margin-right: 20px;
+
+            img {
+                line-height: 0;
+                width: 62px;
+                height: 62px;
+                border-radius: 12px;
+            }
+        }
+
+        .info {
+
+            .name {
+                display: block;
+                @include font-size(17);
+                line-height: 1;
+            }
+
+            .email {
+                color: $text-muted;
+                @include font-size(14);
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .user-thumbnail {
+
+            .info {
+
+                .email {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+
+</style>
diff --git a/resources/js/views/Admin/PaymentMethods/PaymentMethodTabs/GatewaySettings.vue b/resources/js/views/Admin/PaymentMethods/PaymentMethodTabs/GatewaySettings.vue
new file mode 100644
index 00000000..a7fe09f6
--- /dev/null
+++ b/resources/js/views/Admin/PaymentMethods/PaymentMethodTabs/GatewaySettings.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="page-tab">
+
+        <!--Personal Information-->
+        <div class="page-tab-group">
+            <ValidationObserver ref="personalInformation" v-slot="{ invalid }" tag="form" class="form block-form">
+
+                <b class="form-group-label">Stripe Secret</b>
+                <!---->
+                <div class="block-wrapper">
+                    <label>Stripe Client ID</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ClientID" rules="required"
+                                        v-slot="{ errors }">
+                        <input placeholder="Paste stripe client id here" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+                <!---->
+                <div class="block-wrapper">
+                    <label>Stripe Secret</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="StripeSecret" rules="required"
+                                        v-slot="{ errors }">
+                        <input placeholder="Paste stripe secret here" type="text" />
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+            </ValidationObserver>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import StorageItemDetail from '@/components/Others/StorageItemDetail'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import SetupBox from '@/components/Others/Forms/SetupBox'
+    import {required} from 'vee-validate/dist/rules'
+    import { mapGetters } from 'vuex'
+    import {events} from "@/bus"
+    import axios from 'axios'
+
+    export default {
+        name: 'UserDetail',
+        props: [
+            'user'
+        ],
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            StorageItemDetail,
+            SelectInput,
+            ButtonBase,
+            SetupBox,
+            required,
+        },
+        data() {
+            return {
+                isLoading: false,
+                isSendingRequest: false,
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .page-tab {
+
+        .page-tab-group {
+            margin-bottom: 45px;
+        }
+    }
+
+    .block-form {
+        max-width: 100%;
+    }
+
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>
diff --git a/resources/js/views/Admin/PaymentMethods/PaymentMethodTabs/GatewayTransactions.vue b/resources/js/views/Admin/PaymentMethods/PaymentMethodTabs/GatewayTransactions.vue
new file mode 100644
index 00000000..293cec77
--- /dev/null
+++ b/resources/js/views/Admin/PaymentMethods/PaymentMethodTabs/GatewayTransactions.vue
@@ -0,0 +1,199 @@
+<template>
+    <div class="page-tab">
+
+        <!--Change role-->
+        <div class="page-tab-group">
+            <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
+                <template scope="{ row }">
+                    <tr>
+                        <td>
+                            <span class="cell-item">
+                                ${{ row.attributes.total }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="cell-item">
+                                {{ row.attributes.plan }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="cell-item">
+                                {{ row.attributes.created_at_formatted }}
+                            </span>
+                        </td>
+                        <td>
+                            <div class="action-icons">
+                                <download-cloud-icon size="15" class="icon"></download-cloud-icon>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </DatatableWrapper>
+        </div>
+    </div>
+</template>
+
+<script>
+    import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import {DownloadCloudIcon} from "vue-feather-icons";
+    import axios from 'axios'
+
+    export default {
+        name: 'UserStorage',
+        components: {
+            DatatableWrapper,
+            DownloadCloudIcon,
+        },
+        data() {
+            return {
+                isLoading: false,
+                invoices: [
+                    {
+                        id: '1',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '2',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '3',
+                        type: 'invoices',
+                        attributes: {
+                            total: 49.99,
+                            plan: 'Business Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '4',
+                        type: 'invoices',
+                        attributes: {
+                            total: 29.99,
+                            plan: 'Professional Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '5',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '6',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '7',
+                        type: 'invoices',
+                        attributes: {
+                            total: 49.99,
+                            plan: 'Business Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '8',
+                        type: 'invoices',
+                        attributes: {
+                            total: 29.99,
+                            plan: 'Professional Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                ],
+                columns: [
+                    {
+                        label: 'Total',
+                        field: 'attributes.total',
+                        sortable: true
+                    },
+                    {
+                        label: 'Plan',
+                        field: 'attributes.plan',
+                        sortable: true
+                    },
+                    {
+                        label: 'Payed',
+                        field: 'attributes.created_at',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.action'),
+                        field: 'data.action',
+                        sortable: false
+                    },
+                ],
+            }
+        },
+        created() {
+            /*axios.get('/api/users/' + this.$route.params.id + '/storage')
+                .then(response => {
+                    this.storage = response.data.data
+                    this.isLoading = false
+                })*/
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .page-tab {
+
+        .page-tab-group {
+            margin-bottom: 45px;
+        }
+    }
+
+    .block-form {
+        max-width: 100%;
+    }
+
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>
diff --git a/resources/js/views/Admin/Plans.vue b/resources/js/views/Admin/Plans.vue
new file mode 100644
index 00000000..00c7246c
--- /dev/null
+++ b/resources/js/views/Admin/Plans.vue
@@ -0,0 +1,240 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" v-if="! isLoading">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+            <PageHeader :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+                <div class="table-tools">
+                    <div class="buttons">
+                        <router-link :to="{name: 'UserCreate'}">
+                            <MobileActionButton icon="plus">
+                                Create Plan
+                            </MobileActionButton>
+                        </router-link>
+                    </div>
+                    <div class="searching">
+
+                    </div>
+                </div>
+                <DatatableWrapper :paginator="false" :columns="columns" :data="plans" class="table table-users">
+                    <template scope="{ row }">
+                        <tr>
+                            <td class="name">
+                                <router-link :to="{name: 'UserDetail', params: {id: row.id}}" class="cell-item" tag="div">
+                                    <span>{{ row.attributes.name }}</span>
+                                </router-link>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    <SwitchInput class="switch" :state="row.attributes.status"/>
+                                </span>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    ${{ row.attributes.price }}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ row.attributes.capacity }}
+                                </span>
+                            </td>
+                            <td>
+                                <span class="cell-item">
+                                    {{ row.attributes.subscribers }}
+                                </span>
+                            </td>
+                            <td>
+                                <div class="action-icons">
+                                    <router-link :to="{name: 'UserDetail', params: {id: row.id}}">
+                                        <edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
+                                    </router-link>
+                                    <router-link :to="{name: 'UserDelete', params: {id: row.id}}">
+                                        <trash2-icon size="15" class="icon icon-trash"></trash2-icon>
+                                    </router-link>
+                                </div>
+                            </td>
+                        </tr>
+                    </template>
+                </DatatableWrapper>
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
+    import SwitchInput from '@/components/Others/Forms/SwitchInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import SectionTitle from '@/components/Others/SectionTitle'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import {Trash2Icon, Edit2Icon} from "vue-feather-icons";
+    import PageHeader from '@/components/Others/PageHeader'
+    import ColorLabel from '@/components/Others/ColorLabel'
+    import Spinner from '@/components/FilesView/Spinner'
+    import axios from 'axios'
+
+    export default {
+        name: 'Plans',
+        components: {
+            MobileActionButton,
+            DatatableWrapper,
+            SectionTitle,
+            MobileHeader,
+            SwitchInput,
+            Trash2Icon,
+            PageHeader,
+            ButtonBase,
+            ColorLabel,
+            Edit2Icon,
+            Spinner,
+        },
+        data() {
+            return {
+                isLoading: false,
+                plans: [
+                    {
+                        id: '1',
+                        type: 'plans',
+                        attributes: {
+                            name: 'Starter Plan',
+                            status: 1,
+                            price: 9.99,
+                            capacity: '200GB',
+                            subscribers: 172,
+                        }
+                    },
+                    {
+                        id: '2',
+                        type: 'plans',
+                        attributes: {
+                            name: 'Professional Plan',
+                            status: 0,
+                            price: 19.99,
+                            capacity: '500GB',
+                            subscribers: 1929,
+                        }
+                    },
+                    {
+                        id: '3',
+                        type: 'plans',
+                        attributes: {
+                            name: 'Business Plan',
+                            status: 1,
+                            price: 44.99,
+                            capacity: '1TB',
+                            subscribers: 389,
+                        }
+                    },
+                ],
+                columns: [
+                    {
+                        label: 'Plan',
+                        field: 'attributes.name',
+                        sortable: true
+                    },
+                    {
+                        label: 'Status',
+                        field: 'attributes.status',
+                        sortable: true
+                    },
+                    {
+                        label: 'Price',
+                        field: 'attributes.price',
+                        sortable: true
+                    },
+                    {
+                        label: 'Storage Capacity',
+                        field: 'attributes.capacity',
+                        sortable: true
+                    },
+                    {
+                        label: 'Subscribers',
+                        field: 'attributes.subscribers',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.action'),
+                        field: 'data.action',
+                        sortable: false
+                    },
+                ],
+            }
+        },
+        created() {
+            /*axios.get('/api/plans')
+                .then(response => {
+                    this.plans = response.data.data
+                    this.isLoading = false
+                })*/
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .table-tools {
+        background: white;
+        display: flex;
+        justify-content: space-between;
+        padding: 15px 0 10px;
+        position: sticky;
+        top: 40px;
+        z-index: 9;
+    }
+
+    .table {
+
+        .cell-item {
+            @include font-size(15);
+            white-space: nowrap;
+        }
+
+        .name {
+            font-weight: 700;
+            cursor: pointer;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .table-tools {
+            padding: 0 0 5px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .table-tools {
+            background: $dark_mode_background;
+        }
+
+        .action-icons {
+
+            .icon {
+                cursor: pointer;
+
+                circle, path, line, polyline {
+                    stroke: $dark_mode_text_primary;
+                }
+            }
+        }
+
+        .user-thumbnail {
+
+            .info {
+
+                .email {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+    }
+
+</style>
diff --git a/resources/js/views/Admin/Users.vue b/resources/js/views/Admin/Users.vue
index 61d5002a..797ef081 100644
--- a/resources/js/views/Admin/Users.vue
+++ b/resources/js/views/Admin/Users.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="single-page">
-        <div id="page-content" class="medium-width" v-if="! isLoading">
+        <div id="page-content" v-if="! isLoading">
             <MobileHeader :title="$router.currentRoute.meta.title"/>
             <PageHeader :title="$router.currentRoute.meta.title"/>
 
@@ -21,14 +21,12 @@
                     <template scope="{ row }">
                         <tr>
                             <td style="width: 300px">
-                                <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}" tag="div" class="user-thumbnail">
-                                    <div class="avatar">
-                                        <img :src="row.data.attributes.avatar" :alt="row.data.attributes.name">
-                                    </div>
-                                    <div class="info">
-                                        <b class="name">{{ row.data.attributes.name }}</b>
-                                        <span class="email">{{ row.data.attributes.email }}</span>
-                                    </div>
+                                <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
+                                    <DatatableCellImage
+                                            :image="row.data.attributes.avatar"
+                                            :title="row.data.attributes.name"
+                                            :description="row.data.attributes.email"
+                                    />
                                 </router-link>
                             </td>
                             <td>
@@ -73,6 +71,7 @@
 </template>
 
 <script>
+    import DatatableCellImage from '@/components/Others/Tables/DatatableCellImage'
     import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
     import MobileActionButton from '@/components/FilesView/MobileActionButton'
     import MobileHeader from '@/components/Mobile/MobileHeader'
@@ -87,6 +86,7 @@
     export default {
         name: 'Profile',
         components: {
+            DatatableCellImage,
             MobileActionButton,
             DatatableWrapper,
             SectionTitle,
@@ -172,33 +172,6 @@
         z-index: 9;
     }
 
-    .action-icons {
-        white-space: nowrap;
-
-        a {
-            display: inline-block;
-            margin-left: 10px;
-
-            &:first-child {
-                margin-left: 0;
-            }
-        }
-
-        .icon {
-            cursor: pointer;
-
-            circle, path, line, polyline {
-                stroke: $text;
-            }
-
-            &.icon-trash {
-                circle, path, line, polyline {
-                    stroke: $red;
-                }
-            }
-        }
-    }
-
     .table {
 
         .cell-item {
@@ -207,45 +180,6 @@
         }
     }
 
-    .user-thumbnail {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-
-        .avatar {
-            margin-right: 20px;
-            line-height: 0;
-
-            img {
-                line-height: 0;
-                width: 48px;
-                height: 48px;
-                border-radius: 8px;
-            }
-        }
-
-        .info {
-
-            .name, .email {
-                max-width: 150px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                display: block;
-            }
-
-            .name {
-                @include font-size(15);
-                line-height: 1;
-            }
-
-            .email {
-                color: $text-muted;
-                @include font-size(12);
-            }
-        }
-    }
-
     @media only screen and (max-width: 690px) {
         .table-tools {
             padding: 0 0 5px;
@@ -268,16 +202,6 @@
                 }
             }
         }
-
-        .user-thumbnail {
-
-            .info {
-
-                .email {
-                    color: $dark_mode_text_secondary;
-                }
-            }
-        }
     }
 
 </style>
diff --git a/resources/js/views/Admin/Users/User.vue b/resources/js/views/Admin/Users/User.vue
index ee7d4007..77939d6b 100644
--- a/resources/js/views/Admin/Users/User.vue
+++ b/resources/js/views/Admin/Users/User.vue
@@ -16,7 +16,8 @@
                             {{ user.attributes.name }}
                             <ColorLabel color="purple">
                                 {{ user.attributes.role }}
-                            </ColorLabel></b>
+                            </ColorLabel>
+                        </b>
                         <span class="email">{{ user.attributes.email }}</span>
                     </div>
                 </div>
@@ -41,6 +42,15 @@
                         </div>
                     </router-link>
 
+                    <router-link replace :to="{name: 'UserInvoices'}" class="menu-list-item link">
+                        <div class="icon">
+                            <file-text-icon size="17"></file-text-icon>
+                        </div>
+                        <div class="label">
+                            Invoices
+                        </div>
+                    </router-link>
+
                     <router-link replace :to="{name: 'UserPassword'}" class="menu-list-item link">
                         <div class="icon">
                             <lock-icon size="17"></lock-icon>
@@ -50,7 +60,8 @@
                         </div>
                     </router-link>
 
-                    <router-link replace :to="{name: 'UserDelete'}" v-if="user.attributes.name !== app.user.name" class="menu-list-item link">
+                    <router-link replace :to="{name: 'UserDelete'}" v-if="user.attributes.name !== app.user.name"
+                                 class="menu-list-item link">
                         <div class="icon">
                             <trash2-icon size="17"></trash2-icon>
                         </div>
@@ -61,7 +72,7 @@
                 </div>
 
                 <!--Router Content-->
-                <router-view :user="user" @reload-user="fetchUser" />
+                <router-view :user="user" @reload-user="fetchUser"/>
             </div>
         </div>
         <div id="loader" v-if="isLoading">
@@ -71,28 +82,29 @@
 </template>
 
 <script>
-    import { UserIcon, HardDriveIcon, LockIcon, Trash2Icon } from 'vue-feather-icons'
+    import {UserIcon, HardDriveIcon, LockIcon, Trash2Icon, FileTextIcon} from 'vue-feather-icons'
     import StorageItemDetail from '@/components/Others/StorageItemDetail'
     import MobileHeader from '@/components/Mobile/MobileHeader'
     import SectionTitle from '@/components/Others/SectionTitle'
     import PageHeader from '@/components/Others/PageHeader'
     import ColorLabel from '@/components/Others/ColorLabel'
     import Spinner from '@/components/FilesView/Spinner'
-    import { mapGetters } from 'vuex'
+    import {mapGetters} from 'vuex'
     import axios from 'axios'
 
     export default {
         name: 'Profile',
         components: {
-            Trash2Icon,
-            LockIcon,
             HardDriveIcon,
             StorageItemDetail,
             SectionTitle,
+            FileTextIcon,
             MobileHeader,
             PageHeader,
             ColorLabel,
+            Trash2Icon,
             UserIcon,
+            LockIcon,
             Spinner,
         },
         computed: {
diff --git a/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue b/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
new file mode 100644
index 00000000..293cec77
--- /dev/null
+++ b/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
@@ -0,0 +1,199 @@
+<template>
+    <div class="page-tab">
+
+        <!--Change role-->
+        <div class="page-tab-group">
+            <DatatableWrapper :paginator="true" :columns="columns" :data="invoices" class="table">
+                <template scope="{ row }">
+                    <tr>
+                        <td>
+                            <span class="cell-item">
+                                ${{ row.attributes.total }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="cell-item">
+                                {{ row.attributes.plan }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="cell-item">
+                                {{ row.attributes.created_at_formatted }}
+                            </span>
+                        </td>
+                        <td>
+                            <div class="action-icons">
+                                <download-cloud-icon size="15" class="icon"></download-cloud-icon>
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+            </DatatableWrapper>
+        </div>
+    </div>
+</template>
+
+<script>
+    import DatatableWrapper from '@/components/Others/Tables/DatatableWrapper'
+    import {DownloadCloudIcon} from "vue-feather-icons";
+    import axios from 'axios'
+
+    export default {
+        name: 'UserStorage',
+        components: {
+            DatatableWrapper,
+            DownloadCloudIcon,
+        },
+        data() {
+            return {
+                isLoading: false,
+                invoices: [
+                    {
+                        id: '1',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '2',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '3',
+                        type: 'invoices',
+                        attributes: {
+                            total: 49.99,
+                            plan: 'Business Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '4',
+                        type: 'invoices',
+                        attributes: {
+                            total: 29.99,
+                            plan: 'Professional Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '5',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '6',
+                        type: 'invoices',
+                        attributes: {
+                            total: 9.99,
+                            plan: 'Starter Plan',
+                            created_at: '30. April. 2020',
+                            created_at_formatted: '30. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '7',
+                        type: 'invoices',
+                        attributes: {
+                            total: 49.99,
+                            plan: 'Business Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                    {
+                        id: '8',
+                        type: 'invoices',
+                        attributes: {
+                            total: 29.99,
+                            plan: 'Professional Plan',
+                            created_at: '31. April. 2020',
+                            created_at_formatted: '31. April. 2020',
+                            download: 'https://vuefilemanager.com/',
+                        },
+                    },
+                ],
+                columns: [
+                    {
+                        label: 'Total',
+                        field: 'attributes.total',
+                        sortable: true
+                    },
+                    {
+                        label: 'Plan',
+                        field: 'attributes.plan',
+                        sortable: true
+                    },
+                    {
+                        label: 'Payed',
+                        field: 'attributes.created_at',
+                        sortable: true
+                    },
+                    {
+                        label: this.$t('admin_page_user.table.action'),
+                        field: 'data.action',
+                        sortable: false
+                    },
+                ],
+            }
+        },
+        created() {
+            /*axios.get('/api/users/' + this.$route.params.id + '/storage')
+                .then(response => {
+                    this.storage = response.data.data
+                    this.isLoading = false
+                })*/
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .page-tab {
+
+        .page-tab-group {
+            margin-bottom: 45px;
+        }
+    }
+
+    .block-form {
+        max-width: 100%;
+    }
+
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>
diff --git a/resources/js/views/Auth/SignIn.vue b/resources/js/views/Auth/SignIn.vue
index cc94c51d..1f6ec866 100644
--- a/resources/js/views/Auth/SignIn.vue
+++ b/resources/js/views/Auth/SignIn.vue
@@ -86,8 +86,8 @@
             return {
                 isLoading: false,
                 checkedAccount: undefined,
-                loginPassword: '',
-                loginEmail: '',
+                loginPassword: 'vuefilemanager',
+                loginEmail: 'howdy@hi5ve.digital',
             }
         },
         methods: {
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index acc140c8..3931f065 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -106,7 +106,7 @@
       &:hover {
 
         svg {
-          path, line, polyline, rect, circle {
+          path, line, polyline, rect, circle, ellipse {
             stroke: $theme;
           }
         }
@@ -120,7 +120,7 @@
         margin-right: 12px;
         line-height: 0;
 
-        path, line, polyline, rect, circle {
+        path, line, polyline, rect, circle, ellipse {
           stroke: $text;
         }
       }
@@ -184,7 +184,7 @@
           margin-right: 5px;
           width: 20px;
 
-          path, line, polyline, rect, circle {
+          path, line, polyline, rect, circle, ellipse {
             @include transition(150ms);
           }
         }
@@ -194,7 +194,7 @@
         &.is-current {
 
           .folder-icon {
-            path, line, polyline, rect, circle {
+            path, line, polyline, rect, circle, ellipse {
               stroke: $theme;
             }
           }
@@ -214,6 +214,35 @@
   display: block;
 }
 
+.table {
+  .action-icons {
+    white-space: nowrap;
+
+    a {
+      display: inline-block;
+      margin-left: 10px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
+    .icon {
+      cursor: pointer;
+
+      circle, path, line, polyline {
+        stroke: $text;
+      }
+
+      &.icon-trash {
+        circle, path, line, polyline {
+          stroke: $red;
+        }
+      }
+    }
+  }
+}
+
 @media only screen and (max-width: 1024px) {
 
   #single-page {
@@ -278,7 +307,7 @@
 
         .icon {
 
-          path, line, polyline, rect, circle {
+          path, line, polyline, rect, circle, ellipse {
             stroke: $dark_mode_text_primary;
           }
         }
@@ -290,7 +319,7 @@
 
       .icon {
 
-        path, line, polyline, rect, circle {
+        path, line, polyline, rect, circle, ellipse {
           stroke: $dark_mode_text_primary;
         }
       }
@@ -304,7 +333,7 @@
 
         .icon {
 
-          path, line, polyline, rect, circle {
+          path, line, polyline, rect, circle, ellipse {
             stroke: $theme;
           }
         }