From e3edbc64f2ea101b979bddbecce15a4f5f9b9445 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sun, 15 Feb 2026 21:07:49 -0500
Subject: [PATCH] refactor: migrate common components to new design system

Migrate 15 components from monochrome glass-card design to purple gradient
accent design system tokens (bg-card, border-border, text-foreground,
bg-gradient-brand, etc.)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/common/ActionMenu.tsx | 10 +--
 .../src/components/common/ConfirmDialog.tsx   |  8 +-
 .../src/components/common/ErrorBoundary.tsx   |  8 +-
 .../components/library/FolderEditModal.tsx    | 32 ++++----
 .../src/components/library/ShareTreeModal.tsx | 50 ++++++-------
 .../src/components/library/TreeGridView.tsx   | 28 +++----
 .../src/components/library/TreeListView.tsx   | 28 +++----
 .../session/SaveSessionAsTreeModal.tsx        | 46 ++++++------
 .../src/components/session/SessionFilters.tsx | 74 +++++++++----------
 .../components/session/SessionTimeline.tsx    | 46 ++++++------
 .../session/SharedSessionTreePreview.tsx      | 16 ++--
 .../components/session/StepRatingModal.tsx    | 46 ++++++------
 .../session/VariablePromptModal.tsx           | 20 ++---
 .../src/components/tree-editor/NodePicker.tsx | 30 ++++----
 .../tree-editor/TreeMetadataForm.tsx          | 46 ++++++------
 15 files changed, 244 insertions(+), 244 deletions(-)

diff --git a/frontend/src/components/common/ActionMenu.tsx b/frontend/src/components/common/ActionMenu.tsx
index f7f5a20d..d4058f28 100644
--- a/frontend/src/components/common/ActionMenu.tsx
+++ b/frontend/src/components/common/ActionMenu.tsx
@@ -53,8 +53,8 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          'rounded-md border border-white/10 p-2 text-white/60',
-          'hover:bg-white/10 hover:text-white'
+          'rounded-md border border-border p-2 text-muted-foreground',
+          'hover:bg-accent hover:text-foreground'
         )}
         aria-label="Actions"
       >
@@ -64,7 +64,7 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       {isOpen && (
         <div
           className={cn(
-            'absolute z-50 mt-1 min-w-[180px] glass-card rounded-lg p-1',
+            'absolute z-50 mt-1 min-w-[180px] bg-card border border-border rounded-lg p-1',
             align === 'right' ? 'right-0' : 'left-0'
           )}
         >
@@ -80,8 +80,8 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
                   action.disabled
                     ? 'cursor-not-allowed opacity-40'
                     : action.variant === 'destructive'
-                      ? 'text-red-400 hover:bg-white/10 hover:text-red-300'
-                      : 'text-white/70 hover:bg-white/10 hover:text-white'
+                      ? 'text-red-400 hover:bg-accent hover:text-red-300'
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                 )}
               >
                 {Icon && <Icon className="h-4 w-4" />}
