diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index f3d03b7b..c3146409 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -7,5 +7,211 @@
     "/js/main.efe95c75e3dc04fda73e.hot-update.js": "/js/main.efe95c75e3dc04fda73e.hot-update.js",
     "/js/main.b2921e5ff3050aa390ce.hot-update.js": "/js/main.b2921e5ff3050aa390ce.hot-update.js",
     "/js/main.a4123c79b197780e3ade.hot-update.js": "/js/main.a4123c79b197780e3ade.hot-update.js",
-    "/js/main.03410e4c21da6f93734b.hot-update.js": "/js/main.03410e4c21da6f93734b.hot-update.js"
+    "/js/main.03410e4c21da6f93734b.hot-update.js": "/js/main.03410e4c21da6f93734b.hot-update.js",
+    "/js/main.1593b10ba86b3c716d71.hot-update.js": "/js/main.1593b10ba86b3c716d71.hot-update.js",
+    "/js/main.22d8df3e92baf3fce90e.hot-update.js": "/js/main.22d8df3e92baf3fce90e.hot-update.js",
+    "/js/main.ac0bf715cad6262cd972.hot-update.js": "/js/main.ac0bf715cad6262cd972.hot-update.js",
+    "/js/main.c80c1dc635621381471d.hot-update.js": "/js/main.c80c1dc635621381471d.hot-update.js",
+    "/js/main.da6ee16f2dc02b63b0a4.hot-update.js": "/js/main.da6ee16f2dc02b63b0a4.hot-update.js",
+    "/js/main.cf7b74318c538b7712f4.hot-update.js": "/js/main.cf7b74318c538b7712f4.hot-update.js",
+    "/js/main.fd2d817f27f919390b48.hot-update.js": "/js/main.fd2d817f27f919390b48.hot-update.js",
+    "/js/main.1c8848af67829d4713b3.hot-update.js": "/js/main.1c8848af67829d4713b3.hot-update.js",
+    "/js/main.0fa0f809d8ddc549f097.hot-update.js": "/js/main.0fa0f809d8ddc549f097.hot-update.js",
+    "/js/main.e2f2102015c35aef9578.hot-update.js": "/js/main.e2f2102015c35aef9578.hot-update.js",
+    "/js/main.a8d912e21dda9b5e0a0a.hot-update.js": "/js/main.a8d912e21dda9b5e0a0a.hot-update.js",
+    "/js/main.12b8cef7186b82cd87ae.hot-update.js": "/js/main.12b8cef7186b82cd87ae.hot-update.js",
+    "/js/main.1a811cd94065c796f08c.hot-update.js": "/js/main.1a811cd94065c796f08c.hot-update.js",
+    "/js/main.aaea667ba4e9ff4889c5.hot-update.js": "/js/main.aaea667ba4e9ff4889c5.hot-update.js",
+    "/js/main.e1c1ec69ee1f0d2b7611.hot-update.js": "/js/main.e1c1ec69ee1f0d2b7611.hot-update.js",
+    "/js/main.0b0dd15fedb075bc0d00.hot-update.js": "/js/main.0b0dd15fedb075bc0d00.hot-update.js",
+    "/js/main.549d8172379f7c6ab028.hot-update.js": "/js/main.549d8172379f7c6ab028.hot-update.js",
+    "/js/main.7792632bf76683ef4588.hot-update.js": "/js/main.7792632bf76683ef4588.hot-update.js",
+    "/js/main.86940367851defcb1bac.hot-update.js": "/js/main.86940367851defcb1bac.hot-update.js",
+    "/js/main.87f74b80f2503a0d728c.hot-update.js": "/js/main.87f74b80f2503a0d728c.hot-update.js",
+    "/js/main.3ebaa3668f23c6e26548.hot-update.js": "/js/main.3ebaa3668f23c6e26548.hot-update.js",
+    "/js/main.15057417af28b6c6d6ff.hot-update.js": "/js/main.15057417af28b6c6d6ff.hot-update.js",
+    "/js/main.2e7c576dbf2e7503b8ef.hot-update.js": "/js/main.2e7c576dbf2e7503b8ef.hot-update.js",
+    "/js/main.47f584845c3310757ea5.hot-update.js": "/js/main.47f584845c3310757ea5.hot-update.js",
+    "/js/main.6f7b50d4c52af64a51c2.hot-update.js": "/js/main.6f7b50d4c52af64a51c2.hot-update.js",
+    "/js/main.265e3ed2100aeb1cfff9.hot-update.js": "/js/main.265e3ed2100aeb1cfff9.hot-update.js",
+    "/js/main.a1cdd1c29ccf399b7141.hot-update.js": "/js/main.a1cdd1c29ccf399b7141.hot-update.js",
+    "/js/main.49bbabe613088b451c19.hot-update.js": "/js/main.49bbabe613088b451c19.hot-update.js",
+    "/js/main.3629824777dab206f9ee.hot-update.js": "/js/main.3629824777dab206f9ee.hot-update.js",
+    "/js/main.f61e6adbbe20e94ca550.hot-update.js": "/js/main.f61e6adbbe20e94ca550.hot-update.js",
+    "/js/main.2ee91f5e4302b51c0279.hot-update.js": "/js/main.2ee91f5e4302b51c0279.hot-update.js",
+    "/js/main.3f8e72c90f8f9bc89569.hot-update.js": "/js/main.3f8e72c90f8f9bc89569.hot-update.js",
+    "/js/main.d0a86f9a8cb2e673cf37.hot-update.js": "/js/main.d0a86f9a8cb2e673cf37.hot-update.js",
+    "/js/main.d0bc3040ff8aa0112594.hot-update.js": "/js/main.d0bc3040ff8aa0112594.hot-update.js",
+    "/js/main.26dc29e6caa621492b9d.hot-update.js": "/js/main.26dc29e6caa621492b9d.hot-update.js",
+    "/js/main.94a0a85c82278f47e6d0.hot-update.js": "/js/main.94a0a85c82278f47e6d0.hot-update.js",
+    "/js/main.c1f1327a107c7e877d26.hot-update.js": "/js/main.c1f1327a107c7e877d26.hot-update.js",
+    "/js/main.559481d20fb86a3590a6.hot-update.js": "/js/main.559481d20fb86a3590a6.hot-update.js",
+    "/js/main.5c9789988c31fd602b79.hot-update.js": "/js/main.5c9789988c31fd602b79.hot-update.js",
+    "/js/main.bc6cf3eca8ac4df9adc9.hot-update.js": "/js/main.bc6cf3eca8ac4df9adc9.hot-update.js",
+    "/js/main.b8c00841ae4b474b6a60.hot-update.js": "/js/main.b8c00841ae4b474b6a60.hot-update.js",
+    "/js/main.bd599b3896c244b6bef8.hot-update.js": "/js/main.bd599b3896c244b6bef8.hot-update.js",
+    "/js/main.2e36d672614a2914e23c.hot-update.js": "/js/main.2e36d672614a2914e23c.hot-update.js",
+    "/js/main.efdcc9d7e9c18a7d1cca.hot-update.js": "/js/main.efdcc9d7e9c18a7d1cca.hot-update.js",
+    "/js/main.c3f805fddf6ec0cbbb89.hot-update.js": "/js/main.c3f805fddf6ec0cbbb89.hot-update.js",
+    "/js/main.f0010dfcc8c31d3983c4.hot-update.js": "/js/main.f0010dfcc8c31d3983c4.hot-update.js",
+    "/js/main.4d8045b6b3778a4ffeb1.hot-update.js": "/js/main.4d8045b6b3778a4ffeb1.hot-update.js",
+    "/js/main.63238fe535516168d1e7.hot-update.js": "/js/main.63238fe535516168d1e7.hot-update.js",
+    "/js/main.b7a962e7b5a90c9e579d.hot-update.js": "/js/main.b7a962e7b5a90c9e579d.hot-update.js",
+    "/js/main.76e8ea5fa9f6362843f4.hot-update.js": "/js/main.76e8ea5fa9f6362843f4.hot-update.js",
+    "/js/main.c8046fb0c18ae8914591.hot-update.js": "/js/main.c8046fb0c18ae8914591.hot-update.js",
+    "/js/main.56a0bedf8508feb6dcd1.hot-update.js": "/js/main.56a0bedf8508feb6dcd1.hot-update.js",
+    "/js/main.45f799303e37fe182724.hot-update.js": "/js/main.45f799303e37fe182724.hot-update.js",
+    "/js/main.d87252dc4e16fcb8bc96.hot-update.js": "/js/main.d87252dc4e16fcb8bc96.hot-update.js",
+    "/js/main.ff82fb4dbf064fdd1911.hot-update.js": "/js/main.ff82fb4dbf064fdd1911.hot-update.js",
+    "/js/main.c6edce5f0759812ca8c7.hot-update.js": "/js/main.c6edce5f0759812ca8c7.hot-update.js",
+    "/js/main.80d40749e6b1bc770e96.hot-update.js": "/js/main.80d40749e6b1bc770e96.hot-update.js",
+    "/js/main.4cafd635a783e9702759.hot-update.js": "/js/main.4cafd635a783e9702759.hot-update.js",
+    "/js/main.159c429673622ebaa505.hot-update.js": "/js/main.159c429673622ebaa505.hot-update.js",
+    "/js/main.4d4ae0fe9c2255751bb3.hot-update.js": "/js/main.4d4ae0fe9c2255751bb3.hot-update.js",
+    "/js/main.3e60eec6d7f085ff9225.hot-update.js": "/js/main.3e60eec6d7f085ff9225.hot-update.js",
+    "/js/main.729555b6d04375fd4a8a.hot-update.js": "/js/main.729555b6d04375fd4a8a.hot-update.js",
+    "/js/main.dcbfd3cb4fec88c42272.hot-update.js": "/js/main.dcbfd3cb4fec88c42272.hot-update.js",
+    "/js/main.e1584ef8bce01d005b28.hot-update.js": "/js/main.e1584ef8bce01d005b28.hot-update.js",
+    "/js/main.76e6657c065ab87d5326.hot-update.js": "/js/main.76e6657c065ab87d5326.hot-update.js",
+    "/js/main.2a6301937a1f4a05986a.hot-update.js": "/js/main.2a6301937a1f4a05986a.hot-update.js",
+    "/js/main.5dc207685cdfd4232d6c.hot-update.js": "/js/main.5dc207685cdfd4232d6c.hot-update.js",
+    "/js/main.d87c42a5eae1eed09b9f.hot-update.js": "/js/main.d87c42a5eae1eed09b9f.hot-update.js",
+    "/js/main.5065c095791a58f08388.hot-update.js": "/js/main.5065c095791a58f08388.hot-update.js",
+    "/js/main.ae9c1527836164e6221f.hot-update.js": "/js/main.ae9c1527836164e6221f.hot-update.js",
+    "/js/main.64a5249c19f287d3d9f5.hot-update.js": "/js/main.64a5249c19f287d3d9f5.hot-update.js",
+    "/js/main.649b1010030c522abafd.hot-update.js": "/js/main.649b1010030c522abafd.hot-update.js",
+    "/js/main.c0a2c9b1daac8ce0f3d0.hot-update.js": "/js/main.c0a2c9b1daac8ce0f3d0.hot-update.js",
+    "/js/main.972d9ef69861ee475711.hot-update.js": "/js/main.972d9ef69861ee475711.hot-update.js",
+    "/js/main.c32dea75a0e744ee5f94.hot-update.js": "/js/main.c32dea75a0e744ee5f94.hot-update.js",
+    "/js/main.27ed4923387fde8852c0.hot-update.js": "/js/main.27ed4923387fde8852c0.hot-update.js",
+    "/js/main.b781ce03cd18bb1d9d5e.hot-update.js": "/js/main.b781ce03cd18bb1d9d5e.hot-update.js",
+    "/js/main.28a9f4094f796095da8b.hot-update.js": "/js/main.28a9f4094f796095da8b.hot-update.js",
+    "/js/main.c68844e921f5789877d2.hot-update.js": "/js/main.c68844e921f5789877d2.hot-update.js",
+    "/js/main.f44d6bffeb4bae9b7fcb.hot-update.js": "/js/main.f44d6bffeb4bae9b7fcb.hot-update.js",
+    "/js/main.06a4ffee2720e4f15696.hot-update.js": "/js/main.06a4ffee2720e4f15696.hot-update.js",
+    "/js/main.d9eb5e7ec061ebbfe5c4.hot-update.js": "/js/main.d9eb5e7ec061ebbfe5c4.hot-update.js",
+    "/js/main.9138c4a10256e728b68b.hot-update.js": "/js/main.9138c4a10256e728b68b.hot-update.js",
+    "/js/main.7b061ee41f753b148fbd.hot-update.js": "/js/main.7b061ee41f753b148fbd.hot-update.js",
+    "/js/main.38d6a637176f773c8985.hot-update.js": "/js/main.38d6a637176f773c8985.hot-update.js",
+    "/js/main.70944d4f89514e3effee.hot-update.js": "/js/main.70944d4f89514e3effee.hot-update.js",
+    "/js/main.40c67fc38208df539d4c.hot-update.js": "/js/main.40c67fc38208df539d4c.hot-update.js",
+    "/js/main.6f7ed9c50316e7523474.hot-update.js": "/js/main.6f7ed9c50316e7523474.hot-update.js",
+    "/js/main.545a2398e13034f72d5d.hot-update.js": "/js/main.545a2398e13034f72d5d.hot-update.js",
+    "/js/main.efdaad340c2eaf7fefa8.hot-update.js": "/js/main.efdaad340c2eaf7fefa8.hot-update.js",
+    "/js/main.4405e058ab82bd702872.hot-update.js": "/js/main.4405e058ab82bd702872.hot-update.js",
+    "/js/main.f95ffc2b0acc559669a1.hot-update.js": "/js/main.f95ffc2b0acc559669a1.hot-update.js",
+    "/js/main.b9e8c22f30099babdfcf.hot-update.js": "/js/main.b9e8c22f30099babdfcf.hot-update.js",
+    "/js/main.28c69286fc5bbd88176b.hot-update.js": "/js/main.28c69286fc5bbd88176b.hot-update.js",
+    "/js/main.5558aa165c02e9c36faa.hot-update.js": "/js/main.5558aa165c02e9c36faa.hot-update.js",
+    "/js/main.4681acdd50e76b32b9df.hot-update.js": "/js/main.4681acdd50e76b32b9df.hot-update.js",
+    "/js/main.562dc5f8d4b3a6326e2d.hot-update.js": "/js/main.562dc5f8d4b3a6326e2d.hot-update.js",
+    "/js/main.066e6206fb05b11e1f53.hot-update.js": "/js/main.066e6206fb05b11e1f53.hot-update.js",
+    "/js/main.74bc2e901432b3328d55.hot-update.js": "/js/main.74bc2e901432b3328d55.hot-update.js",
+    "/js/main.6e57009fbf2f7ace0a7d.hot-update.js": "/js/main.6e57009fbf2f7ace0a7d.hot-update.js",
+    "/js/main.f373c159b86b501322a6.hot-update.js": "/js/main.f373c159b86b501322a6.hot-update.js",
+    "/js/main.ecc10091727a02da6a9c.hot-update.js": "/js/main.ecc10091727a02da6a9c.hot-update.js",
+    "/js/main.adc54d65eed9e5c61556.hot-update.js": "/js/main.adc54d65eed9e5c61556.hot-update.js",
+    "/js/main.c01bb771108f9c646020.hot-update.js": "/js/main.c01bb771108f9c646020.hot-update.js",
+    "/js/main.6593cd8c148a84646c33.hot-update.js": "/js/main.6593cd8c148a84646c33.hot-update.js",
+    "/js/main.33234ee70a9719fb2579.hot-update.js": "/js/main.33234ee70a9719fb2579.hot-update.js",
+    "/js/main.ed594c8318b95e885daf.hot-update.js": "/js/main.ed594c8318b95e885daf.hot-update.js",
+    "/js/main.dcac8a3e2cf929ff4a94.hot-update.js": "/js/main.dcac8a3e2cf929ff4a94.hot-update.js",
+    "/js/main.e0dd196c2d6dbc12b1cc.hot-update.js": "/js/main.e0dd196c2d6dbc12b1cc.hot-update.js",
+    "/js/main.b4889018e0728536d393.hot-update.js": "/js/main.b4889018e0728536d393.hot-update.js",
+    "/js/main.d06f2e10dcca2d1fd48b.hot-update.js": "/js/main.d06f2e10dcca2d1fd48b.hot-update.js",
+    "/js/main.8acb4fb977f37099e6a9.hot-update.js": "/js/main.8acb4fb977f37099e6a9.hot-update.js",
+    "/js/main.733284992c576b1d4857.hot-update.js": "/js/main.733284992c576b1d4857.hot-update.js",
+    "/js/main.0953370e9bc3130d11ba.hot-update.js": "/js/main.0953370e9bc3130d11ba.hot-update.js",
+    "/js/main.4ec217ab92f02f6b3808.hot-update.js": "/js/main.4ec217ab92f02f6b3808.hot-update.js",
+    "/js/main.2ba1fae1f9083614ad8c.hot-update.js": "/js/main.2ba1fae1f9083614ad8c.hot-update.js",
+    "/js/main.2ffb560768c76cbceb47.hot-update.js": "/js/main.2ffb560768c76cbceb47.hot-update.js",
+    "/js/main.ae152ee74174b7c61919.hot-update.js": "/js/main.ae152ee74174b7c61919.hot-update.js",
+    "/js/main.e807166c583485b287f4.hot-update.js": "/js/main.e807166c583485b287f4.hot-update.js",
+    "/js/main.f5d0806be3ea5a7fb07b.hot-update.js": "/js/main.f5d0806be3ea5a7fb07b.hot-update.js",
+    "/js/main.27671330e1991c634a33.hot-update.js": "/js/main.27671330e1991c634a33.hot-update.js",
+    "/js/main.641b4556506c6b97286d.hot-update.js": "/js/main.641b4556506c6b97286d.hot-update.js",
+    "/js/main.0962b36d9c473537d2d4.hot-update.js": "/js/main.0962b36d9c473537d2d4.hot-update.js",
+    "/js/main.16bcaf0e1165ef3fc23d.hot-update.js": "/js/main.16bcaf0e1165ef3fc23d.hot-update.js",
+    "/js/main.f48ba321f0d840249a4a.hot-update.js": "/js/main.f48ba321f0d840249a4a.hot-update.js",
+    "/js/main.7b57598614a7f8aa8d97.hot-update.js": "/js/main.7b57598614a7f8aa8d97.hot-update.js",
+    "/js/main.9e93e203f69daceb8e4d.hot-update.js": "/js/main.9e93e203f69daceb8e4d.hot-update.js",
+    "/js/main.8b5a75a61d01d67371d0.hot-update.js": "/js/main.8b5a75a61d01d67371d0.hot-update.js",
+    "/js/main.61561f638b169a63c4c3.hot-update.js": "/js/main.61561f638b169a63c4c3.hot-update.js",
+    "/js/main.f2ed949ef8596b9b9eae.hot-update.js": "/js/main.f2ed949ef8596b9b9eae.hot-update.js",
+    "/js/main.2aaaeac0077d05ee844c.hot-update.js": "/js/main.2aaaeac0077d05ee844c.hot-update.js",
+    "/js/main.6ecca9cb2b4220a353d0.hot-update.js": "/js/main.6ecca9cb2b4220a353d0.hot-update.js",
+    "/js/main.ccc950ff1c199f694651.hot-update.js": "/js/main.ccc950ff1c199f694651.hot-update.js",
+    "/js/main.1cfc1f5ab8663c7bb239.hot-update.js": "/js/main.1cfc1f5ab8663c7bb239.hot-update.js",
+    "/js/main.16c9de12186cd01066fe.hot-update.js": "/js/main.16c9de12186cd01066fe.hot-update.js",
+    "/js/main.d823beda1b1570be851d.hot-update.js": "/js/main.d823beda1b1570be851d.hot-update.js",
+    "/js/main.eeb0ffd23c5df9eb221e.hot-update.js": "/js/main.eeb0ffd23c5df9eb221e.hot-update.js",
+    "/js/main.5e7e600792bb71b7db68.hot-update.js": "/js/main.5e7e600792bb71b7db68.hot-update.js",
+    "/js/main.e1d4c929ab4f8b777d47.hot-update.js": "/js/main.e1d4c929ab4f8b777d47.hot-update.js",
+    "/js/main.45f7944bb3af35922c64.hot-update.js": "/js/main.45f7944bb3af35922c64.hot-update.js",
+    "/js/main.89989cef2a8d1eb393f1.hot-update.js": "/js/main.89989cef2a8d1eb393f1.hot-update.js",
+    "/js/main.4971dfeda8fda570d2fa.hot-update.js": "/js/main.4971dfeda8fda570d2fa.hot-update.js",
+    "/js/main.7e430f3a435737227103.hot-update.js": "/js/main.7e430f3a435737227103.hot-update.js",
+    "/js/main.8d06bacc4373bd3cca5f.hot-update.js": "/js/main.8d06bacc4373bd3cca5f.hot-update.js",
+    "/js/main.193bbf6cb7a0cbaf3705.hot-update.js": "/js/main.193bbf6cb7a0cbaf3705.hot-update.js",
+    "/js/main.fbab26416a02c186c906.hot-update.js": "/js/main.fbab26416a02c186c906.hot-update.js",
+    "/js/main.000b68c1b5279e3d418b.hot-update.js": "/js/main.000b68c1b5279e3d418b.hot-update.js",
+    "/js/main.cc3e70b1fa1b8bfc7f21.hot-update.js": "/js/main.cc3e70b1fa1b8bfc7f21.hot-update.js",
+    "/js/main.5e36ed4ac236566fc1ef.hot-update.js": "/js/main.5e36ed4ac236566fc1ef.hot-update.js",
+    "/js/main.874c9b2920b24f744f37.hot-update.js": "/js/main.874c9b2920b24f744f37.hot-update.js",
+    "/js/main.5532d50ebe0577822aa0.hot-update.js": "/js/main.5532d50ebe0577822aa0.hot-update.js",
+    "/js/main.890ae7e6f9143a263bcd.hot-update.js": "/js/main.890ae7e6f9143a263bcd.hot-update.js",
+    "/js/main.52a6f58edde8fcc06a56.hot-update.js": "/js/main.52a6f58edde8fcc06a56.hot-update.js",
+    "/js/main.a9710a976ccdf0ef75ec.hot-update.js": "/js/main.a9710a976ccdf0ef75ec.hot-update.js",
+    "/js/main.7c116a2375fb6011c0df.hot-update.js": "/js/main.7c116a2375fb6011c0df.hot-update.js",
+    "/js/main.8bf61630c11938aa868a.hot-update.js": "/js/main.8bf61630c11938aa868a.hot-update.js",
+    "/js/main.6a65ae1a508c784cef20.hot-update.js": "/js/main.6a65ae1a508c784cef20.hot-update.js",
+    "/js/main.780e4703e1c4eef0224a.hot-update.js": "/js/main.780e4703e1c4eef0224a.hot-update.js",
+    "/js/main.915aac92a42985ed75d9.hot-update.js": "/js/main.915aac92a42985ed75d9.hot-update.js",
+    "/js/main.0ed70fed65b100346771.hot-update.js": "/js/main.0ed70fed65b100346771.hot-update.js",
+    "/js/main.b5823ed93ed9ab9584a2.hot-update.js": "/js/main.b5823ed93ed9ab9584a2.hot-update.js",
+    "/js/main.059e7929ca5a3aaf71aa.hot-update.js": "/js/main.059e7929ca5a3aaf71aa.hot-update.js",
+    "/js/main.64f79855bd9b00f7bcfd.hot-update.js": "/js/main.64f79855bd9b00f7bcfd.hot-update.js",
+    "/js/main.fb1320b8883c557e5e92.hot-update.js": "/js/main.fb1320b8883c557e5e92.hot-update.js",
+    "/js/main.e55d30d37707a3fa23f2.hot-update.js": "/js/main.e55d30d37707a3fa23f2.hot-update.js",
+    "/js/main.f9ffa503d13670e554c2.hot-update.js": "/js/main.f9ffa503d13670e554c2.hot-update.js",
+    "/js/main.2b98e2a5ed1bfa7b6e5e.hot-update.js": "/js/main.2b98e2a5ed1bfa7b6e5e.hot-update.js",
+    "/js/main.3e07bec6d4786727259e.hot-update.js": "/js/main.3e07bec6d4786727259e.hot-update.js",
+    "/js/main.a06a96f7eb0659afae56.hot-update.js": "/js/main.a06a96f7eb0659afae56.hot-update.js",
+    "/js/main.8d6337331ed349f2c8ef.hot-update.js": "/js/main.8d6337331ed349f2c8ef.hot-update.js",
+    "/js/main.e8d22bd65491d1fbc68a.hot-update.js": "/js/main.e8d22bd65491d1fbc68a.hot-update.js",
+    "/js/main.86a0433aa86e090d18ea.hot-update.js": "/js/main.86a0433aa86e090d18ea.hot-update.js",
+    "/js/main.5c8a7a29efa889c4e53b.hot-update.js": "/js/main.5c8a7a29efa889c4e53b.hot-update.js",
+    "/js/main.54efaf1fc562b7272951.hot-update.js": "/js/main.54efaf1fc562b7272951.hot-update.js",
+    "/js/main.4ff7195cb661704a1b81.hot-update.js": "/js/main.4ff7195cb661704a1b81.hot-update.js",
+    "/js/main.f71c27e89fb68d825c05.hot-update.js": "/js/main.f71c27e89fb68d825c05.hot-update.js",
+    "/js/main.194897f06249fb3f9962.hot-update.js": "/js/main.194897f06249fb3f9962.hot-update.js",
+    "/js/main.2c809a243eb4077162c7.hot-update.js": "/js/main.2c809a243eb4077162c7.hot-update.js",
+    "/js/main.1713b0f495c5d9d53546.hot-update.js": "/js/main.1713b0f495c5d9d53546.hot-update.js",
+    "/js/main.86ad2ff758d49f076ab1.hot-update.js": "/js/main.86ad2ff758d49f076ab1.hot-update.js",
+    "/js/main.419fc5ba2f8ecd16d39b.hot-update.js": "/js/main.419fc5ba2f8ecd16d39b.hot-update.js",
+    "/js/main.b538a683b679ff610516.hot-update.js": "/js/main.b538a683b679ff610516.hot-update.js",
+    "/js/main.0180cddd1715177635a7.hot-update.js": "/js/main.0180cddd1715177635a7.hot-update.js",
+    "/js/main.e926ded105d4c8b8efa0.hot-update.js": "/js/main.e926ded105d4c8b8efa0.hot-update.js",
+    "/js/main.3a536043ccdac53259d7.hot-update.js": "/js/main.3a536043ccdac53259d7.hot-update.js",
+    "/js/main.1e594e2adeeb7d5aa159.hot-update.js": "/js/main.1e594e2adeeb7d5aa159.hot-update.js",
+    "/js/main.f169e12ff8c4c10c509e.hot-update.js": "/js/main.f169e12ff8c4c10c509e.hot-update.js",
+    "/js/main.14147eeb76496b2cf4b4.hot-update.js": "/js/main.14147eeb76496b2cf4b4.hot-update.js",
+    "/js/main.3012dd5ecb02053093a5.hot-update.js": "/js/main.3012dd5ecb02053093a5.hot-update.js",
+    "/js/main.c14ef7924e4d0633c57b.hot-update.js": "/js/main.c14ef7924e4d0633c57b.hot-update.js",
+    "/js/main.c4927541644c755c14a4.hot-update.js": "/js/main.c4927541644c755c14a4.hot-update.js",
+    "/js/main.f00bcadde0f4c0441e5f.hot-update.js": "/js/main.f00bcadde0f4c0441e5f.hot-update.js",
+    "/js/main.a18e5a41067654213bcc.hot-update.js": "/js/main.a18e5a41067654213bcc.hot-update.js",
+    "/js/main.4b71496f1726c4006220.hot-update.js": "/js/main.4b71496f1726c4006220.hot-update.js",
+    "/js/main.79cfe2ae4a91cb940443.hot-update.js": "/js/main.79cfe2ae4a91cb940443.hot-update.js",
+    "/js/main.b38ec9ea3080c0b28f7b.hot-update.js": "/js/main.b38ec9ea3080c0b28f7b.hot-update.js",
+    "/js/main.522b7bd36270d98ca048.hot-update.js": "/js/main.522b7bd36270d98ca048.hot-update.js",
+    "/js/main.228cb36baa0c7b8e63f2.hot-update.js": "/js/main.228cb36baa0c7b8e63f2.hot-update.js",
+    "/js/main.1f8e416264c7b9d2ec41.hot-update.js": "/js/main.1f8e416264c7b9d2ec41.hot-update.js",
+    "/js/main.2226db028adde092f1d8.hot-update.js": "/js/main.2226db028adde092f1d8.hot-update.js",
+    "/js/main.27dfc30ba2c13d0b0b5c.hot-update.js": "/js/main.27dfc30ba2c13d0b0b5c.hot-update.js",
+    "/js/main.7e85d952d00d3346022a.hot-update.js": "/js/main.7e85d952d00d3346022a.hot-update.js",
+    "/js/main.e4a8de968ec92614dd63.hot-update.js": "/js/main.e4a8de968ec92614dd63.hot-update.js",
+    "/js/main.cb34728e0343ee07f04a.hot-update.js": "/js/main.cb34728e0343ee07f04a.hot-update.js",
+    "/js/main.1ac34f41e25905226a04.hot-update.js": "/js/main.1ac34f41e25905226a04.hot-update.js",
+    "/js/main.0cd80fb1e2a926ba3037.hot-update.js": "/js/main.0cd80fb1e2a926ba3037.hot-update.js"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 7ed2f1d2..93839cff 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -1,25 +1,120 @@
 <template>
