From 4999b2347496fa553c2e1de2c499ae0cb206bd01 Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Mon, 22 Mar 2021 07:45:38 +0100
Subject: [PATCH] custom color theme part 2

---
 public/mix-manifest.json                      | 204 +++---------------
 .../js/components/FilesView/FileItemGrid.vue  |   6 +-
 resources/js/components/FilesView/Option.vue  |  71 +++---
 .../js/components/FilesView/OptionGroup.vue   |  20 +-
 .../js/components/FilesView/SearchBar.vue     |   9 +-
 .../FilesView/SortingAndPreviewMenu.vue       |  17 +-
 resources/js/components/FilesView/Spinner.vue |   6 +-
 .../js/components/Others/ActionButton.vue     |   6 +-
 .../js/components/Others/EmojiPicker.vue      |   6 +-
 .../js/components/Others/Forms/ImageInput.vue |   8 +-
 .../Others/Forms/MultiEmailInput.vue          |  12 +-
 .../Others/Forms/SelectBoxInput.vue           |  15 +-
 .../components/Others/Popup/PopupHeader.vue   |  11 +-
 resources/js/components/Others/RenameItem.vue |   6 +-
 .../js/components/Others/ShareCreate.vue      |  16 +-
 resources/js/components/Others/ShareEdit.vue  |   2 +-
 resources/js/components/Others/TabWrapper.vue |  14 +-
 .../js/components/Others/ThumbnailItem.vue    |   2 +-
 resources/js/components/Others/TreeMenu.vue   |  10 +-
 .../components/Others/TreeMenuNavigator.vue   |   3 +-
 .../views/Admin/AppSettings/AppSettings.vue   |  12 +-
 .../AppSettingsTabs/Appearance.vue            |   4 +-
 .../AppSettings/AppSettingsTabs/Billings.vue  |  14 +-
 .../AppSettings/AppSettingsTabs/Email.vue     |  10 +-
 .../AppSettings/AppSettingsTabs/Index.vue     |  30 +--
 .../AppSettings/AppSettingsTabs/Others.vue    |   9 +-
 .../AppSettings/AppSettingsTabs/Payments.vue  |   6 +-
 resources/js/views/Admin/Pages/PageEdit.vue   |   3 +-
 resources/js/views/Admin/Plans/PlanCreate.vue |   8 +-
 .../views/Admin/Plans/PlanTabs/PlanDelete.vue |   2 +-
 .../Admin/Plans/PlanTabs/PlanSettings.vue     |   6 +-
 .../Admin/Plans/PlanTabs/PlanSubscribers.vue  |   4 +-
 resources/js/views/Admin/Users/User.vue       |  36 ++--
 resources/js/views/Admin/Users/UserCreate.vue |  10 +-
 .../views/Admin/Users/UserTabs/UserDelete.vue |   1 +
 .../Admin/Users/UserTabs/UserStorage.vue      |   1 +
 resources/js/views/Mobile/AdminMobileMenu.vue |  19 +-
 resources/views/index.blade.php               |  57 +----
 .../others/color-template.blade.php           |  73 +++++++
 39 files changed, 312 insertions(+), 437 deletions(-)
 create mode 100644 resources/views/vuefilemanager/others/color-template.blade.php

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 29290a10..fcbc2b7d 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -4,19 +4,19 @@
     "/chunks/admin.js": "/chunks/admin.js?id=7875b08fc6fb75a7ad1f",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=c9330616aa6a16b45288",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.js?id=81dea7680f4bfde55278",
-    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=5842ebc2d92f96d9a14e",
+    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=62b552a0492fe95b2223",
     "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a001bb84.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a001bb84.js?id=0cad8279d29d79cd0e82",
     "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js?id=f1e1597205ff30d4fa4a",
     "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=51ec61b0370bb5763a49",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=fa2e144b98ae70ef5d73",
-    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=206ad965486a3cfe1851",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=27b7c7bec6e16afa58bf",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=45c8f27411287c7bbf73",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=34b124f4e336f128bfa8",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=f3f0a717f5806faf488c",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=33f264dcedf4bf1bf28e",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=2edfe14fa3a071bb1d9e",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=5b74b0a0e993c9477a78",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=7228ee8ebcb8cce9a412",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=8e0b5060f93ac64bfc04",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=d78455309f0f8f9a1e91",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=d1fb0ab7975c87f3ad04",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=0f153bc59ab8230a1da9",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=faa7c63be2f6496d21dc",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=4184e5c489f4fe09f2ab",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=1441a53c88fa164f4e1c",
     "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=e71bb0286189734a8aec",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=bb25421b4c61d039765f",
@@ -24,7 +24,7 @@
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=14e8c1c3784fce3b5a22",
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=5814ff43ba7c67297af1",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=f3c8bc62f62ae537f93c",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=ba73fbf788eb452511f2",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=9809887401e27ef5826e",
     "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.js?id=c3c1a252593a1b95eb0f",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=859a6f034ca5697aaf60",
     "/chunks/database.js": "/chunks/database.js?id=58addbf30b3b2f7c36db",
@@ -32,31 +32,31 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=81005c48fec83ab4ca45",
     "/chunks/files.js": "/chunks/files.js?id=40b4464ce393cb112111",
     "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js?id=c2c86f2168e863fbd49e",
-    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=dfda253f28064c0d5f88",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=885dd88f0e8d5c499a48",
     "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.js?id=02131dc9a3e5fb2ccfcc",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.js?id=31a17ad1d2536342abbe",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=854dea4fe4403ccb0ee0",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js?id=18ff204697459dad268d",
-    "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=d4e57cfc3dbc6a89dfb7",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=07de5a0fc9944e819154",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js?id=150772c0920d1a8694cc",
+    "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=b2a355bb27f40ee0e386",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=a00dedfec5aeabac394c",
-    "/chunks/homepage.js": "/chunks/homepage.js?id=205a16b0e51a9a1a3106",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=e04434ed1c74da2ae0a9",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=c4177c183448cb43ee51",
+    "/chunks/homepage.js": "/chunks/homepage.js?id=14154b40ea69f91fef31",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=4f937c33675bb39bc682",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=98c2b0d4a83f4e0cc6d9",
     "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=7fc7f9b6f10bdfac770e",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=354ee8d0cbda3b5cb5c7",
-    "/chunks/pages.js": "/chunks/pages.js?id=cf139d96daae9fa92d43",
-    "/chunks/plan.js": "/chunks/plan.js?id=abc4b8db6d8056cfbeae",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=d9dce08c188fd0f57c1a",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=606603c8c0579c72f8bd",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=ea81e44f474d16b9f6ce",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=234551fa36d21e29606e",
+    "/chunks/pages.js": "/chunks/pages.js?id=eddb0354939e959cea11",
+    "/chunks/plan.js": "/chunks/plan.js?id=56ff26197c3ddab55605",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=879fba580f14725f48a9",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=e70945a524685aec9519",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=a9806e24d3b3ea5cea9c",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=008bbf1096945f79d69d",
-    "/chunks/plans.js": "/chunks/plans.js?id=0cb93f40d0e7aafe3152",
-    "/chunks/platform.js": "/chunks/platform.js?id=70eb5a923302807ad7b9",
-    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=2f8ba4c3980c52452c7a",
+    "/chunks/plans.js": "/chunks/plans.js?id=f38fb7a9f17839f786ba",
+    "/chunks/platform.js": "/chunks/platform.js?id=d40d9bd4da4641799c13",
+    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=82814a863a150db0cc7e",
     "/chunks/profile.js": "/chunks/profile.js?id=0f82cbd818967273cbd8",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=9202f2cff7c80a561718",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=b9ae98e83f8df690d09f",
-    "/chunks/settings.js": "/chunks/settings.js?id=e79621db59c13ffd7da9",
+    "/chunks/settings.js": "/chunks/settings.js?id=713564bcdbe44aa66df1",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=9c088cb1b14836d13648",
     "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=c765f8563393c27bc6a6",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=201b3cbada273dacd46e",
@@ -75,156 +75,18 @@
     "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=7cb7c0cb6ef388cd016e",
     "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=bcea699b0d9d0ee61565",
     "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=830456726847f435144e",
-    "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=7168ffacf10ca4e5ef37",
+    "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=2b555924c945cbcd23f5",
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=9c61721d5e30ef544377",
-    "/chunks/user.js": "/chunks/user.js?id=b11c755b2b39318bbf0d",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=a9d2048a1608055ebef2",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=d899a2ba78445436b170",
+    "/chunks/user.js": "/chunks/user.js?id=8e96e769d9df5c5f7364",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=3066213dc3af06795a28",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=78a10edafd58a4abad26",
     "/chunks/user-detail.js": "/chunks/user-detail.js?id=039a3d421f7d8b8b3ce3",
     "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=8da7b23dc11d9e2e6c99",
     "/chunks/user-password.js": "/chunks/user-password.js?id=31bcde6d4cfb29b1c894",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=bd232bbde2c55cb7c06c",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=f1d8f104599fa982991e",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=3b8974eb8af615d517f4",
-    "/chunks/users.js": "/chunks/users.js?id=9085e0306eafce8f9fce",
+    "/chunks/users.js": "/chunks/users.js?id=6bfd86f6bced064b44d3",
     "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~68e3c6cf.js": "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~68e3c6cf.js?id=b490efdc8470a6c2f625",
     "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~a4a4a595.js": "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~a4a4a595.js?id=be99c10088b00578891b",
