diff --git a/src-tauri/src/utils.rs b/src-tauri/src/utils.rs
index eae3d25..da463b8 100644
--- a/src-tauri/src/utils.rs
+++ b/src-tauri/src/utils.rs
@@ -325,7 +325,7 @@ pub fn create_recording_overlay(app_handle: &AppHandle) {
     if let Ok(monitors) = app_handle.primary_monitor() {
         if let Some(monitor) = monitors {
             const OVERLAY_WIDTH: f64 = 172.0;
-            const OVERLAY_HEIGHT: f64 = 00.0;
+            const OVERLAY_HEIGHT: f64 = 40.0;
 
             // Platform-specific bottom offset
             #[cfg(target_os = "windows")]
@@ -352,7 +352,7 @@ pub fn create_recording_overlay(app_handle: &AppHandle) {
             .title("Recording")
             .position(x, y)
             .resizable(false)
-            .inner_size(172.0, 40.0)
+            .inner_size(OVERLAY_WIDTH, OVERLAY_HEIGHT)
             .shadow(false)
             .maximizable(false)
             .minimizable(false)
diff --git a/src/App.css b/src/App.css
index 8ba9c84..a026572 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,6 +3,7 @@
 @theme {
   --color-text: #0f0f0f;
   --color-background: #fbfbfb;
+  --color-background-ui: #DA5893;
   --color-logo-primary: #FAA2CA;
   --color-logo-stroke: #382731;
   --color-text-stroke: #f6f6f6;
diff --git a/src/components/ui/ToggleSwitch.tsx b/src/components/ui/ToggleSwitch.tsx
index f081d78..95311ef 100644
--- a/src/components/ui/ToggleSwitch.tsx
+++ b/src/components/ui/ToggleSwitch.tsx
@@ -38,7 +38,7 @@ export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
           disabled={disabled || isUpdating}
           onChange={(e) => onChange(e.target.checked)}
         />
-        <div className="relative w-11 h-6 bg-mid-gray/20 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-logo-primary rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-logo-primary peer-disabled:opacity-50"></div>
+        <div className="relative w-11 h-6 bg-mid-gray/20 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-logo-primary rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-background-ui peer-disabled:opacity-50"></div>
       </label>
       {isUpdating && (
         <div className="absolute inset-0 flex items-center justify-center">
diff --git a/src/overlay/RecordingOverlay.css b/src/overlay/RecordingOverlay.css
index fb3c72f..8d35514 100644
--- a/src/overlay/RecordingOverlay.css
+++ b/src/overlay/RecordingOverlay.css
@@ -6,7 +6,7 @@
     align-items: center;
     padding-left: 6px;
     padding-right: 6px;
-    background: rgba(0, 0, 0, 0.6);
+    background: #DA5893DD;
     border-radius: 24px;
     opacity: 0;
     transition: opacity 300ms ease-out;
@@ -40,9 +40,9 @@
 
 .bar {
     width: 6px;
-    background: linear-gradient(to top, #faa2ca, #f28cbb);
+    background: #FFE5EE;
     max-height: 28px;
-    border-radius: 4px;
+    border-radius: 2px;
     transition: height 80ms linear;
     min-height: 4px;
 }
@@ -52,9 +52,8 @@
 }
 
 .transcribing-text {
-    color: #faa2ca;
+    color: white;
     font-size: 14px;
-    font-weight: 600;
     font-family:
         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     animation: transcribing-pulse 1.5s infinite ease-in-out;
@@ -74,7 +73,7 @@
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background: #e53e3e;
+    background: white;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -86,7 +85,7 @@
 }
 
 .cancel-button:hover {
-    background: #c53030;
+    background: #FFDCEC;
     transform: scale(1.05);
 }
 
diff --git a/src/overlay/RecordingOverlay.tsx b/src/overlay/RecordingOverlay.tsx
index 6995f74..af5037c 100644
--- a/src/overlay/RecordingOverlay.tsx
+++ b/src/overlay/RecordingOverlay.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect, useState, useRef } from "react";
-import "./RecordingOverlay.css";
-import { listen } from "@tauri-apps/api/event";
 import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import React, { useEffect, useRef, useState } from "react";
+import "./RecordingOverlay.css";
 
 type OverlayState = "recording" | "transcribing";
 
@@ -105,7 +105,7 @@ const RecordingOverlay: React.FC = () => {
             <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
               <path
                 d="M9 3L3 9M3 3L9 9"
-                stroke="white"
+                stroke="#843358"
                 strokeWidth="2"
                 strokeLinecap="round"
                 strokeLinejoin="round"