diff --git a/DashAI/front/src/components/HomeButton.jsx b/DashAI/front/src/components/HomeButton.jsx
index c678aac80..c1a31dbd8 100644
--- a/DashAI/front/src/components/HomeButton.jsx
+++ b/DashAI/front/src/components/HomeButton.jsx
@@ -20,7 +20,7 @@ function HomeButton({ title, description, to, Icon }) {
         to={to}
         component={RouterLink}
         underline="hover"
-        color="primary.contrastText"
+        color={theme.palette.text.primary}
       >
         {matches && (
           <Grid
diff --git a/DashAI/front/src/components/generative/SearchBar.jsx b/DashAI/front/src/components/generative/SearchBar.jsx
deleted file mode 100644
index 26800ccc0..000000000
--- a/DashAI/front/src/components/generative/SearchBar.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { TextField, InputAdornment } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
-
-export default function SearchBar({ placeholder, onChange, value }) {
-  return (
-    <TextField
-      placeholder={placeholder}
-      value={value}
-      onChange={onChange}
-      fullWidth
-      variant="outlined"
-      sx={{
-        "& .MuiOutlinedInput-root": {
-          bgcolor: "background.default",
-          borderRadius: 1,
-        },
-        "& .MuiInputBase-input": {
-          color: "white",
-          py: 1,
-          fontSize: "0.875rem",
-        },
-        "& .MuiInputBase-input::placeholder": {
-          color: "text.secondary",
-          opacity: 1,
-          fontSize: "0.875rem",
-        },
-      }}
-      slotProps={{
-        input: {
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon sx={{ color: "text.secondary" }} />
-            </InputAdornment>
-          ),
-        },
-      }}
-    />
-  );
-}
diff --git a/DashAI/front/src/components/generative/SelectTaskMenu.jsx b/DashAI/front/src/components/generative/SelectTaskMenu.jsx
index c6121fdd5..ef863cd91 100644
--- a/DashAI/front/src/components/generative/SelectTaskMenu.jsx
+++ b/DashAI/front/src/components/generative/SelectTaskMenu.jsx
@@ -1,60 +1,20 @@
-import { useEffect, useState } from "react";
-import { Box, Grid } from "@mui/material";
-import TaskBox from "../../components/generative/TaskBox";
-import SearchBar from "./SearchBar";
-import { getGenerativeTask } from "../../api/generativeTask";
-import CustomLayout from "../../components/custom/CustomLayout";
 import { useTranslation } from "react-i18next";
+import SelectOptionMenu from "../threeSectionLayout/SelectOptionMenu";
 
 export default function SelectTaskMenu({ tasks, goToNextStep }) {
   const { t } = useTranslation(["generative", "common"]);
 
-  const [search, setSearch] = useState("");
-
-  const filteredTasks = tasks.filter((task) =>
-    task.name.toLowerCase().includes(search.toLowerCase()),
-  );
-
   return (
-    <CustomLayout
+    <SelectOptionMenu
+      goToNextStep={() => goToNextStep(task.name, task.display_name)}
       title={t("generative:label.generativeModule")}
       subtitle={t("generative:label.selectGenerativeTask")}
-      padding={0}
-    >
-      <Box
-        display={"flex"}
-        height={"100%"}
-        width={"100%"}
-        flexDirection={"column"}
-        justifyContent={"flex-start"}
-      >
-        <Box width={"450px"}>
-          <SearchBar
-            placeholder={t("generative:label.searchTasks")}
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-          />
-        </Box>
-
-        <Grid
-          container
-          direction="row"
-          justifyContent="flex-start"
-          alignItems="stretch"
-          spacing={1}
-          sx={{ mt: 2, mx: 0, maxWidth: "100%" }}
-        >
-          {filteredTasks.map((task, index) => (
-            <Grid size={{ xl: 4, lg: 6, md: 6, sm: 12, xs: 12 }} key={index}>
-              <TaskBox
-                taskName={task.display_name}
-                description={task.description}
-                onClick={() => goToNextStep(task.name, task.display_name)}
-              />
-            </Grid>
-          ))}
-        </Grid>
-      </Box>
-    </CustomLayout>
+      options={tasks.map((task) => ({
+        name: task.name,
+        display_name: task.display_name,
+        description: task.description,
+      }))}
+      searchBar={true}
+    />
   );
 }
diff --git a/DashAI/front/src/components/generative/SessionBar.jsx b/DashAI/front/src/components/generative/SessionBar.jsx
index dec84ed4d..1417ce92b 100644
--- a/DashAI/front/src/components/generative/SessionBar.jsx
+++ b/DashAI/front/src/components/generative/SessionBar.jsx
@@ -1,7 +1,7 @@
 import { Box, Typography, Divider } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import FolderIcon from "@mui/icons-material/Folder";
-import SearchBar from "./SearchBar";
+import SearchBar from "../threeSectionLayout/SearchBar";
 import { useEffect, useState } from "react";
 import InfoSessionModal from "./InfoSessionModal";
 import Footer from "./Footer";
diff --git a/DashAI/front/src/components/generative/TaskBox.jsx b/DashAI/front/src/components/generative/TaskBox.jsx
deleted file mode 100644
index e377b7fc7..000000000
--- a/DashAI/front/src/components/generative/TaskBox.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import {
-  Box,
-  Typography,
-  Button,
-  Paper,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
-
-export default function TaskBox({ taskName, description, onClick }) {
-  const theme = useTheme();
-  const matches = useMediaQuery(theme.breakpoints.up("md"));
-
-  return (
-    <Button
-      onClick={onClick}
-      sx={{
-        p: 0,
-        m: 1,
-        width: "100%",
-        height: "100%",
-        textAlign: "left",
-        textTransform: "none",
-        borderRadius: 2,
-        "&:hover .task-paper": {
-          backgroundColor: "red",
-        },
-      }}
-    >
-      <Paper
-        elevation={2}
-        sx={{
-          p: 2,
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: matches ? "row" : "column",
-          alignItems: "center",
-          justifyContent: matches ? "space-between" : "center",
-          textAlign: matches ? "left" : "center",
-        }}
-      >
-        <Box
-          sx={{
-            width: "100%",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "space-evenly",
-            alignItems: matches ? "flex-start" : "center",
-            gap: 1,
-          }}
-        >
-          <Typography variant="h6" sx={{ mb: 1 }}>
-            {taskName}
-          </Typography>
-          <Typography variant="caption" component="p">
-            {description}
-          </Typography>
-        </Box>
-      </Paper>
-    </Button>
-  );
-}
diff --git a/DashAI/front/src/components/notebooks/datasetCreation/ConfigureAndUploadDatasetStep.jsx b/DashAI/front/src/components/notebooks/datasetCreation/ConfigureAndUploadDatasetStep.jsx
index 2f13d146c..88092e6e9 100644
--- a/DashAI/front/src/components/notebooks/datasetCreation/ConfigureAndUploadDatasetStep.jsx
+++ b/DashAI/front/src/components/notebooks/datasetCreation/ConfigureAndUploadDatasetStep.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
-import { Grid, CircularProgress } from "@mui/material";
+import { Grid, CircularProgress, useTheme } from "@mui/material";
 import FormSchemaButtonGroup from "../../shared/FormSchemaButtonGroup";
 import Upload from "./Upload";
 import { useSnackbar } from "notistack";
@@ -28,6 +28,7 @@ export default function ConfigureAndUploadDatasetStep({
 
   const { enqueueSnackbar } = useSnackbar();
   const { t } = useTranslation(["common", "datasets"]);
+  const theme = useTheme();
 
   useEffect(() => {
     if (onPreviewError) {
@@ -155,7 +156,8 @@ export default function ConfigureAndUploadDatasetStep({
         spacing={2}
         sx={{
           width: "100%",
-          backgroundColor: "#212121",
+          backgroundColor: theme.palette.ui.box,
+          border: `1px solid ${theme.palette.ui.border}`,
           padding: 4,
           borderRadius: 2,
         }}
diff --git a/DashAI/front/src/components/notebooks/datasetCreation/Upload.jsx b/DashAI/front/src/components/notebooks/datasetCreation/Upload.jsx
index 4b1f9472f..077db0bbe 100644
--- a/DashAI/front/src/components/notebooks/datasetCreation/Upload.jsx
+++ b/DashAI/front/src/components/notebooks/datasetCreation/Upload.jsx
@@ -7,6 +7,7 @@ import {
   DialogContentText,
   Grid,
   Typography,
+  useTheme,
 } from "@mui/material";
 
 import PreviewDataset from "./PreviewDataset";
@@ -51,6 +52,7 @@ function Upload({
 
   const { enqueueSnackbar } = useSnackbar();
   const { t } = useTranslation(["datasets", "common"]);
+  const theme = useTheme();
 
   // helper to extract allowed extensions from acceptAttr (returns lowercase extensions like ".csv")
   const getAllowedExtensions = (accept) => {
@@ -273,14 +275,20 @@ function Upload({
               </Grid>
               {dragActive ? (
                 <Grid>
-                  <Typography variant="subtitle1">
+                  <Typography
+                    variant="subtitle1"
+                    sx={{ color: theme.palette.text.secondary }}
+                  >
                     {t("datasets:label.clickToUpload")}
                   </Typography>
                 </Grid>
               ) : (
                 <React.Fragment>
                   <Grid>
-                    <Typography variant="subtitle1">
+                    <Typography
+                      variant="subtitle1"
+                      sx={{ color: theme.palette.text.secondary }}
+                    >
                       {t("datasets:label.dragAndDropFileHere")}
                     </Typography>
                   </Grid>
@@ -343,12 +351,12 @@ function Upload({
       container
       direction="column"
       rowSpacing={1}
-      sx={{ width: "100%" }}
+      sx={{ width: "100%", bgcolor: theme.palette.ui.box }}
       data-tour="upload-area"
     >
       {/* state text */}
       <Grid sx={{ textAlign: "center" }}>
-        <DialogContentText>
+        <DialogContentText sx={{ color: theme.palette.text.primary }}>
           {datasetState === EMPTY && t("datasets:label.uploadYourDataset")}
           {datasetState === LOADING && t("datasets:label.datasetLoading")}
           {datasetState === LOADED && t("datasets:label.datasetPreview")}
diff --git a/DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx b/DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx
index 99c457946..92d3cefe6 100644
--- a/DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx
+++ b/DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx
@@ -192,8 +192,8 @@ export default function ConfigureToolModal({
               {/* Tool Description */}
               <Box
                 sx={{
-                  bgcolor: "rgb(44, 44, 44)",
-                  border: "1px solid rgb(39, 39, 42)",
+                  bgcolor: "theme.palette.background.box",
+                  border: `1px solid ${theme.palette.divider}`,
                   borderRadius: 1.5,
                   p: 2,
                 }}
diff --git a/DashAI/front/src/components/notebooks/tool/ToolGridItem.jsx b/DashAI/front/src/components/notebooks/tool/ToolGridItem.jsx
index 75164b706..318397461 100644
--- a/DashAI/front/src/components/notebooks/tool/ToolGridItem.jsx
+++ b/DashAI/front/src/components/notebooks/tool/ToolGridItem.jsx
@@ -4,11 +4,13 @@ import HoverToolInfo from "./HoverToolInfo";
 import api from "../../../api/api";
 import { CategoryIcon } from "./CategoryIcon";
 import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material/styles";
 
 export default function ToolGridItem({ tool, disabled, onClick }) {
   const [anchorEl, setAnchorEl] = useState(null);
   const [hoveredTool, setHoveredTool] = useState(null);
   const { t } = useTranslation(["common"]);
+  const theme = useTheme();
 
   const handleMouseEnter = (event, tool) => {
     if (!disabled) {
@@ -31,16 +33,16 @@ export default function ToolGridItem({ tool, disabled, onClick }) {
         slotProps={{
           tooltip: {
             sx: {
-              bgcolor: "rgb(33, 33, 33)",
+              bgcolor: theme.palette.background.paper,
+              color: theme.palette.text.primary,
               display: disabled ? "block" : "none",
-              color: "rgb(255, 255, 255)",
-              border: "1px solid rgb(63, 63, 70)",
+              border: `1px solid ${theme.palette.divider}`,
               fontSize: "0.75rem",
               maxWidth: 300,
               "& .MuiTooltip-arrow": {
-                color: "rgb(33, 33, 33)",
+                color: theme.palette.background.paper,
                 "&::before": {
-                  border: "1px solid rgb(63, 63, 70)",
+                  border: `1px solid ${theme.palette.divider}`,
                 },
               },
             },
@@ -54,8 +56,10 @@ export default function ToolGridItem({ tool, disabled, onClick }) {
           onClick={disabled ? null : onClick}
           sx={{
             position: "relative",
-            bgcolor: disabled ? "rgb(32, 32, 32)" : "rgb(44, 44, 44)",
-            border: "1px solid rgb(39, 39, 42)",
+            bgcolor: disabled
+              ? theme.palette.ui.disabled
+              : theme.palette.ui.box,
+            border: `1px solid ${theme.palette.ui.border}`,
             borderRadius: 1.5,
             overflow: "hidden",
             cursor: disabled ? "not-allowed" : "pointer",
@@ -63,8 +67,12 @@ export default function ToolGridItem({ tool, disabled, onClick }) {
             opacity: disabled ? 0.5 : 1,
             filter: disabled ? "grayscale(0.6)" : "none",
             "&:hover": {
-              bgcolor: disabled ? "rgb(32, 32, 32)" : "rgb(60, 60, 60)",
-              borderColor: disabled ? "rgb(39, 39, 42)" : tool.metadata.color,
+              bgcolor: disabled
+                ? theme.palette.ui.disabled
+                : theme.palette.action.hover,
+              borderColor: disabled
+                ? theme.palette.ui.border
+                : tool.metadata.color,
               transform: disabled ? "none" : "translateY(-4px)",
               boxShadow: disabled ? "none" : `0 8px 16px rgba(0, 0, 0, 0.2)`,
             },
@@ -87,8 +95,12 @@ export default function ToolGridItem({ tool, disabled, onClick }) {
             sx={{
               width: "100%",
               height: 100,
-              bgcolor: disabled ? "rgb(30, 30, 30)" : "rgb(39, 39, 42)",
-              borderBottom: "1px solid rgb(39, 39, 42)",
+              bgcolor: disabled
+                ? theme.palette.ui.disabled
+                : theme.palette.ui.border,
+              borderBottom: `1px solid ${
+                disabled ? theme.palette.ui.disabled : theme.palette.ui.border
+              }`,
             }}
           >
             <img
@@ -114,15 +126,22 @@ export default function ToolGridItem({ tool, disabled, onClick }) {
                   justifyContent: "center",
                   width: 28,
                   height: 28,
+                  p: 2,
                   borderRadius: 0.75,
-                  bgcolor: disabled ? "rgb(50, 50, 50)" : "rgb(63, 63, 70)",
-                  color: disabled ? "rgb(150, 150, 150)" : "rgb(250, 250, 250)",
+                  bgcolor: disabled
+                    ? theme.palette.ui.disabled
+                    : theme.palette.ui.border,
+                  color: disabled
+                    ? theme.palette.text.disabled
+                    : theme.palette.text.primary,
                   flexShrink: 0,
                 }}
               >
                 <CategoryIcon
                   icon={tool.metadata.icon}
-                  color={disabled ? "rgb(100, 100, 100)" : tool.metadata.color}
+                  color={
+                    disabled ? theme.palette.text.disabled : tool.metadata.color
+                  }
                 />
               </Box>
             </Box>
@@ -131,7 +150,9 @@ export default function ToolGridItem({ tool, disabled, onClick }) {
             <Typography
               variant="body2"
               sx={{
-                color: disabled ? "rgb(150, 150, 150)" : "rgb(250, 250, 250)",
+                color: disabled
+                  ? theme.palette.text.disabled
+                  : theme.palette.text.primary,
                 fontWeight: 500,
                 mb: 0.5,
                 overflow: "hidden",
@@ -150,7 +171,9 @@ export default function ToolGridItem({ tool, disabled, onClick }) {
             <Typography
               variant="caption"
               sx={{
-                color: disabled ? "rgb(90, 90, 90)" : "rgb(113, 113, 122)",
+                color: disabled
+                  ? theme.palette.text.disabled
+                  : theme.palette.text.primary,
               }}
             >
               {tool.metadata.category ?? t("common:other")}
diff --git a/DashAI/front/src/components/predictions/ManualInputForm.jsx b/DashAI/front/src/components/predictions/ManualInputForm.jsx
index 5ecb2a0af..2b8cd5306 100644
--- a/DashAI/front/src/components/predictions/ManualInputForm.jsx
+++ b/DashAI/front/src/components/predictions/ManualInputForm.jsx
@@ -85,7 +85,7 @@ export default function ManualInputForm({
     <Box
       sx={{
         borderRadius: 1,
-        color: "white",
+        color: theme.palette.text.primary,
         maxWidth: "100%",
         mx: "auto",
         height: "100%",
@@ -104,16 +104,19 @@ export default function ManualInputForm({
         {t("prediction:label.provideManualInput")}
       </Typography>
 
-      <TableContainer component={Paper} sx={{ p: 1 }}>
+      <TableContainer
+        component={Paper}
+        sx={{ p: 1, bgcolor: theme.palette.background.box }}
+      >
         <Table size="small">
           <TableHead>
             <TableRow>
               {inputColumns.map((col) => (
-                <TableCell key={col} sx={{ color: "#fff", fontWeight: 600 }}>
+                <TableCell key={col} sx={{ fontWeight: 600 }}>
                   {col}
                 </TableCell>
               ))}
-              <TableCell sx={{ color: "#fff", fontWeight: 600 }}>
+              <TableCell sx={{ fontWeight: 600 }}>
                 {t("common:remove")}
               </TableCell>
             </TableRow>
@@ -123,7 +126,10 @@ export default function ManualInputForm({
             {rows.map((row, rowIndex) => (
               <TableRow key={rowIndex}>
                 {inputColumns.map((col) => (
-                  <TableCell key={col} sx={{ color: "#fff" }}>
+                  <TableCell
+                    key={col}
+                    sx={{ color: theme.palette.text.primary }}
+                  >
                     {renderInputField(
                       handleChange,
                       rowIndex,
@@ -136,7 +142,7 @@ export default function ManualInputForm({
                 ))}
                 <TableCell>
                   <IconButton
-                    color="error"
+                    sx={{ color: theme.palette.error.main }}
                     onClick={() => handleDeleteRow(rowIndex)}
                     disabled={rows.length === 1}
                   >
diff --git a/DashAI/front/src/components/predictions/renderInputField.js b/DashAI/front/src/components/predictions/renderInputField.js
index 5b7eb0db4..0a5d004ce 100644
--- a/DashAI/front/src/components/predictions/renderInputField.js
+++ b/DashAI/front/src/components/predictions/renderInputField.js
@@ -1,5 +1,7 @@
 import React from "react";
 import { TextField, Select, MenuItem, FormControl } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
 
 export const renderInputField = (
   handleChange,
@@ -11,6 +13,8 @@ export const renderInputField = (
 ) => {
   const { dtype, type, categories } = typeInfo || {};
   const effectiveType = type || dtype || "string";
+  const theme = useTheme();
+  const { t } = useTranslation(["prediction"]);
 
   if (effectiveType === "Categorical" && categories && categories.length > 0) {
     return (
@@ -20,14 +24,16 @@ export const renderInputField = (
           onChange={(e) => handleChange(rowIndex, col, e.target.value)}
           displayEmpty
           sx={{
-            color: "white",
-            ".MuiOutlinedInput-notchedOutline": { borderColor: "#555" },
+            color: theme.palette.text.primary,
+            ".MuiOutlinedInput-notchedOutline": {
+              borderColor: theme.palette.divider,
+            },
             "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: "#888" },
-            ".MuiSvgIcon-root": { color: "white" },
+            ".MuiSvgIcon-root": { color: theme.palette.text.primary },
           }}
         >
           <MenuItem value="" disabled>
-            Select a category
+            {t("prediction:label.selectCategory")}
           </MenuItem>
           {categories.map((cat, idx) => (
             <MenuItem key={idx} value={cat}>
@@ -66,9 +72,9 @@ export const renderInputField = (
           handleChange(rowIndex, col, val);
         }}
         sx={{
-          input: { color: "white" },
+          input: { color: theme.palette.text.primary },
           "& .MuiOutlinedInput-root": {
-            "& fieldset": { borderColor: "#555" },
+            "& fieldset": { borderColor: theme.palette.divider },
             "&:hover fieldset": { borderColor: "#888" },
           },
         }}
@@ -88,9 +94,9 @@ export const renderInputField = (
         placeholder={placeholder}
         onChange={(e) => handleChange(rowIndex, col, e.target.value)}
         sx={{
-          input: { color: "white" },
+          input: { color: theme.palette.text.primary },
           "& .MuiOutlinedInput-root": {
-            "& fieldset": { borderColor: "#555" },
+            "& fieldset": { borderColor: theme.palette.divider },
             "&:hover fieldset": { borderColor: "#888" },
           },
         }}
@@ -104,21 +110,21 @@ export const renderInputField = (
         type="file"
         accept="image/*"
         onChange={(e) => handleChange(rowIndex, col, e.target.files?.[0])}
-        style={{ color: "white" }}
+        style={{ color: theme.palette.text.primary }}
       />
     );
   }
 
   return (
-    <TextField
+    <TextField1
       size="small"
       value={value}
       placeholder={placeholder}
       onChange={(e) => handleChange(rowIndex, col, e.target.value)}
       sx={{
-        input: { color: "white" },
+        input: { color: theme.palette.text.primary },
         "& .MuiOutlinedInput-root": {
-          "& fieldset": { borderColor: "#555" },
+          "& fieldset": { borderColor: theme.palette.divider },
           "&:hover fieldset": { borderColor: "#888" },
         },
       }}
diff --git a/DashAI/front/src/components/threeSectionLayout/ItemBox.jsx b/DashAI/front/src/components/threeSectionLayout/ItemBox.jsx
index 0c06c41f8..30f2d4882 100644
--- a/DashAI/front/src/components/threeSectionLayout/ItemBox.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/ItemBox.jsx
@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from "react";
 import { Box, Typography, TextField } from "@mui/material";
 import ItemMenu from "./ItemMenu";
+import { useTheme } from "@mui/material/styles";
 
 export default function ItemBox({
   isSelected,
@@ -15,6 +16,7 @@ export default function ItemBox({
   const [isEditing, setIsEditing] = useState(false);
   const [editedName, setEditedName] = useState(name);
   const inputRef = useRef(null);
+  const theme = useTheme();
 
   useEffect(() => {
     if (isEditing && inputRef.current) {
@@ -82,10 +84,10 @@ export default function ItemBox({
         alignItems: "center",
         borderRadius: 1,
         cursor: isSelected || isEditing ? "default" : "pointer",
-        bgcolor: isSelected ? "rgba(255, 255, 255, 0.05)" : "transparent",
+        bgcolor: isSelected ? theme.palette.action.selected : "transparent",
         p: 0.5,
         "&:hover": {
-          backgroundColor: "rgba(255, 255, 255, 0.05)",
+          backgroundColor: theme.palette.action.hover,
         },
       }}
       onClick={isSelected || isEditing ? undefined : onClick}
diff --git a/DashAI/front/src/components/threeSectionLayout/OptionBox.jsx b/DashAI/front/src/components/threeSectionLayout/OptionBox.jsx
index 040db78fb..59ed6b2ea 100644
--- a/DashAI/front/src/components/threeSectionLayout/OptionBox.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/OptionBox.jsx
@@ -63,10 +63,14 @@ export default function OptionBox({
             gap: 1,
           }}
         >
-          <Typography variant="h6" sx={{ mb: 1 }}>
+          <Typography variant="h6" sx={{ mb: 1, color: "text.primary" }}>
             {optionName}
           </Typography>
-          <Typography variant="caption" component="p">
+          <Typography
+            variant="caption"
+            component="p"
+            sx={{ color: "text.secondary" }}
+          >
             {description}
           </Typography>
         </Box>
diff --git a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx
index 152ed8526..f32073853 100644
--- a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx
@@ -18,7 +18,7 @@ export default function SearchBar({ placeholder, onChange, value }) {
           borderRadius: 1,
         },
         "& .MuiInputBase-input": {
-          color: "white",
+          color: theme.palette.text.primary,
           py: 1,
           fontSize: "0.875rem",
         },
diff --git a/DashAI/front/src/utils/i18n/locales/en/generative.json b/DashAI/front/src/utils/i18n/locales/en/generative.json
index dfd6b098c..fe7d9d9db 100644
--- a/DashAI/front/src/utils/i18n/locales/en/generative.json
+++ b/DashAI/front/src/utils/i18n/locales/en/generative.json
@@ -15,7 +15,6 @@
     "parameterChangeEvent": "Parameters updated: <1></1>",
     "parameterChangeHistory": "Parameter change history for the current session",
     "searchSessions": "Search Sessions",
-    "searchTasks": "Search Tasks",
     "selectGenerativeTask": "Select a generative task to start a new session",
     "selectModelAndConfigureParameters": "Select a model and configure its parameters.",
     "selectSessionToViewParameters": "Select a session to view and edit its parameters.",
diff --git a/DashAI/front/src/utils/i18n/locales/en/home.json b/DashAI/front/src/utils/i18n/locales/en/home.json
index 7327d8b87..2715b5b90 100644
--- a/DashAI/front/src/utils/i18n/locales/en/home.json
+++ b/DashAI/front/src/utils/i18n/locales/en/home.json
@@ -1,7 +1,6 @@
 {
   "description": {
     "datasets": "Create and manage the datasets registered in the application.",
-    "experiments": "Create and manage and view the status of your experiments.",
     "explainers": "Explore and understand the decision-making process behind your models.",
     "generative": "Interact with AI models to inference and generate new content.",
     "models": "Configure tasks, train and compare models in organized sessions.",
diff --git a/DashAI/front/src/utils/i18n/locales/en/prediction.json b/DashAI/front/src/utils/i18n/locales/en/prediction.json
index fccd96826..54e668b91 100644
--- a/DashAI/front/src/utils/i18n/locales/en/prediction.json
+++ b/DashAI/front/src/utils/i18n/locales/en/prediction.json
@@ -52,6 +52,7 @@
     "resultsPreviewDownloadInfo": "The table below displays a preview of the prediction results. You can download the full results as a CSV file using the \"Download CSV\" button below.",
     "reviewDetails": "Review your prediction configuration before submitting",
     "runFirstPrediction": "Run your first prediction to see it here",
+    "selectCategory": "Select a category",
     "selectDataset": "Select a dataset for prediction",
     "selectDatasetFromPlatform": "Select a dataset from platform",
     "selectMode": "Select Mode",
diff --git a/DashAI/front/src/utils/i18n/locales/es/generative.json b/DashAI/front/src/utils/i18n/locales/es/generative.json
index 45c3908ec..dc19f3ab0 100644
--- a/DashAI/front/src/utils/i18n/locales/es/generative.json
+++ b/DashAI/front/src/utils/i18n/locales/es/generative.json
@@ -15,7 +15,6 @@
     "parameterChangeEvent": "Parámetros actualizados: <1></1>",
     "parameterChangeHistory": "Historial de cambios de parámetros para la sesión actual",
     "searchSessions": "Buscar Sesiones",
-    "searchTasks": "Buscar Tareas",
     "selectGenerativeTask": "Seleccione una tarea generativa para comenzar una nueva sesión",
     "selectModelAndConfigureParameters": "Seleccione un modelo y configure sus parámetros.",
     "selectSessionToViewParameters": "Seleccione una sesión para ver y editar sus parámetros.",
diff --git a/DashAI/front/src/utils/i18n/locales/es/home.json b/DashAI/front/src/utils/i18n/locales/es/home.json
index a0f25dfcd..ff8111396 100644
--- a/DashAI/front/src/utils/i18n/locales/es/home.json
+++ b/DashAI/front/src/utils/i18n/locales/es/home.json
@@ -1,7 +1,6 @@
 {
   "description": {
     "datasets": "Crea y gestiona los datasets registrados en la aplicación.",
-    "experiments": "Crea, gestiona y ve el estado de tus experimentos.",
     "explainers": "Explora y comprende el proceso de toma de decisiones detrás de tus modelos.",
     "generative": "Interactúa con modelos de IA para inferencia y genera nuevo contenido.",
     "models": "Configura tareas, entrena y compara modelos en sesiones organizadas.",
diff --git a/DashAI/front/src/utils/i18n/locales/es/prediction.json b/DashAI/front/src/utils/i18n/locales/es/prediction.json
index 473633ef4..e0d364951 100644
--- a/DashAI/front/src/utils/i18n/locales/es/prediction.json
+++ b/DashAI/front/src/utils/i18n/locales/es/prediction.json
@@ -52,6 +52,7 @@
     "resultsPreviewDownloadInfo": "La tabla a continuación muestra una vista previa de los resultados de la predicción. Puede descargar los resultados completos como un archivo CSV usando el botón \"Descargar CSV\" a continuación.",
     "reviewDetails": "Revise la configuración de su predicción antes de enviar",
     "runFirstPrediction": "Ejecute su primera predicción para verla aquí",
+    "selectCategory": "Selecciona una categoría",
     "selectDataset": "Seleccione un dataset para la predicción",
     "selectDatasetFromPlatform": "Seleccione un dataset de la plataforma",
     "selectMode": "Seleccionar Modo",