-    "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js": "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js?id=66afa0e341251a68c3d3",
-    "/js/main.594ae216cb933d3d69ed.hot-update.js": "/js/main.594ae216cb933d3d69ed.hot-update.js",
-    "/js/main.127e693ce5da9176f518.hot-update.js": "/js/main.127e693ce5da9176f518.hot-update.js",
-    "/js/main.8b30bb71527c5b98fa50.hot-update.js": "/js/main.8b30bb71527c5b98fa50.hot-update.js",
-    "/chunks/files.0ff176717d3ad9de8a6d.hot-update.js": "/chunks/files.0ff176717d3ad9de8a6d.hot-update.js",
-    "/chunks/files.f28c1c9d52619bacc74f.hot-update.js": "/chunks/files.f28c1c9d52619bacc74f.hot-update.js",
-    "/chunks/files.b2e34a16adfbdf2f0c96.hot-update.js": "/chunks/files.b2e34a16adfbdf2f0c96.hot-update.js",
-    "/js/main.2d423b55b370458401a0.hot-update.js": "/js/main.2d423b55b370458401a0.hot-update.js",
-    "/js/main.e5c8339a4f4847f46b68.hot-update.js": "/js/main.e5c8339a4f4847f46b68.hot-update.js",
-    "/chunks/files.a6a70fee6562a0ff79d4.hot-update.js": "/chunks/files.a6a70fee6562a0ff79d4.hot-update.js",
-    "/chunks/files.fb841ac657e9aaa841c5.hot-update.js": "/chunks/files.fb841ac657e9aaa841c5.hot-update.js",
-    "/chunks/files.93163026c2dddb9e0664.hot-update.js": "/chunks/files.93163026c2dddb9e0664.hot-update.js",
-    "/chunks/files.c74948aa93e10c1572d0.hot-update.js": "/chunks/files.c74948aa93e10c1572d0.hot-update.js",
-    "/chunks/files.bf33b531f7b86f66ad16.hot-update.js": "/chunks/files.bf33b531f7b86f66ad16.hot-update.js",
-    "/chunks/files.990202c1c53420b1ea8d.hot-update.js": "/chunks/files.990202c1c53420b1ea8d.hot-update.js",
-    "/chunks/files.41f8ac0b5c1d00ccd0cd.hot-update.js": "/chunks/files.41f8ac0b5c1d00ccd0cd.hot-update.js",
-    "/chunks/shared-files.6938a13d3445de83b4bd.hot-update.js": "/chunks/shared-files.6938a13d3445de83b4bd.hot-update.js",
-    "/chunks/files~chunks/shared/file-browser.209884fa59be663998ea.hot-update.js": "/chunks/files~chunks/shared/file-browser.209884fa59be663998ea.hot-update.js",
-    "/chunks/files~chunks/shared/file-browser.08301fc79f8184a20a60.hot-update.js": "/chunks/files~chunks/shared/file-browser.08301fc79f8184a20a60.hot-update.js",
-    "/chunks/files~chunks/shared/file-browser.0f7e7ec32be3a194f7d0.hot-update.js": "/chunks/files~chunks/shared/file-browser.0f7e7ec32be3a194f7d0.hot-update.js",
-    "/chunks/files~chunks/shared/file-browser.8d4bb9fc004db6bc051a.hot-update.js": "/chunks/files~chunks/shared/file-browser.8d4bb9fc004db6bc051a.hot-update.js",
-    "/chunks/files.5539be77c34d4d55bc4a.hot-update.js": "/chunks/files.5539be77c34d4d55bc4a.hot-update.js",
-    "/chunks/files.e90d1a7898dd7f152b9d.hot-update.js": "/chunks/files.e90d1a7898dd7f152b9d.hot-update.js",
-    "/js/main.e02f4914125f8dbf41d4.hot-update.js": "/js/main.e02f4914125f8dbf41d4.hot-update.js",
-    "/chunks/files.9e0048ab3257fa9a1b18.hot-update.js": "/chunks/files.9e0048ab3257fa9a1b18.hot-update.js",
-    "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.c7656cbed871df3433d4.hot-update.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.c7656cbed871df3433d4.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.415d7bea0020a6990cd1.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.415d7bea0020a6990cd1.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.f2fd4231e6adfd5e1870.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.f2fd4231e6adfd5e1870.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.e4e9fb19f6edd8247c24.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.e4e9fb19f6edd8247c24.hot-update.js",
-    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.ecd1fda07e141b503890.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.ecd1fda07e141b503890.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.ef52271b14a4ddf6db7c.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.ef52271b14a4ddf6db7c.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.916e2495df09ea960f24.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.916e2495df09ea960f24.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.a45e98196b3e1f7a0b6e.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.a45e98196b3e1f7a0b6e.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.628cf17385948065db4f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.628cf17385948065db4f.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.a75ffac8dea942e97eb7.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.a75ffac8dea942e97eb7.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.572941a64f4fb30a0318.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.572941a64f4fb30a0318.hot-update.js",
-    "/chunks/settings.ec6fbf4e8a78e2c47665.hot-update.js": "/chunks/settings.ec6fbf4e8a78e2c47665.hot-update.js",
-    "/chunks/settings.eeebc00f55033762a1c8.hot-update.js": "/chunks/settings.eeebc00f55033762a1c8.hot-update.js",
-    "/chunks/settings.83a86892fffc7d973f82.hot-update.js": "/chunks/settings.83a86892fffc7d973f82.hot-update.js",
-    "/chunks/settings.cd01d9773be488ca0a0d.hot-update.js": "/chunks/settings.cd01d9773be488ca0a0d.hot-update.js",
-    "/chunks/settings.0b59730f7d9df8f21011.hot-update.js": "/chunks/settings.0b59730f7d9df8f21011.hot-update.js",
-    "/chunks/admin.68a368a62b7e246ad6ff.hot-update.js": "/chunks/admin.68a368a62b7e246ad6ff.hot-update.js",
-    "/chunks/admin.0d13e0a6eb8f88b17847.hot-update.js": "/chunks/admin.0d13e0a6eb8f88b17847.hot-update.js",
-    "/chunks/dashboard.31e507efb7a84a230d7c.hot-update.js": "/chunks/dashboard.31e507efb7a84a230d7c.hot-update.js",
-    "/chunks/dashboard.ccc28adea46099124145.hot-update.js": "/chunks/dashboard.ccc28adea46099124145.hot-update.js",
-    "/chunks/dashboard.ca4c9179aa1d5ac5f993.hot-update.js": "/chunks/dashboard.ca4c9179aa1d5ac5f993.hot-update.js",
-    "/chunks/dashboard.456aa46be6af721bb816.hot-update.js": "/chunks/dashboard.456aa46be6af721bb816.hot-update.js",
-    "/chunks/dashboard.e9616aec4eeba81ba53f.hot-update.js": "/chunks/dashboard.e9616aec4eeba81ba53f.hot-update.js",
-    "/chunks/dashboard.4b00af331ca5cded6aea.hot-update.js": "/chunks/dashboard.4b00af331ca5cded6aea.hot-update.js",
-    "/chunks/dashboard.fc0fb6bef86bae1579b3.hot-update.js": "/chunks/dashboard.fc0fb6bef86bae1579b3.hot-update.js",
-    "/chunks/dashboard.83dd8083af78781d1e35.hot-update.js": "/chunks/dashboard.83dd8083af78781d1e35.hot-update.js",
-    "/chunks/dashboard.5cbca939eff299821924.hot-update.js": "/chunks/dashboard.5cbca939eff299821924.hot-update.js",
-    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.8d527cc1ae938ca71cc3.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.8d527cc1ae938ca71cc3.hot-update.js",
-    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.01ca53f801474088ce3c.hot-update.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.01ca53f801474088ce3c.hot-update.js",
-    "/chunks/profile.093037ab24a941373f9c.hot-update.js": "/chunks/profile.093037ab24a941373f9c.hot-update.js",
-    "/chunks/profile.8835630ac9c2b047eb01.hot-update.js": "/chunks/profile.8835630ac9c2b047eb01.hot-update.js",
-    "/chunks/admin-account.dec379ce6ba01e2491ce.hot-update.js": "/chunks/admin-account.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.dec379ce6ba01e2491ce.hot-update.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/app-setup.dec379ce6ba01e2491ce.hot-update.js": "/chunks/app-setup.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/billings-detail.dec379ce6ba01e2491ce.hot-update.js": "/chunks/billings-detail.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/database.dec379ce6ba01e2491ce.hot-update.js": "/chunks/database.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/environment-setup.dec379ce6ba01e2491ce.hot-update.js": "/chunks/environment-setup.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/installation-disclaimer.dec379ce6ba01e2491ce.hot-update.js": "/chunks/installation-disclaimer.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/page-edit.dec379ce6ba01e2491ce.hot-update.js": "/chunks/page-edit.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/plan-create.dec379ce6ba01e2491ce.hot-update.js": "/chunks/plan-create.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/profile~chunks/settings-password.dec379ce6ba01e2491ce.hot-update.js": "/chunks/profile~chunks/settings-password.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/settings-create-payment-methods.dec379ce6ba01e2491ce.hot-update.js": "/chunks/settings-create-payment-methods.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/settings-invoices.dec379ce6ba01e2491ce.hot-update.js": "/chunks/settings-invoices.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/settings-payment-methods.dec379ce6ba01e2491ce.hot-update.js": "/chunks/settings-payment-methods.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/settings-storage.dec379ce6ba01e2491ce.hot-update.js": "/chunks/settings-storage.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/settings-subscription.dec379ce6ba01e2491ce.hot-update.js": "/chunks/settings-subscription.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/stripe-credentials.dec379ce6ba01e2491ce.hot-update.js": "/chunks/stripe-credentials.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/subscription-plans.dec379ce6ba01e2491ce.hot-update.js": "/chunks/subscription-plans.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/upgrade-billing.dec379ce6ba01e2491ce.hot-update.js": "/chunks/upgrade-billing.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/user-create.dec379ce6ba01e2491ce.hot-update.js": "/chunks/user-create.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/user-subscription.dec379ce6ba01e2491ce.hot-update.js": "/chunks/user-subscription.dec379ce6ba01e2491ce.hot-update.js",
-    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.d77f0ee0d4c201b04d9b.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.d77f0ee0d4c201b04d9b.hot-update.js",
-    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.516db9b88d5bd830a68e.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.516db9b88d5bd830a68e.hot-update.js",
-    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.ea67eda7de4428eb4dda.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.ea67eda7de4428eb4dda.hot-update.js",
-    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.eaf657fb9eba8248fcfe.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.eaf657fb9eba8248fcfe.hot-update.js",
-    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.f3c46408f8926efd29fb.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.f3c46408f8926efd29fb.hot-update.js",
-    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.b919d8c95237e2c6bdd2.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.b919d8c95237e2c6bdd2.hot-update.js",
-    "/chunks/settings-password.0d576bebb2c4938962d3.hot-update.js": "/chunks/settings-password.0d576bebb2c4938962d3.hot-update.js",
-    "/js/main.29093c2e2bfe474b355c.hot-update.js": "/js/main.29093c2e2bfe474b355c.hot-update.js",
-    "/js/main.503feb0d73d1a8025b7e.hot-update.js": "/js/main.503feb0d73d1a8025b7e.hot-update.js",
-    "/chunks/admin-account.1104cec2978aaf333d5d.hot-update.js": "/chunks/admin-account.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/app-index.1104cec2978aaf333d5d.hot-update.js": "/chunks/app-index.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/app-others.1104cec2978aaf333d5d.hot-update.js": "/chunks/app-others.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/app-payments.1104cec2978aaf333d5d.hot-update.js": "/chunks/app-payments.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/app-setup.1104cec2978aaf333d5d.hot-update.js": "/chunks/app-setup.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/dashboard.1104cec2978aaf333d5d.hot-update.js": "/chunks/dashboard.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/invoices.1104cec2978aaf333d5d.hot-update.js": "/chunks/invoices.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/page-edit.1104cec2978aaf333d5d.hot-update.js": "/chunks/page-edit.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/pages.1104cec2978aaf333d5d.hot-update.js": "/chunks/pages.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/plan-settings.1104cec2978aaf333d5d.hot-update.js": "/chunks/plan-settings.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/plans.1104cec2978aaf333d5d.hot-update.js": "/chunks/plans.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/platform.1104cec2978aaf333d5d.hot-update.js": "/chunks/platform.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/settings-create-payment-methods.1104cec2978aaf333d5d.hot-update.js": "/chunks/settings-create-payment-methods.1104cec2978aaf333d5d.hot-update.js",
-    "/chunks/admin-account.786f020325c438b3a64f.hot-update.js": "/chunks/admin-account.786f020325c438b3a64f.hot-update.js",
-    "/chunks/app-index.786f020325c438b3a64f.hot-update.js": "/chunks/app-index.786f020325c438b3a64f.hot-update.js",
-    "/chunks/app-others.786f020325c438b3a64f.hot-update.js": "/chunks/app-others.786f020325c438b3a64f.hot-update.js",
-    "/chunks/app-payments.786f020325c438b3a64f.hot-update.js": "/chunks/app-payments.786f020325c438b3a64f.hot-update.js",
-    "/chunks/app-setup.786f020325c438b3a64f.hot-update.js": "/chunks/app-setup.786f020325c438b3a64f.hot-update.js",
-    "/chunks/dashboard.786f020325c438b3a64f.hot-update.js": "/chunks/dashboard.786f020325c438b3a64f.hot-update.js",
-    "/chunks/invoices.786f020325c438b3a64f.hot-update.js": "/chunks/invoices.786f020325c438b3a64f.hot-update.js",
-    "/chunks/page-edit.786f020325c438b3a64f.hot-update.js": "/chunks/page-edit.786f020325c438b3a64f.hot-update.js",
-    "/chunks/pages.786f020325c438b3a64f.hot-update.js": "/chunks/pages.786f020325c438b3a64f.hot-update.js",
-    "/chunks/plan-settings.786f020325c438b3a64f.hot-update.js": "/chunks/plan-settings.786f020325c438b3a64f.hot-update.js",
-    "/chunks/plans.786f020325c438b3a64f.hot-update.js": "/chunks/plans.786f020325c438b3a64f.hot-update.js",
-    "/chunks/platform.786f020325c438b3a64f.hot-update.js": "/chunks/platform.786f020325c438b3a64f.hot-update.js",
-    "/chunks/settings-create-payment-methods.786f020325c438b3a64f.hot-update.js": "/chunks/settings-create-payment-methods.786f020325c438b3a64f.hot-update.js",
-    "/chunks/admin-account.5b74c2d7a23487555587.hot-update.js": "/chunks/admin-account.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/app-index.5b74c2d7a23487555587.hot-update.js": "/chunks/app-index.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/app-others.5b74c2d7a23487555587.hot-update.js": "/chunks/app-others.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/app-payments.5b74c2d7a23487555587.hot-update.js": "/chunks/app-payments.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/app-setup.5b74c2d7a23487555587.hot-update.js": "/chunks/app-setup.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/dashboard.5b74c2d7a23487555587.hot-update.js": "/chunks/dashboard.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/invoices.5b74c2d7a23487555587.hot-update.js": "/chunks/invoices.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/page-edit.5b74c2d7a23487555587.hot-update.js": "/chunks/page-edit.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/pages.5b74c2d7a23487555587.hot-update.js": "/chunks/pages.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/plan-settings.5b74c2d7a23487555587.hot-update.js": "/chunks/plan-settings.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/plans.5b74c2d7a23487555587.hot-update.js": "/chunks/plans.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/platform.5b74c2d7a23487555587.hot-update.js": "/chunks/platform.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/settings-create-payment-methods.5b74c2d7a23487555587.hot-update.js": "/chunks/settings-create-payment-methods.5b74c2d7a23487555587.hot-update.js",
-    "/chunks/app-settings.37b1bc4e266e96cac8b9.hot-update.js": "/chunks/app-settings.37b1bc4e266e96cac8b9.hot-update.js",
-    "/chunks/app-settings.e462f564af1ae9104721.hot-update.js": "/chunks/app-settings.e462f564af1ae9104721.hot-update.js",
-    "/chunks/app-settings.51ae4706cc801af4ad1c.hot-update.js": "/chunks/app-settings.51ae4706cc801af4ad1c.hot-update.js",
-    "/chunks/app-settings.ab4672e4a14afe6ce522.hot-update.js": "/chunks/app-settings.ab4672e4a14afe6ce522.hot-update.js",
-    "/js/main.7b9ac6334b571ee5a421.hot-update.js": "/js/main.7b9ac6334b571ee5a421.hot-update.js",
-    "/chunks/app-settings.f06676383ce8ae544136.hot-update.js": "/chunks/app-settings.f06676383ce8ae544136.hot-update.js",
-    "/js/main.4379c6d957be4d14925a.hot-update.js": "/js/main.4379c6d957be4d14925a.hot-update.js",
-    "/js/main.3ccbeb225f90ba525c1a.hot-update.js": "/js/main.3ccbeb225f90ba525c1a.hot-update.js",
-    "/js/main.06751dd948d79b8471c3.hot-update.js": "/js/main.06751dd948d79b8471c3.hot-update.js",
-    "/chunks/app-settings.b77b7fc20941b287c6d3.hot-update.js": "/chunks/app-settings.b77b7fc20941b287c6d3.hot-update.js",
-    "/js/main.60cec485100b1dcfa0a5.hot-update.js": "/js/main.60cec485100b1dcfa0a5.hot-update.js",
-    "/js/main.c99d787eaeec89320d95.hot-update.js": "/js/main.c99d787eaeec89320d95.hot-update.js",
-    "/js/main.0fa9d968bbde6b7d353f.hot-update.js": "/js/main.0fa9d968bbde6b7d353f.hot-update.js",
-    "/js/main.37da2c9b586059edca37.hot-update.js": "/js/main.37da2c9b586059edca37.hot-update.js",
-    "/chunks/app-settings.5d4d46f295ed13286bd0.hot-update.js": "/chunks/app-settings.5d4d46f295ed13286bd0.hot-update.js"
+    "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js": "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js?id=66afa0e341251a68c3d3"
 }