-    <div id="app">
-        <VueFileManager style="height: 100%; width: 100%"/>
+    <div id="vue-file-manager" :class="appSize">
+        <div id="popups">
+
+            <!--System alerts-->
+            <Alert />
+
+            <!--Popup-->
+            <PopupMoveItem />
+
+            <!--Mobile Menu-->
+            <MobileOptionList />
+
+            <!--Background vignette-->
+            <Vignette />
+        </div>
+
+        <div id="application-wrapper" v-if="isLogged">
+
+            <!--Navigation Sidebar-->
+            <Sidebar />
+
+            <!--File page-->
+            <router-view />
+        </div>
+
+        <router-view v-if="! isLogged" />
     </div>
 </template>
 
 <script>
-    import VueFileManager from './components/VueFileManager.vue'
+    import MobileOptionList from '@/components/VueFileManagerComponents/FilesView/MobileOptionList'
+    import PopupMoveItem from '@/components/VueFileManagerComponents/Others/PopupMoveItem'
+    import Vignette from '@/components/VueFileManagerComponents/Others/Vignette'
+    import Alert from '@/components/VueFileManagerComponents/FilesView/Alert'
+    import Sidebar from '@/components/VueFileManagerComponents/Sidebar/Sidebar'
+    import {ResizeSensor} from 'css-element-queries'
+    import {mapGetters} from 'vuex'
 
     export default {
         name: 'app',
         components: {
-            VueFileManager
+            MobileOptionList,
+            PopupMoveItem,
+            Vignette,
+            Sidebar,
+            Alert,
         },
+        computed: {
+            ...mapGetters([
+                'appSize', 'isLogged', 'isGuest'
+            ]),
+        },
+        methods: {
+            handleAppResize() {
+                let appView = document.getElementById('vue-file-manager')
+                    .offsetWidth
+
+                if (appView <= 690)
+                    this.$store.commit('SET_APP_WIDTH', 'small')
+                if (appView > 690 && appView < 960)
+                    this.$store.commit('SET_APP_WIDTH', 'medium')
+                if (appView > 960)
+                    this.$store.commit('SET_APP_WIDTH', 'large')
+            },
+        },
+        beforeMount() {
+            // Store config to vuex
+            this.$store.commit('SET_AUTHORIZED', this.$root.$data.config.hasAuthCookie)
+            this.$store.commit('SET_CONFIG', this.$root.$data.config)
+        },
+        mounted() {
+
+            // Handle VueFileManager width
+            var VueFileManager = document.getElementById('vue-file-manager');
+            new ResizeSensor(VueFileManager, this.handleAppResize);
+        }
     }
 </script>
 
 <style lang="scss">
