diff --git a/core/http/react-ui/src/App.css b/core/http/react-ui/src/App.css
index 27825b98a..2f433f2d9 100644
--- a/core/http/react-ui/src/App.css
+++ b/core/http/react-ui/src/App.css
@@ -47,8 +47,8 @@
 
 /* Footer */
 .app-footer {
-  background: var(--color-bg-secondary);
-  border-top: 1px solid var(--color-border-subtle);
+  background: transparent;
+  border-top: 1px solid var(--color-border-divider);
   padding: var(--spacing-md) var(--spacing-lg);
   margin-top: auto;
 }
@@ -61,7 +61,17 @@
 }
 
 .app-footer-version {
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+}
+
+.app-footer-version a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+  transition: color 150ms;
+}
+
+.app-footer-version a:hover {
   color: var(--color-text-secondary);
 }
 
@@ -76,29 +86,29 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
   text-decoration: none;
   transition: color 150ms;
 }
 
 .app-footer-links a:hover {
-  color: var(--color-primary);
+  color: var(--color-text-secondary);
 }
 
 .app-footer-copyright {
-  font-size: 0.6875rem;
+  font-size: var(--text-xs);
   color: var(--color-text-muted);
 }
 
 .app-footer-copyright a {
-  color: var(--color-text-secondary);
+  color: var(--color-text-muted);
   text-decoration: none;
   transition: color 150ms;
 }
 
 .app-footer-copyright a:hover {
-  color: var(--color-primary);
+  color: var(--color-text-secondary);
 }
 
 /* Mobile header */
@@ -198,12 +208,12 @@
 }
 
 .sidebar-section-title {
-  padding: var(--spacing-xs) var(--spacing-sm) 2px;
-  font-size: 0.625rem;
-  font-weight: 600;
+  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xs);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-text-muted);
+  letter-spacing: 0.08em;
+  color: var(--color-text-secondary);
   white-space: nowrap;
   overflow: hidden;
 }
@@ -221,15 +231,20 @@
 }
 
 .sidebar-section-toggle:hover {
-  color: var(--color-text-secondary);
+  color: var(--color-text-primary);
 }
 
 .sidebar-section-chevron {
   font-size: 0.5rem;
-  transition: transform var(--duration-fast);
+  opacity: 0.6;
+  transition: transform var(--duration-fast), opacity var(--duration-fast);
   flex-shrink: 0;
 }
 
+.sidebar-section-toggle:hover .sidebar-section-chevron {
+  opacity: 1;
+}
+
 .sidebar-section-toggle.open .sidebar-section-chevron {
   transform: rotate(90deg);
 }
@@ -238,26 +253,27 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
-  padding: 6px var(--spacing-sm);
+  padding: 8px var(--spacing-md) 8px var(--spacing-sm);
   color: var(--color-text-secondary);
   text-decoration: none;
-  font-size: 0.8125rem;
-  transition: all var(--duration-fast) var(--ease-default);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast);
   border-left: 3px solid transparent;
   white-space: nowrap;
   overflow: hidden;
 }
 
-.nav-item:hover {
+.nav-item:hover:not(.active) {
   color: var(--color-text-primary);
-  background: var(--color-primary-light);
+  background: var(--color-surface-hover);
 }
 
 .nav-item.active {
   color: var(--color-primary);
   background: var(--color-primary-light);
   border-left-color: var(--color-primary);
-  font-weight: 500;
+  font-weight: var(--font-weight-semibold);
 }
 
 .nav-icon {
@@ -377,19 +393,24 @@
 }
 
 .sidebar-collapse-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
   background: none;
   border: none;
   color: var(--color-text-muted);
   cursor: pointer;
-  padding: 4px;
-  border-radius: var(--radius-sm);
-  font-size: 0.75rem;
-  transition: color var(--duration-fast);
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  transition: color var(--duration-fast), background var(--duration-fast);
   flex-shrink: 0;
 }
 
 .sidebar-collapse-btn:hover {
   color: var(--color-text-primary);
+  background: var(--color-surface-hover);
 }
 
 /* Collapsed sidebar (desktop only) */
@@ -474,7 +495,7 @@
 .operation-item {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-md);
   padding: var(--spacing-xs) 0;
 }
 
@@ -482,17 +503,25 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
-  flex: 1;
+  flex: 2 1 0;
+  min-width: 0;
+}
+
+.operation-info > .operation-text {
+  flex: 1 1 auto;
   min-width: 0;
 }
 
 .operation-spinner {
-  width: 14px;
-  height: 14px;
-  border: 2px solid var(--color-border-subtle);
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border: 2px solid var(--color-border-default);
   border-top-color: var(--color-primary);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
+  display: inline-block;
 }
 
 .operation-text {
@@ -509,18 +538,39 @@
 }
 
 .operation-bar-container {
-  flex: 1;
-  height: 3px;
-  background: var(--color-bg-tertiary);
-  border-radius: 2px;
+  flex: 0 1 160px;
+  min-width: 80px;
+  height: 4px;
+  background: var(--color-surface-sunken);
+  border-radius: var(--radius-full);
   overflow: hidden;
 }
 
 .operation-bar {
   height: 100%;
   background: var(--color-primary);
-  border-radius: 2px;
-  transition: width 300ms ease;
+  border-radius: var(--radius-full);
+  transition: width 300ms var(--ease-default);
+}
+
+/* Inline install indicator — used in table rows (Models, Backends) */
+.inline-install {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.inline-install__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  min-width: 0;
+}
+.inline-install__label {
+  font-size: var(--text-xs);
+  color: var(--color-primary);
+  font-weight: var(--font-weight-medium);
+  white-space: nowrap;
 }
 
 .operation-cancel {
@@ -767,7 +817,7 @@
 
 /* Common page styles */
 .page {
-  padding: var(--spacing-xl);
+  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl);
   max-width: 1200px;
   margin: 0 auto;
   width: 100%;
@@ -779,83 +829,531 @@
 }
 
 .page-title {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.015em;
+  line-height: var(--leading-tight);
   margin-bottom: var(--spacing-xs);
+  color: var(--color-text-primary);
 }
 
 .page-subtitle {
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   color: var(--color-text-secondary);
+  line-height: var(--leading-normal);
 }
 
 /* Cards */
 .card {
-  background: var(--color-bg-secondary);
+  background: var(--color-surface-raised);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-lg);
-  padding: var(--spacing-md);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-subtle), var(--shadow-inset-top);
   transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
 }
 
 .card:hover {
   border-color: var(--color-border-default);
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-md), var(--shadow-inset-top);
   transform: translateY(-1px);
 }
 
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+/* Form rows — consistent label+control rhythm */
+.form-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: var(--spacing-md);
+  padding: var(--spacing-md) 0;
+  border-bottom: 1px solid var(--color-border-divider);
+}
+.form-row:last-child {
+  border-bottom: none;
+}
+.form-row__label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+.form-row__label-text {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+.form-row__hint {
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  line-height: var(--leading-snug);
+}
+.form-row__control {
+  flex-shrink: 0;
+}
+
+.form-group__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-text-secondary);
+  padding: var(--spacing-md) 0 var(--spacing-sm);
+  border-bottom: 1px solid var(--color-border-divider);
+  margin-bottom: var(--spacing-md);
+}
+.form-group__title i {
+  color: var(--color-primary);
+  font-size: var(--text-sm);
+}
+.form-group__body {
+  padding-bottom: var(--spacing-md);
+}
+.form-group__body:last-child {
+  padding-bottom: var(--spacing-lg);
+}
+.form-group__actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-md) 0 var(--spacing-lg);
+  border-top: 1px solid var(--color-border-divider);
+  margin-top: var(--spacing-md);
+}
+
+/* Form layout grids */
+.form-grid {
+  display: grid;
+  gap: var(--spacing-md);
+}
+.form-grid-2col {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-md);
+}
+.form-grid-3col {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--spacing-md);
+}
+@media (max-width: 720px) {
+  .form-grid-2col, .form-grid-3col {
+    grid-template-columns: 1fr;
+  }
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+.form-field__label {
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.form-field__hint {
+  font-size: var(--text-xs);
+  color: var(--color-text-muted);
+  line-height: var(--leading-snug);
+}
+
+/* Button modifiers */
+.btn-full {
+  width: 100%;
+}
+
+/* Progress bar */
+.progress-bar {
+  width: 100%;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--color-surface-sunken);
+  overflow: hidden;
+  border: 1px solid var(--color-border-subtle);
+}
+.progress-bar__fill {
+  height: 100%;
+  background: var(--color-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-primary-text);
+  transition: width 300ms var(--ease-default);
+  white-space: nowrap;
+  padding: 0 var(--spacing-sm);
+}
+.progress-bar__fill--error {
+  background: var(--color-error);
+}
+
+/* Log tail viewport */
+.log-tail {
+  max-height: 180px;
+  overflow: auto;
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: var(--text-xs);
+  line-height: var(--leading-snug);
+  color: var(--color-text-secondary);
+}
+.log-tail__line {
+  padding: 1px 0;
+}
+.log-tail__line--error {
+  color: var(--color-error);
+}
+
+/* Result quote (TTS / Sound prompt echo) */
+.result-quote {
+  padding: var(--spacing-md);
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-style: italic;
+  text-align: center;
+  line-height: var(--leading-normal);
+}
+
+/* Data table — used by Quantize jobs list, Traces, etc. */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.data-table th {
+  text-align: left;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--color-text-secondary);
+  border-bottom: 1px solid var(--color-border-default);
+  background: var(--color-surface-sunken);
+}
+.data-table td {
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid var(--color-border-divider);
+  vertical-align: middle;
+  color: var(--color-text-primary);
+}
+.data-table tbody tr {
+  transition: background var(--duration-fast);
+}
+.data-table tbody tr:hover {
+  background: var(--color-surface-hover);
+}
+.data-table tbody tr.is-selected {
+  background: var(--color-primary-light);
+}
+.data-table tbody tr:last-child td {
+  border-bottom: none;
+}
+.data-table__actions {
+  display: flex;
+  gap: var(--spacing-xs);
+  justify-content: flex-end;
+}
+.data-table__truncate {
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Quantize page */
+.quantize-page__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-md);
+}
+.quantize-form {
+  margin-bottom: var(--spacing-lg);
+}
+.quantize-form__quant-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-sm);
+}
+.quantize-form__quant-row > :only-child {
+  grid-column: 1 / -1;
+}
+@media (max-width: 520px) {
+  .quantize-form__quant-row {
+    grid-template-columns: 1fr;
+  }
+}
+.quantize-progress-card {
+  margin-bottom: var(--spacing-lg);
+}
+.quantize-progress-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+.quantize-progress-card__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin: 0;
+  font-size: var(--text-base);
+  color: var(--color-text-primary);
+}
+.quantize-progress-card__title i {
+  color: var(--color-primary);
+}
+.quantize-progress-card__status {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+  flex-wrap: wrap;
+}
+.quantize-progress-card__message {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+}
+.quantize-progress-card .progress-bar {
+  margin-bottom: var(--spacing-md);
+}
+.quantize-import-card {
+  margin-bottom: var(--spacing-lg);
+}
+.quantize-import-card__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin: 0 0 var(--spacing-md);
+  font-size: var(--text-base);
+  color: var(--color-text-primary);
+}
+.quantize-import-card__title i {
+  color: var(--color-primary);
+}
+.quantize-import-card__row {
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+  align-items: center;
+}
+.quantize-import-card__name {
+  flex: 1;
+  min-width: 220px;
+  max-width: 320px;
+}
+.quantize-jobs {
+  padding: 0;
+  overflow: hidden;
+}
+.quantize-jobs__title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin: 0;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border-divider);
+  font-size: var(--text-base);
+  color: var(--color-text-primary);
+}
+.quantize-jobs__title i {
+  color: var(--color-primary);
+}
+.quantize-jobs__scroll {
+  overflow-x: auto;
+}
+
+/* Segmented control (Sound mode toggle etc.) */
+.segmented {
+  display: inline-flex;
+  padding: 3px;
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  margin-bottom: var(--spacing-md);
+  gap: 2px;
+}
+.segmented__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: 6px var(--spacing-md);
+  background: transparent;
+  color: var(--color-text-secondary);
+  border: none;
+  border-radius: var(--radius-sm);
+  font-family: inherit;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: background var(--duration-fast), color var(--duration-fast);
+}
+.segmented__item:hover {
+  color: var(--color-text-primary);
+}
+.segmented__item.is-active {
+  background: var(--color-surface-raised);
+  color: var(--color-primary);
+  box-shadow: var(--shadow-subtle);
+}
+
+/* Inline checkbox row */
+.checkbox-row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: 10px var(--spacing-md);
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  user-select: none;
+  transition: border-color var(--duration-fast);
+  margin-bottom: var(--spacing-md);
+}
+.checkbox-row:hover {
+  border-color: var(--color-border-default);
+}
+.checkbox-row input[type="checkbox"] {
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+
+/* Audio result wrapper (TTS/Sound) */
+.audio-result {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-md);
+  width: 100%;
+  max-width: 480px;
+}
+.audio-result__player {
+  width: 100%;
+}
+.audio-result__actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: center;
+}
+
+/* Media empty state */
+.media-empty {
+  text-align: center;
+  color: var(--color-text-muted);
+  padding: var(--spacing-xl) var(--spacing-md);
+}
+.media-empty__icon {
+  display: block;
+  font-size: 2.75rem;
+  margin-bottom: var(--spacing-md);
+  opacity: 0.35;
+}
+.media-empty p {
+  font-size: var(--text-sm);
+  margin: 0;
 }
 
 /* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: var(--spacing-xs);
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: 0.5rem var(--spacing-md);
+  min-height: 36px;
   border-radius: var(--radius-md);
-  font-size: 0.875rem;
+  font-size: var(--text-sm);
   font-family: inherit;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  letter-spacing: 0.005em;
   cursor: pointer;
-  border: none;
-  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
+  border: 1px solid transparent;
+  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
   text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-border-focus);
+}
+
+/* Global focus ring — any interactive that isn't a .btn */
+:where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
 }
 
 .btn-primary {
   background: var(--color-primary);
   color: var(--color-primary-text);
+  box-shadow: var(--shadow-subtle);
 }
