diff --git a/src/components/ChatViewer.tsx b/src/components/ChatViewer.tsx
index 3d12ea2..1f07619 100644
--- a/src/components/ChatViewer.tsx
+++ b/src/components/ChatViewer.tsx
@@ -896,7 +896,7 @@ export function ChatViewer({
                     </div>
                     {/* Description */}
                     {conversation.metadata?.description && (
-                      <p className="text-xs text-primary-foreground/90">
+                      <p className="text-xs opacity-90">
                         {conversation.metadata.description}
                       </p>
                     )}
@@ -909,22 +909,22 @@ export function ChatViewer({
                             e.stopPropagation();
                             handleNipClick();
                           }}
-                          className="rounded bg-primary-foreground/20 px-1.5 py-0.5 font-mono hover:bg-primary-foreground/30 transition-colors cursor-pointer text-primary-foreground"
+                          className="rounded bg-tooltip-foreground/20 px-1.5 py-0.5 font-mono hover:bg-tooltip-foreground/30 transition-colors cursor-pointer"
                         >
                           {conversation.protocol.toUpperCase()}
                         </button>
                       )}
                       {(conversation.type === "group" ||
                         conversation.type === "live-chat") && (
-                        <span className="text-primary-foreground/60">•</span>
+                        <span className="opacity-60">•</span>
                       )}
                       {conversation.protocol === "nip-10" ? (
-                        <span className="flex items-center gap-1 text-primary-foreground/80">
+                        <span className="flex items-center gap-1 opacity-80">
                           <FileText className="size-3" />
                           Thread
                         </span>
                       ) : (
-                        <span className="capitalize text-primary-foreground/80">
+                        <span className="capitalize opacity-80">
                           {conversation.type}
                         </span>
                       )}
@@ -932,19 +932,17 @@ export function ChatViewer({
                     {/* Live Activity Status */}
                     {liveActivity?.status && (
                       <div className="flex items-center gap-1.5 text-xs">
-                        <span className="text-primary-foreground/80">
-                          Status:
-                        </span>
+                        <span className="opacity-80">Status:</span>
                         <StatusBadge status={liveActivity.status} size="xs" />
                       </div>
                     )}
                     {/* Host Info */}
                     {liveActivity?.hostPubkey && (
-                      <div className="flex items-center gap-1.5 text-xs text-primary-foreground/80">
+                      <div className="flex items-center gap-1.5 text-xs opacity-80">
                         <span>Host:</span>
                         <UserName
                           pubkey={liveActivity.hostPubkey}
-                          className="text-xs text-primary-foreground"
+                          className="text-xs"
                         />
                       </div>
                     )}
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 40aaf57..912178d 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 overflow-hidden bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
+        "z-50 overflow-hidden rounded-md bg-tooltip px-3 py-1.5 text-xs text-tooltip-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]",
         className,
       )}
       {...props}
diff --git a/src/index.css b/src/index.css
index 76a9407..a6d4f1a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -65,6 +65,10 @@
     /* UI highlight (active user, self-references) */
     --highlight: 25 90% 35%;
 
+    /* Tooltip colors */
+    --tooltip: 222.2 47.4% 11.2%;
+    --tooltip-foreground: 210 40% 98%;
+
     /* Syntax highlighting */
     --syntax-comment: 215.4 16.3% 46.9%;
     --syntax-punctuation: 222.2 84% 30%;
@@ -129,6 +133,10 @@
     /* UI highlight (active user, self-references) */
     --highlight: 27 96% 61%;
 
+    /* Tooltip colors */
+    --tooltip: 217.2 32.6% 30%;
+    --tooltip-foreground: 210 40% 98%;
+
     /* Syntax highlighting */
     --syntax-comment: 215 20.2% 70%;
     --syntax-punctuation: 210 40% 70%;
