diff --git a/package-lock.json b/package-lock.json
index c35e523..0eb894b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "call-me",
-    "version": "1.3.03",
+    "version": "1.3.04",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "call-me",
-            "version": "1.3.03",
+            "version": "1.3.04",
             "license": "AGPLv3",
             "dependencies": {
                 "@ngrok/ngrok": "1.7.0",
diff --git a/package.json b/package.json
index f1874a8..8dd3f3f 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "call-me",
-    "version": "1.3.03",
+    "version": "1.3.04",
     "description": "Your Go-To for Instant Video Calls",
     "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
     "license": "AGPLv3",
diff --git a/public/client.js b/public/client.js
index 62e0af0..f1376d0 100755
--- a/public/client.js
+++ b/public/client.js
@@ -325,6 +325,22 @@ function handleLocalStorage() {
     usernameIn.value = localStorage.callMeUsername
         ? localStorage.callMeUsername
         : 'Guest' + Math.floor(Math.random() * 10000);
+
+    // Restore media toggle states
+    if (localStorage.callMeJoinVideo !== undefined) {
+        joinVideoToggle.checked = localStorage.callMeJoinVideo === 'true';
+    }
+    if (localStorage.callMeJoinAudio !== undefined) {
+        joinAudioToggle.checked = localStorage.callMeJoinAudio === 'true';
+    }
+
+    // Persist toggle changes
+    joinVideoToggle.addEventListener('change', () => {
+        localStorage.callMeJoinVideo = joinVideoToggle.checked;
+    });
+    joinAudioToggle.addEventListener('change', () => {
+        localStorage.callMeJoinAudio = joinAudioToggle.checked;
+    });
 }
 
 // Handle Room direct join
diff --git a/public/style.css b/public/style.css
index a301b01..b5b475b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -274,8 +274,8 @@ button {
 .media-toggles {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-sm);
-    max-width: 320px;
+    gap: 10px;
+    max-width: 340px;
     margin: 0 auto;
 }
 
@@ -283,66 +283,77 @@ button {
     display: flex;
     align-items: center;
     gap: var(--spacing-md);
-    padding: var(--spacing-sm) var(--spacing-md);
-    border-radius: var(--border-radius-sm);
-    background: rgba(255, 255, 255, 0.04);
-    border: 1px solid var(--glass-border);
+    padding: 12px var(--spacing-md);
+    border-radius: var(--border-radius);
+    background: rgba(30, 35, 50, 0.5);
+    border: 2px solid rgba(16, 185, 129, 0.35);
     cursor: pointer;
     transition: all var(--transition-base);
     user-select: none;
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
 }
 
 .media-toggle-item:hover {
-    background: rgba(255, 255, 255, 0.08);
-    border-color: var(--glass-border-hover);
+    background: rgba(30, 35, 50, 0.7);
+    border-color: rgba(16, 185, 129, 0.6);
+    transform: translateY(-1px);
+    box-shadow:
+        0 4px 16px rgba(16, 185, 129, 0.2),
+        0 0 0 3px rgba(16, 185, 129, 0.08);
 }
 
 .media-toggle-item:has(input:not(:checked)) {
-    opacity: 0.6;
+    background: rgba(30, 35, 50, 0.5);
+    border-color: rgba(239, 68, 68, 0.35);
 }
 
 .media-toggle-item:has(input:not(:checked)):hover {
-    opacity: 0.8;
+    background: rgba(30, 35, 50, 0.7);
+    border-color: rgba(239, 68, 68, 0.6);
+    box-shadow:
+        0 4px 16px rgba(239, 68, 68, 0.2),
+        0 0 0 3px rgba(239, 68, 68, 0.08);
 }
 
 .media-toggle-icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 34px;
-    height: 34px;
+    width: 38px;
+    height: 38px;
     border-radius: var(--border-radius-sm);
-    background: rgba(59, 130, 246, 0.15);
-    color: var(--primary-light);
-    font-size: var(--font-size-base);
+    background: rgba(16, 185, 129, 0.18);
+    color: var(--success-color);
+    font-size: var(--font-size-lg);
     flex-shrink: 0;
     transition: all var(--transition-base);
 }
 
 .media-toggle-item:has(input:not(:checked)) .media-toggle-icon {
-    background: rgba(239, 68, 68, 0.15);
+    background: rgba(239, 68, 68, 0.18);
     color: var(--danger-color);
 }
 
 .media-toggle-label {
     flex: 1;
     text-align: left;
-    color: var(--text-secondary);
+    color: var(--text-color);
     font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-semibold);
     transition: color var(--transition-base);
 }
 
-.media-toggle-item:has(input:checked) .media-toggle-label {
-    color: var(--text-color);
+.media-toggle-item:has(input:not(:checked)) .media-toggle-label {
+    color: var(--text-secondary);
 }
 
 /* Toggle switch */
 .switch {
     position: relative;
     display: inline-block;
-    width: 44px;
-    height: 24px;
+    width: 46px;
+    height: 26px;
     flex-shrink: 0;
 }
 
@@ -356,36 +367,37 @@ button {
     position: absolute;
     cursor: pointer;
     inset: 0;
-    background: var(--bg-tertiary);
-    border: 1px solid var(--glass-border);
-    border-radius: 24px;
+    background: rgba(239, 68, 68, 0.4);
+    border: 1px solid rgba(239, 68, 68, 0.5);
+    border-radius: 26px;
     transition: var(--transition-base);
 }
 
 .switch .slider::before {
     content: '';
     position: absolute;
-    height: 18px;
-    width: 18px;
+    height: 20px;
+    width: 20px;
     left: 2px;
     bottom: 2px;
-    background: var(--text-muted);
+    background: #fff;
     border-radius: 50%;
     transition: var(--transition-base);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 
 .switch input:checked + .slider {
-    background: var(--primary-color);
-    border-color: var(--primary-color);
+    background: var(--success-color);
+    border-color: var(--success-color);
+    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
 }
 
 .switch input:checked + .slider::before {
     transform: translateX(20px);
-    background: #fff;
 }
 
 .switch input:focus + .slider {
-    box-shadow: 0 0 4px var(--primary-color);
+    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
 }
 
 /* Video Styles */