diff --git a/static/index.html b/static/index.html
index dfa6732..e13e17c 100644
--- a/static/index.html
+++ b/static/index.html
@@ -5,6 +5,9 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   <title>Chattz</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="/static/styles.css" />
   <!-- Lucide Icons -->
   <script src="https://unpkg.com/lucide@latest"></script>
diff --git a/static/styles.css b/static/styles.css
index 8e6fefb..7319228 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,27 +1,42 @@
 :root {
-  --bg-darker: #1e1f22;
-  --bg-sidebar: #2b2d31;
-  --bg-main: #313338;
-  --bg-secondary: #232428;
-  --bg-tertiary: #111214;
-  --bg-modifier-selected: rgba(78, 80, 88, 0.6);
-  --bg-modifier-hover: rgba(78, 80, 88, 0.3);
-  --bg-input: #383a40;
+  /* ── Backgrounds ─────────────────────────────────────────── */
+  --bg-darker: #16171b;
+  --bg-sidebar: #1e2025;
+  --bg-main: #23252b;
+  --bg-secondary: #1a1c21;
+  --bg-tertiary: #111216;
+  --bg-modifier-selected: rgba(99, 102, 241, 0.15);
+  --bg-modifier-hover: rgba(255, 255, 255, 0.04);
+  --bg-input: #2a2d35;
 
-  --text-normal: #dbdee1;
-  --text-muted: #949ba4;
-  --text-strong: #f2f3f5;
-  --text-link: #00a8fc;
+  /* ── Text ────────────────────────────────────────────────── */
+  --text-normal: #c9cdd4;
+  --text-muted: #7c818a;
+  --text-strong: #eef0f4;
+  --text-link: #818cf8;
 
-  --brand: #5865f2;
-  --brand-hover: #4752c4;
-  --green: #23a559;
-  --danger: #f23f43;
-  --yellow: #f0b232;
+  /* ── Accents ─────────────────────────────────────────────── */
+  --brand: #6366f1;
+  --brand-hover: #4f46e5;
+  --brand-gradient: linear-gradient(135deg, #6366f1, #a855f7);
+  --brand-glow: rgba(99, 102, 241, 0.35);
+  --green: #22c55e;
+  --danger: #ef4444;
+  --yellow: #f59e0b;
 
-  --font-main: "gg sans", "Inter", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  /* ── Misc ────────────────────────────────────────────────── */
+  --font-main: "Inter", "Noto Sans", "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+/* ═══════════════════════════════════════════════════════════ */
+/*  Reset & Base                                              */
+/* ═══════════════════════════════════════════════════════════ */
 * {
   box-sizing: border-box;
 }
@@ -34,12 +49,14 @@ body {
   color: var(--text-normal);
   font-family: var(--font-main);
   overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* Scrollbars */
+/* ── Scrollbars ────────────────────────────────────────────── */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 6px;
+  height: 6px;
 }
 
 ::-webkit-scrollbar-track {
@@ -47,18 +64,19 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--bg-tertiary);
-  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 100px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #242529;
+  background: rgba(255, 255, 255, 0.14);
 }
 
+/* ── Base Elements ─────────────────────────────────────────── */
 button {
   border: 0;
   cursor: pointer;
-  transition: all 150ms ease;
+  transition: all var(--transition);
   background: none;
   color: inherit;
   font: inherit;
@@ -78,71 +96,114 @@ select {
   display: none !important;
 }
 
-/* Auth Screen */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Auth Screen                                               */
+/* ═══════════════════════════════════════════════════════════ */
 .auth-screen {
   display: grid;
   place-items: center;
   height: 100vh;
-  background-image: url("https://discord.com/assets/f9a15998e94589d343f7.png");
-  background-size: cover;
+  /* Subtle animated gradient background */
+  background: linear-gradient(135deg, #0f0c29, #16171b 40%, #1a1c2e 70%, #0f0c29);
+  background-size: 400% 400%;
+  animation: gradientShift 12s ease infinite;
+}
+
+@keyframes gradientShift {
+
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
 }
 
 .auth-card {
-  width: min(480px, 92vw);
-  background: var(--bg-sidebar);
-  border-radius: 8px;
-  padding: 32px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  width: min(440px, 92vw);
+  background: rgba(30, 32, 37, 0.75);
+  backdrop-filter: blur(24px) saturate(1.4);
+  -webkit-backdrop-filter: blur(24px) saturate(1.4);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-xl);
+  padding: 40px 36px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(99, 102, 241, 0.08);
   text-align: center;
 }
 
 .brand-large {
   width: 80px;
   height: 80px;
-  background: var(--brand);
+  background: var(--brand-gradient);
   color: #fff;
-  border-radius: 20px;
+  border-radius: 22px;
   display: grid;
   place-items: center;
-  font-size: 40px;
+  font-size: 38px;
   font-weight: 800;
-  margin: 0 auto 20px;
+  margin: 0 auto 24px;
+  box-shadow: 0 4px 24px var(--brand-glow);
+  transition: transform var(--transition), box-shadow var(--transition);
+}
+
+.brand-large:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 32px var(--brand-glow);
 }
 
 .auth-card h1 {
   margin: 0 0 8px;
   color: var(--text-strong);
+  font-weight: 800;
+  font-size: 28px;
+  letter-spacing: -0.5px;
 }
 
 .auth-card p {
-  margin: 0 0 24px;
+  margin: 0 0 28px;
   color: var(--text-muted);
+  font-size: 15px;
 }
 
 #login-btn {
   width: 100%;
-  background: var(--brand);
+  background: var(--brand-gradient);
   color: #fff;
-  padding: 12px;
-  border-radius: 3px;
+  padding: 14px;
+  border-radius: var(--radius-md);
   font-weight: 600;
   font-size: 16px;
+  letter-spacing: 0.2px;
+  box-shadow: 0 2px 16px var(--brand-glow);
+  transition: all var(--transition);
 }
 
 #login-btn:hover {