diff --git a/frontend/src/components/common/ConfirmDialog.tsx b/frontend/src/components/common/ConfirmDialog.tsx
index 96a3c9ae..b5b8599d 100644
--- a/frontend/src/components/common/ConfirmDialog.tsx
+++ b/frontend/src/components/common/ConfirmDialog.tsx
@@ -34,8 +34,8 @@ export function ConfirmDialog({
             onClick={onClose}
             disabled={isLoading}
             className={cn(
-              'rounded-xl border border-white/10 px-4 py-2 text-sm font-medium',
-              'text-white/60 hover:bg-white/10 hover:text-white',
+              'rounded-xl border border-border px-4 py-2 text-sm font-medium',
+              'text-muted-foreground hover:bg-accent hover:text-foreground',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
           >
@@ -49,7 +49,7 @@ export function ConfirmDialog({
               'disabled:opacity-50 disabled:cursor-not-allowed',
               confirmVariant === 'destructive'
                 ? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 border border-red-400/20'
-                : 'bg-white text-black hover:bg-white/90'
+                : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
             )}
           >
             {isLoading ? 'Processing...' : confirmLabel}
@@ -57,7 +57,7 @@ export function ConfirmDialog({
         </div>
       }
     >
-      <p className="text-sm text-white/70">{message}</p>
+      <p className="text-sm text-muted-foreground">{message}</p>
     </Modal>
   )
 }
diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
index 764f85ee..bdee3079 100644
--- a/frontend/src/components/common/ErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -37,19 +37,19 @@ export class ErrorBoundary extends Component<Props, State> {
             <h2 className="mb-2 text-xl font-semibold text-red-400">
               Something went wrong
             </h2>
-            <p className="mb-4 text-white/70">
+            <p className="mb-4 text-muted-foreground">
               An unexpected error occurred. Please try refreshing the page.
             </p>
             {this.state.error && (
-              <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-white/[0.06] p-3 text-left text-xs text-red-400">
+              <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-border p-3 text-left text-xs text-red-400">
                 {this.state.error.message}
               </pre>
             )}
             <button
               onClick={() => window.location.reload()}
               className={cn(
-                'rounded-xl bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90'
+                'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90'
               )}
             >
               Refresh Page
diff --git a/frontend/src/components/library/FolderEditModal.tsx b/frontend/src/components/library/FolderEditModal.tsx
index a8f10f9c..55d88bff 100644
--- a/frontend/src/components/library/FolderEditModal.tsx
+++ b/frontend/src/components/library/FolderEditModal.tsx
@@ -177,12 +177,12 @@ export function FolderEditModal({
       <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
 
       {/* Modal */}
-      <div className="relative z-10 w-full max-w-md glass-card rounded-2xl p-6 shadow-lg">
+      <div className="relative z-10 w-full max-w-md bg-card border border-border rounded-2xl p-6 shadow-lg">
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-white">
+          <h2 className="text-lg font-semibold text-foreground">
             {isEditMode ? 'Edit Folder' : initialParentId ? 'Create Subfolder' : 'Create Folder'}
           </h2>
-          <button onClick={onClose} className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white">
+          <button onClick={onClose} className="rounded-md p-1 text-muted-foreground hover:bg-accent/50 hover:text-foreground">
             <X className="h-5 w-5" />
           </button>
         </div>
@@ -190,7 +190,7 @@ export function FolderEditModal({
         <form onSubmit={handleSubmit}>
           {/* Name input */}
           <div className="mb-4">
-            <label htmlFor="folder-name" className="block text-sm font-medium text-white">
+            <label htmlFor="folder-name" className="block text-sm font-medium text-foreground">
               Name
             </label>
             <input
@@ -201,9 +201,9 @@ export function FolderEditModal({
               placeholder="e.g., Citrix Issues"
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-                'bg-black/50 text-white placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-                'border-white/10'
+                'bg-card text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'border-border'
               )}
               autoFocus
             />
@@ -211,7 +211,7 @@ export function FolderEditModal({
 
           {/* Parent folder dropdown */}
           <div className="mb-4">
-            <label htmlFor="folder-parent" className="block text-sm font-medium text-white">
+            <label htmlFor="folder-parent" className="block text-sm font-medium text-foreground">
               Parent Folder
             </label>
             <select
@@ -220,9 +220,9 @@ export function FolderEditModal({
               onChange={(e) => setParentId(e.target.value || null)}
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-                'bg-black/50 text-white',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-                'border-white/10'
+                'bg-card text-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+                'border-border'
               )}
             >
               <option value="">None (root level)</option>
@@ -232,14 +232,14 @@ export function FolderEditModal({
                 </option>
               ))}
             </select>
-            <p className="mt-1 text-xs text-white/40">
+            <p className="mt-1 text-xs text-muted-foreground">
               Folders can be nested up to 3 levels deep.
             </p>
           </div>
 
           {/* Color picker */}
           <div className="mb-6">
-            <label className="block text-sm font-medium text-white">Color</label>
+            <label className="block text-sm font-medium text-foreground">Color</label>
             <div className="mt-2 flex flex-wrap gap-2">
               {FOLDER_COLORS.map((c) => (
                 <button
@@ -262,7 +262,7 @@ export function FolderEditModal({
             <button
               type="button"
               onClick={onClose}
-              className={cn('rounded-md border border-white/10 px-4 py-2 text-sm text-white/60', 'hover:bg-white/10 hover:text-white')}
+              className={cn('rounded-md border border-border px-4 py-2 text-sm text-muted-foreground', 'hover:bg-accent hover:text-foreground')}
             >
               Cancel
             </button>
@@ -270,8 +270,8 @@ export function FolderEditModal({
               type="submit"
               disabled={isSubmitting}
               className={cn(
-                'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90',
+                'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90',
                 'disabled:opacity-50'
               )}
             >
diff --git a/frontend/src/components/library/ShareTreeModal.tsx b/frontend/src/components/library/ShareTreeModal.tsx
index 311e2196..ee4be0e8 100644
--- a/frontend/src/components/library/ShareTreeModal.tsx
+++ b/frontend/src/components/library/ShareTreeModal.tsx
@@ -119,13 +119,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
       />
 
       {/* Modal */}
-      <div className="relative w-full max-w-lg glass-card rounded-2xl shadow-lg">
+      <div className="relative w-full max-w-lg bg-card border border-border rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
-          <h2 className="text-lg font-semibold text-white">Share Tree</h2>
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
+          <h2 className="text-lg font-semibold text-foreground">Share Tree</h2>
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white"
+            className="rounded-md p-1 text-muted-foreground hover:bg-accent/50 hover:text-foreground"
           >
             <X className="h-5 w-5" />
           </button>
@@ -135,9 +135,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
         <div className="px-6 py-4 space-y-6">
           {/* Tree Info */}
           <div>
-            <h3 className="font-medium text-white">{tree.name}</h3>
+            <h3 className="font-medium text-foreground">{tree.name}</h3>
             {tree.description && (
-              <p className="mt-1 text-sm text-white/70 line-clamp-2">
+              <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
                 {tree.description}
               </p>
             )}
@@ -145,7 +145,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
 
           {/* Visibility Settings */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-white">
+            <label className="mb-2 block text-sm font-medium text-foreground">
               Visibility
             </label>
             <div className="space-y-2">
@@ -156,19 +156,19 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   className={cn(
                     'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                     visibility === level
-                      ? 'border-white/20 bg-white/10 text-white'
-                      : 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
+                      ? 'border-border bg-accent text-foreground'
+                      : 'border-border bg-transparent text-muted-foreground hover:border-primary/30 hover:bg-accent/50'
                   )}
                 >
                   {getVisibilityIcon(level)}
                   <div className="flex-1">
                     <div className="text-sm font-medium capitalize">{level}</div>
-                    <div className="text-xs text-white/40">
+                    <div className="text-xs text-muted-foreground">
                       {getVisibilityDescription(level)}
                     </div>
                   </div>
                   {visibility === level && (
-                    <div className="h-2 w-2 rounded-full bg-white" />
+                    <div className="h-2 w-2 rounded-full bg-foreground" />
                   )}
                 </button>
               ))}
@@ -178,7 +178,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
           {/* Share Link Generation */}
           {visibility !== 'private' && (
             <div>
-              <label className="mb-2 block text-sm font-medium text-white">
+              <label className="mb-2 block text-sm font-medium text-foreground">
                 Share Link
               </label>
 
@@ -189,11 +189,11 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   id="allow-forking"
                   checked={allowForking}
                   onChange={(e) => setAllowForking(e.target.checked)}
-                  className="h-4 w-4 rounded border-white/10 bg-black/50 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-black"
+                  className="h-4 w-4 rounded border-border bg-card text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-black"
                 />
                 <label
                   htmlFor="allow-forking"
-                  className="text-sm text-white/70 cursor-pointer"
+                  className="text-sm text-muted-foreground cursor-pointer"
                 >
                   Allow recipients to fork this tree
                 </label>
@@ -205,8 +205,8 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   onClick={handleGenerateLink}
                   disabled={isGenerating}
                   className={cn(
-                    'w-full rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                    'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
+                    'w-full rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                    'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
                   )}
                 >
                   {isGenerating ? 'Generating...' : 'Generate Share Link'}
@@ -216,20 +216,20 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
               {/* Active Share Link */}
               {activeShare && (
                 <div className="space-y-2">
-                  <div className="flex items-center gap-2 rounded-md border border-white/10 bg-black/50 p-3">
+                  <div className="flex items-center gap-2 rounded-md border border-border bg-card p-3">
                     <input
                       type="text"
                       value={activeShare.share_url}
                       readOnly
-                      className="flex-1 bg-transparent text-sm text-white outline-none"
+                      className="flex-1 bg-transparent text-sm text-foreground outline-none"
                     />
                     <button
                       onClick={handleCopyLink}
                       className={cn(
-                        'flex items-center gap-2 rounded-md border border-white/10 px-3 py-1.5 text-sm font-medium transition-colors',
+                        'flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm font-medium transition-colors',
                         copied
                           ? 'border-green-500 bg-green-500/10 text-green-400'
-                          : 'text-white/60 hover:bg-white/10 hover:text-white'
+                          : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                       )}
                     >
                       {copied ? (
@@ -245,13 +245,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                       )}
                     </button>
                   </div>
-                  <p className="text-xs text-white/40">
+                  <p className="text-xs text-muted-foreground">
                     {activeShare.allow_forking
                       ? 'Recipients can fork this tree'
                       : 'Forking disabled for this share'}
                   </p>
                   {shares.length > 1 && (
-                    <p className="text-xs text-white/40">
+                    <p className="text-xs text-muted-foreground">
                       {shares.length} active share links
                     </p>
                   )}
@@ -262,12 +262,12 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
+        <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
           <button
             onClick={onClose}
             className={cn(
-              'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white'
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground'
             )}
           >
             Close
diff --git a/frontend/src/components/library/TreeGridView.tsx b/frontend/src/components/library/TreeGridView.tsx
index f7137b63..a6d8cb8b 100644
--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -30,11 +30,11 @@ export function TreeGridView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="glass-card rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-white/20 hover:shadow-md sm:p-6"
+          className="bg-card border border-border rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
         >
           <div className="mb-2 flex items-start justify-between gap-2">
             <div className="flex items-center gap-2">
-              <h3 className="font-semibold text-white">{tree.name}</h3>
+              <h3 className="font-semibold text-foreground">{tree.name}</h3>
               {tree.status === 'draft' && (
                 <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
                   <FileText className="h-3 w-3" />
@@ -45,21 +45,21 @@ export function TreeGridView({
             <div className="flex items-center gap-2">
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-4 w-4 text-white/40" />
+                  <Globe className="h-4 w-4 text-muted-foreground" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-4 w-4 text-white/40" />
+                  <Lock className="h-4 w-4 text-muted-foreground" />
                 </span>
               )}
               {tree.category_info && (
-                <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
+                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
                   {tree.category_info.name}
                 </span>
               )}
             </div>
           </div>
-          <p className="mb-3 text-sm text-white/70 line-clamp-2">
+          <p className="mb-3 text-sm text-muted-foreground line-clamp-2">
             {tree.description || 'No description available'}
           </p>
 
@@ -71,7 +71,7 @@ export function TreeGridView({
           )}
 
           <div className="flex items-center justify-between">
-            <span className="text-xs text-white/40">
+            <span className="text-xs text-muted-foreground">
               v{tree.version} · {tree.usage_count} uses
             </span>
             <div className="flex items-center gap-2">
@@ -81,8 +81,8 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onForkTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-white/10 p-2 text-white/60',
-                    'hover:bg-white/10 hover:text-white'
+                    'rounded-md border border-border p-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Fork tree"
                   aria-label="Fork tree"
@@ -94,8 +94,8 @@ export function TreeGridView({
                 <Link
                   to={`/trees/${tree.id}/edit`}
                   className={cn(
-                    'rounded-md border border-white/10 p-2 text-white/60',
-                    'hover:bg-white/10 hover:text-white'
+                    'rounded-md border border-border p-2 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Edit tree"
                   aria-label="Edit tree"
@@ -108,7 +108,7 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onDeleteTree(tree)}
                   className={cn(
-                    'rounded-md border border-white/10 p-1.5 text-white/60',
+                    'rounded-md border border-border p-1.5 text-muted-foreground',
                     'hover:bg-red-400/10 hover:text-red-400'
                   )}
                   title="Delete tree"
@@ -121,8 +121,8 @@ export function TreeGridView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
-                  'hover:bg-white/90'
+                  'rounded-md bg-gradient-brand px-3 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90'
                 )}
               >
                 Start Session
diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx
index e4d39825..82227b39 100644
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -30,12 +30,12 @@ export function TreeListView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="flex items-center gap-4 glass-card rounded-2xl p-4 transition-all hover:border-white/20 hover:shadow-sm"
+          className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-sm"
         >
           {/* Left: Name and Description */}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
-              <h3 className="font-semibold text-white truncate">{tree.name}</h3>
+              <h3 className="font-semibold text-foreground truncate">{tree.name}</h3>
               {tree.status === 'draft' && (
                 <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 flex-shrink-0">
                   <FileText className="h-3 w-3" />
@@ -44,15 +44,15 @@ export function TreeListView({
               )}
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
+                  <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
+                  <Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
                 </span>
               )}
             </div>
-            <p className="text-sm text-white/70 truncate">
+            <p className="text-sm text-muted-foreground truncate">
               {tree.description || 'No description available'}
             </p>
           </div>
@@ -60,7 +60,7 @@ export function TreeListView({
           {/* Center: Category and Tags */}
           <div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}>
             {tree.category_info && (
-              <span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70 whitespace-nowrap">
+              <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground whitespace-nowrap">
                 {tree.category_info.name}
               </span>
             )}
@@ -73,7 +73,7 @@ export function TreeListView({
 
           {/* Right: Metadata and Actions */}
           <div className="flex items-center gap-3 flex-shrink-0">
-            <div className="hidden sm:flex flex-col items-end text-xs text-white/40">
+            <div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
               <span>v{tree.version}</span>
               <span>{tree.usage_count} uses</span>
             </div>
@@ -85,8 +85,8 @@ export function TreeListView({
                   type="button"
                   onClick={() => onForkTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-white/10 p-1.5 text-white/60',
-                    'hover:bg-white/10 hover:text-white'
+                    'rounded-md border border-border p-1.5 text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                   title="Fork tree"
                   aria-label="Fork tree"
@@ -99,8 +99,8 @@ export function TreeListView({
                   <Link
                     to={`/trees/${tree.id}/edit`}
                     className={cn(
-                      'rounded-md border border-white/10 p-1.5 text-white/60',
-                      'hover:bg-white/10 hover:text-white'
+                      'rounded-md border border-border p-1.5 text-muted-foreground',
+                      'hover:bg-accent hover:text-foreground'
                     )}
                     title="Edit tree"
                     aria-label="Edit tree"
@@ -111,7 +111,7 @@ export function TreeListView({
                     type="button"
                     onClick={() => onDeleteTree(tree)}
                     className={cn(
-                      'rounded-md border border-white/10 p-1.5 text-white/60',
+                      'rounded-md border border-border p-1.5 text-muted-foreground',
                       'hover:bg-red-500/20 hover:text-red-400'
                     )}
                     title="Delete tree"
@@ -125,8 +125,8 @@ export function TreeListView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black',
-                  'hover:bg-white/90 whitespace-nowrap'
+                  'rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90 whitespace-nowrap'
                 )}
               >
                 Start
diff --git a/frontend/src/components/session/SaveSessionAsTreeModal.tsx b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
index 6a9c08be..fd3f841c 100644
--- a/frontend/src/components/session/SaveSessionAsTreeModal.tsx
+++ b/frontend/src/components/session/SaveSessionAsTreeModal.tsx
@@ -34,21 +34,21 @@ export function SaveSessionAsTreeModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-      <div className="glass-card w-full max-w-lg rounded-2xl p-6 shadow-lg">
+      <div className="bg-card border border-border w-full max-w-lg rounded-2xl p-6 shadow-lg">
         {/* Header */}
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-white">Save Session as Tree</h2>
+          <h2 className="text-lg font-semibold text-foreground">Save Session as Tree</h2>
           <button
             onClick={onClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-white/40 hover:bg-white/10 hover:text-white disabled:opacity-50"
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             <X className="h-5 w-5" />
           </button>
         </div>
 
         {/* Info */}
-        <p className="mb-4 text-sm text-white/70">
+        <p className="mb-4 text-sm text-muted-foreground">
           Create a new tree from this session's path. The tree will be linked to the original tree as a fork.
         </p>
 
@@ -56,8 +56,8 @@ export function SaveSessionAsTreeModal({
         <form onSubmit={handleSubmit} className="space-y-4">
           {/* Tree Name */}
           <div>
-            <label htmlFor="treeName" className="mb-1 block text-sm font-medium text-white">
-              Tree Name <span className="text-white/40">(optional)</span>
+            <label htmlFor="treeName" className="mb-1 block text-sm font-medium text-foreground">
+              Tree Name <span className="text-muted-foreground">(optional)</span>
             </label>
             <input
               id="treeName"
@@ -68,9 +68,9 @@ export function SaveSessionAsTreeModal({
               disabled={isSaving}
               maxLength={255}
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -78,8 +78,8 @@ export function SaveSessionAsTreeModal({
 
           {/* Description */}
           <div>
-            <label htmlFor="description" className="mb-1 block text-sm font-medium text-white">
-              Description <span className="text-white/40">(optional)</span>
+            <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
+              Description <span className="text-muted-foreground">(optional)</span>
             </label>
             <textarea
               id="description"
@@ -89,9 +89,9 @@ export function SaveSessionAsTreeModal({
               disabled={isSaving}
               rows={3}
               className={cn(
-                'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                'placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                'placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                 'disabled:opacity-50'
               )}
             />
@@ -99,7 +99,7 @@ export function SaveSessionAsTreeModal({
 
           {/* Status */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-white">Status</label>
+            <label className="mb-2 block text-sm font-medium text-foreground">Status</label>
             <div className="flex gap-4">
               <label className="flex cursor-pointer items-center gap-2">
                 <input
@@ -109,9 +109,9 @@ export function SaveSessionAsTreeModal({
                   checked={status === 'draft'}
                   onChange={() => setStatus('draft')}
                   disabled={isSaving}
-                  className="h-4 w-4 border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0"
+                  className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
                 />
-                <span className="text-sm text-white">Draft</span>
+                <span className="text-sm text-foreground">Draft</span>
               </label>
               <label className="flex cursor-pointer items-center gap-2">
                 <input
@@ -121,9 +121,9 @@ export function SaveSessionAsTreeModal({
                   checked={status === 'published'}
                   onChange={() => setStatus('published')}
                   disabled={isSaving}
-                  className="h-4 w-4 border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0"
+                  className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
                 />
-                <span className="text-sm text-white">Published</span>
+                <span className="text-sm text-foreground">Published</span>
               </label>
             </div>
           </div>
@@ -135,8 +135,8 @@ export function SaveSessionAsTreeModal({
               onClick={onClose}
               disabled={isSaving}
               className={cn(
-                'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-                'hover:bg-white/10 hover:text-white disabled:opacity-50'
+                'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                'hover:bg-accent hover:text-foreground disabled:opacity-50'
               )}
             >
               Cancel
@@ -145,8 +145,8 @@ export function SaveSessionAsTreeModal({
               type="submit"
               disabled={isSaving}
               className={cn(
-                'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90 disabled:opacity-50'
+                'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90 disabled:opacity-50'
               )}
             >
               {isSaving ? 'Saving...' : 'Save as Tree'}
diff --git a/frontend/src/components/session/SessionFilters.tsx b/frontend/src/components/session/SessionFilters.tsx
index 513f8dbb..30833348 100644
--- a/frontend/src/components/session/SessionFilters.tsx
+++ b/frontend/src/components/session/SessionFilters.tsx
@@ -93,32 +93,32 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
       <div className="flex flex-col gap-3 sm:flex-row">
         {/* Ticket Number Search */}
         <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
             type="text"
             placeholder="Search by ticket number..."
             value={filters.ticketNumber}
             onChange={(e) => handleFilterChange('ticketNumber', e.target.value)}
             className={cn(
-              'w-full rounded-md border border-white/10 bg-black/50 py-2 pl-9 pr-3',
-              'text-white placeholder:text-white/40',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
+              'text-foreground placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
 
         {/* Client Name Search */}
         <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
             type="text"
             placeholder="Search by client name..."
             value={filters.clientName}
             onChange={(e) => handleFilterChange('clientName', e.target.value)}
             className={cn(
-              'w-full rounded-md border border-white/10 bg-black/50 py-2 pl-9 pr-3',
-              'text-white placeholder:text-white/40',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
+              'text-foreground placeholder:text-muted-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           />
         </div>
@@ -128,8 +128,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           value={filters.treeName}
           onChange={(e) => handleFilterChange('treeName', e.target.value)}
           className={cn(
-            'rounded-md border border-white/10 bg-black/50 px-3 py-2',
-            'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+            'rounded-md border border-border bg-card px-3 py-2',
+            'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
             'sm:min-w-[200px]'
           )}
         >
@@ -148,19 +148,19 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           <button
             onClick={() => setShowDatePicker(!showDatePicker)}
             className={cn(
-              'flex w-full items-center gap-2 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm',
-              'text-white hover:bg-white/10',
-              filters.dateRange?.from && 'border-white/30'
+              'flex w-full items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm',
+              'text-foreground hover:bg-accent',
+              filters.dateRange?.from && 'border-primary/30'
             )}
           >
-            <Calendar className="h-4 w-4 text-white/40" />
-            <span className={cn(!filters.dateRange?.from && 'text-white/40')}>
+            <Calendar className="h-4 w-4 text-muted-foreground" />
+            <span className={cn(!filters.dateRange?.from && 'text-muted-foreground')}>
               {formatDateRange(filters.dateRange)}
             </span>
           </button>
 
           {showDatePicker && (
-            <div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4 shadow-lg">
+            <div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-border bg-[#0a0a0a] p-4 shadow-lg">
               {/* Date Type Toggle */}
               <div className="mb-3 flex gap-2">
                 <button
@@ -168,8 +168,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                   className={cn(
                     'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
                     filters.dateType === 'started'
-                      ? 'bg-white text-black'
-                      : 'border border-white/10 text-white/60 hover:bg-white/10 hover:text-white'
+                      ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
+                      : 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                   )}
                 >
                   Started
@@ -179,8 +179,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                   className={cn(
                     'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
                     filters.dateType === 'completed'
-                      ? 'bg-white text-black'
-                      : 'border border-white/10 text-white/60 hover:bg-white/10 hover:text-white'
+                      ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
+                      : 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
                   )}
                 >
                   Completed
@@ -194,8 +194,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                     key={preset.value}
                     onClick={() => applyDatePreset(preset.value)}
                     className={cn(
-                      'rounded-md bg-white/10 px-3 py-1.5 text-sm font-medium text-white/70',
-                      'hover:bg-white/20 hover:text-white'
+                      'rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-muted-foreground',
+                      'hover:bg-accent/80 hover:text-foreground'
                     )}
                   >
                     {preset.label}
@@ -227,8 +227,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                     setShowDatePicker(false)
                   }}
                   className={cn(
-                    'flex-1 rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black',
-                    'hover:bg-white/90'
+                    'flex-1 rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                    'hover:opacity-90'
                   )}
                 >
                   Apply
@@ -236,8 +236,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
                 <button
                   onClick={() => setShowDatePicker(false)}
                   className={cn(
-                    'rounded-md border border-white/10 px-3 py-1.5 text-sm font-medium text-white/60',
-                    'hover:bg-white/10 hover:text-white'
+                    'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground',
+                    'hover:bg-accent hover:text-foreground'
                   )}
                 >
                   Cancel
@@ -252,8 +252,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
           <button
             onClick={onClear}
             className={cn(
-              'flex items-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium',
-              'text-white/60 hover:bg-white/10 hover:text-white'
+              'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
+              'text-muted-foreground hover:bg-accent hover:text-foreground'
             )}
           >
             <Filter className="h-4 w-4" />
@@ -265,46 +265,46 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
       {/* Active Filter Chips */}
       {hasActiveFilters && (
         <div className="flex flex-wrap items-center gap-2">
-          <span className="text-sm text-white/40">Active filters:</span>
+          <span className="text-sm text-muted-foreground">Active filters:</span>
           {filters.ticketNumber && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               Ticket: {filters.ticketNumber}
               <button
                 onClick={() => handleFilterChange('ticketNumber', '')}
-                className="rounded-full p-0.5 hover:bg-white/20"
+                className="rounded-full p-0.5 hover:bg-accent/80"
               >
                 <X className="h-3 w-3" />
               </button>
             </span>
           )}
           {filters.clientName && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               Client: {filters.clientName}
               <button
                 onClick={() => handleFilterChange('clientName', '')}
-                className="rounded-full p-0.5 hover:bg-white/20"
+                className="rounded-full p-0.5 hover:bg-accent/80"
               >
                 <X className="h-3 w-3" />
               </button>
             </span>
           )}
           {filters.treeName && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               Tree: {filters.treeName}
               <button
                 onClick={() => handleFilterChange('treeName', '')}
-                className="rounded-full p-0.5 hover:bg-white/20"
+                className="rounded-full p-0.5 hover:bg-accent/80"
               >
                 <X className="h-3 w-3" />
               </button>
             </span>
           )}
           {filters.dateRange?.from && (
-            <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70">
+            <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
               {formatDateRange(filters.dateRange)} ({filters.dateType})
               <button
                 onClick={clearDateRange}
-                className="rounded-full p-0.5 hover:bg-white/20"
+                className="rounded-full p-0.5 hover:bg-accent/80"
               >
                 <X className="h-3 w-3" />
               </button>
diff --git a/frontend/src/components/session/SessionTimeline.tsx b/frontend/src/components/session/SessionTimeline.tsx
index 90811010..e6c72337 100644
--- a/frontend/src/components/session/SessionTimeline.tsx
+++ b/frontend/src/components/session/SessionTimeline.tsx
@@ -53,7 +53,7 @@ export function SessionTimeline({
   if (treeType === 'procedural') {
     return (
       <div className="mb-8">
-        <h2 className="mb-4 text-lg font-semibold text-white">Procedure Steps</h2>
+        <h2 className="mb-4 text-lg font-semibold text-foreground">Procedure Steps</h2>
         <div className="space-y-2">
           {decisions.map((decision, index) => {
             const isCompleted = decision.answer === 'completed'
@@ -61,31 +61,31 @@ export function SessionTimeline({
               <div
                 key={index}
                 className={cn(
-                  'glass-card rounded-xl p-4',
+                  'bg-card border border-border rounded-xl p-4',
                   isCompleted && 'border-l-2 border-emerald-400/50'
                 )}
               >
                 <div className="flex items-start gap-3">
                   <span className={cn(
                     'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',
-                    isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-white/10 text-white/50'
+                    isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-accent text-muted-foreground'
                   )}>
                     {isCompleted ? '\u2713' : index + 1}
                   </span>
                   <div className="min-w-0 flex-1">
-                    <p className="font-medium text-white">{decision.question || 'Step'}</p>
+                    <p className="font-medium text-foreground">{decision.question || 'Step'}</p>
                     {decision.notes && (
-                      <p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-white/40">
+                      <p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-muted-foreground">
                         Notes: {decision.notes}
                       </p>
                     )}
                     {decision.command_output && (
-                      <p className="mt-1 text-sm text-white/40">
+                      <p className="mt-1 text-sm text-muted-foreground">
                         Verification: {decision.command_output}
                       </p>
                     )}
                     {decision.duration_seconds != null && (
-                      <p className="mt-1 text-xs text-white/30">
+                      <p className="mt-1 text-xs text-muted-foreground">
                         Duration: {formatDuration(decision.duration_seconds)}
                       </p>
                     )}
@@ -94,7 +94,7 @@ export function SessionTimeline({
                     <button
                       onClick={() => handleCopyStep(decision, index)}
                       title="Copy step to clipboard"
-                      className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
+                      className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       {copiedStepIndex === index ? (
                         <Check className="h-4 w-4 text-emerald-400" />
@@ -123,52 +123,52 @@ export function SessionTimeline({
   // Default: troubleshooting decision timeline
   return (
     <div className="mb-8">
-      <h2 className="mb-4 text-lg font-semibold text-white">Decision Timeline</h2>
+      <h2 className="mb-4 text-lg font-semibold text-foreground">Decision Timeline</h2>
       <div className="space-y-4">
         <div className="flex items-center gap-3 text-sm">
-          <span className="h-3 w-3 rounded-full bg-white" />
-          <span className="text-white/40">
+          <span className="h-3 w-3 rounded-full bg-foreground" />
+          <span className="text-muted-foreground">
             Session started: {formatDate(startedAt)}
           </span>
         </div>
 
         {decisions.map((decision, index) => (
-          <div key={index} className="ml-1 border-l-2 border-white/[0.06] pl-6">
+          <div key={index} className="ml-1 border-l-2 border-border pl-6">
             <div className="relative">
-              <span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-white/20" />
-              <div className="glass-card rounded-xl p-4">
+              <span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-muted-foreground" />
+              <div className="bg-card border border-border rounded-xl p-4">
                 <div className="flex items-start justify-between gap-2">
                   <div className="flex-1">
                     {decision.question && (
-                      <p className="font-medium text-white">{decision.question}</p>
+                      <p className="font-medium text-foreground">{decision.question}</p>
                     )}
                     {decision.answer && (
-                      <p className="mt-1 text-sm text-white">Answer: {decision.answer}</p>
+                      <p className="mt-1 text-sm text-foreground">Answer: {decision.answer}</p>
                     )}
                     {decision.action_performed && (
-                      <p className="mt-1 text-sm text-white/40">
+                      <p className="mt-1 text-sm text-muted-foreground">
                         Action: {decision.action_performed}
                       </p>
                     )}
                     {decision.notes && (
-                      <p className="mt-2 rounded bg-white/5 p-2 text-sm text-white/40">
+                      <p className="mt-2 rounded bg-white/5 p-2 text-sm text-muted-foreground">
                         Notes: {decision.notes}
                       </p>
                     )}
                     {decision.command_output && (
                       <div className="mt-2">
-                        <p className="mb-1 text-xs font-medium text-white/50">Command Output</p>
-                        <pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-white/60 whitespace-pre-wrap">
+                        <p className="mb-1 text-xs font-medium text-muted-foreground">Command Output</p>
+                        <pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-muted-foreground whitespace-pre-wrap">
                           {decision.command_output}
                         </pre>
                       </div>
                     )}
                     {decision.duration_seconds != null && (
-                      <p className="mt-2 text-xs text-white/50">
+                      <p className="mt-2 text-xs text-muted-foreground">
                         Duration: {formatDuration(decision.duration_seconds)}
                       </p>
                     )}
-                    <p className="mt-2 text-xs text-white/40">
+                    <p className="mt-2 text-xs text-muted-foreground">
                       {formatDate(decision.timestamp)}
                     </p>
                   </div>
@@ -176,7 +176,7 @@ export function SessionTimeline({
                     <button
                       onClick={() => handleCopyStep(decision, index)}
                       title="Copy step to clipboard"
-                      className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white"
+                      className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       {copiedStepIndex === index ? (
                         <Check className="h-4 w-4 text-emerald-400" />
diff --git a/frontend/src/components/session/SharedSessionTreePreview.tsx b/frontend/src/components/session/SharedSessionTreePreview.tsx
index 5887ad05..28682dc3 100644
--- a/frontend/src/components/session/SharedSessionTreePreview.tsx
+++ b/frontend/src/components/session/SharedSessionTreePreview.tsx
@@ -7,11 +7,11 @@ interface SharedSessionTreePreviewProps {
 }
 
 const nodeTypeColors: Record<string, string> = {
-  root: 'bg-white',
+  root: 'bg-foreground',
   decision: 'bg-blue-400',
   action: 'bg-yellow-400',
   solution: 'bg-emerald-400',
-  information: 'bg-white/50',
+  information: 'bg-muted-foreground',
 }
 
 function getNodeTitle(node: Record<string, unknown>): string {
@@ -36,7 +36,7 @@ function TreeNode({
   const nodeType = (node.node_type as string) || 'decision'
   const isInPath = pathTaken.includes(nodeId)
   const children = (node.children as Record<string, unknown>[]) || []
-  const colorClass = nodeTypeColors[nodeType] || 'bg-white/50'
+  const colorClass = nodeTypeColors[nodeType] || 'bg-muted-foreground'
 
   return (
     <>
@@ -44,8 +44,8 @@ function TreeNode({
         className={cn(
           'flex items-center gap-2 px-3 py-1.5 text-sm',
           isInPath
-            ? 'rounded-md border-l-2 border-white/40 bg-white/10 font-medium text-white'
-            : 'text-white/30'
+            ? 'rounded-md border-l-2 border-muted-foreground bg-accent font-medium text-foreground'
+            : 'text-muted-foreground'
         )}
         style={{ paddingLeft: `${depth * 16 + 12}px` }}
       >
@@ -75,9 +75,9 @@ export function SharedSessionTreePreview({
   }
 
   return (
-    <div className="glass-card rounded-2xl">
-      <div className="sticky top-0 z-10 rounded-t-2xl border-b border-white/[0.06] bg-black/80 px-6 py-4 backdrop-blur">
-        <h3 className="text-sm font-semibold text-white">Tree Structure</h3>
+    <div className="bg-card border border-border rounded-2xl">
+      <div className="sticky top-0 z-10 rounded-t-2xl border-b border-border bg-black/80 px-6 py-4 backdrop-blur">
+        <h3 className="text-sm font-semibold text-foreground">Tree Structure</h3>
       </div>
       <div className="max-h-[600px] overflow-y-auto py-2">
         <TreeNode node={treeStructure as unknown as Record<string, unknown>} depth={0} pathTaken={pathTaken} />
diff --git a/frontend/src/components/session/StepRatingModal.tsx b/frontend/src/components/session/StepRatingModal.tsx
index 06854248..3872f1b1 100644
--- a/frontend/src/components/session/StepRatingModal.tsx
+++ b/frontend/src/components/session/StepRatingModal.tsx
@@ -78,19 +78,19 @@ export function StepRatingModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
-      <div className="glass-card w-full max-w-2xl max-h-[90vh] flex flex-col rounded-2xl shadow-lg">
+      <div className="bg-card border border-border w-full max-w-2xl max-h-[90vh] flex flex-col rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
+        <div className="flex items-center justify-between border-b border-border px-6 py-4">
           <div>
-            <h2 className="text-lg font-semibold text-white">Rate Your Experience</h2>
-            <p className="mt-1 text-sm text-white/70">
+            <h2 className="text-lg font-semibold text-foreground">Rate Your Experience</h2>
+            <p className="mt-1 text-sm text-muted-foreground">
               Help others by rating the steps you used ({librarySteps.length} step{librarySteps.length !== 1 ? 's' : ''})
             </p>
           </div>
           <button
             onClick={onClose}
             disabled={isSaving}
-            className="rounded-full p-1 text-white/40 hover:bg-white/10 hover:text-white disabled:opacity-50"
+            className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
           >
             <X className="h-5 w-5" />
           </button>
@@ -102,14 +102,14 @@ export function StepRatingModal({
             {librarySteps.map((step) => {
               const rating = getRating(step.id)
               return (
-                <div key={step.id} className="rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4">
+                <div key={step.id} className="rounded-lg border border-border bg-[#0a0a0a] p-4">
                   {/* Step Title */}
-                  <h3 className="font-medium text-white">{step.title}</h3>
-                  <p className="mt-1 text-sm text-white/40 capitalize">{step.step_type}</p>
+                  <h3 className="font-medium text-foreground">{step.title}</h3>
+                  <p className="mt-1 text-sm text-muted-foreground capitalize">{step.step_type}</p>
 
                   {/* Star Rating */}
                   <div className="mt-3">
-                    <label className="mb-1 block text-sm font-medium text-white">
+                    <label className="mb-1 block text-sm font-medium text-foreground">
                       Rating
                     </label>
                     <StarRating
@@ -121,7 +121,7 @@ export function StepRatingModal({
 
                   {/* Was this helpful? */}
                   <div className="mt-3">
-                    <label className="mb-2 block text-sm font-medium text-white">
+                    <label className="mb-2 block text-sm font-medium text-foreground">
                       Was this helpful?
                     </label>
                     <div className="flex gap-2">
@@ -133,7 +133,7 @@ export function StepRatingModal({
                           'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
                           rating?.helpful === true
                             ? 'border-emerald-400/20 bg-emerald-400/10 text-emerald-400'
-                            : 'border-white/10 text-white/60 hover:bg-white/10 hover:text-white',
+                            : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
                           'disabled:opacity-50'
                         )}
                       >
@@ -148,7 +148,7 @@ export function StepRatingModal({
                           'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
                           rating?.helpful === false
                             ? 'border-red-400/20 bg-red-400/10 text-red-400'
-                            : 'border-white/10 text-white/60 hover:bg-white/10 hover:text-white',
+                            : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
                           'disabled:opacity-50'
                         )}
                       >
@@ -160,8 +160,8 @@ export function StepRatingModal({
 
                   {/* Optional Review */}
                   <div className="mt-3">
-                    <label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-white">
-                      Review <span className="text-white/40">(optional)</span>
+                    <label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-foreground">
+                      Review <span className="text-muted-foreground">(optional)</span>
                     </label>
                     <textarea
                       id={`review-${step.id}`}
@@ -172,13 +172,13 @@ export function StepRatingModal({
                       rows={2}
                       placeholder="Share your experience with this step..."
                       className={cn(
-                        'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-                        'placeholder:text-white/40',
-                        'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
+                        'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
+                        'placeholder:text-muted-foreground',
+                        'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
                         'disabled:opacity-50'
                       )}
                     />
-                    <p className="mt-1 text-xs text-white/40 text-right">
+                    <p className="mt-1 text-xs text-muted-foreground text-right">
                       {rating?.review?.length || 0}/500
                     </p>
                   </div>
@@ -189,14 +189,14 @@ export function StepRatingModal({
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-2 border-t border-white/[0.06] px-6 py-4">
+        <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
           <button
             type="button"
             onClick={onClose}
             disabled={isSaving}
             className={cn(
-              'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-              'hover:bg-white/10 hover:text-white disabled:opacity-50'
+              'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+              'hover:bg-accent hover:text-foreground disabled:opacity-50'
             )}
           >
             Skip
@@ -206,8 +206,8 @@ export function StepRatingModal({
             onClick={handleSubmit}
             disabled={isSaving}
             className={cn(
-              'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-              'hover:bg-white/90 disabled:opacity-50'
+              'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+              'hover:opacity-90 disabled:opacity-50'
             )}
           >
             {isSaving ? 'Submitting...' : 'Submit Ratings'}
diff --git a/frontend/src/components/session/VariablePromptModal.tsx b/frontend/src/components/session/VariablePromptModal.tsx
index 0dc36a81..364facd0 100644
--- a/frontend/src/components/session/VariablePromptModal.tsx
+++ b/frontend/src/components/session/VariablePromptModal.tsx
@@ -22,14 +22,14 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
-      <div className="glass-card w-full max-w-md rounded-2xl p-6 shadow-lg">
-        <h2 className="mb-1 text-lg font-semibold text-white">Input Required</h2>
-        <p className="mb-4 text-sm text-white/40">
+      <div className="bg-card border border-border w-full max-w-md rounded-2xl p-6 shadow-lg">
+        <h2 className="mb-1 text-lg font-semibold text-foreground">Input Required</h2>
+        <p className="mb-4 text-sm text-muted-foreground">
           This step requires you to provide a value.
         </p>
 
         <form onSubmit={handleSubmit}>
-          <label className="mb-2 block text-sm font-medium text-white/70">
+          <label className="mb-2 block text-sm font-medium text-muted-foreground">
             {prompt}
           </label>
           <input
@@ -39,8 +39,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
             placeholder="Enter value..."
             autoFocus
             className={cn(
-              'w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-sm text-white',
-              'placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
+              'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           />
 
@@ -49,8 +49,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
               type="submit"
               disabled={!value.trim()}
               className={cn(
-                'flex-1 rounded-lg bg-white px-4 py-2 text-sm font-medium text-black',
-                'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
+                'flex-1 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
               )}
             >
               Continue
@@ -59,8 +59,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
               type="button"
               onClick={onCancel}
               className={cn(
-                'rounded-lg border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
-                'hover:bg-white/10 hover:text-white'
+                'rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
+                'hover:bg-accent hover:text-foreground'
               )}
             >
               Skip
diff --git a/frontend/src/components/tree-editor/NodePicker.tsx b/frontend/src/components/tree-editor/NodePicker.tsx
index 9867c7ab..0ea8bd7a 100644
--- a/frontend/src/components/tree-editor/NodePicker.tsx
+++ b/frontend/src/components/tree-editor/NodePicker.tsx
@@ -11,9 +11,9 @@ const CREATE_SOLUTION = `${CREATE_PREFIX}solution__`
 
 // Unicode symbols for node types (works in select options)
 const NODE_TYPE_SYMBOLS: Record<NodeType, string> = {
-  decision: 'ⓘ',  // Information/question symbol
-  action: '⚡',    // Lightning bolt for action
-  solution: '✓'   // Checkmark for solution
+  decision: '\u24D8',  // Information/question symbol
+  action: '\u26A1',    // Lightning bolt for action
+  solution: '\u2713'   // Checkmark for solution
 }
 
 // Node type labels for UI
@@ -139,7 +139,7 @@ export function NodePicker({
   return (
     <div className={className}>
       {label && (
-        <label className="mb-1 block text-sm font-medium text-white">
+        <label className="mb-1 block text-sm font-medium text-foreground">
           {label}
         </label>
       )}
@@ -147,8 +147,8 @@ export function NodePicker({
       {/* Inline node creation UI */}
       {creatingNodeType ? (
         <div className="space-y-2">
-          <div className="flex items-center gap-2 rounded-md border border-white/20 bg-white/[0.04] p-2">
-            <span className="text-xs font-medium text-white">
+          <div className="flex items-center gap-2 rounded-md border border-border bg-accent/50 p-2">
+            <span className="text-xs font-medium text-foreground">
               New {NODE_TYPE_LABELS[creatingNodeType]}:
             </span>
             <input
@@ -159,9 +159,9 @@ export function NodePicker({
               onKeyDown={handleKeyDown}
               placeholder={creatingNodeType === 'decision' ? 'Enter question...' : 'Enter title...'}
               className={cn(
-                'flex-1 rounded-md border border-white/10 px-2 py-1 text-sm',
-                'bg-black/50 text-white placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                'flex-1 rounded-md border border-border px-2 py-1 text-sm',
+                'bg-card text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
@@ -169,7 +169,7 @@ export function NodePicker({
             <button
               type="button"
               onClick={handleCancelCreate}
-              className="flex-1 rounded-md border border-white/10 px-3 py-1.5 text-xs font-medium text-white/60 hover:bg-white/10 hover:text-white"
+              className="flex-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
@@ -179,7 +179,7 @@ export function NodePicker({
               disabled={!newNodeTitle.trim()}
               className={cn(
                 'flex-1 rounded-md px-3 py-1.5 text-xs font-medium',
-                'bg-white text-black hover:bg-white/90',
+                'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
                 'disabled:opacity-50 disabled:cursor-not-allowed'
               )}
             >
@@ -194,9 +194,9 @@ export function NodePicker({
             onChange={(e) => handleChange(e.target.value)}
             className={cn(
               'block w-full rounded-md border px-3 py-2 text-sm',
-              'bg-black/50 text-white',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-              error ? 'border-red-400' : 'border-white/10'
+              'bg-card text-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+              error ? 'border-red-400' : 'border-border'
             )}
           >
             <option value="">{placeholder}</option>
@@ -242,7 +242,7 @@ export function NodePicker({
 
           {/* Show what's selected */}
           {value && selectedNode && (
-            <p className="mt-1 text-xs text-white/40">
+            <p className="mt-1 text-xs text-muted-foreground">
               → {selectedNode.label}
             </p>
           )}
diff --git a/frontend/src/components/tree-editor/TreeMetadataForm.tsx b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
index a95f52ba..01e3a818 100644
--- a/frontend/src/components/tree-editor/TreeMetadataForm.tsx
+++ b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
@@ -56,12 +56,12 @@ export function TreeMetadataForm() {
   )
 
   return (
-    <div className="space-y-4 glass-card rounded-2xl p-4">
-      <h2 className="text-sm font-semibold text-white">Tree Details</h2>
+    <div className="space-y-4 bg-card border border-border rounded-2xl p-4">
+      <h2 className="text-sm font-semibold text-foreground">Tree Details</h2>
 
       {/* Name */}
       <div>
-        <label htmlFor="tree-name" className="block text-sm font-medium text-white">
+        <label htmlFor="tree-name" className="block text-sm font-medium text-foreground">
           Name <span className="text-red-400">*</span>
         </label>
         <input
@@ -72,9 +72,9 @@ export function TreeMetadataForm() {
           placeholder="e.g., VDA Registration Troubleshooting"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-black/50 text-white placeholder:text-white/40',
-            'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
-            nameError ? 'border-red-400' : 'border-white/10'
+            'bg-card text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
+            nameError ? 'border-red-400' : 'border-border'
           )}
         />
         {nameError && <p className="mt-1 text-xs text-red-400">{nameError.message}</p>}
@@ -82,7 +82,7 @@ export function TreeMetadataForm() {
 
       {/* Description */}
       <div>
-        <label htmlFor="tree-description" className="block text-sm font-medium text-white">
+        <label htmlFor="tree-description" className="block text-sm font-medium text-foreground">
           Description
         </label>
         <textarea
@@ -92,16 +92,16 @@ export function TreeMetadataForm() {
           placeholder="Brief description of what this tree troubleshoots..."
           rows={2}
           className={cn(
-            'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm',
-            'bg-black/50 text-white placeholder:text-white/40',
-            'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+            'bg-card text-foreground placeholder:text-muted-foreground',
+            'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
           )}
         />
       </div>
 
       {/* Category */}
       <div>
-        <label htmlFor="tree-category" className="block text-sm font-medium text-white">
+        <label htmlFor="tree-category" className="block text-sm font-medium text-foreground">
           Category
         </label>
         {!customCategory ? (
@@ -110,9 +110,9 @@ export function TreeMetadataForm() {
             value={categoryId || ''}
             onChange={(e) => handleCategoryChange(e.target.value)}
             className={cn(
-              'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm',
-              'bg-black/50 text-white',
-              'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
+              'bg-card text-foreground',
+              'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
             )}
           >
             <option value="">No category</option>
@@ -132,9 +132,9 @@ export function TreeMetadataForm() {
               onChange={(e) => setCategory(e.target.value)}
               placeholder="Enter new category"
               className={cn(
-                'block flex-1 rounded-md border border-white/10 px-3 py-2 text-sm',
-                'bg-black/50 text-white placeholder:text-white/40',
-                'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
+                'block flex-1 rounded-md border border-border px-3 py-2 text-sm',
+                'bg-card text-foreground placeholder:text-muted-foreground',
+                'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
               )}
               autoFocus
             />
@@ -144,7 +144,7 @@ export function TreeMetadataForm() {
                 setCategory('')
                 setCategoryId(null)
               }}
-              className="rounded-md border border-white/10 px-3 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white"
+              className="rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
             >
               Cancel
             </button>
@@ -154,7 +154,7 @@ export function TreeMetadataForm() {
 
       {/* Tags */}
       <div>
-        <label className="block text-sm font-medium text-white">Tags</label>
+        <label className="block text-sm font-medium text-foreground">Tags</label>
         <div className="mt-1">
           <TagInput tags={tags} onChange={setTags} maxTags={10} placeholder="Add tags..." />
         </div>
@@ -162,13 +162,13 @@ export function TreeMetadataForm() {
 
       {/* Visibility */}
       <div>
-        <label className="block text-sm font-medium text-white">Visibility</label>
+        <label className="block text-sm font-medium text-foreground">Visibility</label>
         <div className="mt-2 flex gap-4">
           <label
             className={cn(
               'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
               'transition-colors',
-              !isPublic ? 'border-white/30 bg-white/10 text-white' : 'border-white/10 text-white/60 hover:bg-white/[0.06]'
+              !isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
             )}
           >
             <input
@@ -185,7 +185,7 @@ export function TreeMetadataForm() {
             className={cn(
               'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
               'transition-colors',
-              isPublic ? 'border-white/30 bg-white/10 text-white' : 'border-white/10 text-white/60 hover:bg-white/[0.06]'
+              isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
             )}
           >
             <input
@@ -199,7 +199,7 @@ export function TreeMetadataForm() {
             <span className="text-sm">Public</span>
           </label>
         </div>
-        <p className="mt-1 text-xs text-white/40">
+        <p className="mt-1 text-xs text-muted-foreground">
           {isPublic
             ? 'Anyone can view this tree'
             : 'Only you and your team can view this tree'}