diff --git a/frontend/src/pages/TreeLibraryPage.tsx b/frontend/src/pages/TreeLibraryPage.tsx
index 9c12d8a0..1df82437 100644
--- a/frontend/src/pages/TreeLibraryPage.tsx
+++ b/frontend/src/pages/TreeLibraryPage.tsx
@@ -252,10 +252,10 @@ export function TreeLibraryPage() {
         <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
           <div className="mb-6 flex flex-col gap-4 sm:mb-8 sm:flex-row sm:items-start sm:justify-between">
             <div>
-              <h1 className="text-2xl font-bold text-white sm:text-3xl">
+              <h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">
                 {typeFilter === 'procedural' ? 'Projects' : typeFilter === 'troubleshooting' ? 'Troubleshooting Flows' : 'Flow Library'}
               </h1>
-              <p className="mt-2 text-white/40">
+              <p className="mt-2 text-muted-foreground">
                 {typeFilter === 'procedural'
                   ? 'Step-by-step projects and runbooks'
                   : typeFilter === 'troubleshooting'
@@ -267,8 +267,8 @@ export function TreeLibraryPage() {
               <Link
                 to={typeFilter === 'procedural' ? '/flows/new' : '/trees/new'}
                 className={cn(
-                  'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
-                  'hover:bg-white/90'
+                  'flex items-center gap-2 rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
+                  'hover:opacity-90'
                 )}
               >
                 <Plus className="h-4 w-4" />
@@ -288,16 +288,16 @@ export function TreeLibraryPage() {
                   onChange={(e) => setSearchQuery(e.target.value)}
                   onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                   className={cn(
-                    'flex-1 rounded-md border border-white/10 bg-black/50 px-3 py-2',
-                    '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 bg-card px-3 py-2',
+                    'text-foreground placeholder:text-muted-foreground',
+                    'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
                   )}
                 />
                 <button
                   onClick={handleSearch}
                   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'
                   )}
                 >
                   Search
@@ -309,8 +309,8 @@ export function TreeLibraryPage() {
                 onChange={(e) => setSelectedCategoryId(e.target.value)}
                 aria-label="Filter by category"
                 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'
                 )}
               >
                 <option value="">All Categories</option>
@@ -325,7 +325,7 @@ export function TreeLibraryPage() {
             {/* View Controls */}
             <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <div className="flex items-center gap-4">
-                <div className="flex rounded-lg border border-white/10 p-0.5">
+                <div className="flex rounded-lg border border-border p-0.5">
                   {(['all', 'troubleshooting', 'procedural'] as const).map((t) => (
                     <button
                       key={t}
@@ -333,8 +333,8 @@ export function TreeLibraryPage() {
                       className={cn(
                         'rounded-md px-3 py-1 text-xs font-medium transition-colors',
                         typeFilter === t
-                          ? 'bg-white/10 text-white'
-                          : 'text-white/40 hover:text-white/60'
+                          ? 'bg-accent text-foreground'
+                          : 'text-muted-foreground hover:text-foreground'
                       )}
                     >
                       {t === 'all' ? 'All' : t === 'troubleshooting' ? 'Troubleshooting' : 'Projects'}
@@ -347,9 +347,9 @@ export function TreeLibraryPage() {
                     type="checkbox"
                     checked={showDrafts}
                     onChange={(e) => setShowDrafts(e.target.checked)}
-                    className="h-4 w-4 rounded border-white/20 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-2"
+                    className="h-4 w-4 rounded border-border text-primary focus:ring-2 focus:ring-primary/20 focus:ring-offset-2"
                   />
-                  <span className="text-sm text-white/40">Show my drafts</span>
+                  <span className="text-sm text-muted-foreground">Show my drafts</span>
                 </label>
               </div>
               <ViewToggle view={treeLibraryView} onChange={setTreeLibraryView} />
@@ -359,24 +359,24 @@ export function TreeLibraryPage() {
           {/* Active Filters */}
           {hasActiveFilters && (
             <div className="mb-6 flex flex-wrap items-center gap-2">
-              <span className="text-sm text-white/40">Filters:</span>
+              <span className="text-sm text-muted-foreground">Filters:</span>
               {selectedFolderId && (
-                <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white">
+                <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
                   Folder
                   <button
                     onClick={() => setSelectedFolderId(null)}
-                    className="rounded-full p-0.5 hover:bg-white/20"
+                    className="rounded-full p-0.5 hover:bg-accent"
                   >
                     <X className="h-3 w-3" />
                   </button>
                 </span>
               )}
               {selectedCategoryId && (
-                <span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white">
+                <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground">
                   {categories.find((c) => c.id === selectedCategoryId)?.name}
                   <button
                     onClick={() => setSelectedCategoryId('')}
-                    className="rounded-full p-0.5 hover:bg-white/20"
+                    className="rounded-full p-0.5 hover:bg-accent"
                   >
                     <X className="h-3 w-3" />
                   </button>
@@ -385,12 +385,12 @@ export function TreeLibraryPage() {
               {selectedTags.map((tag) => (
                 <span
                   key={tag}
-                  className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white"
+                  className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-foreground"
                 >
                   {tag}
                   <button
                     onClick={() => removeTagFilter(tag)}
-                    className="rounded-full p-0.5 hover:bg-white/20"
+                    className="rounded-full p-0.5 hover:bg-accent"
                   >
                     <X className="h-3 w-3" />
                   </button>
@@ -398,7 +398,7 @@ export function TreeLibraryPage() {
               ))}
               <button
                 onClick={clearAllFilters}
-                className="text-sm text-white/40 hover:text-white"
+                className="text-sm text-muted-foreground hover:text-foreground"
               >
                 Clear all
               </button>
@@ -409,12 +409,12 @@ export function TreeLibraryPage() {
           {visibleIncompleteSessions.length > 0 && (
             <div className="mb-6 space-y-2">
               {visibleIncompleteSessions.map(s => (
-                <div key={s.id} className="glass-card flex items-center justify-between rounded-xl p-4">
+                <div key={s.id} className="bg-card border border-border flex items-center justify-between rounded-xl p-4">
                   <div className="min-w-0 flex-1">
-                    <p className="truncate font-medium text-white">
+                    <p className="truncate font-medium text-foreground">
                       {s.tree_snapshot?.name || 'Unknown tree'}
                     </p>
-                    <p className="text-sm text-white/40">
+                    <p className="text-sm text-muted-foreground">
                       {s.client_name && `${s.client_name} · `}
                       Started {formatTimeAgo(s.started_at)}
                     </p>
@@ -422,14 +422,14 @@ export function TreeLibraryPage() {
                   <div className="flex items-center gap-2">
                     <button
                       onClick={() => navigate(getTreeNavigatePath(s.tree_id, s.tree_snapshot?.tree_type), { state: { sessionId: s.id } })}
-                      className="flex items-center gap-1.5 rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black hover:bg-white/90"
+                      className="flex items-center gap-1.5 rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20 hover:opacity-90"
                     >
                       <Play className="h-3.5 w-3.5" />
                       Resume
                     </button>
                     <button
                       onClick={() => dismissSession(s.id)}
-                      className="rounded-md p-1.5 text-white/30 hover:bg-white/10 hover:text-white"
+                      className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
                     >
                       <X className="h-4 w-4" />
                     </button>
@@ -447,8 +447,8 @@ export function TreeLibraryPage() {
                   state: { prefillClientName: lastSessionData.client_name, prefillTicketNumber: lastSessionData.ticket_number },
                 })}
                 className={cn(
-                  'flex items-center gap-2 rounded-lg border border-white/10 px-4 py-2.5 text-sm text-white/60',
-                  'hover:border-white/20 hover:bg-white/[0.04] hover:text-white'
+                  'flex items-center gap-2 rounded-lg border border-border px-4 py-2.5 text-sm text-muted-foreground',
+                  'hover:border-border hover:bg-accent hover:text-foreground'
                 )}
               >
                 <RotateCcw className="h-4 w-4" />
@@ -461,10 +461,10 @@ export function TreeLibraryPage() {
           {/* Loading State */}
           {isLoading ? (
             <div className="flex justify-center py-12">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-primary" />
             </div>
           ) : trees.length === 0 ? (
-            <div className="py-12 text-center text-white/40">
+            <div className="py-12 text-center text-muted-foreground">
               No flows found.{' '}
               {(searchQuery || hasActiveFilters) && 'Try adjusting your filters.'}
             </div>