diff --git a/.github/example.png b/.github/example.png
deleted file mode 100644
index d90795b..0000000
Binary files a/.github/example.png and /dev/null differ
diff --git a/ChatGPT_UI_Ideas/c1.webp b/ChatGPT_UI_Ideas/c1.webp
deleted file mode 100644
index f680976..0000000
Binary files a/ChatGPT_UI_Ideas/c1.webp and /dev/null differ
diff --git a/ChatGPT_UI_Ideas/c2.webp b/ChatGPT_UI_Ideas/c2.webp
deleted file mode 100644
index f325bee..0000000
Binary files a/ChatGPT_UI_Ideas/c2.webp and /dev/null differ
diff --git a/ChatGPT_UI_Ideas/c3.webp b/ChatGPT_UI_Ideas/c3.webp
deleted file mode 100644
index a6fc545..0000000
Binary files a/ChatGPT_UI_Ideas/c3.webp and /dev/null differ
diff --git a/client/index.css b/client/index.css
index 2075cdb..db3cdea 100644
--- a/client/index.css
+++ b/client/index.css
@@ -1,183 +1,612 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+
+/* ============================================================================
+   EchoAI · "Midnight Indigo" — premium SaaS workspace
+   Slate/graphite surfaces · one electric-indigo accent · crisp 14px geometry
+   Dark-first, with a premium light variant (.theme-light)
+   ========================================================================== */
+
+:root {
+  /* Dark (default) */
+  --bg: #0b0d12;
+  --bg-2: #090a0e;
+  --panel: #14171f;
+  --surface: #14171f;
+  --surface-2: #1a1e28;
+  --surface-3: #232834;
+  --border: rgba(255, 255, 255, 0.07);
+  --border-strong: rgba(255, 255, 255, 0.13);
+
+  --text: #e6e9ef;
+  --text-dim: #99a0b2;
+  --text-faint: rgba(230, 233, 239, 0.42);
+
+  --accent: #6366f1;
+  --accent-2: #818cf8;
+  --accent-ink: #aab2fc;
+  --accent-soft: rgba(99, 102, 241, 0.16);
+  --accent-ring: rgba(99, 102, 241, 0.5);
+  --on-accent: #ffffff;
+
+  /* orb pastels — indigo marble */
+  --p1: #818cf8;
+  --p2: #a5b4fc;
+  --p3: #38bdf8;
+  --p4: #c4b5fd;
+
+  --danger: #f0708a;
+  --danger-soft: rgba(240, 112, 138, 0.16);
+
+  --r-xl: 18px;
+  --r-lg: 16px;
+  --r-md: 14px;
+  --r-sm: 10px;
+
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 10px 34px -14px rgba(0, 0, 0, 0.66);
+  --shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.85);
+
+  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
+  --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+
+  color-scheme: dark;
+}
+
+/* Premium light variant */
+.theme-light {
+  --bg: #ffffff;
+  --bg-2: #f7f8fa;
+  --panel: #f7f8fa;
+  --surface: #ffffff;
+  --surface-2: #f4f5f8;
+  --surface-3: #eceef3;
+  --border: rgba(11, 13, 18, 0.08);
+  --border-strong: rgba(11, 13, 18, 0.14);
+
+  --text: #0b0d12;
+  --text-dim: #5b6170;
+  --text-faint: rgba(11, 13, 18, 0.4);
+
+  --accent: #6366f1;
+  --accent-2: #4f46e5;
+  --accent-ink: #4f46e5;
+  --accent-soft: rgba(99, 102, 241, 0.1);
+  --accent-ring: rgba(99, 102, 241, 0.32);
+  --on-accent: #ffffff;
+
+  --danger: #dc5670;
+  --danger-soft: rgba(220, 86, 112, 0.1);
+
+  --shadow-sm: 0 1px 2px rgba(11, 13, 18, 0.05), 0 2px 8px rgba(11, 13, 18, 0.04);
+  --shadow-md: 0 10px 32px -14px rgba(11, 13, 18, 0.18);
+  --shadow-lg: 0 30px 64px -30px rgba(11, 13, 18, 0.24);
+
+  color-scheme: light;
+}
 
 * {
   box-sizing: border-box;
-  scroll-behavior: smooth;
 }
 
-html, body {
+html,
+body {
   height: 100%;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 15px;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
 #root {
   height: 100%;
   min-height: 100vh;
 }
 
-/* Custom scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
+::selection {
+  background: var(--accent-soft);
+  color: var(--text);
 }
 
-::-webkit-scrollbar-track {
-  background: transparent;
+.font-display {
+  font-family: var(--font-display);
+  font-optical-sizing: auto;
+  letter-spacing: -0.01em;
 }
 
-::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
+/* ----------------------------------------------------------------------------
+   Ambient background — a single soft indigo glow
+   -------------------------------------------------------------------------- */
+.aura {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  background:
+    radial-gradient(50% 34% at 62% 4%, var(--accent-soft), transparent 62%),
+    radial-gradient(70% 50% at 85% -12%, var(--accent-soft), transparent 70%),
+    var(--bg);
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
+/* ----------------------------------------------------------------------------
+   THE ORB — soft indigo glass marble
+   -------------------------------------------------------------------------- */
+.orb {
+  position: relative;
+  width: var(--orb-size, 116px);
+  height: var(--orb-size, 116px);
+  flex: 0 0 auto;
 }
-
-/* Light mode scrollbar */
-.light-mode ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
+.orb__halo {
+  position: absolute;
+  inset: -26%;
+  border-radius: 50%;
+  background: conic-gradient(from 200deg, var(--p1), var(--p2), var(--p3), var(--p4), var(--p1));
+  filter: blur(30px);
+  opacity: 0.5;
+  animation: halo 16s ease-in-out infinite;
 }
-
-.light-mode ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
+.orb__ball {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 42%),
+    linear-gradient(145deg, var(--p1) 0%, var(--p2) 40%, var(--p3) 74%, var(--p4) 100%);
+  box-shadow:
+    inset 0 -8px 22px rgba(56, 50, 120, 0.4),
+    inset 0 8px 16px rgba(255, 255, 255, 0.4),
+    var(--shadow-md);
 }
-
-/* Smooth animations */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+.orb__sheen {
+  position: absolute;
+  top: 13%;
+  left: 19%;
+  width: 32%;
+  height: 21%;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.92), transparent 70%);
+  filter: blur(2px);
 }
+.orb--breathe { animation: breathe 7s ease-in-out infinite; }
+.orb--thinking .orb__halo { opacity: 0.8; animation-duration: 6s; }
+.orb--thinking { animation: breathe 2.8s ease-in-out infinite; }
+.orb--sm { --orb-size: 28px; }
+.orb--sm .orb__halo { filter: blur(8px); inset: -18%; }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+@keyframes halo {
+  0%, 100% { transform: rotate(0deg) scale(1); }
+  50% { transform: rotate(40deg) scale(1.08); }
 }
-
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+@keyframes breathe {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.035); }
 }
 
-@keyframes bounce {
-  0%, 20%, 53%, 80%, 100% {
-    transform: translate3d(0, 0, 0);
-  }
-  40%, 43% {
-    transform: translate3d(0, -8px, 0);
-  }
-  70% {
-    transform: translate3d(0, -4px, 0);
-  }
-  90% {
-    transform: translate3d(0, -2px, 0);
-  }
+/* ----------------------------------------------------------------------------
+   Workspace shell — sidebar
+   -------------------------------------------------------------------------- */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  width: 274px;
+  flex: 0 0 274px;
+  height: 100%;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
 }
 
-.animate-fadeInUp {
-  animation: fadeInUp 0.6s ease-out;
+.scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  background: rgba(4, 5, 8, 0.55);
+  backdrop-filter: blur(2px);
 }
 
-.animate-fadeIn {
-  animation: fadeIn 0.4s ease-out;
+.nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 11px;
+  border-radius: var(--r-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+.nav-item:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+.nav-item--active {
+  background: var(--accent-soft);
+  color: var(--text);
+  border-color: var(--accent-ring);
+}
+.nav-item__title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13.5px;
+  font-weight: 500;
+}
+.nav-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
 }
+.nav-item:hover .nav-actions,
+.nav-item--active .nav-actions { opacity: 1; }
+.nav-action {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 8px;
+  color: var(--text-faint);
+  transition: background 0.18s ease, color 0.18s ease;
+}
+.nav-action:hover { background: var(--surface-3); color: var(--text); }
+.nav-action--danger:hover { color: var(--danger); }
 
-.animate-pulse-slow {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+.nav-edit {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  border: 1px solid var(--accent-ring);
+  border-radius: 8px;
+  padding: 4px 8px;
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 13.5px;
+  outline: none;
 }
 
-.animate-bounce-slow {
-  animation: bounce 2s infinite;
+.profile-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 9px;
+  border-radius: var(--r-md);
+  background: var(--surface);
+  border: 1px solid var(--border);
+}
+.avatar {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  color: var(--on-accent);
+  font-size: 13px;
+  font-weight: 700;
+  background: linear-gradient(140deg, var(--accent), var(--accent-2));
 }
 
-/* Glass morphism effect */
-.glass {
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+/* ----------------------------------------------------------------------------
+   Buttons & chips
+   -------------------------------------------------------------------------- */
+.icon-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  color: var(--text-dim);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  transition: all 0.22s ease;
+  cursor: pointer;
 }
+.icon-btn:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+  background: var(--surface-2);
+}
+.icon-btn:active { transform: scale(0.95); }
 
-.glass-dark {
-  background: rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--accent-ink);
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-ring);
+}
+.chip__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--accent-2);
+  animation: live 2.6s ease-in-out infinite;
+}
+@keyframes live {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
 }
 
-/* Gradient text */
-.gradient-text {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+.btn-accent {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--r-md);
+  color: var(--on-accent);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
+  border: none;
+  font-family: var(--font-body);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 0 10px 26px -12px var(--accent-ring);
+  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
+}
+.btn-accent:hover:not(:disabled) {
+  filter: brightness(1.08) saturate(1.04);
+  transform: translateY(-1px);
+  box-shadow: 0 16px 32px -12px var(--accent-ring);
 }
+.btn-accent:active:not(:disabled) { transform: scale(0.97); }
+.btn-accent:disabled {
+  cursor: not-allowed;
+  color: var(--text-faint);
+  background: var(--surface-3);
+  box-shadow: none;
+}
+.btn-round { border-radius: 999px; }
 
-/* Custom focus styles */
-.focus-ring:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
+.btn-soft {
+  border-radius: var(--r-md);
+  padding: 12px 18px;
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--text);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  transition: all 0.22s ease;
+  cursor: pointer;
 }
+.btn-soft:hover:not(:disabled) {
+  border-color: var(--border-strong);
+  background: var(--surface-3);
+}
+.btn-soft:disabled { opacity: 0.5; cursor: not-allowed; }
 