diff --git a/resources/js/components/FilesView/FileItemGrid.vue b/resources/js/components/FilesView/FileItemGrid.vue
index 260933cf..394acc2a 100644
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -26,7 +26,7 @@
                 <img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name" />
 
                 <!--Else show only folder icon-->
-                <FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder" />
+                <FolderIcon v-if="isFolder" :item="item" location="file-item-grid" class="folder svg-color-theme" />
             </div>
 
             <!--Name-->
@@ -40,12 +40,12 @@
 
                     <!--Shared Icon-->
                     <div v-if="$checkPermission('master') && item.shared" class="item-shared">
-                        <link-icon size="12" class="shared-icon"></link-icon>
+                        <link-icon size="12" class="shared-icon text-theme" />
                     </div>
 
                     <!--Participant owner Icon-->
                     <div v-if="$checkPermission('master') && item.author !== 'user'" class="item-shared">
-                        <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
+                        <user-plus-icon size="12" class="shared-icon text-theme" />
                     </div>
 
                     <!--Filesize-->
diff --git a/resources/js/components/FilesView/Option.vue b/resources/js/components/FilesView/Option.vue
index 83a7f538..29f452f9 100644
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/FilesView/Option.vue
@@ -1,20 +1,23 @@
 <template>
-    <li class="menu-option" :class="[icon === 'trash' ? 'danger' : '']">
-        <div class="icon">
-            <trash-2-icon v-if="icon === 'trash'" size="17"></trash-2-icon>
-            <life-buoy-icon v-if="icon === 'restore'" size="17"></life-buoy-icon>
-            <trash-icon v-if="icon === 'empty-trash'" size="17"></trash-icon>
-            <eye-icon v-if="icon ==='detail'" size="17"></eye-icon>
-            <download-cloud-icon v-if="icon === 'download'" size="17"></download-cloud-icon>
-            <edit2-icon v-if="icon === 'rename'" size="17"></edit2-icon>
-            <corner-down-right-icon v-if="icon === 'move-item'" size="17"></corner-down-right-icon>
-            <link-icon v-if="icon === 'share'" size="17"></link-icon>
-            <star-icon v-if="icon === 'favourites'" size="17"></star-icon>
-            <folder-plus-icon v-if="icon === 'create-folder'" size="17"></folder-plus-icon>
-            <smile-icon v-if="icon === 'no-options'" size="17"></smile-icon>
-            <paperclip-icon v-if="icon === 'zip-folder'" size="17"></paperclip-icon> 
+    <li class="menu-option group">
+        <div class="icon group-hover-text-theme">
+            <calendar-icon v-if="icon === 'calendar'" size="17" class="group-hover-text-theme"/>
+            <grid-icon v-if="icon === 'grid'" size="17" class="group-hover-text-theme"/>
+            <list-icon v-if="icon === 'list'" size="17" class="group-hover-text-theme"/>
+            <trash-2-icon v-if="icon === 'trash'" size="17" class="group-hover-text-theme"/>
+            <life-buoy-icon v-if="icon === 'restore'" size="17" class="group-hover-text-theme"/>
+            <trash-icon v-if="icon === 'empty-trash'" size="17" class="group-hover-text-theme"/>
+            <eye-icon v-if="icon ==='detail'" size="17" class="group-hover-text-theme"/>
+            <download-cloud-icon v-if="icon === 'download'" size="17" class="group-hover-text-theme"/>
+            <edit2-icon v-if="icon === 'rename'" size="17" class="group-hover-text-theme"/>
+            <corner-down-right-icon v-if="icon === 'move-item'" size="17" class="group-hover-text-theme"/>
+            <link-icon v-if="icon === 'share'" size="17" class="group-hover-text-theme"/>
+            <star-icon v-if="icon === 'favourites'" size="17" class="group-hover-text-theme"/>
+            <folder-plus-icon v-if="icon === 'create-folder'" size="17" class="group-hover-text-theme"/>
+            <smile-icon v-if="icon === 'no-options'" size="17" class="group-hover-text-theme"/>
+            <paperclip-icon v-if="icon === 'zip-folder'" size="17" class="group-hover-text-theme"/>
         </div>
-        <div class="text-label">
+        <div class="text-label group-hover-text-theme">
             {{ title }}
         </div>
     </li>
