diff --git a/components/core/Toggle/Toggle.tsx b/components/core/Toggle/Toggle.tsx
index 283aa4ad1..25b918d79 100644
--- a/components/core/Toggle/Toggle.tsx
+++ b/components/core/Toggle/Toggle.tsx
@@ -20,19 +20,19 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
         tabIndex={0}
         className={`${
           checked ? 'bg-gray-800' : 'bg-gray-200'
-        } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:shadow-outline`}
+        } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-150 focus:outline-none focus:shadow-outline`}
       >
         <span
           aria-hidden="true"
           className={`${
             checked ? 'translate-x-5' : 'translate-x-0'
-          } translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-200`}
+          } translate-x-0 relative inline-block h-5 w-5 rounded-full bg-white shadow transform transition ease-in-out duration-150`}
         >
           <span
             className={`${
               checked
                 ? 'opacity-0 ease-out duration-150'
-                : 'opacity-100 ease-in duration-200'
+                : 'opacity-100 ease-in duration-150'
             } absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >
             <HiSun className="h-3 w-3 text-gray-400" />
@@ -40,7 +40,7 @@ const Toggle: FC<Props> = ({ className, checked, onChange }) => {
           <span
             className={`${
               checked
-                ? 'opacity-100 ease-in duration-200'
+                ? 'opacity-100 ease-in duration-150'
                 : 'opacity-0 ease-out duration-150'
             } opacity-0 ease-out duration-150 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`}
           >