-/* Smooth transitions */
-.transition-all {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+/* ----------------------------------------------------------------------------
+   Suggestion cards
+   -------------------------------------------------------------------------- */
+.suggest-card {
+  position: relative;
+  overflow: hidden;
+  text-align: left;
+  padding: 18px;
+  border-radius: var(--r-lg);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--shadow-sm);
+  cursor: pointer;
+  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease,
+    border-color 0.28s ease;
+}
+.suggest-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(130% 80% at 50% -10%, var(--accent-soft), transparent 60%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+  z-index: 0;
+}
+.suggest-card > * {
+  position: relative;
+  z-index: 1;
+}
+.suggest-card:hover {
+  transform: translateY(-3px);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), var(--shadow-md);
+  border-color: var(--accent-ring);
+}
+.suggest-card:hover::after { opacity: 1; }
+.suggest-card:hover .suggest-card__arrow { transform: translate(3px, -3px); color: var(--accent); }
+.suggest-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
+.suggest-card__icon {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  color: var(--accent-ink);
+  background: linear-gradient(140deg, var(--accent-soft), transparent);
+  border: 1px solid var(--border);
+}
+.suggest-card__arrow {
+  color: var(--text-faint);
+  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.28s ease;
 }
 
-/* Hover effects */
-.hover-lift:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+/* ----------------------------------------------------------------------------
+   Chat bubbles
+   -------------------------------------------------------------------------- */
+.bubble {
+  max-width: 100%;
+  padding: 12px 16px;
+  border-radius: var(--r-lg);
+  font-size: 15px;
+  line-height: 1.65;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.bubble-user {
+  color: var(--on-accent);
+  background: var(--accent);
+  border-bottom-right-radius: 6px;
+  box-shadow: 0 10px 24px -16px var(--accent-ring);
+}
+.bubble-ai {
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 6px;
+  box-shadow: var(--shadow-sm);
+}
+.bubble-error {
+  color: var(--text);
+  background: var(--danger-soft);
+  border: 1px solid var(--danger);
+  border-bottom-left-radius: 6px;
 }
 
-/* Typing indicator */
-.typing-indicator {
-  display: inline-block;
+/* ----------------------------------------------------------------------------
+   Composer
+   -------------------------------------------------------------------------- */
+.composer {
   position: relative;
-  width: 40px;
-  height: 20px;
+  border-radius: var(--r-lg);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-md);
+  transition: border-color 0.25s ease, box-shadow 0.25s ease;
+}
+.composer:focus-within {
+  border-color: var(--accent-ring);
+  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md);
+}
+.composer textarea {
+  width: 100%;
+  resize: none;
+  border: 0;
+  background: transparent;
+  outline: none;
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 15px;
+  line-height: 1.6;
 }
+.composer textarea::placeholder { color: var(--text-faint); }
 