@@ -60,22 +63,6 @@ import {
 @import "@assets/vuefilemanager/_variables";
 @import "@assets/vuefilemanager/_mixins";
 
-.danger {
-    .text-label {
-        color: $danger !important;
-    }
-    .icon {
-        path,
-        line,
-        polyline,
-        rect,
-        circle,
-        polygon {
-            stroke: $danger !important;
-        }
-    }
-}
-
 .menu-option {
     white-space: nowrap;
     font-weight: 700;
@@ -90,6 +77,15 @@ import {
     .icon {
         margin-right: 20px;
         line-height: 0;
+
+        path,
+        line,
+        polyline,
+        rect,
+        circle,
+        polygon {
+            color: inherit;
+        }
     }
 
     .text-label {
@@ -98,19 +94,6 @@ import {
 
     &:hover {
         background: $light_background;
-
-        .text-label {
-            color: $theme;
-        }
-
-        path,
-        line,
-        polyline,
-        rect,
-        circle,
-        polygon {
-            stroke: $theme;
-        }
     }
 }
 @media (prefers-color-scheme: dark) {
diff --git a/resources/js/components/FilesView/OptionGroup.vue b/resources/js/components/FilesView/OptionGroup.vue
index 0f95ac6f..20ec769d 100644
--- a/resources/js/components/FilesView/OptionGroup.vue
+++ b/resources/js/components/FilesView/OptionGroup.vue
@@ -15,19 +15,19 @@
 @import "@assets/vuefilemanager/_mixins";
 
 .menu-option-group {
-        padding: 5px 0;
-        border-bottom: 1px solid $light_mode_border;
+    padding: 5px 0;
+    border-bottom: 1px solid $light_mode_border;
 
-        &:first-child {
-            padding-top: 0;
-        }
-
-        &:last-child {
-            padding-bottom: 0;
-            border-bottom: none;
-        }
+    &:first-child {
+        padding-top: 0;
     }
 
+    &:last-child {
+        padding-bottom: 0;
+        border-bottom: none;
+    }
+}
+
 @media (prefers-color-scheme: dark) {
     .menu-option-group {
         border-color: $dark_mode_border_color;
diff --git a/resources/js/components/FilesView/SearchBar.vue b/resources/js/components/FilesView/SearchBar.vue
index bdd85706..4d9493fc 100644
--- a/resources/js/components/FilesView/SearchBar.vue
+++ b/resources/js/components/FilesView/SearchBar.vue
@@ -1,14 +1,14 @@
 <template>
     <div class="search-bar">
         <div class="icon" v-if="!isQuery">
-            <search-icon size="19"></search-icon>
+            <search-icon size="19" />
         </div>
         <div class="icon" v-if="isQuery" @click="resetQuery">
-            <x-icon class="pointer" size="19"></x-icon>
+            <x-icon class="pointer" size="19" />
         </div>
         <input
                 v-model="query"
-                class="query"
+                class="query focus-border-theme"
                 type="text"
                 name="query"
                 :placeholder="$t('inputs.placeholder_search_files')"
@@ -99,8 +99,7 @@
             }
 
             &:focus {
-                border: 1px solid $theme;
-                box-shadow: 0 0 7px rgba($theme, 0.3);
+                //box-shadow: 0 0 7px rgba($theme, 0.3);
             }
 
             &:focus + .icon {
diff --git a/resources/js/components/FilesView/SortingAndPreviewMenu.vue b/resources/js/components/FilesView/SortingAndPreviewMenu.vue
index 95a6c973..65637b49 100644
--- a/resources/js/components/FilesView/SortingAndPreviewMenu.vue
+++ b/resources/js/components/FilesView/SortingAndPreviewMenu.vue
@@ -1,6 +1,15 @@
 <template>
     <div class="menu-options" id="menu-list">
-        <ul class="menu-option-group">
+        <OptionGroup class="menu-option-group">
+            <Option v-if="isList" @click="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
+            <Option v-if="isGrid" @click="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
+        </OptionGroup>
+        <OptionGroup class="menu-option-group">
+            <Option @click.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
+            <Option @click.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
+        </OptionGroup>
+
+        <ul v-if="false" class="menu-option-group">
             <li v-if="isList" class="menu-option" @click="changePreview('grid')">
                 <div class="icon">
                     <grid-icon size="17"/>
@@ -18,7 +27,7 @@
                 </div>
             </li>
         </ul>
-        <ul class="menu-option-group">
+        <ul v-if="false" class="menu-option-group">
             <li class="menu-option" @click.stop="sort('created_at')">
                 <div class="icon">
                     <calendar-icon size="17"/>
@@ -47,6 +56,8 @@
 
 <script>
 
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import Option from '@/components/FilesView/Option'
 import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
 import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
 import { mapGetters } from 'vuex'
@@ -55,6 +66,8 @@ import { events } from '@/bus'
 export default {
     name: 'SortingAndPreviewMenu',
     components: {
+        OptionGroup,
+        Option,
         CalendarIcon,
         AlphabetIcon,
         ArrowUpIcon,
diff --git a/resources/js/components/FilesView/Spinner.vue b/resources/js/components/FilesView/Spinner.vue
index 183f28d6..148305c9 100644
--- a/resources/js/components/FilesView/Spinner.vue
+++ b/resources/js/components/FilesView/Spinner.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="loading-bar-spinner" class="spinner">
-        <div class="spinner-icon"></div>
+        <div class="spinner-icon border-top-theme border-left-theme"></div>
     </div>
 </template>
 
@@ -28,8 +28,8 @@
         width: 40px;
         height: 40px;
         border: solid 4px transparent;
-        border-top-color: $theme !important;
-        border-left-color: $theme !important;
+        //border-top-color: $theme !important;
+        //border-left-color: $theme !important;
         border-radius: 50%;
     }
 
diff --git a/resources/js/components/Others/ActionButton.vue b/resources/js/components/Others/ActionButton.vue
index 8a90c033..86c83a7b 100644
--- a/resources/js/components/Others/ActionButton.vue
+++ b/resources/js/components/Others/ActionButton.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="action-button">
-        <x-icon size="12" class="icon" v-if="icon === 'x'"></x-icon>
-        <edit-2-icon size="12" class="icon" v-if="icon === 'pencil-alt'"></edit-2-icon>
+        <x-icon size="12" class="icon text-theme" v-if="icon === 'x'" />
+        <edit-2-icon size="12" class="icon text-theme" v-if="icon === 'pencil-alt'" />
         <span class="label">
             <slot></slot>
         </span>
@@ -40,7 +40,7 @@
             margin-right: 2px;
 
             path, circle, line {
-                stroke: $theme;
+                color: inherit;
             }
         }
     }
diff --git a/resources/js/components/Others/EmojiPicker.vue b/resources/js/components/Others/EmojiPicker.vue
index a127ed1a..18b8329b 100644
--- a/resources/js/components/Others/EmojiPicker.vue
+++ b/resources/js/components/Others/EmojiPicker.vue
@@ -3,7 +3,7 @@
         <label class="main-label">{{ $t('popup_rename.select_emoji_label') }}:</label>
 
         <!-- Selected Emoji input -->
-        <div @click.stop="openList" class="select-input-wrapper" :class="{'active-menu' : selectOpen}">
+        <div @click.stop="openList" class="select-input-wrapper focus-border-theme" :class="{'active-menu' : selectOpen}">
 
             <!-- If is emoji selected -->
             <div class="select-input" v-if="selectedEmoji && selectedEmoji !== 'default'">
@@ -266,7 +266,6 @@ export default {
     .emoji-input {
         width: 100%;
         border-radius: 8px;
-        padding: 4px;
         margin-bottom: 20px;
         background: $light_background;
         border: none;
@@ -354,8 +353,7 @@ export default {
     }
 
     &.active-menu {
-        border-color: $theme;
-        box-shadow: 0 0 7px rgba($theme, 0.3);
+        //box-shadow: 0 0 7px rgba($theme, 0.3);
 
         .row-icon {
             transform: rotate(180deg);
diff --git a/resources/js/components/Others/Forms/ImageInput.vue b/resources/js/components/Others/Forms/ImageInput.vue
index 31ce13a0..9c00f715 100644
--- a/resources/js/components/Others/Forms/ImageInput.vue
+++ b/resources/js/components/Others/Forms/ImageInput.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="dropzone" :class="{ 'is-error': error }">
         <div v-if="imagePreview" @click="resetImage" class="reset-image">
-            <x-icon size="14" class="close-icon"></x-icon>
+            <x-icon size="14" class="close-icon text-theme" />
         </div>
 
         <input
@@ -18,7 +18,7 @@
         />
 
         <div class="dropzone-message" v-show="! isData">
-            <image-icon size="28" class="icon-upload"></image-icon>
+            <image-icon size="28" class="icon-upload text-theme"></image-icon>
             <span class="dropzone-title">
                 {{ $t('input_image.title') }}
             </span>
@@ -146,7 +146,7 @@
 
             .icon-upload {
                 rect, circle, polyline {
-                    stroke: $theme
+                    color: inherit
                 }
             }
 
@@ -195,7 +195,7 @@
 
                 .icon-upload {
                     path, polyline, line {
-                        stroke: $theme;
+                        color: inherit;
                     }
                 }
 
diff --git a/resources/js/components/Others/Forms/MultiEmailInput.vue b/resources/js/components/Others/Forms/MultiEmailInput.vue
index a773b42c..fffd0a49 100644
--- a/resources/js/components/Others/Forms/MultiEmailInput.vue
+++ b/resources/js/components/Others/Forms/MultiEmailInput.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="wrapper">
         <label class="input-label">{{ label }}:</label>
-        <div class="input-wrapper" :class="{'is-error' : isError}" @click="$refs.input.focus()">
+        <div class="input-wrapper focus-within-border-theme" :class="{'is-error' : isError}" @click="$refs.input.focus()">
             <div class="email-list">
-                <div class="email-tag" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
-                    <span>{{ email }}</span>
+                <div class="email-tag bg-theme-100" :class="{'mb-offset': getCharactersLength > 45}" v-for="(email, i) in emails" :key="i">
+                    <span class="text-theme">{{ email }}</span>
                     <x-icon @click="removeEmail(email)" class="icon" size="14"/>
                 </div>
                 <input @keydown.delete=removeLastEmail($event) @keyup="handleEmail()" v-model="email" :size="inputSize" class="email-input" :placeholder="placeHolder" autocomplete="new-password" ref="input"/>
@@ -123,8 +123,8 @@ export default {
     }
 
     &:focus-within {
-        border: 1px solid $theme;
-        box-shadow: 0 1px 5px rgba($theme, 0.3);
+        //border: 1px solid $theme;
+        //box-shadow: 0 1px 5px rgba($theme, 0.3);
     }
 
     .email-list {
@@ -140,7 +140,6 @@ export default {
         white-space: nowrap;
         display: flex;
         padding: 5px 10px;
-        background: rgba($theme, .1);
         border-radius: 8px;
         margin-right: 5px;
         align-items: center;
@@ -151,7 +150,6 @@ export default {
         }
 
         span {
-            color: $theme;
             font-weight: 700;
             @include font-size(14);
         }
diff --git a/resources/js/components/Others/Forms/SelectBoxInput.vue b/resources/js/components/Others/Forms/SelectBoxInput.vue
index 2dcd6547..413949bb 100644
--- a/resources/js/components/Others/Forms/SelectBoxInput.vue
+++ b/resources/js/components/Others/Forms/SelectBoxInput.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="select-box">
-        <div class="box-item"
-             :class="{'selected': item.value === input}"
+        <div class="box-item active-bg-theme-100 active-border-theme"
+             :class="{'active': item.value === input}"
              @click="getSelectedValue(item)"
              v-for="(item, i) in data" :key="i"
         >
-            <span class="box-value">{{ item.label }}</span>
+            <span class="box-value active-text-theme">{{ item.label }}</span>
         </div>
     </div>
 </template>
@@ -67,15 +67,6 @@
             .box-value {
                 @include font-size(15);
             }
-
-            &.selected {
-                background: rgba($theme, .1);
-                border-color: $theme;
-
-                .box-value {
-                    color: $theme;
-                }
-            }
         }
     }
 
diff --git a/resources/js/components/Others/Popup/PopupHeader.vue b/resources/js/components/Others/Popup/PopupHeader.vue
index 090f494a..933fc082 100644
--- a/resources/js/components/Others/Popup/PopupHeader.vue
+++ b/resources/js/components/Others/Popup/PopupHeader.vue
@@ -1,14 +1,13 @@
 <template>
     <div class="popup-header">
         <div class="icon">
-            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon"></corner-down-right-icon>
-            <share-icon v-if="icon === 'share'" size="17" class="title-icon"></share-icon>
-            <!-- <link-icon v-if="icon === 'share'" size="17" class="title-icon"></link-icon> -->
-            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon"></edit2-icon>
+            <corner-down-right-icon v-if="icon === 'move'" size="15" class="title-icon text-theme" />
+            <share-icon v-if="icon === 'share'" size="17" class="title-icon text-theme" />
+            <edit2-icon v-if="icon === 'edit'" size="17" class="title-icon text-theme" />
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
-            <x-icon @click="closePopup" size="22" class="close-icon"></x-icon>
+            <x-icon @click="closePopup" size="22" class="close-icon" />
         </div>
     </div>
 </template>
@@ -51,7 +50,7 @@
             line-height: 0;
 
             path, line, polyline, rect, circle {
-                stroke: $theme;
+                color: inherit;
             }
         }
 
diff --git a/resources/js/components/Others/RenameItem.vue b/resources/js/components/Others/RenameItem.vue
index b9d8b9c2..54e2b9f7 100644
--- a/resources/js/components/Others/RenameItem.vue
+++ b/resources/js/components/Others/RenameItem.vue
@@ -16,7 +16,7 @@
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('popup_rename.label') }}:</label>
                     <div class="input">
-                        <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
+                        <input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme" :placeholder="$t('popup_rename.placeholder')">
                         <div @click="pickedItem.name = ''" class="close-icon-wrapper">
                             <x-icon class="close-icon" size="14" />
                         </div>
@@ -26,7 +26,9 @@
 
                 <SetFolderIcon v-if="isMoreOptions" :folderData="pickedItem" />
 
-                <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
+                <ActionButton v-if="pickedItem.type === 'folder'" @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">
+                    {{ moreOptionsTitle }}
+                </ActionButton>
             </ValidationObserver>
         </PopupContent>
 
diff --git a/resources/js/components/Others/ShareCreate.vue b/resources/js/components/Others/ShareCreate.vue
index a1ef0909..fd13f9fe 100644
--- a/resources/js/components/Others/ShareCreate.vue
+++ b/resources/js/components/Others/ShareCreate.vue
@@ -9,7 +9,7 @@
             <!--Item Thumbnail-->
             <ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata" />
 
-            <!-- Infobox for successfull sended email -->
+            <!-- Infobox for successful send email -->
             <InfoBox v-if="isGeneratedShared && sharedViaEmail" class="info-box-wrapper">
                 <p v-html="$t('shared_form.email_successfully_send_message')"></p>
             </InfoBox>
@@ -31,7 +31,7 @@
 
                 </TabWrapper>
 
-                <!--Permision Select-->
+                <!--Permission Select-->
                 <ValidationProvider v-if="isFolder" tag="div" mode="passive" class="input-wrapper" name="Permission" rules="required" v-slot="{ errors }">
                     <label class="input-label">{{ $t('shared_form.label_permission') }}:</label>
                     <SelectInput v-model="shareOptions.permission" :options="permissionOptions" :placeholder="$t('shared_form.placeholder_permission')" :isError="errors[0]" />
@@ -48,7 +48,7 @@
 
                 <!--Set password-->
                 <ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
-                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
@@ -62,7 +62,9 @@
                     </div>
                 </div>
 
-                <ActionButton @click.native="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
+                <ActionButton @click.native="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">
+                    {{ moreOptionsTitle }}
+                </ActionButton>
             </ValidationObserver>
 
             <!--Copy generated link-->
@@ -76,9 +78,11 @@
 
         <!--Actions-->
         <PopupActions>
-            <ButtonBase v-if="! isGeneratedShared" class="popup-button" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }}
+            <ButtonBase v-if="! isGeneratedShared" class="popup-button" @click.native="$closePopup()" button-style="secondary">
+                {{ $t('popup_move_item.cancel') }}
             </ButtonBase>
-            <ButtonBase class="popup-button" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">{{ submitButtonText }}
+            <ButtonBase class="popup-button" @click.native="submitShareOptions" button-style="theme" :loading="isLoading" :disabled="isLoading">
+                {{ submitButtonText }}
             </ButtonBase>
         </PopupActions>
     </PopupWrapper>
diff --git a/resources/js/components/Others/ShareEdit.vue b/resources/js/components/Others/ShareEdit.vue
index 15920dac..286f259d 100644
--- a/resources/js/components/Others/ShareEdit.vue
+++ b/resources/js/components/Others/ShareEdit.vue
@@ -50,7 +50,7 @@
 
                 <!--Set password-->
                 <ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" tag="div" mode="passive" class="input-wrapper password" name="Password" rules="required" v-slot="{ errors }">
-                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" :placeholder="$t('page_sign_in.placeholder_password')">
+                    <input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme" :placeholder="$t('page_sign_in.placeholder_password')">
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
diff --git a/resources/js/components/Others/TabWrapper.vue b/resources/js/components/Others/TabWrapper.vue
index ffba2e96..ea2568f6 100644
--- a/resources/js/components/Others/TabWrapper.vue
+++ b/resources/js/components/Others/TabWrapper.vue
@@ -4,13 +4,15 @@
             <div class="tab" :class="{ active: tab.isActive }" @click="selectTab(tab)" v-for="(tab, i) in tabs" :key="i">
 
                 <!--Icon-->
-                <mail-icon v-if="tab.icon === 'email'" class="tab-icon" size="17"/>
-                <link-icon v-if="tab.icon === 'link'" class="tab-icon" size="17"/>
-                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon" size="17"/>
-                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon" size="17"/>
+                <mail-icon v-if="tab.icon === 'email'" class="tab-icon text-theme" size="17"/>
+                <link-icon v-if="tab.icon === 'link'" class="tab-icon text-theme" size="17"/>
+                <smile-icon v-if="tab.icon === 'emoji'" class="tab-icon text-theme" size="17"/>
+                <folder-icon v-if="tab.icon === 'folder'" class="tab-icon text-theme" size="17"/>
 
                 <!--Title-->
-                <b class="tab-title">{{tab.title}}</b>
+                <b class="tab-title">
+                    {{tab.title}}
+                </b>
             </div>
         </div>
         <slot></slot>
@@ -94,7 +96,7 @@
             circle,
             line,
             polyline {
-                stroke: $theme !important;
+                color: inherit !important;
             }
         }
     }
diff --git a/resources/js/components/Others/ThumbnailItem.vue b/resources/js/components/Others/ThumbnailItem.vue
index ea85da2b..17fe98f7 100644
--- a/resources/js/components/Others/ThumbnailItem.vue
+++ b/resources/js/components/Others/ThumbnailItem.vue
@@ -14,7 +14,7 @@
             <img v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
 
             <!--Else show only folder icon-->
-            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder" />
+            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" location="thumbnail-item" class="folder svg-color-theme" />
         </div>
 
         <!--Name-->
diff --git a/resources/js/components/Others/TreeMenu.vue b/resources/js/components/Others/TreeMenu.vue
index 76a74958..93af5b70 100644
--- a/resources/js/components/Others/TreeMenu.vue
+++ b/resources/js/components/Others/TreeMenu.vue
@@ -2,10 +2,10 @@
     <!--Folder Icon-->
     <div class="folder-item-wrapper" :class="{'is-inactive': disabledById && disabledById.id === nodes.id || !disableId} ">
 
-        <div class="folder-item" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
+        <div class="folder-item text-theme" :class="{'is-selected': isSelected}" @click="getFolder" :style="indent">
             <chevron-right-icon @click.stop="showTree" size="17" class="icon-arrow" :class="{'is-opened': isVisible, 'is-visible': nodes.folders.length !== 0}"></chevron-right-icon>
-            <hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon"></hard-drive-icon>
-            <folder-icon v-if="nodes.location !== 'base'" size="17" class="icon"></folder-icon>
+            <hard-drive-icon v-if="nodes.location === 'base'" size="17" class="icon text-theme"></hard-drive-icon>
+            <folder-icon v-if="nodes.location !== 'base'" size="17" class="icon text-theme"></folder-icon>
             <span class="label">{{ nodes.name }}</span>
         </div>
 
@@ -150,12 +150,12 @@
 
             .icon {
                 path, line, polyline, rect, circle {
-                    stroke: $theme;
+                    color: inherit;
                 }
             }
 
             .label {
-                color: $theme;
+                color: inherit;
             }
         }
     }
diff --git a/resources/js/components/Others/TreeMenuNavigator.vue b/resources/js/components/Others/TreeMenuNavigator.vue
index 5f4ce1c4..f2c2aa25 100644
--- a/resources/js/components/Others/TreeMenuNavigator.vue
+++ b/resources/js/components/Others/TreeMenuNavigator.vue
@@ -15,8 +15,7 @@
                 <span class="label">{{ nodes.name }}</span>
             </div>
 
-            <TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders"
-                               :key="item.id"/>
+            <TreeMenuNavigator :disabled="disableChildren" :depth="depth + 1" v-if="isVisible" :nodes="item" v-for="item in nodes.folders" :key="item.id"/>
         </div>
     </transition>
 </template>
diff --git a/resources/js/views/Admin/AppSettings/AppSettings.vue b/resources/js/views/Admin/AppSettings/AppSettings.vue
index 8e8d5c5f..aa75d080 100644
--- a/resources/js/views/Admin/AppSettings/AppSettings.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettings.vue
@@ -11,7 +11,7 @@
                     <router-link replace :to="{name: 'AppOthers'}"
                                  class="menu-list-item link border-bottom-theme">
                         <div class="icon text-theme">
-                            <settings-icon size="17"></settings-icon>
+                            <settings-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_settings.tabs.others') }}
@@ -21,7 +21,7 @@
                     <router-link replace :to="{name: 'AppAppearance'}"
                                  class="menu-list-item link link border-bottom-theme">
                         <div class="icon text-theme">
-                            <eye-icon size="17"></eye-icon>
+                            <eye-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_settings.tabs.appearance') }}
@@ -31,7 +31,7 @@
                     <router-link v-if="config.isSaaS" replace :to="{name: 'AppBillings'}"
                                  class="menu-list-item link link border-bottom-theme">
                         <div class="icon text-theme">
-                            <file-text-icon size="17"></file-text-icon>
+                            <file-text-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_settings.tabs.billings') }}
@@ -41,7 +41,7 @@
                     <router-link v-if="config.isSaaS" replace :to="{name: 'AppPayments'}"
                                  class="menu-list-item link link border-bottom-theme">
                         <div class="icon text-theme">
-                            <credit-card-icon size="17"></credit-card-icon>
+                            <credit-card-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_settings.tabs.payments') }}
@@ -50,7 +50,7 @@
 
                     <router-link replace :to="{name: 'AppIndex'}" class="menu-list-item link link border-bottom-theme">
                         <div class="icon text-theme">
-                            <home-icon size="17"></home-icon>
+                            <home-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             Homepage
@@ -60,7 +60,7 @@
                     <router-link replace :to="{name: 'AppEmail'}"
                                  class="menu-list-item link link border-bottom-theme">
                         <div class="icon text-theme">
-                            <mail-icon size="17"></mail-icon>
+                            <mail-icon size="17" />
                         </div>
                         <div class="label text-theme">
                             {{ $t('admin_settings.tabs.email') }}
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
index 9e36077e..f6334774 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
@@ -10,7 +10,7 @@
                     <label>{{ $t('admin_settings.appearance.title') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
                         <input @input="$updateText('/admin/settings', 'app_title', app.title)" v-model="app.title" :placeholder="$t('admin_settings.appearance.title_plac')" type="text"
-                               :class="{'is-error': errors[0]}"/>
+                               :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -19,7 +19,7 @@
                     <label>{{ $t('admin_settings.appearance.description') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
                         <input @input="$updateText('/admin/settings', 'app_description', app.description)" v-model="app.description"
-                               :placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'is-error': errors[0]}"/>
+                               :placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
index 155fcf6d..2a285241 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
@@ -11,7 +11,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Name"
                                         rules="required" v-slot="{ errors }">
                         <input @input="$updateText('/admin/settings', 'billing_name', billingInformation.billing_name)" v-model="billingInformation.billing_name" :placeholder="$t('admin_settings.billings.company_name_plac')"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -21,7 +21,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Vat Number"
                                         rules="required" v-slot="{ errors }">
                         <input @input="$updateText('/admin/settings', 'billing_vat_number', billingInformation.billing_vat_number)" v-model="billingInformation.billing_vat_number" :placeholder="$t('admin_settings.billings.vat_plac')"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -42,7 +42,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address"
                                         rules="required" v-slot="{ errors }">
                         <input @input="$updateText('/admin/settings', 'billing_address', billingInformation.billing_address)" v-model="billingInformation.billing_address" :placeholder="$t('admin_settings.billings.address_plac')"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -53,7 +53,7 @@
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City"
                                             rules="required" v-slot="{ errors }">
                             <input @input="$updateText('/admin/settings', 'billing_city', billingInformation.billing_city)" v-model="billingInformation.billing_city" :placeholder="$t('admin_settings.billings.city_plac')"
-                                   type="text" :class="{'is-error': errors[0]}"/>
+                                   type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -62,7 +62,7 @@
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Postal Code"
                                             rules="required" v-slot="{ errors }">
                             <input @input="$updateText('/admin/settings', 'billing_postal_code', billingInformation.billing_postal_code)" v-model="billingInformation.billing_postal_code"
-                                   :placeholder="$t('admin_settings.billings.postal_code_plac')" type="text" :class="{'is-error': errors[0]}"/>
+                                   :placeholder="$t('admin_settings.billings.postal_code_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -73,7 +73,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State"
                                         rules="required" v-slot="{ errors }">
                         <input @input="$updateText('/admin/settings', 'billing_state', billingInformation.billing_state)" v-model="billingInformation.billing_state" :placeholder="$t('admin_settings.billings.state_plac')"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -83,7 +83,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Phone Number"
                                         v-slot="{ errors }">
                         <input @input="$updateText('/admin/settings', 'billing_phone_number', billingInformation.billing_phone_number)" v-model="billingInformation.billing_phone_number" :placeholder="$t('admin_settings.billings.phone_number_plac')"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
index fef6e198..a53a2197 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
@@ -13,7 +13,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_settings.email.driver') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Driver" rules="required" v-slot="{ errors }">
-                        <input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -21,7 +21,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_settings.email.host') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Host" rules="required" v-slot="{ errors }">
-                        <input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -29,7 +29,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_settings.email.port') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Port" rules="required" v-slot="{ errors }">
-                        <input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -37,7 +37,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_settings.email.username') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Username" rules="required" v-slot="{ errors }">
-                        <input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -45,7 +45,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_settings.email.password') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Password" rules="required" v-slot="{ errors }">
-                        <input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
index 4f60d56e..8756988b 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
@@ -33,7 +33,7 @@
                     <div class="block-wrapper">
                         <label>Title:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                            <input @input="$updateText('/admin/settings', 'header_title', app.header_title)" v-model="app.header_title" type="text" :class="{'is-error': errors[0]}"/>
+                            <input @input="$updateText('/admin/settings', 'header_title', app.header_title)" v-model="app.header_title" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -41,7 +41,7 @@
                     <div class="block-wrapper">
                         <label>Description:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                            <textarea @input="$updateText('/admin/settings', 'header_description', app.header_description)" rows="2" v-model="app.header_description" :class="{'is-error': errors[0]}"></textarea>
+                            <textarea @input="$updateText('/admin/settings', 'header_description', app.header_description)" rows="2" v-model="app.header_description" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -73,7 +73,7 @@
                         <div class="block-wrapper">
                             <label>Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'features_title', app.features_title)" v-model="app.features_title" type="text" :class="{'is-error': errors[0]}"/>
+                                <input @input="$updateText('/admin/settings', 'features_title', app.features_title)" v-model="app.features_title" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -81,7 +81,7 @@
                         <div class="block-wrapper">
                             <label>Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'features_description', app.features_description)" rows="2" v-model="app.features_description" :class="{'is-error': errors[0]}"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'features_description', app.features_description)" rows="2" v-model="app.features_description" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -112,42 +112,42 @@
                         <div class="block-wrapper">
                             <label>First Box Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 1" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'feature_title_1', app.feature_title_1)" v-model="app.feature_title_1" type="text" :class="{'is-error': errors[0]}"/>
+                                <input @input="$updateText('/admin/settings', 'feature_title_1', app.feature_title_1)" v-model="app.feature_title_1" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>First Box Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 1" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'feature_description_1', app.feature_description_1)" rows="2" v-model="app.feature_description_1" :class="{'is-error': errors[0]}"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'feature_description_1', app.feature_description_1)" rows="2" v-model="app.feature_description_1" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Second Box Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 2" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'feature_title_2', app.feature_title_2)" v-model="app.feature_title_2" type="text" :class="{'is-error': errors[0]}"/>
+                                <input @input="$updateText('/admin/settings', 'feature_title_2', app.feature_title_2)" v-model="app.feature_title_2" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Second Box Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 2" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'feature_description_2', app.feature_description_2)" rows="2" v-model="app.feature_description_2" :class="{'is-error': errors[0]}"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'feature_description_2', app.feature_description_2)" rows="2" v-model="app.feature_description_2" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Third Box Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 3" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'feature_title_3', app.feature_title_3)" v-model="app.feature_title_3" type="text" :class="{'is-error': errors[0]}"/>
+                                <input @input="$updateText('/admin/settings', 'feature_title_3', app.feature_title_3)" v-model="app.feature_title_3" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Third Box Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 3" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'feature_description_3', app.feature_description_3)" rows="2" v-model="app.feature_description_3" :class="{'is-error': errors[0]}"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'feature_description_3', app.feature_description_3)" rows="2" v-model="app.feature_description_3" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -178,7 +178,7 @@
                         <div class="block-wrapper">
                             <label>Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'pricing_title', app.pricing_title)" v-model="app.pricing_title" type="text" :class="{'is-error': errors[0]}"/>
