diff --git a/DashAI/front/src/components/HomeButton.jsx b/DashAI/front/src/components/HomeButton.jsx
index 85f47a1aa..c678aac80 100644
--- a/DashAI/front/src/components/HomeButton.jsx
+++ b/DashAI/front/src/components/HomeButton.jsx
@@ -42,10 +42,15 @@ function HomeButton({ title, description, to, Icon }) {
                 alignItems="stretch"
                 sx={{ height: "100%" }}
               >
-                <Typography variant="h5" sx={{ mb: 1 }}>
+                <Typography variant="h5" color="text.primary" sx={{ mb: 1 }}>
                   {title}
                 </Typography>
-                <Typography sx={{ mb: 2 }} variant="caption" component="p">
+                <Typography
+                  sx={{ mb: 2 }}
+                  variant="caption"
+                  component="p"
+                  color="text.secondary"
+                >
                   {description}
                 </Typography>
               </Grid>
@@ -65,10 +70,20 @@ function HomeButton({ title, description, to, Icon }) {
             </Grid>
 
             <Grid size={{ xs: 12 }} sx={{ mb: 2 }}>
-              <Typography variant="h5" align="center" sx={{ mb: 1 }}>
+              <Typography
+                variant="h5"
+                align="center"
+                color="text.primary"
+                sx={{ mb: 1 }}
+              >
                 {title}
               </Typography>
-              <Typography variant="caption" component="p" align="center">
+              <Typography
+                variant="caption"
+                component="p"
+                align="center"
+                color="text.secondary"
+              >
                 {description}
               </Typography>
             </Grid>
diff --git a/DashAI/front/src/components/ResponsiveAppBar.jsx b/DashAI/front/src/components/ResponsiveAppBar.jsx
index 4769f0c42..7ac9889d4 100644
--- a/DashAI/front/src/components/ResponsiveAppBar.jsx
+++ b/DashAI/front/src/components/ResponsiveAppBar.jsx
@@ -38,7 +38,11 @@ function ResponsiveAppBar() {
   };
 
   return (
-    <AppBar position="sticky" enableColorOnDark sx={{ background: "#212121" }}>
+    <AppBar
+      position="sticky"
+      enableColorOnDark
+      sx={{ background: theme.palette.background.box }}
+    >
       <Container maxWidth="xl">
         <Toolbar>
           <Avatar
@@ -85,7 +89,9 @@ function ResponsiveAppBar() {
                   to={page.to}
                   selected={page.to === location.pathname}
                 >
-                  <Typography textAlign="center">{page.name}</Typography>
+                  <Typography color="text.primary" textAlign="center">
+                    {page.name}
+                  </Typography>
                 </MenuItem>
               ))}
             </Menu>
@@ -108,11 +114,17 @@ function ResponsiveAppBar() {
                 to={page.to}
                 key={page.name}
                 onClick={handleCloseNavMenu}
-                sx={{ my: 2, display: "block" }}
+                sx={{
+                  my: 2,
+                  display: "block",
+                  color:
+                    page.to === location.pathname
+                      ? theme.palette.primary.main
+                      : theme.palette.text.primary,
+                }}
                 size="large"
                 disabled={page.disabled}
                 disableRipple
-                color={page.to === location.pathname ? "primary" : "inherit"}
               >
                 {page.name}
               </Button>
diff --git a/DashAI/front/src/components/experiments/DivideDatasetColumns.jsx b/DashAI/front/src/components/experiments/DivideDatasetColumns.jsx
index a4b9dab77..07308357d 100644
--- a/DashAI/front/src/components/experiments/DivideDatasetColumns.jsx
+++ b/DashAI/front/src/components/experiments/DivideDatasetColumns.jsx
@@ -8,6 +8,7 @@ import {
   Box,
   Chip,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { getColorByColumnType } from "../../utils";
 
 function DivideDatasetColumns({
@@ -23,6 +24,8 @@ function DivideDatasetColumns({
   outputHelperText = "",
   disabled = false,
 }) {
+  const theme = useTheme();
+
   const handleInputAutocompleteChange = (event, newValue) => {
     onInputColumnNamesChange(newValue);
   };
@@ -43,7 +46,7 @@ function DivideDatasetColumns({
     const { key, ...otherProps } = props;
     const columnType = columnTypes[option];
     const typeColor = columnType?.type
-      ? getColorByColumnType(columnType.type)
+      ? getColorByColumnType(columnType.type, theme)
       : null;
 
     return (
@@ -76,7 +79,7 @@ function DivideDatasetColumns({
       const { key, ...tagProps } = getTagProps({ index });
       const columnType = columnTypes[option];
       const typeColor = columnType?.type
-        ? getColorByColumnType(columnType.type)
+        ? getColorByColumnType(columnType.type, theme)
         : null;
 
       const label =
diff --git a/DashAI/front/src/components/experiments/PrepareDatasetStep.jsx b/DashAI/front/src/components/experiments/PrepareDatasetStep.jsx
index 2380d65be..5746dfa35 100644
--- a/DashAI/front/src/components/experiments/PrepareDatasetStep.jsx
+++ b/DashAI/front/src/components/experiments/PrepareDatasetStep.jsx
@@ -9,6 +9,7 @@ import {
   AlertTitle,
   Chip,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import DivideDatasetColumns from "./DivideDatasetColumns";
 import SplitDatasetRows from "./SplitDatasetRows";
 import {
@@ -27,6 +28,7 @@ import { getColorByColumnType } from "../../utils";
  * @param {function} setNextEnabled function to enable or disable the "Next" button in the modal
  */
 function PrepareDatasetStep({ newExp, setNewExp, setNextEnabled }) {
+  const theme = useTheme();
   const [datasetInfo, setDatasetInfo] = useState({});
   const [datasetTypes, setDatasetTypes] = useState({});
   const { enqueueSnackbar } = useSnackbar();
diff --git a/DashAI/front/src/components/experiments/metrics/MetricCard.jsx b/DashAI/front/src/components/experiments/metrics/MetricCard.jsx
index 7ada1fd2f..f16cf4547 100644
--- a/DashAI/front/src/components/experiments/metrics/MetricCard.jsx
+++ b/DashAI/front/src/components/experiments/metrics/MetricCard.jsx
@@ -1,23 +1,9 @@
 import { Card, CardActionArea, Box, Typography, Chip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import CheckIcon from "@mui/icons-material/Check";
 import TrendingUpIcon from "@mui/icons-material/TrendingUp";
 import TrendingDownIcon from "@mui/icons-material/TrendingDown";
 
-const splitColors = {
-  train: {
-    border: "#4caf50",
-    bg: "rgba(76,175,80,0.08)",
-  },
-  test: {
-    border: "#2196f3",
-    bg: "rgba(33,150,243,0.08)",
-  },
-  validation: {
-    border: "#ff9800",
-    bg: "rgba(255,152,0,0.08)",
-  },
-};
-
 export default function MetricCard({
   metric,
   isSelected,
@@ -25,6 +11,23 @@ export default function MetricCard({
   splitType,
   disabled = false,
 }) {
+  const theme = useTheme();
+
+  const splitColors = {
+    train: {
+      border: theme.palette.chart.train,
+      bg: `${theme.palette.chart.train}14`, // ~8% opacity
+    },
+    test: {
+      border: theme.palette.chart.test,
+      bg: `${theme.palette.chart.test}14`,
+    },
+    validation: {
+      border: theme.palette.chart.validation,
+      bg: `${theme.palette.chart.validation}14`,
+    },
+  };
+
   const colors = splitColors[splitType];
 
   return (
diff --git a/DashAI/front/src/components/generative/ChatTimeStamp.jsx b/DashAI/front/src/components/generative/ChatTimeStamp.jsx
index 3843cf732..ec4501991 100644
--- a/DashAI/front/src/components/generative/ChatTimeStamp.jsx
+++ b/DashAI/front/src/components/generative/ChatTimeStamp.jsx
@@ -1,13 +1,16 @@
 import { Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export function ChatTimestamp({ timestamp, isUser }) {
+  const theme = useTheme();
+
   if (!timestamp) return null;
 
   return (
     <Typography
       variant="caption"
-      color="text.secondary"
       sx={{
+        color: theme.palette.text.secondary,
         display: "block",
         mt: 0.5,
         textAlign: isUser ? "right" : "left",
diff --git a/DashAI/front/src/components/generative/WaitingAnimationChat.jsx b/DashAI/front/src/components/generative/WaitingAnimationChat.jsx
index 6b7d406ed..5152f2369 100644
--- a/DashAI/front/src/components/generative/WaitingAnimationChat.jsx
+++ b/DashAI/front/src/components/generative/WaitingAnimationChat.jsx
@@ -1,7 +1,9 @@
 import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { useState, useEffect } from "react";
 
 export function WaitingAnimationChat({ isActive }) {
+  const theme = useTheme();
   const [dots, setDots] = useState("");
 
   useEffect(() => {
@@ -21,7 +23,7 @@ export function WaitingAnimationChat({ isActive }) {
 
   return (
     <Box sx={{ minWidth: "40px", minHeight: "24px" }}>
-      <Typography variant="body2" color="text.primary">
+      <Typography variant="body2" sx={{ color: theme.palette.text.primary }}>
         {dots}
       </Typography>
     </Box>
diff --git a/DashAI/front/src/components/models/DatasetVisualization.jsx b/DashAI/front/src/components/models/DatasetVisualization.jsx
index 66bc4d82b..a87c28a78 100644
--- a/DashAI/front/src/components/models/DatasetVisualization.jsx
+++ b/DashAI/front/src/components/models/DatasetVisualization.jsx
@@ -10,6 +10,7 @@ import {
   Tabs,
   Tab,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { AddCircleOutline as AddIcon } from "@mui/icons-material";
 import {
   getDatasetFile,
@@ -35,12 +36,14 @@ export default function DatasetVisualization({
   existingSessions = [],
   tasks = [],
 }) {
+  const theme = useTheme();
+
   if (!dataset) {
     return (
       <Box
         sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
       >
-        <CircularProgress sx={{ color: "#00BEBB" }} />
+        <CircularProgress sx={{ color: theme.palette.primary.main }} />
         <Typography>Loading...</Typography>
       </Box>
     );
@@ -221,7 +224,7 @@ export default function DatasetVisualization({
             {/* Tabs */}
             <Tabs
               sx={{
-                bgcolor: "#2C2C2C",
+                bgcolor: theme.palette.ui.panelDark,
                 borderRadius: 1,
                 minHeight: "48px",
                 "& .MuiTabs-indicator": {
@@ -330,7 +333,7 @@ export default function DatasetVisualization({
               gap: 2,
             }}
           >
-            <CircularProgress sx={{ color: "#00BEBB" }} />
+            <CircularProgress sx={{ color: theme.palette.primary.main }} />
             <Typography>Processing your dataset...</Typography>
             <Typography
               variant="body2"
diff --git a/DashAI/front/src/components/models/LeftBar.jsx b/DashAI/front/src/components/models/LeftBar.jsx
index 63b97b816..c19d8f299 100644
--- a/DashAI/front/src/components/models/LeftBar.jsx
+++ b/DashAI/front/src/components/models/LeftBar.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Box, Divider, Typography, IconButton } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { ChevronLeft } from "@mui/icons-material";
 import StorageIcon from "@mui/icons-material/Storage";
 import Biotech from "@mui/icons-material/Biotech";
@@ -27,6 +28,7 @@ export default function ModelsLeftBar({
   onToggle,
   handleNewSessionButton,
 }) {
+  const theme = useTheme();
   const [searchQuery, setSearchQuery] = useState("");
   const [filteredDatasets, setFilteredDatasets] = useState(datasets);
   const [filteredSessions, setFilteredSessions] = useState(sessions);
@@ -144,7 +146,7 @@ export default function ModelsLeftBar({
           <ChevronLeft />
         </IconButton>
       </Box>
-      <Divider sx={{ width: "100%", bgcolor: "#252836" }} />
+      <Divider sx={{ width: "100%", bgcolor: theme.palette.ui.borderDark }} />
 
       {/* Create new item button */}
       <Box p={2} sx={{ height: "64px", display: "flex", alignItems: "center" }}>
@@ -154,7 +156,7 @@ export default function ModelsLeftBar({
             title="New Dataset/Session"
           />
         ) : (
-          <Typography variant="body1" color="textSecondary">
+          <Typography variant="body1" color="text.secondary">
             Models Module
           </Typography>
         )}
@@ -169,7 +171,9 @@ export default function ModelsLeftBar({
         />
       </Box>
 
-      <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+      <Divider
+        sx={{ width: "90%", bgcolor: theme.palette.ui.borderDark, mx: "auto" }}
+      />
 
       {/* Scrollable content */}
       <Box display="flex" flexDirection="column" flex={1} minHeight={0}>
@@ -185,7 +189,13 @@ export default function ModelsLeftBar({
           getItemDescription={getDatasetDescription}
         />
 
-        <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+        <Divider
+          sx={{
+            width: "90%",
+            bgcolor: theme.palette.ui.borderDark,
+            mx: "auto",
+          }}
+        />
 
         <GroupedCollapsibleList
           groups={groupedSessions}
diff --git a/DashAI/front/src/components/models/RightBar.jsx b/DashAI/front/src/components/models/RightBar.jsx
index 2141f9624..1c7c47413 100644
--- a/DashAI/front/src/components/models/RightBar.jsx
+++ b/DashAI/front/src/components/models/RightBar.jsx
@@ -7,6 +7,7 @@ import {
   TextField,
   CircularProgress,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { ChevronRight, Search as SearchIcon } from "@mui/icons-material";
 import { useSnackbar } from "notistack";
 import SideBar from "../threeSectionLayout/SideBar";
@@ -14,6 +15,7 @@ import { getComponents } from "../../api/component";
 import ModelListItem from "./model/ModelListItem";
 
 export default function ModelsRightBar({ session, onToggle, onModelClick }) {
+  const theme = useTheme();
   const [models, setModels] = useState([]);
   const [filteredModels, setFilteredModels] = useState([]);
   const [searchQuery, setSearchQuery] = useState("");
@@ -86,7 +88,7 @@ export default function ModelsRightBar({ session, onToggle, onModelClick }) {
         <Box
           sx={{
             p: 2,
-            borderBottom: "1px solid #333",
+            borderBottom: `1px solid ${theme.palette.ui.border}`,
             flexShrink: 0,
             height: 64,
             display: "flex",
@@ -94,7 +96,9 @@ export default function ModelsRightBar({ session, onToggle, onModelClick }) {
             justifyContent: "space-between",
           }}
         >
-          <Typography variant="h6">Available Models</Typography>
+          <Typography variant="h6" color="text.primary">
+            Available Models
+          </Typography>
           <IconButton
             size="small"
             onClick={onToggle}
diff --git a/DashAI/front/src/components/models/RunCard.jsx b/DashAI/front/src/components/models/RunCard.jsx
index e24202c41..e2272b717 100644
--- a/DashAI/front/src/components/models/RunCard.jsx
+++ b/DashAI/front/src/components/models/RunCard.jsx
@@ -19,6 +19,7 @@ import {
   Paper,
   Divider,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import {
   PlayArrow,
   Stop,
@@ -47,6 +48,7 @@ function RunCard({
   onOperationsRefresh,
   explainerRefreshTrigger,
 }) {
+  const theme = useTheme();
   const [expanded, setExpanded] = useState(false);
 
   // Get display status from numeric code
@@ -147,7 +149,10 @@ function RunCard({
         {/* Model */}
         <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 2 }}>
           <Settings fontSize="small" color="action" />
-          <Typography variant="body2" color="text.secondary">
+          <Typography
+            variant="body2"
+            sx={{ color: theme.palette.text.secondary }}
+          >
             {modelDisplayName}
           </Typography>
         </Box>
@@ -164,7 +169,10 @@ function RunCard({
                   values.reduce((sum, val) => sum + val, 0) / values.length;
                 return (
                   <Box key={metric}>
-                    <Typography variant="caption" color="text.secondary">
+                    <Typography
+                      variant="caption"
+                      sx={{ color: theme.palette.text.secondary }}
+                    >
                       {metric.toUpperCase()}
                     </Typography>
                     <Typography variant="body2" fontWeight="medium">
@@ -179,7 +187,10 @@ function RunCard({
 
         {/* Description if present */}
         {run.description && (
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+          <Typography
+            variant="body2"
+            sx={{ color: theme.palette.text.secondary, mb: 2 }}
+          >
             {run.description}
           </Typography>
         )}
@@ -269,7 +280,10 @@ function RunCard({
               {/* Goal Metric */}
               {run.goal_metric && (
                 <Box sx={{ mt: 2 }}>
-                  <Typography variant="body2" color="text.secondary">
+                  <Typography
+                    variant="body2"
+                    sx={{ color: theme.palette.text.secondary }}
+                  >
                     Goal Metric: <strong>{run.goal_metric}</strong>
                   </Typography>
                 </Box>
diff --git a/DashAI/front/src/components/models/SessionVisualization.jsx b/DashAI/front/src/components/models/SessionVisualization.jsx
index 078818fa8..9aac09a85 100644
--- a/DashAI/front/src/components/models/SessionVisualization.jsx
+++ b/DashAI/front/src/components/models/SessionVisualization.jsx
@@ -215,7 +215,9 @@ export default function SessionVisualization({
               mb: 2,
             }}
           >
-            <Typography variant="h6">Model Comparison</Typography>
+            <Typography variant="h6" color="text.primary">
+              Model Comparison
+            </Typography>
             <Box sx={{ display: "flex", gap: 2, alignItems: "center" }}>
               {/* Metric Split Selector */}
               {showTable &&
diff --git a/DashAI/front/src/components/models/model/ModelListItem.jsx b/DashAI/front/src/components/models/model/ModelListItem.jsx
index c2ef3c6fa..14e3d5b45 100644
--- a/DashAI/front/src/components/models/model/ModelListItem.jsx
+++ b/DashAI/front/src/components/models/model/ModelListItem.jsx
@@ -1,9 +1,11 @@
 import React, { useState } from "react";
 import { Box, Typography, Tooltip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import HoverModelInfo from "./HoverModelInfo";
 import { ModelIcon } from "./ModelIcon";
 
 export default function ModelListItem({ model, disabled = false, onClick }) {
+  const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState(null);
   const [hoveredModel, setHoveredModel] = useState(null);
 
@@ -20,7 +22,8 @@ export default function ModelListItem({ model, disabled = false, onClick }) {
   };
 
   // Get color and icon from metadata or use defaults
-  const color = model.color || model.metadata?.color || "#795548";
+  const color =
+    model.color || model.metadata?.color || theme.palette.text.secondary;
   const iconName = model.metadata?.icon || "Science";
 
   return (
diff --git a/DashAI/front/src/components/notebooks/DescriptionPanel.jsx b/DashAI/front/src/components/notebooks/DescriptionPanel.jsx
index 5b4437952..a558daf58 100644
--- a/DashAI/front/src/components/notebooks/DescriptionPanel.jsx
+++ b/DashAI/front/src/components/notebooks/DescriptionPanel.jsx
@@ -1,12 +1,14 @@
 import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export default function DescriptionPanel() {
+  const theme = useTheme();
   return (
     <Box
       sx={{
         p: 2,
-        bgcolor: "#2C2C2C",
-        borderTop: "1px solid #444",
+        bgcolor: theme.palette.ui.panelDark,
+        borderTop: `1px solid ${theme.palette.ui.borderLight}`,
         minHeight: 80,
         maxHeight: 80,
         display: "flex",
diff --git a/DashAI/front/src/components/notebooks/NoteBox.jsx b/DashAI/front/src/components/notebooks/NoteBox.jsx
index 16b9e2805..d5c6d5e96 100644
--- a/DashAI/front/src/components/notebooks/NoteBox.jsx
+++ b/DashAI/front/src/components/notebooks/NoteBox.jsx
@@ -1,19 +1,24 @@
 import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export default function NoteBox({ message, className = "" }) {
+  const theme = useTheme();
   return (
     <Box
       className={className}
       sx={{
         mt: 2,
         p: 2,
-        bgcolor: "#212121",
+        bgcolor: theme.palette.background.box,
         borderRadius: 1,
-        border: "1px solid rgba(255, 255, 255, 0.1)",
+        border: `1px solid ${theme.palette.ui.divider}`,
         mb: 2,
       }}
     >
-      <Typography variant="subtitle2" sx={{ color: "#00BEBB", mb: 1 }}>
+      <Typography
+        variant="subtitle2"
+        sx={{ color: theme.palette.primary.main, mb: 1 }}
+      >
         Note:
       </Typography>
       <Typography variant="body2">{message}</Typography>
diff --git a/DashAI/front/src/components/notebooks/RightBar.jsx b/DashAI/front/src/components/notebooks/RightBar.jsx
index b7df93504..23b3ef831 100644
--- a/DashAI/front/src/components/notebooks/RightBar.jsx
+++ b/DashAI/front/src/components/notebooks/RightBar.jsx
@@ -297,7 +297,9 @@ export default function RightBar({ notebook, onToggle }) {
             justifyContent: "space-between",
           }}
         >
-          <Typography variant="h6">Analysis Tools</Typography>
+          <Typography variant="h6" color="text.primary">
+            Analysis Tools
+          </Typography>
           <IconButton
             size="small"
             onClick={onToggle}
diff --git a/DashAI/front/src/components/notebooks/RowSelector.jsx b/DashAI/front/src/components/notebooks/RowSelector.jsx
index 470a383a5..dc0d9e2d0 100644
--- a/DashAI/front/src/components/notebooks/RowSelector.jsx
+++ b/DashAI/front/src/components/notebooks/RowSelector.jsx
@@ -12,8 +12,10 @@ import {
   Stack,
   Divider,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export function RowSelector({ totalRows, onSelectionChange, initialRows }) {
+  const theme = useTheme();
   const [selectedRows, setSelectedRows] = useState([]);
   const [selectionMode, setSelectionMode] = useState("range");
   const [rangeStart, setRangeStart] = useState("");
@@ -181,7 +183,10 @@ export function RowSelector({ totalRows, onSelectionChange, initialRows }) {
       )}
       <Divider sx={{ my: 1 }} />
       <Box mt={1}>
-        <Typography variant="caption" color="text.secondary">
+        <Typography
+          variant="caption"
+          sx={{ color: theme.palette.text.secondary }}
+        >
           Selected rows:{" "}
           {selectedRows.length === 0
             ? "all"
diff --git a/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx b/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx
index 2ee63adc2..e929ac400 100644
--- a/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx
+++ b/DashAI/front/src/components/notebooks/converter/ConverterBox.jsx
@@ -8,6 +8,7 @@ import {
   CircularProgress,
   IconButton,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { Delete } from "@mui/icons-material";
 import { DataGrid } from "@mui/x-data-grid";
 import Transform from "@mui/icons-material/Transform";
@@ -20,6 +21,7 @@ export default function ConverterBox({
   onStatusChange,
   handleConverterDeleteClick,
 }) {
+  const theme = useTheme();
   const [converterComponent, setConverterComponent] = useState({});
 
   useEffect(() => {
@@ -70,7 +72,11 @@ export default function ConverterBox({
     <Card
       key={converter.id}
       className="converter-box"
-      sx={{ bgcolor: "#212121", borderRadius: 2, height: "100%" }}
+      sx={{
+        bgcolor: theme.palette.background.box,
+        borderRadius: 2,
+        height: "100%",
+      }}
     >
       <CardContent
         sx={{
@@ -89,7 +95,9 @@ export default function ConverterBox({
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-            <Transform sx={{ color: "#00BEBB", fontSize: 20 }} />
+            <Transform
+              sx={{ color: theme.palette.primary.main, fontSize: 20 }}
+            />
             <Typography variant="h6">
               {converterComponent.display_name}
             </Typography>
@@ -121,7 +129,7 @@ export default function ConverterBox({
           <Box
             sx={{
               flexGrow: 1,
-              bgcolor: "#2e3037",
+              bgcolor: theme.palette.background.default,
               borderRadius: 1,
               display: "flex",
               flexDirection: "column",
@@ -188,7 +196,7 @@ export default function ConverterBox({
           <Box
             sx={{
               flexGrow: 1,
-              bgcolor: "#2e3037",
+              bgcolor: theme.palette.background.default,
               borderRadius: 1,
               display: "flex",
               alignItems: "center",
@@ -207,7 +215,7 @@ export default function ConverterBox({
           <Box
             sx={{
               flexGrow: 1,
-              bgcolor: "rgba(255, 255, 255, 0.05)",
+              bgcolor: theme.palette.ui.hover,
               borderRadius: 1,
               display: "flex",
               alignItems: "center",
diff --git a/DashAI/front/src/components/notebooks/converterCreation/ScopeStepConverter.jsx b/DashAI/front/src/components/notebooks/converterCreation/ScopeStepConverter.jsx
index 0c45c9e29..421314a07 100644
--- a/DashAI/front/src/components/notebooks/converterCreation/ScopeStepConverter.jsx
+++ b/DashAI/front/src/components/notebooks/converterCreation/ScopeStepConverter.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import { Box, Typography, Tooltip, IconButton } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import ConverterClassColumnModal from "./ConverterTargetColumnModal";
 import HelpIcon from "@mui/icons-material/Help";
 import FormSchemaButtonGroup from "../../shared/FormSchemaButtonGroup";
@@ -23,6 +24,7 @@ export default function ScopeStepConverter({
   notebook,
   nextStep,
 }) {
+  const theme = useTheme();
   const [datasetInfo, setDatasetInfo] = useState(0);
   const [datasetColumns, setDatasetColumns] = useState([]);
   const tourContext = useTourContext();
@@ -100,7 +102,10 @@ export default function ScopeStepConverter({
         <Typography variant="subtitle2" gutterBottom>
           Step 1: Select Scope
         </Typography>
-        <Typography variant="body2" color="text.secondary">
+        <Typography
+          variant="body2"
+          sx={{ color: theme.palette.text.secondary }}
+        >
           Here you will configure which columns to apply the converter to.
         </Typography>
         {/* Scope selection UI */}
@@ -119,7 +124,10 @@ export default function ScopeStepConverter({
           }}
           onValidationChange={(isValid) => setIsColumnSelectionValid(isValid)}
         />
-        <Typography variant="body2" color="text.secondary">
+        <Typography
+          variant="body2"
+          sx={{ color: theme.palette.text.secondary }}
+        >
           Here you will configure which rows to apply the converter to.
         </Typography>
         <RowSelector
diff --git a/DashAI/front/src/components/notebooks/dataset/DatasetVisualization.jsx b/DashAI/front/src/components/notebooks/dataset/DatasetVisualization.jsx
index 44038b9a7..e6e51443f 100644
--- a/DashAI/front/src/components/notebooks/dataset/DatasetVisualization.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/DatasetVisualization.jsx
@@ -12,6 +12,7 @@ import {
   Tabs,
   Tab,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import {
   AddCircleOutline as AddIcon,
   CheckCircle as CheckIcon,
@@ -44,12 +45,14 @@ export default function DatasetVisualization({
   onNewNotebook,
   existingNotebooks = [],
 }) {
+  const theme = useTheme();
+
   if (!dataset) {
     return (
       <Box
         sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
       >
-        <CircularProgress sx={{ color: "#00BEBB" }} />
+        <CircularProgress sx={{ color: theme.palette.primary.main }} />
         <Typography>Loading...</Typography>
       </Box>
     );
diff --git a/DashAI/front/src/components/notebooks/dataset/IssueCard.jsx b/DashAI/front/src/components/notebooks/dataset/IssueCard.jsx
index c4e1e4062..a7e753578 100644
--- a/DashAI/front/src/components/notebooks/dataset/IssueCard.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/IssueCard.jsx
@@ -11,7 +11,7 @@ const IssueCard = ({ title, count, items, severity = "info" }) => {
         p: 2,
         border: `1px solid ${palette.light}`,
         borderRadius: 2,
-        bgcolor: "#2C2C2C",
+        bgcolor: theme.palette.ui.panelDark,
         color: palette.main,
         display: "flex",
         flexDirection: "column",
diff --git a/DashAI/front/src/components/notebooks/dataset/MetricRow.jsx b/DashAI/front/src/components/notebooks/dataset/MetricRow.jsx
index 1d3fbb671..cf938dc28 100644
--- a/DashAI/front/src/components/notebooks/dataset/MetricRow.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/MetricRow.jsx
@@ -1,13 +1,18 @@
 import React from "react";
 import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
-export const MetricRow = ({ label, value }) => (
-  <Box display="flex" justifyContent="space-between">
-    <Typography variant="body2" color="text.secondary">
-      {label}
-    </Typography>
-    <Typography variant="body2" fontWeight="medium">
-      {value}
-    </Typography>
-  </Box>
-);
+export const MetricRow = ({ label, value }) => {
+  const theme = useTheme();
+
+  return (
+    <Box display="flex" justifyContent="space-between">
+      <Typography variant="body2" sx={{ color: theme.palette.text.secondary }}>
+        {label}
+      </Typography>
+      <Typography variant="body2" fontWeight="medium">
+        {value}
+      </Typography>
+    </Box>
+  );
+};
diff --git a/DashAI/front/src/components/notebooks/dataset/StatBox.jsx b/DashAI/front/src/components/notebooks/dataset/StatBox.jsx
index c0b425fb0..a3750bc24 100644
--- a/DashAI/front/src/components/notebooks/dataset/StatBox.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/StatBox.jsx
@@ -1,22 +1,30 @@
 import React from "react";
 import { Paper, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
-export const StatBox = ({ label, value }) => (
-  <Paper
-    elevation={1}
-    sx={{
-      p: 2,
-      textAlign: "center",
-      borderRadius: 2,
-      bgcolor: "#363636",
-      width: "200px",
-    }}
-  >
-    <Typography variant="h5" fontWeight="bold" color="text.primary">
-      {value}
-    </Typography>
-    <Typography variant="body2" color="text.secondary">
-      {label}
-    </Typography>
-  </Paper>
-);
+export const StatBox = ({ label, value }) => {
+  const theme = useTheme();
+  return (
+    <Paper
+      elevation={1}
+      sx={{
+        p: 2,
+        textAlign: "center",
+        borderRadius: 2,
+        bgcolor: theme.palette.ui.panelMedium,
+        width: "200px",
+      }}
+    >
+      <Typography
+        variant="h5"
+        fontWeight="bold"
+        sx={{ color: theme.palette.text.primary }}
+      >
+        {value}
+      </Typography>
+      <Typography variant="body2" sx={{ color: theme.palette.text.secondary }}>
+        {label}
+      </Typography>
+    </Paper>
+  );
+};
diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx
index c45ce91f6..668f13123 100644
--- a/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/tabs/CorrelationsTab.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Box, Typography, CardContent, Card } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import {
   BarChart,
   Bar,
@@ -12,6 +13,7 @@ import {
 } from "recharts";
 
 const CorrelationsTab = ({ correlations }) => {
+  const theme = useTheme();
   const corrData = [];
   Object.entries(correlations).forEach(([col1, corrs]) => {
     Object.entries(corrs).forEach(([col2, value]) => {
@@ -26,7 +28,7 @@ const CorrelationsTab = ({ correlations }) => {
 
   return (
     <Card>
-      <CardContent sx={{ bgcolor: "#2C2C2C" }}>
+      <CardContent sx={{ bgcolor: theme.palette.ui.panelDark }}>
         <Typography variant="h6" fontWeight="bold" mb={3}>
           Correlation Analysis
         </Typography>
@@ -39,13 +41,13 @@ const CorrelationsTab = ({ correlations }) => {
               <YAxis domain={[-1, 1]} />
               <Tooltip
                 contentStyle={{
-                  backgroundColor: "#121212",
+                  backgroundColor: theme.palette.background.paper,
                   borderRadius: 4,
-                  color: "#ffffff",
+                  color: theme.palette.text.primary,
                 }}
-                labelStyle={{ color: "#ffffff" }}
+                labelStyle={{ color: theme.palette.text.primary }}
               />
-              <Bar dataKey="correlation" fill="#3b82f6">
+              <Bar dataKey="correlation" fill={theme.palette.info.main}>
                 {corrData.map((entry, index) => (
                   <Cell
                     key={index}
diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx
index 0e0eea0f4..f7f79df8d 100644
--- a/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx
@@ -8,6 +8,7 @@ import {
   Paper,
   Alert,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import {
   ResponsiveContainer,
   BarChart,
@@ -26,6 +27,7 @@ const OverviewTab = ({
   total_rows,
   fetchDatasetPage,
 }) => {
+  const theme = useTheme();
   const missingData = Object.entries(nan).map(([col, count]) => ({
     column: col,
     missing: count,
@@ -45,7 +47,7 @@ const OverviewTab = ({
     <Box display="flex" flexDirection="column" gap={4}>
       {/* Data View */}
       <Card>
-        <CardContent sx={{ bgcolor: "#2C2C2C" }}>
+        <CardContent sx={{ bgcolor: theme.palette.ui.panelDark }}>
           <Typography variant="h6" gutterBottom>
             Dataset Preview
           </Typography>
diff --git a/DashAI/front/src/components/notebooks/datasetCreation/SaveDatasetModal.jsx b/DashAI/front/src/components/notebooks/datasetCreation/SaveDatasetModal.jsx
index 1c7a2a030..5f1a27495 100644
--- a/DashAI/front/src/components/notebooks/datasetCreation/SaveDatasetModal.jsx
+++ b/DashAI/front/src/components/notebooks/datasetCreation/SaveDatasetModal.jsx
@@ -8,6 +8,7 @@ import {
   Typography,
   IconButton,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { Close } from "@mui/icons-material";
 import { useSnackbar } from "notistack";
 import ConverterHistoryList from "../converter/ConverterHistoryList";
diff --git a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
index 8aee6274b..d4923b34a 100644
--- a/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
+++ b/DashAI/front/src/components/notebooks/explorer/ExplorerBox.jsx
@@ -9,6 +9,7 @@ import {
   CircularProgress,
   Button,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { Analytics, Info, Delete } from "@mui/icons-material";
 import { TabResults } from "./tabs";
 import { getExplorerStatus } from "../../../utils/explorerStatus";
@@ -22,6 +23,7 @@ export default function ExplorerBox({
   handleExplorerDeleteClick,
   onStatusChange,
 }) {
+  const theme = useTheme();
   const [explorerComponent, setExplorerComponent] = useState({});
   const [openExplorerDetails, setOpenExplorerDetails] = useState(false);
   const { loading, data, dataType, setData } = useExplorerResults(explorer);
@@ -78,7 +80,11 @@ export default function ExplorerBox({
   return (
     <Card
       key={explorer.id}
-      sx={{ bgcolor: "#212121", borderRadius: 2, height: "100%" }}
+      sx={{
+        bgcolor: theme.palette.background.box,
+        borderRadius: 2,
+        height: "100%",
+      }}
       className="explorer-box"
     >
       <CardContent
@@ -98,7 +104,9 @@ export default function ExplorerBox({
           }}
         >
           <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-            <Analytics sx={{ color: "#00BEBB", fontSize: 20 }} />
+            <Analytics
+              sx={{ color: theme.palette.primary.main, fontSize: 20 }}
+            />
             <Typography variant="h6">
               {explorerComponent.display_name}
             </Typography>
@@ -146,7 +154,7 @@ export default function ExplorerBox({
           <Box
             sx={{
               flexGrow: 1,
-              bgcolor: "#2e3037",
+              bgcolor: theme.palette.background.default,
               borderRadius: 1,
               display: "flex",
               flexDirection: "column",
@@ -166,7 +174,7 @@ export default function ExplorerBox({
           <Box
             sx={{
               flexGrow: 1,
-              bgcolor: "#2e3037",
+              bgcolor: theme.palette.background.default,
               borderRadius: 1,
               display: "flex",
               alignItems: "center",
@@ -185,7 +193,7 @@ export default function ExplorerBox({
           <Box
             sx={{
               flexGrow: 1,
-              bgcolor: "rgba(255, 255, 255, 0.05)",
+              bgcolor: theme.palette.ui.hover,
               borderRadius: 1,
               display: "flex",
               alignItems: "center",
diff --git a/DashAI/front/src/components/notebooks/explorerCreation/ScopeStepExplorer.jsx b/DashAI/front/src/components/notebooks/explorerCreation/ScopeStepExplorer.jsx
index 92ef28564..065f9c1f9 100644
--- a/DashAI/front/src/components/notebooks/explorerCreation/ScopeStepExplorer.jsx
+++ b/DashAI/front/src/components/notebooks/explorerCreation/ScopeStepExplorer.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import FormSchemaButtonGroup from "../../shared/FormSchemaButtonGroup";
 import ColumnSelector from "../ColumnSelector";
 import { useTourContext } from "../../tour/TourProvider";
@@ -10,6 +11,7 @@ export default function ScopeStepExplorer({
   setScopeColumns,
   nextStep,
 }) {
+  const theme = useTheme();
   const [isSelectionValid, setIsSelectionValid] = useState(false);
   const allowedDtypes = tool?.metadata?.allowed_dtypes || [];
   const restrictedDtypes = tool?.metadata?.restricted_dtypes || [];
@@ -41,7 +43,10 @@ export default function ScopeStepExplorer({
         <Typography variant="subtitle2" gutterBottom>
           Step 1: Select Scope
         </Typography>
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+        <Typography
+          variant="body2"
+          sx={{ color: theme.palette.text.secondary, mb: 1 }}
+        >
           Select the columns to be used by the explorer.
         </Typography>
 
diff --git a/DashAI/front/src/components/pipelines/CustomNode.jsx b/DashAI/front/src/components/pipelines/CustomNode.jsx
index 355c77cbc..d49542e0e 100644
--- a/DashAI/front/src/components/pipelines/CustomNode.jsx
+++ b/DashAI/front/src/components/pipelines/CustomNode.jsx
@@ -27,9 +27,13 @@ const CustomNode = ({ data, isConnectable }) => {
   const borderColor =
     data.notConfigured && !isDisabled
       ? `2px solid ${theme.palette.warning.main}`
-      : "1px solid #ccc";
-  const iconColor = isDisabled ? "#aaa" : "#555";
-  const bgColor = isDisabled ? "#f0f0f0" : "#fff";
+      : `1px solid ${theme.palette.ui.borderLight}`;
+  const iconColor = isDisabled
+    ? theme.palette.text.secondary
+    : theme.palette.text.primary;
+  const bgColor = isDisabled
+    ? theme.palette.ui.panelMedium
+    : theme.palette.background.paper;
 
   const nodeContent = (
     <Box
@@ -66,7 +70,9 @@ const CustomNode = ({ data, isConnectable }) => {
             },
           }}
         >
-          <CloseIcon sx={{ fontSize: 10, color: "#888" }} />
+          <CloseIcon
+            sx={{ fontSize: 10, color: theme.palette.text.secondary }}
+          />
         </IconButton>
       )}
 
@@ -76,10 +82,10 @@ const CustomNode = ({ data, isConnectable }) => {
           position={Position.Left}
           style={{
             background: isDisabled
-              ? "#ccc"
+              ? theme.palette.ui.border
               : data.hasError
                 ? theme.palette.error.main
-                : "#555",
+                : theme.palette.text.primary,
             width: 8,
             height: 8,
             borderRadius: "50%",
@@ -95,7 +101,9 @@ const CustomNode = ({ data, isConnectable }) => {
           type="source"
           position={Position.Right}
           style={{
-            background: isDisabled ? "#ccc" : "#555",
+            background: isDisabled
+              ? theme.palette.ui.border
+              : theme.palette.text.primary,
             width: 8,
             height: 8,
             borderRadius: "50%",
@@ -114,7 +122,9 @@ const CustomNode = ({ data, isConnectable }) => {
         alignItems: "center",
       }}
     >
-      <Typography sx={{ fontSize: 11, mb: 0.5, color: "#000" }}>
+      <Typography
+        sx={{ fontSize: 11, mb: 0.5, color: theme.palette.text.primary }}
+      >
         {data.name || data.label}
       </Typography>
 
diff --git a/DashAI/front/src/components/pipelines/NodeSidebar.jsx b/DashAI/front/src/components/pipelines/NodeSidebar.jsx
index f8069df50..0bc68856a 100644
--- a/DashAI/front/src/components/pipelines/NodeSidebar.jsx
+++ b/DashAI/front/src/components/pipelines/NodeSidebar.jsx
@@ -1,14 +1,25 @@
 import React from "react";
 import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import { getNodeHelp } from "./nodeHelp";
 
 function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) {
+  const theme = useTheme();
   return (
     <Box
-      sx={{ width: 250, p: 2, backgroundColor: "#212121", overflowY: "auto" }}
+      sx={{
+        width: 250,
+        p: 2,
+        backgroundColor: theme.palette.background.box,
+        overflowY: "auto",
+      }}
     >
-      <Typography variant="h6" gutterBottom sx={{ color: "#fff" }}>
+      <Typography
+        variant="h6"
+        gutterBottom
+        sx={{ color: theme.palette.text.primary }}
+      >
         Nodes
       </Typography>
       {availableNodes.map((node) => (
@@ -19,8 +30,8 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) {
           sx={{
             mb: 1,
             p: 1,
-            backgroundColor: "#333",
-            color: "#fff",
+            backgroundColor: theme.palette.ui.border,
+            color: theme.palette.text.primary,
             borderRadius: 1,
             textAlign: "center",
             cursor: "grab",
@@ -33,8 +44,8 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) {
       <Box
         sx={{
           p: 2,
-          borderTop: "1px solid #ccc",
-          backgroundColor: "#212121",
+          borderTop: `1px solid ${theme.palette.ui.borderLight}`,
+          backgroundColor: theme.palette.background.box,
           mt: 2,
         }}
       >
@@ -44,7 +55,11 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) {
             <>
               <Typography
                 variant="h6"
-                sx={{ color: "#fff", display: "flex", gap: 1 }}
+                sx={{
+                  color: theme.palette.text.primary,
+                  display: "flex",
+                  gap: 1,
+                }}
               >
                 <HelpOutlineIcon fontSize="inherit" sx={{ mt: 0.8 }} />
                 {help.name || nodeHelp?.type || "Pipeline Help"}
@@ -55,7 +70,7 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) {
                     <Typography
                       key={idx}
                       variant="body1"
-                      sx={{ mb: 1, color: "#ddd" }}
+                      sx={{ mb: 1, color: theme.palette.text.secondary }}
                     >
                       {paragraph}
                     </Typography>
@@ -63,17 +78,26 @@ function NodeSidebar({ availableNodes, onDragStart, nodeHelp }) {
                 </>
               )}
               {help.input && (
-                <Typography variant="body2" sx={{ color: "#ccc" }}>
+                <Typography
+                  variant="body2"
+                  sx={{ color: theme.palette.text.secondary }}
+                >
                   <u>Inputs:</u> {help.input || "None"}
                 </Typography>
               )}
               {help.output && (
-                <Typography variant="body2" sx={{ color: "#ccc" }}>
+                <Typography
+                  variant="body2"
+                  sx={{ color: theme.palette.text.secondary }}
+                >
                   <u>Outputs:</u> {help.output || "None"}
                 </Typography>
               )}
               {help.next && (
-                <Typography variant="body2" sx={{ color: "#ccc" }}>
+                <Typography
+                  variant="body2"
+                  sx={{ color: theme.palette.text.secondary }}
+                >
                   <u>Can be followed by:</u> {help.next || "None"}
                 </Typography>
               )}
diff --git a/DashAI/front/src/components/predictions/ManualInputForm.jsx b/DashAI/front/src/components/predictions/ManualInputForm.jsx
index 324eb1c84..b818f592b 100644
--- a/DashAI/front/src/components/predictions/ManualInputForm.jsx
+++ b/DashAI/front/src/components/predictions/ManualInputForm.jsx
@@ -12,6 +12,7 @@ import {
   Paper,
   IconButton,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { AddCircleOutline, DeleteOutline } from "@mui/icons-material";
 import { renderInputField } from "./renderInputField";
 
@@ -23,6 +24,7 @@ export default function ManualInputForm({
   manualInputData,
   setManualInputData,
 }) {
+  const theme = useTheme();
   const [rows, setRows] = useState(createInitialRows());
 
   function createInitialRows() {
@@ -92,7 +94,11 @@ export default function ManualInputForm({
       <Typography variant="h6" mb={2} fontWeight={600}>
         Manual Input
       </Typography>
-      <Typography variant="body2" mb={3} color="text.secondary">
+      <Typography
+        variant="body2"
+        mb={3}
+        sx={{ color: theme.palette.text.secondary }}
+      >
         Enter data manually for prediction. Fill in the fields below and submit
         when ready.
       </Typography>
diff --git a/DashAI/front/src/components/predictions/ModeSelector.jsx b/DashAI/front/src/components/predictions/ModeSelector.jsx
index a0cb7c258..bdcfdfa7d 100644
--- a/DashAI/front/src/components/predictions/ModeSelector.jsx
+++ b/DashAI/front/src/components/predictions/ModeSelector.jsx
@@ -1,15 +1,21 @@
 import { useState } from "react";
 import { Box, Card, CardContent, Typography, Paper } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import StorageIcon from "@mui/icons-material/Storage";
 import CreateIcon from "@mui/icons-material/Create";
 
 function ModeSelector({ predictionMode, setPredictionMode }) {
+  const theme = useTheme();
+
   return (
     <Box sx={{ mb: 3 }}>
       <Typography variant="h6" sx={{ mb: 1, fontWeight: 600 }}>
         Select Prediction Mode
       </Typography>
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+      <Typography
+        variant="body2"
+        sx={{ color: theme.palette.text.secondary, mb: 2 }}
+      >
         Choose how you would like to provide input data for the prediction.
       </Typography>
       <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 }}>
@@ -40,7 +46,10 @@ function ModeSelector({ predictionMode, setPredictionMode }) {
               <Typography variant="body2" fontWeight={600}>
                 Use Existing Dataset
               </Typography>
-              <Typography variant="caption" color="text.secondary">
+              <Typography
+                variant="caption"
+                sx={{ color: theme.palette.text.secondary }}
+              >
                 Select a dataset from the platform
               </Typography>
             </Box>
@@ -73,7 +82,10 @@ function ModeSelector({ predictionMode, setPredictionMode }) {
               <Typography variant="body2" fontWeight={600}>
                 Manual Prediction
               </Typography>
-              <Typography variant="caption" color="text.secondary">
+              <Typography
+                variant="caption"
+                sx={{ color: theme.palette.text.secondary }}
+              >
                 Enter values manually
               </Typography>
             </Box>
diff --git a/DashAI/front/src/components/predictions/PredictionsTable.jsx b/DashAI/front/src/components/predictions/PredictionsTable.jsx
index 96e5315ac..f55e3f3dd 100644
--- a/DashAI/front/src/components/predictions/PredictionsTable.jsx
+++ b/DashAI/front/src/components/predictions/PredictionsTable.jsx
@@ -7,12 +7,14 @@ import {
   Tooltip,
   IconButton,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { DataGrid } from "@mui/x-data-grid";
 import { formatDate, getColorByStatus } from "../../utils";
 import { getPredictionStatus } from "../../utils/predictionStatus";
 import { Delete } from "@mui/icons-material";
 
 function PredictionsTable({ predictions, onItemClick, onItemDelete }) {
+  const theme = useTheme();
   const StyledCell = styled("div")(({ theme, color }) => ({
     display: "inline-block",
     padding: theme.spacing(0.5),
@@ -63,7 +65,7 @@ function PredictionsTable({ predictions, onItemClick, onItemDelete }) {
 
             <Typography
               variant="caption"
-              color="text.secondary"
+              sx={{ color: theme.palette.text.secondary }}
               noWrap
               sx={{
                 lineHeight: 1.1,
@@ -116,7 +118,7 @@ function PredictionsTable({ predictions, onItemClick, onItemDelete }) {
       renderCell: (params) => {
         const statusText = getPredictionStatus(params?.row?.status);
         return (
-          <StyledCell color={getColorByStatus(statusText)}>
+          <StyledCell color={getColorByStatus(statusText, theme)}>
             {statusText}
           </StyledCell>
         );
@@ -145,8 +147,13 @@ function PredictionsTable({ predictions, onItemClick, onItemDelete }) {
   if (!predictions || predictions.length === 0) {
     return (
       <Box sx={{ textAlign: "center", py: 8 }}>
-        <Typography color="text.secondary">No predictions yet</Typography>
-        <Typography variant="caption" color="text.secondary">
+        <Typography sx={{ color: theme.palette.text.secondary }}>
+          No predictions yet
+        </Typography>
+        <Typography
+          variant="caption"
+          sx={{ color: theme.palette.text.secondary }}
+        >
           Run your first prediction to see it here
         </Typography>
       </Box>
@@ -163,7 +170,10 @@ function PredictionsTable({ predictions, onItemClick, onItemDelete }) {
       <Typography variant="h6" sx={{ mb: 1, fontWeight: 600 }}>
         Predictions
       </Typography>
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+      <Typography
+        variant="body2"
+        sx={{ color: theme.palette.text.secondary, mb: 2 }}
+      >
         Click on a prediction to view details or delete it using the delete
         icon.
       </Typography>
diff --git a/DashAI/front/src/components/predictions/ResultsTable.jsx b/DashAI/front/src/components/predictions/ResultsTable.jsx
index 07c0a6b16..8e30a1992 100644
--- a/DashAI/front/src/components/predictions/ResultsTable.jsx
+++ b/DashAI/front/src/components/predictions/ResultsTable.jsx
@@ -11,6 +11,7 @@ import {
   Paper,
   CircularProgress,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import { getPredictionStatus } from "../../utils/predictionStatus";
 import DatasetTable from "../notebooks/dataset/DatasetTable";
 import { getDatasetFile } from "../../api/datasets";
@@ -18,6 +19,7 @@ import { getDatasetFile } from "../../api/datasets";
 const RUNNING_STATUSES = ["Delivered", "Started"];
 
 function ResultsTable({ selectedPrediction }) {
+  const theme = useTheme();
   const [loadingExecution, setLoadingExecution] = useState(
     RUNNING_STATUSES.includes(getPredictionStatus(selectedPrediction?.status)),
   );
@@ -51,8 +53,7 @@ function ResultsTable({ selectedPrediction }) {
 
       <Typography
         variant="subtitle2"
-        color="text.secondary"
-        sx={{ mb: 1, display: "block" }}
+        sx={{ color: theme.palette.text.secondary, mb: 1, display: "block" }}
       >
         {loadingExecution
           ? "The prediction is still running. Results will be available once it is finished."
@@ -65,7 +66,7 @@ function ResultsTable({ selectedPrediction }) {
           sx={{
             py: 4,
             textAlign: "center",
-            color: "text.secondary",
+            color: theme.palette.text.secondary,
           }}
         >
           <CircularProgress size={28} />
@@ -79,7 +80,10 @@ function ResultsTable({ selectedPrediction }) {
         selectedPrediction &&
         getPredictionStatus(selectedPrediction?.status) === "Finished" && (
           <>
-            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+            <Typography
+              variant="body2"
+              sx={{ color: theme.palette.text.secondary, mb: 2 }}
+            >
               {selectedPrediction.dataset
                 ? `Based on dataset: ${selectedPrediction.dataset.name}`
                 : "Manually provided input data."}
diff --git a/DashAI/front/src/components/shared/FormSchemaBreadScrumbs.jsx b/DashAI/front/src/components/shared/FormSchemaBreadScrumbs.jsx
index 74275d99f..4b3c43a80 100644
--- a/DashAI/front/src/components/shared/FormSchemaBreadScrumbs.jsx
+++ b/DashAI/front/src/components/shared/FormSchemaBreadScrumbs.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import Breadcrumbs from "@mui/material/Breadcrumbs";
 import Typography from "@mui/material/Typography";
 import Link from "@mui/material/Link";
+import { useTheme } from "@mui/material/styles";
 import { useFormSchemaStore } from "../../contexts/schema";
 
 /**
@@ -9,6 +10,7 @@ import { useFormSchemaStore } from "../../contexts/schema";
  */
 
 function FormSchemaBreadScrumbs() {
+  const theme = useTheme();
   const { properties, removeLastProperty } = useFormSchemaStore();
 
   const handleRemoveLastProperty = (index) => {
@@ -32,7 +34,7 @@ function FormSchemaBreadScrumbs() {
   return (
     <Breadcrumbs maxItems={2} aria-label="breadcrumb">
       {linkedProperties}
-      <Typography color="text.primary">
+      <Typography sx={{ color: theme.palette.text.primary }}>
         {properties[properties.length - 1]?.label}
       </Typography>
     </Breadcrumbs>
diff --git a/DashAI/front/src/components/threeSectionLayout/BarHeader.jsx b/DashAI/front/src/components/threeSectionLayout/BarHeader.jsx
index e146d28ab..1eb6c72d9 100644
--- a/DashAI/front/src/components/threeSectionLayout/BarHeader.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/BarHeader.jsx
@@ -1,6 +1,8 @@
 import { Box, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export default function BarHeader() {
+  const theme = useTheme();
   return (
     <Box
       display="flex"
@@ -14,7 +16,7 @@ export default function BarHeader() {
         variant="h6"
         sx={{
           fontWeight: "bold",
-          "& span": { color: "#16FFFF" },
+          "& span": { color: theme.palette.accent.cyan },
         }}
       >
         <span>D</span>a<span>sh</span>
diff --git a/DashAI/front/src/components/threeSectionLayout/CollapsibleList.jsx b/DashAI/front/src/components/threeSectionLayout/CollapsibleList.jsx
index 8d8d88e8d..5dc6d042b 100644
--- a/DashAI/front/src/components/threeSectionLayout/CollapsibleList.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/CollapsibleList.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Box, Typography, Collapse } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import FolderIcon from "@mui/icons-material/Folder";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
@@ -17,6 +18,7 @@ export default function CollapsibleList({
   Icon = FolderIcon,
   getItemDescription,
 }) {
+  const theme = useTheme();
   const [open, setOpen] = useState(defaultOpen);
   const count = items?.length ?? 0;
 
@@ -46,11 +48,11 @@ export default function CollapsibleList({
           py: 0.5,
           px: 1,
           borderRadius: 1,
-          "&:hover": { bgcolor: "rgba(255, 255, 255, 0.05)" },
+          "&:hover": { bgcolor: theme.palette.ui.hover },
         }}
         onClick={() => setOpen((v) => !v)}
       >
-        <Icon sx={{ fontSize: 20, color: "#00BEBB", mr: 1 }} />
+        <Icon sx={{ fontSize: 20, color: theme.palette.primary.main, mr: 1 }} />
 
         <Typography
           sx={{
@@ -62,6 +64,7 @@ export default function CollapsibleList({
             flex: 1,
           }}
           title={title}
+          color="text.primary"
         >
           {title}
         </Typography>
@@ -69,8 +72,8 @@ export default function CollapsibleList({
         <Box
           sx={{
             mr: 1,
-            bgcolor: "#374151",
-            color: "white",
+            bgcolor: theme.palette.ui.scrollbar,
+            color: theme.palette.text.primary,
             borderRadius: "50%",
             width: 20,
             height: 20,
@@ -84,9 +87,13 @@ export default function CollapsibleList({
         </Box>
 
         {open ? (
-          <KeyboardArrowDownIcon sx={{ fontSize: 20, color: "#00BEBB" }} />
+          <KeyboardArrowDownIcon
+            sx={{ fontSize: 20, color: theme.palette.primary.main }}
+          />
         ) : (
-          <KeyboardArrowRightIcon sx={{ fontSize: 20, color: "#00BEBB" }} />
+          <KeyboardArrowRightIcon
+            sx={{ fontSize: 20, color: theme.palette.primary.main }}
+          />
         )}
       </Box>
 
@@ -97,10 +104,12 @@ export default function CollapsibleList({
         sx={{
           "&::-webkit-scrollbar": { width: "6px" },
           "&::-webkit-scrollbar-thumb": {
-            backgroundColor: "#374151",
+            backgroundColor: theme.palette.ui.scrollbar,
             borderRadius: "3px",
           },
-          "&::-webkit-scrollbar-thumb:hover": { backgroundColor: "#4B5563" },
+          "&::-webkit-scrollbar-thumb:hover": {
+            backgroundColor: theme.palette.ui.scrollbarHover,
+          },
           overflowY: "auto",
         }}
       >
@@ -125,7 +134,12 @@ export default function CollapsibleList({
             ))
           ) : (
             <Typography
-              sx={{ color: "#ffffff", opacity: 0.5, textAlign: "center", p: 2 }}
+              sx={{
+                color: theme.palette.text.primary,
+                opacity: 0.5,
+                textAlign: "center",
+                p: 2,
+              }}
             >
               No items found
             </Typography>
diff --git a/DashAI/front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx b/DashAI/front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx
index 32b5dc2cc..e62ee88c5 100644
--- a/DashAI/front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/GroupedCollapsibleList.jsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Box, Typography, Collapse } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import ItemBox from "./ItemBox";
@@ -16,6 +17,7 @@ export default function GroupedCollapsibleList({
   getItemDescription,
   initialOpenGroups = {},
 }) {
+  const theme = useTheme();
   const [openGroups, setOpenGroups] = useState(initialOpenGroups);
 
   const toggleGroup = (groupName) => {
@@ -57,16 +59,20 @@ export default function GroupedCollapsibleList({
           top: 0,
           zIndex: 10,
           borderRadius: 1,
-          "&:hover": { bgcolor: "rgba(255, 255, 255, 0.05)" },
+          "&:hover": { bgcolor: theme.palette.ui.hover },
         }}
       >
-        {Icon && <Icon sx={{ color: "#16FFFF", mr: 1, fontSize: 20 }} />}
-        <Typography>{title}</Typography>
+        {Icon && (
+          <Icon
+            sx={{ color: theme.palette.accent.cyan, mr: 1, fontSize: 20 }}
+          />
+        )}
+        <Typography color="text.primary">{title}</Typography>
         <Box
           sx={{
             ml: 1,
-            bgcolor: "#374151",
-            color: "white",
+            bgcolor: theme.palette.ui.scrollbar,
+            color: theme.palette.text.primary,
             borderRadius: "50%",
             width: 20,
             height: 20,
@@ -87,10 +93,12 @@ export default function GroupedCollapsibleList({
           overflow: "auto",
           "&::-webkit-scrollbar": { width: "6px" },
           "&::-webkit-scrollbar-thumb": {
-            backgroundColor: "#374151",
+            backgroundColor: theme.palette.ui.scrollbar,
             borderRadius: "3px",
           },
-          "&::-webkit-scrollbar-thumb:hover": { backgroundColor: "#4B5563" },
+          "&::-webkit-scrollbar-thumb:hover": {
+            backgroundColor: theme.palette.ui.scrollbarHover,
+          },
           overflowY: "auto",
         }}
       >
@@ -106,18 +114,18 @@ export default function GroupedCollapsibleList({
                 px: 1,
                 borderRadius: 1,
                 "&:hover": {
-                  bgcolor: "rgba(255, 255, 255, 0.05)",
+                  bgcolor: theme.palette.ui.hover,
                 },
               }}
               onClick={() => toggleGroup(groupName)}
             >
               {openGroups[groupName] ? (
                 <KeyboardArrowDownIcon
-                  sx={{ fontSize: 20, color: "#16FFFF" }}
+                  sx={{ fontSize: 20, color: theme.palette.accent.cyan }}
                 />
               ) : (
                 <KeyboardArrowRightIcon
-                  sx={{ fontSize: 20, color: "#16FFFF" }}
+                  sx={{ fontSize: 20, color: theme.palette.accent.cyan }}
                 />
               )}
               <Typography
@@ -132,14 +140,15 @@ export default function GroupedCollapsibleList({
                   whiteSpace: "nowrap",
                   flex: 1,
                 }}
+                color="text.primary"
               >
                 {groupName}
               </Typography>
               <Box
                 sx={{
                   ml: 1,
-                  bgcolor: "#374151",
-                  color: "white",
+                  bgcolor: theme.palette.ui.scrollbar,
+                  color: theme.palette.text.primary,
                   borderRadius: "50%",
                   width: 20,
                   height: 20,
@@ -179,7 +188,7 @@ export default function GroupedCollapsibleList({
                 ) : (
                   <Typography
                     sx={{
-                      color: "#ffffff",
+                      color: theme.palette.text.primary,
                       opacity: 0.5,
                       textAlign: "center",
                       p: 2,
diff --git a/DashAI/front/src/components/threeSectionLayout/ItemBox.jsx b/DashAI/front/src/components/threeSectionLayout/ItemBox.jsx
index 332d3409a..0c06c41f8 100644
--- a/DashAI/front/src/components/threeSectionLayout/ItemBox.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/ItemBox.jsx
@@ -125,11 +125,21 @@ export default function ItemBox({
               }}
             />
           ) : (
-            <Typography variant="body2" noWrap sx={{ fontSize: 14 }}>
+            <Typography
+              variant="body2"
+              color="text.primary"
+              noWrap
+              sx={{ fontSize: 14 }}
+            >
               {editedName}
             </Typography>
           )}
-          <Typography variant="caption" noWrap sx={{ fontSize: 10, pl: 1 }}>
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            noWrap
+            sx={{ fontSize: 10, pl: 1 }}
+          >
             {description ? description : ""}
           </Typography>
         </Box>
diff --git a/DashAI/front/src/components/threeSectionLayout/ItemMenu.jsx b/DashAI/front/src/components/threeSectionLayout/ItemMenu.jsx
index 43323988e..3e3348c5d 100644
--- a/DashAI/front/src/components/threeSectionLayout/ItemMenu.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/ItemMenu.jsx
@@ -9,6 +9,7 @@ import {
   styled,
   Box,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import DeleteIcon from "@mui/icons-material/Delete";
 import InfoIcon from "@mui/icons-material/Info";
@@ -23,6 +24,7 @@ const DeleteMenuItem = styled(MenuItem)(({ theme }) => ({
 }));
 
 export default function ItemMenu({ itemId, onInfo, onDelete, onEdit }) {
+  const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState(null);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
   const open = Boolean(anchorEl);
@@ -61,7 +63,7 @@ export default function ItemMenu({ itemId, onInfo, onDelete, onEdit }) {
         aria-expanded={open ? "true" : undefined}
         onClick={handleClick}
         size="small"
-        sx={{ color: "text.secondary" }}
+        sx={{ color: theme.palette.text.secondary }}
       >
         <MoreHorizIcon fontSize="small" />
       </IconButton>
diff --git a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx
index 26800ccc0..f97c9a102 100644
--- a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx
@@ -1,7 +1,10 @@
 import { TextField, InputAdornment } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import SearchIcon from "@mui/icons-material/Search";
 
 export default function SearchBar({ placeholder, onChange, value }) {
+  const theme = useTheme();
+
   return (
     <TextField
       placeholder={placeholder}
@@ -11,7 +14,7 @@ export default function SearchBar({ placeholder, onChange, value }) {
       variant="outlined"
       sx={{
         "& .MuiOutlinedInput-root": {
-          bgcolor: "background.default",
+          bgcolor: theme.palette.background.default,
           borderRadius: 1,
         },
         "& .MuiInputBase-input": {
@@ -20,7 +23,7 @@ export default function SearchBar({ placeholder, onChange, value }) {
           fontSize: "0.875rem",
         },
         "& .MuiInputBase-input::placeholder": {
-          color: "text.secondary",
+          color: theme.palette.text.secondary,
           opacity: 1,
           fontSize: "0.875rem",
         },
@@ -29,7 +32,7 @@ export default function SearchBar({ placeholder, onChange, value }) {
         input: {
           startAdornment: (
             <InputAdornment position="start">
-              <SearchIcon sx={{ color: "text.secondary" }} />
+              <SearchIcon sx={{ color: theme.palette.text.secondary }} />
             </InputAdornment>
           ),
         },
diff --git a/DashAI/front/src/pages/home/Home.jsx b/DashAI/front/src/pages/home/Home.jsx
index 7ac97ea2c..d2c7c47cf 100644
--- a/DashAI/front/src/pages/home/Home.jsx
+++ b/DashAI/front/src/pages/home/Home.jsx
@@ -20,10 +20,15 @@ function Home() {
     <TourProvider tourKey={TOUR_KEYS.HOME}>
       <CustomLayout>
         {/* Title */}
-        <Typography variant="h3" component="h1" sx={{ mb: 6 }}>
+        <Typography
+          variant="h3"
+          component="h1"
+          color="text.primary"
+          sx={{ mb: 6 }}
+        >
           Welcome to DashAI!
         </Typography>
-        <Typography variant="h5" component="h2">
+        <Typography variant="h5" component="h2" color="text.primary">
           Getting started
         </Typography>
         <Grid
@@ -81,7 +86,12 @@ function Home() {
             />
           </Grid>
         </Grid>
-        <Typography variant="h5" component="h2" sx={{ mt: 6 }}>
+        <Typography
+          variant="h5"
+          component="h2"
+          color="text.primary"
+          sx={{ mt: 6 }}
+        >
           Advanced
         </Typography>
         <Grid
diff --git a/DashAI/front/src/pages/results/components/MetricsCard.jsx b/DashAI/front/src/pages/results/components/MetricsCard.jsx
index d6173a056..4da38e3f3 100644
--- a/DashAI/front/src/pages/results/components/MetricsCard.jsx
+++ b/DashAI/front/src/pages/results/components/MetricsCard.jsx
@@ -1,7 +1,10 @@
 import React from "react";
 import { Box, Divider, Paper, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export default function MetricsCard({ title, metrics }) {
+  const theme = useTheme();
+
   return (
     <Paper elevation={2} sx={{ p: 2, height: "100%" }}>
       <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
@@ -14,7 +17,10 @@ export default function MetricsCard({ title, metrics }) {
             key={key}
             sx={{ display: "flex", justifyContent: "space-between", mb: 1 }}
           >
-            <Typography variant="body2" color="text.secondary">
+            <Typography
+              variant="body2"
+              sx={{ color: theme.palette.text.secondary }}
+            >
               {key}:
             </Typography>
             <Typography variant="body2" fontWeight="medium">
@@ -23,7 +29,10 @@ export default function MetricsCard({ title, metrics }) {
           </Box>
         ))
       ) : (
-        <Typography variant="body2" color="text.secondary">
+        <Typography
+          variant="body2"
+          sx={{ color: theme.palette.text.secondary }}
+        >
           No metrics available
         </Typography>
       )}
diff --git a/DashAI/front/src/pages/results/components/ResultsDialogViews.jsx b/DashAI/front/src/pages/results/components/ResultsDialogViews.jsx
index e1ec16381..feecd2e6c 100644
--- a/DashAI/front/src/pages/results/components/ResultsDialogViews.jsx
+++ b/DashAI/front/src/pages/results/components/ResultsDialogViews.jsx
@@ -1,10 +1,12 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Grid, Button, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import TimestampWrapper from "../../../components/shared/TimestampWrapper";
 import { TIMESTAMP_KEYS } from "../../../constants/timestamp";
 
 function ResultsDialogViews({ showTable, handleShowTable, handleShowGraphs }) {
+  const theme = useTheme();
   return (
     <Grid container direction="column" alignItems="center">
       <Grid container justifyContent="flex-start" sx={{ mt: 2, mb: 1 }}>
@@ -22,8 +24,10 @@ function ResultsDialogViews({ showTable, handleShowTable, handleShowGraphs }) {
               color={showTable ? "primary" : "inherit"}
               onClick={handleShowTable}
               style={{
-                border: showTable ? "2px solid #00bebb" : "2px solid #00bebb",
-                color: showTable ? "#ffffff" : "#00bebb",
+                border: `2px solid ${theme.palette.primary.main}`,
+                color: showTable
+                  ? theme.palette.text.primary
+                  : theme.palette.primary.main,
                 borderRadius: "1px",
               }}
             >
@@ -36,8 +40,10 @@ function ResultsDialogViews({ showTable, handleShowTable, handleShowGraphs }) {
               color={!showTable ? "primary" : "inherit"}
               onClick={handleShowGraphs}
               style={{
-                border: !showTable ? "2px solid #00bebb" : "2px solid #00bebb",
-                color: !showTable ? "#ffffff" : "#00bebb",
+                border: `2px solid ${theme.palette.primary.main}`,
+                color: !showTable
+                  ? theme.palette.text.primary
+                  : theme.palette.primary.main,
                 borderRadius: "1px",
               }}
             >
diff --git a/DashAI/front/src/pages/results/components/ResultsGraphsSelection.jsx b/DashAI/front/src/pages/results/components/ResultsGraphsSelection.jsx
index 332da0bfb..edbaf267f 100644
--- a/DashAI/front/src/pages/results/components/ResultsGraphsSelection.jsx
+++ b/DashAI/front/src/pages/results/components/ResultsGraphsSelection.jsx
@@ -1,8 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { Box, Button } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 function ResultsGraphsSelection({ selectedChart, handleChangeChart }) {
+  const theme = useTheme();
   return (
     <Box p={2} mb={2}>
       <Button
@@ -12,8 +14,8 @@ function ResultsGraphsSelection({ selectedChart, handleChangeChart }) {
         style={{
           borderBottom:
             selectedChart === "radar"
-              ? "2px solid #00bebb"
-              : "2px solid #ffffff",
+              ? `2px solid ${theme.palette.primary.main}`
+              : `2px solid ${theme.palette.text.primary}`,
           marginRight: "30px",
           marginTop: "-15px",
         }}
@@ -26,7 +28,9 @@ function ResultsGraphsSelection({ selectedChart, handleChangeChart }) {
         onClick={() => handleChangeChart("bar")}
         style={{
           borderBottom:
-            selectedChart === "bar" ? "2px solid #00bebb" : "2px solid #ffffff",
+            selectedChart === "bar"
+              ? `2px solid ${theme.palette.primary.main}`
+              : `2px solid ${theme.palette.text.primary}`,
           marginTop: "-15px",
         }}
       >
diff --git a/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx b/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx
index 41c1688e9..812d13242 100644
--- a/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx
+++ b/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx
@@ -10,6 +10,7 @@ import {
   Button,
   Alert,
 } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import {
   Edit as EditIcon,
   Settings as SettingsIcon,
@@ -38,6 +39,7 @@ import LiveMetricsChart from "./LiveMetricsChart";
  * @param {object} runData object that contains all the necessary info of the run
  */
 function ResultsTabInfo({ runData, handleRun }) {
+  const theme = useTheme();
   const [localRun, setLocalRun] = React.useState(structuredClone(runData));
   const [openParametersDialog, setOpenParametersDialog] = useState(false);
   const [openOptimizerParametersDialog, setOpenOptimizerParametersDialog] =
@@ -127,7 +129,9 @@ function ResultsTabInfo({ runData, handleRun }) {
                 <Box>
                   <Chip
                     label={runData.status}
-                    sx={{ backgroundColor: getColorByStatus(runData.status) }}
+                    sx={{
+                      backgroundColor: getColorByStatus(runData.status, theme),
+                    }}
                     size="medium"
                   />
                 </Box>
@@ -136,7 +140,10 @@ function ResultsTabInfo({ runData, handleRun }) {
             <Grid container spacing={2}>
               {runData.model_name && (
                 <Grid item xs={6} md={3}>
-                  <Typography variant="caption" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    sx={{ color: theme.palette.text.secondary }}
+                  >
                     Model
                   </Typography>
                   <Typography variant="body2" fontWeight="medium">
@@ -146,7 +153,10 @@ function ResultsTabInfo({ runData, handleRun }) {
               )}
               {runData.start_time && (
                 <Grid item xs={6} md={3}>
-                  <Typography variant="caption" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    sx={{ color: theme.palette.text.secondary }}
+                  >
                     Start Time
                   </Typography>
                   <Typography variant="body2" fontWeight="medium">
@@ -156,7 +166,10 @@ function ResultsTabInfo({ runData, handleRun }) {
               )}
               {runData.end_time && (
                 <Grid item xs={6} md={3}>
-                  <Typography variant="caption" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    sx={{ color: theme.palette.text.secondary }}
+                  >
                     End Time
                   </Typography>
                   <Typography variant="body2" fontWeight="medium">
@@ -166,7 +179,10 @@ function ResultsTabInfo({ runData, handleRun }) {
               )}
               {runData.start_time && runData.status !== "Error" && (
                 <Grid item xs={6} md={3}>
-                  <Typography variant="caption" color="text.secondary">
+                  <Typography
+                    variant="caption"
+                    sx={{ color: theme.palette.text.secondary }}
+                  >
                     Duration
                   </Typography>
                   <Typography variant="body2" fontWeight="medium">
diff --git a/DashAI/front/src/pages/results/constants/initialColumns.jsx b/DashAI/front/src/pages/results/constants/initialColumns.jsx
index 8f2186459..2574c1643 100644
--- a/DashAI/front/src/pages/results/constants/initialColumns.jsx
+++ b/DashAI/front/src/pages/results/constants/initialColumns.jsx
@@ -1,6 +1,6 @@
 // columns that are common to all runs
 import React from "react";
-import { styled } from "@mui/material";
+import { styled, useTheme } from "@mui/material";
 import { formatDate, getColorByStatus } from "../../../utils";
 
 // style for the cells in the initial columns
@@ -34,9 +34,13 @@ export const initialColumns = [
     headerName: "Status",
     minWidth: 100,
     renderCell: (params) => {
-      const color = getColorByStatus(params.value);
-
-      return <StyledCell color={color}>{params.value}</StyledCell>;
+      // Using a render function to access theme through hook
+      const StatusCell = () => {
+        const theme = useTheme();
+        const color = getColorByStatus(params.value, theme);
+        return <StyledCell color={color}>{params.value}</StyledCell>;
+      };
+      return <StatusCell />;
     },
   },
   // {
diff --git a/DashAI/front/src/styles/theme.js b/DashAI/front/src/styles/theme.js
index 76acf1fe4..c0f6e4370 100644
--- a/DashAI/front/src/styles/theme.js
+++ b/DashAI/front/src/styles/theme.js
@@ -3,33 +3,118 @@ import QuicksandBoldWoff2 from "./fonts/Quicksand-Bold.woff2";
 const theme = {
   palette: {
     mode: "dark",
+
+    // PRIMARY - Main application color
+    // Used in: primary buttons, highlighted icons, links, active elements
     primary: {
       light: "#008582",
       main: "#00BEBB",
       dark: "#002884",
       contrastText: "#fff",
     },
+
+    // SECONDARY - Complementary secondary color
+    // Used in: secondary buttons, supporting elements
     secondary: {
       light: "#6E86E8",
       main: "#6E86E8",
       dark: "#4d5da2",
       contrastText: "#000",
     },
+
+    // BACKGROUND - Background colors for different surfaces
+    // Used in: page backgrounds, cards, modals, panels
     background: {
-      default: "#2e3037",
-      paper: "#121212",
-      box: "#212121",
+      default: "#2e3037", // Main app background
+      paper: "#121212", // Cards and modals background
+      box: "#212121", // Boxes and containers (AppBar, sidebars)
     },
+
+    // TEXT - Text colors
+    // Used in: Typography components, labels, paragraphs
     text: {
-      primary: "#ffffff",
-      secondary: "#b0b0b0",
+      primary: "#ffffff", // Primary text (titles, important labels)
+      secondary: "#b0b0b0", // Secondary text (descriptions, subtitles)
     },
+
+    // ERROR - Error states
+    // Used in: error messages, failed validations, critical alerts
     error: {
       main: "#ff8383",
     },
+
+    // WARNING - Warning states
+    // Used in: warning alerts, pending states requiring attention
     warning: {
       main: "#f1ae61",
     },
+
+    // SUCCESS - Success states
+    // Used in: confirmations, successful validations, completed states
+    success: {
+      main: "#43A047",
+      light: "#4caf50",
+    },
+
+    // INFO - Informational states
+    // Used in: info messages, tooltips, contextual help
+    info: {
+      main: "#2196f3",
+      light: "#3e68ff",
+    },
+
+    // ACCENT - Custom accent colors
+    // Used in: elements requiring emphasis, special details
+    accent: {
+      cyan: "#16FFFF", // For highlights
+      teal: "#00BEBB", // For featured elements
+    },
+
+    // STATUS - Experiment/job states
+    // Used in: status badges, progress indicators in experiments and runs
+    status: {
+      notStarted: "#626262", // Experiment not started
+      started: "#3e68ffff", // Experiment running
+      finished: "#43A047", // Experiment completed successfully
+      delivered: "#3e68ffff", // Results delivered
+      error: "#A70909", // Experiment error
+    },
+
+    // DATATYPE - Colors for data types in columns
+    // Used in: dataset visualization, column type identification
+    dataType: {
+      numerical: "#00BEBB", // Numerical data (float)
+      integer: "#3e68ff", // Integer data
+      categorical: "#9c27b0", // Categorical data
+      text: "#f1ae61", // Text/string data
+      boolean: "#43A047", // Boolean data
+      datetime: "#e91e63", // Date/time data
+      image: "#6E86E8", // Image data
+      default: "#757575", // Unknown or default type
+    },
+
+    // CHART - Colors for charts and visualizations
+    // Used in: metric charts, data splits in results
+    chart: {
+      train: "#4caf50", // Training data
+      test: "#2196f3", // Test data
+      validation: "#ff9800", // Validation data
+    },
+
+    // UI - Interface elements and borders
+    // Used in: borders, dividers, scrollbars, hover states
+    ui: {
+      border: "#333", // Standard border
+      borderLight: "#444", // Lighter border
+      borderDark: "#252836", // Darker border
+      panelDark: "#2C2C2C", // Dark panel
+      panelMedium: "#363636", // Medium panel
+      panelLight: "#2F2F2F", // Light panel
+      scrollbar: "#374151", // Scrollbar color
+      scrollbarHover: "#4B5563", // Scrollbar on hover
+      hover: "rgba(255, 255, 255, 0.05)", // Element hover state
+      divider: "rgba(255, 255, 255, 0.15)", // Dividers and separators
+    },
   },
   typography: {
     fontFamily: "Quicksand-Bold",
diff --git a/DashAI/front/src/utils/index.js b/DashAI/front/src/utils/index.js
index 7d712a566..5747bf01d 100644
--- a/DashAI/front/src/utils/index.js
+++ b/DashAI/front/src/utils/index.js
@@ -12,57 +12,85 @@ export const formatDate = (inputDate) => {
   return `${year}/${month}/${day} ${hours}:${minutes}`;
 };
 
-export const getColorByStatus = (status) => {
-  let color;
-  switch (status) {
-    case "Not Started":
-      color = "#626262";
-      break;
-    case "Delivered":
-      color = "#3e68ffff";
-      break;
-    case "Finished":
-      color = "#43A047";
-      break;
-    case "Started":
-      color = "#3e68ffff";
-      break;
-    case "Error":
-      color = "#A70909";
-      break;
-    default:
-      color = "#000000";
+export const getColorByStatus = (status, theme) => {
+  if (!theme?.palette?.status) {
+    // Fallback to hardcoded colors if theme is not available
+    const fallbackColors = {
+      "Not Started": "#626262",
+      Delivered: "#3e68ffff",
+      Finished: "#43A047",
+      Started: "#3e68ffff",
+      Error: "#A70909",
+    };
+    return fallbackColors[status] || "#000000";
   }
-  return color;
+
+  const statusMap = {
+    "Not Started": theme.palette.status.notStarted,
+    Delivered: theme.palette.status.delivered,
+    Finished: theme.palette.status.finished,
+    Started: theme.palette.status.started,
+    Error: theme.palette.status.error,
+  };
+
+  return statusMap[status] || "#000000";
 };
 
-export const getColorByColumnType = (type) => {
-  if (!type) return "#757575";
+export const getColorByColumnType = (type, theme) => {
+  if (!type) {
+    return theme?.palette?.dataType?.default || "#757575";
+  }
+
+  if (!theme?.palette?.dataType) {
+    // Fallback to hardcoded colors if theme is not available
+    const fallbackColors = {
+      numerical: "#00BEBB",
+      float: "#00BEBB",
+      integer: "#3e68ff",
+      int: "#3e68ff",
+      number: "#00BEBB",
+      categorical: "#9c27b0",
+      category: "#9c27b0",
+      text: "#f1ae61",
+      string: "#f1ae61",
+      boolean: "#43A047",
+      bool: "#43A047",
+      datetime: "#e91e63",
+      date: "#e91e63",
+      time: "#e91e63",
+      timestamp: "#e91e63",
+      image: "#6E86E8",
+      default: "#757575",
+    };
+    const normalizedType = type.toLowerCase();
+    return fallbackColors[normalizedType] || fallbackColors.default;
+  }
 
   const typeColors = {
-    numerical: "#00BEBB",
-    float: "#00BEBB",
-    integer: "#3e68ff",
-    int: "#3e68ff",
-    number: "#00BEBB",
+    numerical: theme.palette.dataType.numerical,
+    float: theme.palette.dataType.numerical,
+    number: theme.palette.dataType.numerical,
+
+    integer: theme.palette.dataType.integer,
+    int: theme.palette.dataType.integer,
 
-    categorical: "#9c27b0",
-    category: "#9c27b0",
+    categorical: theme.palette.dataType.categorical,
+    category: theme.palette.dataType.categorical,
 
-    text: "#f1ae61",
-    string: "#f1ae61",
+    text: theme.palette.dataType.text,
+    string: theme.palette.dataType.text,
 
-    boolean: "#43A047",
-    bool: "#43A047",
+    boolean: theme.palette.dataType.boolean,
+    bool: theme.palette.dataType.boolean,
 
-    datetime: "#e91e63",
-    date: "#e91e63",
-    time: "#e91e63",
-    timestamp: "#e91e63",
+    datetime: theme.palette.dataType.datetime,
+    date: theme.palette.dataType.datetime,
+    time: theme.palette.dataType.datetime,
+    timestamp: theme.palette.dataType.datetime,
 
-    image: "#6E86E8",
+    image: theme.palette.dataType.image,
 
-    default: "#757575",
+    default: theme.palette.dataType.default,
   };
 
   const normalizedType = type.toLowerCase();