-.btn-primary:hover {
+.btn-primary:hover:not(:disabled) {
   background: var(--color-primary-hover);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-secondary {
-  background: var(--color-bg-tertiary);
+  background: var(--color-surface-raised);
   color: var(--color-text-primary);
-  border: 1px solid var(--color-border-default);
+  border-color: var(--color-border-default);
 }
-.btn-secondary:hover {
+.btn-secondary:hover:not(:disabled) {
   border-color: var(--color-border-strong);
   background: var(--color-primary-light);
+  color: var(--color-primary);
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border-color: transparent;
+}
+.btn-ghost:hover:not(:disabled) {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
 }
 
 .btn-danger {
   background: var(--color-error-light);
   color: var(--color-error);
-  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-color: var(--color-error-border);
 }
-.btn-danger:hover {
-  background: rgba(239, 68, 68, 0.2);
+.btn-danger:hover:not(:disabled) {
+  background: var(--color-error);
+  color: var(--color-text-inverse);
+  border-color: var(--color-error);
 }
 
 .btn-sm {
-  padding: var(--spacing-xs) var(--spacing-sm);
-  font-size: 0.8125rem;
+  padding: 0.35rem var(--spacing-sm);
+  min-height: 30px;
+  font-size: var(--text-xs);
 }
 
 .btn:active:not(:disabled) {
@@ -867,41 +1365,118 @@
   cursor: not-allowed;
 }
 
+/* Toggle switch */
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 22px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.toggle input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.toggle__track {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-full);
+  background: var(--color-toggle-off);
+  transition: background var(--duration-normal) var(--ease-default);
+}
+.toggle__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-full);
+  background: #ffffff;
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--duration-normal) var(--ease-default);
+}
+.toggle--on .toggle__track {
+  background: var(--color-toggle-on);
+}
+.toggle--on .toggle__thumb {
+  transform: translateX(16px);
+}
+.toggle:hover:not(.toggle--disabled) .toggle__track {
+  filter: brightness(1.08);
+}
+.toggle:focus-within .toggle__track {
+  box-shadow: 0 0 0 3px var(--color-border-focus);
+}
+.toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 /* Inputs */
 .input {
-  background: var(--color-bg-tertiary);
+  background: var(--color-surface-raised);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
-  padding: var(--spacing-sm);
-  font-size: 0.875rem;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-sm);
   font-family: inherit;
   outline: none;
   width: 100%;
-  transition: border-color var(--duration-fast);
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), background var(--duration-fast);
+}
+.input::placeholder {
+  color: var(--color-text-muted);
+}
+.input:hover:not(:disabled):not(:focus) {
+  border-color: var(--color-border-strong);
 }
 .input:focus {
-  border-color: var(--color-border-strong);
-  box-shadow: 0 0 0 2px var(--color-primary-light);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+.input:disabled {
+  background: var(--color-surface-sunken);
+  color: var(--color-text-muted);
+  cursor: not-allowed;
+}
+select.input {
+  cursor: pointer;
+  padding-right: var(--spacing-xl);
 }
 
 .textarea {
-  background: var(--color-bg-tertiary);
+  background: var(--color-surface-raised);
   color: var(--color-text-primary);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
-  padding: var(--spacing-sm);
-  font-size: 0.875rem;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-size: var(--text-sm);
   font-family: inherit;
   outline: none;
   width: 100%;
   resize: vertical;
   min-height: 80px;
-  transition: border-color var(--duration-fast);
+  line-height: var(--leading-normal);
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+}
+.textarea::placeholder {
+  color: var(--color-text-muted);
+}
+.textarea:hover:not(:disabled):not(:focus) {
+  border-color: var(--color-border-strong);
 }
 .textarea:focus {
-  border-color: var(--color-border-strong);
-  box-shadow: 0 0 0 2px var(--color-primary-light);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+.textarea:disabled {
+  background: var(--color-surface-sunken);
+  color: var(--color-text-muted);
+  cursor: not-allowed;
 }
 
 /* CodeMirror editor wrapper */
@@ -1249,20 +1824,24 @@
 }
 
 .filter-btn {
-  padding: var(--spacing-xs) var(--spacing-sm);
-  background: var(--color-bg-tertiary);
+  padding: 6px var(--spacing-md);
+  background: var(--color-surface-raised);
   color: var(--color-text-secondary);
-  border: 1px solid var(--color-border-subtle);
+  border: 1px solid var(--color-border-default);
   border-radius: var(--radius-full);
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
   font-family: inherit;
+  box-shadow: var(--shadow-subtle);
   transition: all var(--duration-fast);
 }
 
 .filter-btn:hover {
   border-color: var(--color-primary-border);
   color: var(--color-primary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
 }
 
 .filter-btn.active {
@@ -1446,12 +2025,6 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes completionGlow {
-  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.2); }
-  50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); }
-  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
-}
-
 /* Page route transitions */
 .page-transition {
   animation: fadeIn 200ms ease;
@@ -1462,11 +2035,6 @@
   min-width: 0;
 }
 
-/* Completion glow on streaming finish */
-.chat-message-new .chat-message-content {
-  animation: completionGlow 600ms ease-out;
-}
-
 /* Chat-specific styles */
 .chat-layout {
   display: flex;
@@ -1519,24 +2087,27 @@
 .chat-list-item {
   display: flex;
   align-items: flex-start;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-sm);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
   border-radius: var(--radius-md);
   cursor: pointer;
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
   color: var(--color-text-secondary);
-  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
+  border-left: 3px solid transparent;
+  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
   margin-bottom: 2px;
 }
 
-.chat-list-item:hover {
-  background: var(--color-primary-light);
-  transform: translateX(2px);
+.chat-list-item:hover:not(.active) {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
 }
 
 .chat-list-item.active {
   background: var(--color-primary-light);
   color: var(--color-primary);
+  border-left-color: var(--color-primary);
+  font-weight: var(--font-weight-medium);
 }
 
 .chat-list-item-info {
@@ -1790,15 +2361,14 @@
   display: flex;
   gap: var(--spacing-sm);
   align-items: flex-end;
-  background: var(--color-bg-tertiary);
+  background: var(--color-surface-raised);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
   padding: var(--spacing-xs);
   transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
 }
 .chat-input-wrapper:focus-within {
-  border-color: var(--color-primary-border);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 0 12px rgba(59, 130, 246, 0.06);
+  border-color: var(--color-primary);
 }
 
 .chat-attach-btn {
@@ -2029,26 +2599,30 @@
 .chat-empty-suggestions {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
   justify-content: center;
   margin-bottom: var(--spacing-lg);
-  max-width: 500px;
+  max-width: 520px;
 }
 .chat-empty-suggestion {
-  padding: var(--spacing-xs) var(--spacing-md);
-  background: var(--color-bg-tertiary);
-  border: 1px solid var(--color-border-subtle);
+  padding: 8px var(--spacing-md);
+  background: var(--color-surface-raised);
+  border: 1px solid var(--color-border-default);
   border-radius: var(--radius-full);
-  font-size: 0.8125rem;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
   font-family: inherit;
   color: var(--color-text-secondary);
   cursor: pointer;
+  box-shadow: var(--shadow-subtle), var(--shadow-inset-top);
   transition: all var(--duration-fast);
 }
 .chat-empty-suggestion:hover {
   border-color: var(--color-primary-border);
   color: var(--color-primary);
-  background: var(--color-bg-secondary);
+  background: var(--color-surface-raised);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm), var(--shadow-inset-top);
 }
 .chat-empty-hints {
   display: flex;
@@ -2418,7 +2992,6 @@
 }
 .chat-client-mcp-status-connected {
   background: var(--color-success);
-  box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
 }
 .chat-client-mcp-status-connecting {
   background: var(--color-warning);
@@ -2698,9 +3271,9 @@
 /* Studio tabs */
 .studio-tabs {
   display: flex;
-  gap: 0;
+  gap: var(--spacing-xs);
   border-bottom: 1px solid var(--color-border-subtle);
-  padding: 0 var(--spacing-xl);
+  padding: var(--spacing-sm) var(--spacing-xl) 0;
   background: var(--color-bg-primary);
   position: sticky;
   top: 0;
@@ -2710,15 +3283,17 @@
 .studio-tab {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--spacing-xs);
   background: none;
   border: none;
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-size: 0.8125rem;
+  padding: 10px var(--spacing-md);
+  font-size: var(--text-sm);
   font-family: inherit;
+  font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
   cursor: pointer;
   border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
   transition: color var(--duration-fast), border-color var(--duration-fast);
 }
 
@@ -2729,37 +3304,64 @@
 .studio-tab-active {
   color: var(--color-primary);
   border-bottom-color: var(--color-primary);
-  font-weight: 500;
+  font-weight: var(--font-weight-semibold);
 }
 
 /* Two-column layout for media generation pages */
 .media-layout {
   display: grid;
-  grid-template-columns: minmax(320px, 400px) 1fr;
+  grid-template-columns: minmax(320px, 420px) 1fr;
   gap: var(--spacing-lg);
   padding: var(--spacing-xl);
-  max-width: 1200px;
+  max-width: 1280px;
   margin: 0 auto;
   width: 100%;
   align-items: start;
 }
 
+@media (max-width: 900px) {
+  .media-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
 .media-controls {
-  background: var(--color-bg-secondary);
+  background: var(--color-surface-raised);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-lg);
   padding: var(--spacing-lg);
+  box-shadow: var(--shadow-subtle);
   position: sticky;
   top: var(--spacing-lg);
 }
+.media-controls .form-group {
+  margin-bottom: var(--spacing-md);
+}
+.media-controls .form-grid-2col,
+.media-controls .form-grid-3col {
+  margin-bottom: var(--spacing-md);
+}
+.media-controls .form-grid-2col .form-group,
+.media-controls .form-grid-3col .form-group {
+  margin-bottom: 0;
+}
 
 .media-controls .page-header {
-  margin-bottom: var(--spacing-md);
-  padding: 0;
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border-divider);
 }
 
 .media-controls .page-title {
-  font-size: 1.125rem;
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.media-controls .page-title i {
+  color: var(--color-accent);
 }
 
 .media-preview {
@@ -3429,72 +4031,75 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  max-width: 48rem;
+  max-width: 52rem;
   margin: 0 auto;
-  padding: var(--spacing-xl);
+  padding: var(--spacing-2xl) var(--spacing-xl);
   width: 100%;
+  gap: var(--spacing-md);
 }
 .home-hero {
   text-align: center;
-  padding: var(--spacing-md) 0;
+  padding: var(--spacing-sm) 0 var(--spacing-md);
 }
 .home-logo {
-  width: 80px;
+  width: 72px;
   height: auto;
-  margin: 0 auto var(--spacing-sm);
+  margin: 0 auto;
   display: block;
 }
 
 /* Home resource bar - prominent */
 .home-resource-bar {
   width: 100%;
-  max-width: 380px;
-  padding: var(--spacing-sm) var(--spacing-md);
-  background: var(--color-bg-secondary);
+  max-width: 420px;
+  padding: var(--spacing-md) var(--spacing-lg);
+  background: var(--color-surface-raised);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-lg);
-  margin-bottom: var(--spacing-md);
+  box-shadow: var(--shadow-subtle);
 }
 .home-resource-bar-header {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
-  font-size: 0.8125rem;
+  gap: var(--spacing-sm);
+  font-size: var(--text-sm);
   color: var(--color-text-secondary);
-  margin-bottom: var(--spacing-xs);
+  margin-bottom: var(--spacing-sm);
 }
 .home-resource-label {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
 }
 .home-resource-pct {
   margin-left: auto;
   font-family: 'JetBrains Mono', monospace;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  font-size: var(--text-xs);
 }
 .home-resource-track {
   width: 100%;
   height: 6px;
-  background: var(--color-bg-tertiary);
-  border-radius: 3px;
+  background: var(--color-surface-sunken);
+  border-radius: var(--radius-full);
   overflow: hidden;
 }
 .home-resource-fill {
   height: 100%;
-  border-radius: 3px;
+  border-radius: var(--radius-full);
   transition: width 500ms ease;
 }
 .home-cluster-status {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   color: var(--color-text-muted);
-  margin-top: var(--spacing-xs);
+  margin-top: var(--spacing-sm);
 }
 .home-cluster-dot {
   width: 6px;
   height: 6px;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   background: var(--color-success);
   display: inline-block;
 }
@@ -3502,17 +4107,17 @@
 /* Home chat card */
 .home-chat-card {
   width: 100%;
-  background: var(--color-bg-secondary);
+  background: var(--color-surface-raised);
   border: 1px solid var(--color-border-subtle);
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-md);
-  margin-bottom: var(--spacing-md);
+  border-radius: var(--radius-xl);
+  padding: var(--spacing-lg);
+  box-shadow: var(--shadow-md);
 }
 .home-model-row {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
 }
 .home-file-tags {
   display: flex;
@@ -3523,12 +4128,12 @@
 .home-file-tag {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  background: var(--color-bg-tertiary);
+  gap: 6px;
+  padding: 4px 10px;
+  background: var(--color-surface-sunken);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-full);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
   color: var(--color-text-secondary);
 }
 .home-file-tag button {
@@ -3539,17 +4144,20 @@
   padding: 0;
   font-size: 0.625rem;
 }