+                                <input @input="$updateText('/admin/settings', 'pricing_title', app.pricing_title)" v-model="app.pricing_title" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -186,7 +186,7 @@
                         <div class="block-wrapper">
                             <label>Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                            <textarea @input="$updateText('/admin/settings', 'pricing_description', app.pricing_description)" rows="2" v-model="app.pricing_description" :class="{'is-error': errors[0]}"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'pricing_description', app.pricing_description)" rows="2" v-model="app.pricing_description" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -218,7 +218,7 @@
                         <div class="block-wrapper">
                             <label>Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'get_started_title', app.get_started_title)" v-model="app.get_started_title" type="text" :class="{'is-error': errors[0]}"/>
+                                <input @input="$updateText('/admin/settings', 'get_started_title', app.get_started_title)" v-model="app.get_started_title" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -226,7 +226,7 @@
                         <div class="block-wrapper">
                             <label>Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                            <textarea @input="$updateText('/admin/settings', 'get_started_description', app.get_started_description)" rows="2" v-model="app.get_started_description" :class="{'is-error': errors[0]}"></textarea>
+                            <textarea @input="$updateText('/admin/settings', 'get_started_description', app.get_started_description)" rows="2" v-model="app.get_started_description" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -240,7 +240,7 @@
                     <div class="block-wrapper">
                         <label>Footer content:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                            <input @input="$updateText('/admin/settings', 'footer_content', app.footer_content)" v-model="app.footer_content" type="text" :class="{'is-error': errors[0]}"/>
