diff --git a/frontend/src/components/model/ModelQuickSelect.tsx b/frontend/src/components/model/ModelQuickSelect.tsx
index bf74e9d0..3efd799e 100644
--- a/frontend/src/components/model/ModelQuickSelect.tsx
+++ b/frontend/src/components/model/ModelQuickSelect.tsx
@@ -453,17 +453,17 @@ export function ModelQuickSelect({
     return (
       <div
         key={item.key}
-        className={`group flex w-full items-center gap-2 rounded-xl py-2 text-left transition-colors hover:bg-white/5 ${isSelected ? 'bg-orange-500/10' : ''}`}
+        className={`group flex w-full items-center gap-2 rounded-xl py-2 text-left transition-colors hover:bg-accent ${isSelected ? 'bg-orange-500/10' : ''}`}
       >
         <button
           type="button"
           onClick={() => handleModelSelect(item.providerID, item.modelID)}
           className="min-w-0 flex-1 px-2 text-left"
         >
-          <span className="block truncate text-sm font-medium text-white">
+          <span className="block truncate text-sm font-medium text-foreground">
             {getPrimaryLabel(item)}
           </span>
-          <span className="mt-0.5 block truncate text-xs text-white/50">
+          <span className="mt-0.5 block truncate text-xs text-muted-foreground">
             {getDescription(item)}
           </span>
         </button>
@@ -474,7 +474,7 @@ export function ModelQuickSelect({
               event.stopPropagation()
               removeRecentModel({ providerID: item.providerID, modelID: item.modelID })
             }}
-            className="rounded-full p-1.5 text-white/30 hover:bg-white/10 hover:text-white/70"
+            className="rounded-full p-1.5 text-muted-foreground/50 hover:bg-accent hover:text-foreground/70"
             aria-label="Remove from recent"
           >
             <Trash2 className="h-3.5 w-3.5 text-red-400" />
@@ -486,7 +486,7 @@ export function ModelQuickSelect({
             event.stopPropagation()
             toggleFavorite({ providerID: item.providerID, modelID: item.modelID })
           }}
-          className="rounded-full p-1.5 text-white/50 transition-opacity hover:bg-white/10 hover:text-white"
+          className="rounded-full p-1.5 text-muted-foreground transition-opacity hover:bg-accent hover:text-foreground"
           aria-label={isFavorite ? 'Remove from favorites' : 'Add to favorites'}
         >
           <Star className={`h-4 w-4 ${isFavorite ? 'fill-yellow-400 text-yellow-400' : ''}`} />
@@ -504,13 +504,13 @@ export function ModelQuickSelect({
         key={provider.id}
         type="button"
         onClick={() => handleProviderSelect(provider.id)}
-        className="flex w-full items-center gap-3 rounded-xl py-2.5 text-left transition-colors hover:bg-white/5"
+        className="flex w-full items-center gap-3 rounded-xl py-2.5 text-left transition-colors hover:bg-accent"
       >
         <span className="min-w-0 flex-1">
-          <span className="block truncate text-sm font-medium text-white">{provider.label}</span>
-          <span className="mt-0.5 block truncate text-xs text-white/50">{provider.count} {provider.count === 1 ? 'model' : 'models'}</span>
+          <span className="block truncate text-sm font-medium text-foreground">{provider.label}</span>
+          <span className="mt-0.5 block truncate text-xs text-muted-foreground">{provider.count} {provider.count === 1 ? 'model' : 'models'}</span>
         </span>
-        <ChevronRight className="h-5 w-5 shrink-0 text-white/40" />
+        <ChevronRight className="h-5 w-5 shrink-0 text-muted-foreground" />
       </button>
     )
   }
@@ -559,7 +559,7 @@ export function ModelQuickSelect({
         isOpen={isOpen}
         onClose={() => handleOpenChange(false)}
         heightClass="h-[70dvh] max-h-[720px]"
-        className="z-[300] border-white/10 bg-zinc-950 text-white shadow-2xl md:mx-auto md:max-w-lg"
+        className="z-[300] border-border bg-popover text-foreground shadow-2xl md:mx-auto md:max-w-lg"
         ariaLabel="Select model"
       >
         <div className={`flex items-center justify-between gap-2 px-4 ${showAllModels ? 'pb-2 pt-2' : 'pb-3 pt-0'}`}>
@@ -568,18 +568,18 @@ export function ModelQuickSelect({
               <button
                 type="button"
                 onClick={handleMoreModelsBack}
-                className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/80 hover:bg-white/10"
+                className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground hover:bg-accent"
                 aria-label="Back to quick models"
               >
                 <ChevronLeft className="h-5 w-5" />
               </button>
               <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" />
+                <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                 <Input
                   value={searchQuery}
                   onChange={(event) => setSearchQuery(event.target.value)}
                   placeholder={selectedProviderId ? 'Search models...' : 'Search providers...'}
-                  className="h-9 border-white/10 bg-white/5 pl-9 text-sm text-white placeholder:text-white/40"
+                  className="h-9 border-border bg-muted pl-9 text-sm text-foreground placeholder:text-muted-foreground"
                   autoComplete="off"
                   name="model-search"
                 />
@@ -590,7 +590,7 @@ export function ModelQuickSelect({
               <button
                 type="button"
                 onClick={() => handleOpenChange(false)}
-                className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-white/80 hover:bg-white/10"
+                className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground hover:bg-accent"
                 aria-label="Close model selector"
               >
                 <X className="h-5 w-5" />
@@ -600,7 +600,7 @@ export function ModelQuickSelect({
                   {selectedModelLabel}
                   <span className="ml-1.5 inline-block h-2 w-2 rounded-full bg-orange-500" />
                 </h2>
-                <p className="truncate text-xs text-white/45">
+                <p className="truncate text-xs text-muted-foreground">
                   {currentVariant ? `${selectedModelDescription} · ${currentVariant}` : selectedModelDescription}
                 </p>
               </div>
@@ -610,11 +610,11 @@ export function ModelQuickSelect({
                     <button
                       type="button"
                       disabled={!model && !hasVariants}
-                      className="flex h-9 w-24 items-center justify-center gap-1 rounded-md border border-white/10 bg-white/5 px-1.5 text-sm font-medium capitalize text-white/70 hover:bg-white/10 disabled:opacity-30"
+                      className="flex h-9 w-24 items-center justify-center gap-1 rounded-md border border-border bg-muted px-1.5 text-sm font-medium capitalize text-muted-foreground hover:bg-accent disabled:opacity-30"
                       aria-label={`Current variant: ${selectedVariantLabel}`}
                     >
                       <span className="truncate">{selectedVariantLabel}</span>
-                      <ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/40" />
+                      <ChevronDown className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                     </button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end" className="z-[350] min-w-56">
@@ -629,11 +629,11 @@ export function ModelQuickSelect({
         {showAllModels ? (
           <div className="flex-1 flex overflow-hidden min-h-0">
             {/* Provider sidebar — desktop only */}
-            <div className="hidden md:flex md:flex-col w-48 lg:w-56 border-r border-white/10 overflow-y-auto flex-shrink-0">
+            <div className="hidden md:flex md:flex-col w-48 lg:w-56 border-r border-border overflow-y-auto flex-shrink-0">
               <div className="p-3 space-y-1">
                 {connectedProviderItems.length > 0 && (
                   <>
-                    <p className="px-3 pb-1 text-xs font-medium text-white/45">Connected</p>
+                    <p className="px-3 pb-1 text-xs font-medium text-muted-foreground">Connected</p>
                     {connectedProviderItems.map(provider => (
                       <button
                         key={provider.id}
@@ -642,19 +642,19 @@ export function ModelQuickSelect({
                         className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
                           selectedProviderId === provider.id
                             ? 'bg-orange-500/20 text-orange-300 font-medium'
-                            : 'text-white/70 hover:bg-white/5'
+                            : 'text-muted-foreground hover:bg-accent'
                         }`}
                       >
                         <div className="truncate">{provider.label}</div>
-                        <div className="text-xs text-white/40">{provider.count} {provider.count === 1 ? 'model' : 'models'}</div>
+                        <div className="text-xs text-muted-foreground/70">{provider.count} {provider.count === 1 ? 'model' : 'models'}</div>
                       </button>
                     ))}
-                    {availableProviderItems.length > 0 && <div className="mx-3 my-1 h-px bg-white/10" />}
+                    {availableProviderItems.length > 0 && <div className="mx-3 my-1 h-px bg-border" />}
                   </>
                 )}
                 {availableProviderItems.length > 0 && (
                   <>
-                    <p className="px-3 pb-1 text-xs font-medium text-white/45">Available</p>
+                    <p className="px-3 pb-1 text-xs font-medium text-muted-foreground">Available</p>
                     {availableProviderItems.map(provider => (
                       <button
                         key={provider.id}
@@ -663,11 +663,11 @@ export function ModelQuickSelect({
                         className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
                           selectedProviderId === provider.id
                             ? 'bg-orange-500/20 text-orange-300 font-medium'
-                            : 'text-white/70 hover:bg-white/5'
+                            : 'text-muted-foreground hover:bg-accent'
                         }`}
                       >
                         <div className="truncate">{provider.label}</div>
-                        <div className="text-xs text-white/40">{provider.count} {provider.count === 1 ? 'model' : 'models'}</div>
+                        <div className="text-xs text-muted-foreground/70">{provider.count} {provider.count === 1 ? 'model' : 'models'}</div>
                       </button>
                     ))}
                   </>
@@ -707,20 +707,20 @@ export function ModelQuickSelect({
                     <div className="space-y-1">
                       {connectedProviderItems.length > 0 && (
                         <>
-                          <p className="px-1 pb-1 text-xs font-medium text-white/45">Connected</p>
+                          <p className="px-1 pb-1 text-xs font-medium text-muted-foreground">Connected</p>
                           {connectedProviderItems.map(renderProviderOption)}
-                          {availableProviderItems.length > 0 && <div className="-mx-4 my-2 h-px bg-white/10" />}
+                          {availableProviderItems.length > 0 && <div className="-mx-4 my-2 h-px bg-border" />}
                         </>
                       )}
                       {availableProviderItems.length > 0 && (
                         <>
-                          <p className="px-1 pb-1 text-xs font-medium text-white/45">Available</p>
+                          <p className="px-1 pb-1 text-xs font-medium text-muted-foreground">Available</p>
                           {availableProviderItems.map(renderProviderOption)}
                         </>
                       )}
                     </div>
                     {filteredProviderItems.length === 0 && (
-                      <div className="py-10 text-center text-sm text-white/50">No providers found</div>
+                      <div className="py-10 text-center text-sm text-muted-foreground">No providers found</div>
                     )}
                   </div>
                 )}
@@ -732,7 +732,7 @@ export function ModelQuickSelect({
             <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-4 pb-3">
               {quickSections.map(section => (
                 <section key={section.title}>
-                  <h3 className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-white/45">
+                  <h3 className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                     {section.icon}
                     {section.title}
                   </h3>
@@ -742,14 +742,14 @@ export function ModelQuickSelect({
                 </section>
               ))}
             </div>
-            <div className="flex-shrink-0 border-t border-white/10">
+            <div className="flex-shrink-0 border-t border-border">
               <button
                 type="button"
                 onClick={() => setShowAllModels(true)}
-                className="flex w-full items-center justify-between bg-card px-6 py-4 text-left text-sm font-semibold text-white transition-colors hover:bg-accent active:bg-card"
+                className="flex w-full items-center justify-between bg-card px-6 py-4 text-left text-sm font-semibold text-foreground transition-colors hover:bg-accent active:bg-card"
               >
                 <span>More models</span>
-                <ChevronRight className="h-5 w-5 text-white/50" />
+                <ChevronRight className="h-5 w-5 text-muted-foreground" />
               </button>
             </div>
           </div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 42b3f4cc..ab1dfaf0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -46,7 +46,7 @@ html {
   overscroll-behavior-x: none;
 }
 
-:root:not(.dark) html {
+html:not(.dark) {
   background-color: #ffffff;
 }
 
@@ -147,7 +147,7 @@ body {
 }
 
 .shine-loading {
-  background: linear-gradient(90deg, 
+  background: linear-gradient(90deg,
     rgba(255, 255, 255, 0.2) 0%,
     rgba(255, 255, 255, 0.2) 40%,
     rgba(255, 255, 255, 0.4) 50%,
@@ -163,6 +163,23 @@ body {
   animation: shine-loading 3s linear infinite;
 }
 
+:root:not(.dark) .shine-loading {
+  background: linear-gradient(90deg,
+    rgba(0, 0, 0, 0.3) 0%,
+    rgba(0, 0, 0, 0.3) 40%,
+    rgba(0, 0, 0, 0.5) 50%,
+    rgba(0, 0, 0, 0.7) 60%,
+    rgba(0, 0, 0, 0.85) 70%,
+    rgba(0, 0, 0, 1) 80%,
+    rgba(0, 0, 0, 0.3) 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: shine-loading 3s linear infinite;
+}
+
 .prose-enhanced {
   line-height: 1.7;
   word-break: break-word;
diff --git a/frontend/src/pages/AssistantRedirect.tsx b/frontend/src/pages/AssistantRedirect.tsx
index 2b211434..e93f3c50 100644
--- a/frontend/src/pages/AssistantRedirect.tsx
+++ b/frontend/src/pages/AssistantRedirect.tsx
@@ -58,11 +58,11 @@ export function AssistantRedirect() {
           <div className="flex items-center gap-1">
             <PendingActionsGroup />
           </div>
-          <Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} size="sm" className="hidden sm:inline-flex bg-blue-600 hover:bg-blue-700 text-white transition-all duration-200 hover:scale-105">
+          <Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} size="sm" className="hidden sm:inline-flex bg-primary hover:bg-primary-hover text-primary-foreground transition-all duration-200 hover:scale-105">
             <Plus className="w-4 h-4 mr-2" />
             <span>New Session</span>
           </Button>
-          <Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} aria-label="New Session" size="sm" className="sm:hidden h-10 w-10 p-0 bg-blue-600 hover:bg-blue-700 text-white transition-all duration-200 hover:scale-105">
+          <Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} aria-label="New Session" size="sm" className="sm:hidden h-10 w-10 p-0 bg-primary hover:bg-primary-hover text-primary-foreground transition-all duration-200 hover:scale-105">
             <Plus className="w-5 h-5" />
           </Button>
         </Header.Actions>
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index d4e898e4..90ad4b60 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -205,7 +205,7 @@ export function Login() {
                   id="email"
                   type="email"
                   placeholder=""
-                  className="border-border focus:border-primary"
+                  className="bg-input border-border focus:border-primary"
                   {...register('email')}
                   aria-invalid={!!errors.email}
                 />
@@ -219,7 +219,7 @@ export function Login() {
                   id="password"
                   type="password"
                   placeholder=""
-                  className="border-border focus:border-primary"
+                  className="bg-input border-border focus:border-primary"
                   {...register('password')}
                   aria-invalid={!!errors.password}
                 />
diff --git a/frontend/src/pages/RepoDetail.tsx b/frontend/src/pages/RepoDetail.tsx
index 04d60033..088c6957 100644
--- a/frontend/src/pages/RepoDetail.tsx
+++ b/frontend/src/pages/RepoDetail.tsx
@@ -217,7 +217,7 @@ export function RepoDetail() {
             onClick={() => handleCreateSession()}
             disabled={!opcodeUrl || createSessionMutation.isPending}
             size="sm"
-            className="sm:hidden h-10 w-10 p-0 bg-blue-600 hover:bg-blue-700 text-white transition-all duration-200 hover:scale-105"
+            className="sm:hidden h-10 w-10 p-0 bg-primary hover:bg-primary-hover text-primary-foreground transition-all duration-200 hover:scale-105"
           >
             <Plus className="w-5 h-5" />
           </Button>
@@ -351,7 +351,7 @@ function CreateWorkspaceDialog({ open, onOpenChange, onCreate, isCreating }: Cre
           <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isCreating}>
             Cancel
           </Button>
-          <Button onClick={() => { void onCreate(); }} disabled={isCreating} className="bg-blue-600 hover:bg-blue-700 text-white">
+          <Button onClick={() => { void onCreate(); }} disabled={isCreating} className="bg-primary hover:bg-primary-hover text-primary-foreground">
             {isCreating ? (
               <>
                 <Loader2 className="h-4 w-4 mr-2 animate-spin" />
diff --git a/frontend/src/pages/SessionDetail.tsx b/frontend/src/pages/SessionDetail.tsx
index c447cab3..b0b4fbc4 100644
--- a/frontend/src/pages/SessionDetail.tsx
+++ b/frontend/src/pages/SessionDetail.tsx
@@ -462,7 +462,7 @@ export function SessionDetail() {
         data-testid="session-header-region"
         className="flex-shrink-0 overflow-hidden bg-background max-h-72 sm:max-h-80"
       >
-        <Header className="bg-background [&_button]:bg-black [&_button]:text-white [&_button]:border-zinc-700 [&_button:hover]:bg-zinc-900">
+        <Header className="bg-background">
           <div className="flex items-center gap-1.5 sm:gap-3 min-w-0 flex-1">
             {session?.parentID ? (
               <>
@@ -489,7 +489,7 @@ export function SessionDetail() {
               subtitle={<span className="text-orange-600 dark:text-orange-400">{workspaceDisplayName}</span>}
             />
           </div>
-          <Header.Actions className="gap-2 sm:gap-4">
+          <Header.Actions className="gap-2 sm:gap-4 [&_button]:bg-secondary [&_button]:text-secondary-foreground [&_button]:border-border [&_button:hover]:bg-accent">
             <div className="flex items-center gap-1">
               <PendingActionsGroup />
             </div>