diff --git a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss
index 8ffab88b..c3ee8700 100644
--- a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss
+++ b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.module.scss
@@ -10,17 +10,44 @@
   padding: 4px;
   border-radius: 31px;
   border: 1px solid var(--border, #42424C);
+  position: relative;
+  overflow: hidden;
+}
+
+.slidingBackground {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: calc(50% - 4px);
+  height: calc(100% - 8px);
+  background: rgb(44 203 229 / 60%);
+  border-radius: 16px;
+  transition: left 0.2s ease;
+  z-index: 1;
+
+  &[data-active="final"] {
+    left: calc(50% + 4px);
+  }
+
+  &[data-active="live"] {
+    left: 4px;
+  }
 }
 
 .switchOption {
   padding: 6px 12px;
   border-radius: 16px;
   cursor: pointer;
-  transition: background 0.3s ease;
+  transition: color 0.2s ease;
   color: #b0b0b0;
+  position: relative;
+  z-index: 2;
+  user-select: none;
+  flex: 1;
+  text-align: center;
+  min-width: 0;
 }
 
 .selected {
-  background: rgb(44 203 229 / 60%);
   color: white;
 }
diff --git a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.tsx b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.tsx
index b9c68e69..1cf4043d 100644
--- a/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.tsx
+++ b/frontend/src/common/ui-components/common/ToggleSwitch/ToggleSwitch.tsx
@@ -11,6 +11,7 @@ const ToggleSwitch = ({ title, activeTab, setActiveTab }: IToggleSwitchProps) =>
     <div className={styles.firstRowWrapper}>
       <h1>{title}</h1>
       <div className={styles.switchWrapper}>
+        <div className={styles.slidingBackground} data-active={activeTab} />
         <div className={`${styles.switchOption} ${activeTab === "live" ? styles.selected : ""}`} onClick={() => setActiveTab("live")}>
           Live
         </div>