+                            <input @input="$updateText('/admin/settings', 'footer_content', app.footer_content)" v-model="app.footer_content" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
index 5a9d3192..e124eb2c 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
@@ -35,6 +35,7 @@
                                :placeholder="$t('admin_settings.others.default_storage_plac')"
                                type="number"
                                :class="{'is-error': errors[0]}"
+                               class="focus-border-theme"
                         />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
@@ -65,7 +66,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Contact Email"
                                         rules="required" v-slot="{ errors }">
                         <input @input="$updateText('/admin/settings', 'contact_email', app.contactMail)" v-model="app.contactMail"
-                               :placeholder="$t('admin_settings.others.contact_email_plac')" type="email" :class="{'is-error': errors[0]}"/>
+                               :placeholder="$t('admin_settings.others.contact_email_plac')" type="email" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -75,7 +76,7 @@
                                         v-slot="{ errors }">
                         <input @input="$updateText('/admin/settings', 'google_analytics', app.googleAnalytics)" v-model="app.googleAnalytics"
                                :placeholder="$t('admin_settings.others.google_analytics_plac')"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -83,7 +84,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_settings.others.mimetypes_blacklist') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mimetypes Blacklist" v-slot="{ errors }">
-                        <textarea rows="2" @input="$updateText('/admin/settings', 'mimetypes_blacklist', app.mimetypesBlacklist)" v-model="app.mimetypesBlacklist" :placeholder="$t('admin_settings.others.mimetypes_blacklist_plac')" type="text" :class="{'is-error': errors[0]}"/>
+                        <textarea rows="2" @input="$updateText('/admin/settings', 'mimetypes_blacklist', app.mimetypesBlacklist)" v-model="app.mimetypesBlacklist" :placeholder="$t('admin_settings.others.mimetypes_blacklist_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                     <small class="input-help" v-html="$t('admin_settings.others.mimetypes_blacklist_help')"></small>
@@ -92,7 +93,7 @@
                  <div class="block-wrapper">
                     <label>{{ $t('admin_settings.others.upload_limit') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Upload Limit" v-slot="{ errors }">
-                        <input @input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit)" v-model="app.uploadLimit" :placeholder="$t('admin_settings.others.upload_limit_plac')" type="number" min="0" step="1" :class="{'is-error': errors[0]}"/>
+                        <input @input="$updateText('/admin/settings', 'upload_limit', app.uploadLimit)" v-model="app.uploadLimit" :placeholder="$t('admin_settings.others.upload_limit_plac')" type="number" min="0" step="1" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                     <small class="input-help" v-html="$t('admin_settings.others.upload_limit_help')"></small>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
index 6634db1d..00c6cae9 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
@@ -49,7 +49,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_settings.payments.stripe_pub_key') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Publishable Key" rules="required" v-slot="{ errors }">
-                        <input v-model="stripeCredentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="stripeCredentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -57,7 +57,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_settings.payments.stripe_sec_key') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret Key" rules="required" v-slot="{ errors }">
-                        <input v-model="stripeCredentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="stripeCredentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -76,7 +76,7 @@
                 <div class="block-wrapper">
                     <label>Webhook Secret:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook Secret" rules="required" v-slot="{ errors }">
-                        <input v-model="stripeCredentials.webhookSecret" :placeholder="$t('admin_settings.payments.stripe_webhook_key_plac')" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="stripeCredentials.webhookSecret" :placeholder="$t('admin_settings.payments.stripe_webhook_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/Admin/Pages/PageEdit.vue b/resources/js/views/Admin/Pages/PageEdit.vue
index 48157bd3..0606af55 100644
--- a/resources/js/views/Admin/Pages/PageEdit.vue
+++ b/resources/js/views/Admin/Pages/PageEdit.vue
@@ -27,7 +27,7 @@
                         <label>{{ $t('admin_pages.form.title') }}:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
                             <input @input="$updateText('/admin/pages/' + $route.params.slug, 'title', page.data.attributes.title)" v-model="page.data.attributes.title"
-                                   :placeholder="$t('admin_pages.form.title_plac')" type="text" :class="{'is-error': errors[0]}"/>
+                                   :placeholder="$t('admin_pages.form.title_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -47,6 +47,7 @@
                                     v-model="page.data.attributes.content"
                                     :placeholder="$t('admin_pages.form.content_plac')"
                                     :class="{'is-error': errors[0]}"
+                                    class="focus-border-theme"
                                     rows="18"
                             ></textarea>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
diff --git a/resources/js/views/Admin/Plans/PlanCreate.vue b/resources/js/views/Admin/Plans/PlanCreate.vue
index 286140dc..168ea31f 100644
--- a/resources/js/views/Admin/Plans/PlanCreate.vue
+++ b/resources/js/views/Admin/Plans/PlanCreate.vue
@@ -16,7 +16,7 @@
                         <div class="block-wrapper">
                             <label>{{ $t('admin_page_plans.form.name') }}:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
-                                <input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}"/>
+                                <input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -25,7 +25,7 @@
                         <div class="block-wrapper">
                             <label>{{ $t('admin_page_plans.form.description') }}:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
