fixed

frontend/src/app/components/checkbox/styles.module.css

@@ -1,7 +1,6 @@
 .switch {
   display: flex;
   width: 53px;
-
   height: 33px;
   align-items: center;
   background-color: white;
@@ -16,8 +15,6 @@
 .check {
   display: none;
 }
-
-/* The knob (replaces ::before) */
 .knob {
   width: 25px;
   height: 25px;
@@ -29,7 +26,7 @@
 
   transition: all 0.15s ease-in-out;
 }
-.knob:hover {
+.switch:hover > .knob {
   box-shadow: 0 0 0px 5px #33333327;
   background-color: #333;
 }

frontend/src/app/components/select/SelectField.jsx

@@ -30,7 +30,7 @@ const SelectField = ({ label, options, ...props }) => {
   return (
     <div
       ref={selectRef}
-      className={styles.select}
+      className={`${styles.select} ${showOptions ? styles.isFocused : ""}`}
       onClick={() => setShowOptions(!showOptions)}
       {...props}
     >

frontend/src/app/components/select/styles.module.css

@@ -32,12 +32,16 @@
   width: 100%;
   left: 0;
   border-radius: 6px;
-  border: 1px solid #353a4c;
+  border: 1px solid #4e5474;
   background: #282b39;
   animation-name: showDD;
   animation-duration: 200ms;
   z-index: 20;
 }
+.isFocused {
+  border: 1px solid #969af9;
+  background: #282b39;
+}
 
 @keyframes showDD {
   0% {