diff --git a/src/form/Toggle/Toggle.story.tsx b/src/form/Toggle/Toggle.story.tsx
index 253ea5d3..44cb5d33 100644
--- a/src/form/Toggle/Toggle.story.tsx
+++ b/src/form/Toggle/Toggle.story.tsx
@@ -11,10 +11,15 @@ export const Simple = () => {
   return <Toggle checked={state} onChange={setState} />;
 };
 
-export const Disabled = () => {
-  const [state, setState] = useState(true);
-  return <Toggle disabled checked={state} onChange={setState} />;
-};
+export const Disabled = () => (
+  <div
+    className="bg-panel p-20"
+    style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}
+  >
+    <Toggle disabled checked />
+    <Toggle disabled checked={false} />
+  </div>
+);
 
 export const Sizes = () => {
   const [stateSmall, setStateSmall] = useState(true);
diff --git a/src/form/Toggle/Toggle.tsx b/src/form/Toggle/Toggle.tsx
index 024f3f1a..36c0d3b3 100644
--- a/src/form/Toggle/Toggle.tsx
+++ b/src/form/Toggle/Toggle.tsx
@@ -1,8 +1,7 @@
 import React, { FC, forwardRef, LegacyRef } from 'react';
 import { motion } from 'framer-motion';
-import { twMerge } from 'tailwind-merge';
 import { ToggleTheme } from './ToggleTheme';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 
 export interface ToggleProps {
   /**
@@ -66,11 +65,14 @@ export const Toggle: FC<ToggleProps & ToggleRef> = forwardRef(
         {...rest}
         ref={ref}
         tabIndex={0}
-        className={twMerge(
+        className={cn(
           theme.base,
-          disabled && theme.disabled,
-          checked && theme.checked,
           theme.sizes[size],
+          {
+            [theme.checked]: checked,
+            [theme.disabled]: disabled,
+            [theme.disabledAndChecked]: disabled && checked
+          },
           className
         )}
         onClick={() => {
@@ -86,7 +88,10 @@ export const Toggle: FC<ToggleProps & ToggleRef> = forwardRef(
         }}
       >
         <motion.div
-          className={twMerge(theme.handle.base, theme.handle.sizes[size])}
+          className={cn(theme.handle.base, theme.handle.sizes[size], {
+            [theme.handle.disabled]: disabled,
+            [theme.handle.disabledAndChecked]: disabled && checked
+          })}
           layout
           transition={{
             type: 'spring',
diff --git a/src/form/Toggle/ToggleTheme.ts b/src/form/Toggle/ToggleTheme.ts
index 6f477eca..bc040766 100644
--- a/src/form/Toggle/ToggleTheme.ts
+++ b/src/form/Toggle/ToggleTheme.ts
@@ -2,6 +2,7 @@ export interface ToggleTheme {
   base: string;
   disabled: string;
   checked: string;
+  disabledAndChecked: string;
   handle: {
     base: string;
     sizes: {
@@ -9,6 +10,8 @@ export interface ToggleTheme {
       medium: string;
       large: string;
     };
+    disabled: string;
+    disabledAndChecked: string;
   };
   sizes: {
     small: string;
@@ -18,16 +21,20 @@ export interface ToggleTheme {
 }
 
 const baseTheme: ToggleTheme = {
-  base: 'flex items-center justify-start cursor-pointer bg-surface box-border border border-panel-accent rounded-full',
-  disabled: 'cursor-not-allowed opacity-60',
+  base: 'flex items-center justify-start cursor-pointer bg-surface box-border border border-panel-accent rounded-full hover:bg-primary-hover transition-[background-color] ease-in-out duration-300',
+  disabled: 'cursor-not-allowed bg-transparent hover:bg-transparent',
   checked: 'justify-end bg-primary',
+  disabledAndChecked:
+    'bg-secondary-inactive hover:bg-secondary-inactive light:bg-gray-400 light:hover:bg-gray-400',
   handle: {
     base: 'rounded-full bg-panel',
     sizes: {
       small: 'w-3 h-full',
       medium: 'w-5 h-full',
       large: 'w-6 h-full'
-    }
+    },
+    disabled: 'bg-secondary-inactive light:bg-gray-400',
+    disabledAndChecked: 'bg-black light:bg-white'
   },
   sizes: {
     small: 'w-8 h-4 p-px',