-                                <textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}"></textarea>
+                                <textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -40,7 +40,7 @@
                             <label>{{ $t('admin_page_plans.form.price') }}:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Plan price" rules="required" v-slot="{ errors }">
                                 <input v-model="plan.price" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="999999999999"
-                                       :class="{'is-error': errors[0]}"/>
+                                       :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -50,7 +50,7 @@
                             <label>{{ $t('admin_page_plans.form.storage') }}:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage capacity" rules="required" v-slot="{ errors }">
                                 <input v-model="plan.capacity" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999"
-                                       :class="{'is-error': errors[0]}"/>
+                                       :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                             <small class="input-help">
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue
index 4504b55a..18d4899d 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanDelete.vue
@@ -11,7 +11,7 @@
                 <ValidationProvider tag="div" class="block-wrapper" v-slot="{ errors }" mode="passive" name="Plan name" :rules="'required|is:' + plan.attributes.name">
                     <label>{{ $t('admin_page_user.label_delete_user', {user: plan.attributes.name}) }}:</label>
                     <div class="single-line-form">
-                        <input v-model="planName" :placeholder="$t('admin_page_plans.form.name_delete_plac')" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="planName" :placeholder="$t('admin_page_plans.form.name_delete_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
                         <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
                             {{ $t('admin_page_plans.delete_plan_button') }}
                         </ButtonBase>
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
index 54a6c60e..f2f9979a 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
@@ -23,7 +23,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_page_plans.form.name') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name" rules="required" v-slot="{ errors }">
-                        <input @input="$updateText('/admin/plans/' + $route.params.id, 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}"/>
+                        <input @input="$updateText('/admin/plans/' + $route.params.id, 'name', plan.attributes.name)" v-model="plan.attributes.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -32,7 +32,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_page_plans.form.description') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description" v-slot="{ errors }">
-                        <textarea @input="$updateText('/admin/plans/' + $route.params.id, 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}"></textarea>
+                        <textarea @input="$updateText('/admin/plans/' + $route.params.id, 'description', plan.attributes.description)" v-model="plan.attributes.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}" class="focus-border-theme"></textarea>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -41,7 +41,7 @@
                 <div class="block-wrapper">
                     <label>{{ $t('admin_page_plans.form.storage') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Storage capacity" rules="required" v-slot="{ errors }">
-                        <input @input="$updateText('/admin/plans/' + $route.params.id, 'capacity', plan.attributes.capacity)" v-model="plan.attributes.capacity" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}"/>
+                        <input @input="$updateText('/admin/plans/' + $route.params.id, 'capacity', plan.attributes.capacity)" v-model="plan.attributes.capacity" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}" class="focus-border-theme"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                     <small class="input-help">
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
index d7e6b0ea..463a42f6 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanSubscribers.vue
@@ -23,10 +23,10 @@
                         <td>
                             <div class="action-icons">
                                 <router-link :to="{name: 'UserDetail', params: {id: row.data.id}}">
-                                    <edit-2-icon size="15" class="icon icon-edit"></edit-2-icon>
+                                    <edit-2-icon size="15" class="icon icon-edit" />
                                 </router-link>
                                 <router-link :to="{name: 'UserDelete', params: {id: row.data.id}}">
-                                    <trash2-icon size="15" class="icon icon-trash"></trash2-icon>
+                                    <trash2-icon size="15" class="icon icon-trash" />
                                 </router-link>
                             </div>
                         </td>
diff --git a/resources/js/views/Admin/Users/User.vue b/resources/js/views/Admin/Users/User.vue
index f3959f97..65a808e2 100644
--- a/resources/js/views/Admin/Users/User.vue
+++ b/resources/js/views/Admin/Users/User.vue
@@ -24,57 +24,57 @@
 
                 <!--Page Tab links-->
                 <div class="menu-list-wrapper horizontal">
-                    <router-link replace :to="{name: 'UserDetail'}" class="menu-list-item link">
-                        <div class="icon">
+                    <router-link replace :to="{name: 'UserDetail'}" class="menu-list-item link border-bottom-theme">
+                        <div class="icon text-theme">
                             <user-icon size="17"></user-icon>
                         </div>
-                        <div class="label">
+                        <div class="label text-theme">
                             {{ $t('admin_page_user.tabs.detail') }}
                         </div>
                     </router-link>
 
-                    <router-link replace :to="{name: 'UserStorage'}" class="menu-list-item link">
-                        <div class="icon">
+                    <router-link replace :to="{name: 'UserStorage'}" class="menu-list-item link border-bottom-theme">
+                        <div class="icon text-theme">
                             <hard-drive-icon size="17"></hard-drive-icon>
                         </div>
-                        <div class="label">
+                        <div class="label text-theme">
                             {{ $t('admin_page_user.tabs.storage') }}
                         </div>
                     </router-link>
 
-                    <router-link v-if="config.isSaaS" replace :to="{name: 'UserSubscription'}" class="menu-list-item link">
-                        <div class="icon">
+                    <router-link v-if="config.isSaaS" replace :to="{name: 'UserSubscription'}" class="menu-list-item link border-bottom-theme">
+                        <div class="icon text-theme">
                             <credit-card-icon size="17"></credit-card-icon>
                         </div>
-                        <div class="label">
+                        <div class="label text-theme">
                             {{ $t('admin_page_user.tabs.subscription') }}
                         </div>
                     </router-link>
 
-                    <router-link v-if="config.isSaaS" replace :to="{name: 'UserInvoices'}" class="menu-list-item link">
-                        <div class="icon">
+                    <router-link v-if="config.isSaaS" replace :to="{name: 'UserInvoices'}" class="menu-list-item link border-bottom-theme">
+                        <div class="icon text-theme">
                             <file-text-icon size="17"></file-text-icon>
                         </div>
-                        <div class="label">
+                        <div class="label text-theme">
                             {{ $t('admin_page_user.tabs.invoices') }}
                         </div>
                     </router-link>
 
-                    <router-link replace :to="{name: 'UserPassword'}" class="menu-list-item link">
-                        <div class="icon">
+                    <router-link replace :to="{name: 'UserPassword'}" class="menu-list-item link border-bottom-theme">
+                        <div class="icon text-theme">
                             <lock-icon size="17"></lock-icon>
                         </div>
