diff --git a/assets/css/admin.css b/assets/css/admin.css
index b0da78a..d871d91 100644
--- a/assets/css/admin.css
+++ b/assets/css/admin.css
@@ -8,9 +8,11 @@
 @import "./theme-layer2-attributes.css";
 @import "./theme-semantic.css";
 
-/* Admin components, icons, and utilities */
+/* Admin components, layout, icons, and transitions */
 @import "./admin/components.css";
+@import "./admin/layout.css";
 @import "./admin/icons.css";
+@import "./admin/transitions.css";
 @import "./admin/utilities.css";
 
 /* LiveView loading state variants */
diff --git a/assets/css/admin/components.css b/assets/css/admin/components.css
index 447d384..ff4aa5a 100644
--- a/assets/css/admin/components.css
+++ b/assets/css/admin/components.css
@@ -8,6 +8,7 @@
   display: grid;
   grid-template-columns: 0 1fr;
   height: 100%;
+  min-height: 100vh;
 }
 
 .admin-layout-toggle {
@@ -222,6 +223,34 @@
   border-radius: 9999px;
 }
 
+/* ── Page header ── */
+
+.admin-header {
+  padding-bottom: 1rem;
+}
+
+.admin-header-with-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.5rem;
+}
+
+.admin-header-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 2rem;
+}
+
+.admin-header-subtitle {
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
+}
+
+.admin-header-actions {
+  flex: none;
+}
+
 /* ── Cards ── */
 
 .admin-card {
@@ -249,6 +278,134 @@
   margin-top: 0.75rem;
 }
 
+/* Card layout helpers */
+.admin-card-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.admin-card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.admin-card-subtitle {
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
+  margin-top: 0.25rem;
+}
+
+.admin-card-meta {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 1rem;
+  row-gap: 0.25rem;
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+}
+
+.admin-card-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+/* ── Empty states ── */
+
+.admin-empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+}
+
+.admin-empty-state-icon {
+  width: 4rem;
+  height: 4rem;
+  margin-inline: auto;
+  margin-bottom: 1rem;
+  color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
+}
+
+.admin-empty-state-title {
+  font-size: 1.25rem;
+  font-weight: 500;
+}
+
+.admin-empty-state-text {
+  margin-top: 0.5rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+  max-width: 28rem;
+  margin-inline: auto;
+}
+
+.admin-empty-state-actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+/* ── Callout / info box ── */
+
+.admin-callout {
+  border-radius: 0.5rem;
+  background: var(--t-surface-sunken);
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  font-size: 0.875rem;
+}
+
+.admin-callout-title {
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.admin-callout-list {
+  list-style: decimal inside;
+
+  & li + li {
+    margin-top: 0.25rem;
+  }
+}
+
+/* ── Inline status indicators ── */
+
+.admin-status-success {
+  color: var(--t-status-success, oklch(0.65 0.19 145));
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.admin-status-error {
+  color: var(--t-status-error, #dc2626);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* ── Form layout helpers ── */
+
+.admin-form-narrow {
+  max-width: 36rem;
+  margin-top: 1.5rem;
+}
+
+.admin-form-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+}
+
+.admin-inline-group {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
 /* ── Tables ── */
 
 .admin-table-wrap {
@@ -287,6 +444,16 @@
   background-color: color-mix(in oklch, var(--t-surface-sunken) 30%, transparent);
 }
 
+.admin-table-actions {
+  width: 0;
+  font-weight: 600;
+}
+
+.admin-table-actions-row {
+  display: flex;
+  gap: 1rem;
+}
+
 /* ── Forms ── */
 
 .admin-fieldset {
@@ -419,6 +586,24 @@
   border-radius: 0.5rem;
   font-size: 0.875rem;
   line-height: 1.5;
+  width: 20rem;
+  max-width: 20rem;
+  overflow-wrap: break-word;
+}
+
+@media (min-width: 640px) {
+  .admin-alert {
+    width: 24rem;
+    max-width: 24rem;
+  }
+}
+
+.admin-alert-title {
+  font-weight: 600;
+}
+
+.admin-alert-spacer {
+  flex: 1;
 }
 
 .admin-alert-info {
@@ -630,9 +815,18 @@
   flex: 1;
 }
 
+.admin-list-title {
+  font-weight: 700;
+}
+
 /* ── Form error text ── */
 
 .admin-error {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.375rem;
+  font-size: 0.875rem;
   color: var(--t-status-error);
 }
 
@@ -732,6 +926,299 @@
   cursor: crosshair;
 }
 
+/* ── Settings sections ── */
+
+.admin-settings {
+  max-width: 42rem;
+}
+
+.admin-section {
+  margin-top: 2.5rem;
+}
+
+.admin-section-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.admin-section-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.admin-section-desc {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+}
+
+.admin-section-body {
+  margin-top: 1rem;
+}
+
+/* ── Status pills (inline badges in section headers) ── */
+
+.admin-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  box-shadow: inset 0 0 0 1px var(--_pill-ring);
+}
+
+.admin-status-pill-green {
+  --_pill-ring: rgb(22 163 74 / 0.2);
+  background: #f0fdf4;
+  color: #15803d;
+}
+
+.admin-status-pill-amber {
+  --_pill-ring: rgb(217 119 6 / 0.1);
+  background: #fffbeb;
+  color: #b45309;
+}
+
+.admin-status-pill-blue {
+  --_pill-ring: rgb(37 99 235 / 0.2);
+  background: #eff6ff;
+  color: #1d4ed8;
+}
+
+.admin-status-pill-red {
+  --_pill-ring: rgb(220 38 38 / 0.2);
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.admin-status-pill-purple {
+  --_pill-ring: rgb(147 51 234 / 0.2);
+  background: #faf5ff;
+  color: #7e22ce;
+}
+
+.admin-status-pill-zinc {
+  --_pill-ring: color-mix(in oklch, var(--t-text-primary) 10%, transparent);
+  background: color-mix(in oklch, var(--t-surface-sunken) 50%, transparent);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+}
+
+/* ── Definition lists (key-value pairs) ── */
+
+.admin-dl {
+  font-size: 0.875rem;
+}
+
+.admin-dl-row {
+  display: flex;
+  gap: 0.5rem;
+  padding-block: 0.25rem;
+}
+
+.admin-dl-term {
+  width: 7rem;
+  flex-shrink: 0;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+}
+
+.admin-dl-value {
+  color: var(--t-text-primary);
+}
+
+/* ── Tab navigation ── */
+
+.admin-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--t-surface-sunken);
+}
+
+.admin-tab {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+
+  &:hover {
+    color: var(--t-text-primary);
+    border-bottom-color: var(--t-border-default);
+  }
+}
+
+.admin-tab-active {
+  color: var(--t-text-primary);
+  border-bottom-color: var(--t-text-primary);
+}
+
+.admin-tab-count {
+  margin-inline-start: 0.25rem;
+  font-size: 0.75rem;
+  color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
+}
+
+/* ── Status dot indicators (inline status with coloured dot) ── */
+
+.admin-status-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.admin-status-dot::before {
+  content: "";
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: 9999px;
+  background: var(--_dot-color, var(--t-border-default));
+}
+
+.admin-status-dot-green { --_dot-color: #22c55e; color: #15803d; }
+.admin-status-dot-amber { --_dot-color: #f59e0b; color: #b45309; }
+.admin-status-dot-blue { --_dot-color: #3b82f6; color: #1d4ed8; }
+.admin-status-dot-red { --_dot-color: #ef4444; color: #b91c1c; }
+.admin-status-dot-muted {
+  --_dot-color: var(--t-border-default);
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+}
+
+/* ── Stat cards (number + label) ── */
+
+.admin-stat-card {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--t-surface-sunken);
+  text-align: center;
+}
+
+.admin-stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.admin-stat-label {
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+}
+
+/* ── Info box (warning/notice with ring) ── */
+
+.admin-info-box {
+  border-radius: 0.375rem;
+  padding: 1rem;
+  font-size: 0.875rem;
+}
+
+.admin-info-box-amber {
+  background: #fffbeb;
+  color: #92400e;
+  box-shadow: inset 0 0 0 1px rgb(217 119 6 / 0.1);
+}
+
+.admin-info-box-amber pre {
+  margin-top: 0.5rem;
+  border-radius: 0.25rem;
+  background: #fef3c7;
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  color: #78350f;
+  overflow-x: auto;
+}
+
+/* ── Link variants ── */
+
+.admin-link-danger {
+  font-size: 0.875rem;
+  color: #dc2626;
+
+  &:hover { color: #991b1b; }
+}
+
+.admin-link-subtle {
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+
+  &:hover { color: var(--t-text-primary); }
+}
+
+/* ── Toggle switch ── */
+
+.admin-switch {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: pointer;
+  border-radius: 9999px;
+  transition: background-color 0.15s;
+  width: 2.75rem;
+  height: 1.5rem;
+  padding: 0.125rem;
+}
+
+.admin-switch-on { background: #16a34a; }
+.admin-switch-off { background: var(--t-border-default); }
+
+.admin-switch-thumb {
+  pointer-events: none;
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background: white;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.1);
+  transition: transform 0.15s;
+}
+
+.admin-switch-thumb-on { transform: translateX(1.25rem); }
+
+/* ── App layout (auth/setup pages) ── */
+
+.app-main {
+  padding: 3rem 1rem;
+}
+
+@media (min-width: 640px) {
+  .app-main { padding: 3rem 1.5rem; }
+}
+
+@media (min-width: 1024px) {
+  .app-main { padding: 3rem 2rem; }
+}
+
+.app-container {
+  max-width: 32rem;
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* ── Theme toggle ── */
+
+.theme-toggle {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: 2px solid var(--t-border-default);
+  background: var(--t-border-default);
+  border-radius: 9999px;
+}
+
+.theme-toggle-btn {
+  display: flex;
+  padding: 0.5rem;
+  cursor: pointer;
+  width: 33.333%;
+}
+
 /* ── Setup page ── */
 
 .setup-page {
@@ -2636,4 +3123,720 @@
   white-space: nowrap;
 }
 
+/* ── Generic admin helpers ── */
+
+/* Main content area with responsive padding */
+.admin-main {
+  flex: 1;
+  padding: 1rem;
+
+  @media (min-width: 40em) {
+    padding: 1.5rem;
+  }
+  @media (min-width: 64em) {
+    padding: 2rem;
+  }
+}
+
+/* Centered max-width content container */
+.admin-container {
+  max-width: 64rem;
+  margin-inline: auto;
+}
+
+/* Sidebar header (logo + user email) */
+.admin-sidebar-header {
+  padding: 1rem;
+  border-bottom: 1px solid var(--t-border-default);
+}
+
+/* Sidebar footer (view shop, log out) */
+.admin-sidebar-footer {
+  padding: 0.5rem;
+  border-top: 1px solid var(--t-border-default);
+}
+
+/* Sidebar nav area */
+.admin-sidebar-nav {
+  flex: 1;
+  padding: 0.5rem;
+}
+
+/* Brand wordmark in sidebar */
+.admin-brand {
+  font-size: 1.125rem;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+}
+
+/* Secondary text for user email, help text, meta info */
+.admin-text-secondary {
+  font-size: 0.75rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+}
+
+.admin-text-tertiary {
+  font-size: 0.75rem;
+  color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
+}
+
+/* Checkbox/toggle + label inline pair */
+.admin-check-label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.admin-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+/* ── Theme editor ── */
+
+.theme-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--t-surface-sunken);
+
+  @media (min-width: 64em) {
+    flex-direction: row;
+    height: 100vh;
+  }
+}
+
+.theme-sidebar {
+  background: var(--t-surface-base);
+  border-right: 1px solid var(--t-border-default);
+  flex-shrink: 0;
+  transition: width 0.3s, padding 0.3s;
+
+  @media (min-width: 64em) {
+    height: 100vh;
+  }
+}
+
+.theme-sidebar-expanded {
+  width: 100%;
+  overflow-y: auto;
+  padding: 1.5rem;
+
+  @media (min-width: 64em) {
+    width: 380px;
+  }
+}
+
+.theme-sidebar-collapsed {
+  width: 3rem;
+  overflow: hidden;
+}
+
+.theme-sidebar-collapsed-inner {
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 1rem;
+}
+
+.theme-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+  margin-bottom: 1rem;
+
+  &:hover {
+    color: var(--t-text-primary);
+  }
+}
+
+.theme-header {
+  margin-bottom: 1.5rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.theme-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  margin-bottom: 0.5rem;
+  color: var(--t-text-primary);
+}
+
+.theme-subtitle {
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+  line-height: 1.6;
+}
+
+/* Collapse/expand toggle button */
+.theme-collapse-btn {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  transition: background-color 0.1s;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--t-surface-sunken);
+  }
+}
+
+.theme-collapse-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
+}
+
+/* Section label (uppercase heading above option groups) */
+.theme-section-label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+  margin-bottom: 0.75rem;
+}
+
+/* Settings panel box with sunken background */
+.theme-panel {
+  background: var(--t-surface-sunken);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+/* Field spacing — used for form elements within panels */
+.theme-field {
+  margin-bottom: 1rem;
+}
+
+/* Bordered field subsection (logo upload area, etc.) */
+.theme-subsection {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--t-border-default);
+}
+
+/* Chip button group */
+.theme-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* Individual option chip */
+.theme-chip {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+  border: 2px solid transparent;
+  transition: all 0.15s;
+  text-transform: capitalize;
+  background: var(--t-surface-sunken);
+  color: var(--t-text-primary);
+
+  &:hover {
+    background: var(--t-border-default);
+  }
+}
+
+.theme-chip-active {
+  border-color: var(--t-text-primary);
+  background: var(--t-surface-base);
+}
+
+/* Preset grid (2-column) */
+.theme-presets {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.5rem;
+}
+
+.theme-preset {
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  text-align: left;
+  border: 2px solid transparent;
+  transition: all 0.15s;
+  background: var(--t-surface-sunken);
+  color: var(--t-text-primary);
+
+  &:hover {
+    background: var(--t-border-default);
+  }
+}
+
+.theme-preset-active {
+  border-color: var(--t-text-primary);
+  background: var(--t-surface-base);
+}
+
+.theme-preset-name {
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-transform: capitalize;
+}
+
+.theme-preset-desc {
+  font-size: 0.75rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+}
+
+/* Colour picker inline row */
+.theme-color-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.theme-color-swatch {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  border: 0;
+  padding: 0;
+}
+
+.theme-color-swatch-sm {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+.theme-color-value {
+  font-family: monospace;
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
+}
+
+/* File upload trigger label */
+.theme-upload-label {
+  display: block;
+  background: var(--t-surface-base);
+  border: 1px dashed var(--t-border-default);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+
+  &:hover {
+    border-color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
+    color: color-mix(in oklch, var(--t-text-primary) 80%, transparent);
+  }
+}
+
+/* Upload progress row */
+.theme-progress {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.theme-progress-bar {
+  flex: 1;
+  height: 0.375rem;
+  background: var(--t-border-default);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.theme-progress-fill {
+  height: 100%;
+  background: var(--t-accent);
+  transition: width 0.2s;
+}
+
+/* Small round remove button (overlaid on thumbnails) */
+.theme-remove-btn {
+  position: absolute;
+  top: -0.375rem;
+  inset-inline-end: -0.375rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  background: var(--t-text-primary);
+  color: var(--t-surface-base);
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* Thumbnail preview boxes */
+.theme-thumb {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--t-surface-base);
+  border: 1px solid var(--t-border-default);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.theme-thumb-logo {
+  width: 4rem;
+  height: 2.5rem;
+}
+
+.theme-thumb-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.theme-thumb-header {
+  width: 100%;
+  height: 60px;
+  margin-top: 0.5rem;
+}
+
+.theme-thumb img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.theme-thumb-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Slider row (label + value display) */
+.theme-slider-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.theme-slider-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
+}
+
+.theme-slider-value {
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+}
+
+/* Customise accordion group */
+.theme-customise {
+  border-top: 1px solid var(--t-border-default);
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+}
+
+.theme-customise-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.75rem 0;
+  cursor: pointer;
+  list-style: none;
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.theme-customise-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
+  transition: color 0.1s;
+}
+
+.theme-customise:hover .theme-customise-label,
+.theme-customise[open] .theme-customise-label {
+  color: var(--t-text-primary);
+}
+
+.theme-customise-chevron {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
+  transition: transform 0.2s;
+}
+
+.theme-customise[open] .theme-customise-chevron {
+  transform: rotate(180deg);
+}
+
+/* Subsection group within customise accordion */
+.theme-group {
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--t-surface-sunken);
+}
+
+.theme-group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.theme-group-icon {
+  width: 1rem;
+  height: 1rem;
+  color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
+}
+
+.theme-group-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--t-text-primary);
+}
+
+/* Current combination display */
+.theme-combination {
+  background: var(--t-surface-sunken);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin-top: 1.5rem;
+}
+
+.theme-combination-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
+  margin-bottom: 0.5rem;
+}
+
+.theme-combination-value {
+  font-size: 0.875rem;
+  color: var(--t-text-primary);
+  line-height: 1.6;
+}
+
+.theme-combination-footnote {
+  font-size: 0.75rem;
+  color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
+  margin-top: 0.5rem;
+}
+
+/* Preview area */
+.theme-preview-area {
+  flex: 1;
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--t-surface-sunken);
+}
+
+.theme-preview-container {
+  max-width: 1200px;
+  margin-inline: auto;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Preview page tab switcher */
+.theme-preview-tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 0.75rem;
+  background: var(--t-border-default);
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  width: fit-content;
+  flex-shrink: 0;
+}
+
+.theme-preview-tab {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  transition: all 0.15s;
+  color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
+
+  &:hover {
+    color: var(--t-text-primary);
+  }
+}
+
+.theme-preview-tab-active {
+  background: var(--t-surface-base);
+  color: var(--t-text-primary);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+/* Browser chrome frame */
+.theme-browser-chrome {
+  display: flex;
+  align-items: center;
+  background: linear-gradient(to bottom, var(--t-border-default), color-mix(in oklch, var(--t-border-default) 80%, transparent));
+  border: 1px solid color-mix(in oklch, var(--t-text-primary) 20%, transparent);
+  border-bottom-color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
+  border-radius: 0.625rem 0.625rem 0 0;
+  padding: 0.625rem 0.875rem;
+  gap: 0.875rem;
+  flex-shrink: 0;
+}
+
+.theme-browser-dots {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.theme-browser-dot {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 9999px;
+}
+
+.theme-browser-dot-close {
+  background: #ff5f57;
+  border: 1px solid #e14640;
+}
+
+.theme-browser-dot-min {
+  background: #ffbd2e;
+  border: 1px solid #dfa123;
+}
+
+.theme-browser-dot-max {
+  background: #28c940;
+  border: 1px solid #1aab29;
+}
+
+.theme-browser-url {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--t-surface-base);
+  border: 1px solid color-mix(in oklch, var(--t-text-primary) 20%, transparent);
+  border-radius: 0.375rem;
+  padding: 0.3125rem 0.75rem;
+}
+
+.theme-browser-url-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 50%, transparent);
+}
+
+.theme-browser-url-text {
+  font-size: 0.875rem;
+  color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Preview content area */
+.theme-preview-frame {
+  overflow: auto;
+  flex: 1;
+  border-radius: 0 0 0.5rem 0.5rem;
+  border: 1px solid color-mix(in oklch, var(--t-text-primary) 20%, transparent);
+  border-top: none;
+}
+
+/* Upload cancel button */
+.theme-upload-cancel {
+  color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
+
+  &:hover {
+    color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
+  }
+}
+
+/* Alt text hint for missing alt */
+.theme-alt-warning {
+  font-size: 0.75rem;
+  color: var(--t-status-warning, #f59e0b);
+  margin-top: 0.25rem;
+}
+
+/* Error text (upload errors) */
+.theme-error-text {
+  font-size: 0.75rem;
+  color: var(--t-status-error, #dc2626);
+  margin-top: 0.25rem;
+}
+
+/* Radio card selector (logo mode picker) */
+.theme-radio-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--t-border-default);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover {
+    border-color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
+  }
+}
+
+.theme-radio-card-active {
+  border-color: var(--t-accent);
+  background: color-mix(in oklch, var(--t-accent) 5%, transparent);
+}
+
+.theme-radio-dot {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  border: 2px solid var(--t-border-default);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: border-color 0.15s;
+}
+
+.theme-radio-dot-active {
+  border-color: var(--t-accent);
+}
+
+.theme-radio-dot-inner {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.theme-radio-dot-inner-active {
+  background: var(--t-accent);
+}
+
+.theme-radio-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--t-text-primary);
+}
+
 } /* @layer admin */