+    @import "@assets/app.scss";
 
-    #app {
-        height: 100%;
+    * {
+        outline: 0;
+        margin: 0;
+        padding: 0;
+        font-family: 'Nunito', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        box-sizing: border-box;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        font-size: 16px;
+    }
+
+    // Dark mode support
+    @media (prefers-color-scheme: dark) {
+
+        body, html {
+            background: $dark_mode_background;
+            color: $dark_mode_text_primary;
+
+            img {
+                opacity: .8;
+            }
+        }
+    }
+
+    #auth {
         width: 100%;
+        height: 100%;
+    }
+
+    #vue-file-manager {
         position: absolute;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
     }
 </style>
diff --git a/resources/js/components/VueFileManager.vue b/resources/js/components/VueFileManager.vue
deleted file mode 100644
index d35ac7a1..00000000
--- a/resources/js/components/VueFileManager.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-    <div id="vue-file-manager" :class="appSize">
-
-        <router-view />
-        <!--Authentication pages-->
-        <!--<Auth v-if="isGuest" />-->
-
-        <!--<div v-if="isLogged" id="auth">
-
-            <div id="popups">
-
-                &lt;!&ndash;System alerts&ndash;&gt;
-                <Alert />
-
-                &lt;!&ndash;Popup&ndash;&gt;
-                <PopupMoveItem />
-
-                &lt;!&ndash;Mobile Menu&ndash;&gt;
-                <MobileOptionList />
-
-                &lt;!&ndash;Background vignette&ndash;&gt;
-                <Vignette />
-            </div>
-
-            <div id="application-wrapper">
-
-                &lt;!&ndash;Navigation Sidebar&ndash;&gt;
-                <Sidebar />
-
-                &lt;!&ndash;User settings Page&ndash;&gt;
-                <UserSettings v-if="isCurrentView('user-settings')"/>
-
-                &lt;!&ndash;File page&ndash;&gt;
-                <FilesView v-if="isCurrentView('files')"/>
-            </div>
-        </div>-->
-    </div>
-</template>
-
-<script>
-    import MobileOptionList from '@/components/VueFileManagerComponents/FilesView/MobileOptionList'
-    import PopupMoveItem from '@/components/VueFileManagerComponents/Others/PopupMoveItem'
-    import UserSettings from '@/components/VueFileManagerComponents/UserSettings'
-    import Vignette from '@/components/VueFileManagerComponents/Others/Vignette'
-    import Alert from '@/components/VueFileManagerComponents/FilesView/Alert'
-    import FilesView from '@/components/VueFileManagerComponents/FilesView'
-    import Sidebar from '@/components/VueFileManagerComponents/Sidebar'
-    import Auth from '@/components/VueFileManagerComponents/Auth'
-    import {ResizeSensor} from 'css-element-queries'
-    import {mapGetters} from 'vuex'
-    import {events} from "../bus";
-
-    export default {
-        name: 'VueFileManager',
-        components: {
-            MobileOptionList,
-            PopupMoveItem,
-            UserSettings,
-            FilesView,
-            Vignette,
-            Sidebar,
-            Alert,
-            Auth,
-        },
-        computed: {
-            ...mapGetters([
-                'isLogged', 'isGuest', 'currentView', 'appSize'
-            ]),
-        },
-        methods: {
-            isCurrentView(view) {
-                return this.currentView === view
-            },
-            handleAppResize() {
-                let appView = document.getElementById('vue-file-manager')
-                    .offsetWidth
-
-                if (appView <= 690)
-                    this.$store.commit('SET_APP_WIDTH', 'small')
-                if (appView > 690 && appView < 960)
-                    this.$store.commit('SET_APP_WIDTH', 'medium')
-                if (appView > 960)
-                    this.$store.commit('SET_APP_WIDTH', 'large')
-            },
-        },
-        beforeMount() {
-            // Store config to vuex
-            this.$store.commit('SET_AUTHORIZED', this.$root.$data.config.hasAuthCookie)
-            this.$store.commit('SET_CONFIG', this.$root.$data.config)
-        },
-        mounted() {
-
-            // Handle VueFileManager width
-            var VueFileManager = document.getElementById('vue-file-manager');
-            new ResizeSensor(VueFileManager, this.handleAppResize);
-        }
-    }
-</script>
-
-<style lang="scss">
-    @import "@assets/app.scss";
-
-    * {
-        outline: 0;
-        margin: 0;
-        padding: 0;
-        font-family: 'Nunito', sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        box-sizing: border-box;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        font-size: 16px;
-    }
-
-    // Dark mode support
-    @media (prefers-color-scheme: dark) {
-
-        body, html {
-            background: $dark_mode_background;
-            color: $dark_mode_text_primary;
-
-            img {
-                opacity: .8;
-            }
-        }
-    }
-
-    #auth {
-        width: 100%;
-        height: 100%;
-    }
-
-    #vue-file-manager {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-    }
-
-    #application-wrapper {
-        display: flex;
-        height: 100%;
-
-        #content {
-            position: relative;
-            width: 100%;
-        }
-    }
-
-</style>
diff --git a/resources/js/components/VueFileManagerComponents/Auth.vue b/resources/js/components/VueFileManagerComponents/Auth.vue
deleted file mode 100644
index 8ab3e26b..00000000
--- a/resources/js/components/VueFileManagerComponents/Auth.vue
+++ /dev/null
@@ -1,555 +0,0 @@
-<template>
-    <AuthContentWrapper ref="auth">
-
-        <!--Log In by Email-->
-        <AuthContent name="log-in" :visible="false">
-            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>{{ $t('page_login.title') }}</h1>
-            <h2>{{ $t('page_login.subtitle') }}</h2>
-
-            <ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form"
-                                class="form inline-form">
-                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
-                                    v-slot="{ errors }">
-                    <input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
-                           :class="{'is-error': errors[0]}"/>
-                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                </ValidationProvider>
-
-                <AuthButton icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading" :disabled="isLoading"/>
-            </ValidationObserver>
-
-            <span v-if="config.userRegistration" class="additional-link">{{ $t('page_login.registration_text') }} <b
-                    @click="goToAuthPage('sign-up')">{{ $t('page_login.registration_button') }}</b></span>
-        </AuthContent>
-
-        <!--Log in By Password-->
-        <AuthContent name="sign-in" :visible="false">
-
-            <div class="user" v-if="checkedAccount">
-                <img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
-                <h1>{{ $t('page_sign_in.title', {name: checkedAccount.name}) }}</h1>
-                <h2>{{ $t('page_sign_in.subtitle') }}</h2>
-            </div>
-
-            <ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form"
-                                class="form inline-form">
-                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="User Password" rules="required"
-                                    v-slot="{ errors }">
-                    <input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')" type="password"
-                           :class="{'is-error': errors[0]}"/>
-                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                </ValidationProvider>
-
-                <AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading" :disabled="isLoading"/>
-            </ValidationObserver>
-
-            <span class="additional-link">{{ $t('page_sign_in.password_reset_text') }} <b @click="goToAuthPage('forgotten-password')">{{ $t('page_sign_in.password_reset_button') }}</b></span>
-        </AuthContent>
-
-        <!--Forgotten your password?-->
-        <AuthContent name="forgotten-password" :visible="false">
-            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>{{ $t('page_forgotten_password.title') }}</h1>
-            <h2>{{ $t('page_forgotten_password.subtitle') }}</h2>
-
-            <ValidationObserver @submit.prevent="forgottenPassword" ref="forgotten_password" v-slot="{ invalid }"
-                                tag="form" class="form inline-form">
-                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
-                                    v-slot="{ errors }">
-                    <input v-model="recoverEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
-                           :class="{'is-error': errors[0]}"/>
-                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                </ValidationProvider>
-
-                <AuthButton icon="chevron-right" :text="$t('page_forgotten_password.button_get_link')" :loading="isLoading" :disabled="isLoading"/>
-            </ValidationObserver>
-
-            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
-        </AuthContent>
-
-        <!--Create new password-->
-        <AuthContent name="create-new-password" :visible="false">
-            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>{{ $t('page_create_password.title') }}</h1>
-            <h2>{{ $t('page_create_password.subtitle') }}</h2>
-
-            <ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }"
-                                tag="form" class="form block-form create-new-password">
-
-                <div class="block-wrapper">
-                    <label>{{ $t('page_create_password.label_email') }}</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
-                                        v-slot="{ errors }">
-                        <input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" type="email"
-                               :class="{'is-error': errors[0]}"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div class="block-wrapper">
-                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
-                                        rules="required" v-slot="{ errors }">
-                        <input v-model="recoverPassword.newPassword" :placeholder="$t('page_create_password.label_new_pass')" type="password"
-                               :class="{'is-error': errors[0]}"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div class="block-wrapper">
-                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Password"
-                                        rules="required" v-slot="{ errors }">
-                        <input v-model="recoverPassword.newPasswordConfirm" :placeholder="$t('page_create_password.label_confirm_pass')"
-                               type="password" :class="{'is-error': errors[0]}"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div>
-                    <AuthButton icon="chevron-right" :text="$t('page_create_password.button_update')" :loading="isLoading" :disabled="isLoading"/>
-                </div>
-            </ValidationObserver>
-
-            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
-        </AuthContent>
-
-        <!--Registration-->
-        <AuthContent name="sign-up" :visible="false">
-            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>{{ $t('page_registration.title') }}</h1>
-            <h2>{{ $t('page_registration.subtitle') }}</h2>
-
-            <ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
-                                class="form block-form">
-
-                <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_email') }}</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
-                                        v-slot="{ errors }">
-                        <input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
-                               :class="{'is-error': errors[0]}"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_name') }}</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
-                                        v-slot="{ errors }">
-                        <input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text"
-                               :class="{'is-error': errors[0]}"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_pass') }}</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
-                                        rules="required" v-slot="{ errors }">
-                        <input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password"
-                               :class="{'is-error': errors[0]}"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_confirm_pass') }}</label>
-                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
-                                        rules="required" v-slot="{ errors }">
-                        <input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
-                               type="password" :class="{'is-error': errors[0]}"/>
-                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
-                    </ValidationProvider>
-                </div>
-
-                <div>
-                    <AuthButton icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
-                </div>
-            </ValidationObserver>
-
-            <span class="additional-link">{{ $t('page_registration.have_an_account') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
-        </AuthContent>
-
-        <!--Password reset link sended-->
-        <AuthContent name="password-reset-link-sended" :visible="false">
-            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>{{ $t('page_forgotten_password.pass_sennded_title') }}</h1>
-            <h2>{{ $t('page_forgotten_password.pass_sennded_subtitle') }}</h2>
-
-            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
-        </AuthContent>
-
-        <!--Password reset successfully-->
-        <AuthContent name="password-reset-successfully" :visible="false">
-            <img class="logo" :src="config.app_logo" :alt="config.app_name">
-            <h1>{{ $t('page_forgotten_password.pass_reseted_title') }}</h1>
-            <h2>{{ $t('page_forgotten_password.pass_reseted_subtitle') }}</h2>
-
-            <AuthButton icon="chevron-right" @click.native="goToAuthPage('log-in')" :text="$t('page_forgotten_password.pass_reseted_signin')"/>
-        </AuthContent>
-    </AuthContentWrapper>
-</template>
-
-<script>
-    import AuthContentWrapper from '@/components/VueFileManagerComponents/Auth/AuthContentWrapper'
-    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import AuthContent from '@/components/VueFileManagerComponents/Auth/AuthContent'
-    import AuthButton from '@/components/VueFileManagerComponents/Auth/AuthButton'
-    import {required} from 'vee-validate/dist/rules'
-    import {mapGetters} from 'vuex'
-    import axios from 'axios'
-
-    export default {
-        name: 'Auth',
-        components: {
-            AuthContentWrapper,
-            ValidationProvider,
-            ValidationObserver,
-            AuthContent,
-            AuthButton,
-            required,
-        },
-        computed: {
-            ...mapGetters(['config']),
-        },
-        watch: {
-            loginEmail(val) {
-                this.recoverEmail = val
-            }
-        },
-        data() {
-            return {
-                isLoading: false,
-                checkedAccount: undefined,
-                loginPassword: '',
-                loginEmail: '',
-                recoverEmail: '',
-                recoverPassword: {
-                    token: undefined,
-                    email: '',
-                    newPassword: '',
-                    newPasswordConfirm: '',
-                },
-                register: {
-                    name: '',
-                    email: '',
-                    password: '',
-                    password_confirmation: '',
-                },
-            }
-        },
-        methods: {
-            goToAuthPage(slug) {
-
-                this.$refs.auth.$children.forEach(page => {
-
-                    // Hide current step
-                    page.isVisible = false
-
-                    if (page.$props.name === slug) {
-
-                        // Go to next step
-                        page.isVisible = true
-                    }
-                })
-            },
-            async logIn() {
-
-                // Validate fields
-                const isValid = await this.$refs.log_in.validate();
-
-                if (!isValid) return;
-
-                // Start loading
-                this.isLoading = true
-
-                // Send request to get verify account
-                axios
-                    .post(this.$store.getters.api + '/user/check', {
-                        email: this.loginEmail,
-                    })
-                    .then(response => {
-
-                        // End loading
-                        this.isLoading = false
-
-                        this.checkedAccount = response.data
-                        this.goToAuthPage('sign-in')
-                    })
-                    .catch(error => {
-
-                        if (error.response.status == 404) {
-
-                            this.$refs.log_in.setErrors({
-                                'E-Mail': [error.response.data.message]
-                            });
-                        }
-
-                        // End loading
-                        this.isLoading = false
-                    })
-            },
-            async singIn() {
-
-                // Validate fields
-                const isValid = await this.$refs.sign_in.validate();
-
-                if (!isValid) return;
-
-                // Start loading
-                this.isLoading = true
-
-                // Send request to get user token
-                axios
-                    .post(this.$store.getters.api + '/user/login', {
-                        email: this.loginEmail,
-                        password: this.loginPassword,
-                    })
-                    .then(() => {
-
-                        // End loading
-                        this.isLoading = false
-
-                        // Set login state
-                        this.$store.commit('SET_AUTHORIZED', true)
-                    })
-                    .catch(error => {
-
-                        if (error.response.status == 400) {
-
-                            this.$refs.sign_in.setErrors({
-                                'User Password': [this.$t('validation_errors.incorrect_password')]
-                            });
-                        }
-
-                        // End loading
-                        this.isLoading = false
-                    })
-            },
-            async forgottenPassword() {
-
-                // Validate fields
-                const isValid = await this.$refs.forgotten_password.validate();
-
-                if (!isValid) return;
-
-                // Start loading
-                this.isLoading = true
-
-                // Send request to get user reset link
-                axios
-                    .post(this.$store.getters.api + '/password/email', {
-                        email: this.recoverEmail
-                    })
-                    .then(() => {
-
-                        // End loading
-                        this.isLoading = false
-
-                        this.goToAuthPage('password-reset-link-sended')
-                    }).catch(error => {
-
-                        if (error.response.status == 422) {
-                            this.$refs.forgotten_password.setErrors({
-                                'E-Mail': error.response.data.message
-                            });
-                        }
-
-                        // End loading
-                        this.isLoading = false
-                    })
-            },
-            async createNewPassword() {
-
-                // Validate fields
-                const isValid = await this.$refs.create_new_password.validate();
-
-                if (!isValid) return;
-
-                // Start loading
-                this.isLoading = true
-
-                // Send request to get user reset link
-                axios
-                    .post(this.$store.getters.api + '/password/reset', {
-                        email: this.recoverPassword.email,
-                        token: this.recoverPassword.token,
-                        password: this.recoverPassword.newPassword,
-                        password_confirmation: this.recoverPassword.newPasswordConfirm,
-                    })
-                    .then(() => {
-
-                        // End loading
-                        this.isLoading = false
-
-                        this.goToAuthPage('password-reset-successfully')
-                    })
-                    .catch(error => {
-
-                        if (error.response.status == 422) {
-
-                            if (error.response.data.error) {
-
-                                this.$refs.create_new_password.setErrors({
-                                    'E-Mail': error.response.data.error
-                                });
-                            }
-
-                            if (error.response.data.errors['password']) {
-
-                                this.$refs.create_new_password.setErrors({
-                                    'New Password': error.response.data.errors['password']
-                                });
-                            }
-                        }
-
-                        // End loading
-                        this.isLoading = false
-                    })
-            },
-            async signUp() {
-
-                // Validate fields
-                const isValid = await this.$refs.sign_up.validate();
-
-                if (!isValid) return;
-
-                // Start loading
-                this.isLoading = true
-
-                // Send request to get user token
-                axios
-                    .post(this.$store.getters.api + '/user/register', this.register)
-                    .then(() => {
-
-                        // End loading
-                        this.isLoading = false
-
-                        // Set login state
-                        this.$store.commit('SET_AUTHORIZED', true)
-                    })
-                    .catch(error => {
-
-                        if (error.response.status == 422) {
-
-                            if (error.response.data.errors['email']) {
-
-                                this.$refs.sign_up.setErrors({
-                                    'E-Mail': error.response.data.errors['email']
-                                });
-                            }
-
-                            if (error.response.data.errors['password']) {
-
-                                this.$refs.sign_up.setErrors({
-                                    'Your New Password': error.response.data.errors['password']
-                                });
-                            }
-                        }
-
-                        // End loading
-                        this.isLoading = false
-                    })
-            }
-        },
-        mounted() {
-
-            // Check if user try to get reset page
-            let pathname = location.pathname.split('/')[1]
-            let token = location.search.split('token=')[1]
-
-            if (pathname === this.$t('routes.create_new_password')) {
-                this.recoverPassword.token = token
-                this.goToAuthPage('create-new-password')
-            } else {
-                this.goToAuthPage('log-in')
-            }
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-    @import "@assets/app.scss";
-    @import '@assets/vue-file-manager/_forms';
-
-    .auth-form {
-        text-align: center;
-        max-width: 600px;
-        padding: 25px 20px;
-        display: table-cell;
-        vertical-align: middle;
-
-        .user-avatar {
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-            margin-bottom: 20px;
-            border-radius: 8px;
-            box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
-        }
-
-        .logo {
-            width: 120px;
-            margin-bottom: 20px;
-        }
-
-        h1 {
-            @include font-size(34);
-            font-weight: 800;
-            line-height: 1.2;
-            margin-bottom: 2px;
-            color: $text;
-        }
-
-        h2 {
-            @include font-size(23);
-            font-weight: 500;
-            margin-bottom: 50px;
-            color: $text;
-        }
-
-        .block-form {
-            margin-left: auto;
-            margin-right: auto;
-
-            .block-wrapper label {
-                text-align: right;
-            }
-        }
-    }
-
-    @media only screen and (min-width: 690px) and (max-width: 960px) {
-
-        .auth-form {
-            padding-left: 20%;
-            padding-right: 20%;
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-
-        .auth-form {
-            width: 100%;
-
-            h1 {
-                @include font-size(30);
-            }
-
-            h2 {
-                @include font-size(21);
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .auth-form {
-
-            h1, h2, .additional-link {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
-
-</style>
diff --git a/resources/js/components/VueFileManagerComponents/Others/PageHeader.vue b/resources/js/components/VueFileManagerComponents/Others/PageHeader.vue
index 9bfa775d..4b7a86e3 100644
--- a/resources/js/components/VueFileManagerComponents/Others/PageHeader.vue
+++ b/resources/js/components/VueFileManagerComponents/Others/PageHeader.vue
@@ -26,7 +26,10 @@
         },
         methods: {
             goHome() {
-                if (this.isSmallAppSize) events.$emit('show:sidebar')
+                if (this.isSmallAppSize) {
+                    events.$emit('show:sidebar')
+                    this.$router.push({name: 'Files'})
+                }
             }
         }
     }
diff --git a/resources/js/components/VueFileManagerComponents/Sidebar.vue b/resources/js/components/VueFileManagerComponents/Sidebar/Sidebar.vue
similarity index 98%
rename from resources/js/components/VueFileManagerComponents/Sidebar.vue
rename to resources/js/components/VueFileManagerComponents/Sidebar/Sidebar.vue
index 40f5cc3f..4f58c652 100644
--- a/resources/js/components/VueFileManagerComponents/Sidebar.vue
+++ b/resources/js/components/VueFileManagerComponents/Sidebar/Sidebar.vue
@@ -1,11 +1,12 @@
 <template>
     <transition name="sidebar">
-        <div id="sidebar" v-if="isVisibleSidebar || ! isSmallAppSize">
+        <div id="sidebar" v-if="app && (isVisibleSidebar || ! isSmallAppSize)">
 
             <!--User Headline-->
             <UserHeadline/>
 
-            <div v-if="app" class="content-scroller">
+            <!--Content-->
+            <div class="content-scroller">
 
                 <!--Locations-->
                 <div class="menu-list-wrapper">
@@ -63,6 +64,7 @@
             <!--Storage Size Info-->
             <StorageSize v-if="config.storageLimit"/>
 
+            <!--Mobile logout button-->
             <div v-if="isSmallAppSize" class="log-out-button">
                 <ButtonBase @click.native="$store.dispatch('logOut')" button-style="danger">{{ $t('context_menu.log_out') }}</ButtonBase>
             </div>
diff --git a/resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue b/resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
index 959659b5..dea3b3a7 100644
--- a/resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
+++ b/resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
@@ -12,7 +12,11 @@
         <transition name="user-menu">
             <div class="user-menu" v-if="isOpenedMenu">
                 <ul class="menu-options" id="menu-options-list" @click="closeMenu">
-                    <li class="menu-option" @click="$goToView('user-settings')">{{ $t('context_menu.profile_settings') }}</li>
+                    <li class="menu-option">
+                        <router-link :to="{name: 'Profile'}">
+                            {{ $t('context_menu.profile_settings') }}
+                        </router-link>
+                    </li>
                     <li class="menu-option" @click="$store.dispatch('logOut')">{{ $t('context_menu.log_out') }}</li>
                 </ul>
             </div>
@@ -43,7 +47,7 @@
                 // If is mobile, then go to user settings page, else, open menu
                 if ( this.isSmallAppSize ) {
 
-                    this.$goToView('user-settings')
+                    this.$router.push({name: 'Profile'})
                 } else {
 
                     this.isOpenedMenu = !this.isOpenedMenu
@@ -147,6 +151,11 @@
             width: 100%;
             color: $text;
 
+            a {
+                text-decoration: none;
+                color: $text;
+            }
+
             &:hover {
                 background: $light_background;
                 color: $theme;
diff --git a/resources/js/helpers.js b/resources/js/helpers.js
index c9e2f22c..a90978c4 100644
--- a/resources/js/helpers.js
+++ b/resources/js/helpers.js
@@ -6,12 +6,6 @@ import axios from 'axios'
 const Helpers = {
 	install(Vue) {
 
-		Vue.prototype.$goToView = function(view) {
-			events.$emit('show:content')
-
-			this.$store.commit('SET_CURRENT_VIEW', view)
-		}
-
 		Vue.prototype.$updateText = debounce(function (route, name, value) {
 
 			if (value === '') return
diff --git a/resources/js/main.js b/resources/js/main.js
index 9438c15a..c467b84b 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -4,7 +4,7 @@ import VueRouter from 'vue-router'
 import router from './router'
 import i18n from './i18n/index.js'
 import App from './App.vue'
-import store from './store/index'
+import store from './store'
 import Helpers from './helpers'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@@ -72,8 +72,8 @@ Vue.config.productionTip = false
 
 var vueFileManager = new Vue({
 	i18n,
-	router,
 	store,
+	router,
 	data: {
 		config,
 	},
diff --git a/resources/js/router.js b/resources/js/router.js
index 68870bee..6c56018d 100644
--- a/resources/js/router.js
+++ b/resources/js/router.js
@@ -1,10 +1,14 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import store from '@/store'
 
-import Index from './views/Index'
-import SignUp from './views/SignUp'
-import ForgottenPassword from './views/ForgottenPassword'
-//import ForgottenPassword from './views/ForgottenPassword'
+import Index from './views/Auth/SignIn'
+import SignUp from './views/Auth/SignUp'
+import ForgottenPassword from './views/Auth/ForgottenPassword'
+import CreateNewPassword from './views/Auth/CreateNewPassword'
+
+import Files from './views/Files'
+import Profile from './views/Profile'
 
 Vue.use(Router)
 
@@ -12,25 +16,53 @@ const router = new Router({
     mode: 'history',
     routes: [
         {
-            name: 'index',
+            name: 'SignIn',
             path: '/',
             component: Index,
+            meta: {
+                requiresAuth: false
+            },
         },
         {
             name: 'SignUp',
             path: '/sign-up',
             component: SignUp,
+            meta: {
+                requiresAuth: false
+            },
         },
         {
             name: 'ForgottenPassword',
             path: '/forgotten-password',
             component: ForgottenPassword,
+            meta: {
+                requiresAuth: false
+            },
         },
-        /*{
+        {
             name: 'CreateNewPassword',
             path: '/create-new-password',
             component: CreateNewPassword,
-        },*/
+            meta: {
+                requiresAuth: false
+            },
+        },
+        {
+            name: 'Files',
+            path: '/files',
+            component: Files,
+            meta: {
+                requiresAuth: true
+            },
+        },
+        {
+            name: 'Profile',
+            path: '/profile',
+            component: Profile,
+            meta: {
+                requiresAuth: true
+            },
+        },
     ],
     scrollBehavior(to, from, savedPosition) {
 
@@ -39,6 +71,25 @@ const router = new Router({
         } else {
             return {x: 0, y: 0}
         }
+    },
+})
+
+router.beforeEach((to, from, next) => {
+
+    if (to.matched.some(record => record.meta.requiresAuth)) {
+        // this route requires auth, check if logged in
+        // if not, redirect to login page.
+
+        if ( ! store.getters.isLogged || ! config.hasAuthCookie) {
+            next({
+                name: 'SignIn',
+                query: { redirect: to.fullPath }
+            })
+        } else {
+            next()
+        }
+    } else {
+        next() // make sure to always call next()!
     }
 })
 
diff --git a/resources/js/store/modules/app.js b/resources/js/store/modules/app.js
index 36c1c987..30bd142d 100644
--- a/resources/js/store/modules/app.js
+++ b/resources/js/store/modules/app.js
@@ -1,5 +1,4 @@
 const defaultState = {
-	currentView: 'files',
 	appSize: undefined,
 	config: undefined,
 }
@@ -10,15 +9,11 @@ const mutations = {
 	SET_CONFIG(state, config) {
 		state.config = config
 	},
-	SET_CURRENT_VIEW(state, view) {
-		state.currentView = view
-	},
 	SET_APP_WIDTH(state, scale) {
 		state.appSize = scale
 	},
 }
 const getters = {
-	currentView: state => state.currentView,
 	appSize: state => state.appSize,
 	api: state => state.config.api,
 	config: state => state.config,
diff --git a/resources/js/store/modules/filesView.js b/resources/js/store/modules/filesView.js
index 3cb93487..1856b3fa 100644
--- a/resources/js/store/modules/filesView.js
+++ b/resources/js/store/modules/filesView.js
@@ -1,6 +1,7 @@
 import axios from 'axios'
 import {events} from '@/bus'
 import i18n from '@/i18n/index.js'
+import router from '@/router'
 
 const defaultState = {
     fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || false,
@@ -22,8 +23,8 @@ const actions = {
         events.$emit('show:content')
 
         // Go to files view
-        if (context.getters.currentView !== 'files') {
-            context.commit('SET_CURRENT_VIEW', 'files')
+        if (router.currentRoute.name !== 'Files') {
+            router.push({name: 'Files'})
         }
 
         context.commit('LOADING_STATE', true)
@@ -72,8 +73,8 @@ const actions = {
         events.$emit('show:content')
 
         // Go to files view
-        if (context.getters.currentView !== 'files') {
-            context.commit('SET_CURRENT_VIEW', 'files')
+        if (router.currentRoute.name !== 'Files') {
+            router.push({name: 'Files'})
         }
 
         if (! back) context.commit('FLUSH_BROWSER_HISTORY')
diff --git a/resources/js/store/modules/userAuth.js b/resources/js/store/modules/userAuth.js
index 4cdad741..5a6c4ecf 100644
--- a/resources/js/store/modules/userAuth.js
+++ b/resources/js/store/modules/userAuth.js
@@ -1,11 +1,13 @@
 import axios from 'axios'
 import {events} from '@/bus'
 import i18n from '@/i18n/index.js'
+import router from '@/router'
 
 const defaultState = {
     authorized: undefined,
     app: undefined,
 }
+
 const actions = {
     getAppData: ({commit, dispatch, getters}) => {
 
@@ -29,7 +31,8 @@ const actions = {
 
                 // Commit Remove Access Token from vuex storage
                 commit('DESTROY_DATA')
-                commit('SET_CURRENT_VIEW', 'files')
+
+                router.push({name: 'SignIn'})
             })
     },
     addToFavourites: (context, folder) => {
@@ -85,6 +88,7 @@ const actions = {
 
     },
 }
+
 const mutations = {
     RETRIEVE_APP_DATA(state, app) {
         state.app = app
@@ -132,6 +136,7 @@ const mutations = {
         })
     }
 }
+
 const getters = {
     isLogged: state => state.authorized,
     isGuest: state => ! state.authorized,
diff --git a/resources/js/views/Auth/CreateNewPassword.vue b/resources/js/views/Auth/CreateNewPassword.vue
new file mode 100644
index 00000000..0e0980bb
--- /dev/null
+++ b/resources/js/views/Auth/CreateNewPassword.vue
@@ -0,0 +1,177 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Create new password-->
+        <AuthContent name="create-new-password" :visible="true">
+            <img class="logo" :src="config.app_logo" :alt="config.app_name">
+            <h1>{{ $t('page_create_password.title') }}</h1>
+            <h2>{{ $t('page_create_password.subtitle') }}</h2>
+
+            <ValidationObserver @submit.prevent="createNewPassword" ref="create_new_password" v-slot="{ invalid }"
+                                tag="form" class="form block-form create-new-password">
+
+                <div class="block-wrapper">
+                    <label>{{ $t('page_create_password.label_email') }}</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
+                                        v-slot="{ errors }">
+                        <input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" type="email"
+                               :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="recoverPassword.newPassword" :placeholder="$t('page_create_password.label_new_pass')" type="password"
+                               :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Password"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="recoverPassword.newPasswordConfirm" :placeholder="$t('page_create_password.label_confirm_pass')"
+                               type="password" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div>
+                    <AuthButton icon="chevron-right" :text="$t('page_create_password.button_update')" :loading="isLoading" :disabled="isLoading"/>
+                </div>
+            </ValidationObserver>
+
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }}
+                <router-link :to="{name: 'SignIn'}">
+                    {{ $t('page_forgotten_password.password_remember_button') }}
+                </router-link>
+            </span>
+        </AuthContent>
+
+        <!--Password reset successfully-->
+        <AuthContent name="password-reset-successfully" :visible="false">
+            <img class="logo" :src="config.app_logo" :alt="config.app_name">
+            <h1>{{ $t('page_forgotten_password.pass_reseted_title') }}</h1>
+            <h2>{{ $t('page_forgotten_password.pass_reseted_subtitle') }}</h2>
+
+            <router-link :to="{name: 'SignIn'}">
+                <AuthButton icon="chevron-right" :text="$t('page_forgotten_password.pass_reseted_signin')"/>
+            </router-link>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import AuthContentWrapper from '@/components/VueFileManagerComponents/Auth/AuthContentWrapper'
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContent from '@/components/VueFileManagerComponents/Auth/AuthContent'
+    import AuthButton from '@/components/VueFileManagerComponents/Auth/AuthButton'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'CreateNewPassword',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            AuthContent,
+            AuthButton,
+            required,
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        data() {
+            return {
+                isLoading: false,
+                recoverPassword: {
+                    token: undefined,
+                    email: '',
+                    newPassword: '',
+                    newPasswordConfirm: '',
+                },
+            }
+        },
+        methods: {
+            goToAuthPage(slug) {
+
+                this.$refs.auth.$children.forEach(page => {
+
+                    // Hide current step
+                    page.isVisible = false
+
+                    if (page.$props.name === slug) {
+
+                        // Go to next step
+                        page.isVisible = true
+                    }
+                })
+            },
+            async createNewPassword() {
+
+                // Validate fields
+                const isValid = await this.$refs.create_new_password.validate();
+
+                if (!isValid) return;
+
+                // Start loading
+                this.isLoading = true
+
+                // Send request to get user reset link
+                axios
+                    .post(this.$store.getters.api + '/password/reset', {
+                        email: this.recoverPassword.email,
+                        token: this.recoverPassword.token,
+                        password: this.recoverPassword.newPassword,
+                        password_confirmation: this.recoverPassword.newPasswordConfirm,
+                    })
+                    .then(() => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        this.goToAuthPage('password-reset-successfully')
+                    })
+                    .catch(error => {
+
+                        if (error.response.status == 422) {
+
+                            if (error.response.data.error) {
+
+                                this.$refs.create_new_password.setErrors({
+                                    'E-Mail': error.response.data.error
+                                });
+                            }
+
+                            if (error.response.data.errors['password']) {
+
+                                this.$refs.create_new_password.setErrors({
+                                    'New Password': error.response.data.errors['password']
+                                });
+                            }
+                        }
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            },
+        },
+        mounted() {
+
+            // Get token
+            this.recoverPassword.token = this.$route.params.token
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth';
+</style>
diff --git a/resources/js/views/ForgottenPassword.vue b/resources/js/views/Auth/ForgottenPassword.vue
similarity index 68%
rename from resources/js/views/ForgottenPassword.vue
rename to resources/js/views/Auth/ForgottenPassword.vue
index 03271f8c..39ca1a38 100644
--- a/resources/js/views/ForgottenPassword.vue
+++ b/resources/js/views/Auth/ForgottenPassword.vue
@@ -19,7 +19,11 @@
                 <AuthButton icon="chevron-right" :text="$t('page_forgotten_password.button_get_link')" :loading="isLoading" :disabled="isLoading"/>
             </ValidationObserver>
 
-            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }}
+                <router-link :to="{name: 'SignIn'}">
+                    {{ $t('page_forgotten_password.password_remember_button') }}
+                </router-link>
+            </span>
         </AuthContent>
 
         <!--Password reset link sended-->
@@ -28,7 +32,11 @@
             <h1>{{ $t('page_forgotten_password.pass_sennded_title') }}</h1>
             <h2>{{ $t('page_forgotten_password.pass_sennded_subtitle') }}</h2>
 
-            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }}
+                <router-link :to="{name: 'SignIn'}">
+                    {{ $t('page_forgotten_password.password_remember_button') }}
+                </router-link>
+            </span>
         </AuthContent>
     </AuthContentWrapper>
 </template>
@@ -43,7 +51,7 @@
     import axios from 'axios'
 
     export default {
-        name: 'Auth',
+        name: 'ForgottenPassword',
         components: {
             AuthContentWrapper,
             ValidationProvider,
@@ -88,7 +96,7 @@
 
                 // Send request to get user reset link
                 axios
-                    .post(this.$store.getters.api + '/password/email', {
+                    .post('/api/password/email', {
                         email: this.recoverEmail
                     })
                     .then(() => {
@@ -116,83 +124,5 @@
 <style scoped lang="scss">
     @import "@assets/app.scss";
     @import '@assets/vue-file-manager/_forms';
-
-    .auth-form {
-        text-align: center;
-        max-width: 600px;
-        padding: 25px 20px;
-        display: table-cell;
-        vertical-align: middle;
-
-        .user-avatar {
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-            margin-bottom: 20px;
-            border-radius: 8px;
-            box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
-        }
-
-        .logo {
-            width: 120px;
-            margin-bottom: 20px;
-        }
-
-        h1 {
-            @include font-size(34);
-            font-weight: 800;
-            line-height: 1.2;
-            margin-bottom: 2px;
-            color: $text;
-        }
-
-        h2 {
-            @include font-size(23);
-            font-weight: 500;
-            margin-bottom: 50px;
-            color: $text;
-        }
-
-        .block-form {
-            margin-left: auto;
-            margin-right: auto;
-
-            .block-wrapper label {
-                text-align: right;
-            }
-        }
-    }
-
-    @media only screen and (min-width: 690px) and (max-width: 960px) {
-
-        .auth-form {
-            padding-left: 20%;
-            padding-right: 20%;
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-
-        .auth-form {
-            width: 100%;
-
-            h1 {
-                @include font-size(30);
-            }
-
-            h2 {
-                @include font-size(21);
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .auth-form {
-
-            h1, h2, .additional-link {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
-
+    @import '@assets/vue-file-manager/_auth';
 </style>
diff --git a/resources/js/views/Index.vue b/resources/js/views/Auth/SignIn.vue
similarity index 72%
rename from resources/js/views/Index.vue
rename to resources/js/views/Auth/SignIn.vue
index 0407c306..b41b13a4 100644
--- a/resources/js/views/Index.vue
+++ b/resources/js/views/Auth/SignIn.vue
@@ -16,11 +16,15 @@
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <AuthButton icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading" :disabled="isLoading"/>
+                <AuthButton icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading"
+                            :disabled="isLoading"/>
             </ValidationObserver>
 
-            <span v-if="config.userRegistration" class="additional-link">{{ $t('page_login.registration_text') }} <b
-                    @click="goToAuthPage('sign-up')">{{ $t('page_login.registration_button') }}</b></span>
+            <span v-if="config.userRegistration" class="additional-link">{{ $t('page_login.registration_text') }}
+                <router-link :to="{name: 'SignUp'}">
+                    {{ $t('page_login.registration_button') }}
+                </router-link>
+            </span>
         </AuthContent>
 
         <!--Log in By Password-->
@@ -36,15 +40,21 @@
                                 class="form inline-form">
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="User Password" rules="required"
                                     v-slot="{ errors }">
-                    <input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')" type="password"
+                    <input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')"
+                           type="password"
                            :class="{'is-error': errors[0]}"/>
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
-                <AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading" :disabled="isLoading"/>
+                <AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading"
+                            :disabled="isLoading"/>
             </ValidationObserver>
 
-            <span class="additional-link">{{ $t('page_sign_in.password_reset_text') }} <b @click="goToAuthPage('forgotten-password')">{{ $t('page_sign_in.password_reset_button') }}</b></span>
+            <span class="additional-link">{{ $t('page_sign_in.password_reset_text') }}
+                <router-link :to="{name: 'ForgottenPassword'}">
+                    {{ $t('page_sign_in.password_reset_button') }}
+                </router-link>
+            </span>
         </AuthContent>
     </AuthContentWrapper>
 </template>
@@ -59,7 +69,7 @@
     import axios from 'axios'
 
     export default {
-        name: 'Auth',
+        name: 'SignIn',
         components: {
             AuthContentWrapper,
             ValidationProvider,
@@ -75,8 +85,8 @@
             return {
                 isLoading: false,
                 checkedAccount: undefined,
-                loginPassword: '',
-                loginEmail: '',
+                loginPassword: 'vuefilemanager',
+                loginEmail: 'howdy@hi5ve.digital',
             }
         },
         methods: {
@@ -106,7 +116,7 @@
 
                 // Send request to get verify account
                 axios
-                    .post(this.$store.getters.api + '/user/check', {
+                    .post('/api/user/check', {
                         email: this.loginEmail,
                     })
                     .then(response => {
@@ -115,6 +125,8 @@
                         this.isLoading = false
 
                         this.checkedAccount = response.data
+
+                        // Show sign in password page
                         this.goToAuthPage('sign-in')
                     })
                     .catch(error => {
@@ -142,7 +154,7 @@
 
                 // Send request to get user token
                 axios
-                    .post(this.$store.getters.api + '/user/login', {
+                    .post('/api/user/login', {
                         email: this.loginEmail,
                         password: this.loginPassword,
                     })
@@ -153,6 +165,9 @@
 
                         // Set login state
                         this.$store.commit('SET_AUTHORIZED', true)
+
+                        // Go to files page
+                        this.$router.push({name: 'Files'})
                     })
                     .catch(error => {
 
@@ -167,90 +182,12 @@
                         this.isLoading = false
                     })
             },
-        }
+        },
     }
 </script>
 
 <style scoped lang="scss">
     @import "@assets/app.scss";
     @import '@assets/vue-file-manager/_forms';
-
-    .auth-form {
-        text-align: center;
-        max-width: 600px;
-        padding: 25px 20px;
-        display: table-cell;
-        vertical-align: middle;
-
-        .user-avatar {
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-            margin-bottom: 20px;
-            border-radius: 8px;
-            box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
-        }
-
-        .logo {
-            width: 120px;
-            margin-bottom: 20px;
-        }
-
-        h1 {
-            @include font-size(34);
-            font-weight: 800;
-            line-height: 1.2;
-            margin-bottom: 2px;
-            color: $text;
-        }
-
-        h2 {
-            @include font-size(23);
-            font-weight: 500;
-            margin-bottom: 50px;
-            color: $text;
-        }
-
-        .block-form {
-            margin-left: auto;
-            margin-right: auto;
-
-            .block-wrapper label {
-                text-align: right;
-            }
-        }
-    }
-
-    @media only screen and (min-width: 690px) and (max-width: 960px) {
-
-        .auth-form {
-            padding-left: 20%;
-            padding-right: 20%;
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-
-        .auth-form {
-            width: 100%;
-
-            h1 {
-                @include font-size(30);
-            }
-
-            h2 {
-                @include font-size(21);
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .auth-form {
-
-            h1, h2, .additional-link {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
-
+    @import '@assets/vue-file-manager/_auth';
 </style>
diff --git a/resources/js/views/SignUp.vue b/resources/js/views/Auth/SignUp.vue
similarity index 76%
rename from resources/js/views/SignUp.vue
rename to resources/js/views/Auth/SignUp.vue
index 88eb96e6..ca113b3c 100644
--- a/resources/js/views/SignUp.vue
+++ b/resources/js/views/Auth/SignUp.vue
@@ -55,7 +55,11 @@
                 </div>
             </ValidationObserver>
 
-            <span class="additional-link">{{ $t('page_registration.have_an_account') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
+            <span class="additional-link">{{ $t('page_registration.have_an_account') }}
+                <router-link :to="{name: 'SignIn'}">
+                    {{ $t('page_forgotten_password.password_remember_button') }}
+                </router-link>
+            </span>
         </AuthContent>
 
     </AuthContentWrapper>
@@ -71,7 +75,7 @@
     import axios from 'axios'
 
     export default {
-        name: 'Auth',
+        name: 'SignUp',
         components: {
             AuthContentWrapper,
             ValidationProvider,
@@ -107,7 +111,7 @@
 
                 // Send request to get user token
                 axios
-                    .post(this.$store.getters.api + '/user/register', this.register)
+                    .post('/api/user/register', this.register)
                     .then(() => {
 
                         // End loading
@@ -115,6 +119,9 @@
 
                         // Set login state
                         this.$store.commit('SET_AUTHORIZED', true)
+
+                        // Go to files page
+                        this.$router.push({name: 'Files'})
                     })
                     .catch(error => {
 
@@ -146,83 +153,5 @@
 <style scoped lang="scss">
     @import "@assets/app.scss";
     @import '@assets/vue-file-manager/_forms';
-
-    .auth-form {
-        text-align: center;
-        max-width: 600px;
-        padding: 25px 20px;
-        display: table-cell;
-        vertical-align: middle;
-
-        .user-avatar {
-            width: 100px;
-            height: 100px;
-            object-fit: cover;
-            margin-bottom: 20px;
-            border-radius: 8px;
-            box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
-        }
-
-        .logo {
-            width: 120px;
-            margin-bottom: 20px;
-        }
-
-        h1 {
-            @include font-size(34);
-            font-weight: 800;
-            line-height: 1.2;
-            margin-bottom: 2px;
-            color: $text;
-        }
-
-        h2 {
-            @include font-size(23);
-            font-weight: 500;
-            margin-bottom: 50px;
-            color: $text;
-        }
-
-        .block-form {
-            margin-left: auto;
-            margin-right: auto;
-
-            .block-wrapper label {
-                text-align: right;
-            }
-        }
-    }
-
-    @media only screen and (min-width: 690px) and (max-width: 960px) {
-
-        .auth-form {
-            padding-left: 20%;
-            padding-right: 20%;
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-
-        .auth-form {
-            width: 100%;
-
-            h1 {
-                @include font-size(30);
-            }
-
-            h2 {
-                @include font-size(21);
-            }
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .auth-form {
-
-            h1, h2, .additional-link {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
-
+    @import '@assets/vue-file-manager/_auth';
 </style>
diff --git a/resources/js/components/VueFileManagerComponents/FilesView.vue b/resources/js/views/Files.vue
similarity index 100%
rename from resources/js/components/VueFileManagerComponents/FilesView.vue
rename to resources/js/views/Files.vue
diff --git a/resources/js/components/VueFileManagerComponents/UserSettings.vue b/resources/js/views/Profile.vue
similarity index 100%
rename from resources/js/components/VueFileManagerComponents/UserSettings.vue
rename to resources/js/views/Profile.vue
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index f3c31d3c..80fa3b82 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -5,3 +5,13 @@
 @import 'vue-file-manager/_variables';
 @import 'vue-file-manager/_mixins';
 //@import 'vue-file-manager/_forms';
+
+#application-wrapper {
+  display: flex;
+  height: 100%;
+
+  #content {
+    position: relative;
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/resources/sass/vue-file-manager/_auth.scss b/resources/sass/vue-file-manager/_auth.scss
new file mode 100644
index 00000000..a078856b
--- /dev/null
+++ b/resources/sass/vue-file-manager/_auth.scss
@@ -0,0 +1,85 @@
+.auth-form {
+  text-align: center;
+  max-width: 600px;
+  padding: 25px 20px;
+  display: table-cell;
+  vertical-align: middle;
+
+  .additional-link {
+
+    a {
+      font-weight: 700;
+      text-decoration: none;
+    }
+  }
+
+  .user-avatar {
+    width: 100px;
+    height: 100px;
+    object-fit: cover;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
+  }
+
+  .logo {
+    width: 120px;
+    margin-bottom: 20px;
+  }
+
+  h1 {
+    @include font-size(34);
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: 2px;
+    color: $text;
+  }
+
+  h2 {
+    @include font-size(23);
+    font-weight: 500;
+    margin-bottom: 50px;
+    color: $text;
+  }
+
+  .block-form {
+    margin-left: auto;
+    margin-right: auto;
+
+    .block-wrapper label {
+      text-align: right;
+    }
+  }
+}
+
+@media only screen and (min-width: 690px) and (max-width: 960px) {
+
+  .auth-form {
+    padding-left: 20%;
+    padding-right: 20%;
+  }
+}
+
+@media only screen and (max-width: 690px) {
+
+  .auth-form {
+    width: 100%;
+
+    h1 {
+      @include font-size(30);
+    }
+
+    h2 {
+      @include font-size(21);
+    }
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .auth-form {
+
+    h1, h2, .additional-link {
+      color: $dark_mode_text_primary;
+    }
+  }
+}
\ No newline at end of file