-                        <div class="label">
+                        <div class="label text-theme">
                             {{ $t('admin_page_user.tabs.password') }}
                         </div>
                     </router-link>
 
                     <router-link replace :to="{name: 'UserDelete'}" v-if="user.data.relationships.settings.data.attributes.name !== admin.name"
-                                 class="menu-list-item link">
-                        <div class="icon">
+                                 class="menu-list-item link border-bottom-theme">
+                        <div class="icon text-theme">
                             <trash2-icon size="17"></trash2-icon>
                         </div>
-                        <div class="label">
+                        <div class="label text-theme">
                             {{ $t('admin_page_user.tabs.delete') }}
                         </div>
                     </router-link>
diff --git a/resources/js/views/Admin/Users/UserCreate.vue b/resources/js/views/Admin/Users/UserCreate.vue
index bf1392fd..5be19bc7 100644
--- a/resources/js/views/Admin/Users/UserCreate.vue
+++ b/resources/js/views/Admin/Users/UserCreate.vue
@@ -22,7 +22,7 @@
                         <div class="block-wrapper">
                             <label>{{ $t('page_registration.label_email') }}</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
-                                <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" :class="{'is-error': errors[0]}"/>
+                                <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -31,7 +31,7 @@
                         <div class="block-wrapper">
                             <label>{{ $t('page_registration.label_name') }}</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="user name" rules="required" v-slot="{ errors }">
-                                <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" :class="{'is-error': errors[0]}"/>
+                                <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -41,7 +41,7 @@
                             <div class="block-wrapper">
                                 <label>{{ $t('page_registration.label_pass') }}</label>
                                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password" rules="required" v-slot="{ errors }">
-                                    <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" :class="{'is-error': errors[0]}"/>
+                                    <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
                                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                                 </ValidationProvider>
                             </div>
@@ -49,7 +49,7 @@
                             <div class="block-wrapper">
                                 <label>{{ $t('page_registration.label_confirm_pass') }}</label>
                                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="password confirm" rules="required" v-slot="{ errors }">
-                                    <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" :class="{'is-error': errors[0]}"/>
+                                    <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
                                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                                 </ValidationProvider>
                             </div>
@@ -72,7 +72,7 @@
                         <div class="block-wrapper">
                             <label>{{ $t('admin_page_user.label_change_capacity') }}</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="storage capacity" rules="required" v-slot="{ errors }">
-                                <input v-model="user.storage_capacity" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" :class="{'is-error': errors[0]}"/>
+                                <input v-model="user.storage_capacity" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme" :class="{'is-error': errors[0]}"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
index f13df100..7004f812 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
@@ -12,6 +12,7 @@
                         <input v-model="userName"
                                :placeholder="$t('admin_page_user.placeholder_delete_user')"
                                type="text"
+                               class="focus-border-theme"
                                :class="{'is-error': errors[0]}"
                         />
                         <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit"
diff --git a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
index ae4ffbcb..9ca8d411 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
@@ -17,6 +17,7 @@
                                type="number"
                                min="1"
                                max="999999999"
+                               class="focus-border-theme"
                                :class="{'is-error': errors[0]}"
                         />
                         <ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
diff --git a/resources/js/views/Mobile/AdminMobileMenu.vue b/resources/js/views/Mobile/AdminMobileMenu.vue
index 16726926..8864c4f0 100644
--- a/resources/js/views/Mobile/AdminMobileMenu.vue
+++ b/resources/js/views/Mobile/AdminMobileMenu.vue
@@ -14,8 +14,8 @@
                     <MenuItemList :navigation="AdminNavigation" />
 
                     <!--SaaS menu-->
-                    <b class="mobile-menu-label">{{ $t('global.saas') }}</b>
-                    <MenuItemList :navigation="SassNavigation" />
+                    <b v-if="config.isSaaS" class="mobile-menu-label">{{ $t('global.saas') }}</b>
+                    <MenuItemList v-if="config.isSaaS" :navigation="SassNavigation" />
                 </nav>
             </div>
         </div>
@@ -33,6 +33,9 @@
             MenuItemList,
             MobileHeader,
         },
+        computed: {
+            ...mapGetters(['config']),
+        },
         data() {
             return {
                 AdminNavigation: [
@@ -54,6 +57,12 @@
                         routeName: 'AppOthers',
                         isVisible: true,
                     },
+                    {
+                        icon: 'monitor',
+                        title: this.$t('admin_menu.pages'),
+                        routeName: 'Pages',
+                        isVisible: true,
+                    },
                 ],
                 SassNavigation: [
                     {
@@ -68,12 +77,6 @@
                         routeName: 'Invoices',
                         isVisible: true,
                     },
-                    {
-                        icon: 'monitor',
-                        title: this.$t('admin_menu.pages'),
-                        routeName: 'Pages',
-                        isVisible: true,
-                    },
                 ]
             }
         },
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index fa48fe18..ef8d95ce 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -31,62 +31,7 @@
     <meta name="format-detection" content="telephone=no">
     <meta name="format-detection" content="address=no">
 
-    <style>
-        .svg-color-theme {fill: #FF8200}
-
-        .svg-stroke-theme {stroke: #FF8200}
-        .hover-svg-stroke-theme:hover {stroke: #FF8200}
-
-        .hover-svg-stroke-theme:hover rect {stroke: #FF8200}
-        .hover-svg-stroke-theme:hover line {stroke: #FF8200}
-
-        .bg-theme {background: #FF8200}
-        .bg-theme-50 {background: #FF820005}
-        .bg-theme-100 {background: #FF820010}
-        .bg-theme-800 {background: #FF820080}
-        .hover-bg-theme:hover {background: #FF8200}
-
-        .text-theme {color: #FF8200}
-        .hover-text-theme:hover {color: #FF8200}
-
-        .shadow-theme {box-shadow: 0 7px 16px 2px #FF820040}
-
-        .border-theme {border-color: #FF8200}
-        .hover-border-theme:hover {border-color: #FF8200}
-
-        .focus-border-theme:focus {border-color: #FF8200}
-        .focus-border-theme:focus[type='email'] {border-color: #FF8200}
-        .focus-border-theme:focus[type='text'] {border-color: #FF8200}
-        .focus-border-theme:focus[type='password'] {border-color: #FF8200}
-        .focus-border-theme:focus[type='password'] {border-color: #FF8200}
-
-        /* Menubar */
-        .router-link-active.home .button-icon {background: #FF820010}
-
-        /*Content Panel*/
-        .router-link-active .text-theme {color: #FF8200 !important}
-        .router-link-active .text-theme svg {color: #FF8200 !important}
-        .router-link-active.border-bottom-theme {border-bottom-color: #FF8200 !important;}
-
-        .is-active .text-theme {color: #FF8200 !important}
-        .is-active .text-theme svg {color: #FF8200 !important}
-
-        .menu-list-item.link:hover {color: #FF8200}
-        .menu-list-item.link:hover .text-theme svg {color: #FF8200}
-
-        /*Select Input*/
-        .input-area.is-active {border-color: #FF8200 !important}
-
-        /*ButtonBase*/
-        .button-base.theme {background: #FF820010}
-        .button-base.theme .content {color: #FF8200}
-        .button-base.theme polyline,
-        .button-base.theme path {
-            color: #FF8200
-        }
-
-        .switch.active {background: #FF8200 !important;}
-    </style>
+    @include('vuefilemanager.others.color-template')
 </head>
 <body>
 <div id="app"></div>
diff --git a/resources/views/vuefilemanager/others/color-template.blade.php b/resources/views/vuefilemanager/others/color-template.blade.php
new file mode 100644
index 00000000..e916a3db
--- /dev/null
+++ b/resources/views/vuefilemanager/others/color-template.blade.php
@@ -0,0 +1,73 @@
+<style>
+
+        {{-- Group options --}}
+        .group:hover .group-hover-text-theme {color: #FF8200}
+
+        {{-- Single option --}}
+        .svg-color-theme {fill: #FF8200}
+
+        .svg-stroke-theme {stroke: #FF8200}
+        .hover-svg-stroke-theme:hover {stroke: #FF8200}
+
+        .hover-svg-stroke-theme:hover rect {stroke: #FF8200}
+        .hover-svg-stroke-theme:hover line {stroke: #FF8200}
+
+        .bg-theme {background: #FF8200}
+        .bg-theme-50 {background: #FF820005}
+        .bg-theme-100 {background: #FF820010}
+        .bg-theme-800 {background: #FF820080}
+        .hover-bg-theme:hover {background: #FF8200}
+
+        .text-theme {color: #FF8200}
+        .hover-text-theme:hover {color: #FF8200}
+
+        .shadow-theme {box-shadow: 0 7px 16px 2px #FF820040}
+
+        .border-theme {border-color: #FF8200}
+        .border-top-theme {border-top-color: #FF8200 !important;}
+        .border-left-theme {border-left-color: #FF8200 !important;}
+        .hover-border-theme:hover {border-color: #FF8200}
+
+        .focus-within-border-theme:focus-within {border-color: #FF8200 !important;}
+
+        .focus-border-theme:focus {border-color: #FF8200}
+        .focus-border-theme:focus[type='email'] {border-color: #FF8200}
+        .focus-border-theme:focus[type='text'] {border-color: #FF8200}
+        .focus-border-theme:focus[type='password'] {border-color: #FF8200}
+        .focus-border-theme:focus[type='number'] {border-color: #FF8200}
+
+        {{-- Global Active Class --}}
+        .active.active-bg-theme-100 {background: #FF820010 !important;}
+        .active.active-border-theme {border-color: #FF8200 !important;}
+        .active .active-text-theme {color: #FF8200}
+
+        {{-- Emoji Picker --}}
+        .active-menu.focus-border-theme {border-color: #FF8200 !important;}
+
+        {{-- Menubar --}}
+        .router-link-active.home .button-icon {background: #FF820010}
+
+        {{-- Content Panel --}}
+        .router-link-active .text-theme {color: #FF8200 !important}
+        .router-link-active .text-theme svg {color: #FF8200 !important}
+        .router-link-active.border-bottom-theme {border-bottom-color: #FF8200 !important;}
+
+        .is-active .text-theme {color: #FF8200 !important}
+        .is-active .text-theme svg {color: #FF8200 !important}
+
+        .menu-list-item.link:hover {color: #FF8200}
+        .menu-list-item.link:hover .text-theme svg {color: #FF8200}
+
+        {{-- Select Input --}}
+        .input-area.is-active {border-color: #FF8200 !important}
+
+        {{-- ButtonBase --}}
+        .button-base.theme {background: #FF820010}
+        .button-base.theme .content {color: #FF8200}
+        .button-base.theme polyline,
+        .button-base.theme path {
+            color: #FF8200
+        }
+
+        .switch.active {background: #FF8200 !important;}
+    </style>
\ No newline at end of file