Hello @Haarolean 

https://user-images.githubusercontent.com/55583718/234350864-01cfaee5-f812-46aa-8060-9c8c1d874bad.mov

I made the changes according to Figma File. Is this acceptable? @inanc-can looks nice, please raise a PR :)
UI: Refactor the toggle component
<img width="213" alt="image" src="https://user-images.githubusercontent.com/1494347/232467567-5c09bd3d-c138-4ed7-bca8-8813e6e25d28.png">
<img width="210" alt="image" src="https://user-images.githubusercontent.com/1494347/232467822-b67ece0a-5c73-4168-8965-209ddd1a5130.png">
The toggle state in the current implementation of the component is hardly distinguishable between "off" and "on".
Implement the new one: https://www.figma.com/file/ZkvysdRUmt9p2PDNU3a9WU/Kafka-UI?node-id=2051-6715&t=nOA9ZBMnJjZxRvZk-0
kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts kafka-ui-react-app/src/theme/theme.ts
kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts kafka-ui-react-app/src/theme/theme.ts
diff --git a/kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts b/kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts
index 88239280594..0f4f2c1d11c 100644
--- a/kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts
+++ b/kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts
@@ -39,6 +39,10 @@ export const StyledSlider = styled.span<Props>`
   transition: 0.4s;
   border-radius: 20px;
 
+  :hover {
+    background-color: ${({ theme }) => theme.switch.hover};
+  }
+
   &::before {
     position: absolute;
     content: '';
diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts
index 33dbf1c619e..ea833814221 100644
--- a/kafka-ui-react-app/src/theme/theme.ts
+++ b/kafka-ui-react-app/src/theme/theme.ts
@@ -235,12 +235,13 @@ const baseTheme = {
     color: Colors.neutral[90],
   },
   switch: {
-    unchecked: Colors.brand[30],
+    unchecked: Colors.neutral[20],
+    hover: Colors.neutral[40],
     checked: Colors.brand[50],
     circle: Colors.neutral[0],
     disabled: Colors.neutral[10],
     checkedIcon: {
-      backgroundColor: Colors.neutral[70],
+      backgroundColor: Colors.neutral[10],
     },
   },
   pageLoader: {