+.home-file-tag button:hover {
+  color: var(--color-error);
+}
 
 /* Home input container */
 .home-input-container {
-  background: var(--color-bg-tertiary);
+  background: var(--color-surface-sunken);
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
   transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
 }
 .home-input-container:focus-within {
-  border-color: var(--color-primary-border);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 0 12px rgba(59, 130, 246, 0.06);
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
 }
 .home-textarea {
   width: 100%;
@@ -3557,13 +4165,13 @@
   color: var(--color-text-primary);
   border: none;
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-size: 0.875rem;
+  padding: var(--spacing-md);
+  font-size: var(--text-base);
   font-family: inherit;
   outline: none;
   resize: none;
-  min-height: 80px;
-  line-height: 1.5;
+  min-height: 84px;
+  line-height: var(--leading-normal);
 }
 .home-textarea::placeholder {
   color: var(--color-text-muted);
@@ -3571,8 +4179,9 @@
 .home-input-footer {
   display: flex;
   align-items: center;
-  padding: var(--spacing-xs) var(--spacing-sm);
-  border-top: 1px solid var(--color-border-subtle);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) var(--spacing-md);
+  border-top: 1px solid var(--color-border-divider);
 }
 .home-attach-buttons {
   display: flex;
@@ -3583,33 +4192,36 @@
   border: none;
   color: var(--color-text-muted);
   cursor: pointer;
-  padding: 4px 8px;
-  font-size: 0.875rem;
-  border-radius: var(--radius-sm);
-  transition: color var(--duration-fast);
+  padding: 6px 8px;
+  font-size: var(--text-sm);
+  border-radius: var(--radius-md);
+  transition: color var(--duration-fast), background var(--duration-fast);
 }
 .home-attach-btn:hover {
   color: var(--color-primary);
+  background: var(--color-primary-light);
 }
 .home-input-hint {
   flex: 1;
   text-align: center;
-  font-size: 0.6875rem;
+  font-size: var(--text-xs);
   color: var(--color-text-muted);
+  letter-spacing: 0.02em;
 }
 .home-send-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 34px;
+  height: 34px;
   background: var(--color-primary);
   color: var(--color-primary-text);
   border: none;
-  border-radius: 50%;
-  font-size: 0.8125rem;
+  border-radius: var(--radius-full);
+  font-size: var(--text-sm);
   cursor: pointer;
-  transition: background var(--duration-fast), transform 100ms;
+  box-shadow: var(--shadow-sm);
+  transition: background var(--duration-fast), transform 100ms, box-shadow var(--duration-fast);
   flex-shrink: 0;
 }
 .home-send-btn:hover:not(:disabled) {
@@ -3630,27 +4242,29 @@
   flex-wrap: wrap;
   gap: var(--spacing-sm);
   justify-content: center;
-  margin: var(--spacing-md) 0;
 }
 .home-link-btn {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-xs);
-  padding: var(--spacing-xs) var(--spacing-md);
-  background: var(--color-bg-tertiary);
+  padding: 8px var(--spacing-md);
+  background: var(--color-surface-raised);
   color: var(--color-text-secondary);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-full);
-  font-size: 0.8125rem;
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-medium);
   font-family: inherit;
   cursor: pointer;
   text-decoration: none;
+  box-shadow: var(--shadow-subtle);
   transition: all var(--duration-fast);
 }
 .home-link-btn:hover {
   border-color: var(--color-primary-border);
   color: var(--color-primary);
   transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
 }
 
 /* Home loaded models */
@@ -3658,24 +4272,25 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-sm);
-  background: var(--color-bg-secondary);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-surface-raised);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-lg);
-  font-size: 0.8125rem;
+  font-size: var(--text-xs);
   color: var(--color-text-secondary);
   width: 100%;