-  background: var(--brand-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 24px var(--brand-glow);
+  filter: brightness(1.08);
 }
 
-/* Main Layout */
+#login-btn:active {
+  transform: translateY(0);
+}
+
+/* ═══════════════════════════════════════════════════════════ */
+/*  Main Layout                                               */
+/* ═══════════════════════════════════════════════════════════ */
 .shell {
   height: 100vh;
   height: 100dvh;
   display: grid;
-  grid-template-columns: 72px 240px 1fr 240px;
+  grid-template-columns: 72px 248px 1fr 248px;
   background: var(--bg-main);
 }
 
-/* Server Rail */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Server Rail                                               */
+/* ═══════════════════════════════════════════════════════════ */
 .server-rail {
   background: var(--bg-darker);
   display: flex;
@@ -173,26 +234,28 @@ select {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease;
+  transition: all var(--transition);
   position: relative;
   background: var(--bg-sidebar);
 }
 
 .brand {
-  background: var(--brand);
+  background: var(--brand-gradient);
   color: #fff;
   border-radius: 16px;
   margin-bottom: 2px;
+  box-shadow: 0 2px 12px var(--brand-glow);
 }
 
 .brand:hover {
   border-radius: 16px;
+  box-shadow: 0 4px 20px var(--brand-glow);
 }
 
 .separator {
   width: 32px;
   height: 2px;
-  background: var(--bg-modifier-selected);
+  background: rgba(255, 255, 255, 0.06);
   margin-bottom: 2px;
   border-radius: 1px;
 }
@@ -202,6 +265,7 @@ select {
   border-radius: 16px;
   background: var(--brand);
   color: #fff;
+  box-shadow: 0 2px 12px var(--brand-glow);
 }
 
 .guild-pill::before {
@@ -212,7 +276,7 @@ select {
   height: 0;
   background: #fff;
   border-radius: 0 4px 4px 0;
-  transition: all 0.2s ease;
+  transition: all var(--transition);
 }
 
 .guild-pill:hover::before {
@@ -230,9 +294,12 @@ select {
 .action-pill:hover {
   background: var(--green);
   color: #fff;
+  box-shadow: 0 2px 12px rgba(34, 197, 94, 0.3);
 }
 
-/* Channel Sidebar */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Channel Sidebar                                           */
+/* ═══════════════════════════════════════════════════════════ */
 .channel-sidebar {
   background: var(--bg-sidebar);
   display: flex;
@@ -245,10 +312,10 @@ select {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid var(--bg-darker);
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
   cursor: pointer;
-  transition: background-color 0.1s;
+  transition: background-color var(--transition);
 }
 
 .sidebar-header:hover {
@@ -263,6 +330,7 @@ select {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  letter-spacing: -0.2px;
 }
 
 .sidebar-header-actions {
@@ -272,17 +340,18 @@ select {
 }
 
 .header-action-btn {
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
   display: grid;
   place-items: center;
   color: var(--text-muted);
+  transition: all var(--transition);
 }
 
 .header-action-btn:hover {
   background: var(--bg-modifier-hover);
-  color: var(--text-normal);
+  color: var(--text-strong);
 }
 
 .header-action-btn i {
@@ -305,11 +374,12 @@ select {
   display: flex;
   align-items: center;
   color: var(--text-muted);
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.24px;
+  letter-spacing: 0.5px;
   cursor: pointer;
+  transition: color var(--transition);
 }
 
 .group-title:hover {
@@ -329,9 +399,10 @@ select {
 .add-btn {
   width: 20px;
   height: 20px;
-  border-radius: 4px;
-  opacity: 0.7;
-  transition: opacity 0.2s, background-color 0.2s;
+  border-radius: var(--radius-sm);
+  opacity: 0.5;
+  transition: opacity var(--transition), background-color var(--transition),
+    transform var(--transition);
   display: grid;
   place-items: center;
 }
@@ -339,6 +410,7 @@ select {
 .add-btn:hover {
   opacity: 1;
   background: var(--bg-modifier-hover);
+  transform: scale(1.1);
 }
 
 .add-btn i {
@@ -356,11 +428,13 @@ select {
 .channel-row {
   display: flex;
   align-items: center;
-  padding: 6px 8px;
-  border-radius: 4px;
+  padding: 7px 10px;
+  border-radius: var(--radius-sm);
   color: var(--text-muted);
   font-weight: 500;
-  gap: 6px;
+  gap: 8px;
+  transition: all var(--transition);
+  border-left: 3px solid transparent;
 }
 
 .channel-row:hover {
@@ -371,26 +445,36 @@ select {
 .channel-row.active {
   background: var(--bg-modifier-selected);
   color: var(--text-strong);
+  border-left-color: var(--brand);
 }
 
 .channel-row i {
   width: 20px;
   height: 20px;
-  opacity: 0.6;
+  opacity: 0.5;
 }
 
-/* Sidebar Footer */
+.channel-row.active i {
+  opacity: 0.9;
+}
+
+/* ═══════════════════════════════════════════════════════════ */
+/*  Sidebar Footer                                            */
+/* ═══════════════════════════════════════════════════════════ */
 .sidebar-footer {
   background: var(--bg-secondary);
   padding: 0;
 }
 
 .user-panel {
-  padding: 8px;
+  padding: 8px 10px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   height: 52px;
+  transition: background-color var(--transition);
+  border-radius: var(--radius-sm);
+  margin: 2px;
 }
 
 .user-panel:hover {
@@ -405,12 +489,12 @@ select {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: var(--brand);
+  background: var(--brand-gradient);
   color: #fff;
   display: grid;
   place-items: center;
   font-weight: 700;
-  font-size: 14px;
+  font-size: 13px;
 }
 
 .status-dot {
@@ -425,6 +509,7 @@ select {
 
 .status-dot.online {
   background: var(--green);
+  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
 }
 
 .user-info {
@@ -454,15 +539,16 @@ select {
 .user-actions button {
   width: 32px;
   height: 32px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   display: grid;
   place-items: center;
   color: var(--text-muted);
+  transition: all var(--transition);
 }
 
 .user-actions button:hover {
   background: var(--bg-modifier-hover);
-  color: var(--text-normal);
+  color: var(--text-strong);
 }
 
 .user-actions i {
@@ -470,11 +556,13 @@ select {
   height: 20px;
 }
 
-/* Voice Connection */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Voice Connection                                          */
+/* ═══════════════════════════════════════════════════════════ */
 .voice-connection {
-  padding: 8px;
+  padding: 10px 12px;
   background: var(--bg-secondary);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
 }
 
 .vc-info {
@@ -486,6 +574,7 @@ select {
 .vc-icon {
   color: var(--green);
   width: 20px;
+  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.4));
 }
 
 .vc-text {
@@ -513,18 +602,21 @@ select {
 .vc-actions button {
   width: 32px;
   height: 32px;
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
   color: var(--text-muted);
   display: grid;
   place-items: center;
+  transition: all var(--transition);
 }
 
 .vc-actions button:hover {
   background: var(--bg-modifier-hover);
-  color: var(--text-normal);
+  color: var(--text-strong);
 }
 
-/* Video Grid */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Video Grid                                                */
+/* ═══════════════════════════════════════════════════════════ */
 .video-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
@@ -544,8 +636,9 @@ select {
   position: relative;
   aspect-ratio: 16 / 9;
   background: #000;
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
   overflow: hidden;
+  transition: box-shadow var(--transition);
 }
 
 .video-item video {
@@ -559,31 +652,35 @@ select {
   position: absolute;
   bottom: 8px;
   left: 8px;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(8px);
   color: #fff;
-  padding: 2px 8px;
-  border-radius: 4px;
+  padding: 3px 10px;
+  border-radius: 100px;
   font-size: 12px;
+  font-weight: 500;
 }
 
 /* Voice Activity */
 .voice-speaking .avatar {
-  box-shadow: 0 0 0 2px var(--green);
+  box-shadow: 0 0 0 2px var(--green), 0 0 8px rgba(34, 197, 94, 0.3);
 }
 
 .video-item.speaking {
-  box-shadow: 0 0 0 4px var(--green);
+  box-shadow: 0 0 0 3px var(--green), 0 0 16px rgba(34, 197, 94, 0.25);
 }
 
 .video-item.speaking .video-label {
   background: var(--green);
 }
 
-/* Sound Board */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Sound Board                                               */
+/* ═══════════════════════════════════════════════════════════ */
 .soundboard-container {
   padding: 12px;
   background: var(--bg-secondary);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
+  border-top: 1px solid rgba(255, 255, 255, 0.03);
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -593,6 +690,11 @@ select {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  color: var(--text-muted);
 }
 
 .soundboard-grid {
@@ -608,16 +710,19 @@ select {
   flex-direction: column;
   align-items: center;
   gap: 4px;
-  padding: 8px;
+  padding: 10px 8px;
   background: var(--bg-darker);
-  border-radius: 8px;
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: transform 0.1s;
+  transition: all var(--transition);
+  border: 1px solid transparent;
 }
 
 .sound-item:hover {
   background: var(--bg-modifier-hover);
   transform: translateY(-2px);
+  border-color: rgba(255, 255, 255, 0.06);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }
 
 .sound-item:active {
@@ -642,20 +747,23 @@ select {
   font-size: 12px;
   color: var(--brand);
   cursor: pointer;
+  transition: color var(--transition);
 }
 
 .btn-add-sound:hover {
+  color: var(--text-link);
   text-decoration: underline;
 }
 
-/* Chat Pane */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Chat Pane                                                 */
+/* ═══════════════════════════════════════════════════════════ */
 .chat-pane {
   display: flex;
   flex-direction: column;
   background: var(--bg-main);
   min-width: 0;
   min-height: 0;
-  /* Important for flex child overflow */
 }
 
 .chat-header {
@@ -664,8 +772,8 @@ select {
   display: flex;
   align-items: center;
   gap: 8px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
 }
 
 .header-icon {
@@ -678,6 +786,7 @@ select {
   font-size: 16px;
   font-weight: 700;
   color: var(--text-strong);
+  letter-spacing: -0.2px;
 }
 
 .message-list {
@@ -687,26 +796,31 @@ select {
 }
 
 .msg {
-  padding: 2px 16px;
+  padding: 4px 16px;
   display: flex;
   gap: 16px;
   margin-top: 1.0625rem;
+  border-radius: var(--radius-sm);
+  transition: background-color var(--transition);
+  border-left: 3px solid transparent;
 }
 
 .msg:hover {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(255, 255, 255, 0.015);
+  border-left-color: rgba(99, 102, 241, 0.3);
 }
 
 .msg-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: var(--brand);
+  background: var(--brand-gradient);
   flex-shrink: 0;
   display: grid;
   place-items: center;
   color: #fff;
   font-weight: 600;
+  font-size: 15px;
 }
 
 .msg-content {
@@ -726,20 +840,22 @@ select {
   color: var(--text-strong);
   cursor: pointer;
   font-size: 1rem;
+  transition: color var(--transition);
 }
 
 .msg-author:hover {
+  color: var(--text-link);
   text-decoration: underline;
 }
 
 .msg-time {
-  font-size: 12px;
+  font-size: 11px;
   color: var(--text-muted);
 }
 
 .msg-body {
   color: var(--text-normal);
-  line-height: 1.375rem;
+  line-height: 1.45rem;
   white-space: pre-wrap;
   word-wrap: break-word;
 }
@@ -759,7 +875,9 @@ select {
   padding-left: 56px;
 }
 
-/* Chat Input */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Chat Input                                                */
+/* ═══════════════════════════════════════════════════════════ */
 .chat-input-wrapper {
   padding: 0 16px 24px;
   padding-bottom: clamp(24px, calc(24px + env(safe-area-inset-bottom)), 40px);
@@ -767,22 +885,31 @@ select {
 
 .message-form {
   background: var(--bg-input);
-  border-radius: 8px;
-  padding: 11px 16px;
+  border-radius: var(--radius-lg);
+  padding: 12px 18px;
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.message-form:focus-within {
+  border-color: rgba(99, 102, 241, 0.4);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
 .message-form input {
   width: 100%;
   background: transparent;
   color: var(--text-normal);
-  font-size: 16px;
+  font-size: 15px;
 }
 
 .message-form input::placeholder {
   color: var(--text-muted);
 }
 
-/* Member List */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Member List / Utility Sidebar                             */
+/* ═══════════════════════════════════════════════════════════ */
 .utility-sidebar {
   background: var(--bg-sidebar);
   display: flex;
@@ -799,10 +926,11 @@ select {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 6px 8px;
-  border-radius: 4px;
+  padding: 7px 10px;
+  border-radius: var(--radius-sm);
   color: var(--text-muted);
   cursor: pointer;
+  transition: all var(--transition);
 }
 
 .member-row:hover {
@@ -814,11 +942,11 @@ select {
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: var(--brand);
+  background: var(--brand-gradient);
   color: #fff;
   display: grid;
   place-items: center;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   flex-shrink: 0;
 }
@@ -828,7 +956,7 @@ select {
   text-overflow: ellipsis;
 }
 
-/* Presence Badges */
+/* ── Presence Badges ───────────────────────────────────────── */
 .avatar-wrapper {
   position: relative;
   display: inline-block;
@@ -843,11 +971,11 @@ select {
   border-radius: 50%;
   border: 2px solid var(--bg-sidebar);
   background: #747f8d;
-  /* Gray for offline */
 }
 
 .status-badge.online {
   background: var(--green);
+  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
 }
 
 .member-avatar,
@@ -868,33 +996,45 @@ select {
 
 .status-dot.online {
   background: var(--green);
+  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
 }
 
-/* Modals */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Modals                                                    */
+/* ═══════════════════════════════════════════════════════════ */
 .modal-container {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.85);
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
   display: grid;
   place-items: center;
   z-index: 1000;
 }
 
 .modal {
-  background: var(--bg-sidebar);
-  width: min(440px, 95vw);
-  border-radius: 5px;
-  padding: 24px;
+  background: rgba(30, 32, 37, 0.92);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  width: min(460px, 95vw);
+  border-radius: var(--radius-xl);
+  padding: 28px;
   color: var(--text-normal);
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
 }
 
 .modal h2 {
-  margin: 0 0 16px;
+  margin: 0 0 20px;
   text-align: center;
   color: var(--text-strong);
+  font-weight: 700;
+  font-size: 22px;
+  letter-spacing: -0.3px;
 }
 
 .form-item {
@@ -903,49 +1043,69 @@ select {
 
 .form-item label {
   display: block;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 700;
   color: var(--text-muted);
   margin-bottom: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
 .form-item input {
   width: 100%;
-  padding: 10px;
-  border-radius: 3px;
+  padding: 11px 14px;
+  border-radius: var(--radius-md);
   background: var(--bg-darker);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  transition: border-color var(--transition), box-shadow var(--transition);
+}
+
+.form-item input:focus {
+  border-color: rgba(99, 102, 241, 0.4);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
 }
 
 .modal-footer {
   margin-top: 24px;
   display: flex;
   justify-content: flex-end;
-  gap: 16px;
+  gap: 12px;
 }
 
 .cancel-btn {
   padding: 10px 20px;
-  color: var(--text-strong);
+  color: var(--text-muted);
   font-weight: 500;
+  border-radius: var(--radius-md);
+  transition: all var(--transition);
 }
 
 .cancel-btn:hover {
-  text-decoration: underline;
+  color: var(--text-strong);
+  background: var(--bg-modifier-hover);
 }
 
 .submit-btn {
-  background: var(--brand);
+  background: var(--brand-gradient);
   color: #fff;
   padding: 10px 24px;
-  border-radius: 3px;
+  border-radius: var(--radius-md);
   font-weight: 600;
+  box-shadow: 0 2px 12px var(--brand-glow);
+  transition: all var(--transition);
 }
 
 .submit-btn:hover {
-  background: var(--brand-hover);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 20px var(--brand-glow);
+  filter: brightness(1.06);
 }
 
-/* Radio Group for Channel Type */
+.submit-btn:active {
+  transform: translateY(0);
+}
+
+/* ── Radio Group (Channel Type) ────────────────────────────── */
 .radio-group {
   display: flex;
   flex-direction: column;
@@ -966,14 +1126,16 @@ select {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 10px;
+  padding: 12px;
   background: var(--bg-modifier-hover);
-  border-radius: 4px;
-  transition: all 0.1s;
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  transition: all var(--transition);
 }
 
 .radio-item input:checked+.radio-box {
   background: var(--bg-modifier-selected);
+  border-color: rgba(99, 102, 241, 0.3);
   color: var(--text-strong);
 }
 
@@ -997,7 +1159,9 @@ select {
   color: var(--text-muted);
 }
 
-/* Mobile Overlay */
+/* ═══════════════════════════════════════════════════════════ */
+/*  Mobile Overlay                                            */
+/* ═══════════════════════════════════════════════════════════ */
 .overlay {
   position: fixed;
   top: 0;
@@ -1016,7 +1180,7 @@ select {
   visibility: hidden;
 }
 
-/* Mobile Toggle Buttons */
+/* ── Mobile Toggle Buttons ─────────────────────────────────── */
 .mobile-toggle-btn {
   display: none;
   width: 32px;
@@ -1030,12 +1194,15 @@ select {
 
 .mobile-toggle-btn:hover {
   background: var(--bg-modifier-hover);
-  border-radius: 4px;
+  border-radius: var(--radius-sm);
 }
 
+/* ═══════════════════════════════════════════════════════════ */
+/*  Responsive                                                */
+/* ═══════════════════════════════════════════════════════════ */
 @media (max-width: 1100px) {
   .shell {
-    grid-template-columns: 72px 240px 1fr;
+    grid-template-columns: 72px 248px 1fr;
   }
 
   .utility-sidebar {
@@ -1043,11 +1210,11 @@ select {
     top: 0;
     bottom: 0;
     right: 0;
-    width: 240px;
+    width: 248px;
     z-index: 100;
-    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
+    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.5);
     transform: translateX(100%);
-    transition: transform 0.2s ease;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .utility-sidebar.active {
@@ -1065,14 +1232,13 @@ select {
     grid-template-columns: 1fr;
   }
 
-  /* Hide sidebars by default on mobile */
   .server-rail,
   .channel-sidebar {
     position: fixed;
     top: 0;
     bottom: 0;
     z-index: 100;
-    transition: transform 0.2s ease;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .server-rail {
@@ -1083,13 +1249,11 @@ select {
 
   .channel-sidebar {
     left: 72px;
-    width: 240px;
-    transform: translateX(-312px);
-    /* 72 + 240 */
-    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
+    width: 248px;
+    transform: translateX(-320px);
+    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
   }
 
-  /* When menu is active */
   .shell.menu-open .server-rail {
     transform: translateX(0);
   }
@@ -1097,10 +1261,8 @@ select {
   .shell.menu-open .channel-sidebar {
     transform: translateX(0);
     display: flex;
-    /* Override display: none from previous rule */
   }
 
-  /* Adjust chat header for mobile */
   .chat-header {
     padding: 0 8px;
   }