diff --git a/assets/scss/common/_custom.scss b/assets/scss/common/_custom.scss
index 29b3d03d0775f19af3965c7b083454febe6f96e5..5c5401acbe4ad5fb750dacb9e7274720b406a96a 100644
--- a/assets/scss/common/_custom.scss
+++ b/assets/scss/common/_custom.scss
@@ -34,6 +34,25 @@
   }
 
 }
-[data-bs-theme="dark"] .offcanvas .nav-link:hover, [data-bs-theme="dark"] .offcanvas .banner .nav a:hover, .banner .nav [data-bs-theme="dark"] .offcanvas a:hover, [data-bs-theme="dark"] .offcanvas .nav-link:focus, [data-bs-theme="dark"] .offcanvas .banner .nav a:focus, .banner .nav [data-bs-theme="dark"] .offcanvas a:focus{
+
+// color on link:hover dark & light mode
+.offcanvas .nav-link:hover, .offcanvas .banner .nav a:hover, .banner .nav .offcanvas a:hover, .offcanvas .nav-link:focus, .offcanvas .banner .nav a:focus, .banner .nav .offcanvas a:focus {
   color: $tetra-green;
 }
+
+//color button top right light mode
+[data-bs-theme="dark"] .search-form .form-control:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="text"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="text"]:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="email"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="email"]:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="url"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="url"]:focus, [data-bs-theme="dark"] .search-form .comment-form textarea:focus, .comment-form [data-bs-theme="dark"] .search-form textarea:focus, [data-bs-theme="dark"] .search-form .search-field:focus{
+  color: $tetra-green
+}
+
+// color button on click dark & light mode
+.btn-check:checked + .btn, .search-form .btn-check:checked + .search-submit, .comment-form .btn-check:checked + input[type="submit"], :not(.btn-check) + .btn:active, .search-form :not(.btn-check) + .search-submit:active, .comment-form :not(.btn-check) + input[type="submit"]:active, .btn:first-child:active, .search-form .search-submit:first-child:active, .comment-form input[type="submit"]:first-child:active, .btn.active, .search-form .active.search-submit, .comment-form input.active[type="submit"], .btn.show, .search-form .show.search-submit, .comment-form input.show[type="submit"]{
+  color: black;
+  background-color: $tetra-green;
+  border-color: $tetra-green;
+}
+
+//color field on focus dark & light mode
+[data-bs-theme="dark"] .search-form .form-control:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="text"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="text"]:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="email"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="email"]:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="url"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="url"]:focus, [data-bs-theme="dark"] .search-form .comment-form textarea:focus, .comment-form [data-bs-theme="dark"] .search-form textarea:focus, [data-bs-theme="dark"] .search-form .search-field:focus{
+  border-color: $tetra-green;
+}
diff --git a/resources/_gen/assets/scss/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.content b/resources/_gen/assets/scss/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.content
index 8f2df5fbc79c8803414e24da0c9ea1c1307ae10e..2369e83817253bf8929b4f325327f7c6c927c7a1 100644
--- a/resources/_gen/assets/scss/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.content
+++ b/resources/_gen/assets/scss/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.content
@@ -13629,7 +13629,18 @@ body {
 [data-bs-theme="light"] a {
   color: #5a8264; }
 
-[data-bs-theme="dark"] .offcanvas .nav-link:hover, [data-bs-theme="dark"] .offcanvas .banner .nav a:hover, .banner .nav [data-bs-theme="dark"] .offcanvas a:hover, [data-bs-theme="dark"] .offcanvas .nav-link:focus, [data-bs-theme="dark"] .offcanvas .banner .nav a:focus, .banner .nav [data-bs-theme="dark"] .offcanvas a:focus {
+.offcanvas .nav-link:hover, .offcanvas .banner .nav a:hover, .banner .nav .offcanvas a:hover, .offcanvas .nav-link:focus, .offcanvas .banner .nav a:focus, .banner .nav .offcanvas a:focus {
   color: #5a8264; }
 
+[data-bs-theme="dark"] .search-form .form-control:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="text"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="text"]:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="email"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="email"]:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="url"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="url"]:focus, [data-bs-theme="dark"] .search-form .comment-form textarea:focus, .comment-form [data-bs-theme="dark"] .search-form textarea:focus, [data-bs-theme="dark"] .search-form .search-field:focus {
+  color: #5a8264; }
+
+.btn-check:checked + .btn, .search-form .btn-check:checked + .search-submit, .comment-form .btn-check:checked + input[type="submit"], :not(.btn-check) + .btn:active, .search-form :not(.btn-check) + .search-submit:active, .comment-form :not(.btn-check) + input[type="submit"]:active, .btn:first-child:active, .search-form .search-submit:first-child:active, .comment-form input[type="submit"]:first-child:active, .btn.active, .search-form .active.search-submit, .comment-form input.active[type="submit"], .btn.show, .search-form .show.search-submit, .comment-form input.show[type="submit"] {
+  color: black;
+  background-color: #5a8264;
+  border-color: #5a8264; }
+
+[data-bs-theme="dark"] .search-form .form-control:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="text"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="text"]:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="email"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="email"]:focus, [data-bs-theme="dark"] .search-form .comment-form input[type="url"]:focus, .comment-form [data-bs-theme="dark"] .search-form input[type="url"]:focus, [data-bs-theme="dark"] .search-form .comment-form textarea:focus, .comment-form [data-bs-theme="dark"] .search-form textarea:focus, [data-bs-theme="dark"] .search-form .search-field:focus {
+  border-color: #5a8264; }
+
 /*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/resources/_gen/assets/scss/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.json b/resources/_gen/assets/scss/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.json
index 9cff220ec729018cf1acc5295546426ef4b80be5..71e93515ed1d322a8edd3fd715cd01937a4ceb24 100644
--- a/resources/_gen/assets/scss/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.json
+++ b/resources/_gen/assets/scss/scss/app.scss_901a6e181e810c5c7347a10d84f037ab.json
@@ -1 +1 @@
-{"Target":"main.ba92b35bdf68e4f4e1c8efbfb2ed96daa13867276af4ad9e8a2332810892eca394025bb156c46735424575214851416b22332b058703e8d669de9e0a9ec20252.css","MediaType":"text/css","Data":{"Integrity":"sha512-upKzW99o5PThyO+/su2W2qE4Zydq9K2eiiMygQiS7KOUAluxVsRnNUJFdSFIUUFrIjMrBYcD6NZp3p4KnsICUg=="}}
\ No newline at end of file
+{"Target":"main.9471088ab064e6d11e5d5ab0403f64c62319e3baabc087b13bb1d43933091604fa64e8c8bd7f2a2ba62477cb6d782072dbd39d5376604c8324eec5d14f7c88e0.css","MediaType":"text/css","Data":{"Integrity":"sha512-lHEIirBk5tEeXVqwQD9kxiMZ47qrwIexO7HUOTMJFgT6ZOjIvX8qK6Ykd8tteCBy29OdU3ZgTIMk7sXRT3yI4A=="}}
\ No newline at end of file