+  box-shadow: var(--shadow-subtle);
 }
 .home-loaded-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
   background: var(--color-success);
 }
 .home-loaded-text {
-  font-weight: 500;
-  margin-right: var(--spacing-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
 }
 .home-loaded-list {
   display: flex;
@@ -3685,11 +4300,13 @@
 .home-loaded-item {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  background: var(--color-bg-tertiary);
+  gap: 6px;
+  padding: 3px 10px;
+  background: var(--color-surface-sunken);
+  border: 1px solid var(--color-border-divider);
   border-radius: var(--radius-full);
-  font-size: 0.75rem;
+  font-size: var(--text-xs);
+  font-family: 'JetBrains Mono', monospace;
 }
 .home-loaded-item button {
   background: none;
@@ -3721,20 +4338,23 @@
   padding: var(--spacing-xl) 0;
 }
 .home-wizard-hero h1 {
-  font-size: 1.5rem;
-  font-weight: 600;
+  font-size: var(--text-2xl);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.015em;
   margin-bottom: var(--spacing-sm);
+  color: var(--color-text-primary);
 }
 .home-wizard-hero p {
   color: var(--color-text-secondary);
-  font-size: 0.9375rem;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
 }
 .home-wizard-steps {
   margin-bottom: var(--spacing-xl);
 }
 .home-wizard-steps h2 {
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
   margin-bottom: var(--spacing-md);
 }
 .home-wizard-step {
diff --git a/core/http/react-ui/src/App.jsx b/core/http/react-ui/src/App.jsx
index f06fe788d..d646f1749 100644
--- a/core/http/react-ui/src/App.jsx
+++ b/core/http/react-ui/src/App.jsx
@@ -65,7 +65,7 @@ export default function App() {
             <div className="app-footer-inner">
               {version && (
                 <span className="app-footer-version">
-                  LocalAI <span style={{ color: 'var(--color-primary)', fontWeight: 500 }}>{version}</span>
+                  LocalAI <span style={{ fontWeight: 500 }}>{version}</span>
                 </span>
               )}
               <div className="app-footer-links">
diff --git a/core/http/react-ui/src/components/SettingRow.jsx b/core/http/react-ui/src/components/SettingRow.jsx
index f21c88131..ffa42ede4 100644
--- a/core/http/react-ui/src/components/SettingRow.jsx
+++ b/core/http/react-ui/src/components/SettingRow.jsx
@@ -1,15 +1,11 @@
 export default function SettingRow({ label, description, children }) {
   return (
-    <div style={{
-      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-      padding: 'var(--spacing-sm) 0',
-      borderBottom: '1px solid var(--color-border-subtle)',
-    }}>
-      <div style={{ flex: 1, marginRight: 'var(--spacing-md)' }}>
-        <div style={{ fontSize: '0.875rem', fontWeight: 500 }}>{label}</div>
-        {description && <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>}
+    <div className="form-row">
+      <div className="form-row__label">
+        <div className="form-row__label-text">{label}</div>
+        {description && <div className="form-row__hint">{description}</div>}
       </div>
-      <div style={{ flexShrink: 0 }}>{children}</div>
+      <div className="form-row__control">{children}</div>
     </div>
   )
 }
diff --git a/core/http/react-ui/src/components/Toggle.jsx b/core/http/react-ui/src/components/Toggle.jsx
index 879c54ff1..4eb9edde1 100644
--- a/core/http/react-ui/src/components/Toggle.jsx
+++ b/core/http/react-ui/src/components/Toggle.jsx
@@ -1,27 +1,14 @@
 export default function Toggle({ checked, onChange, disabled }) {
   return (
-    <label style={{
-      position: 'relative', display: 'inline-block', width: 40, height: 22, cursor: disabled ? 'not-allowed' : 'pointer',
-      opacity: disabled ? 0.5 : 1,
-    }}>
+    <label className={`toggle${checked ? ' toggle--on' : ''}${disabled ? ' toggle--disabled' : ''}`}>
       <input
         type="checkbox"
         checked={checked || false}
         onChange={(e) => onChange(e.target.checked)}
         disabled={disabled}
-        style={{ display: 'none' }}
       />
-      <span style={{
-        position: 'absolute', inset: 0, borderRadius: 22,
-        background: checked ? 'var(--color-primary)' : 'var(--color-toggle-off)',
-        transition: 'background 200ms',
-      }}>
-        <span style={{
-          position: 'absolute', top: 2, left: checked ? 20 : 2,
-          width: 18, height: 18, borderRadius: '50%',
-          background: 'var(--color-text-inverse)', transition: 'left 200ms',
-          boxShadow: 'var(--shadow-sm)',
-        }} />
+      <span className="toggle__track">
+        <span className="toggle__thumb" />
       </span>
     </label>
   )
diff --git a/core/http/react-ui/src/index.css b/core/http/react-ui/src/index.css
index 2a5035023..94d590f29 100644
--- a/core/http/react-ui/src/index.css
+++ b/core/http/react-ui/src/index.css
@@ -13,6 +13,9 @@ html {
 
 body {
   font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--leading-normal);
   min-height: 100%;
   background-color: var(--color-bg-primary);
   color: var(--color-text-primary);
@@ -35,8 +38,14 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Space Grotesk', sans-serif;
   color: var(--color-text-primary);
-  line-height: 1.3;
+  line-height: var(--leading-tight);
+  letter-spacing: -0.01em;
 }
+h1 { font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); }
+h2 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); }
+h3 { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); }
+h4 { font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
+h5, h6 { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
 
 code, pre {
   font-family: 'JetBrains Mono', monospace;
diff --git a/core/http/react-ui/src/pages/AgentChat.jsx b/core/http/react-ui/src/pages/AgentChat.jsx
index a126fa97e..9bd1dd27b 100644
--- a/core/http/react-ui/src/pages/AgentChat.jsx
+++ b/core/http/react-ui/src/pages/AgentChat.jsx
@@ -356,7 +356,15 @@ export default function AgentChat() {
   }, [input, processing, name, activeId, addToast, userId, addMessage, nextId])
 
   const handleKeyDown = (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (
+      e.key === 'Enter' &&
+      !e.shiftKey &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.altKey &&
+      !e.nativeEvent?.isComposing &&
+      e.keyCode !== 229
+    ) {
       e.preventDefault()
       handleSend()
     }
diff --git a/core/http/react-ui/src/pages/BackendLogs.jsx b/core/http/react-ui/src/pages/BackendLogs.jsx
index ab38d8cd8..d8798d921 100644
--- a/core/http/react-ui/src/pages/BackendLogs.jsx
+++ b/core/http/react-ui/src/pages/BackendLogs.jsx
@@ -11,8 +11,8 @@ function wsUrl(path) {
 }
 
 const STREAM_BADGE = {
-  stdout: { bg: 'rgba(59,130,246,0.15)', color: '#60a5fa', label: 'stdout' },
-  stderr: { bg: 'rgba(239,68,68,0.15)', color: '#f87171', label: 'stderr' },
+  stdout: { bg: 'var(--color-info-light)', color: 'var(--color-log-info)', label: 'stdout' },
+  stderr: { bg: 'var(--color-error-light)', color: 'var(--color-log-stderr)', label: 'stderr' },
 }
 
 // Detail view: log lines for a specific model
diff --git a/core/http/react-ui/src/pages/Backends.jsx b/core/http/react-ui/src/pages/Backends.jsx
index 61940628d..16c3edfa3 100644
--- a/core/http/react-ui/src/pages/Backends.jsx
+++ b/core/http/react-ui/src/pages/Backends.jsx
@@ -262,13 +262,13 @@ export default function Backends() {
           marginBottom: 'var(--spacing-md)',
           display: 'flex', alignItems: 'center', justifyContent: 'space-between',
           padding: 'var(--spacing-sm) var(--spacing-md)',
-          background: 'var(--color-warning-bg, #fef3cd)',
-          border: '1px solid var(--color-warning, #ffc107)',
+          background: 'var(--color-warning-light)',
+          border: '1px solid var(--color-warning-border)',
           borderRadius: 'var(--radius-md)',
         }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)' }}>
-            <i className="fas fa-arrow-up" style={{ color: 'var(--color-warning, #856404)' }} />
-            <span style={{ color: 'var(--color-warning, #856404)', fontWeight: 500, fontSize: '0.875rem' }}>
+            <i className="fas fa-arrow-up" style={{ color: 'var(--color-warning)' }} />
+            <span style={{ color: 'var(--color-warning)', fontWeight: 500, fontSize: 'var(--text-sm)' }}>
               {Object.keys(upgrades).length} backend{Object.keys(upgrades).length > 1 ? 's have' : ' has'} updates available
             </span>
           </div>
@@ -447,20 +447,18 @@ export default function Backends() {
                     {/* Status */}
                     <td>
                       {isProcessing ? (
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-xs)' }}>
-                          <div style={{
-                            width: 80, height: 6, background: 'var(--color-bg-tertiary)',
-                            borderRadius: 3, overflow: 'hidden',
-                          }}>
-                            <div style={{
-                              width: `${op.progress || 0}%`, height: '100%',
-                              background: 'var(--color-primary)',
-                              borderRadius: 3, transition: 'width 300ms',
-                            }} />
+                        <div className="inline-install">
+                          <div className="inline-install__row">
+                            <div className="operation-spinner" />
+                            <span className="inline-install__label">
+                              {op.isDeletion ? 'Deleting...' : op.isQueued ? 'Queued' : `Installing${op.progress > 0 ? ` · ${Math.round(op.progress)}%` : '...'}`}
+                            </span>
                           </div>
-                          <span style={{ fontSize: '0.6875rem', color: 'var(--color-text-muted)' }}>
-                            {op.isDeletion ? 'Deleting...' : op.isQueued ? 'Queued' : 'Installing...'}
-                          </span>
+                          {op.progress > 0 && (
+                            <div className="operation-bar-container" style={{ flex: 'none', width: '120px', marginTop: 4 }}>
+                              <div className="operation-bar" style={{ width: `${op.progress}%` }} />
+                            </div>
+                          )}
                         </div>
                       ) : b.installed ? (
                         <div style={{ display: 'flex', gap: 4, alignItems: 'center', flexWrap: 'wrap' }}>
@@ -468,14 +466,14 @@ export default function Backends() {
                             <i className="fas fa-check" style={{ fontSize: '0.5rem', marginRight: 2 }} /> Installed
                           </span>
                           {upgrades[b.name] && (
-                            <span className="badge" style={{ fontSize: '0.625rem', background: '#fef3cd', color: '#856404' }}>
+                            <span className="badge" style={{ fontSize: '0.625rem', background: 'var(--color-warning-light)', color: 'var(--color-warning)' }}>
                               <i className="fas fa-arrow-up" style={{ fontSize: '0.5rem', marginRight: 2 }} />
                               {upgrades[b.name].available_version ? `v${upgrades[b.name].available_version}` : 'Update'}
                             </span>
                           )}
                         </div>
                       ) : (
-                        <span className="badge" style={{ background: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
+                        <span className="badge" style={{ background: 'var(--color-surface-sunken)', color: 'var(--color-text-muted)', border: '1px solid var(--color-border-default)' }}>
                           <i className="fas fa-circle" style={{ fontSize: '0.5rem', marginRight: 2 }} /> Not Installed
                         </span>
                       )}
diff --git a/core/http/react-ui/src/pages/Chat.jsx b/core/http/react-ui/src/pages/Chat.jsx
index a01165fc7..4278963ee 100644
--- a/core/http/react-ui/src/pages/Chat.jsx
+++ b/core/http/react-ui/src/pages/Chat.jsx
@@ -697,7 +697,17 @@ export default function Chat() {
   }, [activeChat, isStreaming, sendMessage, updateChatSettings])
 
   const handleKeyDown = (e) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    // Only Enter (no modifiers, no IME composition) sends.
+    // Shift+Enter, Ctrl+Enter, Meta+Enter, Alt+Enter all fall through to default textarea behavior (newline).
+    if (
+      e.key === 'Enter' &&
+      !e.shiftKey &&
+      !e.ctrlKey &&
+      !e.metaKey &&
+      !e.altKey &&
+      !e.nativeEvent?.isComposing &&
+      e.keyCode !== 229
+    ) {
       e.preventDefault()
       handleSend()
     }
diff --git a/core/http/react-ui/src/pages/Home.jsx b/core/http/react-ui/src/pages/Home.jsx
index 54a87b589..24e233cc6 100644
--- a/core/http/react-ui/src/pages/Home.jsx
+++ b/core/http/react-ui/src/pages/Home.jsx
@@ -420,7 +420,7 @@ export default function Home() {
               <span className="home-loaded-dot" />
               <span className="home-loaded-text">{loadedCount} model{loadedCount !== 1 ? 's' : ''} loaded</span>
               <div className="home-loaded-list">
-                {loadedModels.map(m => (
+                {[...loadedModels].sort((a, b) => a.id.localeCompare(b.id)).map(m => (
                   <span key={m.id} className="home-loaded-item">
                     {m.id}
                     <button onClick={() => handleStopModel(m.id)} title="Stop model">
diff --git a/core/http/react-ui/src/pages/ImageGen.jsx b/core/http/react-ui/src/pages/ImageGen.jsx
index 25a2b851b..2f759ac5d 100644
--- a/core/http/react-ui/src/pages/ImageGen.jsx
+++ b/core/http/react-ui/src/pages/ImageGen.jsx
@@ -83,7 +83,7 @@ export default function ImageGen() {
     <div className="media-layout">
       <div className="media-controls">
         <div className="page-header">
-          <h1 className="page-title"><i className="fas fa-image" style={{ marginRight: 8, color: 'var(--color-accent)' }} />Image Generation</h1>
+          <h1 className="page-title"><i className="fas fa-image" /> Image Generation</h1>
         </div>
 
         <form onSubmit={handleGenerate}>
@@ -100,10 +100,10 @@ export default function ImageGen() {
             <textarea className="textarea" value={negativePrompt} onChange={(e) => setNegativePrompt(e.target.value)} placeholder="What to avoid..." rows={2} />
           </div>
 
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-sm)' }}>
+          <div className="form-grid-2col">
             <div className="form-group">
               <label className="form-label">Size</label>
-              <select className="model-selector" value={size} onChange={(e) => setSize(e.target.value)} style={{ width: '100%' }}>
+              <select className="input btn-full" value={size} onChange={(e) => setSize(e.target.value)}>
                 {SIZES.map(s => <option key={s} value={s}>{s}</option>)}
               </select>
             </div>
@@ -117,7 +117,7 @@ export default function ImageGen() {
             <i className="fas fa-chevron-right" /> Advanced Settings
           </div>
           {showAdvanced && (
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
+            <div className="form-grid-2col">
               <div className="form-group"><label className="form-label">Steps</label><input className="input" type="number" value={steps} onChange={(e) => setSteps(e.target.value)} placeholder="20" /></div>
               <div className="form-group"><label className="form-label">Seed</label><input className="input" type="number" value={seed} onChange={(e) => setSeed(e.target.value)} placeholder="Random" /></div>
             </div>
@@ -127,17 +127,17 @@ export default function ImageGen() {
             <i className="fas fa-chevron-right" /> Image Inputs
           </div>
           {showImageInputs && (
-            <div style={{ marginBottom: 'var(--spacing-md)' }}>
+            <>
               <div className="form-group"><label className="form-label">Source Image (img2img)</label><input ref={sourceRef} type="file" accept="image/*" onChange={handleSourceImage} className="input" /></div>
               <div className="form-group">
                 <label className="form-label">Reference Images</label>
                 <input ref={refRef} type="file" accept="image/*" multiple onChange={handleRefImages} className="input" />
-                {refImages.length > 0 && <span style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>{refImages.length} image(s) added</span>}
+                {refImages.length > 0 && <span className="form-field__hint">{refImages.length} image(s) added</span>}
               </div>
-            </div>
+            </>
           )}
 
-          <button type="submit" className="btn btn-primary" disabled={loading} style={{ width: '100%' }}>
+          <button type="submit" className="btn btn-primary btn-full" disabled={loading}>
             {loading ? <><LoadingSpinner size="sm" /> Generating...</> : <><i className="fas fa-wand-magic-sparkles" /> Generate</>}
           </button>
         </form>
diff --git a/core/http/react-ui/src/pages/ImportModel.jsx b/core/http/react-ui/src/pages/ImportModel.jsx
index 1838f3e94..48fd04e42 100644
--- a/core/http/react-ui/src/pages/ImportModel.jsx
+++ b/core/http/react-ui/src/pages/ImportModel.jsx
@@ -38,20 +38,20 @@ const URI_FORMATS = [
     ],
   },
   {
-    icon: 'fas fa-box', color: '#22d3ee', title: 'OCI Registry',
+    icon: 'fas fa-box', color: 'var(--color-data-8)', title: 'OCI Registry',
     examples: [
       { prefix: 'oci://', suffix: 'registry.example.com/model:tag', desc: 'OCI container registry' },
       { prefix: 'ocifile://', suffix: '/path/to/image.tar', desc: 'Local OCI tarball file' },
     ],
   },
   {
-    icon: 'fas fa-cube', color: '#818cf8', title: 'Ollama',
+    icon: 'fas fa-cube', color: 'var(--color-data-1)', title: 'Ollama',
     examples: [
       { prefix: 'ollama://', suffix: 'llama2:7b', desc: 'Ollama model format' },
     ],
   },
   {
-    icon: 'fas fa-code', color: '#f472b6', title: 'YAML Configuration Files',
+    icon: 'fas fa-code', color: 'var(--color-data-7)', title: 'YAML Configuration Files',
     examples: [
       { prefix: '', suffix: 'https://example.com/model.yaml', desc: 'Remote YAML config file' },
       { prefix: 'file://', suffix: '/path/to/config.yaml', desc: 'Local YAML config file' },
@@ -437,7 +437,7 @@ export default function ImportModel() {
         <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
           <div style={{ padding: 'var(--spacing-md)', borderBottom: '1px solid var(--color-border-default)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <h2 style={{ fontSize: '1.125rem', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <i className="fas fa-code" style={{ color: '#d946ef' }} />
+              <i className="fas fa-code" style={{ color: 'var(--color-data-3)' }} />
               YAML Configuration Editor
             </h2>
             <button className="btn btn-secondary" style={{ fontSize: '0.75rem' }} onClick={() => { navigator.clipboard.writeText(yamlContent); addToast('Copied to clipboard', 'success') }}>
diff --git a/core/http/react-ui/src/pages/Models.jsx b/core/http/react-ui/src/pages/Models.jsx
index 29a6f0ff7..98c8e13d3 100644
--- a/core/http/react-ui/src/pages/Models.jsx
+++ b/core/http/react-ui/src/pages/Models.jsx
@@ -257,8 +257,8 @@ export default function Models() {
     <div className="page">
       <div className="page-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
         <div>
-          <h1 className="page-title">Model Gallery</h1>
-          <p className="page-subtitle">Discover and install AI models for your workflows</p>
+          <h1 className="page-title">Install Models</h1>
+          <p className="page-subtitle">Browse and install AI models from the gallery</p>
         </div>
         <div style={{ display: 'flex', gap: 'var(--spacing-md)', alignItems: 'center' }}>
           <div style={{ display: 'flex', gap: 'var(--spacing-md)', fontSize: '0.8125rem' }}>
@@ -461,15 +461,14 @@ export default function Models() {
                       {/* Status */}
                       <td>
                         {installing ? (
-                          <div>
-                            <span style={{ fontSize: '0.75rem', color: 'var(--color-primary)' }}>
-                              <i className="fas fa-spinner fa-spin" /> Installing...
-                            </span>
+                          <div className="inline-install">
+                            <div className="inline-install__row">
+                              <div className="operation-spinner" />
+                              <span className="inline-install__label">Installing{progress > 0 ? ` · ${Math.round(progress)}%` : '...'}</span>
+                            </div>
                             {progress > 0 && (
-                              <div style={{ marginTop: '4px', width: '100%', maxWidth: '120px' }}>
-                                <div style={{ height: 3, background: 'var(--color-bg-tertiary)', borderRadius: 2, overflow: 'hidden' }}>
-                                  <div style={{ height: '100%', width: `${progress}%`, background: 'var(--color-primary)', borderRadius: 2, transition: 'width 300ms' }} />
-                                </div>
+                              <div className="operation-bar-container" style={{ flex: 'none', width: '120px', marginTop: 4 }}>
+                                <div className="operation-bar" style={{ width: `${progress}%` }} />
                               </div>
                             )}
                           </div>
@@ -478,7 +477,7 @@ export default function Models() {
                             <i className="fas fa-check-circle" /> Installed
                           </span>
                         ) : (
-                          <span className="badge" style={{ background: 'var(--color-bg-tertiary)', color: 'var(--color-text-muted)' }}>
+                          <span className="badge" style={{ background: 'var(--color-surface-sunken)', color: 'var(--color-text-muted)', border: '1px solid var(--color-border-default)' }}>
                             <i className="fas fa-circle" /> Not Installed
                           </span>
                         )}
diff --git a/core/http/react-ui/src/pages/NodeBackendLogs.jsx b/core/http/react-ui/src/pages/NodeBackendLogs.jsx
index 25ab9d660..e6ff4b9b0 100644
--- a/core/http/react-ui/src/pages/NodeBackendLogs.jsx
+++ b/core/http/react-ui/src/pages/NodeBackendLogs.jsx
@@ -11,8 +11,8 @@ function wsUrl(path) {
 }
 
 const STREAM_BADGE = {
-  stdout: { bg: 'rgba(59,130,246,0.15)', color: '#60a5fa', label: 'stdout' },
-  stderr: { bg: 'rgba(239,68,68,0.15)', color: '#f87171', label: 'stderr' },
+  stdout: { bg: 'var(--color-info-light)', color: 'var(--color-log-info)', label: 'stdout' },
+  stderr: { bg: 'var(--color-error-light)', color: 'var(--color-log-stderr)', label: 'stderr' },
 }
 
 export default function NodeBackendLogs() {
diff --git a/core/http/react-ui/src/pages/Quantize.jsx b/core/http/react-ui/src/pages/Quantize.jsx
index bdfc056bc..4e58d09d7 100644
--- a/core/http/react-ui/src/pages/Quantize.jsx
+++ b/core/http/react-ui/src/pages/Quantize.jsx
@@ -20,11 +20,14 @@ const statusBadgeClass = {
 
 function FormSection({ icon, title, children }) {
   return (
-    <div style={{ marginBottom: 'var(--spacing-md)' }}>
-      <h4 style={{ marginBottom: 'var(--spacing-sm)', display: 'flex', alignItems: 'center', gap: '0.5em' }}>
-        {icon && <i className={icon} />} {title}
-      </h4>
-      {children}
+    <div className="form-group">
+      <div className="form-group__title">
+        {icon && <i className={icon} />}
+        <span>{title}</span>
+      </div>
+      <div className="form-group__body">
+        {children}
+      </div>
     </div>
   )
 }
@@ -62,43 +65,37 @@ function ProgressMonitor({ job, onClose }) {
   const message = latestEvent?.message ?? job.message ?? ''
 
   return (
-    <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--spacing-sm)' }}>
-        <h4 style={{ margin: 0 }}>
-          <i className="fas fa-chart-line" style={{ marginRight: '0.5em' }} />
-          Progress: {job.model}
+    <div className="card quantize-progress-card">
+      <div className="quantize-progress-card__header">
+        <h4 className="quantize-progress-card__title">
+          <i className="fas fa-chart-line" />
+          <span>Progress: {job.model}</span>
         </h4>
-        <button className="btn btn-sm" onClick={onClose}><i className="fas fa-times" /></button>
+        <button type="button" className="btn btn-ghost btn-sm" onClick={onClose} title="Close">
+          <i className="fas fa-times" />
+        </button>
       </div>
 
-      <div style={{ marginBottom: 'var(--spacing-sm)' }}>
+      <div className="quantize-progress-card__status">
         <span className={`badge ${statusBadgeClass[status] || ''}`}>{status}</span>
-        <span style={{ marginLeft: '1em', fontSize: '0.9em', color: 'var(--color-text-secondary)' }}>{message}</span>
+        {message && <span className="quantize-progress-card__message">{message}</span>}
       </div>
 
-      <div style={{
-        width: '100%', height: '24px', borderRadius: '12px',
-        background: 'var(--color-bg-tertiary)', overflow: 'hidden', marginBottom: 'var(--spacing-sm)',
-      }}>
-        <div style={{
-          width: `${Math.min(progress, 100)}%`, height: '100%',
-          background: status === 'failed' ? 'var(--color-error)' : 'var(--color-primary)',
-          transition: 'width 0.3s ease', borderRadius: '12px',
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          fontSize: '0.75em', fontWeight: 'bold', color: '#fff',
-        }}>
+      <div className="progress-bar">
+        <div
+          className={`progress-bar__fill${status === 'failed' ? ' progress-bar__fill--error' : ''}`}
+          style={{ width: `${Math.min(progress, 100)}%` }}
+        >
           {progress > 8 ? `${progress.toFixed(1)}%` : ''}
         </div>
       </div>
 
-      {/* Log tail */}
-      <div style={{
-        maxHeight: '150px', overflow: 'auto', fontSize: '0.8em',
-        background: 'var(--color-bg-secondary)', borderRadius: '6px', padding: '0.5em',
-        fontFamily: 'monospace',
-      }}>
+      <div className="log-tail">
         {events.slice(-20).map((ev, i) => (
-          <div key={i} style={{ color: ev.status === 'failed' ? 'var(--color-error)' : 'var(--color-text-secondary)' }}>
+          <div
+            key={i}
+            className={`log-tail__line${ev.status === 'failed' ? ' log-tail__line--error' : ''}`}
+          >
             [{ev.status}] {ev.message}
           </div>
         ))}
@@ -140,59 +137,52 @@ function ImportPanel({ job, onRefresh }) {
   }
 
   return (
-    <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-      <h4 style={{ marginBottom: 'var(--spacing-sm)' }}>
-        <i className="fas fa-file-export" style={{ marginRight: '0.5em' }} />
-        Output
+    <div className="card quantize-import-card">
+      <h4 className="quantize-import-card__title">
+        <i className="fas fa-file-export" />
+        <span>Output</span>
       </h4>
 
-      {error && (
-        <div className="alert alert-error" style={{ marginBottom: 'var(--spacing-sm)' }}>{error}</div>
-      )}
+      {error && <div className="alert alert-error">{error}</div>}
 
-      <div style={{ display: 'flex', gap: 'var(--spacing-sm)', flexWrap: 'wrap', alignItems: 'flex-end' }}>
-        {/* Download */}
+      <div className="quantize-import-card__row">
         <a
           href={quantizationApi.downloadUrl(job.id)}
           className="btn btn-secondary"
           download
         >
-          <i className="fas fa-download" style={{ marginRight: '0.4em' }} />
-          Download GGUF
+          <i className="fas fa-download" />
+          <span>Download GGUF</span>
         </a>
 
-        {/* Import */}
         {job.import_status === 'completed' ? (
-          <a href={`/app/chat/${encodeURIComponent(job.import_model_name)}`} className="btn btn-success">
-            <i className="fas fa-comments" style={{ marginRight: '0.4em' }} />
-            Chat with {job.import_model_name}
+          <a href={`/app/chat/${encodeURIComponent(job.import_model_name)}`} className="btn btn-primary">
+            <i className="fas fa-comments" />
+            <span>Chat with {job.import_model_name}</span>
           </a>
         ) : job.import_status === 'importing' ? (
-          <button className="btn" disabled>
-            <i className="fas fa-spinner fa-spin" style={{ marginRight: '0.4em' }} />
-            Importing... {job.import_message}
+          <button type="button" className="btn btn-secondary" disabled>
+            <i className="fas fa-spinner fa-spin" />
+            <span>Importing... {job.import_message}</span>
           </button>
         ) : (
           <>
             <input
-              className="input"
+              className="input quantize-import-card__name"
               placeholder="Model name (auto-generated if empty)"
               value={modelName}
               onChange={e => setModelName(e.target.value)}
-              style={{ maxWidth: '280px' }}
             />
-            <button className="btn btn-primary" onClick={handleImport} disabled={importing}>
-              <i className="fas fa-file-import" style={{ marginRight: '0.4em' }} />
-              Import to LocalAI
+            <button type="button" className="btn btn-primary" onClick={handleImport} disabled={importing}>
+              <i className="fas fa-file-import" />
+              <span>Import to LocalAI</span>
             </button>
           </>
         )}
       </div>
 
       {job.import_status === 'failed' && (
-        <div className="alert alert-error" style={{ marginTop: 'var(--spacing-sm)' }}>
-          Import failed: {job.import_message}
-        </div>
+        <div className="alert alert-error">Import failed: {job.import_message}</div>
       )}
     </div>
   )
@@ -293,37 +283,38 @@ export default function Quantize() {
   const effectiveQuantType = useCustomQuant ? customQuantType : quantType
 
   return (
-    <div style={{ maxWidth: '900px', margin: '0 auto', padding: 'var(--spacing-md)' }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
-        <h2 style={{ margin: 0 }}>
-          <i className="fas fa-compress" style={{ marginRight: '0.4em' }} />
-          Model Quantization
-        </h2>
-        <span className="badge badge-warning" style={{ fontSize: '0.7em' }}>Experimental</span>
+    <div className="page quantize-page">
+      <div className="page-header quantize-page__header">
+        <div>
+          <h1 className="page-title">
+            <i className="fas fa-compress" /> Model Quantization
+          </h1>
+          <p className="page-subtitle">Quantize and import GGUF models directly into LocalAI</p>
+        </div>
+        <span className="badge badge-warning">Experimental</span>
       </div>
 
       {error && (
-        <div className="card" style={{ borderColor: 'var(--color-error)', marginBottom: 'var(--spacing-md)' }}>
-          <div style={{ color: 'var(--color-error)' }}><i className="fas fa-exclamation-triangle" /> {error}</div>
+        <div className="alert alert-error">
+          <i className="fas fa-exclamation-triangle" /> {error}
         </div>
       )}
 
       {/* ── New Job Form ── */}
-      <form onSubmit={handleSubmit}>
-        <div className="card" style={{ marginBottom: 'var(--spacing-md)' }}>
-          <FormSection icon="fas fa-cube" title="Model">
-            <input
-              className="input"
-              placeholder="HuggingFace model name (e.g. meta-llama/Llama-3.2-1B) or local path"
-              value={model}
-              onChange={e => setModel(e.target.value)}
-              required
-              style={{ width: '100%' }}
-            />
-          </FormSection>
+      <form onSubmit={handleSubmit} className="card quantize-form">
+        <FormSection icon="fas fa-cube" title="Model">
+          <input
+            className="input btn-full"
+            placeholder="HuggingFace model name (e.g. meta-llama/Llama-3.2-1B) or local path"
+            value={model}
+            onChange={e => setModel(e.target.value)}
+            required
+          />
+        </FormSection>
 
+        <div className="form-grid-2col">
           <FormSection icon="fas fa-sliders-h" title="Quantization Type">
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)', alignItems: 'center', flexWrap: 'wrap' }}>
+            <div className="quantize-form__quant-row">
               <select
                 className="input"
                 value={useCustomQuant ? '__custom__' : quantType}
@@ -335,7 +326,6 @@ export default function Quantize() {
                     setQuantType(e.target.value)
                   }
                 }}
-                style={{ maxWidth: '200px' }}
               >
                 {QUANT_PRESETS.map(q => (
                   <option key={q} value={q}>{q}</option>
@@ -345,11 +335,10 @@ export default function Quantize() {
               {useCustomQuant && (
                 <input
                   className="input"
-                  placeholder="Enter custom quantization type"
+                  placeholder="Custom quantization type"
                   value={customQuantType}
                   onChange={e => setCustomQuantType(e.target.value)}
                   required
-                  style={{ maxWidth: '220px' }}
                 />
               )}
             </div>
@@ -357,37 +346,37 @@ export default function Quantize() {
 
           <FormSection icon="fas fa-server" title="Backend">
             <select
-              className="input"
+              className="input btn-full"
               value={backend}
               onChange={e => setBackend(e.target.value)}
-              style={{ maxWidth: '280px' }}
             >
               {backends.map(b => (
                 <option key={b.name || b} value={b.name || b}>{b.name || b}</option>
               ))}
             </select>
           </FormSection>
+        </div>
 
-          <FormSection icon="fas fa-key" title="HuggingFace Token (optional)">
-            <input
-              className="input"
-              type="password"
-              placeholder="hf_... (required for gated models)"
-              value={hfToken}
-              onChange={e => setHfToken(e.target.value)}
-              style={{ maxWidth: '400px' }}
-            />
-          </FormSection>
+        <FormSection icon="fas fa-key" title="HuggingFace Token (optional)">
+          <input
+            className="input btn-full"
+            type="password"
+            placeholder="hf_... (required for gated models)"
+            value={hfToken}
+            onChange={e => setHfToken(e.target.value)}
+          />
+        </FormSection>
 
+        <div className="form-group__actions">
           <button
             className="btn btn-primary"
             type="submit"
             disabled={submitting || !model || (useCustomQuant && !customQuantType)}
           >
             {submitting ? (
-              <><i className="fas fa-spinner fa-spin" style={{ marginRight: '0.4em' }} /> Starting...</>
+              <><i className="fas fa-spinner fa-spin" /> <span>Starting...</span></>
             ) : (
-              <><i className="fas fa-play" style={{ marginRight: '0.4em' }} /> Quantize ({effectiveQuantType})</>
+              <><i className="fas fa-play" /> <span>Quantize ({effectiveQuantType})</span></>
             )}
           </button>
         </div>
@@ -413,20 +402,20 @@ export default function Quantize() {
 
       {/* ── Jobs List ── */}
       {jobs.length > 0 && (
-        <div className="card">
-          <h4 style={{ marginBottom: 'var(--spacing-sm)' }}>
-            <i className="fas fa-list" style={{ marginRight: '0.5em' }} />
-            Jobs
+        <div className="card quantize-jobs">
+          <h4 className="quantize-jobs__title">
+            <i className="fas fa-list" />
+            <span>Jobs</span>
           </h4>
-          <div style={{ overflowX: 'auto' }}>
-            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.9em' }}>
+          <div className="quantize-jobs__scroll">
+            <table className="data-table">
               <thead>
-                <tr style={{ borderBottom: '1px solid var(--color-border)' }}>
-                  <th style={{ textAlign: 'left', padding: '0.5em' }}>Model</th>
-                  <th style={{ textAlign: 'left', padding: '0.5em' }}>Quant</th>
-                  <th style={{ textAlign: 'left', padding: '0.5em' }}>Status</th>
-                  <th style={{ textAlign: 'left', padding: '0.5em' }}>Created</th>
-                  <th style={{ textAlign: 'right', padding: '0.5em' }}>Actions</th>
+                <tr>
+                  <th>Model</th>
+                  <th>Quant</th>
+                  <th>Status</th>
+                  <th>Created</th>
+                  <th style={{ textAlign: 'right' }}>Actions</th>
                 </tr>
               </thead>
               <tbody>
@@ -436,37 +425,29 @@ export default function Quantize() {
                   return (
                     <tr
                       key={job.id}
-                      style={{
-                        borderBottom: '1px solid var(--color-border)',
-                        background: isSelected ? 'var(--color-bg-secondary)' : undefined,
-                        cursor: 'pointer',
-                      }}
+                      className={isSelected ? 'is-selected' : ''}
                       onClick={() => setSelectedJob(job)}
+                      style={{ cursor: 'pointer' }}
                     >
-                      <td style={{ padding: '0.5em', maxWidth: '250px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                        {job.model}
-                      </td>
-                      <td style={{ padding: '0.5em' }}>
-                        <code>{job.quantization_type}</code>
-                      </td>
-                      <td style={{ padding: '0.5em' }}>
+                      <td className="data-table__truncate">{job.model}</td>
+                      <td><code>{job.quantization_type}</code></td>
+                      <td>
                         <span className={`badge ${statusBadgeClass[job.status] || ''}`}>{job.status}</span>
                         {job.import_status === 'completed' && (
-                          <span className="badge badge-success" style={{ marginLeft: '0.3em' }}>imported</span>
+                          <span className="badge badge-success" style={{ marginLeft: 'var(--spacing-xs)' }}>imported</span>
                         )}
                       </td>
-                      <td style={{ padding: '0.5em', fontSize: '0.85em', color: 'var(--color-text-secondary)' }}>
+                      <td style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-secondary)' }}>
                         {new Date(job.created_at).toLocaleString()}
                       </td>
-                      <td style={{ padding: '0.5em', textAlign: 'right' }}>
-                        <div style={{ display: 'flex', gap: '0.3em', justifyContent: 'flex-end' }} onClick={e => e.stopPropagation()}>
-                          {isActive && (
-                            <button className="btn btn-sm btn-error" onClick={() => handleStop(job.id)} title="Stop">
+                      <td>
+                        <div className="data-table__actions" onClick={e => e.stopPropagation()}>
+                          {isActive ? (
+                            <button type="button" className="btn btn-sm btn-danger" onClick={() => handleStop(job.id)} title="Stop">
                               <i className="fas fa-stop" />
                             </button>
-                          )}
-                          {!isActive && (
-                            <button className="btn btn-sm" onClick={() => handleDelete(job.id)} title="Delete">
+                          ) : (
+                            <button type="button" className="btn btn-sm btn-ghost" onClick={() => handleDelete(job.id)} title="Delete">
                               <i className="fas fa-trash" />
                             </button>
                           )}
diff --git a/core/http/react-ui/src/pages/Sound.jsx b/core/http/react-ui/src/pages/Sound.jsx
index 0e1d92f45..3e4598023 100644
--- a/core/http/react-ui/src/pages/Sound.jsx
+++ b/core/http/react-ui/src/pages/Sound.jsx
@@ -79,7 +79,7 @@ export default function Sound() {
     <div className="media-layout">
       <div className="media-controls">
         <div className="page-header">
-          <h1 className="page-title"><i className="fas fa-music" style={{ marginRight: 8, color: 'var(--color-accent)' }} />Sound Generation</h1>
+          <h1 className="page-title"><i className="fas fa-music" /> Sound Generation</h1>
         </div>
 
         <form onSubmit={handleGenerate}>
@@ -89,11 +89,9 @@ export default function Sound() {
           </div>
 
           {/* Mode toggle */}
-          <div className="form-group">
-            <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
-              <button type="button" className={`filter-btn ${mode === 'simple' ? 'active' : ''}`} onClick={() => setMode('simple')}>Simple</button>
-              <button type="button" className={`filter-btn ${mode === 'advanced' ? 'active' : ''}`} onClick={() => setMode('advanced')}>Advanced</button>
-            </div>
+          <div className="segmented">
+            <button type="button" className={`segmented__item${mode === 'simple' ? ' is-active' : ''}`} onClick={() => setMode('simple')}>Simple</button>
+            <button type="button" className={`segmented__item${mode === 'advanced' ? ' is-active' : ''}`} onClick={() => setMode('advanced')}>Advanced</button>
           </div>
 
           {mode === 'simple' ? (
@@ -102,12 +100,14 @@ export default function Sound() {
                 <label className="form-label">Description</label>
                 <textarea className="textarea" value={text} onChange={(e) => setText(e.target.value)} placeholder="Describe the sound..." rows={3} />
               </div>
-              <div style={{ display: 'flex', gap: 'var(--spacing-md)', alignItems: 'center', marginBottom: 'var(--spacing-md)' }}>
-                <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.875rem', color: 'var(--color-text-secondary)' }}>
-                  <input type="checkbox" checked={instrumental} onChange={(e) => setInstrumental(e.target.checked)} /> Instrumental
+              <div className="form-grid-2col">
+                <label className="checkbox-row">
+                  <input type="checkbox" checked={instrumental} onChange={(e) => setInstrumental(e.target.checked)} />
+                  <span>Instrumental</span>
                 </label>
-                <div className="form-group" style={{ flex: 1, margin: 0 }}>
-                  <input className="input" value={vocalLanguage} onChange={(e) => setVocalLanguage(e.target.value)} placeholder="Vocal language" />
+                <div className="form-group">
+                  <label className="form-label">Vocal language</label>
+                  <input className="input" value={vocalLanguage} onChange={(e) => setVocalLanguage(e.target.value)} placeholder="e.g. English" />
                 </div>
               </div>
             </>
@@ -121,20 +121,21 @@ export default function Sound() {
                 <label className="form-label">Lyrics</label>
                 <textarea className="textarea" value={lyrics} onChange={(e) => setLyrics(e.target.value)} rows={3} />
               </div>
-              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--spacing-sm)' }}>
+              <div className="form-grid-2col">
                 <div className="form-group"><label className="form-label">BPM</label><input className="input" type="number" value={bpm} onChange={(e) => setBpm(e.target.value)} /></div>
                 <div className="form-group"><label className="form-label">Duration (s)</label><input className="input" type="number" step="0.1" value={duration} onChange={(e) => setDuration(e.target.value)} /></div>
                 <div className="form-group"><label className="form-label">Key/Scale</label><input className="input" value={keyscale} onChange={(e) => setKeyscale(e.target.value)} /></div>
                 <div className="form-group"><label className="form-label">Language</label><input className="input" value={language} onChange={(e) => setLanguage(e.target.value)} /></div>
                 <div className="form-group"><label className="form-label">Time Signature</label><input className="input" value={timesignature} onChange={(e) => setTimesignature(e.target.value)} /></div>
               </div>
-              <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: '0.875rem', color: 'var(--color-text-secondary)', marginBottom: 'var(--spacing-md)' }}>
-                <input type="checkbox" checked={think} onChange={(e) => setThink(e.target.checked)} /> Think mode
+              <label className="checkbox-row">
+                <input type="checkbox" checked={think} onChange={(e) => setThink(e.target.checked)} />
+                <span>Think mode</span>
               </label>
             </>
           )}
 
-          <button type="submit" className="btn btn-primary" disabled={loading} style={{ width: '100%' }}>
+          <button type="submit" className="btn btn-primary btn-full" disabled={loading}>
             {loading ? <><LoadingSpinner size="sm" /> Generating...</> : <><i className="fas fa-music" /> Generate Sound</>}
           </button>
         </form>
@@ -148,22 +149,20 @@ export default function Sound() {
           ) : error ? (
             <ErrorWithTraceLink message={error} />
           ) : selectedEntry ? (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-md)', width: '100%' }}>
-              <audio controls src={selectedEntry.results[0]?.url} style={{ width: '100%', maxWidth: '400px' }} data-testid="history-audio" />
-              <div style={{ padding: 'var(--spacing-sm)', background: 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-md)', color: 'var(--color-text-secondary)', fontStyle: 'italic', textAlign: 'center' }}>
-                "{selectedEntry.prompt}"
-              </div>
+            <div className="audio-result">
+              <audio controls src={selectedEntry.results[0]?.url} className="audio-result__player" data-testid="history-audio" />
+              <div className="result-quote">"{selectedEntry.prompt}"</div>
             </div>
           ) : audioUrl ? (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-md)', width: '100%' }}>
-              <audio ref={audioRef} controls src={audioUrl} style={{ width: '100%', maxWidth: '400px' }} />
+            <div className="audio-result">
+              <audio ref={audioRef} controls src={audioUrl} className="audio-result__player" />
               <a href={audioUrl} download={`sound-${new Date().toISOString().slice(0, 10)}.wav`} className="btn btn-primary btn-sm">
-                <i className="fas fa-download" /> Download
+                <i className="fas fa-download" /> <span>Download</span>
               </a>
             </div>
           ) : (
-            <div style={{ textAlign: 'center', color: 'var(--color-text-muted)' }}>
-              <i className="fas fa-music" style={{ fontSize: '3rem', marginBottom: 'var(--spacing-md)', opacity: 0.4 }} />
+            <div className="media-empty">
+              <i className="fas fa-music media-empty__icon" />
               <p>Generated sound will appear here</p>
             </div>
           )}
diff --git a/core/http/react-ui/src/pages/TTS.jsx b/core/http/react-ui/src/pages/TTS.jsx
index 21ae5bbf7..b566fc8dd 100644
--- a/core/http/react-ui/src/pages/TTS.jsx
+++ b/core/http/react-ui/src/pages/TTS.jsx
@@ -49,7 +49,7 @@ export default function TTS() {
     <div className="media-layout">
       <div className="media-controls">
         <div className="page-header">
-          <h1 className="page-title"><i className="fas fa-headphones" style={{ marginRight: 8, color: 'var(--color-accent)' }} />Text to Speech</h1>
+          <h1 className="page-title"><i className="fas fa-headphones" /> Text to Speech</h1>
         </div>
 
         <form onSubmit={handleGenerate}>
@@ -67,7 +67,7 @@ export default function TTS() {
               rows={5}
             />
           </div>
-          <button type="submit" className="btn btn-primary" disabled={loading} style={{ width: '100%' }}>
+          <button type="submit" className="btn btn-primary btn-full" disabled={loading}>
             {loading ? <><LoadingSpinner size="sm" /> Generating...</> : <><i className="fas fa-headphones" /> Generate Audio</>}
           </button>
         </form>
@@ -81,30 +81,26 @@ export default function TTS() {
           ) : error ? (
             <ErrorWithTraceLink message={error} />
           ) : selectedEntry ? (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-md)', width: '100%' }}>
-              <audio controls src={selectedEntry.results[0]?.url} style={{ width: '100%' }} data-testid="history-audio" />
-              <div style={{ padding: 'var(--spacing-sm)', background: 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-md)', color: 'var(--color-text-secondary)', fontStyle: 'italic', textAlign: 'center' }}>
-                "{selectedEntry.prompt}"
-              </div>
+            <div className="audio-result">
+              <audio controls src={selectedEntry.results[0]?.url} className="audio-result__player" data-testid="history-audio" />
+              <div className="result-quote">"{selectedEntry.prompt}"</div>
             </div>
           ) : audioUrl ? (
-            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-md)', width: '100%' }}>
-              <audio ref={audioRef} controls src={audioUrl} style={{ width: '100%' }} />
-              <div style={{ display: 'flex', gap: 'var(--spacing-sm)' }}>
+            <div className="audio-result">
+              <audio ref={audioRef} controls src={audioUrl} className="audio-result__player" />
+              <div className="audio-result__actions">
                 <a href={audioUrl} download={`tts-${model}-${new Date().toISOString().slice(0, 10)}.mp3`} className="btn btn-primary btn-sm">
-                  <i className="fas fa-download" /> Download
+                  <i className="fas fa-download" /> <span>Download</span>
                 </a>
-                <button className="btn btn-secondary btn-sm" onClick={() => audioRef.current?.play()}>
-                  <i className="fas fa-rotate-right" /> Replay
+                <button type="button" className="btn btn-secondary btn-sm" onClick={() => audioRef.current?.play()}>
+                  <i className="fas fa-rotate-right" /> <span>Replay</span>
                 </button>
               </div>
-              <div style={{ padding: 'var(--spacing-sm)', background: 'var(--color-bg-tertiary)', borderRadius: 'var(--radius-md)', color: 'var(--color-text-secondary)', fontStyle: 'italic', textAlign: 'center' }}>
-                "{text}"
-              </div>
+              <div className="result-quote">"{text}"</div>
             </div>
           ) : (
-            <div style={{ textAlign: 'center', color: 'var(--color-text-muted)' }}>
-              <i className="fas fa-headphones" style={{ fontSize: '3rem', marginBottom: 'var(--spacing-md)', opacity: 0.4 }} />
+            <div className="media-empty">
+              <i className="fas fa-headphones media-empty__icon" />
               <p>Generated audio will appear here</p>
             </div>
           )}
diff --git a/core/http/react-ui/src/pages/Traces.jsx b/core/http/react-ui/src/pages/Traces.jsx
index d27d3034b..23942cde4 100644
--- a/core/http/react-ui/src/pages/Traces.jsx
+++ b/core/http/react-ui/src/pages/Traces.jsx
@@ -61,17 +61,17 @@ function truncateValue(value, maxLen) {
 }
 
 const TYPE_COLORS = {
-  llm: { bg: 'rgba(59,130,246,0.15)', color: '#60a5fa' },
-  embedding: { bg: 'rgba(168,85,247,0.15)', color: '#c084fc' },
-  transcription: { bg: 'rgba(234,179,8,0.15)', color: '#facc15' },
-  image_generation: { bg: 'rgba(34,197,94,0.15)', color: '#4ade80' },
-  video_generation: { bg: 'rgba(236,72,153,0.15)', color: '#f472b6' },
-  tts: { bg: 'rgba(249,115,22,0.15)', color: '#fb923c' },
-  sound_generation: { bg: 'rgba(20,184,166,0.15)', color: '#2dd4bf' },
-  rerank: { bg: 'rgba(99,102,241,0.15)', color: '#818cf8' },
-  tokenize: { bg: 'rgba(107,114,128,0.15)', color: '#9ca3af' },
-  detection: { bg: 'rgba(14,165,233,0.15)', color: '#38bdf8' },
-  model_load: { bg: 'rgba(239,68,68,0.15)', color: '#f87171' },
+  llm: { bg: 'var(--color-primary-light)', color: 'var(--color-data-1)' },
+  embedding: { bg: 'var(--color-accent-light)', color: 'var(--color-data-3)' },
+  transcription: { bg: 'var(--color-warning-light)', color: 'var(--color-data-4)' },
+  image_generation: { bg: 'var(--color-success-light)', color: 'var(--color-data-5)' },
+  video_generation: { bg: 'var(--color-accent-light)', color: 'var(--color-data-7)' },
+  tts: { bg: 'var(--color-warning-light)', color: 'var(--color-data-6)' },
+  sound_generation: { bg: 'var(--color-info-light)', color: 'var(--color-data-8)' },
+  rerank: { bg: 'var(--color-primary-light)', color: 'var(--color-data-1)' },
+  tokenize: { bg: 'var(--color-secondary-light)', color: 'var(--color-text-muted)' },
+  detection: { bg: 'var(--color-info-light)', color: 'var(--color-data-8)' },
+  model_load: { bg: 'var(--color-error-light)', color: 'var(--color-data-2)' },
 }
 
 function typeBadgeStyle(type) {
@@ -335,7 +335,11 @@ export default function Traces() {
       setBackendCount(backend.length)
       setTraces(activeTab === 'api' ? api : backend)
     } catch (err) {
-      addToast(`Failed to load traces: ${err.message}`, 'error')
+      // Tracing disabled is the default state, not an error — the in-page banner covers it.
+      const disabled = /disabled|not enabled|404|not found/i.test(err?.message || '')
+      if (!disabled) {
+        addToast(`Failed to load traces: ${err.message}`, 'error')
+      }
     } finally {
       setLoading(false)
     }
@@ -395,10 +399,11 @@ export default function Traces() {
         </button>
       </div>
 
-      <div style={{ display: 'flex', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
+      <div style={{ display: 'flex', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)', alignItems: 'center' }}>
         <button className="btn btn-secondary btn-sm" onClick={fetchTraces}><i className="fas fa-rotate" /> Refresh</button>
-        <button className="btn btn-danger btn-sm" onClick={handleClear}><i className="fas fa-trash" /> Clear</button>
         <button className="btn btn-secondary btn-sm" onClick={handleExport} disabled={traces.length === 0}><i className="fas fa-download" /> Export</button>
+        <div style={{ flex: 1 }} />
+        <button className="btn btn-danger btn-sm" onClick={handleClear} disabled={traces.length === 0}><i className="fas fa-trash" /> Clear</button>
       </div>
 
       {settings && (() => {
@@ -457,7 +462,7 @@ export default function Traces() {
                   onChange={(v) => setSettings(prev => ({ ...prev, enable_backend_logging: v }))}
                 />
               </SettingRow>
-              <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 'var(--spacing-sm)' }}>
+              <div className="form-group__actions" style={{ justifyContent: 'flex-end' }}>
                 <button className="btn btn-primary btn-sm" onClick={handleSaveSettings} disabled={saving}>
                   {saving ? <><LoadingSpinner size="sm" /> Saving...</> : <><i className="fas fa-save" /> Save</>}
                 </button>
@@ -473,8 +478,20 @@ export default function Traces() {
       ) : traces.length === 0 ? (
         <div className="empty-state">
           <div className="empty-state-icon"><i className="fas fa-wave-square" /></div>
-          <h2 className="empty-state-title">No traces</h2>
-          <p className="empty-state-text">Traces will appear here as requests are made.</p>
+          <h2 className="empty-state-title">
+            {activeTab === 'api'
+              ? (tracingEnabled ? 'No API traces yet' : 'API tracing is off')
+              : (backendLoggingEnabled ? 'No backend traces yet' : 'Backend logging is off')}
+          </h2>
+          <p className="empty-state-text">
+            {activeTab === 'api'
+              ? (tracingEnabled
+                  ? 'Traces will appear here as API requests are made.'
+                  : 'Enable Tracing above to start recording API requests, responses, and backend operations.')
+              : (backendLoggingEnabled
+                  ? 'Backend operations will appear here as models run.'
+                  : 'Enable Backend Logging above to capture per-model process output.')}
+          </p>
         </div>
       ) : activeTab === 'api' ? (
         <div className="table-container">
diff --git a/core/http/react-ui/src/pages/VideoGen.jsx b/core/http/react-ui/src/pages/VideoGen.jsx
index 882f666c4..75375fe46 100644
--- a/core/http/react-ui/src/pages/VideoGen.jsx
+++ b/core/http/react-ui/src/pages/VideoGen.jsx
@@ -80,7 +80,7 @@ export default function VideoGen() {
     <div className="media-layout">
       <div className="media-controls">
         <div className="page-header">
-          <h1 className="page-title"><i className="fas fa-video" style={{ marginRight: 8, color: 'var(--color-accent)' }} />Video Generation</h1>
+          <h1 className="page-title"><i className="fas fa-video" /> Video Generation</h1>
         </div>
 
         <form onSubmit={handleGenerate}>
@@ -97,10 +97,10 @@ export default function VideoGen() {
             <textarea className="textarea" value={negativePrompt} onChange={(e) => setNegativePrompt(e.target.value)} rows={2} />
           </div>
 
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--spacing-sm)' }}>
+          <div className="form-grid-3col">
             <div className="form-group">
               <label className="form-label">Size</label>
-              <select className="model-selector" value={size} onChange={(e) => setSize(e.target.value)} style={{ width: '100%' }}>
+              <select className="input btn-full" value={size} onChange={(e) => setSize(e.target.value)}>
                 {SIZES.map(s => <option key={s} value={s}>{s}</option>)}
               </select>
             </div>
@@ -118,7 +118,7 @@ export default function VideoGen() {
             <i className="fas fa-chevron-right" /> Advanced
           </div>
           {showAdvanced && (
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--spacing-sm)', marginBottom: 'var(--spacing-md)' }}>
+            <div className="form-grid-3col">
               <div className="form-group"><label className="form-label">Steps</label><input className="input" type="number" value={steps} onChange={(e) => setSteps(e.target.value)} /></div>
               <div className="form-group"><label className="form-label">Seed</label><input className="input" type="number" value={seed} onChange={(e) => setSeed(e.target.value)} /></div>
               <div className="form-group"><label className="form-label">CFG Scale</label><input className="input" type="number" step="0.1" value={cfgScale} onChange={(e) => setCfgScale(e.target.value)} /></div>
@@ -129,13 +129,13 @@ export default function VideoGen() {
             <i className="fas fa-chevron-right" /> Image Inputs
           </div>
           {showImageInputs && (
-            <div style={{ marginBottom: 'var(--spacing-md)' }}>
+            <div className="form-grid-2col">
               <div className="form-group"><label className="form-label">Start Image</label><input type="file" accept="image/*" onChange={(e) => handleImageUpload(e, setStartImage)} className="input" /></div>
               <div className="form-group"><label className="form-label">End Image</label><input type="file" accept="image/*" onChange={(e) => handleImageUpload(e, setEndImage)} className="input" /></div>
             </div>
           )}
 
-          <button type="submit" className="btn btn-primary" disabled={loading} style={{ width: '100%' }}>
+          <button type="submit" className="btn btn-primary btn-full" disabled={loading}>
             {loading ? <><LoadingSpinner size="sm" /> Generating...</> : <><i className="fas fa-video" /> Generate Video</>}
           </button>
         </form>
diff --git a/core/http/react-ui/src/theme.css b/core/http/react-ui/src/theme.css
index 48dfe9df9..46eb74d19 100644
--- a/core/http/react-ui/src/theme.css
+++ b/core/http/react-ui/src/theme.css
@@ -1,60 +1,84 @@
 /* LocalAI Theme - CSS Variables System */
 :root,
 [data-theme="dark"] {
-  --color-bg-primary: #0f1117;
-  --color-bg-secondary: #161921;
-  --color-bg-tertiary: #1c1f2a;
-  --color-bg-overlay: rgba(15, 17, 23, 0.95);
+  --color-bg-primary: #0b0d14;
+  --color-bg-secondary: #14172099;
+  --color-bg-secondary: #161923;
+  --color-bg-tertiary: #232838;
+  --color-bg-overlay: rgba(11, 13, 20, 0.95);
 
-  --color-primary: #4f7df5;
-  --color-primary-hover: #3d6be3;
-  --color-primary-active: #2f5ad1;
-  --color-primary-text: #FFFFFF;
-  --color-primary-light: rgba(79, 125, 245, 0.08);
-  --color-primary-border: rgba(79, 125, 245, 0.15);
+  --color-surface-raised: #1a1e2c;
+  --color-surface-sunken: #090b12;
+  --color-surface-hover: #242938;
 
-  --color-secondary: #64748B;
-  --color-secondary-hover: #475569;
-  --color-secondary-light: rgba(100, 116, 139, 0.1);
+  --color-primary: #f1f3f8;
+  --color-primary-hover: #ffffff;
+  --color-primary-active: #d8dce6;
+  --color-primary-text: #0a0c12;
+  --color-primary-light: rgba(241, 243, 248, 0.08);
+  --color-primary-border: rgba(241, 243, 248, 0.22);
 
-  --color-accent: #7c9cf5;
-  --color-accent-hover: #6889e3;
-  --color-accent-light: rgba(124, 156, 245, 0.1);
+  --color-secondary: #6b7487;
+  --color-secondary-hover: #525b6e;
+  --color-secondary-light: rgba(107, 116, 135, 0.12);
 
-  --color-text-primary: #E5E7EB;
-  --color-text-secondary: #94A3B8;
-  --color-text-muted: #64748B;
-  --color-text-disabled: #475569;
+  --color-accent: #e8a87c;
+  --color-accent-hover: #d89668;
+  --color-accent-light: rgba(232, 168, 124, 0.14);
+
+  --color-text-primary: #f1f3f8;
+  --color-text-secondary: #a8adbd;
+  --color-text-muted: #6c7084;
+  --color-text-disabled: #3e4253;
   --color-text-inverse: #FFFFFF;
 
-  --color-border-subtle: rgba(255, 255, 255, 0.08);
+  --color-border-subtle: rgba(255, 255, 255, 0.06);
   --color-border-default: rgba(255, 255, 255, 0.12);
-  --color-border-strong: rgba(79, 125, 245, 0.3);
+  --color-border-strong: rgba(255, 255, 255, 0.22);
   --color-border-divider: rgba(255, 255, 255, 0.05);
-  --color-border-primary: rgba(79, 125, 245, 0.2);
-  --color-border-focus: rgba(79, 125, 245, 0.4);
+  --color-border-primary: rgba(255, 255, 255, 0.22);
+  --color-border-focus: rgba(241, 243, 248, 0.38);
 
   --color-success: #22C55E;
-  --color-success-light: rgba(34, 197, 94, 0.1);
-  --color-success-border: rgba(34, 197, 94, 0.3);
+  --color-success-light: rgba(34, 197, 94, 0.14);
+  --color-success-border: rgba(34, 197, 94, 0.32);
   --color-warning: #F59E0B;
-  --color-warning-light: rgba(245, 158, 11, 0.1);
-  --color-warning-border: rgba(245, 158, 11, 0.3);
+  --color-warning-light: rgba(245, 158, 11, 0.14);
+  --color-warning-border: rgba(245, 158, 11, 0.32);
   --color-error: #EF4444;
-  --color-error-light: rgba(239, 68, 68, 0.1);
-  --color-error-border: rgba(239, 68, 68, 0.3);
-  --color-info: #4f7df5;
-  --color-info-light: rgba(79, 125, 245, 0.1);
-  --color-info-border: rgba(79, 125, 245, 0.3);
-  --color-accent-border: rgba(124, 156, 245, 0.3);
-  --color-modal-backdrop: rgba(0, 0, 0, 0.6);
+  --color-error-light: rgba(239, 68, 68, 0.14);
+  --color-error-border: rgba(239, 68, 68, 0.32);
+  --color-info: #7dc7d1;
+  --color-info-light: rgba(125, 199, 209, 0.14);
+  --color-info-border: rgba(125, 199, 209, 0.32);
+  --color-accent-border: rgba(232, 168, 124, 0.32);
+  --color-modal-backdrop: rgba(0, 0, 0, 0.7);
 
-  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.2);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35);
-  --shadow-glow: 0 0 0 1px rgba(79, 125, 245, 0.15), 0 0 12px rgba(79, 125, 245, 0.2);
-  --shadow-sidebar: 1px 0 3px rgba(0, 0, 0, 0.25);
+  /* Data viz palette — distinct hues, readable on dark */
+  --color-data-1: #7dc7d1;
+  --color-data-2: #f87171;
+  --color-data-3: #c084fc;
+  --color-data-4: #fbbf24;
+  --color-data-5: #34d399;
+  --color-data-6: #fb923c;
+  --color-data-7: #f472b6;
+  --color-data-8: #22d3ee;
+
+  /* Log streams */
+  --color-log-stdout: #d1d5db;
+  --color-log-stderr: #fca5a5;
+  --color-log-info: #93c5fd;
+  --color-log-warn: #fcd34d;
+
+  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
+  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.55);
+  --shadow-glow: var(--shadow-md);
+  --shadow-sidebar: 1px 0 0 rgba(255, 255, 255, 0.06);
+
+  /* Inset top-edge highlight — fakes elevation in dark mode */
+  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);
 
   --duration-fast: 150ms;
   --duration-normal: 200ms;
@@ -66,51 +90,77 @@
   --spacing-md: 1rem;
   --spacing-lg: 1.5rem;
   --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
 
   --radius-sm: 4px;
   --radius-md: 6px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
   --radius-full: 9999px;
 
+  /* Typography scale */
+  --text-xs: 0.6875rem;
+  --text-sm: 0.8125rem;
+  --text-base: 0.9375rem;
+  --text-lg: 1.0625rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --leading-tight: 1.25;
+  --leading-snug: 1.4;
+  --leading-normal: 1.55;
+  --leading-relaxed: 1.7;
+
   --sidebar-width: 200px;
   --sidebar-width-collapsed: 52px;
-  --color-toggle-off: #475569;
+  --color-toggle-off: #3a4152;
+  --color-toggle-on: var(--color-primary);
 }
 
 [data-theme="light"] {
-  --color-bg-primary: #f5f6f9;
-  --color-bg-secondary: #FFFFFF;
-  --color-bg-tertiary: #f0f1f5;
-  --color-bg-overlay: rgba(245, 246, 249, 0.9);
+  /* Pearl palette — soft cool off-white, clean layered surfaces */
+  --color-bg-primary: #f5f6f8;       /* page: soft pearl */
+  --color-bg-secondary: #ffffff;     /* raised surface */
+  --color-bg-tertiary: #e7e9ef;      /* sunken wells */
+  --color-bg-overlay: rgba(245, 246, 248, 0.92);
 
-  --color-primary: #4068d9;
-  --color-primary-hover: #3358c7;
-  --color-primary-active: #2a4ab5;
+  --color-surface-raised: #ffffff;
+  --color-surface-sunken: #eef0f4;
+  --color-surface-hover: #edeff4;
+
+  --color-primary: #14161f;          /* near-black (cool-leaning) */
+  --color-primary-hover: #000000;
+  --color-primary-active: #2a2e3a;
   --color-primary-text: #FFFFFF;
-  --color-primary-light: rgba(64, 104, 217, 0.08);
-  --color-primary-border: rgba(64, 104, 217, 0.2);
+  --color-primary-light: rgba(20, 22, 31, 0.06);
+  --color-primary-border: rgba(20, 22, 31, 0.2);
 
-  --color-secondary: #475569;
-  --color-secondary-hover: #334155;
-  --color-secondary-light: rgba(71, 85, 105, 0.1);
+  --color-secondary: #525966;
+  --color-secondary-hover: #3b414c;
+  --color-secondary-light: rgba(82, 89, 102, 0.1);
 
-  --color-accent: #5a78c9;
-  --color-accent-hover: #4a67b7;
-  --color-accent-light: rgba(90, 120, 201, 0.1);
+  --color-accent: #c97b5a;           /* muted terracotta accent */
+  --color-accent-hover: #b56a4a;
+  --color-accent-light: rgba(201, 123, 90, 0.12);
 
-  --color-text-primary: #1E293B;
-  --color-text-secondary: #64748B;
-  --color-text-muted: #94A3B8;
-  --color-text-disabled: #CBD5E1;
+  --color-text-primary: #14161f;     /* crisp near-black, cool-leaning */
+  --color-text-secondary: #555a68;
+  --color-text-muted: #8a8e9b;
+  --color-text-disabled: #c2c5cf;
   --color-text-inverse: #FFFFFF;
 
-  --color-border-subtle: rgba(15, 23, 42, 0.06);
-  --color-border-default: rgba(15, 23, 42, 0.1);
-  --color-border-strong: rgba(64, 104, 217, 0.3);
-  --color-border-divider: rgba(15, 23, 42, 0.04);
-  --color-border-primary: rgba(64, 104, 217, 0.2);
-  --color-border-focus: rgba(64, 104, 217, 0.4);
+  --color-border-subtle: rgba(20, 22, 31, 0.07);
+  --color-border-default: rgba(20, 22, 31, 0.14);
+  --color-border-strong: rgba(20, 22, 31, 0.32);
+  --color-border-divider: rgba(20, 22, 31, 0.05);
+  --color-border-primary: rgba(20, 22, 31, 0.22);
+  --color-border-focus: rgba(20, 22, 31, 0.45);
 
   --color-success: #16A34A;
   --color-success-light: rgba(22, 163, 74, 0.1);
@@ -119,19 +169,38 @@
   --color-warning-light: rgba(217, 119, 6, 0.1);
   --color-warning-border: rgba(217, 119, 6, 0.3);
   --color-error: #DC2626;
-  --color-error-light: rgba(220, 38, 38, 0.1);
+  --color-error-light: rgba(220, 38, 38, 0.09);
   --color-error-border: rgba(220, 38, 38, 0.3);
-  --color-info: #4068d9;
-  --color-info-light: rgba(64, 104, 217, 0.1);
-  --color-info-border: rgba(64, 104, 217, 0.3);
-  --color-accent-border: rgba(90, 120, 201, 0.3);
-  --color-modal-backdrop: rgba(0, 0, 0, 0.5);
+  --color-info: #0f7583;
+  --color-info-light: rgba(15, 117, 131, 0.10);
+  --color-info-border: rgba(15, 117, 131, 0.3);
+  --color-accent-border: rgba(201, 123, 90, 0.3);
+  --color-modal-backdrop: rgba(20, 22, 31, 0.5);
 
-  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
-  --shadow-glow: 0 0 0 1px rgba(64, 104, 217, 0.15), 0 0 8px rgba(64, 104, 217, 0.2);
-  --shadow-sidebar: 1px 0 3px rgba(0, 0, 0, 0.08);
-  --color-toggle-off: #CBD5E1;
+  /* Data viz palette */
+  --color-data-1: #0f7583;
+  --color-data-2: #c97b5a;
+  --color-data-3: #8b5cf6;
+  --color-data-4: #d97706;
+  --color-data-5: #059669;
+  --color-data-6: #dc2626;
+  --color-data-7: #db2777;
+  --color-data-8: #0891b2;
+
+  --color-log-stdout: #14161f;
+  --color-log-stderr: #b91c1c;
+  --color-log-info: #0f7583;
+  --color-log-warn: #b45309;
+
+  --shadow-subtle: 0 1px 2px rgba(20, 22, 31, 0.05);
+  --shadow-sm: 0 2px 6px rgba(20, 22, 31, 0.07);
+  --shadow-md: 0 8px 20px rgba(20, 22, 31, 0.08);
+  --shadow-lg: 0 20px 38px rgba(20, 22, 31, 0.1);
+  --shadow-glow: var(--shadow-md);
+  --shadow-sidebar: 4px 0 24px -12px rgba(20, 22, 31, 0.1), 1px 0 0 rgba(20, 22, 31, 0.06);
+
+  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+
+  --color-toggle-off: #c5c8d2;
+  --color-toggle-on: var(--color-primary);
 }