diff --git a/src/App.tsx b/src/App.tsx
index 0dc25d0..8b862bd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -72,8 +72,8 @@ export function App() {
   return (
     <ErrorBoundary
       fallback={(err) => (
-        <box border padding={2}>
-          <text fg="red">
+        <box border padding={2} borderColor={theme.error}>
+          <text fg={theme.error}>
             Error: {err?.message ?? String(err)}
             {"\n"}
             Press a number key (1-6) to switch tabs.
diff --git a/src/components/CodeValidation.tsx b/src/components/CodeValidation.tsx
index 757f0e7..a7481ec 100644
--- a/src/components/CodeValidation.tsx
+++ b/src/components/CodeValidation.tsx
@@ -6,6 +6,7 @@
 import { createSignal } from "solid-js";
 import { useAuthStore } from "@/stores/auth";
 import { AUTH_CONFIG } from "@/config/auth";
+import { useTheme } from "@/context/ThemeContext";
 
 interface CodeValidationProps {
   focused?: boolean;
@@ -16,6 +17,7 @@ type FocusField = "code" | "submit" | "back";
 
 export function CodeValidation(props: CodeValidationProps) {
   const auth = useAuthStore();
+  const { theme } = useTheme();
   const [code, setCode] = createSignal("");
   const [focusField, setFocusField] = createSignal<FocusField>("code");
   const [codeError, setCodeError] = createSignal<string | null>(null);
@@ -98,32 +100,32 @@ export function CodeValidation(props: CodeValidationProps) {
   };
 
   return (
-    <box flexDirection="column" border padding={2} gap={1}>
-      <text>
+    <box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
+      <text fg={theme.text}>
         <strong>Enter Sync Code</strong>
       </text>
 
       <box height={1} />
 
-      <text fg="gray">
+      <text fg={theme.textMuted}>
         Enter your 8-character sync code to link your account.
       </text>
-      <text fg="gray">You can get this code from the web portal.</text>
+      <text fg={theme.textMuted}>You can get this code from the web portal.</text>
 
       <box height={1} />
 
       {/* Code display */}
       <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "code" ? "cyan" : undefined}>
-          Code ({codeProgress()}):
-        </text>
+      <text fg={focusField() === "code" ? theme.primary : undefined}>
+            Code ({codeProgress()}):
+          </text>
 
-        <box border padding={1}>
+        <box border padding={1} borderColor={theme.border}>
           <text
             fg={
               code().length === AUTH_CONFIG.codeValidation.codeLength
-                ? "green"
-                : "yellow"
+                ? theme.success
+                : theme.warning
             }
           >
             {codeDisplay()}
@@ -139,7 +141,7 @@ export function CodeValidation(props: CodeValidationProps) {
           width={30}
         />
 
-        {codeError() && <text fg="red">{codeError()}</text>}
+        {codeError() && <text fg={theme.error}>{codeError()}</text>}
       </box>
 
       <box height={1} />
@@ -149,9 +151,9 @@ export function CodeValidation(props: CodeValidationProps) {
         <box
           border
           padding={1}
-          backgroundColor={focusField() === "submit" ? "#333" : undefined}
+          backgroundColor={focusField() === "submit" ? theme.backgroundElement : undefined}
         >
-          <text fg={focusField() === "submit" ? "cyan" : undefined}>
+          <text fg={focusField() === "submit" ? theme.primary : undefined}>
             {auth.isLoading ? "Validating..." : "[Enter] Validate Code"}
           </text>
         </box>
@@ -159,20 +161,20 @@ export function CodeValidation(props: CodeValidationProps) {
         <box
           border
           padding={1}
-          backgroundColor={focusField() === "back" ? "#333" : undefined}
+          backgroundColor={focusField() === "back" ? theme.backgroundElement : undefined}
         >
-          <text fg={focusField() === "back" ? "yellow" : "gray"}>
+          <text fg={focusField() === "back" ? theme.warning : theme.textMuted}>
             [Esc] Back to Login
           </text>
         </box>
       </box>
 
       {/* Auth error message */}
-      {auth.error && <text fg="red">{auth.error.message}</text>}
+      {auth.error && <text fg={theme.error}>{auth.error.message}</text>}
 
       <box height={1} />
 
-      <text fg="gray">Tab to navigate, Enter to select, Esc to go back</text>
+      <text fg={theme.textMuted}>Tab to navigate, Enter to select, Esc to go back</text>
     </box>
   );
 }
diff --git a/src/pages/Discover/DiscoverPage.tsx b/src/pages/Discover/DiscoverPage.tsx
index cab0284..cdba416 100644
--- a/src/pages/Discover/DiscoverPage.tsx
+++ b/src/pages/Discover/DiscoverPage.tsx
@@ -66,7 +66,7 @@ export function DiscoverPage(props: PageProps) {
                   backgroundColor={isSelected() ? theme.accent : undefined}
                   onMouseDown={() => handleCategorySelect(category.id)}
                 >
-                  <text fg={isSelected() ? "cyan" : "gray"}>
+                  <text fg={isSelected() ? theme.primary : theme.textMuted}>
                     {category.icon} {category.name}
                   </text>
                 </box>
@@ -83,7 +83,7 @@ export function DiscoverPage(props: PageProps) {
       >
         <box padding={1}>
           <text
-            fg={props.depth() == DiscoverPagePaneType.SHOWS ? "cyan" : "gray"}
+            fg={props.depth() == DiscoverPagePaneType.SHOWS ? theme.primary : theme.textMuted}
           >
             Trending in{" "}
             {DISCOVER_CATEGORIES.find(
@@ -96,9 +96,9 @@ export function DiscoverPage(props: PageProps) {
             fallback={
               <box padding={2}>
                 {discoverStore.filteredPodcasts().length !== 0 ? (
-                  <text fg="yellow">Loading trending shows...</text>
+                  <text fg={theme.warning}>Loading trending shows...</text>
                 ) : (
-                  <text fg="gray">No podcasts found in this category.</text>
+                  <text fg={theme.textMuted}>No podcasts found in this category.</text>
                 )}
               </box>
             }
diff --git a/src/pages/Discover/PodcastCard.tsx b/src/pages/Discover/PodcastCard.tsx
index 11e8fc6..ef4931e 100644
--- a/src/pages/Discover/PodcastCard.tsx
+++ b/src/pages/Discover/PodcastCard.tsx
@@ -4,6 +4,7 @@
 
 import { Show, For } from "solid-js";
 import type { Podcast } from "@/types/podcast";
+import { useTheme } from "@/context/ThemeContext";
 
 type PodcastCardProps = {
   podcast: Podcast;
@@ -14,6 +15,7 @@ type PodcastCardProps = {
 };
 
 export function PodcastCard(props: PodcastCardProps) {
+  const { theme } = useTheme();
   const handleSubscribeClick = () => {
     props.onSubscribe?.();
   };
@@ -22,28 +24,28 @@ export function PodcastCard(props: PodcastCardProps) {
     <box
       flexDirection="column"
       padding={1}
-      backgroundColor={props.selected ? "#333" : undefined}
+      backgroundColor={props.selected ? theme.backgroundElement : undefined}
       onMouseDown={props.onSelect}
     >
       {/* Title Row */}
       <box flexDirection="row" gap={2} alignItems="center">
-        <text fg={props.selected ? "cyan" : "white"}>
-          <strong>{props.podcast.title}</strong>
-        </text>
+            <text fg={props.selected ? theme.primary : theme.text}>
+              <strong>{props.podcast.title}</strong>
+            </text>
 
         <Show when={props.podcast.isSubscribed}>
-          <text fg="green">[+]</text>
+            <text fg={theme.success}>[+]</text>
         </Show>
       </box>
 
       {/* Author */}
       <Show when={props.podcast.author && !props.compact}>
-        <text fg="gray">by {props.podcast.author}</text>
+            <text fg={theme.textMuted}>by {props.podcast.author}</text>
       </Show>
 
       {/* Description */}
       <Show when={props.podcast.description && !props.compact}>
-        <text fg={props.selected ? "white" : "gray"}>
+            <text fg={props.selected ? theme.text : theme.textMuted}>
           {props.podcast.description!.length > 80
             ? props.podcast.description!.slice(0, 80) + "..."
             : props.podcast.description}
@@ -59,14 +61,14 @@ export function PodcastCard(props: PodcastCardProps) {
         <box flexDirection="row" gap={1}>
           <Show when={(props.podcast.categories ?? []).length > 0}>
             <For each={(props.podcast.categories ?? []).slice(0, 2)}>
-              {(cat) => <text fg="yellow">[{cat}]</text>}
+                {(cat) => <text fg={theme.warning}>[{cat}]</text>}
             </For>
           </Show>
         </box>
 
         <Show when={props.selected}>
           <box onMouseDown={handleSubscribeClick}>
-            <text fg={props.podcast.isSubscribed ? "red" : "green"}>
+            <text fg={props.podcast.isSubscribed ? theme.error : theme.success}>
               {props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
             </text>
           </box>
diff --git a/src/pages/Feed/FeedDetail.tsx b/src/pages/Feed/FeedDetail.tsx
index 891bed6..dd3205e 100644
--- a/src/pages/Feed/FeedDetail.tsx
+++ b/src/pages/Feed/FeedDetail.tsx
@@ -8,6 +8,7 @@ import { useKeyboard } from "@opentui/solid";
 import type { Feed } from "@/types/feed";
 import type { Episode } from "@/types/episode";
 import { format } from "date-fns";
+import { useTheme } from "@/context/ThemeContext";
 
 interface FeedDetailProps {
   feed: Feed;
@@ -17,6 +18,7 @@ interface FeedDetailProps {
 }
 
 export function FeedDetail(props: FeedDetailProps) {
+  const { theme } = useTheme();
   const [selectedIndex, setSelectedIndex] = createSignal(0);
   const [showInfo, setShowInfo] = createSignal(true);
 
@@ -82,45 +84,45 @@ export function FeedDetail(props: FeedDetailProps) {
     <box flexDirection="column" gap={1}>
       {/* Header with back button */}
       <box flexDirection="row" justifyContent="space-between">
-        <box border padding={0} onMouseDown={props.onBack}>
-          <text fg="cyan">[Esc] Back</text>
+        <box border padding={0} onMouseDown={props.onBack} borderColor={theme.border}>
+            <text fg={theme.primary}>[Esc] Back</text>
         </box>
-        <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)}>
-          <text fg="cyan">[i] {showInfo() ? "Hide" : "Show"} Info</text>
+        <box border padding={0} onMouseDown={() => setShowInfo((v) => !v)} borderColor={theme.border}>
+            <text fg={theme.primary}>[i] {showInfo() ? "Hide" : "Show"} Info</text>
         </box>
       </box>
 
       {/* Podcast info section */}
       <Show when={showInfo()}>
-        <box border padding={1} flexDirection="column" gap={0}>
-          <text>
+        <box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
+          <text fg={theme.text}>
             <strong>{props.feed.customName || props.feed.podcast.title}</strong>
           </text>
           {props.feed.podcast.author && (
             <box flexDirection="row" gap={1}>
-              <text fg="gray">by</text>
-              <text fg="cyan">{props.feed.podcast.author}</text>
+                <text fg={theme.textMuted}>by</text>
+                <text fg={theme.primary}>{props.feed.podcast.author}</text>
             </box>
           )}
           <box height={1} />
-          <text fg="gray">
+          <text fg={theme.textMuted}>
             {props.feed.podcast.description?.slice(0, 200)}
             {(props.feed.podcast.description?.length || 0) > 200 ? "..." : ""}
           </text>
           <box height={1} />
           <box flexDirection="row" gap={2}>
             <box flexDirection="row" gap={1}>
-              <text fg="gray">Episodes:</text>
-              <text fg="white">{props.feed.episodes.length}</text>
+              <text fg={theme.textMuted}>Episodes:</text>
+              <text fg={theme.text}>{props.feed.episodes.length}</text>
             </box>
             <box flexDirection="row" gap={1}>
-              <text fg="gray">Updated:</text>
-              <text fg="white">{formatDate(props.feed.lastUpdated)}</text>
+              <text fg={theme.textMuted}>Updated:</text>
+              <text fg={theme.text}>{formatDate(props.feed.lastUpdated)}</text>
             </box>
-            <text fg={props.feed.visibility === "public" ? "green" : "yellow"}>
+            <text fg={props.feed.visibility === "public" ? theme.success : theme.warning}>
               {props.feed.visibility === "public" ? "[Public]" : "[Private]"}
             </text>
-            {props.feed.isPinned && <text fg="yellow">[Pinned]</text>}
+            {props.feed.isPinned && <text fg={theme.warning}>[Pinned]</text>}
           </box>
         </box>
       </Show>
@@ -141,7 +143,7 @@ export function FeedDetail(props: FeedDetailProps) {
               flexDirection="column"
               gap={0}
               padding={1}
-              backgroundColor={index() === selectedIndex() ? "#333" : undefined}
+                    backgroundColor={index() === selectedIndex() ? theme.backgroundElement : undefined}
               onMouseDown={() => {
                 setSelectedIndex(index());
                 if (props.onPlayEpisode) {
@@ -150,17 +152,17 @@ export function FeedDetail(props: FeedDetailProps) {
               }}
             >
               <box flexDirection="row" gap={1}>
-                <text fg={index() === selectedIndex() ? "cyan" : "gray"}>
-                  {index() === selectedIndex() ? ">" : " "}
-                </text>
-                <text fg={index() === selectedIndex() ? "white" : undefined}>
-                  {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
-                  {episode.title}
-                </text>
+                  <text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
+                    {index() === selectedIndex() ? ">" : " "}
+                  </text>
+                  <text fg={index() === selectedIndex() ? theme.text : undefined}>
+                    {episode.episodeNumber ? `#${episode.episodeNumber} - ` : ""}
+                    {episode.title}
+                  </text>
               </box>
               <box flexDirection="row" gap={2} paddingLeft={2}>
-                <text fg="gray">{formatDate(episode.pubDate)}</text>
-                <text fg="gray">{formatDuration(episode.duration)}</text>
+                  <text fg={theme.textMuted}>{formatDate(episode.pubDate)}</text>
+                  <text fg={theme.textMuted}>{formatDuration(episode.duration)}</text>
               </box>
             </box>
           )}
@@ -168,7 +170,7 @@ export function FeedDetail(props: FeedDetailProps) {
       </scrollbox>
 
       {/* Help text */}
-      <text fg="gray">
+      <text fg={theme.textMuted}>
         j/k to navigate, Enter to play, i to toggle info, Esc to go back
       </text>
     </box>
diff --git a/src/pages/Feed/FeedFilter.tsx b/src/pages/Feed/FeedFilter.tsx
index 666f455..20135a2 100644
--- a/src/pages/Feed/FeedFilter.tsx
+++ b/src/pages/Feed/FeedFilter.tsx
@@ -6,6 +6,7 @@
 import { createSignal } from "solid-js";
 import { FeedVisibility, FeedSortField } from "@/types/feed";
 import type { FeedFilter } from "@/types/feed";
+import { useTheme } from "@/context/ThemeContext";
 
 interface FeedFilterProps {
   filter: FeedFilter;
@@ -16,6 +17,7 @@ interface FeedFilterProps {
 type FilterField = "visibility" | "sort" | "pinned" | "search";
 
 export function FeedFilterComponent(props: FeedFilterProps) {
+  const { theme } = useTheme();
   const [focusField, setFocusField] = createSignal<FilterField>("visibility");
   const [searchValue, setSearchValue] = createSignal(
     props.filter.searchQuery || "",
@@ -89,9 +91,9 @@ export function FeedFilterComponent(props: FeedFilterProps) {
 
   const visibilityColor = () => {
     const vis = props.filter.visibility;
-    if (vis === "public") return "green";
-    if (vis === "private") return "yellow";
-    return "white";
+    if (vis === "public") return theme.success;
+    if (vis === "private") return theme.warning;
+    return theme.text;
   };
 
   const sortLabel = () => {
@@ -110,8 +112,8 @@ export function FeedFilterComponent(props: FeedFilterProps) {
   };
 
   return (
-    <box flexDirection="column" border padding={1} gap={1}>
-      <text>
+    <box flexDirection="column" border padding={1} gap={1} borderColor={theme.border}>
+      <text fg={theme.text}>
         <strong>Filter Feeds</strong>
       </text>
 
@@ -120,10 +122,11 @@ export function FeedFilterComponent(props: FeedFilterProps) {
         <box
           border
           padding={0}
-          backgroundColor={focusField() === "visibility" ? "#333" : undefined}
+            backgroundColor={focusField() === "visibility" ? theme.backgroundElement : undefined}
+            borderColor={theme.border}
         >
           <box flexDirection="row" gap={1}>
-            <text fg={focusField() === "visibility" ? "cyan" : "gray"}>
+            <text fg={focusField() === "visibility" ? theme.primary : theme.textMuted}>
               Show:
             </text>
             <text fg={visibilityColor()}>{visibilityLabel()}</text>
@@ -134,11 +137,11 @@ export function FeedFilterComponent(props: FeedFilterProps) {
         <box
           border
           padding={0}
-          backgroundColor={focusField() === "sort" ? "#333" : undefined}
+            backgroundColor={focusField() === "sort" ? theme.backgroundElement : undefined}
         >
           <box flexDirection="row" gap={1}>
-            <text fg={focusField() === "sort" ? "cyan" : "gray"}>Sort:</text>
-            <text fg="white">{sortLabel()}</text>
+            <text fg={focusField() === "sort" ? theme.primary : theme.textMuted}>Sort:</text>
+            <text fg={theme.text}>{sortLabel()}</text>
           </box>
         </box>
 
@@ -146,13 +149,13 @@ export function FeedFilterComponent(props: FeedFilterProps) {
         <box
           border
           padding={0}
-          backgroundColor={focusField() === "pinned" ? "#333" : undefined}
+            backgroundColor={focusField() === "pinned" ? theme.backgroundElement : undefined}
         >
           <box flexDirection="row" gap={1}>
-            <text fg={focusField() === "pinned" ? "cyan" : "gray"}>
+            <text fg={focusField() === "pinned" ? theme.primary : theme.textMuted}>
               Pinned:
             </text>
-            <text fg={props.filter.pinnedOnly ? "yellow" : "gray"}>
+            <text fg={props.filter.pinnedOnly ? theme.warning : theme.textMuted}>
               {props.filter.pinnedOnly ? "Yes" : "No"}
             </text>
           </box>
@@ -161,7 +164,7 @@ export function FeedFilterComponent(props: FeedFilterProps) {
 
       {/* Search box */}
       <box flexDirection="row" gap={1}>
-        <text fg={focusField() === "search" ? "cyan" : "gray"}>Search:</text>
+            <text fg={focusField() === "search" ? theme.primary : theme.textMuted}>Search:</text>
         <input
           value={searchValue()}
           onInput={handleSearchInput}
@@ -171,7 +174,7 @@ export function FeedFilterComponent(props: FeedFilterProps) {
         />
       </box>
 
-      <text fg="gray">Tab to navigate, Enter/Space to toggle</text>
+      <text fg={theme.textMuted}>Tab to navigate, Enter/Space to toggle</text>
     </box>
   );
 }
diff --git a/src/pages/Feed/FeedItem.tsx b/src/pages/Feed/FeedItem.tsx
index 02d2a96..20a87c7 100644
--- a/src/pages/Feed/FeedItem.tsx
+++ b/src/pages/Feed/FeedItem.tsx
@@ -31,12 +31,13 @@ export function FeedItem(props: FeedItemProps) {
   };
 
   const visibilityColor = () => {
-    return props.feed.visibility === "public" ? "green" : "yellow";
+    return props.feed.visibility === "public" ? theme.success : theme.warning;
   };
 
   const pinnedIndicator = () => {
     return props.feed.isPinned ? "*" : " ";
   };
+
   const { theme } = useTheme();
 
   if (props.compact) {
@@ -45,18 +46,18 @@ export function FeedItem(props: FeedItemProps) {
       <box
         flexDirection="row"
         gap={1}
-        backgroundColor={props.isSelected ? "#333" : undefined}
-        paddingLeft={1}
-        paddingRight={1}
-      >
-        <text fg={props.isSelected ? "cyan" : "gray"}>
-          {props.isSelected ? ">" : " "}
-        </text>
-        <text fg={visibilityColor()}>{visibilityIcon()}</text>
-        <text fg={props.isSelected ? "white" : theme.accent}>
-          {props.feed.customName || props.feed.podcast.title}
-        </text>
-        {props.showEpisodeCount && <text fg="gray">({episodeCount()})</text>}
+      backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text fg={props.isSelected ? theme.primary : theme.textMuted}>
+        {props.isSelected ? ">" : " "}
+      </text>
+      <text fg={visibilityColor()}>{visibilityIcon()}</text>
+      <text fg={props.isSelected ? theme.text : theme.accent}>
+        {props.feed.customName || props.feed.podcast.title}
+      </text>
+      {props.showEpisodeCount && <text fg={theme.textMuted}>({episodeCount()})</text>}
       </box>
     );
   }
@@ -67,18 +68,18 @@ export function FeedItem(props: FeedItemProps) {
       flexDirection="column"
       gap={0}
       border={props.isSelected}
-      borderColor={props.isSelected ? "cyan" : undefined}
-      backgroundColor={props.isSelected ? "#222" : undefined}
+      borderColor={props.isSelected ? theme.primary : undefined}
+      backgroundColor={props.isSelected ? theme.backgroundElement : undefined}
       padding={1}
     >
       {/* Title row */}
       <box flexDirection="row" gap={1}>
-        <text fg={props.isSelected ? "cyan" : "gray"}>
+        <text fg={props.isSelected ? theme.primary : theme.textMuted}>
           {props.isSelected ? ">" : " "}
         </text>
         <text fg={visibilityColor()}>{visibilityIcon()}</text>
-        <text fg="yellow">{pinnedIndicator()}</text>
-        <text fg={props.isSelected ? "white" : theme.text}>
+        <text fg={theme.warning}>{pinnedIndicator()}</text>
+        <text fg={props.isSelected ? theme.text : theme.text}>
           <strong>
             {props.feed.customName || props.feed.podcast.title}
           </strong>
@@ -87,18 +88,18 @@ export function FeedItem(props: FeedItemProps) {
 
       <box flexDirection="row" gap={2} paddingLeft={4}>
         {props.showEpisodeCount && (
-          <text fg="gray">
+          <text fg={theme.textMuted}>
             {episodeCount()} episodes ({unplayedCount()} new)
           </text>
         )}
         {props.showLastUpdated && (
-          <text fg="gray">Updated: {formatDate(props.feed.lastUpdated)}</text>
+          <text fg={theme.textMuted}>Updated: {formatDate(props.feed.lastUpdated)}</text>
         )}
       </box>
 
       {props.feed.podcast.description && (
         <box paddingLeft={4} paddingTop={0}>
-          <text fg="gray">
+          <text fg={theme.textMuted}>
             {props.feed.podcast.description.slice(0, 60)}
             {props.feed.podcast.description.length > 60 ? "..." : ""}
           </text>
diff --git a/src/pages/Feed/FeedList.tsx b/src/pages/Feed/FeedList.tsx
index 8b6c3b5..6d9fe4b 100644
--- a/src/pages/Feed/FeedList.tsx
+++ b/src/pages/Feed/FeedList.tsx
@@ -9,6 +9,7 @@ import { FeedItem } from "./FeedItem";
 import { useFeedStore } from "@/stores/feed";
 import { FeedVisibility, FeedSortField } from "@/types/feed";
 import type { Feed } from "@/types/feed";
+import { useTheme } from "@/context/ThemeContext";
 
 interface FeedListProps {
   focused?: boolean;
@@ -21,6 +22,7 @@ interface FeedListProps {
 }
 
 export function FeedList(props: FeedListProps) {
+  const { theme } = useTheme();
   const feedStore = useFeedStore();
   const [selectedIndex, setSelectedIndex] = createSignal(0);
 
@@ -136,26 +138,26 @@ export function FeedList(props: FeedListProps) {
     <box flexDirection="column" gap={1}>
       {/* Header with filter controls */}
       <box flexDirection="row" justifyContent="space-between" paddingBottom={0}>
-        <text>
+        <text fg={theme.text}>
           <strong>My Feeds</strong>
         </text>
-        <text fg="gray">({filteredFeeds().length} feeds)</text>
-        <box flexDirection="row" gap={1}>
-          <box border padding={0} onMouseDown={cycleVisibilityFilter}>
-            <text fg="cyan">[f] {visibilityLabel()}</text>
-          </box>
-          <box border padding={0} onMouseDown={cycleSortField}>
-            <text fg="cyan">[s] {sortLabel()}</text>
-          </box>
-        </box>
+            <text fg={theme.textMuted}>({filteredFeeds().length} feeds)</text>
+            <box flexDirection="row" gap={1}>
+              <box border padding={0} onMouseDown={cycleVisibilityFilter} borderColor={theme.border}>
+                <text fg={theme.primary}>[f] {visibilityLabel()}</text>
+              </box>
+              <box border padding={0} onMouseDown={cycleSortField} borderColor={theme.border}>
+                <text fg={theme.primary}>[s] {sortLabel()}</text>
+              </box>
+            </box>
       </box>
 
       {/* Feed list in scrollbox */}
       <Show
         when={filteredFeeds().length > 0}
         fallback={
-          <box border padding={2}>
-            <text fg="gray">
+          <box border padding={2} borderColor={theme.border}>
+            <text fg={theme.textMuted}>
               No feeds found. Add podcasts from the Discover or Search tabs.
             </text>
           </box>
@@ -180,9 +182,9 @@ export function FeedList(props: FeedListProps) {
 
       {/* Navigation help */}
       <box paddingTop={0}>
-        <text fg="gray">
-          Enter open | Esc up | j/k navigate | p pin | f filter | s sort
-        </text>
+          <text fg={theme.textMuted}>
+            Enter open | Esc up | j/k navigate | p pin | f filter | s sort
+          </text>
       </box>
     </box>
   );
diff --git a/src/pages/Feed/FeedPage.tsx b/src/pages/Feed/FeedPage.tsx
index 2292885..9c40ebe 100644
--- a/src/pages/Feed/FeedPage.tsx
+++ b/src/pages/Feed/FeedPage.tsx
@@ -50,14 +50,14 @@ export function FeedPage(props: PageProps) {
     >
       {/* Status line */}
       <Show when={isRefreshing()}>
-        <text fg="yellow">Refreshing feeds...</text>
+        <text fg={theme.warning}>Refreshing feeds...</text>
       </Show>
 
       <Show
         when={allEpisodes().length > 0}
         fallback={
           <box padding={2}>
-            <text fg="gray">
+            <text fg={theme.textMuted}>
               No episodes yet. Subscribe to shows from Discover or Search.
             </text>
           </box>
@@ -75,22 +75,22 @@ export function FeedPage(props: PageProps) {
                 paddingTop={0}
                 paddingBottom={0}
                 backgroundColor={
-                  index() === selectedIndex() ? "#333" : undefined
+                  index() === selectedIndex() ? theme.backgroundElement : undefined
                 }
                 onMouseDown={() => setSelectedIndex(index())}
               >
                 <box flexDirection="row" gap={1}>
-                  <text fg={index() === selectedIndex() ? "cyan" : "gray"}>
+                  <text fg={index() === selectedIndex() ? theme.primary : theme.textMuted}>
                     {index() === selectedIndex() ? ">" : " "}
                   </text>
-                  <text fg={index() === selectedIndex() ? "white" : theme.text}>
+                  <text fg={index() === selectedIndex() ? theme.text : theme.text}>
                     {item.episode.title}
                   </text>
                 </box>
                 <box flexDirection="row" gap={2} paddingLeft={2}>
-                  <text fg="cyan">{item.feed.podcast.title}</text>
-                  <text fg="gray">{formatDate(item.episode.pubDate)}</text>
-                  <text fg="gray">{formatDuration(item.episode.duration)}</text>
+                  <text fg={theme.primary}>{item.feed.podcast.title}</text>
+                  <text fg={theme.textMuted}>{formatDate(item.episode.pubDate)}</text>
+                  <text fg={theme.textMuted}>{formatDuration(item.episode.duration)}</text>
                 </box>
               </box>
             )}
diff --git a/src/pages/Player/PlaybackControls.tsx b/src/pages/Player/PlaybackControls.tsx
index 93e8256..0e7bf33 100644
--- a/src/pages/Player/PlaybackControls.tsx
+++ b/src/pages/Player/PlaybackControls.tsx
@@ -1,4 +1,5 @@
 import type { BackendName } from "../utils/audio-player"
+import { useTheme } from "@/context/ThemeContext"
 
 type PlaybackControlsProps = {
   isPlaying: boolean
@@ -22,39 +23,40 @@ const BACKEND_LABELS: Record<BackendName, string> = {
 }
 
 export function PlaybackControls(props: PlaybackControlsProps) {
+  const { theme } = useTheme();
   return (
-    <box flexDirection="row" gap={1} alignItems="center" border padding={1}>
-      <box border padding={0} onMouseDown={props.onPrev}>
-        <text fg="cyan">[Prev]</text>
+    <box flexDirection="row" gap={1} alignItems="center" border padding={1} borderColor={theme.border}>
+      <box border padding={0} onMouseDown={props.onPrev} borderColor={theme.border}>
+        <text fg={theme.primary}>[Prev]</text>
       </box>
-      <box border padding={0} onMouseDown={props.onToggle}>
-        <text fg="cyan">{props.isPlaying ? "[Pause]" : "[Play]"}</text>
+      <box border padding={0} onMouseDown={props.onToggle} borderColor={theme.border}>
+        <text fg={theme.primary}>{props.isPlaying ? "[Pause]" : "[Play]"}</text>
       </box>
-      <box border padding={0} onMouseDown={props.onNext}>
-        <text fg="cyan">[Next]</text>
+      <box border padding={0} onMouseDown={props.onNext} borderColor={theme.border}>
+        <text fg={theme.primary}>[Next]</text>
       </box>
       <box flexDirection="row" gap={1} marginLeft={2}>
-        <text fg="gray">Vol</text>
-        <text fg="white">{Math.round(props.volume * 100)}%</text>
+        <text fg={theme.textMuted}>Vol</text>
+        <text fg={theme.text}>{Math.round(props.volume * 100)}%</text>
       </box>
       <box flexDirection="row" gap={1} marginLeft={2}>
-        <text fg="gray">Speed</text>
-        <text fg="white">{props.speed}x</text>
+        <text fg={theme.textMuted}>Speed</text>
+        <text fg={theme.text}>{props.speed}x</text>
       </box>
       {props.backendName && props.backendName !== "none" && (
         <box flexDirection="row" gap={1} marginLeft={2}>
-          <text fg="gray">via</text>
-          <text fg="cyan">{BACKEND_LABELS[props.backendName]}</text>
+          <text fg={theme.textMuted}>via</text>
+          <text fg={theme.primary}>{BACKEND_LABELS[props.backendName]}</text>
         </box>
       )}
       {props.backendName === "none" && (
         <box marginLeft={2}>
-          <text fg="yellow">No audio player found</text>
+          <text fg={theme.warning}>No audio player found</text>
         </box>
       )}
       {props.hasAudioUrl === false && (
         <box marginLeft={2}>
-          <text fg="yellow">No audio URL</text>
+          <text fg={theme.warning}>No audio URL</text>
         </box>
       )}
     </box>
diff --git a/src/pages/Search/ResultCard.tsx b/src/pages/Search/ResultCard.tsx
index 5cc09be..5f6f060 100644
--- a/src/pages/Search/ResultCard.tsx
+++ b/src/pages/Search/ResultCard.tsx
@@ -1,6 +1,7 @@
 import { Show } from "solid-js";
 import type { SearchResult } from "@/types/source";
 import { SourceBadge } from "./SourceBadge";
+import { useTheme } from "@/context/ThemeContext";
 
 type ResultCardProps = {
   result: SearchResult;
@@ -10,6 +11,7 @@ type ResultCardProps = {
 };
 
 export function ResultCard(props: ResultCardProps) {
+  const { theme } = useTheme();
   const podcast = () => props.result.podcast;
 
   return (
@@ -17,8 +19,8 @@ export function ResultCard(props: ResultCardProps) {
       flexDirection="column"
       padding={1}
       border={props.selected}
-      borderColor={props.selected ? "cyan" : undefined}
-      backgroundColor={props.selected ? "#222" : undefined}
+      borderColor={props.selected ? theme.primary : undefined}
+      backgroundColor={props.selected ? theme.backgroundElement : undefined}
       onMouseDown={props.onSelect}
     >
       <box
@@ -27,9 +29,9 @@ export function ResultCard(props: ResultCardProps) {
         alignItems="center"
       >
         <box flexDirection="row" gap={2} alignItems="center">
-          <text fg={props.selected ? "cyan" : "white"}>
-            <strong>{podcast().title}</strong>
-          </text>
+            <text fg={props.selected ? theme.primary : theme.text}>
+              <strong>{podcast().title}</strong>
+            </text>
           <SourceBadge
             sourceId={props.result.sourceId}
             sourceName={props.result.sourceName}
@@ -37,17 +39,17 @@ export function ResultCard(props: ResultCardProps) {
           />
         </box>
         <Show when={podcast().isSubscribed}>
-          <text fg="green">[Subscribed]</text>
+            <text fg={theme.success}>[Subscribed]</text>
         </Show>
       </box>
 
       <Show when={podcast().author}>
-        <text fg="gray">by {podcast().author}</text>
+            <text fg={theme.textMuted}>by {podcast().author}</text>
       </Show>
 
       <Show when={podcast().description}>
         {(description) => (
-          <text fg={props.selected ? "white" : "gray"}>
+            <text fg={props.selected ? theme.text : theme.textMuted}>
             {description().length > 120
               ? description().slice(0, 120) + "..."
               : description()}
@@ -58,7 +60,7 @@ export function ResultCard(props: ResultCardProps) {
       <Show when={(podcast().categories ?? []).length > 0}>
         <box flexDirection="row" gap={1}>
           {(podcast().categories ?? []).slice(0, 3).map((category) => (
-            <text fg="yellow">[{category}]</text>
+            <text fg={theme.warning}>[{category}]</text>
           ))}
         </box>
       </Show>
@@ -75,7 +77,7 @@ export function ResultCard(props: ResultCardProps) {
             props.onSubscribe?.();
           }}
         >
-          <text fg="cyan">[+] Add to Feeds</text>
+            <text fg={theme.primary}>[+] Add to Feeds</text>
         </box>
       </Show>
     </box>
diff --git a/src/pages/Search/ResultDetail.tsx b/src/pages/Search/ResultDetail.tsx
index b61e47d..531cc67 100644
--- a/src/pages/Search/ResultDetail.tsx
+++ b/src/pages/Search/ResultDetail.tsx
@@ -2,6 +2,7 @@ import { Show } from "solid-js";
 import { format } from "date-fns";
 import type { SearchResult } from "@/types/source";
 import { SourceBadge } from "./SourceBadge";
+import { useTheme } from "@/context/ThemeContext";
 
 type ResultDetailProps = {
   result?: SearchResult;
@@ -9,15 +10,16 @@ type ResultDetailProps = {
 };
 
 export function ResultDetail(props: ResultDetailProps) {
+  const { theme } = useTheme();
   return (
-    <box flexDirection="column" border padding={1} gap={1} height="100%">
+    <box flexDirection="column" border padding={1} gap={1} height="100%" borderColor={theme.border}>
       <Show
         when={props.result}
-        fallback={<text fg="gray">Select a result to see details.</text>}
+        fallback={          <text fg={theme.textMuted}>Select a result to see details.</text>}
       >
         {(result) => (
           <>
-            <text fg="white">
+            <text fg={theme.text}>
               <strong>{result().podcast.title}</strong>
             </text>
 
@@ -28,24 +30,24 @@ export function ResultDetail(props: ResultDetailProps) {
             />
 
             <Show when={result().podcast.author}>
-              <text fg="gray">by {result().podcast.author}</text>
+              <text fg={theme.textMuted}>by {result().podcast.author}</text>
             </Show>
 
             <Show when={result().podcast.description}>
-              <text fg="gray">{result().podcast.description}</text>
+              <text fg={theme.textMuted}>{result().podcast.description}</text>
             </Show>
 
             <Show when={(result().podcast.categories ?? []).length > 0}>
               <box flexDirection="row" gap={1}>
                 {(result().podcast.categories ?? []).map((category) => (
-                  <text fg="yellow">[{category}]</text>
+                  <text fg={theme.warning}>[{category}]</text>
                 ))}
               </box>
             </Show>
 
-            <text fg="gray">Feed: {result().podcast.feedUrl}</text>
+            <text fg={theme.textMuted}>Feed: {result().podcast.feedUrl}</text>
 
-            <text fg="gray">
+            <text fg={theme.textMuted}>
               Updated: {format(result().podcast.lastUpdated, "MMM d, yyyy")}
             </text>
 
@@ -58,12 +60,12 @@ export function ResultDetail(props: ResultDetailProps) {
                 width={18}
                 onMouseDown={() => props.onSubscribe?.(result())}
               >
-                <text fg="cyan">[+] Add to Feeds</text>
+                  <text fg={theme.primary}>[+] Add to Feeds</text>
               </box>
             </Show>
 
             <Show when={result().podcast.isSubscribed}>
-              <text fg="green">Already subscribed</text>
+              <text fg={theme.success}>Already subscribed</text>
             </Show>
           </>
         )}
diff --git a/src/pages/Search/SearchHistory.tsx b/src/pages/Search/SearchHistory.tsx
index d8e36dd..6b3d338 100644
--- a/src/pages/Search/SearchHistory.tsx
+++ b/src/pages/Search/SearchHistory.tsx
@@ -3,6 +3,7 @@
  */
 
 import { For, Show } from "solid-js"
+import { useTheme } from "@/context/ThemeContext"
 
 type SearchHistoryProps = {
   history: string[]
@@ -15,6 +16,7 @@ type SearchHistoryProps = {
 }
 
 export function SearchHistory(props: SearchHistoryProps) {
+  const { theme } = useTheme();
   const handleSearchClick = (index: number, query: string) => {
     props.onChange?.(index)
     props.onSelect?.(query)
@@ -27,19 +29,19 @@ export function SearchHistory(props: SearchHistoryProps) {
   return (
     <box flexDirection="column" gap={1}>
       <box flexDirection="row" justifyContent="space-between">
-        <text fg="gray">Recent Searches</text>
-        <Show when={props.history.length > 0}>
-          <box onMouseDown={() => props.onClear?.()} padding={0}>
-            <text fg="red">[Clear All]</text>
-          </box>
-        </Show>
+            <text fg={theme.textMuted}>Recent Searches</text>
+            <Show when={props.history.length > 0}>
+              <box onMouseDown={() => props.onClear?.()} padding={0}>
+                <text fg={theme.error}>[Clear All]</text>
+              </box>
+            </Show>
       </box>
 
       <Show
         when={props.history.length > 0}
         fallback={
           <box padding={1}>
-            <text fg="gray">No recent searches</text>
+            <text fg={theme.textMuted}>No recent searches</text>
           </box>
         }
       >
@@ -56,15 +58,15 @@ export function SearchHistory(props: SearchHistoryProps) {
                     padding={0}
                     paddingLeft={1}
                     paddingRight={1}
-                    backgroundColor={isSelected() ? "#333" : undefined}
+                    backgroundColor={isSelected() ? theme.backgroundElement : undefined}
                     onMouseDown={() => handleSearchClick(index(), query)}
                   >
                     <box flexDirection="row" gap={1}>
-                      <text fg="gray">{">"}</text>
-                      <text fg={isSelected() ? "cyan" : "white"}>{query}</text>
+                      <text fg={theme.textMuted}>{">"}</text>
+                      <text fg={isSelected() ? theme.primary : theme.text}>{query}</text>
                     </box>
                     <box onMouseDown={() => handleRemoveClick(query)} padding={0}>
-                      <text fg="red">[x]</text>
+                      <text fg={theme.error}>[x]</text>
                     </box>
                   </box>
                 )
diff --git a/src/pages/Search/SourceBadge.tsx b/src/pages/Search/SourceBadge.tsx
index 6f65b2a..fc90246 100644
--- a/src/pages/Search/SourceBadge.tsx
+++ b/src/pages/Search/SourceBadge.tsx
@@ -1,4 +1,5 @@
 import { SourceType } from "@/types/source";
+import { useTheme } from "@/context/ThemeContext";
 
 type SourceBadgeProps = {
   sourceId: string;
@@ -14,21 +15,29 @@ const typeLabel = (sourceType?: SourceType) => {
 };
 
 const typeColor = (sourceType?: SourceType) => {
-  if (sourceType === SourceType.API) return "cyan";
-  if (sourceType === SourceType.RSS) return "green";
-  if (sourceType === SourceType.CUSTOM) return "yellow";
-  return "gray";
+  if (sourceType === SourceType.API) return theme.primary;
+  if (sourceType === SourceType.RSS) return theme.success;
+  if (sourceType === SourceType.CUSTOM) return theme.warning;
+  return theme.textMuted;
 };
 
 export function SourceBadge(props: SourceBadgeProps) {
+  const { theme } = useTheme();
   const label = () => props.sourceName || props.sourceId;
 
+  const typeColor = (sourceType?: SourceType) => {
+    if (sourceType === SourceType.API) return theme.primary;
+    if (sourceType === SourceType.RSS) return theme.success;
+    if (sourceType === SourceType.CUSTOM) return theme.warning;
+    return theme.textMuted;
+  };
+
   return (
     <box flexDirection="row" gap={1} padding={0}>
       <text fg={typeColor(props.sourceType)}>
         [{typeLabel(props.sourceType)}]
       </text>
-      <text fg="gray">{label()}</text>
+      <text fg={theme.textMuted}>{label()}</text>
     </box>
   );
 }
diff --git a/src/pages/Settings/OAuthPlaceholder.tsx b/src/pages/Settings/OAuthPlaceholder.tsx
index c1786ab..840e981 100644
--- a/src/pages/Settings/OAuthPlaceholder.tsx
+++ b/src/pages/Settings/OAuthPlaceholder.tsx
@@ -5,6 +5,7 @@
 
 import { createSignal } from "solid-js";
 import { OAUTH_PROVIDERS, OAUTH_LIMITATION_MESSAGE } from "@/config/auth";
+import { useTheme } from "@/context/ThemeContext";
 
 interface OAuthPlaceholderProps {
   focused?: boolean;
@@ -15,6 +16,7 @@ interface OAuthPlaceholderProps {
 type FocusField = "code" | "back";
 
 export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
+  const { theme } = useTheme();
   const [focusField, setFocusField] = createSignal<FocusField>("code");
 
   const fields: FocusField[] = ["code", "back"];
@@ -38,23 +40,23 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
   };
 
   return (
-    <box flexDirection="column" border padding={2} gap={1}>
-      <text>
+    <box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
+      <text fg={theme.text}>
         <strong>OAuth Authentication</strong>
       </text>
 
       <box height={1} />
 
       {/* OAuth providers list */}
-      <text fg="cyan">Available OAuth Providers:</text>
+      <text fg={theme.primary}>Available OAuth Providers:</text>
 
       <box flexDirection="column" gap={0} paddingLeft={2}>
         {OAUTH_PROVIDERS.map((provider) => (
           <box flexDirection="row" gap={1}>
-            <text fg={provider.enabled ? "green" : "gray"}>
+            <text fg={provider.enabled ? theme.success : theme.textMuted}>
               {provider.enabled ? "[+]" : "[-]"} {provider.name}
             </text>
-            <text fg="gray">- {provider.description}</text>
+            <text fg={theme.textMuted}>- {provider.description}</text>
           </box>
         ))}
       </box>
@@ -62,33 +64,29 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
       <box height={1} />
 
       {/* Limitation message */}
-      <box border padding={1} borderColor="yellow">
-        <text fg="yellow">Terminal Limitations</text>
+      <box border padding={1} borderColor={theme.warning}>
+        <text fg={theme.warning}>Terminal Limitations</text>
       </box>
 
       <box paddingLeft={1}>
         {OAUTH_LIMITATION_MESSAGE.split("\n").map((line) => (
-          <text fg="gray">{line}</text>
+          <text fg={theme.textMuted}>{line}</text>
         ))}
       </box>
 
       <box height={1} />
 
       {/* Alternative options */}
-      <text fg="cyan">Recommended Alternatives:</text>
+      <text fg={theme.primary}>Recommended Alternatives:</text>
 
       <box flexDirection="column" gap={0} paddingLeft={2}>
         <box flexDirection="row" gap={1}>
-          <text fg="green">[1]</text>
-          <text fg="white">Use a sync code from the web portal</text>
-        </box>
-        <box flexDirection="row" gap={1}>
-          <text fg="green">[2]</text>
-          <text fg="white">Use email/password authentication</text>
-        </box>
-        <box flexDirection="row" gap={1}>
-          <text fg="green">[3]</text>
-          <text fg="white">Use file-based sync (no account needed)</text>
+            <text fg={theme.success}>[1]</text>
+            <text fg={theme.text}>Use a sync code from the web portal</text>
+            <text fg={theme.success}>[2]</text>
+            <text fg={theme.text}>Use email/password authentication</text>
+            <text fg={theme.success}>[3]</text>
+            <text fg={theme.text}>Use file-based sync (no account needed)</text>
         </box>
       </box>
 
@@ -99,9 +97,9 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
         <box
           border
           padding={1}
-          backgroundColor={focusField() === "code" ? "#333" : undefined}
+            backgroundColor={focusField() === "code" ? theme.backgroundElement : undefined}
         >
-          <text fg={focusField() === "code" ? "cyan" : undefined}>
+            <text fg={focusField() === "code" ? theme.primary : undefined}>
             [C] Enter Sync Code
           </text>
         </box>
@@ -109,9 +107,9 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
         <box
           border
           padding={1}
-          backgroundColor={focusField() === "back" ? "#333" : undefined}
+            backgroundColor={focusField() === "back" ? theme.backgroundElement : undefined}
         >
-          <text fg={focusField() === "back" ? "yellow" : "gray"}>
+            <text fg={focusField() === "back" ? theme.warning : theme.textMuted}>
             [Esc] Back to Login
           </text>
         </box>
@@ -119,7 +117,7 @@ export function OAuthPlaceholder(props: OAuthPlaceholderProps) {
 
       <box height={1} />
 
-      <text fg="gray">Tab to navigate, Enter to select, Esc to go back</text>
+      <text fg={theme.textMuted}>Tab to navigate, Enter to select, Esc to go back</text>
     </box>
   );
 }
diff --git a/src/pages/Settings/SyncProfile.tsx b/src/pages/Settings/SyncProfile.tsx
index 648ca5f..031ddd9 100644
--- a/src/pages/Settings/SyncProfile.tsx
+++ b/src/pages/Settings/SyncProfile.tsx
@@ -6,6 +6,7 @@
 import { createSignal } from "solid-js";
 import { useAuthStore } from "@/stores/auth";
 import { format } from "date-fns";
+import { useTheme } from "@/context/ThemeContext";
 
 interface SyncProfileProps {
   focused?: boolean;
@@ -17,6 +18,7 @@ type FocusField = "sync" | "export" | "logout";
 
 export function SyncProfile(props: SyncProfileProps) {
   const auth = useAuthStore();
+  const { theme } = useTheme();
   const [focusField, setFocusField] = createSignal<FocusField>("sync");
   const [lastSyncTime] = createSignal<Date | null>(new Date());
 
@@ -59,8 +61,8 @@ export function SyncProfile(props: SyncProfileProps) {
   };
 
   return (
-    <box flexDirection="column" border padding={2} gap={1}>
-      <text>
+    <box flexDirection="column" border padding={2} gap={1} borderColor={theme.border}>
+      <text fg={theme.text}>
         <strong>User Profile</strong>
       </text>
 
@@ -77,38 +79,38 @@ export function SyncProfile(props: SyncProfileProps) {
           justifyContent="center"
           alignItems="center"
         >
-          <text fg="cyan">{userInitials()}</text>
+          <text fg={theme.primary}>{userInitials()}</text>
         </box>
 
         {/* User details */}
         <box flexDirection="column" gap={0}>
-          <text fg="white">{user()?.name || "Guest User"}</text>
-          <text fg="gray">{user()?.email || "No email"}</text>
-          <text fg="gray">Joined: {formatDate(user()?.createdAt)}</text>
+            <text fg={theme.text}>{user()?.name || "Guest User"}</text>
+            <text fg={theme.textMuted}>{user()?.email || "No email"}</text>
+            <text fg={theme.textMuted}>Joined: {formatDate(user()?.createdAt)}</text>
         </box>
       </box>
 
       <box height={1} />
 
       {/* Sync status section */}
-      <box border padding={1} flexDirection="column" gap={0}>
-        <text fg="cyan">Sync Status</text>
+      <box border padding={1} flexDirection="column" gap={0} borderColor={theme.border}>
+        <text fg={theme.primary}>Sync Status</text>
 
         <box flexDirection="row" gap={1}>
-          <text fg="gray">Status:</text>
-          <text fg={user()?.syncEnabled ? "green" : "yellow"}>
-            {user()?.syncEnabled ? "Enabled" : "Disabled"}
-          </text>
+            <text fg={theme.textMuted}>Status:</text>
+            <text fg={user()?.syncEnabled ? theme.success : theme.warning}>
+              {user()?.syncEnabled ? "Enabled" : "Disabled"}
+            </text>
         </box>
 
         <box flexDirection="row" gap={1}>
-          <text fg="gray">Last Sync:</text>
-          <text fg="white">{formatDate(lastSyncTime())}</text>
+            <text fg={theme.textMuted}>Last Sync:</text>
+            <text fg={theme.text}>{formatDate(lastSyncTime())}</text>
         </box>
 
         <box flexDirection="row" gap={1}>
-          <text fg="gray">Method:</text>
-          <text fg="white">File-based (JSON/XML)</text>
+            <text fg={theme.textMuted}>Method:</text>
+            <text fg={theme.text}>File-based (JSON/XML)</text>
         </box>
       </box>
 
@@ -119,9 +121,9 @@ export function SyncProfile(props: SyncProfileProps) {
         <box
           border
           padding={1}
-          backgroundColor={focusField() === "sync" ? "#333" : undefined}
+            backgroundColor={focusField() === "sync" ? theme.backgroundElement : undefined}
         >
-          <text fg={focusField() === "sync" ? "cyan" : undefined}>
+            <text fg={focusField() === "sync" ? theme.primary : undefined}>
             [S] Manage Sync
           </text>
         </box>
@@ -129,9 +131,9 @@ export function SyncProfile(props: SyncProfileProps) {
         <box
           border
           padding={1}
-          backgroundColor={focusField() === "export" ? "#333" : undefined}
+            backgroundColor={focusField() === "export" ? theme.backgroundElement : undefined}
         >
-          <text fg={focusField() === "export" ? "cyan" : undefined}>
+            <text fg={focusField() === "export" ? theme.primary : undefined}>
             [E] Export Data
           </text>
         </box>
@@ -139,9 +141,9 @@ export function SyncProfile(props: SyncProfileProps) {
         <box
           border
           padding={1}
-          backgroundColor={focusField() === "logout" ? "#333" : undefined}
+            backgroundColor={focusField() === "logout" ? theme.backgroundElement : undefined}
         >
-          <text fg={focusField() === "logout" ? "red" : "gray"}>
+            <text fg={focusField() === "logout" ? theme.error : theme.textMuted}>
             [L] Logout
           </text>
         </box>
@@ -149,7 +151,7 @@ export function SyncProfile(props: SyncProfileProps) {
 
       <box height={1} />
 
-      <text fg="gray">Tab to navigate, Enter to select</text>
+      <text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
     </box>
   );
 }
diff --git a/src/ui/command.tsx b/src/ui/command.tsx
index d035ce6..af8ae6d 100644
--- a/src/ui/command.tsx
+++ b/src/ui/command.tsx
@@ -270,7 +270,7 @@ function CommandDialog(props: {
   const maxHeight = Math.floor(dimensions().height * 0.6);
 
   return (
-    <box flexDirection="column" padding={1}>
+    <box flexDirection="column" padding={1} borderColor={theme.border}>
       {/* Search input */}
       <box marginBottom={1}>
         <text fg={theme.textMuted}>{"> "}</text>
@@ -278,7 +278,7 @@ function CommandDialog(props: {
       </box>
 
       {/* Command list */}
-      <box flexDirection="column" maxHeight={maxHeight}>
+      <box flexDirection="column" maxHeight={maxHeight} borderColor={theme.border}>
         <For each={filteredOptions().slice(0, 10)}>
           {(option, index) => (
             <box
diff --git a/src/ui/dialog.tsx b/src/ui/dialog.tsx
index 85d15f4..e86754f 100644
--- a/src/ui/dialog.tsx
+++ b/src/ui/dialog.tsx
@@ -46,6 +46,7 @@ export function Dialog(
         maxWidth={dimensions().width - 2}
         backgroundColor={theme.backgroundPanel}
         paddingTop={1}
+        borderColor={theme.border}
       >
         {props.children}
       </box>