diff --git a/assets/css/admin/layout.css b/assets/css/admin/layout.css
new file mode 100644
index 0000000..abbe68d
--- /dev/null
+++ b/assets/css/admin/layout.css
@@ -0,0 +1,36 @@
+/* Admin layout primitives — composable building blocks mirroring shop/layout.css.
+   Each primitive does one layout job. Combine freely via CSS custom properties. */
+
+@layer admin {
+  /* Vertical stack with consistent gap */
+  .admin-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--admin-stack-gap, 1rem);
+  }
+
+  /* Horizontal flex row, no wrap — toolbars, inline groups, header bars */
+  .admin-row {
+    display: flex;
+    align-items: center;
+    gap: var(--admin-row-gap, 0.5rem);
+  }
+
+  /* Horizontal flex-wrap cluster — tags, badges, button groups */
+  .admin-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--admin-cluster-gap, 0.5rem);
+    align-items: center;
+  }
+
+  /* Intrinsic responsive grid — cards, media thumbnails */
+  .admin-grid {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(var(--admin-grid-min, 16rem), 100%), 1fr)
+    );
+    gap: var(--admin-grid-gap, 1rem);
+  }
+}
diff --git a/assets/css/admin/transitions.css b/assets/css/admin/transitions.css
new file mode 100644
index 0000000..5d624f1
--- /dev/null
+++ b/assets/css/admin/transitions.css
@@ -0,0 +1,80 @@
+/* Transition and animation utilities for admin pages.
+   These are required by Phoenix JS.show/JS.hide in core_components.ex
+   and by various admin UI interactions (spinners, hover effects, etc.).
+
+   Placed in @layer admin so they integrate with the cascade. */
+
+@layer admin {
+
+/* ── Transition properties ── */
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color,
+    fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-\[left\] {
+  transition-property: left;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+/* ── Duration overrides ── */
+
+.duration-200 { transition-duration: 200ms; }
+.duration-300 { transition-duration: 300ms; }
+
+/* ── Easing overrides ── */
+
+.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+
+/* ── Opacity states (JS.show / JS.hide) ── */
+
+.opacity-0 { opacity: 0; }
+.opacity-100 { opacity: 1; }
+
+/* ── Transform states (JS.show / JS.hide) ── */
+
+.translate-y-4 { translate: 0 1rem; }
+.translate-y-0 { translate: 0 0; }
+.scale-95 { scale: 0.95; }
+.scale-100 { scale: 1; }
+
+@media (min-width: 640px) {
+  .sm\:translate-y-0 { translate: 0 0; }
+  .sm\:scale-95 { scale: 0.95; }
+  .sm\:scale-100 { scale: 1; }
+}
+
+/* ── Spin animation ── */
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.animate-spin { animation: spin 1s linear infinite; }
+
+@media (prefers-reduced-motion: no-preference) {
+  .motion-safe\:animate-spin { animation: spin 1s linear infinite; }
+}
+
+} /* @layer admin */
diff --git a/lib/berrypod_web/components/core_components.ex b/lib/berrypod_web/components/core_components.ex
index 27f9bf3..4319d1b 100644
--- a/lib/berrypod_web/components/core_components.ex
+++ b/lib/berrypod_web/components/core_components.ex
@@ -51,17 +51,17 @@ defmodule BerrypodWeb.CoreComponents do
       {@rest}
     >
       <div class={[
-        "admin-alert w-80 sm:w-96 max-w-80 sm:max-w-96 text-wrap",
+        "admin-alert",
         @kind == :info && "admin-alert-info",
         @kind == :error && "admin-alert-error"
       ]}>
         <.icon :if={@kind == :info} name="hero-information-circle" class="size-5 shrink-0" />
         <.icon :if={@kind == :error} name="hero-exclamation-circle" class="size-5 shrink-0" />
         <div>
-          <p :if={@title} class="font-semibold">{@title}</p>
+          <p :if={@title} class="admin-alert-title">{@title}</p>
           <p>{msg}</p>
         </div>
-        <div class="flex-1" />
+        <div class="admin-alert-spacer" />
         <button type="button" class="group self-start cursor-pointer" aria-label={gettext("close")}>
           <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
         </button>
@@ -271,7 +271,7 @@ defmodule BerrypodWeb.CoreComponents do
   # Helper used by inputs to generate form errors
   defp error(assigns) do
     ~H"""
-    <p class="admin-error mt-1.5 flex gap-2 items-center text-sm">
+    <p class="admin-error">
       <.icon name="hero-exclamation-circle" class="size-5" />
       {render_slot(@inner_block)}
     </p>
@@ -287,16 +287,19 @@ defmodule BerrypodWeb.CoreComponents do
 
   def header(assigns) do
     ~H"""
-    <header class={[@actions != [] && "flex items-center justify-between gap-6", "pb-4"]}>
+    <header class={[
+      "admin-header",
+      @actions != [] && "admin-header-with-actions"
+    ]}>
       <div>
-        <h1 class="text-lg font-semibold leading-8">
+        <h1 class="admin-header-title">
           {render_slot(@inner_block)}
         </h1>
-        <p :if={@subtitle != []} class="text-sm text-base-content/70">
+        <p :if={@subtitle != []} class="admin-header-subtitle">
           {render_slot(@subtitle)}
         </p>
       </div>
-      <div class="flex-none">{render_slot(@actions)}</div>
+      <div class="admin-header-actions">{render_slot(@actions)}</div>
     </header>
     """
   end
@@ -352,8 +355,8 @@ defmodule BerrypodWeb.CoreComponents do
             >
               {render_slot(col, @row_item.(row))}
             </td>
-            <td :if={@action != []} class="w-0 font-semibold">
-              <div class="flex gap-4">
+            <td :if={@action != []} class="admin-table-actions">
+              <div class="admin-table-actions-row">
                 <%= for action <- @action do %>
                   {render_slot(action, @row_item.(row))}
                 <% end %>
@@ -385,7 +388,7 @@ defmodule BerrypodWeb.CoreComponents do
     <ul class="admin-list">
       <li :for={item <- @item} class="admin-list-row">
         <div class="admin-list-grow">
-          <div class="font-bold">{item.title}</div>
+          <div class="admin-list-title">{item.title}</div>
           <div>{render_slot(item)}</div>
         </div>
       </li>
diff --git a/lib/berrypod_web/components/layouts.ex b/lib/berrypod_web/components/layouts.ex
index befdd58..1240dab 100644
--- a/lib/berrypod_web/components/layouts.ex
+++ b/lib/berrypod_web/components/layouts.ex
@@ -35,8 +35,8 @@ defmodule BerrypodWeb.Layouts do
 
   def app(assigns) do
     ~H"""
-    <main class="px-4 py-12 sm:px-6 lg:px-8">
-      <div class="mx-auto max-w-lg flex flex-col gap-4">
+    <main class="app-main">
+      <div class="app-container">
         {render_slot(@inner_block)}
       </div>
     </main>
@@ -108,11 +108,11 @@ defmodule BerrypodWeb.Layouts do
   """
   def theme_toggle(assigns) do
     ~H"""
-    <div class="card relative flex flex-row items-center border-2 border-base-300 bg-base-300 rounded-full">
+    <div class="theme-toggle">
       <div class="theme-toggle-indicator absolute w-1/3 h-full rounded-full border-1 border-base-200 bg-base-100 brightness-200 left-0" />
 
       <button
-        class="flex p-2 cursor-pointer w-1/3"
+        class="theme-toggle-btn"
         phx-click={JS.dispatch("phx:set-theme")}
         data-phx-theme="system"
       >
@@ -120,7 +120,7 @@ defmodule BerrypodWeb.Layouts do
       </button>
 
       <button
-        class="flex p-2 cursor-pointer w-1/3"
+        class="theme-toggle-btn"
         phx-click={JS.dispatch("phx:set-theme")}
         data-phx-theme="light"
       >
@@ -128,7 +128,7 @@ defmodule BerrypodWeb.Layouts do
       </button>
 
       <button
-        class="flex p-2 cursor-pointer w-1/3"
+        class="theme-toggle-btn"
         phx-click={JS.dispatch("phx:set-theme")}
         data-phx-theme="dark"
       >
diff --git a/lib/berrypod_web/components/layouts/admin.html.heex b/lib/berrypod_web/components/layouts/admin.html.heex
index 06e50b9..6691757 100644
--- a/lib/berrypod_web/components/layouts/admin.html.heex
+++ b/lib/berrypod_web/components/layouts/admin.html.heex
@@ -1,4 +1,4 @@
-<div class="admin-layout h-full">
+<div class="admin-layout">
   <input id="admin-drawer" type="checkbox" class="admin-layout-toggle" />
 
   <%!-- main content area --%>
@@ -23,15 +23,15 @@
       <.icon name="hero-exclamation-triangle" class="size-5 shrink-0" />
       <p>
         Email delivery isn't set up yet — customers won't receive order confirmations or shipping updates.
-        <.link navigate={~p"/admin/settings/email"} class="underline font-medium">
+        <.link navigate={~p"/admin/settings/email"} class="admin-link">
           Configure email
         </.link>
       </p>
     </div>
 
     <%!-- page content --%>
-    <main class="flex-1 p-4 sm:p-6 lg:p-8">
-      <div class="mx-auto max-w-5xl">
+    <main class="admin-main">
+      <div class="admin-container">
         {@inner_content}
       </div>
     </main>
@@ -42,17 +42,17 @@
     <label for="admin-drawer" class="admin-sidebar-overlay" aria-label="Close navigation"></label>
     <aside class="admin-sidebar">
       <%!-- sidebar header --%>
-      <div class="p-4 border-b border-base-300">
-        <.link navigate={~p"/admin"} class="text-lg font-bold tracking-tight">
+      <div class="admin-sidebar-header">
+        <.link navigate={~p"/admin"} class="admin-brand">
           Berrypod
         </.link>
-        <p class="text-xs text-base-content/60 mt-0.5 truncate">
+        <p class="admin-text-secondary truncate" style="margin-top: 0.125rem;">
           {@current_scope.user.email}
         </p>
       </div>
 
       <%!-- nav links --%>
-      <nav class="flex-1 p-2" aria-label="Admin navigation">
+      <nav class="admin-sidebar-nav" aria-label="Admin navigation">
         <div class="admin-nav-group">
           <span class="admin-nav-heading">Shop</span>
           <ul class="admin-nav">
@@ -191,7 +191,7 @@
       </nav>
 
       <%!-- sidebar footer --%>
-      <div class="p-2 border-t border-base-300">
+      <div class="admin-sidebar-footer">
         <ul class="admin-nav">
           <li>
             <.link href={~p"/"}>
diff --git a/lib/berrypod_web/live/admin/newsletter.ex b/lib/berrypod_web/live/admin/newsletter.ex
index fd83ee4..c740125 100644
--- a/lib/berrypod_web/live/admin/newsletter.ex
+++ b/lib/berrypod_web/live/admin/newsletter.ex
@@ -129,7 +129,7 @@ defmodule BerrypodWeb.Admin.Newsletter do
       <:subtitle>Manage subscribers and email campaigns</:subtitle>
     </.header>
 
-    <div class="flex gap-2 mt-6 mb-6 border-b border-base-200">
+    <div class="admin-tabs">
       <.tab_link label="Overview" tab="overview" active={@tab} />
       <.tab_link
         label="Subscribers"
@@ -179,17 +179,10 @@ defmodule BerrypodWeb.Admin.Newsletter do
     ~H"""
     <.link
       patch={~p"/admin/newsletter?tab=#{@tab}"}
-      class={[
-        "px-3 py-2 text-sm font-medium border-b-2 -mb-px",
-        if(@tab == @active,
-          do: "border-base-content text-base-content",
-          else:
-            "border-transparent text-base-content/60 hover:text-base-content hover:border-base-300"
-        )
-      ]}
+      class={["admin-tab", @tab == @active && "admin-tab-active"]}
     >
       {@label}
-      <span :if={@count} class="ml-1 text-xs text-base-content/40">{@count}</span>
+      <span :if={@count} class="admin-tab-count">{@count}</span>
     </.link>
     """
   end
@@ -201,52 +194,47 @@ defmodule BerrypodWeb.Admin.Newsletter do
 
   defp overview_tab(assigns) do
     ~H"""
-    <div class="space-y-6">
-      <div class="flex items-center gap-4 p-4 rounded-lg border border-base-200">
-        <div class="flex-1">
-          <h3 class="font-medium">Newsletter signups</h3>
-          <p class="text-sm text-base-content/60 mt-0.5">
-            When enabled, the newsletter signup block on your shop pages will collect email addresses with double opt-in confirmation.
-          </p>
-        </div>
-        <button
-          phx-click="toggle_enabled"
-          class={[
-            "inline-flex items-center shrink-0 cursor-pointer rounded-full transition-colors",
-            if(@newsletter_enabled, do: "bg-green-600", else: "bg-base-300")
-          ]}
-          style="width: 2.75rem; height: 1.5rem; padding: 0.125rem;"
-          role="switch"
-          aria-checked={to_string(@newsletter_enabled)}
-          aria-label="Toggle newsletter signups"
-        >
-          <span
-            class="pointer-events-none inline-block rounded-full bg-white shadow transition-transform"
-            style={"width: 1.25rem; height: 1.25rem; transform: translateX(#{if @newsletter_enabled, do: "1.25rem", else: "0"})"}
-          />
-        </button>
-      </div>
-
-      <div class="grid grid-cols-3 gap-4">
-        <div class="p-4 rounded-lg border border-base-200 text-center">
-          <p class="text-2xl font-bold">{@status_counts["confirmed"] || 0}</p>
-          <p class="text-sm text-base-content/60">Confirmed</p>
-        </div>
-        <div class="p-4 rounded-lg border border-base-200 text-center">
-          <p class="text-2xl font-bold">{@status_counts["pending"] || 0}</p>
-          <p class="text-sm text-base-content/60">Pending</p>
-        </div>
-        <div class="p-4 rounded-lg border border-base-200 text-center">
-          <p class="text-2xl font-bold">{@status_counts["unsubscribed"] || 0}</p>
-          <p class="text-sm text-base-content/60">Unsubscribed</p>
+    <div class="admin-stack" style="--admin-stack-gap: 1.5rem;">
+      <div class="admin-card">
+        <div class="admin-card-body admin-row" style="--admin-row-gap: 1rem;">
+          <div style="flex: 1;">
+            <h3 style="font-weight: 500;">Newsletter signups</h3>
+            <p class="admin-section-desc" style="margin-top: 0.125rem;">
+              When enabled, the newsletter signup block on your shop pages will collect email addresses with double opt-in confirmation.
+            </p>
+          </div>
+          <button
+            phx-click="toggle_enabled"
+            class={["admin-switch", if(@newsletter_enabled, do: "admin-switch-on", else: "admin-switch-off")]}
+            role="switch"
+            aria-checked={to_string(@newsletter_enabled)}
+            aria-label="Toggle newsletter signups"
+          >
+            <span class={["admin-switch-thumb", @newsletter_enabled && "admin-switch-thumb-on"]} />
+          </button>
         </div>
       </div>
 
-      <div class="flex gap-3">
-        <.link navigate={~p"/admin/newsletter?tab=subscribers"} class="text-sm font-medium underline">
+      <div class="admin-stats-grid">
+        <div class="admin-stat-card">
+          <p class="admin-stat-value">{@status_counts["confirmed"] || 0}</p>
+          <p class="admin-stat-label">Confirmed</p>
+        </div>
+        <div class="admin-stat-card">
+          <p class="admin-stat-value">{@status_counts["pending"] || 0}</p>
+          <p class="admin-stat-label">Pending</p>
+        </div>
+        <div class="admin-stat-card">
+          <p class="admin-stat-value">{@status_counts["unsubscribed"] || 0}</p>
+          <p class="admin-stat-label">Unsubscribed</p>
+        </div>
+      </div>
+
+      <div class="admin-row" style="--admin-row-gap: 0.75rem;">
+        <.link navigate={~p"/admin/newsletter?tab=subscribers"} class="admin-link" style="font-weight: 500;">
           View subscribers
         </.link>
-        <.link navigate={~p"/admin/newsletter?tab=campaigns"} class="text-sm font-medium underline">
+        <.link navigate={~p"/admin/newsletter?tab=campaigns"} class="admin-link" style="font-weight: 500;">
           View campaigns
         </.link>
       </div>
@@ -266,8 +254,8 @@ defmodule BerrypodWeb.Admin.Newsletter do
   defp subscribers_tab(assigns) do
     ~H"""
     <div>
-      <div class="flex items-center justify-between mb-4">
-        <div class="flex gap-2 flex-wrap">
+      <div class="admin-row" style="justify-content: space-between; margin-bottom: 1rem;">
+        <div class="admin-cluster">
           <.filter_pill
             status="all"
             label="All"
@@ -298,7 +286,7 @@ defmodule BerrypodWeb.Admin.Newsletter do
         </.link>
       </div>
 
-      <form phx-change="search_subscribers" class="mb-4">
+      <form phx-change="search_subscribers" style="margin-bottom: 1rem;">
         <.input
           name="search"
           value={@search}
@@ -323,7 +311,7 @@ defmodule BerrypodWeb.Admin.Newsletter do
             phx-click="delete_subscriber"
             phx-value-id={sub.id}
             data-confirm="Permanently delete this subscriber? This cannot be undone."
-            class="text-sm text-red-600 hover:text-red-800"
+            class="admin-link-danger"
           >
             Delete
           </button>
@@ -337,10 +325,10 @@ defmodule BerrypodWeb.Admin.Newsletter do
         params={%{"tab" => "subscribers"}}
       />
 
-      <div :if={@subscriber_count == 0} class="text-center py-12 text-base-content/60">
-        <.icon name="hero-envelope" class="size-12 mx-auto mb-4" />
-        <p class="text-lg font-medium">No subscribers yet</p>
-        <p class="text-sm mt-1">Subscribers will appear here when people sign up via your shop.</p>
+      <div :if={@subscriber_count == 0} class="admin-empty-state">
+        <.icon name="hero-envelope" class="admin-empty-state-icon" />
+        <p class="admin-empty-state-title">No subscribers yet</p>
+        <p class="admin-empty-state-text">Subscribers will appear here when people sign up via your shop.</p>
       </div>
     </div>
     """
@@ -355,7 +343,7 @@ defmodule BerrypodWeb.Admin.Newsletter do
   defp campaigns_tab(assigns) do
     ~H"""
     <div>
-      <div class="flex justify-end mb-4">
+      <div style="display: flex; justify-content: flex-end; margin-bottom: 1rem;">
         <.link navigate={~p"/admin/newsletter/campaigns/new"} class="admin-btn admin-btn-primary">
           <.icon name="hero-plus" class="size-4" /> New campaign
         </.link>
@@ -378,7 +366,7 @@ defmodule BerrypodWeb.Admin.Newsletter do
             phx-click="delete_campaign"
             phx-value-id={c.id}
             data-confirm="Delete this draft campaign?"
-            class="text-sm text-red-600 hover:text-red-800"
+            class="admin-link-danger"
           >
             Delete
           </button>
@@ -392,10 +380,10 @@ defmodule BerrypodWeb.Admin.Newsletter do
         params={%{"tab" => "campaigns"}}
       />
 
-      <div :if={@campaign_count == 0} class="text-center py-12 text-base-content/60">
-        <.icon name="hero-megaphone" class="size-12 mx-auto mb-4" />
-        <p class="text-lg font-medium">No campaigns yet</p>
-        <p class="text-sm mt-1">Create your first campaign to reach your subscribers.</p>
+      <div :if={@campaign_count == 0} class="admin-empty-state">
+        <.icon name="hero-megaphone" class="admin-empty-state-icon" />
+        <p class="admin-empty-state-title">No campaigns yet</p>
+        <p class="admin-empty-state-text">Create your first campaign to reach your subscribers.</p>
       </div>
     </div>
     """
@@ -434,31 +422,25 @@ defmodule BerrypodWeb.Admin.Newsletter do
 
   defp subscriber_status(%{status: "confirmed"} = assigns) do
     ~H"""
-    <span class="inline-flex items-center gap-1 text-sm text-green-700">
-      <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Confirmed
-    </span>
+    <span class="admin-status-dot admin-status-dot-green">Confirmed</span>
     """
   end
 
   defp subscriber_status(%{status: "pending"} = assigns) do
     ~H"""
-    <span class="inline-flex items-center gap-1 text-sm text-amber-700">
-      <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Pending
-    </span>
+    <span class="admin-status-dot admin-status-dot-amber">Pending</span>
     """
   end
 
   defp subscriber_status(%{status: "unsubscribed"} = assigns) do
     ~H"""
-    <span class="inline-flex items-center gap-1 text-sm text-base-content/50">
-      <span class="w-1.5 h-1.5 rounded-full bg-base-300"></span> Unsubscribed
-    </span>
+    <span class="admin-status-dot admin-status-dot-muted">Unsubscribed</span>
     """
   end
 
   defp subscriber_status(assigns) do
     ~H"""
-    <span class="text-sm text-base-content/50">{@status}</span>
+    <span class="admin-status-dot admin-status-dot-muted">{@status}</span>
     """
   end
 
@@ -466,47 +448,37 @@ defmodule BerrypodWeb.Admin.Newsletter do
 
   defp campaign_status(%{status: "draft"} = assigns) do
     ~H"""
-    <span class="inline-flex items-center gap-1.5 text-sm text-base-content/60">
-      <span class="w-1.5 h-1.5 rounded-full bg-base-300"></span> Draft
-    </span>
+    <span class="admin-status-dot admin-status-dot-muted">Draft</span>
     """
   end
 
   defp campaign_status(%{status: "scheduled"} = assigns) do
     ~H"""
-    <span class="inline-flex items-center gap-1.5 text-sm text-blue-700">
-      <span class="w-1.5 h-1.5 rounded-full bg-blue-500"></span> Scheduled
-    </span>
+    <span class="admin-status-dot admin-status-dot-blue">Scheduled</span>
     """
   end
 
   defp campaign_status(%{status: "sending"} = assigns) do
     ~H"""
-    <span class="inline-flex items-center gap-1.5 text-sm text-amber-700">
-      <span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Sending
-    </span>
+    <span class="admin-status-dot admin-status-dot-amber">Sending</span>
     """
   end
 
   defp campaign_status(%{status: "sent"} = assigns) do
     ~H"""
-    <span class="inline-flex items-center gap-1.5 text-sm text-green-700">
-      <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> Sent
-    </span>
+    <span class="admin-status-dot admin-status-dot-green">Sent</span>
     """
   end
 
   defp campaign_status(%{status: "cancelled"} = assigns) do
     ~H"""
-    <span class="inline-flex items-center gap-1.5 text-sm text-red-700">
-      <span class="w-1.5 h-1.5 rounded-full bg-red-500"></span> Cancelled
-    </span>
+    <span class="admin-status-dot admin-status-dot-red">Cancelled</span>
     """
   end
 
   defp campaign_status(assigns) do
     ~H"""
-    <span class="text-sm text-base-content/50">{@status}</span>
+    <span class="admin-status-dot admin-status-dot-muted">{@status}</span>
     """
   end
 
diff --git a/lib/berrypod_web/live/admin/order_show.ex b/lib/berrypod_web/live/admin/order_show.ex
index d225eda..a48b6b6 100644
--- a/lib/berrypod_web/live/admin/order_show.ex
+++ b/lib/berrypod_web/live/admin/order_show.ex
@@ -39,19 +39,16 @@ defmodule BerrypodWeb.Admin.OrderShow do
   def render(assigns) do
     ~H"""
     <.header>
-      <.link
-        navigate={~p"/admin/orders"}
-        class="text-sm font-normal text-base-content/60 hover:underline"
-      >
+      <.link navigate={~p"/admin/orders"} class="admin-link-subtle" style="font-weight: 400;">
         &larr; Orders
       </.link>
-      <div class="flex items-center gap-3 mt-1">
-        <span class="text-2xl font-bold">{@order.order_number}</span>
+      <div class="admin-row" style="--admin-row-gap: 0.75rem; margin-top: 0.25rem;">
+        <span style="font-size: 1.5rem; font-weight: 700;">{@order.order_number}</span>
         <.status_badge status={@order.payment_status} />
       </div>
     </.header>
 
-    <div class="grid gap-6 mt-6 lg:grid-cols-2">
+    <div class="admin-grid" style="--admin-grid-min: 20rem; --admin-grid-gap: 1.5rem; margin-top: 1.5rem;">
       <%!-- order info --%>
       <div class="admin-card">
         <div class="admin-card-body">
@@ -63,7 +60,7 @@ defmodule BerrypodWeb.Admin.OrderShow do
               <.status_badge status={@order.payment_status} />
             </:item>
             <:item :if={@order.stripe_payment_intent_id} title="Stripe payment">
-              <code class="text-xs">{@order.stripe_payment_intent_id}</code>
+              <code style="font-size: 0.75rem;">{@order.stripe_payment_intent_id}</code>
             </:item>
             <:item title="Currency">{String.upcase(@order.currency)}</:item>
           </.list>
@@ -99,20 +96,20 @@ defmodule BerrypodWeb.Admin.OrderShow do
               </:item>
             </.list>
           <% else %>
-            <p class="text-base-content/60 text-sm">No shipping address provided</p>
+            <p class="admin-section-desc" style="margin-top: 0;">No shipping address provided</p>
           <% end %>
         </div>
       </div>
     </div>
 
     <%!-- timeline --%>
-    <div class="admin-card mt-6">
+    <div class="admin-card" style="margin-top: 1.5rem;">
       <div class="admin-card-body">
-        <div class="flex items-center justify-between">
+        <div class="admin-row" style="justify-content: space-between;">
           <h3 class="admin-card-title">Timeline</h3>
           <.fulfilment_badge status={@order.fulfilment_status} />
         </div>
-        <div class="flex gap-2 mt-2 mb-4">
+        <div class="admin-row" style="margin-top: 0.5rem; margin-bottom: 1rem;">
           <button
             :if={can_submit?(@order)}
             phx-click="submit_to_provider"
@@ -133,16 +130,17 @@ defmodule BerrypodWeb.Admin.OrderShow do
         </div>
         <div
           :if={@order.tracking_number not in [nil, ""]}
-          class="flex items-center gap-2 mb-4 text-sm"
+          class="admin-row"
+          style="margin-bottom: 1rem; font-size: 0.875rem;"
         >
-          <.icon name="hero-truck-mini" class="size-4 text-base-content/60" />
-          <span class="font-medium">{@order.tracking_number}</span>
+          <span class="admin-text-secondary"><.icon name="hero-truck-mini" class="size-4" /></span>
+          <span style="font-weight: 500;">{@order.tracking_number}</span>
           <a
             :if={@order.tracking_url not in [nil, ""]}
             href={@order.tracking_url}
             target="_blank"
             rel="noopener"
-            class="text-primary hover:underline"
+            class="admin-link"
           >
             Track shipment &rarr;
           </a>
@@ -152,7 +150,7 @@ defmodule BerrypodWeb.Admin.OrderShow do
     </div>
 
     <%!-- line items --%>
-    <div class="admin-card mt-6">
+    <div class="admin-card" style="margin-top: 1.5rem;">
       <div class="admin-card-body">
         <h3 class="admin-card-title">Items</h3>
         <table class="admin-table admin-table-zebra">
@@ -160,28 +158,28 @@ defmodule BerrypodWeb.Admin.OrderShow do
             <tr>
               <th>Product</th>
               <th>Variant</th>
-              <th class="text-right">Qty</th>
-              <th class="text-right">Unit price</th>
-              <th class="text-right">Total</th>
+              <th style="text-align: end;">Qty</th>
+              <th style="text-align: end;">Unit price</th>
+              <th style="text-align: end;">Total</th>
             </tr>
           </thead>
           <tbody>
             <tr :for={item <- @order.items}>
               <td>{item.product_name}</td>
               <td>{item.variant_title}</td>
-              <td class="text-right">{item.quantity}</td>
-              <td class="text-right">{Cart.format_price(item.unit_price)}</td>
-              <td class="text-right">{Cart.format_price(item.unit_price * item.quantity)}</td>
+              <td style="text-align: end;">{item.quantity}</td>
+              <td style="text-align: end;">{Cart.format_price(item.unit_price)}</td>
+              <td style="text-align: end;">{Cart.format_price(item.unit_price * item.quantity)}</td>
             </tr>
           </tbody>
           <tfoot>
             <tr>
-              <td colspan="4" class="text-right font-medium">Subtotal</td>
-              <td class="text-right font-medium">{Cart.format_price(@order.subtotal)}</td>
+              <td colspan="4" style="text-align: end; font-weight: 500;">Subtotal</td>
+              <td style="text-align: end; font-weight: 500;">{Cart.format_price(@order.subtotal)}</td>
             </tr>
-            <tr class="text-lg">
-              <td colspan="4" class="text-right font-bold">Total</td>
-              <td class="text-right font-bold">{Cart.format_price(@order.total)}</td>
+            <tr style="font-size: 1.125rem;">
+              <td colspan="4" style="text-align: end; font-weight: 700;">Total</td>
+              <td style="text-align: end; font-weight: 700;">{Cart.format_price(@order.total)}</td>
             </tr>
           </tfoot>
         </table>
@@ -236,7 +234,7 @@ defmodule BerrypodWeb.Admin.OrderShow do
 
   defp order_timeline(assigns) do
     ~H"""
-    <div :if={@entries == []} class="text-sm text-base-content/60 py-4">
+    <div :if={@entries == []} class="admin-section-desc" style="padding-block: 1rem; margin-top: 0;">
       No activity recorded yet.
     </div>
     <ol :if={@entries != []} class="admin-timeline" id="order-timeline">
@@ -279,76 +277,40 @@ defmodule BerrypodWeb.Admin.OrderShow do
   end
 
   defp fulfilment_badge(assigns) do
-    {bg, text, ring, icon} =
+    {color, icon} =
       case assigns.status do
-        "submitted" ->
-          {"bg-blue-50", "text-blue-700", "ring-blue-600/20", "hero-paper-airplane-mini"}
-
-        "processing" ->
-          {"bg-amber-50", "text-amber-700", "ring-amber-600/20", "hero-cog-6-tooth-mini"}
-
-        "shipped" ->
-          {"bg-purple-50", "text-purple-700", "ring-purple-600/20", "hero-truck-mini"}
-
-        "delivered" ->
-          {"bg-green-50", "text-green-700", "ring-green-600/20", "hero-check-circle-mini"}
-
-        "failed" ->
-          {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
-
-        "cancelled" ->
-          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
-           "hero-no-symbol-mini"}
-
-        _ ->
-          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
-           "hero-minus-circle-mini"}
+        "submitted" -> {"admin-status-pill-blue", "hero-paper-airplane-mini"}
+        "processing" -> {"admin-status-pill-amber", "hero-cog-6-tooth-mini"}
+        "shipped" -> {"admin-status-pill-purple", "hero-truck-mini"}
+        "delivered" -> {"admin-status-pill-green", "hero-check-circle-mini"}
+        "failed" -> {"admin-status-pill-red", "hero-x-circle-mini"}
+        "cancelled" -> {"admin-status-pill-zinc", "hero-no-symbol-mini"}
+        _ -> {"admin-status-pill-zinc", "hero-minus-circle-mini"}
       end
 
-    assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
+    assigns = assign(assigns, color: color, icon: icon)
 
     ~H"""
-    <span class={[
-      "inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset",
-      @bg,
-      @text,
-      @ring
-    ]}>
+    <span class={["admin-status-pill", @color]}>
       <.icon name={@icon} class="size-3" /> {@status}
     </span>
     """
   end
 
   defp status_badge(assigns) do
-    {bg, text, ring, icon} =
+    {color, icon} =
       case assigns.status do
-        "paid" ->
-          {"bg-green-50", "text-green-700", "ring-green-600/20", "hero-check-circle-mini"}
-
-        "pending" ->
-          {"bg-amber-50", "text-amber-700", "ring-amber-600/20", "hero-clock-mini"}
-
-        "failed" ->
-          {"bg-red-50", "text-red-700", "ring-red-600/20", "hero-x-circle-mini"}
-
-        "refunded" ->
-          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
-           "hero-arrow-uturn-left-mini"}
-
-        _ ->
-          {"bg-base-200/50", "text-base-content/60", "ring-base-content/10",
-           "hero-question-mark-circle-mini"}
+        "paid" -> {"admin-status-pill-green", "hero-check-circle-mini"}
+        "pending" -> {"admin-status-pill-amber", "hero-clock-mini"}
+        "failed" -> {"admin-status-pill-red", "hero-x-circle-mini"}
+        "refunded" -> {"admin-status-pill-zinc", "hero-arrow-uturn-left-mini"}
+        _ -> {"admin-status-pill-zinc", "hero-question-mark-circle-mini"}
       end
 
-    assigns = assign(assigns, bg: bg, text: text, ring: ring, icon: icon)
+    assigns = assign(assigns, color: color, icon: icon)
 
     ~H"""
-    <span class={[
-      "inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset",
-      @bg,
-      @text,
-      @ring
-    ]}>
+    <span class={["admin-status-pill", @color]}>
       <.icon name={@icon} class="size-3" /> {@status}
     </span>
     """
diff --git a/lib/berrypod_web/live/admin/providers/form.html.heex b/lib/berrypod_web/live/admin/providers/form.html.heex
index 4671c1d..1b7a3af 100644
--- a/lib/berrypod_web/live/admin/providers/form.html.heex
+++ b/lib/berrypod_web/live/admin/providers/form.html.heex
@@ -4,18 +4,16 @@
     else: "#{@provider.name} settings"}
 </.header>
 
-<div class="max-w-xl mt-6">
+<div class="admin-form-narrow">
   <%= if @live_action == :new do %>
-    <div class="prose prose-sm mb-6">
-      <p>
-        {@provider.name} is a print-on-demand service that prints and ships products for you.
-        Connect your account to automatically import your products into your shop.
-      </p>
-    </div>
+    <p class="admin-text-secondary" style="margin-bottom: 1.5rem;">
+      {@provider.name} is a print-on-demand service that prints and ships products for you.
+      Connect your account to automatically import your products into your shop.
+    </p>
 
-    <div class="rounded-lg bg-base-200 p-4 mb-6 text-sm">
-      <p class="font-medium mb-2">Get your API key from {@provider.name}:</p>
-      <ol class="list-decimal list-inside space-y-1 text-base-content/80">
+    <div class="admin-callout">
+      <p class="admin-callout-title">Get your API key from {@provider.name}:</p>
+      <ol class="admin-callout-list">
         <li>
           <a href={@provider.login_url} target="_blank" rel="noopener" class="admin-link">
             Log in to {@provider.name}
@@ -44,7 +42,7 @@
       autocomplete="off"
     />
 
-    <div class="flex items-center gap-3 mb-6">
+    <div class="admin-inline-group">
       <button
         type="button"
         class="admin-btn admin-btn-outline admin-btn-sm"
@@ -58,27 +56,27 @@
         {if @testing, do: "Checking...", else: "Check connection"}
       </button>
 
-      <div :if={@test_result} class="text-sm">
+      <%= if @test_result do %>
         <%= case @test_result do %>
           <% {:ok, _info} -> %>
-            <span class="text-success flex items-center gap-1">
+            <span class="admin-status-success">
               <.icon name="hero-check-circle" class="size-4" />
               Connected to {connection_name(@test_result) || @provider.name}
             </span>
           <% {:error, reason} -> %>
-            <span class="text-error flex items-center gap-1">
+            <span class="admin-status-error">
               <.icon name="hero-x-circle" class="size-4" />
               {format_error(reason)}
             </span>
         <% end %>
-      </div>
+      <% end %>
     </div>
 
     <%= if @live_action == :edit do %>
       <.input field={@form[:enabled]} type="checkbox" label="Connection enabled" />
     <% end %>
 
-    <div class="flex gap-2 mt-6">
+    <div class="admin-form-actions">
       <.button type="submit" disabled={@testing}>
         {if @live_action == :new,
           do: "Connect to #{@provider.name}",
diff --git a/lib/berrypod_web/live/admin/providers/index.html.heex b/lib/berrypod_web/live/admin/providers/index.html.heex
index 1a44aa4..190040f 100644
--- a/lib/berrypod_web/live/admin/providers/index.html.heex
+++ b/lib/berrypod_web/live/admin/providers/index.html.heex
@@ -3,7 +3,7 @@
   <:actions>
     <div class="admin-dropdown">
       <div tabindex="0" role="button" class="admin-btn admin-btn-primary">
-        <.icon name="hero-plus" class="size-4 mr-1" /> Connect provider
+        <.icon name="hero-plus" class="size-4" /> Connect provider
       </div>
       <ul tabindex="0" class="admin-dropdown-content">
         <li :for={provider <- @available_providers}>
@@ -14,20 +14,22 @@
   </:actions>
 </.header>
 
-<div id="connections" phx-update="stream" class="mt-6 space-y-4">
-  <div id="connections-empty" class="hidden only:block text-center py-12">
-    <.icon name="hero-cube" class="size-16 mx-auto mb-4 text-base-content/30" />
-    <h2 class="text-xl font-medium">Connect a print-on-demand provider</h2>
-    <p class="mt-2 text-base-content/60 max-w-md mx-auto">
-      Connect your account to import products and start selling.
-    </p>
-    <div class="flex justify-center gap-3 mt-6">
-      <.button
-        :for={provider <- @available_providers}
-        navigate={~p"/admin/providers/new?type=#{provider.type}"}
-      >
-        Connect {provider.name}
-      </.button>
+<div id="connections" phx-update="stream" class="admin-stack" style="margin-top: 1.5rem;">
+  <div id="connections-empty" class="hidden only:block">
+    <div class="admin-empty-state">
+      <.icon name="hero-cube" class="admin-empty-state-icon" />
+      <h2 class="admin-empty-state-title">Connect a print-on-demand provider</h2>
+      <p class="admin-empty-state-text">
+        Connect your account to import products and start selling.
+      </p>
+      <div class="admin-empty-state-actions">
+        <.button
+          :for={provider <- @available_providers}
+          navigate={~p"/admin/providers/new?type=#{provider.type}"}
+        >
+          Connect {provider.name}
+        </.button>
+      </div>
     </div>
   </div>
 
@@ -37,21 +39,21 @@
     class="admin-card"
   >
     <div class="admin-card-body">
-      <div class="flex items-start justify-between gap-4">
-        <div class="flex-1 min-w-0">
-          <div class="flex items-center gap-2">
+      <div class="admin-card-row">
+        <div class="admin-card-content">
+          <div class="admin-row" style="--admin-row-gap: 0.5rem;">
             <.status_indicator status={connection.sync_status} enabled={connection.enabled} />
-            <h3 class="font-semibold text-lg">
+            <h3 class="admin-card-title" style="margin-bottom: 0; font-size: 1.125rem;">
               {provider_name(connection.provider_type)}
             </h3>
           </div>
-          <p class="text-base-content/70 mt-1">{connection.name}</p>
-          <div class="flex flex-wrap gap-x-4 gap-y-1 mt-2 text-sm text-base-content/60">
+          <p class="admin-card-subtitle">{connection.name}</p>
+          <div class="admin-card-meta">
             <.connection_info connection={connection} />
           </div>
         </div>
 
-        <div class="flex items-center gap-2">
+        <div class="admin-card-toolbar">
           <.link
             navigate={~p"/admin/providers/#{connection.id}/edit"}
             class="admin-btn admin-btn-ghost admin-btn-sm"
diff --git a/lib/berrypod_web/live/admin/settings.ex b/lib/berrypod_web/live/admin/settings.ex
index 7c0b07b..5266942 100644
--- a/lib/berrypod_web/live/admin/settings.ex
+++ b/lib/berrypod_web/live/admin/settings.ex
@@ -276,15 +276,15 @@ defmodule BerrypodWeb.Admin.Settings do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="max-w-2xl">
+    <div class="admin-settings">
       <.header>
         Settings
       </.header>
 
       <%!-- Shop status --%>
-      <section class="mt-10">
-        <div class="flex items-center gap-3">
-          <h2 class="text-lg font-semibold">Shop status</h2>
+      <section class="admin-section">
+        <div class="admin-section-header">
+          <h2 class="admin-section-title">Shop status</h2>
           <%= if @site_live do %>
             <.status_pill color="green">
               <.icon name="hero-check-circle-mini" class="size-3" /> Live
@@ -293,22 +293,19 @@ defmodule BerrypodWeb.Admin.Settings do
             <.status_pill color="zinc">Offline</.status_pill>
           <% end %>
         </div>
-        <p class="mt-2 text-sm text-base-content/60">
+        <p class="admin-section-desc">
           <%= if @site_live do %>
             Your shop is visible to the public.
           <% else %>
             Your shop is offline. Visitors see a "coming soon" page.
           <% end %>
         </p>
-        <div class="mt-4">
+        <div class="admin-section-body">
           <button
             phx-click="toggle_site_live"
             class={[
-              "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold shadow-xs",
-              if(@site_live,
-                do: "bg-base-200 text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset",
-                else: "bg-green-600 text-white hover:bg-green-500"
-              )
+              "admin-btn admin-btn-sm",
+              if(@site_live, do: "admin-btn-outline", else: "admin-btn-primary")
             ]}
           >
             <%= if @site_live do %>
@@ -321,9 +318,9 @@ defmodule BerrypodWeb.Admin.Settings do
       </section>
 
       <%!-- Payments --%>
-      <section class="mt-10">
-        <div class="flex items-center gap-3">
-          <h2 class="text-lg font-semibold">Payments</h2>
+      <section class="admin-section">
+        <div class="admin-section-header">
+          <h2 class="admin-section-title">Payments</h2>
           <%= case @stripe_status do %>
             <% :connected -> %>
               <.status_pill color="green">
@@ -354,9 +351,9 @@ defmodule BerrypodWeb.Admin.Settings do
       </section>
 
       <%!-- Products --%>
-      <section class="mt-10">
-        <div class="flex items-center gap-3">
-          <h2 class="text-lg font-semibold">Products</h2>
+      <section class="admin-section">
+        <div class="admin-section-header">
+          <h2 class="admin-section-title">Products</h2>
           <%= if @provider do %>
             <.status_pill color="green">
               <.icon name="hero-check-circle-mini" class="size-3" /> Connected
@@ -369,15 +366,12 @@ defmodule BerrypodWeb.Admin.Settings do
         <%= if @provider do %>
           <.provider_connected provider={@provider} />
         <% else %>
-          <div class="mt-4">
-            <p class="text-sm text-base-content/60">
+          <div class="admin-section-body">
+            <p class="admin-section-desc" style="margin-top: 0;">
               Connect a print-on-demand provider to import products into your shop.
             </p>
-            <div class="mt-4">
-              <.link
-                navigate={~p"/admin/providers"}
-                class="inline-flex items-center gap-2 rounded-md bg-base-content px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-base-content/80"
-              >
+            <div class="admin-section-body">
+              <.link navigate={~p"/admin/providers"} class="admin-btn admin-btn-primary admin-btn-sm">
                 <.icon name="hero-plus-mini" class="size-4" /> Connect a provider
               </.link>
             </div>
@@ -386,9 +380,9 @@ defmodule BerrypodWeb.Admin.Settings do
       </section>
 
       <%!-- Cart recovery --%>
-      <section class="mt-10">
-        <div class="flex items-center gap-3">
-          <h2 class="text-lg font-semibold">Cart recovery</h2>
+      <section class="admin-section">
+        <div class="admin-section-header">
+          <h2 class="admin-section-title">Cart recovery</h2>
           <%= if @cart_recovery_enabled do %>
             <.status_pill color="green">
               <.icon name="hero-check-circle-mini" class="size-3" /> On
@@ -397,42 +391,35 @@ defmodule BerrypodWeb.Admin.Settings do
             <.status_pill color="zinc">Off</.status_pill>
           <% end %>
         </div>
-        <p class="mt-2 text-sm text-base-content/60">
+        <p class="admin-section-desc">
           When on, customers who entered their email at Stripe checkout but didn't complete
           payment receive a single plain-text recovery email one hour later.
           No tracking pixels. One email, never more.
         </p>
         <%= if @cart_recovery_enabled do %>
-          <p class="mt-2 text-sm text-amber-700">
+          <p class="admin-section-desc" style="color: #b45309;">
             Make sure your privacy policy mentions that a single recovery email may be sent,
             and that customers can unsubscribe at any time.
           </p>
         <% end %>
-        <div class="mt-4">
+        <div class="admin-section-body">
           <button
             phx-click="toggle_cart_recovery"
             class={[
-              "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-semibold shadow-xs",
-              if(@cart_recovery_enabled,
-                do: "bg-base-200 text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset",
-                else: "bg-base-content text-white hover:bg-base-content/80"
-              )
+              "admin-btn admin-btn-sm",
+              if(@cart_recovery_enabled, do: "admin-btn-outline", else: "admin-btn-primary")
             ]}
           >
-            <%= if @cart_recovery_enabled do %>
-              Turn off
-            <% else %>
-              Turn on
-            <% end %>
+            {if @cart_recovery_enabled, do: "Turn off", else: "Turn on"}
           </button>
         </div>
       </section>
 
       <%!-- Account --%>
-      <section class="mt-10">
-        <h2 class="text-lg font-semibold">Account</h2>
+      <section class="admin-section">
+        <h2 class="admin-section-title">Account</h2>
 
-        <div class="mt-4 space-y-6">
+        <div class="admin-stack" style="margin-top: 1rem; --admin-stack-gap: 1.5rem;">
           <.form
             for={@email_form}
             id="email_form"
@@ -446,12 +433,12 @@ defmodule BerrypodWeb.Admin.Settings do
               autocomplete="username"
               required
             />
-            <div class="mt-3">
+            <div style="margin-top: 0.75rem;">
               <.button phx-disable-with="Saving...">Change email</.button>
             </div>
           </.form>
 
-          <div class="border-t border-base-200 pt-6">
+          <div style="border-top: 1px solid var(--t-surface-sunken); padding-top: 1.5rem;">
             <.form
               for={@password_form}
               id="password_form"
@@ -481,7 +468,7 @@ defmodule BerrypodWeb.Admin.Settings do
                 label="Confirm new password"
                 autocomplete="new-password"
               />
-              <div class="mt-3">
+              <div style="margin-top: 0.75rem;">
                 <.button phx-disable-with="Saving...">Change password</.button>
               </div>
             </.form>
@@ -490,17 +477,14 @@ defmodule BerrypodWeb.Admin.Settings do
       </section>
 
       <%!-- Advanced --%>
-      <section class="mt-10 pb-10">
-        <h2 class="text-lg font-semibold">Advanced</h2>
+      <section class="admin-section" style="padding-bottom: 2.5rem;">
+        <h2 class="admin-section-title">Advanced</h2>
 
-        <div class="mt-4 flex flex-col gap-2">
-          <.link
-            href={~p"/admin/dashboard"}
-            class="text-sm text-base-content/60 hover:text-base-content"
-          >
+        <div class="admin-stack" style="margin-top: 1rem; --admin-stack-gap: 0.5rem;">
+          <.link href={~p"/admin/dashboard"} class="admin-link-subtle">
             <.icon name="hero-chart-bar" class="size-4 inline" /> System dashboard
           </.link>
-          <.link href={~p"/admin/errors"} class="text-sm text-base-content/60 hover:text-base-content">
+          <.link href={~p"/admin/errors"} class="admin-link-subtle">
             <.icon name="hero-bug-ant" class="size-4 inline" /> Error tracker
           </.link>
         </div>
@@ -515,21 +499,17 @@ defmodule BerrypodWeb.Admin.Settings do
   slot :inner_block, required: true
 
   defp status_pill(assigns) do
-    classes =
+    modifier =
       case assigns.color do
-        "green" -> "bg-green-50 text-green-700 ring-green-600/20"
-        "amber" -> "bg-amber-50 text-amber-700 ring-amber-600/20"
-        "zinc" -> "bg-base-200/50 text-base-content/60 ring-base-content/10"
-        _ -> "bg-base-200/50 text-base-content/60 ring-base-content/10"
+        "green" -> "admin-status-pill-green"
+        "amber" -> "admin-status-pill-amber"
+        _ -> "admin-status-pill-zinc"
       end
 
-    assigns = assign(assigns, :classes, classes)
+    assigns = assign(assigns, :modifier, modifier)
 
     ~H"""
-    <span class={[
-      "inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-medium ring-1 ring-inset",
-      @classes
-    ]}>
+    <span class={["admin-status-pill", @modifier]}>
       {render_slot(@inner_block)}
     </span>
     """
@@ -548,38 +528,38 @@ defmodule BerrypodWeb.Admin.Settings do
       |> assign(:provider_label, String.capitalize(conn.provider_type))
 
     ~H"""
-    <div class="mt-4">
-      <dl class="text-sm">
-        <div class="flex gap-2 py-1">
-          <dt class="text-base-content/60 w-28 shrink-0">Provider</dt>
-          <dd class="text-base-content">{@provider_label}</dd>
+    <div class="admin-section-body">
+      <dl class="admin-dl">
+        <div class="admin-dl-row">
+          <dt class="admin-dl-term">Provider</dt>
+          <dd class="admin-dl-value">{@provider_label}</dd>
         </div>
-        <div class="flex gap-2 py-1">
-          <dt class="text-base-content/60 w-28 shrink-0">Shop</dt>
-          <dd class="text-base-content">{@connection.name}</dd>
+        <div class="admin-dl-row">
+          <dt class="admin-dl-term">Shop</dt>
+          <dd class="admin-dl-value">{@connection.name}</dd>
         </div>
-        <div class="flex gap-2 py-1">
-          <dt class="text-base-content/60 w-28 shrink-0">Products</dt>
-          <dd class="text-base-content">{@product_count}</dd>
+        <div class="admin-dl-row">
+          <dt class="admin-dl-term">Products</dt>
+          <dd class="admin-dl-value">{@product_count}</dd>
         </div>
-        <div class="flex gap-2 py-1">
-          <dt class="text-base-content/60 w-28 shrink-0">Last synced</dt>
-          <dd class="text-base-content">
+        <div class="admin-dl-row">
+          <dt class="admin-dl-term">Last synced</dt>
+          <dd class="admin-dl-value">
             <%= if @connection.last_synced_at do %>
               {format_relative_time(@connection.last_synced_at)}
             <% else %>
-              <span class="text-amber-600">Never</span>
+              <span style="color: #d97706;">Never</span>
             <% end %>
           </dd>
         </div>
       </dl>
 
-      <div class="mt-4 flex flex-wrap gap-2">
+      <div class="admin-cluster" style="margin-top: 1rem;">
         <button
           phx-click="sync"
           phx-value-id={@connection.id}
           disabled={@syncing}
-          class="inline-flex items-center gap-1.5 rounded-md bg-base-200 px-3 py-1.5 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset"
+          class="admin-btn admin-btn-outline admin-btn-sm"
         >
           <.icon
             name="hero-arrow-path"
@@ -589,7 +569,7 @@ defmodule BerrypodWeb.Admin.Settings do
         </button>
         <.link
           navigate={~p"/admin/providers/#{@connection.id}/edit"}
-          class="inline-flex items-center gap-1.5 rounded-md bg-base-200 px-3 py-1.5 text-sm font-medium text-base-content hover:bg-base-300 ring-1 ring-base-300 ring-inset"
+          class="admin-btn admin-btn-outline admin-btn-sm"
         >
           <.icon name="hero-cog-6-tooth" class="size-4" /> Settings
         </.link>
@@ -597,7 +577,8 @@ defmodule BerrypodWeb.Admin.Settings do
           phx-click="delete_connection"
           phx-value-id={@connection.id}
           data-confirm={"Disconnect from #{@provider_label}? Your synced products will remain in your shop."}
-          class="text-sm text-red-600 hover:text-red-800 px-2 py-1.5"
+          class="admin-link-danger"
+          style="padding: 0.375rem 0.5rem;"
         >
           Disconnect
         </button>
@@ -608,22 +589,17 @@ defmodule BerrypodWeb.Admin.Settings do
 
   defp stripe_setup_form(assigns) do
     ~H"""
-    <div class="mt-4">
-      <p class="text-sm text-base-content/60">
+    <div class="admin-section-body">
+      <p class="admin-section-desc" style="margin-top: 0;">
         To accept payments, connect your Stripe account by entering your secret key.
         You can find it in your
-        <a
-          href="https://dashboard.stripe.com/apikeys"
-          target="_blank"
-          rel="noopener"
-          class="text-base-content underline"
-        >
+        <a href="https://dashboard.stripe.com/apikeys" target="_blank" rel="noopener" class="admin-link">
           Stripe dashboard
         </a>
         under Developers &rarr; API keys.
       </p>
 
-      <.form for={@connect_form} phx-submit="connect_stripe" class="mt-6">
+      <.form for={@connect_form} phx-submit="connect_stripe" style="margin-top: 1.5rem;">
         <.input
           field={@connect_form[:api_key]}
           type="password"
@@ -631,11 +607,11 @@ defmodule BerrypodWeb.Admin.Settings do
           autocomplete="off"
           placeholder="sk_test_... or sk_live_..."
         />
-        <p class="text-xs text-base-content/60 mt-1">
+        <p class="admin-text-tertiary" style="margin-top: 0.25rem;">
           Starts with <code>sk_test_</code> (test mode) or <code>sk_live_</code> (live mode).
           This key is encrypted at rest in the database.
         </p>
-        <div class="mt-4">
+        <div class="admin-section-body">
           <.button phx-disable-with="Connecting...">
             Connect Stripe
           </.button>
@@ -647,40 +623,40 @@ defmodule BerrypodWeb.Admin.Settings do
 
   defp stripe_connected_view(assigns) do
     ~H"""
-    <div class="mt-4 space-y-4">
-      <dl class="text-sm">
-        <div class="flex gap-2 py-1">
-          <dt class="text-base-content/60 w-28 shrink-0">API key</dt>
-          <dd><code class="text-base-content">{@stripe_api_key_hint}</code></dd>
+    <div class="admin-stack" style="margin-top: 1rem;">
+      <dl class="admin-dl">
+        <div class="admin-dl-row">
+          <dt class="admin-dl-term">API key</dt>
+          <dd class="admin-dl-value"><code>{@stripe_api_key_hint}</code></dd>
         </div>
-        <div class="flex gap-2 py-1">
-          <dt class="text-base-content/60 w-28 shrink-0">Webhook URL</dt>
-          <dd><code class="text-base-content text-xs break-all">{@stripe_webhook_url}</code></dd>
+        <div class="admin-dl-row">
+          <dt class="admin-dl-term">Webhook URL</dt>
+          <dd class="admin-dl-value"><code style="font-size: 0.75rem; word-break: break-all;">{@stripe_webhook_url}</code></dd>
         </div>
-        <div class="flex gap-2 py-1">
-          <dt class="text-base-content/60 w-28 shrink-0">Webhook secret</dt>
-          <dd>
+        <div class="admin-dl-row">
+          <dt class="admin-dl-term">Webhook secret</dt>
+          <dd class="admin-dl-value">
             <%= if @stripe_has_signing_secret do %>
-              <code class="text-base-content">{@stripe_signing_secret_hint}</code>
+              <code>{@stripe_signing_secret_hint}</code>
             <% else %>
-              <span class="text-amber-600">Not set</span>
+              <span style="color: #d97706;">Not set</span>
             <% end %>
           </dd>
         </div>
       </dl>
 
       <%= if @stripe_status == :connected_localhost do %>
-        <div class="rounded-md bg-amber-50 p-4 ring-1 ring-amber-600/10 ring-inset">
-          <p class="text-sm text-amber-800">
+        <div class="admin-info-box admin-info-box-amber">
+          <p>
             Stripe can't reach localhost for webhooks. For local testing, run the Stripe CLI:
           </p>
-          <pre class="mt-2 rounded bg-amber-100 p-2 text-xs text-amber-900 overflow-x-auto">stripe listen --forward-to localhost:4000/webhooks/stripe</pre>
-          <p class="mt-2 text-xs text-amber-700">
+          <pre>stripe listen --forward-to localhost:4000/webhooks/stripe</pre>
+          <p style="margin-top: 0.5rem; font-size: 0.75rem; color: #b45309;">
             The CLI will output a signing secret starting with <code>whsec_</code>. Enter it below.
           </p>
         </div>
 
-        <.form for={@secret_form} phx-submit="save_signing_secret" class="mt-2">
+        <.form for={@secret_form} phx-submit="save_signing_secret" style="margin-top: 0.5rem;">
           <.input
             field={@secret_form[:signing_secret]}
             type="password"
@@ -688,16 +664,13 @@ defmodule BerrypodWeb.Admin.Settings do
             autocomplete="off"
             placeholder="whsec_..."
           />
-          <div class="mt-3">
+          <div style="margin-top: 0.75rem;">
             <.button phx-disable-with="Saving...">Save signing secret</.button>
           </div>
         </.form>
       <% else %>
-        <div class="border-t border-base-200 pt-3">
-          <button
-            phx-click="toggle_stripe_advanced"
-            class="flex items-center gap-1 text-sm text-base-content/60 hover:text-base-content"
-          >
+        <div style="border-top: 1px solid var(--t-surface-sunken); padding-top: 0.75rem;">
+          <button phx-click="toggle_stripe_advanced" class="admin-link-subtle admin-row" style="--admin-row-gap: 0.25rem;">
             <.icon
               name={if @advanced_open, do: "hero-chevron-down-mini", else: "hero-chevron-right-mini"}
               class="size-4"
@@ -705,8 +678,8 @@ defmodule BerrypodWeb.Admin.Settings do
           </button>
 
           <%= if @advanced_open do %>
-            <div class="mt-3">
-              <p class="text-xs text-base-content/60 mb-3">
+            <div style="margin-top: 0.75rem;">
+              <p class="admin-text-tertiary" style="margin-bottom: 0.75rem;">
                 Override the webhook signing secret if you need to use a custom endpoint or the Stripe CLI.
               </p>
               <.form for={@secret_form} phx-submit="save_signing_secret">
@@ -717,7 +690,7 @@ defmodule BerrypodWeb.Admin.Settings do
                   autocomplete="off"
                   placeholder="whsec_..."
                 />
-                <div class="mt-3">
+                <div style="margin-top: 0.75rem;">
                   <.button phx-disable-with="Saving...">Save signing secret</.button>
                 </div>
               </.form>
@@ -726,11 +699,11 @@ defmodule BerrypodWeb.Admin.Settings do
         </div>
       <% end %>
 
-      <div class="border-t border-base-200 pt-4">
+      <div style="border-top: 1px solid var(--t-surface-sunken); padding-top: 1rem;">
         <button
           phx-click="disconnect_stripe"
           data-confirm="This will remove your Stripe API key and delete the webhook endpoint. Are you sure?"
-          class="text-sm text-red-600 hover:text-red-800"
+          class="admin-link-danger"
         >
           Disconnect Stripe
         </button>
diff --git a/lib/berrypod_web/live/admin/theme/index.html.heex b/lib/berrypod_web/live/admin/theme/index.html.heex
index 22a074f..07e6d62 100644
--- a/lib/berrypod_web/live/admin/theme/index.html.heex
+++ b/lib/berrypod_web/live/admin/theme/index.html.heex
@@ -1,1365 +1,1152 @@
-<div class="min-h-screen bg-base-200">
-  <div class="flex flex-col lg:flex-row lg:h-screen">
-    <!-- Controls Sidebar -->
-    <div
-      id="theme-sidebar"
-      class={[
-        "bg-base-100 border-r border-base-300 lg:h-screen flex-shrink-0 transition-all duration-300",
-        if(@sidebar_collapsed,
-          do: "w-12 overflow-hidden",
-          else: "w-full lg:w-[380px] overflow-y-auto p-6"
-        )
-      ]}
-    >
-      <!-- Collapsed state: just show expand button -->
-      <%= if @sidebar_collapsed do %>
-        <div class="h-full flex items-start justify-center pt-4">
-          <button
-            type="button"
-            phx-click="toggle_sidebar"
-            class="p-2 rounded-lg hover:bg-base-200 transition-colors"
-            aria-label="Expand sidebar"
-            aria-expanded="false"
-            aria-controls="theme-sidebar"
-          >
-            <svg
-              class="w-5 h-5 text-base-content/70"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              aria-hidden="true"
-            >
-              <polyline points="9 18 15 12 9 6"></polyline>
-            </svg>
-          </button>
-        </div>
-      <% else %>
-        <.link
-          href={~p"/admin"}
-          class="inline-flex items-center gap-1 text-sm text-base-content/60 hover:text-base-content mb-4"
+<div class="theme-layout">
+  <!-- Controls Sidebar -->
+  <div
+    id="theme-sidebar"
+    class={[
+      "theme-sidebar",
+      if(@sidebar_collapsed,
+        do: "theme-sidebar-collapsed",
+        else: "theme-sidebar-expanded"
+      )
+    ]}
+  >
+    <!-- Collapsed state: just show expand button -->
+    <%= if @sidebar_collapsed do %>
+      <div class="theme-sidebar-collapsed-inner">
+        <button
+          type="button"
+          phx-click="toggle_sidebar"
+          class="theme-collapse-btn"
+          aria-label="Expand sidebar"
+          aria-expanded="false"
+          aria-controls="theme-sidebar"
         >
-          <.icon name="hero-arrow-left-mini" class="size-4" /> Admin
-        </.link>
-        
-<!-- Header -->
-        <div class="mb-6 flex items-start justify-between gap-3">
-          <div class="flex-1">
-            <h1 class="text-xl font-semibold tracking-tight mb-2 text-base-content">
-              Theme Studio
-            </h1>
-            <p class="text-sm text-base-content/60 leading-relaxed">
-              One theme, infinite possibilities. Every combination is designed to work beautifully.
-            </p>
-          </div>
-          <button
-            type="button"
-            phx-click="toggle_sidebar"
-            class="p-2 rounded-lg hover:bg-base-200 transition-colors flex-shrink-0 -mr-2 -mt-1"
-            aria-label="Collapse sidebar"
-            aria-expanded="true"
-            aria-controls="theme-sidebar"
+          <svg
+            class="theme-collapse-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            aria-hidden="true"
           >
-            <svg
-              class="w-5 h-5 text-base-content/70"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              aria-hidden="true"
-            >
-              <polyline points="15 18 9 12 15 6"></polyline>
-            </svg>
-          </button>
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </button>
+      </div>
+    <% else %>
+      <.link href={~p"/admin"} class="theme-back-link">
+        <.icon name="hero-arrow-left-mini" class="size-4" /> Admin
+      </.link>
+
+<!-- Header -->
+      <div class="theme-header">
+        <div style="flex: 1;">
+          <h1 class="theme-title">Theme Studio</h1>
+          <p class="theme-subtitle">
+            One theme, infinite possibilities. Every combination is designed to work beautifully.
+          </p>
         </div>
-        
+        <button
+          type="button"
+          phx-click="toggle_sidebar"
+          class="theme-collapse-btn"
+          style="margin: -0.25rem -0.5rem 0 0;"
+          aria-label="Collapse sidebar"
+          aria-expanded="true"
+          aria-controls="theme-sidebar"
+        >
+          <svg
+            class="theme-collapse-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            aria-hidden="true"
+          >
+            <polyline points="15 18 9 12 15 6"></polyline>
+          </svg>
+        </button>
+      </div>
+
 <!-- Site Name -->
-        <div class="mb-6">
-          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-            Shop name
-          </label>
-          <form phx-change="update_setting" phx-value-field="site_name">
-            <input
-              type="text"
-              name="site_name"
-              value={@theme_settings.site_name}
-              placeholder="Your shop name"
-              class="w-full px-4 py-3 border border-base-300 rounded-lg text-base bg-base-100 text-base-content focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all"
-            />
-          </form>
-        </div>
-        
-<!-- Branding Section (styled background box) -->
-        <div class="bg-base-200 rounded-xl p-4 mb-6">
-          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-4">
-            Logo & header
-          </label>
-          
+      <div class="theme-field" style="margin-bottom: 1.5rem;">
+        <label class="theme-section-label">Shop name</label>
+        <form phx-change="update_setting" phx-value-field="site_name">
+          <input
+            type="text"
+            name="site_name"
+            value={@theme_settings.site_name}
+            placeholder="Your shop name"
+            class="admin-input"
+            style="padding: 0.75rem 1rem; font-size: 1rem;"
+          />
+        </form>
+      </div>
+
+<!-- Branding Section -->
+      <div class="theme-panel">
+        <label class="theme-section-label" style="margin-bottom: 1rem;">Logo & header</label>
+
 <!-- Logo Mode Radio Cards -->
-          <div class="flex flex-col gap-2 mb-4">
-            <%= for {value, title, desc} <- [
+        <div class="admin-stack" style="--admin-stack-gap: 0.5rem; margin-bottom: 1rem;">
+          <%= for {value, title, desc} <- [
             {"text-only", "Shop name only", "Your name in the heading font"},
             {"logo-text", "Logo + shop name", "Your logo image with name beside it"},
             {"logo-only", "Logo only", "Just your logo (with text built in)"}
           ] do %>
-              <label class={[
-                "flex items-center gap-3 p-3 bg-base-100 border-2 rounded-lg cursor-pointer transition-all",
-                if(@theme_settings.logo_mode == value,
-                  do: "border-base-content",
-                  else: "border-transparent hover:border-base-300"
-                )
+            <label class={[
+              "theme-radio-card",
+              if(@theme_settings.logo_mode == value,
+                do: "theme-radio-card-active",
+                else: ""
+              )
+            ]}>
+              <input
+                type="radio"
+                name="logo_mode"
+                value={value}
+                checked={@theme_settings.logo_mode == value}
+                phx-click="update_setting"
+                phx-value-field="logo_mode"
+                phx-value-setting_value={value}
+                class="hidden"
+              />
+              <span class={[
+                "theme-radio-dot",
+                @theme_settings.logo_mode == value && "theme-radio-dot-active"
               ]}>
-                <input
-                  type="radio"
-                  name="logo_mode"
-                  value={value}
-                  checked={@theme_settings.logo_mode == value}
-                  phx-click="update_setting"
-                  phx-value-field="logo_mode"
-                  phx-value-setting_value={value}
-                  class="hidden"
-                />
                 <span class={[
-                  "w-[18px] h-[18px] rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all",
+                  "theme-radio-dot-inner",
                   if(@theme_settings.logo_mode == value,
-                    do: "border-base-content",
-                    else: "border-base-300"
+                    do: "theme-radio-dot-inner-active",
+                    else: ""
                   )
                 ]}>
-                  <span class={[
-                    "w-2 h-2 rounded-full bg-base-content transition-all",
-                    if(@theme_settings.logo_mode == value,
-                      do: "scale-100 opacity-100",
-                      else: "scale-0 opacity-0"
-                    )
-                  ]}>
-                  </span>
                 </span>
-                <div class="flex-1">
-                  <div class="text-sm font-medium text-base-content">{title}</div>
-                  <div class="text-xs text-base-content/60">{desc}</div>
-                </div>
-              </label>
-            <% end %>
-          </div>
-          
+              </span>
+              <div style="flex: 1;">
+                <div class="theme-radio-title">{title}</div>
+                <div class="admin-text-secondary">{desc}</div>
+              </div>
+            </label>
+          <% end %>
+        </div>
+
 <!-- Logo Upload (for logo-text and logo-only modes) -->
-          <%= if @theme_settings.logo_mode in ["logo-text", "logo-only"] do %>
-            <div class="mt-4 pt-4 border-t border-base-300">
-              <span class="block text-xs font-medium text-base-content/70 mb-2">
-                Upload logo (SVG or PNG)
-              </span>
-              <div class="flex items-center gap-3">
-                <form phx-change="noop" phx-submit="noop" class="flex-1">
-                  <label class="flex-1 bg-base-100 border border-dashed border-base-300 rounded-lg p-3 text-sm text-base-content/60 text-center cursor-pointer hover:border-base-content/40 hover:text-base-content/80 transition-all">
-                    <span>Choose file...</span>
-                    <.live_file_input upload={@uploads.logo_upload} class="hidden" />
-                  </label>
-                </form>
-                <%= if @logo_image do %>
-                  <div class="relative w-16 h-10 bg-base-100 border border-base-300 rounded-lg flex items-center justify-center overflow-hidden">
-                    <img
-                      src={"/image_cache/#{@logo_image.id}.webp"}
-                      alt="Current logo"
-                      class="max-w-full max-h-full object-contain"
-                    />
-                    <button
-                      type="button"
-                      phx-click="remove_logo"
-                      class="absolute -top-1.5 -right-1.5 w-[18px] h-[18px] bg-base-content text-base-100 rounded-full text-xs flex items-center justify-center leading-none"
-                      title="Remove logo"
-                    >
-                      ×
-                    </button>
-                  </div>
-                  <form
-                    phx-change="update_image_alt"
-                    phx-value-image-id={@logo_image.id}
-                    class="mt-2"
-                  >
-                    <label class="flex items-center gap-2">
-                      <span class="text-xs text-base-content/60 shrink-0">Alt text</span>
-                      <input
-                        type="text"
-                        name="alt"
-                        value={@logo_image.alt || ""}
-                        placeholder="Describe this image"
-                        class="admin-input admin-input-sm flex-1"
-                        phx-debounce="blur"
-                      />
-                    </label>
-                    <p
-                      :if={!@logo_image.alt || @logo_image.alt == ""}
-                      class="text-xs text-warning mt-1"
-                    >
-                      Missing alt text — add a description for accessibility
-                    </p>
-                  </form>
-                <% end %>
-              </div>
-
-              <%= for entry <- @uploads.logo_upload.entries do %>
-                <div class="flex items-center gap-2 mt-2">
-                  <div class="flex-1 h-1.5 bg-base-300 rounded-full overflow-hidden">
-                    <div
-                      class="h-full bg-primary transition-all"
-                      style={"width: #{entry.progress}%"}
-                    >
-                    </div>
-                  </div>
-                  <span class="text-xs text-base-content/60">{entry.progress}%</span>
-                  <button
-                    type="button"
-                    phx-click="cancel_upload"
-                    phx-value-ref={entry.ref}
-                    phx-value-upload="logo_upload"
-                    class="text-base-content/40 hover:text-base-content/70"
-                  >
-                    ×
-                  </button>
-                </div>
-                <%= for err <- upload_errors(@uploads.logo_upload, entry) do %>
-                  <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
-                <% end %>
-              <% end %>
-
-              <%= for err <- upload_errors(@uploads.logo_upload) do %>
-                <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
-              <% end %>
-              
-<!-- Logo Size Slider -->
-              <%= if @logo_image do %>
-                <form phx-change="update_setting" phx-value-field="logo_size" class="mt-3">
-                  <div class="flex justify-between items-center mb-2">
-                    <span class="text-xs font-medium text-base-content/70">Logo size</span>
-                    <span class="text-xs font-mono text-base-content/60">
-                      {@theme_settings.logo_size}px
-                    </span>
-                  </div>
-                  <input
-                    type="range"
-                    min="24"
-                    max="120"
-                    value={@theme_settings.logo_size}
-                    name="logo_size"
-                    class="admin-range w-full"
-                  />
-                </form>
-                
-<!-- SVG Recolor Toggle (only for SVG logos) -->
-                <%= if @logo_image.is_svg do %>
-                  <div class="mt-3">
-                    <label class="flex items-center gap-2 cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={@theme_settings.logo_recolor}
-                        phx-click="update_setting"
-                        phx-value-field="logo_recolor"
-                        phx-value-setting_value={
-                          if @theme_settings.logo_recolor, do: "false", else: "true"
-                        }
-                        class="admin-toggle admin-toggle-sm"
-                      />
-                      <span class="text-sm text-base-content/70">Recolour logo</span>
-                    </label>
-
-                    <%= if @theme_settings.logo_recolor do %>
-                      <form
-                        id="logo-color-form"
-                        phx-change="update_color"
-                        phx-value-field="logo_color"
-                        phx-hook="ColorSync"
-                        class="flex items-center gap-3 mt-2"
-                      >
-                        <input
-                          type="color"
-                          name="value"
-                          value={@theme_settings.logo_color}
-                          class="w-9 h-9 rounded-lg cursor-pointer border-0 p-0"
-                        />
-                        <span class="font-mono text-sm text-base-content/70">
-                          {@theme_settings.logo_color}
-                        </span>
-                      </form>
-                    <% end %>
-                  </div>
-                <% end %>
-              <% end %>
-            </div>
-          <% end %>
-        </div>
-        
-<!-- Site Icon / Favicon -->
-        <div class="bg-base-200 rounded-xl p-4 mb-6">
-          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-            Site icon
-          </label>
-          <p class="text-xs text-base-content/50 mb-4">
-            Your icon appears in browser tabs and on home screens.
-          </p>
-          
-<!-- Use logo as icon toggle -->
-          <label class="flex items-center gap-2 cursor-pointer mb-4">
-            <input
-              type="checkbox"
-              checked={@theme_settings.use_logo_as_icon}
-              phx-click="toggle_setting"
-              phx-value-field="use_logo_as_icon"
-              class="admin-toggle admin-toggle-sm"
-            />
-            <span class="text-sm text-base-content/70">Use logo as favicon</span>
-          </label>
-          
-<!-- Icon upload (only when not using logo) -->
-          <%= if !@theme_settings.use_logo_as_icon do %>
-            <div class="pt-3 border-t border-base-300">
-              <span class="block text-xs font-medium text-base-content/70 mb-2">
-                Upload icon (PNG or SVG, 512×512+)
-              </span>
-              <div class="flex items-center gap-3">
-                <form phx-change="noop" phx-submit="noop" class="flex-1">
-                  <label class="flex-1 bg-base-100 border border-dashed border-base-300 rounded-lg p-3 text-sm text-base-content/60 text-center cursor-pointer hover:border-base-content/40 hover:text-base-content/80 transition-all">
-                    <span>Choose file...</span>
-                    <.live_file_input upload={@uploads.icon_upload} class="hidden" />
-                  </label>
-                </form>
-                <%= if @icon_image do %>
-                  <div class="relative w-10 h-10 bg-base-100 border border-base-300 rounded-lg flex items-center justify-center overflow-hidden">
-                    <%= if @icon_image.is_svg do %>
-                      <img
-                        src={"/images/#{@icon_image.id}/recolored/000000"}
-                        alt="Current icon"
-                        class="max-w-full max-h-full object-contain"
-                      />
-                    <% else %>
-                      <img
-                        src={"/image_cache/#{@icon_image.id}.webp"}
-                        alt="Current icon"
-                        class="max-w-full max-h-full object-contain"
-                      />
-                    <% end %>
-                    <button
-                      type="button"
-                      phx-click="remove_icon"
-                      class="absolute -top-1.5 -right-1.5 w-[18px] h-[18px] bg-base-content text-base-100 rounded-full text-xs flex items-center justify-center leading-none"
-                      title="Remove icon"
-                    >
-                      ×
-                    </button>
-                  </div>
-                <% end %>
-              </div>
-
-              <%= for entry <- @uploads.icon_upload.entries do %>
-                <div class="flex items-center gap-2 mt-2">
-                  <div class="flex-1 h-1.5 bg-base-300 rounded-full overflow-hidden">
-                    <div
-                      class="h-full bg-primary transition-all"
-                      style={"width: #{entry.progress}%"}
-                    >
-                    </div>
-                  </div>
-                  <span class="text-xs text-base-content/60">{entry.progress}%</span>
-                  <button
-                    type="button"
-                    phx-click="cancel_upload"
-                    phx-value-ref={entry.ref}
-                    phx-value-upload="icon_upload"
-                    class="text-base-content/40 hover:text-base-content/70"
-                  >
-                    ×
-                  </button>
-                </div>
-                <%= for err <- upload_errors(@uploads.icon_upload, entry) do %>
-                  <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
-                <% end %>
-              <% end %>
-
-              <%= for err <- upload_errors(@uploads.icon_upload) do %>
-                <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
-              <% end %>
-            </div>
-          <% end %>
-          
-<!-- Short name -->
-          <div class="mt-4 pt-3 border-t border-base-300">
-            <form phx-change="update_setting" phx-value-field="favicon_short_name">
-              <div class="flex justify-between items-center mb-1">
-                <span class="text-xs font-medium text-base-content/70">Short name</span>
-                <span class="text-xs text-base-content/50">Home screen label</span>
-              </div>
-              <input
-                type="text"
-                name="favicon_short_name"
-                value={@theme_settings.favicon_short_name}
-                placeholder={String.slice(@theme_settings.site_name, 0, 12)}
-                maxlength="12"
-                class="w-full px-3 py-2 border border-base-300 rounded-lg text-sm bg-base-100 text-base-content focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all"
-              />
-            </form>
-          </div>
-          
-<!-- Icon background colour -->
-          <div class="mt-3">
-            <form
-              id="icon-bg-color-form"
-              phx-change="update_color"
-              phx-value-field="icon_background_color"
-              phx-hook="ColorSync"
-              class="flex items-center gap-3"
-            >
-              <input
-                type="color"
-                name="value"
-                value={@theme_settings.icon_background_color}
-                class="w-9 h-9 rounded-lg cursor-pointer border-0 p-0"
-              />
-              <div>
-                <span class="text-xs font-medium text-base-content/70 block">
-                  Icon background
-                </span>
-                <span class="font-mono text-xs text-base-content/50">
-                  {@theme_settings.icon_background_color}
-                </span>
-              </div>
-            </form>
-          </div>
-        </div>
-        
-<!-- Header Background Toggle -->
-        <div class="mb-6">
-          <label class="flex items-center gap-2 cursor-pointer">
-            <input
-              type="checkbox"
-              checked={@theme_settings.header_background_enabled}
-              phx-click="update_setting"
-              phx-value-field="header_background_enabled"
-              phx-value-setting_value={
-                if @theme_settings.header_background_enabled, do: "false", else: "true"
-              }
-              class="admin-toggle admin-toggle-sm"
-            />
-            <span class="text-sm text-base-content/80">Header background image</span>
-          </label>
-        </div>
-        
-<!-- Header Image Upload (only when enabled) -->
-        <%= if @theme_settings.header_background_enabled do %>
-          <div class="bg-base-200 rounded-xl p-4 mb-6">
-            <span class="block text-xs font-medium text-base-content/70 mb-2">
-              Upload header image
+        <%= if @theme_settings.logo_mode in ["logo-text", "logo-only"] do %>
+          <div class="theme-subsection">
+            <span class="theme-slider-label" style="display: block; margin-bottom: 0.5rem;">
+              Upload logo (SVG or PNG)
             </span>
-            <form phx-change="noop" phx-submit="noop">
-              <label class="block bg-base-100 border border-dashed border-base-300 rounded-lg p-3 text-sm text-base-content/60 text-center cursor-pointer hover:border-base-content/40 hover:text-base-content/80 transition-all">
-                <span>Choose file...</span>
-                <.live_file_input upload={@uploads.header_upload} class="hidden" />
-              </label>
-            </form>
-
-            <%= if @header_image do %>
-              <div class="relative w-full h-[60px] bg-base-100 border border-base-300 rounded-lg mt-2 overflow-hidden">
-                <img
-                  src={"/image_cache/#{@header_image.id}.webp"}
-                  alt="Current header background"
-                  class="w-full h-full object-cover"
-                />
-                <button
-                  type="button"
-                  phx-click="remove_header"
-                  class="absolute -top-1.5 -right-1.5 w-[18px] h-[18px] bg-base-content text-base-100 rounded-full text-xs flex items-center justify-center leading-none"
-                  title="Remove header background"
-                >
-                  ×
-                </button>
-              </div>
-              <form
-                phx-change="update_image_alt"
-                phx-value-image-id={@header_image.id}
-                class="mt-2"
-              >
-                <label class="flex items-center gap-2">
-                  <span class="text-xs text-base-content/60 shrink-0">Alt text</span>
-                  <input
-                    type="text"
-                    name="alt"
-                    value={@header_image.alt || ""}
-                    placeholder="Describe this image"
-                    class="admin-input admin-input-sm flex-1"
-                    phx-debounce="blur"
-                  />
+            <div class="admin-row" style="--admin-row-gap: 0.75rem;">
+              <form phx-change="noop" phx-submit="noop" style="flex: 1;">
+                <label class="theme-upload-label">
+                  <span>Choose file...</span>
+                  <.live_file_input upload={@uploads.logo_upload} class="hidden" />
                 </label>
-                <p
-                  :if={!@header_image.alt || @header_image.alt == ""}
-                  class="text-xs text-warning mt-1"
-                >
-                  Missing alt text — add a description for accessibility
-                </p>
               </form>
-              
-<!-- Header Image Controls -->
-              <div class="mt-3 flex flex-col gap-3">
-                <form phx-change="update_setting" phx-value-field="header_zoom">
-                  <div class="flex justify-between items-center mb-2">
-                    <span class="text-xs font-medium text-base-content/70">Zoom</span>
-                    <span class="text-xs font-mono text-base-content/60">
-                      {@theme_settings.header_zoom}%
-                    </span>
-                  </div>
-                  <input
-                    type="range"
-                    min="100"
-                    max="200"
-                    value={@theme_settings.header_zoom}
-                    name="header_zoom"
-                    class="admin-range w-full"
+              <%= if @logo_image do %>
+                <div class="theme-thumb theme-thumb-logo">
+                  <img
+                    src={"/image_cache/#{@logo_image.id}.webp"}
+                    alt="Current logo"
                   />
+                  <button
+                    type="button"
+                    phx-click="remove_logo"
+                    class="theme-remove-btn"
+                    title="Remove logo"
+                  >
+                    ×
+                  </button>
+                </div>
+                <form
+                  phx-change="update_image_alt"
+                  phx-value-image-id={@logo_image.id}
+                  style="margin-top: 0.5rem;"
+                >
+                  <label class="admin-row" style="--admin-row-gap: 0.5rem;">
+                    <span class="admin-text-secondary shrink-0">Alt text</span>
+                    <input
+                      type="text"
+                      name="alt"
+                      value={@logo_image.alt || ""}
+                      placeholder="Describe this image"
+                      class="admin-input admin-input-sm"
+                      style="flex: 1;"
+                      phx-debounce="blur"
+                    />
+                  </label>
+                  <p
+                    :if={!@logo_image.alt || @logo_image.alt == ""}
+                    class="theme-alt-warning"
+                  >
+                    Missing alt text — add a description for accessibility
+                  </p>
                 </form>
-                <form phx-change="update_setting" phx-value-field="header_position_x">
-                  <div class="flex justify-between items-center mb-2">
-                    <span class="text-xs font-medium text-base-content/70">
-                      Horizontal position
-                    </span>
-                    <span class="text-xs font-mono text-base-content/60">
-                      {@theme_settings.header_position_x}%
-                    </span>
-                  </div>
-                  <input
-                    type="range"
-                    min="0"
-                    max="100"
-                    value={@theme_settings.header_position_x}
-                    name="header_position_x"
-                    class="admin-range w-full"
-                  />
-                </form>
-                <form phx-change="update_setting" phx-value-field="header_position_y">
-                  <div class="flex justify-between items-center mb-2">
-                    <span class="text-xs font-medium text-base-content/70">
-                      Vertical position
-                    </span>
-                    <span class="text-xs font-mono text-base-content/60">
-                      {@theme_settings.header_position_y}%
-                    </span>
-                  </div>
-                  <input
-                    type="range"
-                    min="0"
-                    max="100"
-                    value={@theme_settings.header_position_y}
-                    name="header_position_y"
-                    class="admin-range w-full"
-                  />
-                </form>
-              </div>
-            <% end %>
+              <% end %>
+            </div>
 
-            <%= for entry <- @uploads.header_upload.entries do %>
-              <div class="flex items-center gap-2 mt-2">
-                <div class="flex-1 h-1.5 bg-base-300 rounded-full overflow-hidden">
+            <%= for entry <- @uploads.logo_upload.entries do %>
+              <div class="theme-progress">
+                <div class="theme-progress-bar">
                   <div
-                    class="h-full bg-primary transition-all"
+                    class="theme-progress-fill"
                     style={"width: #{entry.progress}%"}
                   >
                   </div>
                 </div>
-                <span class="text-xs text-base-content/60">{entry.progress}%</span>
+                <span class="admin-text-secondary">{entry.progress}%</span>
                 <button
                   type="button"
                   phx-click="cancel_upload"
                   phx-value-ref={entry.ref}
-                  phx-value-upload="header_upload"
-                  class="text-base-content/40 hover:text-base-content/70"
+                  phx-value-upload="logo_upload"
+                  class="theme-upload-cancel"
                 >
                   ×
                 </button>
               </div>
-              <%= for err <- upload_errors(@uploads.header_upload, entry) do %>
-                <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
+              <%= for err <- upload_errors(@uploads.logo_upload, entry) do %>
+                <p class="theme-error-text">{error_to_string(err)}</p>
               <% end %>
             <% end %>
 
-            <%= for err <- upload_errors(@uploads.header_upload) do %>
-              <p class="text-error text-xs mt-1">{error_to_string(err)}</p>
+            <%= for err <- upload_errors(@uploads.logo_upload) do %>
+              <p class="theme-error-text">{error_to_string(err)}</p>
+            <% end %>
+
+<!-- Logo Size Slider -->
+            <%= if @logo_image do %>
+              <form phx-change="update_setting" phx-value-field="logo_size" style="margin-top: 0.75rem;">
+                <div class="theme-slider-header">
+                  <span class="theme-slider-label">Logo size</span>
+                  <span class="theme-slider-value">{@theme_settings.logo_size}px</span>
+                </div>
+                <input
+                  type="range"
+                  min="24"
+                  max="120"
+                  value={@theme_settings.logo_size}
+                  name="logo_size"
+                  class="admin-range"
+                  style="width: 100%;"
+                />
+              </form>
+
+<!-- SVG Recolor Toggle (only for SVG logos) -->
+              <%= if @logo_image.is_svg do %>
+                <div style="margin-top: 0.75rem;">
+                  <label class="admin-toggle-label">
+                    <input
+                      type="checkbox"
+                      checked={@theme_settings.logo_recolor}
+                      phx-click="update_setting"
+                      phx-value-field="logo_recolor"
+                      phx-value-setting_value={
+                        if @theme_settings.logo_recolor, do: "false", else: "true"
+                      }
+                      class="admin-toggle admin-toggle-sm"
+                    />
+                    <span class="theme-slider-label">Recolour logo</span>
+                  </label>
+
+                  <%= if @theme_settings.logo_recolor do %>
+                    <form
+                      id="logo-color-form"
+                      phx-change="update_color"
+                      phx-value-field="logo_color"
+                      phx-hook="ColorSync"
+                      class="theme-color-row"
+                      style="margin-top: 0.5rem;"
+                    >
+                      <input
+                        type="color"
+                        name="value"
+                        value={@theme_settings.logo_color}
+                        class="theme-color-swatch theme-color-swatch-sm"
+                      />
+                      <span class="theme-color-value">{@theme_settings.logo_color}</span>
+                    </form>
+                  <% end %>
+                </div>
+              <% end %>
             <% end %>
           </div>
         <% end %>
-        
-<!-- Presets Section -->
-        <div class="mb-6">
-          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-            Start with a preset
-          </label>
-          <div class="grid grid-cols-2 gap-2">
-            <%= for {preset_name, description} <- @presets_with_descriptions do %>
-              <button
-                type="button"
-                phx-click="apply_preset"
-                phx-value-preset={preset_name}
-                class={[
-                  "p-3 rounded-lg text-left transition-all border-2",
-                  if(@active_preset == preset_name,
-                    do: "border-base-content bg-base-100",
-                    else: "border-transparent bg-base-200 hover:bg-base-300"
-                  )
-                ]}
-              >
-                <div class="font-semibold text-sm capitalize text-base-content">
-                  {preset_name}
+      </div>
+
+<!-- Site Icon / Favicon -->
+      <div class="theme-panel">
+        <label class="theme-section-label">Site icon</label>
+        <p class="admin-text-tertiary" style="margin-bottom: 1rem;">
+          Your icon appears in browser tabs and on home screens.
+        </p>
+
+<!-- Use logo as icon toggle -->
+        <label class="admin-toggle-label" style="margin-bottom: 1rem;">
+          <input
+            type="checkbox"
+            checked={@theme_settings.use_logo_as_icon}
+            phx-click="toggle_setting"
+            phx-value-field="use_logo_as_icon"
+            class="admin-toggle admin-toggle-sm"
+          />
+          <span class="theme-slider-label">Use logo as favicon</span>
+        </label>
+
+<!-- Icon upload (only when not using logo) -->
+        <%= if !@theme_settings.use_logo_as_icon do %>
+          <div style="padding-top: 0.75rem; border-top: 1px solid var(--t-border-default);">
+            <span class="theme-slider-label" style="display: block; margin-bottom: 0.5rem;">
+              Upload icon (PNG or SVG, 512×512+)
+            </span>
+            <div class="admin-row" style="--admin-row-gap: 0.75rem;">
+              <form phx-change="noop" phx-submit="noop" style="flex: 1;">
+                <label class="theme-upload-label">
+                  <span>Choose file...</span>
+                  <.live_file_input upload={@uploads.icon_upload} class="hidden" />
+                </label>
+              </form>
+              <%= if @icon_image do %>
+                <div class="theme-thumb theme-thumb-icon">
+                  <%= if @icon_image.is_svg do %>
+                    <img
+                      src={"/images/#{@icon_image.id}/recolored/000000"}
+                      alt="Current icon"
+                    />
+                  <% else %>
+                    <img
+                      src={"/image_cache/#{@icon_image.id}.webp"}
+                      alt="Current icon"
+                    />
+                  <% end %>
+                  <button
+                    type="button"
+                    phx-click="remove_icon"
+                    class="theme-remove-btn"
+                    title="Remove icon"
+                  >
+                    ×
+                  </button>
                 </div>
-                <div class="text-xs text-base-content/60">{description}</div>
-              </button>
+              <% end %>
+            </div>
+
+            <%= for entry <- @uploads.icon_upload.entries do %>
+              <div class="theme-progress">
+                <div class="theme-progress-bar">
+                  <div
+                    class="theme-progress-fill"
+                    style={"width: #{entry.progress}%"}
+                  >
+                  </div>
+                </div>
+                <span class="admin-text-secondary">{entry.progress}%</span>
+                <button
+                  type="button"
+                  phx-click="cancel_upload"
+                  phx-value-ref={entry.ref}
+                  phx-value-upload="icon_upload"
+                  class="theme-upload-cancel"
+                >
+                  ×
+                </button>
+              </div>
+              <%= for err <- upload_errors(@uploads.icon_upload, entry) do %>
+                <p class="theme-error-text">{error_to_string(err)}</p>
+              <% end %>
+            <% end %>
+
+            <%= for err <- upload_errors(@uploads.icon_upload) do %>
+              <p class="theme-error-text">{error_to_string(err)}</p>
             <% end %>
           </div>
-        </div>
-        
-<!-- Accent Colors (stays in essentials) -->
-        <div class="mb-6">
-          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-            Accent colour
-          </label>
-          <form
-            id="accent-color-form"
-            phx-change="update_color"
-            phx-value-field="accent_color"
-            phx-hook="ColorSync"
-          >
-            <div class="flex items-center gap-3">
-              <input
-                type="color"
-                id="accent-color-picker"
-                name="value"
-                value={@theme_settings.accent_color}
-                class="w-12 h-12 rounded-lg cursor-pointer border-0 p-0"
-              />
-              <span class="font-mono text-sm text-base-content/70">
-                {@theme_settings.accent_color}
-              </span>
+        <% end %>
+
+<!-- Short name -->
+        <div class="theme-subsection" style="padding-top: 0.75rem;">
+          <form phx-change="update_setting" phx-value-field="favicon_short_name">
+            <div class="theme-slider-header" style="margin-bottom: 0.25rem;">
+              <span class="theme-slider-label">Short name</span>
+              <span class="admin-text-tertiary">Home screen label</span>
             </div>
+            <input
+              type="text"
+              name="favicon_short_name"
+              value={@theme_settings.favicon_short_name}
+              placeholder={String.slice(@theme_settings.site_name, 0, 12)}
+              maxlength="12"
+              class="admin-input admin-input-sm"
+            />
           </form>
         </div>
 
-        <div class="mb-6">
-          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-            Hover colour
-          </label>
+<!-- Icon background colour -->
+        <div style="margin-top: 0.75rem;">
           <form
-            id="secondary-accent-color-form"
+            id="icon-bg-color-form"
             phx-change="update_color"
-            phx-value-field="secondary_accent_color"
+            phx-value-field="icon_background_color"
             phx-hook="ColorSync"
+            class="theme-color-row"
           >
-            <div class="flex items-center gap-3">
-              <input
-                type="color"
-                id="secondary-accent-color-picker"
-                name="value"
-                value={@theme_settings.secondary_accent_color}
-                class="w-12 h-12 rounded-lg cursor-pointer border-0 p-0"
-              />
-              <span class="font-mono text-sm text-base-content/70">
-                {@theme_settings.secondary_accent_color}
+            <input
+              type="color"
+              name="value"
+              value={@theme_settings.icon_background_color}
+              class="theme-color-swatch theme-color-swatch-sm"
+            />
+            <div>
+              <span class="theme-slider-label" style="display: block;">Icon background</span>
+              <span class="theme-slider-value" style="font-size: 0.75rem;">
+                {@theme_settings.icon_background_color}
               </span>
             </div>
           </form>
         </div>
+      </div>
 
-        <div class="mb-6">
-          <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-            Sale colour
-          </label>
-          <form
-            id="sale-color-form"
-            phx-change="update_color"
-            phx-value-field="sale_color"
-            phx-hook="ColorSync"
-          >
-            <div class="flex items-center gap-3">
-              <input
-                type="color"
-                id="sale-color-picker"
-                name="value"
-                value={@theme_settings.sale_color}
-                class="w-12 h-12 rounded-lg cursor-pointer border-0 p-0"
-              />
-              <span class="font-mono text-sm text-base-content/70">
-                {@theme_settings.sale_color}
-              </span>
-            </div>
+<!-- Header Background Toggle -->
+      <div style="margin-bottom: 1.5rem;">
+        <label class="admin-toggle-label">
+          <input
+            type="checkbox"
+            checked={@theme_settings.header_background_enabled}
+            phx-click="update_setting"
+            phx-value-field="header_background_enabled"
+            phx-value-setting_value={
+              if @theme_settings.header_background_enabled, do: "false", else: "true"
+            }
+            class="admin-toggle admin-toggle-sm"
+          />
+          <span style="font-size: 0.875rem; color: color-mix(in oklch, var(--t-text-primary) 80%, transparent);">
+            Header background image
+          </span>
+        </label>
+      </div>
+
+<!-- Header Image Upload (only when enabled) -->
+      <%= if @theme_settings.header_background_enabled do %>
+        <div class="theme-panel">
+          <span class="theme-slider-label" style="display: block; margin-bottom: 0.5rem;">
+            Upload header image
+          </span>
+          <form phx-change="noop" phx-submit="noop">
+            <label class="theme-upload-label">
+              <span>Choose file...</span>
+              <.live_file_input upload={@uploads.header_upload} class="hidden" />
+            </label>
           </form>
-        </div>
-        
-<!-- Customise Section (collapsible accordion using native details/summary) -->
-        <details
-          class="border-t border-base-300 mt-6 pt-4 group"
-          id="customise-section"
-          open={@customise_open}
-        >
-          <summary
-            class="flex items-center justify-between w-full py-3 cursor-pointer list-none [&::-webkit-details-marker]:hidden"
-            phx-click="toggle_customise"
-          >
-            <span class="text-sm font-semibold text-base-content/70 group-hover:text-base-content transition-colors">
-              Customise
-            </span>
-            <svg
-              class="w-5 h-5 text-base-content/50 transition-transform group-open:rotate-180"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
+
+          <%= if @header_image do %>
+            <div class="theme-thumb theme-thumb-cover theme-thumb-header">
+              <img
+                src={"/image_cache/#{@header_image.id}.webp"}
+                alt="Current header background"
+              />
+              <button
+                type="button"
+                phx-click="remove_header"
+                class="theme-remove-btn"
+                title="Remove header background"
+              >
+                ×
+              </button>
+            </div>
+            <form
+              phx-change="update_image_alt"
+              phx-value-image-id={@header_image.id}
+              style="margin-top: 0.5rem;"
             >
-              <polyline points="6 9 12 15 18 9"></polyline>
-            </svg>
-          </summary>
+              <label class="admin-row" style="--admin-row-gap: 0.5rem;">
+                <span class="admin-text-secondary shrink-0">Alt text</span>
+                <input
+                  type="text"
+                  name="alt"
+                  value={@header_image.alt || ""}
+                  placeholder="Describe this image"
+                  class="admin-input admin-input-sm"
+                  style="flex: 1;"
+                  phx-debounce="blur"
+                />
+              </label>
+              <p
+                :if={!@header_image.alt || @header_image.alt == ""}
+                class="theme-alt-warning"
+              >
+                Missing alt text — add a description for accessibility
+              </p>
+            </form>
 
-          <div class="pt-4">
-            <!-- Typography Group -->
-            <div class="mb-6 pb-6 border-b border-base-200">
-              <div class="flex items-center gap-2 mb-4">
-                <svg
-                  class="w-4 h-4 text-base-content/50"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <polyline points="4 7 4 4 20 4 20 7"></polyline>
-                  <line x1="9" y1="20" x2="15" y2="20"></line>
-                  <line x1="12" y1="4" x2="12" y2="20"></line>
-                </svg>
-                <span class="text-sm font-semibold text-base-content">Typography</span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Font style
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for typo <- ["clean", "editorial", "modern", "classic", "friendly", "minimal"] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="typography"
-                      phx-value-setting_value={typo}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                        if(@theme_settings.typography == typo,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {typo}
-                    </button>
-                  <% end %>
+<!-- Header Image Controls -->
+            <div class="admin-stack" style="--admin-stack-gap: 0.75rem; margin-top: 0.75rem;">
+              <form phx-change="update_setting" phx-value-field="header_zoom">
+                <div class="theme-slider-header">
+                  <span class="theme-slider-label">Zoom</span>
+                  <span class="theme-slider-value">{@theme_settings.header_zoom}%</span>
                 </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Font size
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for {value, label} <- [{"small", "Small"}, {"medium", "Medium"}, {"large", "Large"}] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="font_size"
-                      phx-value-setting_value={value}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                        if(@theme_settings.font_size == value,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {label}
-                    </button>
-                  <% end %>
+                <input
+                  type="range"
+                  min="100"
+                  max="200"
+                  value={@theme_settings.header_zoom}
+                  name="header_zoom"
+                  class="admin-range"
+                  style="width: 100%;"
+                />
+              </form>
+              <form phx-change="update_setting" phx-value-field="header_position_x">
+                <div class="theme-slider-header">
+                  <span class="theme-slider-label">Horizontal position</span>
+                  <span class="theme-slider-value">{@theme_settings.header_position_x}%</span>
                 </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Heading weight
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for {value, label} <- [{"regular", "Regular"}, {"medium", "Medium"}, {"bold", "Bold"}] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="heading_weight"
-                      phx-value-setting_value={value}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                        if(@theme_settings.heading_weight == value,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {label}
-                    </button>
-                  <% end %>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  value={@theme_settings.header_position_x}
+                  name="header_position_x"
+                  class="admin-range"
+                  style="width: 100%;"
+                />
+              </form>
+              <form phx-change="update_setting" phx-value-field="header_position_y">
+                <div class="theme-slider-header">
+                  <span class="theme-slider-label">Vertical position</span>
+                  <span class="theme-slider-value">{@theme_settings.header_position_y}%</span>
                 </div>
-              </div>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  value={@theme_settings.header_position_y}
+                  name="header_position_y"
+                  class="admin-range"
+                  style="width: 100%;"
+                />
+              </form>
             </div>
-            
-<!-- Colours Group -->
-            <div class="mb-6 pb-6 border-b border-base-200">
-              <div class="flex items-center gap-2 mb-4">
-                <svg
-                  class="w-4 h-4 text-base-content/50"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
+          <% end %>
+
+          <%= for entry <- @uploads.header_upload.entries do %>
+            <div class="theme-progress">
+              <div class="theme-progress-bar">
+                <div
+                  class="theme-progress-fill"
+                  style={"width: #{entry.progress}%"}
                 >
-                  <circle cx="12" cy="12" r="10"></circle>
-                  <circle cx="12" cy="12" r="3"></circle>
-                </svg>
-                <span class="text-sm font-semibold text-base-content">Colours</span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Colour mood
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for mood <- ["warm", "neutral", "cool", "dark"] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="mood"
-                      phx-value-setting_value={mood}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                        if(@theme_settings.mood == mood,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {mood}
-                    </button>
-                  <% end %>
                 </div>
               </div>
+              <span class="admin-text-secondary">{entry.progress}%</span>
+              <button
+                type="button"
+                phx-click="cancel_upload"
+                phx-value-ref={entry.ref}
+                phx-value-upload="header_upload"
+                class="theme-upload-cancel"
+              >
+                ×
+              </button>
             </div>
-            
-<!-- Layout Group -->
-            <div class="mb-6 pb-6 border-b border-base-200">
-              <div class="flex items-center gap-2 mb-4">
-                <svg
-                  class="w-4 h-4 text-base-content/50"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                  <line x1="3" y1="9" x2="21" y2="9"></line>
-                  <line x1="9" y1="21" x2="9" y2="9"></line>
-                </svg>
-                <span class="text-sm font-semibold text-base-content">Layout</span>
-              </div>
+            <%= for err <- upload_errors(@uploads.header_upload, entry) do %>
+              <p class="theme-error-text">{error_to_string(err)}</p>
+            <% end %>
+          <% end %>
 
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Product grid
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for cols <- ["2", "3", "4"] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="grid_columns"
-                      phx-value-setting_value={cols}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                        if(@theme_settings.grid_columns == cols,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {cols} columns
-                    </button>
-                  <% end %>
-                </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Density
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for density <- ["spacious", "balanced", "compact"] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="density"
-                      phx-value-setting_value={density}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                        if(@theme_settings.density == density,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {density}
-                    </button>
-                  <% end %>
-                </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Header layout
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for layout <- ["standard", "centered", "left"] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="header_layout"
-                      phx-value-setting_value={layout}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                        if(@theme_settings.header_layout == layout,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {layout}
-                    </button>
-                  <% end %>
-                </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="flex items-center gap-3 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={@theme_settings.announcement_bar}
-                    phx-click="toggle_setting"
-                    phx-value-field="announcement_bar"
-                    class="admin-checkbox admin-checkbox-sm"
-                  />
-                  <span class="text-sm text-base-content">Announcement bar</span>
-                </label>
-              </div>
-
-              <div class="mb-4">
-                <label class="flex items-center gap-3 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={@theme_settings.sticky_header}
-                    phx-click="toggle_setting"
-                    phx-value-field="sticky_header"
-                    class="admin-checkbox admin-checkbox-sm"
-                  />
-                  <span class="text-sm text-base-content">Sticky header</span>
-                </label>
-              </div>
-            </div>
-            
-<!-- Shape Group -->
-            <div class="mb-4">
-              <div class="flex items-center gap-2 mb-4">
-                <svg
-                  class="w-4 h-4 text-base-content/50"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                </svg>
-                <span class="text-sm font-semibold text-base-content">Shape</span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Corner style
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for shape <- ["sharp", "soft", "round", "pill"] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="shape"
-                      phx-value-setting_value={shape}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                        if(@theme_settings.shape == shape,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {shape}
-                    </button>
-                  <% end %>
-                </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Card shadow
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for {value, label} <- [{"none", "None"}, {"sm", "Subtle"}, {"md", "Medium"}, {"lg", "Strong"}] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="card_shadow"
-                      phx-value-setting_value={value}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                        if(@theme_settings.card_shadow == value,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {label}
-                    </button>
-                  <% end %>
-                </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Button style
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for {value, label} <- [{"filled", "Filled"}, {"outline", "Outline"}, {"soft", "Soft"}] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="button_style"
-                      phx-value-setting_value={value}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                        if(@theme_settings.button_style == value,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {label}
-                    </button>
-                  <% end %>
-                </div>
-              </div>
-            </div>
-            
-<!-- Products Group -->
-            <div class="mb-6 pb-6 border-b border-base-200">
-              <div class="flex items-center gap-2 mb-4">
-                <svg
-                  class="w-4 h-4 text-base-content/50"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <rect x="3" y="3" width="7" height="7"></rect>
-                  <rect x="14" y="3" width="7" height="7"></rect>
-                  <rect x="14" y="14" width="7" height="7"></rect>
-                  <rect x="3" y="14" width="7" height="7"></rect>
-                </svg>
-                <span class="text-sm font-semibold text-base-content">Products</span>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Content width
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for width <- ["contained", "wide", "full"] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="layout_width"
-                      phx-value-setting_value={width}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all capitalize",
-                        if(@theme_settings.layout_width == width,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {width}
-                    </button>
-                  <% end %>
-                </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Image aspect ratio
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for {value, label} <- [{"square", "Square"}, {"portrait", "Portrait"}, {"landscape", "Landscape"}] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="image_aspect_ratio"
-                      phx-value-setting_value={value}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                        if(@theme_settings.image_aspect_ratio == value,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {label}
-                    </button>
-                  <% end %>
-                </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="block text-xs font-semibold uppercase tracking-wider text-base-content/60 mb-3">
-                  Product text alignment
-                </label>
-                <div class="flex flex-wrap gap-2">
-                  <%= for {value, label} <- [{"left", "Left"}, {"center", "Centre"}] do %>
-                    <button
-                      type="button"
-                      phx-click="update_setting"
-                      phx-value-field="product_text_align"
-                      phx-value-setting_value={value}
-                      class={[
-                        "px-3 py-2 text-sm rounded-lg border-2 transition-all",
-                        if(@theme_settings.product_text_align == value,
-                          do: "border-base-content bg-base-100 text-base-content",
-                          else:
-                            "border-transparent bg-base-200 hover:bg-base-300 text-base-content"
-                        )
-                      ]}
-                    >
-                      {label}
-                    </button>
-                  <% end %>
-                </div>
-              </div>
-
-              <div class="mb-4">
-                <label class="flex items-center gap-3 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={@theme_settings.hover_image}
-                    phx-click="toggle_setting"
-                    phx-value-field="hover_image"
-                    class="admin-checkbox admin-checkbox-sm"
-                  />
-                  <span class="text-sm text-base-content">Second image on hover</span>
-                </label>
-              </div>
-
-              <div class="mb-4">
-                <label class="flex items-center gap-3 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={@theme_settings.show_prices}
-                    phx-click="toggle_setting"
-                    phx-value-field="show_prices"
-                    class="admin-checkbox admin-checkbox-sm"
-                  />
-                  <span class="text-sm text-base-content">Show prices</span>
-                </label>
-              </div>
-            </div>
-            
-<!-- Product Page Group -->
-            <div class="mb-4">
-              <div class="flex items-center gap-2 mb-4">
-                <svg
-                  class="w-4 h-4 text-base-content/50"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-                  <line x1="3" y1="9" x2="21" y2="9"></line>
-                </svg>
-                <span class="text-sm font-semibold text-base-content">Product page</span>
-              </div>
-
-              <div class="mb-4">
-                <label class="flex items-center gap-3 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={@theme_settings.pdp_trust_badges}
-                    phx-click="toggle_setting"
-                    phx-value-field="pdp_trust_badges"
-                    class="admin-checkbox admin-checkbox-sm"
-                  />
-                  <span class="text-sm text-base-content">Trust badges</span>
-                </label>
-              </div>
-
-              <div class="mb-4">
-                <label class="flex items-center gap-3 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={@theme_settings.pdp_reviews}
-                    phx-click="toggle_setting"
-                    phx-value-field="pdp_reviews"
-                    class="admin-checkbox admin-checkbox-sm"
-                  />
-                  <span class="text-sm text-base-content">Reviews section</span>
-                </label>
-              </div>
-
-              <div class="mb-4">
-                <label class="flex items-center gap-3 cursor-pointer">
-                  <input
-                    type="checkbox"
-                    checked={@theme_settings.pdp_related_products}
-                    phx-click="toggle_setting"
-                    phx-value-field="pdp_related_products"
-                    class="admin-checkbox admin-checkbox-sm"
-                  />
-                  <span class="text-sm text-base-content">Related products</span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </details>
-        
-<!-- Current Combination Display -->
-        <div class="bg-base-200 rounded-xl p-4 mt-6">
-          <div class="text-xs font-semibold uppercase tracking-wider text-base-content/50 mb-2">
-            Current combination
-          </div>
-          <div class="text-sm text-base-content leading-relaxed">
-            {String.capitalize(@theme_settings.mood)} · {String.capitalize(
-              @theme_settings.typography
-            )} · {String.capitalize(@theme_settings.shape)} · {String.capitalize(
-              @theme_settings.density
-            )} · {@theme_settings.grid_columns}-up · {String.capitalize(
-              @theme_settings.header_layout
-            )}
-          </div>
-          <div class="text-xs text-base-content/40 mt-2">
-            One of 100,000+ possible combinations
-          </div>
+          <%= for err <- upload_errors(@uploads.header_upload) do %>
+            <p class="theme-error-text">{error_to_string(err)}</p>
+          <% end %>
         </div>
       <% end %>
-    </div>
-    
-<!-- Preview Area -->
-    <div class="flex-1 p-6 flex flex-col overflow-hidden bg-base-200">
-      <div class="max-w-[1200px] mx-auto w-full flex flex-col flex-1 min-h-0 overflow-hidden">
-        <!-- Preview Page Switcher -->
-        <div class="flex gap-1 mb-3 bg-base-300 p-1 rounded-lg w-fit flex-shrink-0">
-          <%= for {page_name, label} <- [
-            {:home, "Home"},
-            {:collection, "Collection"},
-            {:pdp, "Product"},
-            {:cart, "Cart"},
-            {:about, "About"},
-            {:delivery, "Delivery"},
-            {:privacy, "Privacy"},
-            {:terms, "Terms"},
-            {:contact, "Contact"},
-            {:error, "404"}
-          ] do %>
+
+<!-- Presets Section -->
+      <div style="margin-bottom: 1.5rem;">
+        <label class="theme-section-label">Start with a preset</label>
+        <div class="theme-presets">
+          <%= for {preset_name, description} <- @presets_with_descriptions do %>
             <button
               type="button"
-              phx-click="change_preview_page"
-              phx-value-page={page_name}
+              phx-click="apply_preset"
+              phx-value-preset={preset_name}
               class={[
-                "px-4 py-2 text-sm font-medium rounded transition-all",
-                if(@preview_page == page_name,
-                  do: "bg-base-100 text-base-content shadow-sm",
-                  else: "text-base-content/70 hover:text-base-content"
-                )
+                "theme-preset",
+                @active_preset == preset_name && "theme-preset-active"
               ]}
             >
-              {label}
+              <div class="theme-preset-name">{preset_name}</div>
+              <div class="theme-preset-desc">{description}</div>
             </button>
           <% end %>
         </div>
-        
-<!-- Browser Chrome -->
-        <div class="flex items-center bg-gradient-to-b from-base-300 to-base-300/80 border border-base-content/20 border-b-base-content/30 rounded-t-[10px] px-[14px] py-[10px] gap-[14px] flex-shrink-0">
-          <div class="flex gap-2">
-            <div class="w-3 h-3 rounded-full bg-[#ff5f57] border border-[#e14640]"></div>
-            <div class="w-3 h-3 rounded-full bg-[#ffbd2e] border border-[#dfa123]"></div>
-            <div class="w-3 h-3 rounded-full bg-[#28c940] border border-[#1aab29]"></div>
-          </div>
-          <div class="flex-1 flex items-center gap-2 bg-base-100 border border-base-content/20 rounded-md px-3 py-[5px]">
-            <svg
-              class="w-[14px] h-[14px] text-base-content/50"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-            >
-              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-              <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
-            </svg>
-            <span class="text-sm text-base-content/60 truncate">
-              {@theme_settings.site_name |> String.downcase() |> String.replace(" ", "")}.myshopify.com
-            </span>
-          </div>
-        </div>
-        
-<!-- Preview Frame -->
-        <div
-          class="themed overflow-auto flex-1 rounded-b-lg border border-t-0 border-base-content/20"
-          data-mood={@theme_settings.mood}
-          data-typography={@theme_settings.typography}
-          data-shape={@theme_settings.shape}
-          data-density={@theme_settings.density}
-          data-grid={@theme_settings.grid_columns}
-          data-header={@theme_settings.header_layout}
-          data-sticky={to_string(@theme_settings.sticky_header)}
-          data-layout={@theme_settings.layout_width}
-          data-shadow={@theme_settings.card_shadow}
-          data-button-style={@theme_settings.button_style}
-        >
-          <style>
-            /* All font faces for theme switching */
-            <%= Phoenix.HTML.raw(Berrypod.Theme.Fonts.generate_all_font_faces(
-                  &BerrypodWeb.Endpoint.static_path/1
-                )) %>
-            /* Generated theme CSS */
-            <%= Phoenix.HTML.raw(@generated_css) %>
-          </style>
+      </div>
 
-          <.preview_page
-            page={@preview_page}
-            preview_data={@preview_data}
-            theme_settings={@theme_settings}
-            logo_image={@logo_image}
-            header_image={@header_image}
-            cart_drawer_open={@cart_drawer_open}
-          />
+<!-- Accent Colors -->
+      <div style="margin-bottom: 1.5rem;">
+        <label class="theme-section-label">Accent colour</label>
+        <form
+          id="accent-color-form"
+          phx-change="update_color"
+          phx-value-field="accent_color"
+          phx-hook="ColorSync"
+        >
+          <div class="theme-color-row">
+            <input
+              type="color"
+              id="accent-color-picker"
+              name="value"
+              value={@theme_settings.accent_color}
+              class="theme-color-swatch"
+            />
+            <span class="theme-color-value">{@theme_settings.accent_color}</span>
+          </div>
+        </form>
+      </div>
+
+      <div style="margin-bottom: 1.5rem;">
+        <label class="theme-section-label">Hover colour</label>
+        <form
+          id="secondary-accent-color-form"
+          phx-change="update_color"
+          phx-value-field="secondary_accent_color"
+          phx-hook="ColorSync"
+        >
+          <div class="theme-color-row">
+            <input
+              type="color"
+              id="secondary-accent-color-picker"
+              name="value"
+              value={@theme_settings.secondary_accent_color}
+              class="theme-color-swatch"
+            />
+            <span class="theme-color-value">{@theme_settings.secondary_accent_color}</span>
+          </div>
+        </form>
+      </div>
+
+      <div style="margin-bottom: 1.5rem;">
+        <label class="theme-section-label">Sale colour</label>
+        <form
+          id="sale-color-form"
+          phx-change="update_color"
+          phx-value-field="sale_color"
+          phx-hook="ColorSync"
+        >
+          <div class="theme-color-row">
+            <input
+              type="color"
+              id="sale-color-picker"
+              name="value"
+              value={@theme_settings.sale_color}
+              class="theme-color-swatch"
+            />
+            <span class="theme-color-value">{@theme_settings.sale_color}</span>
+          </div>
+        </form>
+      </div>
+
+<!-- Customise Section -->
+      <details
+        class="theme-customise"
+        id="customise-section"
+        open={@customise_open}
+      >
+        <summary class="theme-customise-summary" phx-click="toggle_customise">
+          <span class="theme-customise-label">Customise</span>
+          <svg
+            class="theme-customise-chevron"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </summary>
+
+        <div style="padding-top: 1rem;">
+          <!-- Typography Group -->
+          <div class="theme-group">
+            <div class="theme-group-header">
+              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="4 7 4 4 20 4 20 7"></polyline>
+                <line x1="9" y1="20" x2="15" y2="20"></line>
+                <line x1="12" y1="4" x2="12" y2="20"></line>
+              </svg>
+              <span class="theme-group-title">Typography</span>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Font style</label>
+              <div class="theme-chips">
+                <%= for typo <- ["clean", "editorial", "modern", "classic", "friendly", "minimal"] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="typography"
+                    phx-value-setting_value={typo}
+                    class={["theme-chip", @theme_settings.typography == typo && "theme-chip-active"]}
+                  >
+                    {typo}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Font size</label>
+              <div class="theme-chips">
+                <%= for {value, label} <- [{"small", "Small"}, {"medium", "Medium"}, {"large", "Large"}] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="font_size"
+                    phx-value-setting_value={value}
+                    class={["theme-chip", @theme_settings.font_size == value && "theme-chip-active"]}
+                  >
+                    {label}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Heading weight</label>
+              <div class="theme-chips">
+                <%= for {value, label} <- [{"regular", "Regular"}, {"medium", "Medium"}, {"bold", "Bold"}] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="heading_weight"
+                    phx-value-setting_value={value}
+                    class={["theme-chip", @theme_settings.heading_weight == value && "theme-chip-active"]}
+                  >
+                    {label}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+          </div>
+
+<!-- Colours Group -->
+          <div class="theme-group">
+            <div class="theme-group-header">
+              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10"></circle>
+                <circle cx="12" cy="12" r="3"></circle>
+              </svg>
+              <span class="theme-group-title">Colours</span>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Colour mood</label>
+              <div class="theme-chips">
+                <%= for mood <- ["warm", "neutral", "cool", "dark"] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="mood"
+                    phx-value-setting_value={mood}
+                    class={["theme-chip", @theme_settings.mood == mood && "theme-chip-active"]}
+                  >
+                    {mood}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+          </div>
+
+<!-- Layout Group -->
+          <div class="theme-group">
+            <div class="theme-group-header">
+              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                <line x1="3" y1="9" x2="21" y2="9"></line>
+                <line x1="9" y1="21" x2="9" y2="9"></line>
+              </svg>
+              <span class="theme-group-title">Layout</span>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Product grid</label>
+              <div class="theme-chips">
+                <%= for cols <- ["2", "3", "4"] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="grid_columns"
+                    phx-value-setting_value={cols}
+                    class={["theme-chip", @theme_settings.grid_columns == cols && "theme-chip-active"]}
+                  >
+                    {cols} columns
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Density</label>
+              <div class="theme-chips">
+                <%= for density <- ["spacious", "balanced", "compact"] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="density"
+                    phx-value-setting_value={density}
+                    class={["theme-chip", @theme_settings.density == density && "theme-chip-active"]}
+                  >
+                    {density}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Header layout</label>
+              <div class="theme-chips">
+                <%= for layout <- ["standard", "centered", "left"] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="header_layout"
+                    phx-value-setting_value={layout}
+                    class={["theme-chip", @theme_settings.header_layout == layout && "theme-chip-active"]}
+                  >
+                    {layout}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="admin-check-label">
+                <input
+                  type="checkbox"
+                  checked={@theme_settings.announcement_bar}
+                  phx-click="toggle_setting"
+                  phx-value-field="announcement_bar"
+                  class="admin-checkbox admin-checkbox-sm"
+                />
+                <span style="font-size: 0.875rem;">Announcement bar</span>
+              </label>
+            </div>
+
+            <div class="theme-field">
+              <label class="admin-check-label">
+                <input
+                  type="checkbox"
+                  checked={@theme_settings.sticky_header}
+                  phx-click="toggle_setting"
+                  phx-value-field="sticky_header"
+                  class="admin-checkbox admin-checkbox-sm"
+                />
+                <span style="font-size: 0.875rem;">Sticky header</span>
+              </label>
+            </div>
+          </div>
+
+<!-- Shape Group -->
+          <div style="margin-bottom: 1rem;">
+            <div class="theme-group-header">
+              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+              </svg>
+              <span class="theme-group-title">Shape</span>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Corner style</label>
+              <div class="theme-chips">
+                <%= for shape <- ["sharp", "soft", "round", "pill"] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="shape"
+                    phx-value-setting_value={shape}
+                    class={["theme-chip", @theme_settings.shape == shape && "theme-chip-active"]}
+                  >
+                    {shape}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Card shadow</label>
+              <div class="theme-chips">
+                <%= for {value, label} <- [{"none", "None"}, {"sm", "Subtle"}, {"md", "Medium"}, {"lg", "Strong"}] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="card_shadow"
+                    phx-value-setting_value={value}
+                    class={["theme-chip", @theme_settings.card_shadow == value && "theme-chip-active"]}
+                  >
+                    {label}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Button style</label>
+              <div class="theme-chips">
+                <%= for {value, label} <- [{"filled", "Filled"}, {"outline", "Outline"}, {"soft", "Soft"}] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="button_style"
+                    phx-value-setting_value={value}
+                    class={["theme-chip", @theme_settings.button_style == value && "theme-chip-active"]}
+                  >
+                    {label}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+          </div>
+
+<!-- Products Group -->
+          <div class="theme-group">
+            <div class="theme-group-header">
+              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="7" height="7"></rect>
+                <rect x="14" y="3" width="7" height="7"></rect>
+                <rect x="14" y="14" width="7" height="7"></rect>
+                <rect x="3" y="14" width="7" height="7"></rect>
+              </svg>
+              <span class="theme-group-title">Products</span>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Content width</label>
+              <div class="theme-chips">
+                <%= for width <- ["contained", "wide", "full"] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="layout_width"
+                    phx-value-setting_value={width}
+                    class={["theme-chip", @theme_settings.layout_width == width && "theme-chip-active"]}
+                  >
+                    {width}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Image aspect ratio</label>
+              <div class="theme-chips">
+                <%= for {value, label} <- [{"square", "Square"}, {"portrait", "Portrait"}, {"landscape", "Landscape"}] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="image_aspect_ratio"
+                    phx-value-setting_value={value}
+                    class={["theme-chip", @theme_settings.image_aspect_ratio == value && "theme-chip-active"]}
+                  >
+                    {label}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="theme-section-label">Product text alignment</label>
+              <div class="theme-chips">
+                <%= for {value, label} <- [{"left", "Left"}, {"center", "Centre"}] do %>
+                  <button
+                    type="button"
+                    phx-click="update_setting"
+                    phx-value-field="product_text_align"
+                    phx-value-setting_value={value}
+                    class={["theme-chip", @theme_settings.product_text_align == value && "theme-chip-active"]}
+                  >
+                    {label}
+                  </button>
+                <% end %>
+              </div>
+            </div>
+
+            <div class="theme-field">
+              <label class="admin-check-label">
+                <input
+                  type="checkbox"
+                  checked={@theme_settings.hover_image}
+                  phx-click="toggle_setting"
+                  phx-value-field="hover_image"
+                  class="admin-checkbox admin-checkbox-sm"
+                />
+                <span style="font-size: 0.875rem;">Second image on hover</span>
+              </label>
+            </div>
+
+            <div class="theme-field">
+              <label class="admin-check-label">
+                <input
+                  type="checkbox"
+                  checked={@theme_settings.show_prices}
+                  phx-click="toggle_setting"
+                  phx-value-field="show_prices"
+                  class="admin-checkbox admin-checkbox-sm"
+                />
+                <span style="font-size: 0.875rem;">Show prices</span>
+              </label>
+            </div>
+          </div>
+
+<!-- Product Page Group -->
+          <div style="margin-bottom: 1rem;">
+            <div class="theme-group-header">
+              <svg class="theme-group-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                <line x1="3" y1="9" x2="21" y2="9"></line>
+              </svg>
+              <span class="theme-group-title">Product page</span>
+            </div>
+
+            <div class="theme-field">
+              <label class="admin-check-label">
+                <input
+                  type="checkbox"
+                  checked={@theme_settings.pdp_trust_badges}
+                  phx-click="toggle_setting"
+                  phx-value-field="pdp_trust_badges"
+                  class="admin-checkbox admin-checkbox-sm"
+                />
+                <span style="font-size: 0.875rem;">Trust badges</span>
+              </label>
+            </div>
+
+            <div class="theme-field">
+              <label class="admin-check-label">
+                <input
+                  type="checkbox"
+                  checked={@theme_settings.pdp_reviews}
+                  phx-click="toggle_setting"
+                  phx-value-field="pdp_reviews"
+                  class="admin-checkbox admin-checkbox-sm"
+                />
+                <span style="font-size: 0.875rem;">Reviews section</span>
+              </label>
+            </div>
+
+            <div class="theme-field">
+              <label class="admin-check-label">
+                <input
+                  type="checkbox"
+                  checked={@theme_settings.pdp_related_products}
+                  phx-click="toggle_setting"
+                  phx-value-field="pdp_related_products"
+                  class="admin-checkbox admin-checkbox-sm"
+                />
+                <span style="font-size: 0.875rem;">Related products</span>
+              </label>
+            </div>
+          </div>
         </div>
+      </details>
+
+<!-- Current Combination Display -->
+      <div class="theme-combination">
+        <div class="theme-combination-label">Current combination</div>
+        <div class="theme-combination-value">
+          {String.capitalize(@theme_settings.mood)} · {String.capitalize(
+            @theme_settings.typography
+          )} · {String.capitalize(@theme_settings.shape)} · {String.capitalize(
+            @theme_settings.density
+          )} · {@theme_settings.grid_columns}-up · {String.capitalize(
+            @theme_settings.header_layout
+          )}
+        </div>
+        <div class="theme-combination-footnote">
+          One of 100,000+ possible combinations
+        </div>
+      </div>
+    <% end %>
+  </div>
+
+<!-- Preview Area -->
+  <div class="theme-preview-area">
+    <div class="theme-preview-container">
+      <!-- Preview Page Switcher -->
+      <div class="theme-preview-tabs">
+        <%= for {page_name, label} <- [
+          {:home, "Home"},
+          {:collection, "Collection"},
+          {:pdp, "Product"},
+          {:cart, "Cart"},
+          {:about, "About"},
+          {:delivery, "Delivery"},
+          {:privacy, "Privacy"},
+          {:terms, "Terms"},
+          {:contact, "Contact"},
+          {:error, "404"}
+        ] do %>
+          <button
+            type="button"
+            phx-click="change_preview_page"
+            phx-value-page={page_name}
+            class={[
+              "theme-preview-tab",
+              @preview_page == page_name && "theme-preview-tab-active"
+            ]}
+          >
+            {label}
+          </button>
+        <% end %>
+      </div>
+
+<!-- Browser Chrome -->
+      <div class="theme-browser-chrome">
+        <div class="theme-browser-dots">
+          <div class="theme-browser-dot theme-browser-dot-close"></div>
+          <div class="theme-browser-dot theme-browser-dot-min"></div>
+          <div class="theme-browser-dot theme-browser-dot-max"></div>
+        </div>
+        <div class="theme-browser-url">
+          <svg class="theme-browser-url-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+          </svg>
+          <span class="theme-browser-url-text truncate">
+            {@theme_settings.site_name |> String.downcase() |> String.replace(" ", "")}.myshopify.com
+          </span>
+        </div>
+      </div>
+
+<!-- Preview Frame -->
+      <div
+        class="themed theme-preview-frame"
+        data-mood={@theme_settings.mood}
+        data-typography={@theme_settings.typography}
+        data-shape={@theme_settings.shape}
+        data-density={@theme_settings.density}
+        data-grid={@theme_settings.grid_columns}
+        data-header={@theme_settings.header_layout}
+        data-sticky={to_string(@theme_settings.sticky_header)}
+        data-layout={@theme_settings.layout_width}
+        data-shadow={@theme_settings.card_shadow}
+        data-button-style={@theme_settings.button_style}
+      >
+        <style>
+          /* All font faces for theme switching */
+          <%= Phoenix.HTML.raw(Berrypod.Theme.Fonts.generate_all_font_faces(
+                &BerrypodWeb.Endpoint.static_path/1
+              )) %>
+          /* Generated theme CSS */
+          <%= Phoenix.HTML.raw(@generated_css) %>
+        </style>
+
+        <.preview_page
+          page={@preview_page}
+          preview_data={@preview_data}
+          theme_settings={@theme_settings}
+          logo_image={@logo_image}
+          header_image={@header_image}
+          cart_drawer_open={@cart_drawer_open}
+        />
       </div>
     </div>
   </div>