diff --git a/src/lib/themes/apply.ts b/src/lib/themes/apply.ts
index 0900fb0..b79a176 100644
--- a/src/lib/themes/apply.ts
+++ b/src/lib/themes/apply.ts
@@ -60,6 +60,13 @@ export function applyTheme(theme: Theme): void {
   // UI highlight color
   root.style.setProperty("--highlight", theme.colors.highlight);
 
+  // Tooltip colors
+  root.style.setProperty("--tooltip", theme.colors.tooltip);
+  root.style.setProperty(
+    "--tooltip-foreground",
+    theme.colors.tooltipForeground,
+  );
+
   // Syntax highlighting
   root.style.setProperty("--syntax-comment", theme.syntax.comment);
   root.style.setProperty("--syntax-punctuation", theme.syntax.punctuation);
@@ -125,6 +132,9 @@ export function getThemeVariables(): string[] {
     "--live",
     // UI highlight
     "--highlight",
+    // Tooltip
+    "--tooltip",
+    "--tooltip-foreground",
     // Syntax
     "--syntax-comment",
     "--syntax-punctuation",
diff --git a/src/lib/themes/builtin/dark.ts b/src/lib/themes/builtin/dark.ts
index 24f002c..0950733 100644
--- a/src/lib/themes/builtin/dark.ts
+++ b/src/lib/themes/builtin/dark.ts
@@ -49,6 +49,10 @@ export const darkTheme: Theme = {
 
     // UI highlight (active user, self-references)
     highlight: "27 96% 61%", // orange-400 (original color)
+
+    // Tooltip colors (lighter for visibility against dark background)
+    tooltip: "217.2 32.6% 30%", // Medium blue-gray (lighter than secondary for contrast)
+    tooltipForeground: "210 40% 98%", // Light (high contrast with tooltip)
   },
 
   syntax: {
diff --git a/src/lib/themes/builtin/light.ts b/src/lib/themes/builtin/light.ts
index d109869..10b9fd8 100644
--- a/src/lib/themes/builtin/light.ts
+++ b/src/lib/themes/builtin/light.ts
@@ -49,6 +49,10 @@ export const lightTheme: Theme = {
 
     // UI highlight (darker for light background)
     highlight: "25 90% 35%", // Dark amber/brown
+
+    // Tooltip colors (dark tooltip for visibility on light background)
+    tooltip: "222.2 47.4% 11.2%", // Very dark blue-gray (same as primary)
+    tooltipForeground: "210 40% 98%", // Light text
   },
 
   syntax: {
diff --git a/src/lib/themes/builtin/plan9.ts b/src/lib/themes/builtin/plan9.ts
index 494daa7..6f985a1 100644
--- a/src/lib/themes/builtin/plan9.ts
+++ b/src/lib/themes/builtin/plan9.ts
@@ -63,6 +63,10 @@ export const plan9Theme: Theme = {
 
     // UI highlight (dark for contrast on pale yellow)
     highlight: "25 85% 30%", // Dark brown/amber
+
+    // Tooltip colors (strong contrast against pale yellow background)
+    tooltip: "220 50% 25%", // Dark blue (darker than primary for tooltips)
+    tooltipForeground: "60 100% 97%", // Very pale yellow (matches popover)
   },
 
   syntax: {
diff --git a/src/lib/themes/types.ts b/src/lib/themes/types.ts
index 08d3e1f..889d87e 100644
--- a/src/lib/themes/types.ts
+++ b/src/lib/themes/types.ts
@@ -66,6 +66,10 @@ export interface ThemeColors {
 
   // UI highlight color (for active user, self-references, etc.)
   highlight: HSLValue;
+
+  // Tooltip colors (for proper contrast across all themes)
+  tooltip: HSLValue;
+  tooltipForeground: HSLValue;
 }
 
 /** Syntax highlighting colors for code blocks */
diff --git a/tailwind.config.js b/tailwind.config.js
index 8b9d517..d4561a9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -74,6 +74,11 @@ export default {
         live: "hsl(var(--live))",
         // UI highlight (active user, self-references)
         highlight: "hsl(var(--highlight))",
+        // Tooltip colors
+        tooltip: {
+          DEFAULT: "hsl(var(--tooltip))",
+          foreground: "hsl(var(--tooltip-foreground))",
+        },
       },
     },
   },