-.typing-indicator::before,
-.typing-indicator::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
+/* ----------------------------------------------------------------------------
+   Typing indicator
+   -------------------------------------------------------------------------- */
+.shimmer {
+  background: linear-gradient(90deg, var(--text-faint) 0%, var(--text) 35%, var(--text-faint) 65%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 2.6s linear infinite;
+}
+@keyframes shimmer {
+  to { background-position: -200% 0; }
+}
+.dot-3 span {
+  display: inline-block;
   width: 6px;
   height: 6px;
+  margin: 0 2px;
   border-radius: 50%;
-  background: currentColor;
-  animation: typing 1.4s infinite ease-in-out;
+  background: var(--accent-2);
+  animation: dotty 1.4s ease-in-out infinite;
+}
+.dot-3 span:nth-child(2) { animation-delay: 0.18s; }
+.dot-3 span:nth-child(3) { animation-delay: 0.36s; }
+@keyframes dotty {
+  0%, 70%, 100% { transform: translateY(0); opacity: 0.4; }
+  35% { transform: translateY(-6px); opacity: 1; }
 }
 
-.typing-indicator::after {
-  left: 8px;
-  animation-delay: 0.2s;
+/* ----------------------------------------------------------------------------
+   Modal + form
+   -------------------------------------------------------------------------- */
+.modal-card {
+  position: relative;
+  border-radius: var(--r-xl);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-lg);
+}
+.field {
+  width: 100%;
+  padding: 12px 44px 12px 14px;
+  border-radius: var(--r-md);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-family: var(--font-body);
+  font-size: 14px;
+  transition: border-color 0.22s ease, box-shadow 0.22s ease;
+}
+.field::placeholder { color: var(--text-faint); }
+.field:focus {
+  outline: none;
+  border-color: var(--accent-ring);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.info-panel {
+  border-radius: var(--r-md);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
 }
 
-.typing-indicator::before {
-  animation-delay: 0.4s;
+/* ----------------------------------------------------------------------------
+   Motion
+   -------------------------------------------------------------------------- */
+@keyframes rise {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
+.rise { animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
+.fade { animation: fade 0.5s ease both; }
+.msg-in { animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
 
-@keyframes typing {
-  0%, 60%, 100% {
-    transform: translateY(0);
-  }
-  30% {
-    transform: translateY(-10px);
+/* ----------------------------------------------------------------------------
+   Scrollbar
+   -------------------------------------------------------------------------- */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: var(--border-strong);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }
+
+/* ----------------------------------------------------------------------------
+   Reduced motion
+   -------------------------------------------------------------------------- */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
   }
 }
diff --git a/client/index.html b/client/index.html
index 0b03d94..04b361a 100644
--- a/client/index.html
+++ b/client/index.html
@@ -3,7 +3,18 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/logo.webp" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#f5f3ee" />
+    <meta name="description" content="EchoAI — a calm, modern AI chat companion." />
+
+    <!-- Calm, premium type pairing: Fraunces (soft serif headlines) + Plus Jakarta Sans (UI) -->
+    <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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+
     <link href="./index.css" rel="stylesheet" />
     <title>EchoAI</title>
   </head>
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 4585284..d7ecfbe 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,79 +1,65 @@
 /**
  * EchoAI Main Application Component
  *
- * This is the main React component that orchestrates the entire EchoAI application.
- * It manages chat state, API key management, theme switching, and error handling.
- *
- * Features:
- * - Chat message management and display
- * - Dark/light mode theme switching
- * - API key management and validation
- * - Error handling with retry mechanisms
- * - Suggestion prompts for common use cases
- * - Responsive design for all devices
+ * Orchestrates the workspace: a conversation sidebar, the chat workspace, API
+ * key management, theme switching and error handling. Conversations persist
+ * client-side via the useConversations store.
  *
  * @author EchoAI Contributors
  * @license Apache-2.0
  */
 
 import { Analytics } from '@vercel/analytics/react';
-import { useEffect, useReducer, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import ChatBody from './components/ChatBody';
 import ChatInput, { ChatInputRef, Message } from './components/ChatInput';
 import Header from './components/Header';
 import SettingsModal from './components/SettingsModal';
+import Sidebar from './components/Sidebar';
 import { fetchResponse } from './utils/Api';
 import { ApiKeyManager } from './utils/ApiKeyManager';
+import { useConversations } from './utils/useConversations';
 
-type AppState = {
-  chats: Message[];
-  isLoading: boolean;
-  isRetrying: boolean;
-};
-
-type AppAction =
-  | { type: 'ADD_MESSAGE'; message: Message }
-  | { type: 'REMOVE_ERROR_MESSAGE'; errorId: string }
-  | { type: 'SET_LOADING'; isLoading: boolean }
-  | { type: 'SET_RETRYING'; isRetrying: boolean }
-  | { type: 'SET_CHATS'; chats: Message[] };
+const NAME_KEY = 'echoai_display_name';
 
-function appReducer(state: AppState, action: AppAction): AppState {
-  switch (action.type) {
-    case 'ADD_MESSAGE':
-      return { ...state, chats: [...state.chats, action.message] };
-    case 'REMOVE_ERROR_MESSAGE':
-      return { ...state, chats: state.chats.filter(c => c.errorId !== action.errorId) };
-    case 'SET_LOADING':
-      return { ...state, isLoading: action.isLoading };
-    case 'SET_RETRYING':
-      return { ...state, isRetrying: action.isRetrying };
-    case 'SET_CHATS':
-      return { ...state, chats: action.chats };
-    default:
-      return state;
-  }
-}
+const newMessageId = (): string =>
+  Date.now().toString() + Math.random().toString(36).substr(2, 9);
 
 function App() {
-  const [state, dispatch] = useReducer(appReducer, {
-    chats: [],
-    isLoading: false,
-    isRetrying: false,
-  });
+  const {
+    conversations,
+    activeId,
+    activeChats,
+    selectConversation,
+    createConversation,
+    deleteConversation,
+    renameConversation,
+    addMessage,
+    removeErrorMessage,
+  } = useConversations();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRetrying, setIsRetrying] = useState(false);
   const [isDarkMode, setIsDarkMode] = useState(true);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
   const [userApiKey, setUserApiKey] = useState<string>('');
+  const [displayName, setDisplayName] = useState<string>('You');
 
   const chatInputRef = useRef<ChatInputRef>(null);
+  // The conversation a pending request belongs to (so a reply lands in the
+  // right chat even if the user switches conversations mid-request).
+  const pendingConvId = useRef<string>('');
 
-  const { chats, isLoading, isRetrying } = state;
-
-  // Load user API key on component mount
   useEffect(() => {
-    const storedApiKey = ApiKeyManager.getApiKey();
-    setUserApiKey(storedApiKey || '');
+    setUserApiKey(ApiKeyManager.getApiKey() || '');
+    try {
+      const stored = localStorage.getItem(NAME_KEY);
+      if (stored) setDisplayName(stored);
+    } catch {
+      /* ignore */
+    }
   }, []);
 
   const handleApiKeyChange = (newApiKey: string) => {
@@ -85,90 +71,72 @@ function App() {
     setUserApiKey(newApiKey);
   };
 
-  const handleRetryMessage = async (errorId: string) => {
-    // Find the user message that corresponds to this error
-    const errorIndex = chats.findIndex(chat => chat.errorId === errorId);
-    if (errorIndex === -1) return;
-
-    // Find the user message before this error
-    let userMessageIndex = -1;
-    for (let i = errorIndex - 1; i >= 0; i--) {
-      if (chats[i].sender === 'user') {
-        userMessageIndex = i;
-        break;
-      }
-    }
-
-    if (userMessageIndex === -1) return;
-
-    const userMessage = chats[userMessageIndex];
-
-    // Remove the error message
-    dispatch({ type: 'REMOVE_ERROR_MESSAGE', errorId });
-
-    dispatch({ type: 'SET_RETRYING', isRetrying: true });
-    dispatch({ type: 'SET_LOADING', isLoading: true });
-
+  const handleDisplayNameChange = (name: string) => {
+    const clean = name.trim() || 'You';
+    setDisplayName(clean);
     try {
-      mutation.mutate([userMessage]);
-    } catch (error) {
-      console.error('Retry failed:', error);
-    } finally {
-      dispatch({ type: 'SET_RETRYING', isRetrying: false });
+      localStorage.setItem(NAME_KEY, clean);
+    } catch {
+      /* ignore */
     }
   };
 
-  const handleUseOwnKey = () => {
-    setIsSettingsOpen(true);
-  };
-
   const mutation = useMutation({
-    mutationFn: (messages: Message[]) => {
-      return fetchResponse(messages);
-    },
+    mutationFn: (messages: Message[]) => fetchResponse(messages),
     onSuccess: (data: { message: string }) => {
-      dispatch({
-        type: 'ADD_MESSAGE',
-        message: {
-          id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
-          sender: 'ai',
-          message: data.message.replace(/^\n\n/, ''),
-        },
+      addMessage(pendingConvId.current || activeId, {
+        id: newMessageId(),
+        sender: 'ai',
+        message: data.message.replace(/^\n\n/, ''),
       });
-      dispatch({ type: 'SET_LOADING', isLoading: false });
     },
     onError: (error: unknown) => {
       console.error('Error fetching response:', error);
       const errorMessage =
         error instanceof Error ? error.message : 'Something went wrong. Please try again.';
-      const errorId = `error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-
-      dispatch({
-        type: 'ADD_MESSAGE',
-        message: {
-          id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
-          sender: 'ai',
-          message: errorMessage,
-          isError: true,
-          errorId: errorId,
-        },
+      addMessage(pendingConvId.current || activeId, {
+        id: newMessageId(),
+        sender: 'ai',
+        message: errorMessage,
+        isError: true,
+        errorId: `error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
       });
-      dispatch({ type: 'SET_LOADING', isLoading: false });
     },
     onSettled: () => {
-      // This runs after both success and error
-      dispatch({ type: 'SET_LOADING', isLoading: false });
+      setIsLoading(false);
+      setIsRetrying(false);
     },
   });
 
-  const sendMessage = async (message: Message) => {
-    dispatch({ type: 'ADD_MESSAGE', message });
-    dispatch({ type: 'SET_LOADING', isLoading: true });
+  const sendMessage = (message: Message) => {
+    pendingConvId.current = activeId;
+    addMessage(activeId, message);
+    setIsLoading(true);
     mutation.mutate([message]);
   };
 
+  const handleRetryMessage = (errorId: string) => {
+    const errorIndex = activeChats.findIndex(chat => chat.errorId === errorId);
+    if (errorIndex === -1) return;
+
+    let userMessageIndex = -1;
+    for (let i = errorIndex - 1; i >= 0; i--) {
+      if (activeChats[i].sender === 'user') {
+        userMessageIndex = i;
+        break;
+      }
+    }
+    if (userMessageIndex === -1) return;
+
+    const userMessage = activeChats[userMessageIndex];
+    pendingConvId.current = activeId;
+    removeErrorMessage(activeId, errorId);
+    setIsRetrying(true);
+    setIsLoading(true);
+    mutation.mutate([userMessage]);
+  };
+
   const handleSuggestionClick = (suggestion: string) => {
-    // Map suggestions to better AI prompts
     const promptMap: { [key: string]: string } = {
       'Explain quantum computing':
         'Please explain quantum computing in simple terms, covering the basic concepts like qubits, superposition, and entanglement, and how it differs from classical computing.',
@@ -179,73 +147,76 @@ function App() {
       'Plan a vacation':
         'Help me create a comprehensive vacation plan including popular destinations, must-visit attractions, recommended hotels, local cuisine, and travel tips.',
     };
-
-    const prompt = promptMap[suggestion] || suggestion;
-    chatInputRef.current?.setSuggestion(prompt);
+    chatInputRef.current?.setSuggestion(promptMap[suggestion] || suggestion);
   };
 
-  const toggleDarkMode = () => {
-    setIsDarkMode(!isDarkMode);
+  const handleNewChat = () => {
+    createConversation();
+    setIsSidebarOpen(false);
   };
 
-  return (
-    <div
-      className={`${
-        isDarkMode ? 'bg-slate-900' : 'bg-blue-50'
-      } min-h-screen transition-all duration-500`}
-      style={{ minHeight: '100vh' }}
-    >
-      {/* Background Gradient Overlay */}
-      <div
-        className={`absolute inset-0 ${
-          isDarkMode
-            ? 'bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900'
-            : 'bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50'
-        }`}
-      ></div>
+  const handleSelectConversation = (id: string) => {
+    selectConversation(id);
+    setIsSidebarOpen(false);
+  };
 
-      {/* Background Pattern */}
-      <div className='absolute inset-0 opacity-5'>
-        <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%239C92AC%22%20fill-opacity%3D%220.1%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%222%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')]"></div>
-      </div>
+  const toggleDarkMode = () => setIsDarkMode(prev => !prev);
 
-      <div className='relative z-10 flex flex-col min-h-screen' style={{ minHeight: '100vh' }}>
-        <Header
-          isDarkMode={isDarkMode}
-          toggleDarkMode={toggleDarkMode}
-          userApiKey={userApiKey}
+  return (
+    <div className={`relative h-dvh overflow-hidden ${isDarkMode ? '' : 'theme-light'}`}>
+      <div className='aura' />
+
+      <div className='relative z-10 flex h-full'>
+        <Sidebar
+          conversations={conversations}
+          activeId={activeId}
+          onSelect={handleSelectConversation}
+          onNewChat={handleNewChat}
+          onDelete={deleteConversation}
+          onRename={renameConversation}
+          displayName={displayName}
+          onDisplayNameChange={handleDisplayNameChange}
           onOpenSettings={() => setIsSettingsOpen(true)}
+          isOpen={isSidebarOpen}
+          onClose={() => setIsSidebarOpen(false)}
         />
 
-        {/* Main Chat Area */}
-        <main className='flex-1 flex flex-col max-w-4xl mx-auto w-full px-2 sm:px-4 py-4 sm:py-6'>
-          <div className='flex-1 overflow-hidden rounded-xl sm:rounded-2xl bg-white/5 backdrop-blur-sm border border-white/10 shadow-2xl'>
-            <div className='h-full overflow-auto p-3 sm:p-6'>
+        <div className='flex h-full min-w-0 flex-1 flex-col'>
+          <Header
+            isDarkMode={isDarkMode}
+            toggleDarkMode={toggleDarkMode}
+            userApiKey={userApiKey}
+            onOpenSettings={() => setIsSettingsOpen(true)}
+            onOpenSidebar={() => setIsSidebarOpen(true)}
+          />
+
+          <main className='min-h-0 flex-1 overflow-y-auto'>
+            <div className='mx-auto flex min-h-full w-full max-w-3xl flex-col px-4 py-6 sm:px-6'>
               <ChatBody
-                chats={chats}
+                chats={activeChats}
                 isDarkMode={isDarkMode}
                 isLoading={isLoading}
                 onSuggestionClick={handleSuggestionClick}
                 onRetryMessage={handleRetryMessage}
-                onUseOwnKey={handleUseOwnKey}
+                onUseOwnKey={() => setIsSettingsOpen(true)}
                 isRetrying={isRetrying}
               />
             </div>
-          </div>
+          </main>
 
-          {/* Chat Input */}
-          <div className='mt-4 sm:mt-6'>
-            <ChatInput
-              ref={chatInputRef}
-              sendMessage={sendMessage}
-              isLoading={isLoading}
-              isDarkMode={isDarkMode}
-            />
+          <div className='px-4 pb-4 sm:px-6 sm:pb-6'>
+            <div className='mx-auto w-full max-w-3xl'>
+              <ChatInput
+                ref={chatInputRef}
+                sendMessage={sendMessage}
+                isLoading={isLoading}
+                isDarkMode={isDarkMode}
+              />
+            </div>
           </div>
-        </main>
+        </div>
       </div>
 
-      {/* Settings Modal */}
       {isSettingsOpen && (
         <SettingsModal
           onClose={() => setIsSettingsOpen(false)}
diff --git a/client/src/components/AiChat.tsx b/client/src/components/AiChat.tsx
index 71a46a1..817d91a 100644
--- a/client/src/components/AiChat.tsx
+++ b/client/src/components/AiChat.tsx
@@ -1,62 +1,56 @@
-import { FC } from "react";
-import InlineErrorOptions from "./InlineErrorOptions";
+import { FC } from 'react';
+import InlineErrorOptions from './InlineErrorOptions';
+import Orb from './Orb';
 
 interface AiChatProps {
   message: string;
-  isDarkMode: boolean;
   isError?: boolean;
   onRetry?: () => void;
   onUseOwnKey?: () => void;
   isRetrying?: boolean;
 }
 
-const AiChat: FC<AiChatProps> = ({ 
-  message, 
-  isDarkMode, 
-  isError = false, 
-  onRetry, 
-  onUseOwnKey, 
-  isRetrying = false 
+const AiChat: FC<AiChatProps> = ({
+  message,
+  isError = false,
+  onRetry,
+  onUseOwnKey,
+  isRetrying = false,
 }) => {
   return (
-    <div className="flex justify-start mb-4">
-      <div className="flex items-end space-x-2 sm:space-x-3 max-w-[85%] sm:max-w-[80%]">
-        <div className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center shadow-lg flex-shrink-0 ${
-          isError 
-            ? 'bg-gradient-to-r from-red-400 to-red-500' 
-            : 'bg-gradient-to-r from-purple-400 to-pink-500'
-        }`}>
-          {isError ? (
-            <svg className="w-3 h-3 sm:w-4 sm:h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
+    <div className='flex justify-start msg-in'>
+      <div className='flex max-w-[88%] items-start gap-2.5 sm:max-w-[82%]'>
+        {isError ? (
+          <div
+            className='mt-0.5 grid h-8 w-8 flex-shrink-0 place-items-center rounded-full'
+            style={{
+              background: 'var(--danger-soft)',
+              border: '1px solid var(--danger)',
+            }}
+          >
+            <svg
+              className='h-4 w-4'
+              style={{ color: 'var(--danger)' }}
+              fill='none'
+              stroke='currentColor'
+              viewBox='0 0 24 24'
+            >
+              <path
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth={1.9}
+                d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z'
+              />
             </svg>
-          ) : (
-            <svg className="w-3 h-3 sm:w-4 sm:h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-            </svg>
-          )}
-        </div>
-        <div className={`rounded-2xl px-4 py-3 sm:px-6 sm:py-4 shadow-lg ${
-          isError
-            ? isDarkMode 
-              ? 'bg-red-900/20 backdrop-blur-sm border border-red-500/20 text-red-100' 
-              : 'bg-red-50 backdrop-blur-sm border border-red-200 text-red-800'
-            : isDarkMode 
-              ? 'bg-white/10 backdrop-blur-sm border border-white/20 text-white' 
-              : 'bg-white/80 backdrop-blur-sm border border-gray-200 text-gray-800'
-        }`}>
-          <p className="text-sm leading-relaxed whitespace-pre-wrap break-words">
-            {message}
-          </p>
-          
-          {/* Show error options if this is an error message */}
+          </div>
+        ) : (
+          <Orb variant='sm' className='mt-0.5' />
+        )}
+
+        <div className={`bubble ${isError ? 'bubble-error' : 'bubble-ai'}`}>
+          {message}
           {isError && onRetry && onUseOwnKey && (
-            <InlineErrorOptions
-              onRetry={onRetry}
-              onUseOwnKey={onUseOwnKey}
-              isDarkMode={isDarkMode}
-              isRetrying={isRetrying}
-            />
+            <InlineErrorOptions onRetry={onRetry} onUseOwnKey={onUseOwnKey} isRetrying={isRetrying} />
           )}
         </div>
       </div>
diff --git a/client/src/components/ChatBody.tsx b/client/src/components/ChatBody.tsx
index cae1f6b..b395449 100644
--- a/client/src/components/ChatBody.tsx
+++ b/client/src/components/ChatBody.tsx
@@ -1,7 +1,8 @@
 import autoAnimate from '@formkit/auto-animate';
-import { FC, useEffect, useRef } from 'react';
+import { FC, ReactNode, useEffect, useRef } from 'react';
 import AiChat from './AiChat';
 import { Message } from './ChatInput';
+import Orb from './Orb';
 import TypingIndicator from './TypingIndicator';
 import UserChat from './UserChat';
 
@@ -15,9 +16,64 @@ interface ChatBodyProps {
   isRetrying?: boolean;
 }
 
+/** Prompt presets — `key` matches App's promptMap; the rest is presentation. */
+const SUGGESTIONS: { key: string; title: string; hint: string; icon: ReactNode }[] = [
+  {
+    key: 'Explain quantum computing',
+    title: 'Explain a concept',
+    hint: 'Quantum computing, made simple',
+    icon: (
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.6}
+        d='M12 14a2 2 0 100-4 2 2 0 000 4zM12 12c5-5 8.5-6.8 9.5-5.8s-.8 4.5-5.8 9.5m0-9.4C10.5 6.4 7 8.2 6 7.2s.8-4.5 5.8-9.5'
+      />
+    ),
+  },
+  {
+    key: 'Write a creative story',
+    title: 'Write something',
+    hint: 'A short, original story',
+    icon: (
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.6}
+        d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z'
+      />
+    ),
+  },
+  {
+    key: 'Help with coding',
+    title: 'Help me build',
+    hint: 'Debug & best practices',
+    icon: (
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.6}
+        d='M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'
+      />
+    ),
+  },
+  {
+    key: 'Plan a vacation',
+    title: 'Plan a trip',
+    hint: 'A full itinerary, sorted',
+    icon: (
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth={1.6}
+        d='M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z'
+      />
+    ),
+  },
+];
+
 const ChatBody: FC<ChatBodyProps> = ({
   chats,
-  isDarkMode,
   isLoading = false,
   onSuggestionClick,
   onRetryMessage,
@@ -27,27 +83,26 @@ const ChatBody: FC<ChatBodyProps> = ({
   const parent = useRef(null);
   const bottomRef = useRef<HTMLDivElement | null>(null);
 
-  //for animation
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-unused-expressions
     parent.current && autoAnimate(parent.current);
   }, [parent]);
 
-  // for scrolling
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
   }, [chats, isLoading]);
 
+  const isEmpty = chats.length === 0 && !isLoading;
+
   return (
-    <div className='flex flex-col gap-6 h-full' ref={parent}>
+    <div className='flex flex-1 flex-col gap-5' ref={parent}>
       {chats.map((chat: Message) => {
         return chat.sender === 'user' ? (
-          <UserChat key={chat.id} message={chat.message} isDarkMode={isDarkMode} />
+          <UserChat key={chat.id} message={chat.message} />
         ) : (
           <AiChat
             key={chat.id}
             message={chat.message}
-            isDarkMode={isDarkMode}
             isError={chat.isError}
             onRetry={
               chat.isError && chat.errorId ? () => onRetryMessage?.(chat.errorId!) : undefined
@@ -58,71 +113,75 @@ const ChatBody: FC<ChatBodyProps> = ({
         );
       })}
 
-      {isLoading && <TypingIndicator isDarkMode={isDarkMode} />}
+      {isLoading && <TypingIndicator />}
 
-      {chats.length === 0 && !isLoading && (
-        <div className='flex flex-col items-center justify-center h-full text-center animate-fadeIn'>
-          <div className='mb-8'>
-            <div className='w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-r from-purple-400 to-pink-400 flex items-center justify-center animate-bounce-slow'>
-              <svg
-                className='w-10 h-10 text-white'
-                fill='none'
-                stroke='currentColor'
-                viewBox='0 0 24 24'
-              >
-                <path
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                  strokeWidth={2}
-                  d='M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z'
-                />
-              </svg>
-            </div>
+      {isEmpty && (
+        <div className='flex flex-1 flex-col items-center justify-center px-2 text-center'>
+          <div className='rise'>
+            <Orb variant='hero' />
           </div>
+
           <h2
-            className={`text-3xl font-bold mb-4 gradient-text ${isDarkMode ? 'text-white' : 'text-gray-800'}`}
+            className='font-display mt-9 max-w-xl text-[32px] font-medium leading-[1.12] sm:text-[44px] rise'
+            style={{ color: 'var(--text)', animationDelay: '0.1s' }}
           >
-            Welcome to EchoAI
+            How can I help <span style={{ color: 'var(--accent-ink)' }}>you</span> today?
           </h2>
-          <p className={`text-lg mb-8 max-w-md ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
-            Your intelligent AI assistant is ready to help. Ask me anything!
+
+          <p
+            className='mt-4 max-w-md text-[15px] leading-relaxed rise'
+            style={{ color: 'var(--text-dim)', animationDelay: '0.18s' }}
+          >
+            Ask anything, explore an idea, or start with one of these.
           </p>
-          <div className='grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 max-w-2xl w-full'>
-            {[
-              'Explain quantum computing',
-              'Write a creative story',
-              'Help with coding',
-              'Plan a vacation',
-            ].map((suggestion, index) => (
-              <div
-                key={suggestion}
-                role='button'
-                tabIndex={0}
-                onKeyDown={e => {
-                  if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    onSuggestionClick?.(suggestion);
-                  }
-                }}
-                onClick={() => onSuggestionClick?.(suggestion)}
-                className={`p-3 sm:p-4 rounded-xl border transition-all duration-300 hover:scale-105 cursor-pointer hover-lift ${
-                  isDarkMode
-                    ? 'bg-white/5 border-white/10 hover:bg-white/10'
-                    : 'bg-white/50 border-gray-200 hover:bg-white/80'
-                }`}
-                style={{ animationDelay: `${index * 0.1}s` }}
+
+          <div className='mt-10 grid w-full max-w-2xl grid-cols-1 gap-3.5 sm:grid-cols-2'>
+            {SUGGESTIONS.map((s, index) => (
+              <button
+                key={s.key}
+                type='button'
+                onClick={() => onSuggestionClick?.(s.key)}
+                className='suggest-card rise'
+                style={{ animationDelay: `${0.26 + index * 0.08}s` }}
               >
-                <p
-                  className={`text-xs sm:text-sm ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}
-                >
-                  {suggestion}
+                <div className='flex items-start justify-between gap-3'>
+                  <span className='suggest-card__icon'>
+                    <svg
+                      className='h-[22px] w-[22px]'
+                      fill='none'
+                      stroke='currentColor'
+                      viewBox='0 0 24 24'
+                    >
+                      {s.icon}
+                    </svg>
+                  </span>
+                  <svg
+                    className='suggest-card__arrow h-[18px] w-[18px]'
+                    fill='none'
+                    stroke='currentColor'
+                    viewBox='0 0 24 24'
+                  >
+                    <path
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                      strokeWidth={2}
+                      d='M7 17L17 7M17 7H8M17 7v9'
+                    />
+                  </svg>
+                </div>
+                <h3 className='mt-4 text-[15.5px] font-semibold' style={{ color: 'var(--text)' }}>
+                  {s.title}
+                </h3>
+                <p className='mt-1 text-[13.5px]' style={{ color: 'var(--text-dim)' }}>
+                  {s.hint}
                 </p>
-              </div>
+              </button>
             ))}
           </div>
         </div>
       )}
-      <div ref={bottomRef} className='h-4'></div>
+
+      <div ref={bottomRef} className='h-1'></div>
     </div>
   );
 };
diff --git a/client/src/components/ChatInput.tsx b/client/src/components/ChatInput.tsx
index b18caf0..dfe530a 100644
--- a/client/src/components/ChatInput.tsx
+++ b/client/src/components/ChatInput.tsx
@@ -18,23 +18,22 @@ interface ChatInputProps {
   isDarkMode: boolean;
 }
 
+const MAX = 2000;
+
 const ChatInput = React.forwardRef<ChatInputRef, ChatInputProps>(
-  ({ sendMessage, isLoading, isDarkMode }, ref) => {
+  ({ sendMessage, isLoading }, ref) => {
     const [value, setValue] = useState('');
     const textareaRef = useRef<HTMLTextAreaElement>(null);
 
     React.useImperativeHandle(ref, () => ({
       setSuggestion: (text: string) => {
         setValue(text);
-        if (textareaRef.current) {
-          textareaRef.current.focus();
-        }
+        textareaRef.current?.focus();
       },
     }));
 
     const handleSubmit = () => {
       if (value.trim() === '' || isLoading) return;
-
       sendMessage({
         id: Date.now().toString() + Math.random().toString(36).substr(2, 9),
         sender: 'user',
@@ -58,78 +57,56 @@ const ChatInput = React.forwardRef<ChatInputRef, ChatInputProps>(
       }
     }, [value]);
 
+    const canSend = value.trim() !== '' && !isLoading;
+
     return (
-      <div
-        className={`w-full rounded-2xl border transition-all duration-300 ${
-          isDarkMode
-            ? 'bg-white/10 backdrop-blur-sm border-white/20 hover:border-white/30'
-            : 'bg-white/80 backdrop-blur-sm border-gray-200 hover:border-gray-300'
-        } shadow-lg`}
-      >
-        <div className='flex items-end p-3 sm:p-4 space-x-2 sm:space-x-3'>
-          <div className='flex-1'>
-            <textarea
-              ref={textareaRef}
-              rows={1}
-              value={value}
-              onChange={e => setValue(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder='Type your message here...'
-              data-testid='chat-input'
-              disabled={isLoading}
-              className={`w-full resize-none border-0 bg-transparent outline-none text-sm leading-relaxed placeholder-opacity-60 ${
-                isDarkMode
-                  ? 'text-white placeholder-white/60'
-                  : 'text-gray-800 placeholder-gray-500'
-              }`}
-              style={{ minHeight: '20px', maxHeight: '120px' }}
-            />
-          </div>
+      <div className='composer'>
+        <div className='flex items-end gap-2.5 px-3 py-2.5 sm:px-4 sm:py-3'>
+          <textarea
+            ref={textareaRef}
+            rows={1}
+            value={value}
+            onChange={e => setValue(e.target.value.slice(0, MAX))}
+            onKeyDown={handleKeyDown}
+            placeholder='Message EchoAI…'
+            data-testid='chat-input'
+            disabled={isLoading}
+            className='flex-1 py-1.5'
+            style={{ minHeight: '24px', maxHeight: '160px' }}
+          />
 
-          <div className='flex items-center space-x-2'>
-            {isLoading ? (
-              <div className='flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-r from-purple-400 to-pink-500'>
-                <div className='w-4 h-4 sm:w-5 sm:h-5 border-2 border-white border-t-transparent rounded-full animate-spin'></div>
-              </div>
-            ) : (
-              <button
-                onClick={handleSubmit}
-                disabled={value.trim() === ''}
-                className={`w-8 h-8 sm:w-10 sm:h-10 rounded-full transition-all duration-300 flex items-center justify-center ${
-                  value.trim() === ''
-                    ? isDarkMode
-                      ? 'bg-white/10 text-white/40 cursor-not-allowed'
-                      : 'bg-gray-200 text-gray-400 cursor-not-allowed'
-                    : 'bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white shadow-lg hover:shadow-xl transform hover:scale-105'
-                }`}
-              >
-                <svg
-                  className='w-4 h-4 sm:w-5 sm:h-5'
-                  fill='none'
-                  stroke='currentColor'
-                  viewBox='0 0 24 24'
-                >
-                  <path
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    strokeWidth={2}
-                    d='M12 19l9 2-9-18-9 18 9-2zm0 0v-8'
-                  />
-                </svg>
-              </button>
-            )}
-          </div>
+          {isLoading ? (
+            <div className='btn-accent btn-round h-10 w-10' aria-label='Generating'>
+              <span className='h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70' />
+            </div>
+          ) : (
+            <button
+              onClick={handleSubmit}
+              disabled={!canSend}
+              className='btn-accent btn-round h-10 w-10'
+              aria-label='Send message'
+            >
+              <svg className='h-[18px] w-[18px]' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth={2}
+                  d='M5 12h14M13 6l6 6-6 6'
+                />
+              </svg>
+            </button>
+          )}
         </div>
 
-        {/* Character count and tips */}
         <div
-          className={`px-3 sm:px-4 pb-2 text-xs flex justify-between items-center ${
-            isDarkMode ? 'text-white/50' : 'text-gray-500'
-          }`}
+          className='flex items-center justify-between px-4 pb-2 text-[11px]'
+          style={{ color: 'var(--text-faint)' }}
         >
-          <span className='hidden sm:inline'>Press Enter to send, Shift+Enter for new line</span>
+          <span className='hidden sm:inline'>Enter to send · Shift + Enter for a new line</span>
           <span className='sm:hidden'>Enter to send</span>
-          <span>{value.length}/2000</span>
+          <span>
+            {value.length}/{MAX}
+          </span>
         </div>
       </div>
     );
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
index 1e7a1d4..fea8904 100644
--- a/client/src/components/Header.tsx
+++ b/client/src/components/Header.tsx
@@ -1,129 +1,89 @@
 import { FC } from 'react';
+import Orb from './Orb';
 
 export interface HeaderProps {
   isDarkMode: boolean;
   toggleDarkMode: () => void;
   userApiKey: string;
   onOpenSettings: () => void;
+  onOpenSidebar: () => void;
 }
 
-const Header: FC<HeaderProps> = ({ isDarkMode, toggleDarkMode, userApiKey, onOpenSettings }) => {
+const Header: FC<HeaderProps> = ({
+  isDarkMode,
+  toggleDarkMode,
+  userApiKey,
+  onOpenSettings,
+  onOpenSidebar,
+}) => {
   return (
-    <header className='flex items-center justify-between p-4 sm:p-6 border-b border-white/10 backdrop-blur-sm'>
-      <div className='flex items-center space-x-3 sm:space-x-4'>
-        <div className='relative'>
-          <img
-            src='/logo.webp'
-            className='h-10 w-10 sm:h-12 sm:w-12 rounded-full shadow-lg'
-            alt='EchoAI Logo'
-          />
-          <div className='absolute -top-1 -right-1 w-3 h-3 sm:w-4 sm:h-4 bg-green-400 rounded-full animate-pulse'></div>
-        </div>
-        <div>
-          <h1
-            className={`text-xl sm:text-2xl font-bold ${
-              isDarkMode ? 'text-white' : 'text-gray-800'
-            }`}
-          >
+    <header
+      className='relative z-10 flex items-center justify-between gap-3 px-4 sm:px-6 py-3.5 fade'
+      style={{ borderBottom: '1px solid var(--border)' }}
+    >
+      <div className='flex items-center gap-2.5'>
+        <button onClick={onOpenSidebar} className='icon-btn h-9 w-9 md:hidden' aria-label='Open menu'>
+          <svg className='h-[18px] w-[18px]' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+            <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.8} d='M4 6h16M4 12h16M4 18h16' />
+          </svg>
+        </button>
+
+        {/* Brand — shown on mobile (sidebar carries it on desktop) */}
+        <div className='flex items-center gap-2 md:hidden'>
+          <Orb variant='sm' />
+          <span className='text-[16px] font-bold tracking-tight' style={{ color: 'var(--text)' }}>
             EchoAI
-          </h1>
-          <p
-            className={`text-xs sm:text-sm ${
-              isDarkMode ? 'text-gray-300' : 'text-gray-600'
-            } hidden sm:block`}
-          >
-            Your intelligent AI assistant
-          </p>
+          </span>
+        </div>
+
+        {/* Status — desktop */}
+        <div className='hidden items-center gap-2 md:flex' style={{ color: 'var(--text-dim)' }}>
+          <span className='chip__dot' style={{ background: '#34d399' }} />
+          <span className='text-[13px]'>Online · ready to help</span>
         </div>
       </div>
 
-      <div className='flex items-center space-x-2 sm:space-x-4'>
-        {/* API Key Status Indicator */}
+      <div className='flex items-center gap-2'>
         {userApiKey && (
-          <div
-            className={`px-3 py-1 rounded-full text-xs font-medium ${
-              isDarkMode
-                ? 'bg-green-900/20 text-green-300 border border-green-500/20'
-                : 'bg-green-50 text-green-700 border border-green-200'
-            }`}
-          >
-            <div className='flex items-center space-x-1'>
-              <div className='w-2 h-2 bg-green-400 rounded-full animate-pulse'></div>
-              <span>Your Key</span>
-            </div>
+          <div className='chip' title='Using your own API key'>
+            <span className='chip__dot' />
+            <span className='hidden sm:inline'>Your key</span>
+            <span className='sm:hidden'>Key</span>
           </div>
         )}
 
-        {/* Settings Button */}
         <button
           onClick={onOpenSettings}
           data-testid='settings-button'
-          className={`p-2 rounded-full transition-all duration-300 ${
-            isDarkMode
-              ? 'bg-white/10 hover:bg-white/20 text-white'
-              : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
-          }`}
+          className='icon-btn'
           title='API Settings'
+          aria-label='API Settings'
         >
-          <svg
-            className='w-4 h-4 sm:w-5 sm:h-5'
-            fill='none'
-            stroke='currentColor'
-            viewBox='0 0 24 24'
-          >
+          <svg className='h-[18px] w-[18px]' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
             <path
               strokeLinecap='round'
               strokeLinejoin='round'
-              strokeWidth={2}
+              strokeWidth={1.7}
               d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'
             />
-            <path
-              strokeLinecap='round'
-              strokeLinejoin='round'
-              strokeWidth={2}
-              d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'
-            />
+            <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.7} d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' />
           </svg>
         </button>
 
-        {/* Dark Mode Toggle */}
         <button
           onClick={toggleDarkMode}
           data-testid='dark-mode-toggle'
-          className={`p-2 rounded-full transition-all duration-300 ${
-            isDarkMode
-              ? 'bg-white/10 hover:bg-white/20 text-white'
-              : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
-          }`}
+          className='icon-btn'
           title='Toggle Theme'
+          aria-label='Toggle Theme'
         >
           {isDarkMode ? (
-            <svg
-              className='w-4 h-4 sm:w-5 sm:h-5'
-              fill='none'
-              stroke='currentColor'
-              viewBox='0 0 24 24'
-            >
-              <path
-                strokeLinecap='round'
-                strokeLinejoin='round'
-                strokeWidth={2}
-                d='M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z'
-              />
+            <svg className='h-[18px] w-[18px]' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.7} d='M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z' />
             </svg>
           ) : (
-            <svg
-              className='w-4 h-4 sm:w-5 sm:h-5'
-              fill='none'
-              stroke='currentColor'
-              viewBox='0 0 24 24'
-            >
-              <path
-                strokeLinecap='round'
-                strokeLinejoin='round'
-                strokeWidth={2}
-                d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z'
-              />
+            <svg className='h-[18px] w-[18px]' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.7} d='M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z' />
             </svg>
           )}
         </button>
diff --git a/client/src/components/InlineErrorOptions.tsx b/client/src/components/InlineErrorOptions.tsx
index d68cf28..e47cd30 100644
--- a/client/src/components/InlineErrorOptions.tsx
+++ b/client/src/components/InlineErrorOptions.tsx
@@ -1,90 +1,69 @@
-import { FC } from "react";
+import { FC } from 'react';
 
 interface InlineErrorOptionsProps {
   onRetry: () => void;
   onUseOwnKey: () => void;
-  isDarkMode: boolean;
   isRetrying?: boolean;
 }
 
-const InlineErrorOptions: FC<InlineErrorOptionsProps> = ({ 
-  onRetry, 
-  onUseOwnKey, 
-  isDarkMode, 
-  isRetrying = false 
+const InlineErrorOptions: FC<InlineErrorOptionsProps> = ({
+  onRetry,
+  onUseOwnKey,
+  isRetrying = false,
 }) => {
   return (
-    <div className="mt-4 space-y-3">
-      <p className={`text-sm ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
+    <div className='mt-4 space-y-3'>
+      <p className='text-[13px]' style={{ color: 'var(--text-dim)' }}>
         What would you like to do?
       </p>
-      
-      <div className="flex flex-col sm:flex-row gap-3">
-        {/* Retry Button */}
-        <button
-          onClick={onRetry}
-          disabled={isRetrying}
-          className={`flex-1 px-4 py-3 rounded-xl border transition-all duration-300 ${
-            isRetrying
-              ? isDarkMode
-                ? 'bg-gray-700 border-gray-600 text-gray-400 cursor-not-allowed'
-                : 'bg-gray-100 border-gray-300 text-gray-500 cursor-not-allowed'
-              : isDarkMode
-                ? 'bg-blue-900/20 border-blue-500/20 hover:bg-blue-900/30 text-blue-300 hover:border-blue-400/30'
-                : 'bg-blue-50 border-blue-200 hover:bg-blue-100 text-blue-700 hover:border-blue-300'
-          }`}
-        >
-          <div className="flex items-center justify-center space-x-2">
+
+      <div className='flex flex-col gap-2.5 sm:flex-row'>
+        <button onClick={onRetry} disabled={isRetrying} className='btn-soft flex-1'>
+          <span className='flex items-center justify-center gap-2'>
             {isRetrying ? (
-              <div className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
+              <span className='h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent' />
             ) : (
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+              <svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  strokeWidth={1.9}
+                  d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'
+                />
               </svg>
             )}
-            <span className="font-medium">
-              {isRetrying ? 'Retrying...' : 'Try Again'}
-            </span>
-          </div>
+            {isRetrying ? 'Retrying…' : 'Try again'}
+          </span>
         </button>
 
-        {/* Use Own API Key Button */}
         <button
           onClick={onUseOwnKey}
-          className={`flex-1 px-4 py-3 rounded-xl border transition-all duration-300 ${
-            isDarkMode
-              ? 'bg-purple-900/20 border-purple-500/20 hover:bg-purple-900/30 text-purple-300 hover:border-purple-400/30'
-              : 'bg-purple-50 border-purple-200 hover:bg-purple-100 text-purple-700 hover:border-purple-300'
-          }`}
+          className='flex-1 btn-accent'
+          style={{ padding: '12px 16px', borderRadius: 'var(--r-md)' }}
         >
-          <div className="flex items-center justify-center space-x-2">
-            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+          <span className='flex items-center justify-center gap-2 font-medium'>
+            <svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth={1.9}
+                d='M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z'
+              />
             </svg>
-            <span className="font-medium">Use Your API Key</span>
-          </div>
+            Use your API key
+          </span>
         </button>
       </div>
 
-      {/* Info */}
-      <div className={`p-3 rounded-xl ${
-        isDarkMode ? 'bg-blue-900/10 border border-blue-500/10' : 'bg-blue-50 border border-blue-200'
-      }`}>
-        <div className="flex items-start space-x-2">
-          <svg className={`w-4 h-4 mt-0.5 ${isDarkMode ? 'text-blue-400' : 'text-blue-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-          <div>
-            <p className={`text-xs font-medium ${isDarkMode ? 'text-blue-300' : 'text-blue-700'}`}>
-              Using your own API key provides:
-            </p>
-            <ul className={`text-xs mt-1 space-y-0.5 ${isDarkMode ? 'text-blue-200' : 'text-blue-600'}`}>
-              <li>• Higher rate limits and faster responses</li>
-              <li>• Complete privacy for your conversations</li>
-              <li>• No dependency on server availability</li>
-            </ul>
-          </div>
-        </div>
+      <div className='info-panel p-3'>
+        <p className='text-[12px] font-medium' style={{ color: 'var(--text)' }}>
+          Your own key unlocks:
+        </p>
+        <ul className='mt-1 space-y-0.5 text-[12px]' style={{ color: 'var(--text-dim)' }}>
+          <li>• Higher rate limits & faster responses</li>
+          <li>• Complete privacy for your conversations</li>
+          <li>• No dependency on server availability</li>
+        </ul>
       </div>
     </div>
   );
diff --git a/client/src/components/Orb.tsx b/client/src/components/Orb.tsx
new file mode 100644
index 0000000..61f21dd
--- /dev/null
+++ b/client/src/components/Orb.tsx
@@ -0,0 +1,41 @@
+/**
+ * Orb — EchoAI's calm "presence" mark.
+ *
+ * A soft glass-marble built purely in CSS: a blurred pastel halo, a glossy
+ * gradient ball with a specular sheen. It breathes slowly at rest and a little
+ * quicker while the assistant is thinking. Used as the hero mark, the brand
+ * mark and the assistant avatar.
+ *
+ * @license Apache-2.0
+ */
+import { FC } from 'react';
+
+interface OrbProps {
+  /** 'hero' for the large landing mark, 'sm' for an inline avatar. */
+  variant?: 'hero' | 'sm';
+  /** Breathes a little faster while the assistant is generating. */
+  thinking?: boolean;
+  className?: string;
+}
+
+const Orb: FC<OrbProps> = ({ variant = 'hero', thinking = false, className = '' }) => {
+  const classes = [
+    'orb',
+    'orb--breathe',
+    variant === 'sm' ? 'orb--sm' : '',
+    thinking ? 'orb--thinking' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={classes} aria-hidden="true">
+      <span className="orb__halo" />
+      <span className="orb__ball" />
+      <span className="orb__sheen" />
+    </div>
+  );
+};
+
+export default Orb;
diff --git a/client/src/components/SettingsModal.tsx b/client/src/components/SettingsModal.tsx
index fa6de8b..16b9e32 100644
--- a/client/src/components/SettingsModal.tsx
+++ b/client/src/components/SettingsModal.tsx
@@ -8,24 +8,21 @@ interface SettingsModalProps {
   currentApiKey: string;
 }
 
-const SettingsModal: FC<SettingsModalProps> = ({
-  onClose,
-  isDarkMode,
-  onApiKeyChange,
-  currentApiKey,
-}) => {
+const SettingsModal: FC<SettingsModalProps> = ({ onClose, onApiKeyChange, currentApiKey }) => {
   const [apiKey, setApiKey] = useState(() => currentApiKey);
   const [showApiKey, setShowApiKey] = useState(false);
   const [isValidating, setIsValidating] = useState(false);
   const [validationMessage, setValidationMessage] = useState('');
 
+  const isPositive =
+    validationMessage.includes('success') || validationMessage.includes('cleared');
+
   const handleSave = async () => {
     if (!apiKey.trim()) {
       setValidationMessage('Please enter an API key');
       return;
     }
 
-    // Validate API key format
     const formatValidation = ApiKeyManager.validateApiKeyFormat(apiKey);
     if (!formatValidation.isValid) {
       setValidationMessage(formatValidation.message);
@@ -36,23 +33,17 @@ const SettingsModal: FC<SettingsModalProps> = ({
     setValidationMessage('');
 
     try {
-      // Test the API key
       const testResult = await ApiKeyManager.testApiKey(apiKey);
-
       if (testResult.isValid) {
         onApiKeyChange(apiKey);
         setValidationMessage('API key saved successfully!');
-        setTimeout(() => {
-          onClose();
-        }, 1500);
+        setTimeout(() => onClose(), 1500);
       } else {
         setValidationMessage(testResult.message);
       }
     } catch (error) {
       console.error('API key validation error:', error);
-      setValidationMessage(
-        'Failed to validate API key. Please check your connection and try again.'
-      );
+      setValidationMessage('Failed to validate API key. Please check your connection and try again.');
     } finally {
       setIsValidating(false);
     }
@@ -62,64 +53,56 @@ const SettingsModal: FC<SettingsModalProps> = ({
     setApiKey('');
     onApiKeyChange('');
     setValidationMessage('API key cleared. Using default server key.');
-    setTimeout(() => {
-      onClose();
-    }, 1500);
+    setTimeout(() => onClose(), 1500);
   };
 
   return (
-    <div className='fixed inset-0 z-50 flex items-center justify-center p-4'>
+    <div className='fixed inset-0 z-50 flex items-center justify-center p-4 fade'>
       {/* Backdrop */}
       <div
         role='button'
         tabIndex={0}
+        aria-label='Close settings'
         onKeyDown={e => {
           if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             onClose();
           }
         }}
-        className='absolute inset-0 bg-black/50 backdrop-blur-sm'
+        className='absolute inset-0'
+        style={{ background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(6px)' }}
         onClick={onClose}
       />
 
       {/* Modal */}
-      <div
-        data-testid='settings-modal'
-        className={`relative w-full max-w-md rounded-2xl shadow-2xl ${
-          isDarkMode ? 'bg-slate-800 border border-white/20' : 'bg-white border border-gray-200'
-        }`}
-      >
+      <div data-testid='settings-modal' className='modal-card relative w-full max-w-md rise'>
         {/* Header */}
-        <div className='flex items-center justify-between p-6 border-b border-white/10'>
-          <h2 className={`text-xl font-semibold ${isDarkMode ? 'text-white' : 'text-gray-800'}`}>
+        <div
+          className='flex items-center justify-between p-6'
+          style={{ borderBottom: '1px solid var(--border)' }}
+        >
+          <h2 className='font-display text-xl font-semibold' style={{ color: 'var(--text)' }}>
             API Settings
           </h2>
           <button
             onClick={onClose}
             data-testid='settings-close'
-            className={`p-2 rounded-full transition-colors ${
-              isDarkMode ? 'hover:bg-white/10 text-white' : 'hover:bg-gray-100 text-gray-600'
-            }`}
+            className='icon-btn h-9 w-9'
+            aria-label='Close'
           >
-            <svg className='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-              <path
-                strokeLinecap='round'
-                strokeLinejoin='round'
-                strokeWidth={2}
-                d='M6 18L18 6M6 6l12 12'
-              />
+            <svg className='h-[18px] w-[18px]' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.9} d='M6 18L18 6M6 6l12 12' />
             </svg>
           </button>
         </div>
 
         {/* Content */}
-        <div className='p-6 space-y-6'>
-          {/* API Key Input */}
-          <div className='space-y-3'>
+        <div className='space-y-5 p-6'>
+          <div className='space-y-2.5'>
             <label
               htmlFor='api-key-input'
-              className={`block text-sm font-medium ${isDarkMode ? 'text-white' : 'text-gray-700'}`}
+              className='block text-sm font-medium'
+              style={{ color: 'var(--text)' }}
             >
               OpenAI API Key
             </label>
@@ -129,123 +112,79 @@ const SettingsModal: FC<SettingsModalProps> = ({
                 type={showApiKey ? 'text' : 'password'}
                 value={apiKey}
                 onChange={e => setApiKey(e.target.value)}
-                placeholder='sk-...'
-                className={`w-full px-4 py-3 pr-12 rounded-xl border transition-colors ${
-                  isDarkMode
-                    ? 'bg-slate-700 border-white/20 text-white placeholder-white/50 focus:border-purple-400'
-                    : 'bg-gray-50 border-gray-200 text-gray-800 placeholder-gray-400 focus:border-purple-400'
-                } focus:outline-none focus:ring-2 focus:ring-purple-400/20`}
+                placeholder='sk-…'
+                className='field'
               />
               <button
                 type='button'
                 onClick={() => setShowApiKey(!showApiKey)}
-                className={`absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded ${
-                  isDarkMode
-                    ? 'text-white/60 hover:text-white'
-                    : 'text-gray-400 hover:text-gray-600'
-                }`}
+                aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
+                className='absolute right-3 top-1/2 -translate-y-1/2'
+                style={{ color: 'var(--text-faint)' }}
               >
                 {showApiKey ? (
-                  <svg className='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                  <svg className='h-5 w-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
                     <path
                       strokeLinecap='round'
                       strokeLinejoin='round'
-                      strokeWidth={2}
+                      strokeWidth={1.8}
                       d='M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21'
                     />
                   </svg>
                 ) : (
-                  <svg className='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                  <svg className='h-5 w-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.8} d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' />
                     <path
                       strokeLinecap='round'
                       strokeLinejoin='round'
-                      strokeWidth={2}
-                      d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'
-                    />
-                    <path
-                      strokeLinecap='round'
-                      strokeLinejoin='round'
-                      strokeWidth={2}
+                      strokeWidth={1.8}
                       d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'
                     />
                   </svg>
                 )}
               </button>
             </div>
+            <p className='text-[12px]' style={{ color: 'var(--text-faint)' }}>
+              Stored only in this browser session — never sent to our servers.
+            </p>
           </div>
 
-          {/* Info Text */}
-          <div
-            className={`p-4 rounded-xl ${
-              isDarkMode
-                ? 'bg-blue-900/20 border border-blue-500/20'
-                : 'bg-blue-50 border border-blue-200'
-            }`}
-          >
-            <div className='flex items-start space-x-3'>
-              <svg
-                className={`w-5 h-5 mt-0.5 ${isDarkMode ? 'text-blue-400' : 'text-blue-600'}`}
-                fill='none'
-                stroke='currentColor'
-                viewBox='0 0 24 24'
+          {/* Info */}
+          <div className='info-panel p-4'>
+            <p className='text-sm font-medium' style={{ color: 'var(--text)' }}>
+              Why use your own API key?
+            </p>
+            <ul className='mt-2 space-y-1 text-[12px]' style={{ color: 'var(--text-dim)' }}>
+              <li>• Higher rate limits and faster responses</li>
+              <li>• Your conversations stay private</li>
+              <li>• Backup when our server is down</li>
+            </ul>
+            <p className='mt-2 text-[12px]' style={{ color: 'var(--text-dim)' }}>
+              Get your key from{' '}
+              <a
+                href='https://platform.openai.com/api-keys'
+                target='_blank'
+                rel='noopener noreferrer'
+                className='underline hover:no-underline'
+                style={{ color: 'var(--accent-ink)' }}
               >
-                <path
-                  strokeLinecap='round'
-                  strokeLinejoin='round'
-                  strokeWidth={2}
-                  d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
-                />
-              </svg>
-              <div className='space-y-2'>
-                <p className={`text-sm ${isDarkMode ? 'text-blue-300' : 'text-blue-700'}`}>
-                  <strong>Why use your own API key?</strong>
-                </p>
-                <ul
-                  className={`text-xs space-y-1 ${isDarkMode ? 'text-blue-200' : 'text-blue-600'}`}
-                >
-                  <li>• Higher rate limits and faster responses</li>
-                  <li>• Your conversations stay private</li>
-                  <li>• Backup when our server is down</li>
-                  <li>• No usage restrictions</li>
-                </ul>
-                <p className={`text-xs ${isDarkMode ? 'text-blue-200' : 'text-blue-600'}`}>
-                  Get your API key from{' '}
-                  <a
-                    href='https://platform.openai.com/api-keys'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    className='underline hover:no-underline'
-                  >
-                    OpenAI Platform
-                  </a>
-                </p>
-              </div>
-            </div>
+                OpenAI Platform
+              </a>
+            </p>
           </div>
 
           {/* Validation Message */}
           {validationMessage && (
             <div
-              className={`p-3 rounded-xl ${
-                validationMessage.includes('success') || validationMessage.includes('cleared')
-                  ? isDarkMode
-                    ? 'bg-green-900/20 border border-green-500/20'
-                    : 'bg-green-50 border border-green-200'
-                  : isDarkMode
-                    ? 'bg-red-900/20 border border-red-500/20'
-                    : 'bg-red-50 border border-red-200'
-              }`}
+              className='rounded-2xl p-3'
+              style={{
+                background: isPositive ? 'var(--accent-soft)' : 'var(--danger-soft)',
+                border: `1px solid ${isPositive ? 'var(--accent-ring)' : 'var(--danger)'}`,
+              }}
             >
               <p
-                className={`text-sm ${
-                  validationMessage.includes('success') || validationMessage.includes('cleared')
-                    ? isDarkMode
-                      ? 'text-green-300'
-                      : 'text-green-700'
-                    : isDarkMode
-                      ? 'text-red-300'
-                      : 'text-red-700'
-                }`}
+                className='text-sm'
+                style={{ color: isPositive ? 'var(--accent-ink)' : 'var(--danger)' }}
               >
                 {validationMessage}
               </p>
@@ -253,32 +192,21 @@ const SettingsModal: FC<SettingsModalProps> = ({
           )}
 
           {/* Actions */}
-          <div className='flex space-x-3'>
-            <button
-              onClick={handleClear}
-              disabled={isValidating}
-              className={`flex-1 px-4 py-3 rounded-xl font-medium transition-colors ${
-                isDarkMode
-                  ? 'bg-white/10 text-white hover:bg-white/20 disabled:opacity-50'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:opacity-50'
-              }`}
-            >
+          <div className='flex gap-3'>
+            <button onClick={handleClear} disabled={isValidating} className='btn-soft flex-1'>
               Clear Key
             </button>
             <button
               onClick={handleSave}
               disabled={isValidating}
-              className={`flex-1 px-4 py-3 rounded-xl font-medium transition-colors ${
-                isValidating
-                  ? 'bg-gray-400 text-white cursor-not-allowed'
-                  : 'bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:from-purple-600 hover:to-pink-600'
-              }`}
+              className='btn-accent flex-1'
+              style={{ padding: '12px 16px', borderRadius: 'var(--r-md)' }}
             >
               {isValidating ? (
-                <div className='flex items-center justify-center space-x-2'>
-                  <div className='w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin'></div>
-                  <span>Validating...</span>
-                </div>
+                <span className='flex items-center justify-center gap-2'>
+                  <span className='h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70' />
+                  Validating…
+                </span>
               ) : (
                 'Save Key'
               )}
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
new file mode 100644
index 0000000..2f15e2e
--- /dev/null
+++ b/client/src/components/Sidebar.tsx
@@ -0,0 +1,246 @@
+/**
+ * Sidebar — the workspace navigation rail.
+ *
+ * Holds the "New chat" action, the persisted conversation history (select /
+ * rename / delete) and a profile row at the bottom with an editable local
+ * display name and a shortcut into Settings. Fixed on desktop, a slide-in
+ * drawer on small screens.
+ *
+ * @license Apache-2.0
+ */
+import { FC, useEffect, useRef, useState } from 'react';
+import { Conversation } from '../utils/useConversations';
+import Orb from './Orb';
+
+interface SidebarProps {
+  conversations: Conversation[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  onNewChat: () => void;
+  onDelete: (id: string) => void;
+  onRename: (id: string, title: string) => void;
+  displayName: string;
+  onDisplayNameChange: (name: string) => void;
+  onOpenSettings: () => void;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const Sidebar: FC<SidebarProps> = ({
+  conversations,
+  activeId,
+  onSelect,
+  onNewChat,
+  onDelete,
+  onRename,
+  displayName,
+  onDisplayNameChange,
+  onOpenSettings,
+  isOpen,
+  onClose,
+}) => {
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [draft, setDraft] = useState('');
+  const [editingName, setEditingName] = useState(false);
+  const [nameDraft, setNameDraft] = useState(displayName);
+  const editRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editingId) editRef.current?.focus();
+  }, [editingId]);
+
+  const startRename = (c: Conversation) => {
+    setEditingId(c.id);
+    setDraft(c.title);
+  };
+  const commitRename = () => {
+    if (editingId) onRename(editingId, draft);
+    setEditingId(null);
+  };
+
+  const commitName = () => {
+    onDisplayNameChange(nameDraft);
+    setEditingName(false);
+  };
+
+  const initials =
+    displayName
+      .trim()
+      .split(/\s+/)
+      .map(w => w[0])
+      .slice(0, 2)
+      .join('')
+      .toUpperCase() || 'Y';
+
+  return (
+    <>
+      {isOpen && <div className='scrim md:hidden' onClick={onClose} aria-hidden='true' />}
+
+      <aside
+        className={`sidebar fixed inset-y-0 left-0 z-40 transition-transform duration-300 ease-out md:static md:z-auto md:translate-x-0 ${
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        {/* Brand */}
+        <div className='flex items-center justify-between gap-2 px-4 pt-4'>
+          <div className='flex items-center gap-2.5'>
+            <Orb variant='sm' />
+            <span className='text-[17px] font-bold tracking-tight' style={{ color: 'var(--text)' }}>
+              EchoAI
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className='icon-btn h-9 w-9 md:hidden'
+            aria-label='Close menu'
+          >
+            <svg className='h-[18px] w-[18px]' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.8} d='M6 18L18 6M6 6l12 12' />
+            </svg>
+          </button>
+        </div>
+
+        {/* New chat */}
+        <div className='px-3 pt-4'>
+          <button onClick={onNewChat} className='btn-accent flex w-full items-center justify-center gap-2 py-2.5'>
+            <svg className='h-[18px] w-[18px]' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 5v14M5 12h14' />
+            </svg>
+            New chat
+          </button>
+        </div>
+
+        {/* History */}
+        <div className='mt-5 px-4 text-[11px] font-semibold uppercase tracking-[0.14em]' style={{ color: 'var(--text-faint)' }}>
+          Recent
+        </div>
+        <nav className='mt-2 flex-1 space-y-0.5 overflow-y-auto px-2 pb-2'>
+          {conversations.map(c => {
+            const isActive = c.id === activeId;
+            const isEditing = editingId === c.id;
+            return (
+              <div
+                key={c.id}
+                role='button'
+                tabIndex={0}
+                onClick={() => !isEditing && onSelect(c.id)}
+                onKeyDown={e => {
+                  if (!isEditing && (e.key === 'Enter' || e.key === ' ')) {
+                    e.preventDefault();
+                    onSelect(c.id);
+                  }
+                }}
+                className={`nav-item ${isActive ? 'nav-item--active' : ''}`}
+              >
+                <svg className='h-[15px] w-[15px] flex-shrink-0' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                  <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.7} d='M8 12h8M8 8h8m-8 8h5m6-4a8 8 0 01-11.3 7.3L3 21l1.7-5.7A8 8 0 1121 12z' />
+                </svg>
+
+                {isEditing ? (
+                  <input
+                    ref={editRef}
+                    value={draft}
+                    onChange={e => setDraft(e.target.value)}
+                    onBlur={commitRename}
+                    onClick={e => e.stopPropagation()}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') commitRename();
+                      if (e.key === 'Escape') setEditingId(null);
+                    }}
+                    className='nav-edit'
+                  />
+                ) : (
+                  <span className='nav-item__title'>{c.title}</span>
+                )}
+
+                {!isEditing && (
+                  <span className='nav-actions'>
+                    <button
+                      onClick={e => {
+                        e.stopPropagation();
+                        startRename(c);
+                      }}
+                      className='nav-action'
+                      aria-label='Rename chat'
+                    >
+                      <svg className='h-3.5 w-3.5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.8} d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.4-9.4a2 2 0 112.8 2.8L11.8 15H9v-2.8l8.6-8.6z' />
+                      </svg>
+                    </button>
+                    <button
+                      onClick={e => {
+                        e.stopPropagation();
+                        onDelete(c.id);
+                      }}
+                      className='nav-action nav-action--danger'
+                      aria-label='Delete chat'
+                    >
+                      <svg className='h-3.5 w-3.5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.8} d='M19 7l-.9 12a2 2 0 01-2 1.9H7.9a2 2 0 01-2-1.9L5 7m5 4v6m4-6v6M4 7h16M9 7V4a1 1 0 011-1h4a1 1 0 011 1v3' />
+                      </svg>
+                    </button>
+                  </span>
+                )}
+              </div>
+            );
+          })}
+        </nav>
+
+        {/* Profile */}
+        <div className='border-t p-3' style={{ borderColor: 'var(--border)' }}>
+          <div className='profile-row'>
+            <span className='avatar'>{initials}</span>
+            {editingName ? (
+              <input
+                autoFocus
+                value={nameDraft}
+                onChange={e => setNameDraft(e.target.value)}
+                onBlur={commitName}
+                onKeyDown={e => {
+                  if (e.key === 'Enter') commitName();
+                  if (e.key === 'Escape') {
+                    setNameDraft(displayName);
+                    setEditingName(false);
+                  }
+                }}
+                className='nav-edit'
+              />
+            ) : (
+              <div className='min-w-0 flex-1'>
+                <p className='truncate text-[13.5px] font-semibold' style={{ color: 'var(--text)' }}>
+                  {displayName}
+                </p>
+                <p className='text-[11px]' style={{ color: 'var(--text-faint)' }}>
+                  Free plan
+                </p>
+              </div>
+            )}
+
+            {!editingName && (
+              <button
+                onClick={() => {
+                  setNameDraft(displayName);
+                  setEditingName(true);
+                }}
+                className='nav-action'
+                aria-label='Edit name'
+              >
+                <svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                  <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.8} d='M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.4-9.4a2 2 0 112.8 2.8L11.8 15H9v-2.8l8.6-8.6z' />
+                </svg>
+              </button>
+            )}
+            <button onClick={onOpenSettings} className='nav-action' aria-label='Settings'>
+              <svg className='h-4 w-4' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.6} d='M10.3 4.3c.4-1.8 2.9-1.8 3.4 0a1.7 1.7 0 002.5 1.1c1.6-.9 3.3.8 2.4 2.4a1.7 1.7 0 001 2.5c1.8.5 1.8 2.9 0 3.4a1.7 1.7 0 00-1 2.5c.9 1.6-.8 3.3-2.4 2.4a1.7 1.7 0 00-2.5 1c-.5 1.8-2.9 1.8-3.4 0a1.7 1.7 0 00-2.5-1c-1.6.9-3.3-.8-2.4-2.4a1.7 1.7 0 00-1-2.5c-1.8-.5-1.8-2.9 0-3.4a1.7 1.7 0 001-2.5c-.9-1.6.8-3.3 2.4-2.4 1 .6 2.3.1 2.5-1z' />
+                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={1.6} d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+};
+
+export default Sidebar;
diff --git a/client/src/components/TypingIndicator.tsx b/client/src/components/TypingIndicator.tsx
index e6b58be..397ed12 100644
--- a/client/src/components/TypingIndicator.tsx
+++ b/client/src/components/TypingIndicator.tsx
@@ -1,61 +1,39 @@
-import { FC, useState, useEffect } from "react";
+import { FC, useEffect, useState } from 'react';
+import Orb from './Orb';
 
-interface TypingIndicatorProps {
-  isDarkMode: boolean;
-}
+const MESSAGES = [
+  'Reading your message',
+  'Processing your request',
+  'Thinking it through',
+  'Composing a response',
+  'Almost ready',
+];
 
-const TypingIndicator: FC<TypingIndicatorProps> = ({ isDarkMode }) => {
-  const [currentMessage, setCurrentMessage] = useState(0);
-  
-  const messages = [
-    "Reading your message...",
-    "Processing your request...",
-    "Thinking through the best response...",
-    "Generating a thoughtful answer...",
-    "Almost ready with my response..."
-  ];
+const TypingIndicator: FC = () => {
+  const [current, setCurrent] = useState(0);
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setCurrentMessage((prev) => (prev + 1) % messages.length);
+      setCurrent(prev => (prev + 1) % MESSAGES.length);
     }, 2000);
-
     return () => clearInterval(interval);
-  }, [messages.length]);
+  }, []);
 
   return (
-    <div className="flex justify-start mb-4">
-      <div className="flex items-end space-x-2 sm:space-x-3 max-w-[85%] sm:max-w-[80%]">
-        <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center shadow-lg flex-shrink-0">
-          <svg className="w-3 h-3 sm:w-4 sm:h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-          </svg>
-        </div>
-        <div className={`rounded-2xl px-4 py-3 sm:px-6 sm:py-4 shadow-lg ${
-          isDarkMode 
-            ? 'bg-white/10 backdrop-blur-sm border border-white/20' 
-            : 'bg-white/80 backdrop-blur-sm border border-gray-200'
-        }`}>
-          <div className="flex items-center space-x-3">
-            <p className={`text-sm ${isDarkMode ? 'text-white/80' : 'text-gray-600'}`}>
-              {messages[currentMessage]}
-            </p>
-            <div className="flex space-x-1">
-              <div className={`w-1.5 h-1.5 rounded-full ${
-                isDarkMode ? 'bg-white/60' : 'bg-gray-400'
-              } animate-bounce`} style={{ animationDelay: '0ms' }}></div>
-              <div className={`w-1.5 h-1.5 rounded-full ${
-                isDarkMode ? 'bg-white/60' : 'bg-gray-400'
-              } animate-bounce`} style={{ animationDelay: '150ms' }}></div>
-              <div className={`w-1.5 h-1.5 rounded-full ${
-                isDarkMode ? 'bg-white/60' : 'bg-gray-400'
-              } animate-bounce`} style={{ animationDelay: '300ms' }}></div>
-            </div>
-          </div>
+    <div className='flex justify-start msg-in'>
+      <div className='flex max-w-[88%] items-center gap-2.5 sm:max-w-[82%]'>
+        <Orb variant='sm' thinking />
+        <div className='bubble bubble-ai flex items-center gap-3'>
+          <span className='shimmer text-sm'>{MESSAGES[current]}</span>
+          <span className='dot-3' aria-hidden='true'>
+            <span />
+            <span />
+            <span />
+          </span>
         </div>
       </div>
     </div>
   );
 };
 
-export default TypingIndicator;
\ No newline at end of file
+export default TypingIndicator;
diff --git a/client/src/components/UserChat.tsx b/client/src/components/UserChat.tsx
index 981a442..d7a35b7 100644
--- a/client/src/components/UserChat.tsx
+++ b/client/src/components/UserChat.tsx
@@ -1,26 +1,31 @@
-import { FC } from "react";
+import { FC } from 'react';
 
 interface UserChatProps {
   message: string;
-  isDarkMode: boolean;
 }
 
-const UserChat: FC<UserChatProps> = ({ message, isDarkMode }) => {
+const UserChat: FC<UserChatProps> = ({ message }) => {
   return (
-    <div className="flex justify-end mb-4">
-      <div className="flex items-end space-x-2 sm:space-x-3 max-w-[85%] sm:max-w-[80%]">
-        <div className={`rounded-2xl px-4 py-3 sm:px-6 sm:py-4 shadow-lg ${
-          isDarkMode 
-            ? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white' 
-            : 'bg-gradient-to-r from-blue-500 to-indigo-600 text-white'
-        }`}>
-          <p className="text-sm leading-relaxed whitespace-pre-wrap break-words">
-            {message}
-          </p>
-        </div>
-        <div className="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center shadow-lg flex-shrink-0">
-          <svg className="w-3 h-3 sm:w-4 sm:h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+    <div className='flex justify-end msg-in'>
+      <div className='flex max-w-[86%] items-end gap-2.5 sm:max-w-[78%]'>
+        <div className='bubble bubble-user'>{message}</div>
+        <div
+          className='grid h-8 w-8 flex-shrink-0 place-items-center rounded-full'
+          style={{ background: 'var(--surface-2)', border: '1px solid var(--border)' }}
+        >
+          <svg
+            className='h-4 w-4'
+            style={{ color: 'var(--text-dim)' }}
+            fill='none'
+            stroke='currentColor'
+            viewBox='0 0 24 24'
+          >
+            <path
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              strokeWidth={1.8}
+              d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'
+            />
           </svg>
         </div>
       </div>
diff --git a/client/src/utils/useConversations.ts b/client/src/utils/useConversations.ts
new file mode 100644
index 0000000..2f5cfcd
--- /dev/null
+++ b/client/src/utils/useConversations.ts
@@ -0,0 +1,182 @@
+/**
+ * useConversations — client-side multi-conversation store for EchoAI.
+ *
+ * The conversation state has many related transitions (add message, remove
+ * error, create, delete, rename, select), so it's modelled with a pure
+ * `useReducer` — a single atomic source of truth — encapsulated in this hook
+ * together with localStorage persistence. Conversation content isn't sensitive,
+ * so localStorage (durable across reloads) is the right fit. Transient UI flags
+ * (loading, theme, open panels) live as plain useState in the component.
+ *
+ * @license Apache-2.0
+ */
+import { useCallback, useEffect, useMemo, useReducer } from 'react';
+import { Message } from '../components/ChatInput';
+
+export interface Conversation {
+  id: string;
+  title: string;
+  messages: Message[];
+  createdAt: number;
+  updatedAt: number;
+}
+
+const STORAGE_KEY = 'echoai_conversations';
+const DEFAULT_TITLE = 'New chat';
+
+const newId = (): string => Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
+
+const createBlank = (): Conversation => ({
+  id: newId(),
+  title: DEFAULT_TITLE,
+  messages: [],
+  createdAt: Date.now(),
+  updatedAt: Date.now(),
+});
+
+const load = (): Conversation[] => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (c): c is Conversation =>
+        c && typeof c.id === 'string' && typeof c.title === 'string' && Array.isArray(c.messages)
+    );
+  } catch {
+    return [];
+  }
+};
+
+interface State {
+  conversations: Conversation[];
+  activeId: string;
+}
+
+type Action =
+  | { type: 'ADD_MESSAGE'; convId: string; message: Message }
+  | { type: 'REMOVE_ERROR'; convId: string; errorId: string }
+  | { type: 'SELECT'; id: string }
+  | { type: 'CREATE'; fresh: Conversation }
+  | { type: 'DELETE'; id: string; fresh: Conversation }
+  | { type: 'RENAME'; id: string; title: string };
+
+/** Pure reducer — every transition derives the next state from the previous. */
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'ADD_MESSAGE':
+      return {
+        ...state,
+        conversations: state.conversations.map(c => {
+          if (c.id !== action.convId) return c;
+          const isFirst = c.messages.length === 0;
+          const title =
+            isFirst && action.message.sender === 'user' && c.title === DEFAULT_TITLE
+              ? action.message.message.slice(0, 48).trim() || DEFAULT_TITLE
+              : c.title;
+          return { ...c, title, messages: [...c.messages, action.message], updatedAt: Date.now() };
+        }),
+      };
+
+    case 'REMOVE_ERROR':
+      return {
+        ...state,
+        conversations: state.conversations.map(c =>
+          c.id === action.convId
+            ? { ...c, messages: c.messages.filter(m => m.errorId !== action.errorId) }
+            : c
+        ),
+      };
+
+    case 'SELECT':
+      return { ...state, activeId: action.id };
+
+    case 'CREATE': {
+      // Reuse an existing empty chat rather than stacking blanks.
+      const blank = state.conversations.find(c => c.messages.length === 0);
+      if (blank) return { ...state, activeId: blank.id };
+      return {
+        conversations: [action.fresh, ...state.conversations],
+        activeId: action.fresh.id,
+      };
+    }
+
+    case 'DELETE': {
+      const next = state.conversations.filter(c => c.id !== action.id);
+      if (next.length === 0) {
+        return { conversations: [action.fresh], activeId: action.fresh.id };
+      }
+      return {
+        conversations: next,
+        activeId: state.activeId === action.id ? next[0].id : state.activeId,
+      };
+    }
+
+    case 'RENAME':
+      return {
+        ...state,
+        conversations: state.conversations.map(c =>
+          c.id === action.id ? { ...c, title: action.title.trim() || DEFAULT_TITLE } : c
+        ),
+      };
+
+    default:
+      return state;
+  }
+}
+
+const init = (): State => {
+  const loaded = load();
+  const conversations = loaded.length ? loaded : [createBlank()];
+  return { conversations, activeId: conversations[0].id };
+};
+
+export function useConversations() {
+  const [state, dispatch] = useReducer(reducer, undefined, init);
+
+  // Persist whenever the conversation list changes.
+  useEffect(() => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(state.conversations));
+    } catch {
+      /* ignore quota / private-mode errors */
+    }
+  }, [state.conversations]);
+
+  const activeChats = useMemo(
+    () => state.conversations.find(c => c.id === state.activeId)?.messages ?? [],
+    [state.conversations, state.activeId]
+  );
+
+  const addMessage = useCallback(
+    (convId: string, message: Message) => dispatch({ type: 'ADD_MESSAGE', convId, message }),
+    []
+  );
+  const removeErrorMessage = useCallback(
+    (convId: string, errorId: string) => dispatch({ type: 'REMOVE_ERROR', convId, errorId }),
+    []
+  );
+  const selectConversation = useCallback((id: string) => dispatch({ type: 'SELECT', id }), []);
+  const createConversation = useCallback(() => dispatch({ type: 'CREATE', fresh: createBlank() }), []);
+  const deleteConversation = useCallback(
+    (id: string) => dispatch({ type: 'DELETE', id, fresh: createBlank() }),
+    []
+  );
+  const renameConversation = useCallback(
+    (id: string, title: string) => dispatch({ type: 'RENAME', id, title }),
+    []
+  );
+
+  return {
+    conversations: state.conversations,
+    activeId: state.activeId,
+    activeChats,
+    selectConversation,
+    createConversation,
+    deleteConversation,
+    renameConversation,
+    addMessage,
+    removeErrorMessage,
+  };
+}