diff --git a/frontend/src/components/tools/ToolPicker.tsx b/frontend/src/components/tools/ToolPicker.tsx
index 4e75fb73c..8a0532458 100644
--- a/frontend/src/components/tools/ToolPicker.tsx
+++ b/frontend/src/components/tools/ToolPicker.tsx
@@ -119,12 +119,24 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
         onClick={() => onSelect(id)}
         size="md"
         radius="md"
-        leftSection={tool.icon}
+        leftSection={
+          <div style={{ color: 'var(--tools-text-and-icon-color)' }}>
+            {tool.icon}
+          </div>
+        }
         fullWidth
         justify="flex-start"
-        style={{ borderRadius: '0' }}
+        style={{ 
+          borderRadius: '0',
+          color: 'var(--tools-text-and-icon-color)'
+        }}
       >
-        <span style={{ marginRight: '8px', opacity: 0.6, fontSize: '0.8em' }}>
+        <span style={{ 
+          marginRight: '8px', 
+          opacity: 0.6, 
+          fontSize: '0.8em',
+          color: 'var(--tools-text-and-icon-color)'
+        }}>
           {index + 1}.
         </span>
         {tool.name}
@@ -147,7 +159,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
           onChange={(e) => setSearch(e.currentTarget.value)}
           autoComplete="off"
           className="search-input rounded-lg"
-          leftSection={<SearchIcon sx={{ fontSize: 16, color: 'var(--search-text)' }} />}
+          leftSection={<SearchIcon sx={{ fontSize: 16, color: 'var(--tools-text-and-icon-color)' }} />}
         />
       <Box
         className="tool-picker-scrollable"
@@ -176,7 +188,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
                       transition: 'transform 0.2s ease',
                       transform: expandedCategories.has(category) ? 'rotate(90deg)' : 'rotate(0deg)'
                     }}>
-                      <ChevronRightIcon sx={{ fontSize: 16, color: 'var(--text-primary)' }} />
+                      <ChevronRightIcon sx={{ fontSize: 16, color: 'var(--tools-text-and-icon-color)' }} />
                     </div>
                   }
                   fullWidth
@@ -189,7 +201,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
                     borderBottom: '1px solid var(--border-default)',
                     borderRadius: '0',
                     padding: '0.75rem 1rem',
-                    color: 'var(--text-primary)'
+                    color: 'var(--tools-text-and-icon-color)'
                   }}
                 >
                   {category.toUpperCase()}
@@ -213,7 +225,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, toolRegistry }: ToolPickerProps
                               paddingBottom: '0.5rem',
                               marginLeft: '1rem',
                               marginRight: '1rem',
-                              color: 'var(--text-secondary)'
+                              color: 'var(--tools-text-and-icon-color)'
                             }}
                           >
                             {subcategory}
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 8e8b61848..692cfafed 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -106,6 +106,9 @@
   /* Inactive icon colors for light mode */
   --icon-inactive-bg: #9CA3AF;
   --icon-inactive-color: #FFFFFF;
+
+  /* New theme colors for text and icons */
+  --tools-text-and-icon-color: #374151;
 }
 
 [data-mantine-color-scheme="dark"] {
@@ -183,6 +186,8 @@
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
+
+  --tools-text-and-icon-color: #D0D6DC;
 }
 
 /* Smooth transitions for theme switching */