diff --git a/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx b/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx
index 3178692fd..3578afdca 100644
--- a/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx
+++ b/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx
@@ -123,7 +123,7 @@ export default function ConverterBox({
                   "&:hover": { bgcolor: "error.dark" },
                 }}
               >
-                <Delete sx={{ fontSize: 16 }} />
+                <Delete sx={{ fontSize: 16, color: "white" }} />
               </IconButton>
             )}
           </Box>
diff --git a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
index 5dee8b179..8b5b9ed45 100644
--- a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
+++ b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
@@ -131,7 +131,8 @@ export default function ExplorerBox({
                   }
                   onClick={() => handleExplorerDetailsClick(explorer)}
                   size="small"
-                  icon={<Info sx={{ color: "white !important" }} />}
+                  color="primary"
+                  icon={<Info />}
                   sx={{
                     bgcolor: "primary.main",
                     "&:hover": {
@@ -151,7 +152,7 @@ export default function ExplorerBox({
                     "&:hover": { bgcolor: "error.dark" },
                   }}
                 >
-                  <Delete sx={{ fontSize: 16 }} />
+                  <Delete sx={{ fontSize: 16, color: "white" }} />
                 </IconButton>
               )}
             </>
diff --git a/DashAI/front/src/components/notebooks/tool/ToolGrid.jsx b/DashAI/front/src/components/notebooks/tool/ToolGrid.jsx
index 1704d3db1..ab5b6387c 100644
--- a/DashAI/front/src/components/notebooks/tool/ToolGrid.jsx
+++ b/DashAI/front/src/components/notebooks/tool/ToolGrid.jsx
@@ -5,12 +5,14 @@ import ConfigureToolModal from "./ConfigureToolModal";
 import { useTourContext } from "../../tour/TourProvider";
 import { groupByCategory, sortCategories } from "./toolCategories";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material/styles";
 
 export default function ToolGrid({ tools, notebook, FormComponent }) {
   const [open, setOpen] = useState(false);
   const [selectedTool, setSelectedTool] = useState(null);
   const tourContext = useTourContext();
   const { t } = useTranslation(["datasets", "common"]);
+  const theme = useTheme();
 
   const grouped = useMemo(() => groupByCategory(tools), [tools]);
   const categories = useMemo(
@@ -62,10 +64,14 @@ export default function ToolGrid({ tools, notebook, FormComponent }) {
                 gap: 1,
                 mb: 1.5,
                 pb: 0.5,
-                borderBottom: "1px solid rgb(39, 39, 42)",
+                borderBottom: "1px solid",
+                borderColor: theme.palette.divider,
               }}
             >
-              <Typography variant="subtitle2" sx={{ flex: 1 }}>
+              <Typography
+                variant="subtitle2"
+                sx={{ flex: 1, color: "text.primary" }}
+              >
                 {cat}
               </Typography>
               <Typography variant="caption" sx={{ color: "text.secondary" }}>