diff --git a/package.json b/package.json
index 6f016cb7..876fc087 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "million": "latest",
-    "motion": "^10.17.0",
+    "motion": "^10.18.0",
     "publish-browser-extension": "^2.2.1",
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "3.0.5",
diff --git a/src/svelte-interface/components/Switch.svelte b/src/svelte-interface/components/Switch.svelte
index 507c34e9..f97dfa51 100644
--- a/src/svelte-interface/components/Switch.svelte
+++ b/src/svelte-interface/components/Switch.svelte
@@ -3,7 +3,6 @@
   import { onMount } from "svelte";
 
   let { state, onChange } = $props<{ state: boolean, onChange: (newState: boolean) => void }>();
-
   let handle: HTMLElement | null = null;
 
   const toggleSwitch = () => {
@@ -11,20 +10,22 @@
   };
 
   const springParams = {
-    stiffness: 700,
+    stiffness: 600,
     damping: 30,
   };
 
   const animateSwitch = (enabled: boolean) => {
-    if (handle) {
-      animate(
-        handle,
-        { x: enabled ? 20 : 0 },
-        {
-          easing: spring(springParams),
-        }
-      );
-    }
+    if (!handle) return;
+    animate(
+      handle,
+      {
+        x: enabled ? 20 : 0,
+        scaleX: [1, 2, 1]
+      },
+      {
+        easing: spring(springParams),
+      }
+    );
   };
 
   // Trigger animation whenever state changes