diff --git a/DashAI/front/src/components/ResponsiveAppBar.jsx b/DashAI/front/src/components/ResponsiveAppBar.jsx
index 7ac9889d4..3e321957a 100644
--- a/DashAI/front/src/components/ResponsiveAppBar.jsx
+++ b/DashAI/front/src/components/ResponsiveAppBar.jsx
@@ -13,6 +13,9 @@ import MenuItem from "@mui/material/MenuItem";
 import { Link as RouterLink, useLocation } from "react-router-dom";
 import { useTheme } from "@mui/material/styles";
 import HomeIcon from "@mui/icons-material/HomeOutlined";
+import Brightness4Icon from "@mui/icons-material/Brightness4";
+import Brightness7Icon from "@mui/icons-material/Brightness7";
+import { ColorModeContext } from "../contexts/ThemeContext";
 
 const pages = [
   { name: "Datasets", to: "/app/data", disabled: false },
@@ -25,6 +28,7 @@ const pages = [
 
 function ResponsiveAppBar() {
   const theme = useTheme();
+  const colorMode = React.useContext(ColorModeContext);
   const location = useLocation();
 
   const [anchorElNav, setAnchorElNav] = React.useState(null);
@@ -130,6 +134,27 @@ function ResponsiveAppBar() {
               </Button>
             ))}
           </Box>
+
+          {/* Theme Toggle Button */}
+          <Box sx={{ flexGrow: 0 }}>
+            <IconButton
+              onClick={colorMode.toggleColorMode}
+              aria-label="toggle theme"
+              sx={{
+                ml: 1,
+                color:
+                  theme.palette.mode === "dark"
+                    ? "inherit"
+                    : theme.palette.text.primary,
+              }}
+            >
+              {theme.palette.mode === "dark" ? (
+                <Brightness7Icon />
+              ) : (
+                <Brightness4Icon />
+              )}
+            </IconButton>
+          </Box>
         </Toolbar>
       </Container>
     </AppBar>
diff --git a/DashAI/front/src/components/explorations/ResultsViewer.jsx b/DashAI/front/src/components/explorations/ResultsViewer.jsx
index 46a7b25c5..3932bbdbb 100644
--- a/DashAI/front/src/components/explorations/ResultsViewer.jsx
+++ b/DashAI/front/src/components/explorations/ResultsViewer.jsx
@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { useExplorationsContext } from "./context";
 
 import { Button, Divider, Grid, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 import { useSnackbar } from "notistack";
 import { getExplorersByExplorationId } from "../../api/explorer";
@@ -75,9 +76,12 @@ function ResultsViewer({ updateFlag = false, setUpdateFlag = () => {} }) {
                 variant="contained"
                 color={viewMode === viewModes.ALL ? "primary" : "inherit"}
                 onClick={() => handleChangeViewMode(viewModes.ALL)}
-                style={{
-                  border: "2px solid #00bebb",
-                  color: viewMode === viewModes.ALL ? "#ffffff" : "#00bebb",
+                sx={{
+                  border: `2px solid ${theme.palette.primary.main}`,
+                  color:
+                    viewMode === viewModes.ALL
+                      ? theme.palette.primary.contrastText
+                      : theme.palette.primary.main,
                   borderRadius: "1px",
                 }}
               >
@@ -93,10 +97,12 @@ function ResultsViewer({ updateFlag = false, setUpdateFlag = () => {} }) {
                   viewMode === viewModes.BY_EXPLORER ? "primary" : "inherit"
                 }
                 onClick={() => handleChangeViewMode(viewModes.BY_EXPLORER)}
-                style={{
-                  border: "2px solid #00bebb",
+                sx={{
+                  border: `2px solid ${theme.palette.primary.main}`,
                   color:
-                    viewMode === viewModes.BY_EXPLORER ? "#ffffff" : "#00bebb",
+                    viewMode === viewModes.BY_EXPLORER
+                      ? theme.palette.primary.contrastText
+                      : theme.palette.primary.main,
                   borderRadius: "1px",
                 }}
               >
diff --git a/DashAI/front/src/components/generative/Footer.jsx b/DashAI/front/src/components/generative/Footer.jsx
index 6f8cfdfd3..fc66452e3 100644
--- a/DashAI/front/src/components/generative/Footer.jsx
+++ b/DashAI/front/src/components/generative/Footer.jsx
@@ -10,7 +10,7 @@ export default function Footer() {
       flexDirection={"column"}
       py={2}
     >
-      <Divider sx={{ width: "100%", bgcolor: "#252836" }} />
+      <Divider sx={{ width: "100%", bgcolor: "divider" }} />
       <Avatar
         alt="DashAI Logo"
         src="/images/logo.png"
diff --git a/DashAI/front/src/components/generative/GenerativeChat.jsx b/DashAI/front/src/components/generative/GenerativeChat.jsx
index 1db62ceea..348aaf85d 100644
--- a/DashAI/front/src/components/generative/GenerativeChat.jsx
+++ b/DashAI/front/src/components/generative/GenerativeChat.jsx
@@ -1,4 +1,5 @@
 import { Box, Divider, IconButton, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import React from "react";
 import InfoIcon from "@mui/icons-material/Info";
 import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
@@ -21,6 +22,7 @@ import JobQueueWidget from "../jobs/JobQueueWidget";
 import { getRunStatus } from "../../utils/runStatus";
 
 export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
+  const theme = useTheme();
   const [history, setHistory] = useState([]);
   const [messages, setMessages] = useState([]);
   const [messagesWithHistory, setMessagesWithHistory] = useState([]);
@@ -220,9 +222,9 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
             <IconButton onClick={() => setSessionInfoVisible(true)}>
               <InfoIcon
                 sx={{
-                  color: "#a0a0a0",
+                  color: "text.secondary",
                   "&:hover": {
-                    color: "#ffffff",
+                    color: "text.primary",
                   },
                 }}
               />
@@ -251,11 +253,11 @@ export default function GenerativeChat({ sessionId, taskName, paramsVersion }) {
             width: "8px",
           },
           "&::-webkit-scrollbar-thumb": {
-            backgroundColor: "#555",
+            backgroundColor: theme.palette.ui.border,
             borderRadius: "4px",
           },
           "&::-webkit-scrollbar-thumb:hover": {
-            backgroundColor: "#888",
+            backgroundColor: theme.palette.ui.hover,
           },
         }}
       >
diff --git a/DashAI/front/src/components/generative/InfoSessionModal.jsx b/DashAI/front/src/components/generative/InfoSessionModal.jsx
index 53e22f5a6..f77fe415f 100644
--- a/DashAI/front/src/components/generative/InfoSessionModal.jsx
+++ b/DashAI/front/src/components/generative/InfoSessionModal.jsx
@@ -10,8 +10,10 @@ import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableRow from "@mui/material/TableRow";
+import { useTheme } from "@mui/material/styles";
 
 export default function InfoSessionModal({ sessionData, open, onClose }) {
+  const theme = useTheme();
   // Format date for display
   const formatDate = (dateString) => {
     try {
@@ -91,7 +93,9 @@ export default function InfoSessionModal({ sessionData, open, onClose }) {
             />
             <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
               Model:{" "}
-              <span style={{ color: "#fff" }}>{sessionData.model_name}</span>
+              <span style={{ color: theme.palette.text.primary }}>
+                {sessionData.model_name}
+              </span>
             </Typography>
           </Box>
 
diff --git a/DashAI/front/src/components/generative/MessageContent.jsx b/DashAI/front/src/components/generative/MessageContent.jsx
index 3ed1c8b08..91dba44d6 100644
--- a/DashAI/front/src/components/generative/MessageContent.jsx
+++ b/DashAI/front/src/components/generative/MessageContent.jsx
@@ -9,8 +9,8 @@ export function MessageContent({ messages, isUser, isWaiting }) {
   return (
     <Paper
       sx={{
-        backgroundColor: "#374151",
-        color: "#fff",
+        backgroundColor: theme.palette.ui.box,
+        color: "text.primary",
         padding: theme.spacing(1.5, 2),
         maxWidth: "100%",
         borderRadius: 2,
diff --git a/DashAI/front/src/components/generative/SessionBar.jsx b/DashAI/front/src/components/generative/SessionBar.jsx
index d4df56433..f250626af 100644
--- a/DashAI/front/src/components/generative/SessionBar.jsx
+++ b/DashAI/front/src/components/generative/SessionBar.jsx
@@ -1,4 +1,5 @@
 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 { useEffect, useState } from "react";
@@ -18,6 +19,7 @@ export default function SessionBar({
   handleSessionDelete,
   stepIndex,
 }) {
+  const theme = useTheme();
   const [searchQuery, setSearchQuery] = useState("");
   const [filteredSessions, setFilteredSessions] = useState(sessions);
   const [selectedInfoSession, setSelectedInfoSession] = useState(null);
@@ -95,7 +97,7 @@ export default function SessionBar({
         >
           <BarHeader />
         </Box>
-        <Divider sx={{ width: "100%", bgcolor: "#252836" }} />
+        <Divider sx={{ width: "100%", bgcolor: "divider" }} />
 
         <Box
           p={2}
@@ -123,7 +125,7 @@ export default function SessionBar({
           />
         </Box>
 
-        <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+        <Divider sx={{ width: "90%", bgcolor: "divider", mx: "auto" }} />
 
         {/* Sessions */}
         <Box
@@ -139,13 +141,17 @@ export default function SessionBar({
         >
           {/* Header */}
           <Box display="flex" alignItems="center" py={0.5} px={1} mb={0.5}>
-            <FolderIcon sx={{ color: "#16FFFF", mr: 1, fontSize: 20 }} />
-            <Typography>Sessions</Typography>
+            <FolderIcon
+              sx={{ color: theme.palette.primary.main, mr: 1, fontSize: 20 }}
+            />
+            <Typography variant="body2" color="text.primary">
+              Sessions
+            </Typography>
             <Box
               sx={{
                 ml: 1,
-                bgcolor: "#374151",
-                color: "white",
+                bgcolor: theme.palette.ui.border,
+                color: "text.primary",
                 borderRadius: "50%",
                 width: 20,
                 height: 20,
diff --git a/DashAI/front/src/components/generative/SessionBarHeader.jsx b/DashAI/front/src/components/generative/SessionBarHeader.jsx
index 259b9c12e..82f2346d7 100644
--- a/DashAI/front/src/components/generative/SessionBarHeader.jsx
+++ b/DashAI/front/src/components/generative/SessionBarHeader.jsx
@@ -15,7 +15,7 @@ export default function SessionBarHeader() {
         variant="h6"
         sx={{
           fontWeight: "bold",
-          "& span": { color: "#16FFFF" },
+          "& span": { color: theme.palette.accent.main },
         }}
       >
         <span>D</span>a<span>sh</span>
diff --git a/DashAI/front/src/components/generative/SessionBox.jsx b/DashAI/front/src/components/generative/SessionBox.jsx
index a01bdcb22..e6048039c 100644
--- a/DashAI/front/src/components/generative/SessionBox.jsx
+++ b/DashAI/front/src/components/generative/SessionBox.jsx
@@ -21,12 +21,10 @@ export default function SessionBox({
         alignItems: "center",
         borderRadius: 1,
         cursor: isSelected ? "default" : "pointer",
-        bgcolor: isSelected ? "rgba(255, 255, 255, 0.05)" : "transparent",
+        bgcolor: isSelected ? "action.selected" : "transparent",
         p: 0.5,
         "&:hover": {
-          backgroundColor: isSelected
-            ? "rgba(255, 255, 255, 0.05)"
-            : "rgba(255, 255, 255, 0.05)",
+          backgroundColor: isSelected ? "action.selected" : "action.hover",
         },
       }}
       onClick={isSelected ? undefined : onClick}
@@ -42,6 +40,7 @@ export default function SessionBox({
         <Box>
           <Typography
             variant="body2"
+            color="text.primary"
             noWrap
             sx={{ maxWidth: 180, fontSize: 14 }}
           >
@@ -49,6 +48,7 @@ export default function SessionBox({
           </Typography>
           <Typography
             variant="caption"
+            color="text.secondary"
             noWrap
             sx={{ maxWidth: 150, fontSize: 10, pl: 1 }}
           >
diff --git a/DashAI/front/src/components/generative/SessionList.jsx b/DashAI/front/src/components/generative/SessionList.jsx
index ac11dbd3d..0967e1f4f 100644
--- a/DashAI/front/src/components/generative/SessionList.jsx
+++ b/DashAI/front/src/components/generative/SessionList.jsx
@@ -1,4 +1,5 @@
 import { Box, Typography, Collapse } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
 import SessionBox from "./SessionBox";
@@ -12,6 +13,7 @@ export default function SessionList({
   handleSessionInfo,
   toggleSection,
 }) {
+  const theme = useTheme();
   if (groupedSessions === undefined) {
     return (
       <Box
@@ -23,7 +25,7 @@ export default function SessionList({
       >
         <Typography
           sx={{
-            color: "#ffffff",
+            color: "text.secondary",
             opacity: 0.5,
             textAlign: "center",
             padding: 2,
@@ -47,11 +49,11 @@ export default function SessionList({
           width: "6px",
         },
         "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "#374151",
+          backgroundColor: theme.palette.ui.border,
           borderRadius: "3px",
         },
         "&::-webkit-scrollbar-thumb:hover": {
-          backgroundColor: "#4B5563",
+          backgroundColor: theme.palette.ui.hover,
         },
         overflowY: "auto",
         flex: 1,
@@ -70,21 +72,22 @@ export default function SessionList({
                 px: 1,
                 borderRadius: 1,
                 "&:hover": {
-                  bgcolor: "rgba(255, 255, 255, 0.05)",
+                  bgcolor: "action.hover",
                 },
               }}
               onClick={() => toggleSection(taskName)}
             >
               {openSections[taskName] ? (
                 <KeyboardArrowDownIcon
-                  sx={{ fontSize: 20, color: "#16FFFF" }}
+                  sx={{ fontSize: 20, color: theme.palette.primary.main }}
                 />
               ) : (
                 <KeyboardArrowRightIcon
-                  sx={{ fontSize: 20, color: "#16FFFF" }}
+                  sx={{ fontSize: 20, color: theme.palette.primary.main }}
                 />
               )}
               <Typography
+                color="text.primary"
                 sx={{
                   ml: 1,
                   fontSize: "0.9rem",
@@ -102,8 +105,8 @@ export default function SessionList({
               <Box
                 sx={{
                   ml: 1,
-                  bgcolor: "#374151",
-                  color: "white",
+                  bgcolor: theme.palette.ui.border,
+                  color: "text.primary",
                   borderRadius: "50%",
                   width: 20,
                   height: 20,
@@ -145,7 +148,7 @@ export default function SessionList({
       ) : (
         <Typography
           sx={{
-            color: "#ffffff",
+            color: "text.secondary",
             opacity: 0.5,
             textAlign: "center",
             padding: 2,
diff --git a/DashAI/front/src/components/notebooks/LeftBar.jsx b/DashAI/front/src/components/notebooks/LeftBar.jsx
index 7e288e2d8..d63efcdbe 100644
--- a/DashAI/front/src/components/notebooks/LeftBar.jsx
+++ b/DashAI/front/src/components/notebooks/LeftBar.jsx
@@ -93,7 +93,7 @@ export default function DatasetsNotebooksBar({
           <ChevronLeft />
         </IconButton>
       </Box>
-      <Divider sx={{ width: "100%", bgcolor: "#252836" }} />
+      <Divider sx={{ width: "100%", bgcolor: "divider" }} />
 
       {/* Create new item button */}
       <Box p={2} sx={{ height: "64px", display: "flex", alignItems: "center" }}>
@@ -118,7 +118,7 @@ export default function DatasetsNotebooksBar({
         />
       </Box>
 
-      <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+      <Divider sx={{ width: "90%", bgcolor: "divider", mx: "auto" }} />
 
       {/* Scrollable content */}
       <Box display="flex" flexDirection="column" flex={1} minHeight={0}>
@@ -134,7 +134,7 @@ export default function DatasetsNotebooksBar({
           getItemDescription={getDatasetDescription}
         />
 
-        <Divider sx={{ width: "90%", bgcolor: "#252836", mx: "auto" }} />
+        <Divider sx={{ width: "90%", bgcolor: "divider", mx: "auto" }} />
 
         <CollapsibleList
           items={filteredNotebooks}
diff --git a/DashAI/front/src/components/notebooks/RightBar.jsx b/DashAI/front/src/components/notebooks/RightBar.jsx
index 23b3ef831..829302284 100644
--- a/DashAI/front/src/components/notebooks/RightBar.jsx
+++ b/DashAI/front/src/components/notebooks/RightBar.jsx
@@ -368,10 +368,7 @@ export default function RightBar({ notebook, onToggle }) {
                   flexShrink: 0,
                 }}
               >
-                <Typography
-                  variant="caption"
-                  sx={{ color: "rgb(161, 161, 170)" }}
-                >
+                <Typography variant="caption" sx={{ color: "text.secondary" }}>
                   View mode
                 </Typography>
                 <ToggleButtonGroup
@@ -381,11 +378,12 @@ export default function RightBar({ notebook, onToggle }) {
                   size="small"
                   sx={{
                     "& .MuiToggleButton-root": {
-                      color: "rgb(161, 161, 170)",
-                      border: "1px solid rgb(39, 39, 42)",
+                      color: "text.secondary",
+                      border: "1px solid",
+                      borderColor: theme.palette.ui.border,
                       "&.Mui-selected": {
-                        bgcolor: "rgb(39, 39, 42)",
-                        color: "rgb(6, 182, 212)",
+                        bgcolor: theme.palette.ui.border,
+                        color: theme.palette.accent.main,
                       },
                     },
                   }}
diff --git a/DashAI/front/src/components/notebooks/converter/ConverterHistoryList.jsx b/DashAI/front/src/components/notebooks/converter/ConverterHistoryList.jsx
index 5755b4e1f..7ce91f97b 100644
--- a/DashAI/front/src/components/notebooks/converter/ConverterHistoryList.jsx
+++ b/DashAI/front/src/components/notebooks/converter/ConverterHistoryList.jsx
@@ -35,7 +35,7 @@ export default function ConverterHistoryList({
                 width: "100%",
               }}
             >
-              <Transform sx={{ mr: 2, color: "#00BEBB" }} />
+              <Transform color="primary" sx={{ mr: 2 }} />
               <ListItemText
                 primary={converter.converter}
                 secondary={scopeText}
diff --git a/DashAI/front/src/components/notebooks/dataset/DatasetVisualization.jsx b/DashAI/front/src/components/notebooks/dataset/DatasetVisualization.jsx
index e6e51443f..d29edbee2 100644
--- a/DashAI/front/src/components/notebooks/dataset/DatasetVisualization.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/DatasetVisualization.jsx
@@ -242,7 +242,7 @@ export default function DatasetVisualization({
             {/* Tabs */}
             <Tabs
               sx={{
-                bgcolor: "#2C2C2C",
+                bgcolor: theme.palette.ui.box,
                 borderRadius: 1,
                 minHeight: "48px",
                 "& .MuiTabs-indicator": {
@@ -256,12 +256,12 @@ export default function DatasetVisualization({
                   border: "1px solid transparent",
                   textTransform: "none",
                   "&:hover": {
-                    bgcolor: "rgba(255,255,255,0.05)",
+                    bgcolor: theme.palette.action.hover,
                   },
                   "&.Mui-disabled": {
-                    color: "rgb(150, 150, 150)",
-                    bgcolor: "rgb(32, 32, 32)",
-                    borderColor: "rgb(39, 39, 42)",
+                    color: theme.palette.text.disabled,
+                    bgcolor: theme.palette.ui.disabled,
+                    borderColor: theme.palette.ui.border,
                     opacity: 0.6,
                     cursor: "not-allowed",
                     filter: "grayscale(0.6)",
@@ -359,7 +359,7 @@ export default function DatasetVisualization({
               gap: 2,
             }}
           >
-            <CircularProgress sx={{ color: "#00BEBB" }} />
+            <CircularProgress color="primary" />
             <Typography>Processing your dataset...</Typography>
             <Typography
               variant="body2"
diff --git a/DashAI/front/src/components/notebooks/dataset/StatBox.jsx b/DashAI/front/src/components/notebooks/dataset/StatBox.jsx
index a3750bc24..056ed3696 100644
--- a/DashAI/front/src/components/notebooks/dataset/StatBox.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/StatBox.jsx
@@ -22,7 +22,7 @@ export const StatBox = ({ label, value }) => {
       >
         {value}
       </Typography>
-      <Typography variant="body2" sx={{ color: theme.palette.text.secondary }}>
+      <Typography variant="body2" color="text.secondary">
         {label}
       </Typography>
     </Paper>
diff --git a/DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx b/DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx
index bf62d436d..3006c9588 100644
--- a/DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/header/HeaderBox.jsx
@@ -1,7 +1,9 @@
 import React from "react";
 import { Box, Typography, Tooltip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 
 export function HeaderBox({ title, value, IconComponent, iconColor, bgColor }) {
+  const theme = useTheme();
   return (
     <Box
       sx={{
@@ -9,7 +11,7 @@ export function HeaderBox({ title, value, IconComponent, iconColor, bgColor }) {
         height: "100%",
         flex: "1 1 0",
         borderRadius: 2,
-        bgcolor: "#2C2C2C",
+        bgcolor: theme.palette.ui.box,
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx
index 7f1f711ac..a8327fdd4 100644
--- a/DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/tabs/CategoricalTab.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Box, Typography, Card, CardContent } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import TitleIcon from "@mui/icons-material/Title";
 import {
   ResponsiveContainer,
@@ -15,122 +16,128 @@ import {
 } from "recharts";
 import { StatBox } from "../StatBox";
 
-export const CategoricalTab = ({ categoricalStats }) => (
-  <Box display="flex" flexDirection="column" gap={4}>
-    {Object.entries(categoricalStats).map(([column, stats]) => (
-      <Card key={column} sx={{ borderRadius: 2 }}>
-        <CardContent sx={{ bgcolor: "#2C2C2C" }}>
-          {/* Header */}
-          <Box display="flex" alignItems="center" mb={2}>
-            <TitleIcon sx={{ color: "primary.main", mr: 1 }} />
-            <Typography variant="h6" fontWeight="bold">
-              {column}
-            </Typography>
-          </Box>
+export const CategoricalTab = ({ categoricalStats }) => {
+  const theme = useTheme();
 
-          {/* Summary Stats */}
-          <Box display="flex" flexWrap="wrap" gap={2} mb={4}>
-            <Box flex="1 1 300px" minWidth="250px">
-              <StatBox label="Unique Values" value={stats.n_unique} />
-            </Box>
-            <Box flex="1 1 300px" minWidth="250px">
-              <StatBox label="Most Frequent" value={stats.most_frequent} />
-            </Box>
-            <Box flex="1 1 300px" minWidth="250px">
-              <StatBox
-                label="Top Value Count"
-                value={stats.most_frequent_count}
-              />
+  return (
+    <Box display="flex" flexDirection="column" gap={4}>
+      {Object.entries(categoricalStats).map(([column, stats]) => (
+        <Card key={column} sx={{ borderRadius: 2 }}>
+          <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
+            {/* Header */}
+            <Box display="flex" alignItems="center" mb={2}>
+              <TitleIcon sx={{ color: "primary.main", mr: 1 }} />
+              <Typography variant="h6" fontWeight="bold">
+                {column}
+              </Typography>
             </Box>
-          </Box>
 
-          {/* Charts */}
-          <Box display="flex" flexWrap="wrap" gap={4}>
-            {/* Value Distribution */}
-            <Box flex="1 1 400px" minWidth="300px">
-              <Typography
-                variant="subtitle2"
-                color="text.secondary"
-                gutterBottom
-              >
-                Value Distribution
-              </Typography>
-              <Box sx={{ width: "100%", height: 250 }}>
-                <ResponsiveContainer width="100%" height="100%">
-                  <BarChart data={stats.top_5}>
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis
-                      dataKey="value"
-                      angle={-45}
-                      textAnchor="end"
-                      height={80}
-                    />
-                    <YAxis />
-                    <Tooltip
-                      contentStyle={{
-                        backgroundColor: "#121212",
-                        borderRadius: 4,
-                        color: "#ffffff",
-                      }}
-                      labelStyle={{ color: "#ffffff" }}
-                    />
-                    <Bar dataKey="count" fill="rgba(136, 132, 216, 0.7)" />
-                  </BarChart>
-                </ResponsiveContainer>
+            {/* Summary Stats */}
+            <Box display="flex" flexWrap="wrap" gap={2} mb={4}>
+              <Box flex="1 1 300px" minWidth="250px">
+                <StatBox label="Unique Values" value={stats.n_unique} />
+              </Box>
+              <Box flex="1 1 300px" minWidth="250px">
+                <StatBox label="Most Frequent" value={stats.most_frequent} />
+              </Box>
+              <Box flex="1 1 300px" minWidth="250px">
+                <StatBox
+                  label="Top Value Count"
+                  value={stats.most_frequent_count}
+                />
               </Box>
             </Box>
 
-            {/* Proportion */}
-            <Box flex="1 1 400px" minWidth="300px">
-              <Typography
-                variant="subtitle2"
-                color="text.secondary"
-                gutterBottom
-              >
-                Proportion
-              </Typography>
-              <Box sx={{ width: "100%", height: 250 }}>
-                <ResponsiveContainer width="100%" height="100%">
-                  <PieChart>
-                    <Pie
-                      data={stats.top_5}
-                      dataKey="count"
-                      nameKey="value"
-                      cx="50%"
-                      cy="50%"
-                      outerRadius={80}
-                      label
-                    >
-                      {stats.top_5.map((entry, index) => (
-                        <Cell
-                          key={index}
-                          fill={
-                            [
-                              "#8b5cf6",
-                              "#a78bfa",
-                              "#c4b5fd",
-                              "#ddd6fe",
-                              "#ede9fe",
-                            ][index]
-                          }
-                        />
-                      ))}
-                    </Pie>
-                    <Tooltip
-                      contentStyle={{
-                        backgroundColor: "#121212",
-                        borderRadius: 4,
-                      }}
-                      labelStyle={{ color: "#ffffff" }}
-                      itemStyle={{ color: "#ffffff" }}
-                    />
-                  </PieChart>
-                </ResponsiveContainer>
+            {/* Charts */}
+            <Box display="flex" flexWrap="wrap" gap={4}>
+              {/* Value Distribution */}
+              <Box flex="1 1 400px" minWidth="300px">
+                <Typography
+                  variant="subtitle2"
+                  color="text.secondary"
+                  gutterBottom
+                >
+                  Value Distribution
+                </Typography>
+                <Box sx={{ width: "100%", height: 250 }}>
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart data={stats.top_5}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis
+                        dataKey="value"
+                        angle={-45}
+                        textAnchor="end"
+                        height={80}
+                      />
+                      <YAxis />
+                      <Tooltip
+                        contentStyle={{
+                          backgroundColor: theme.palette.background.paper,
+                          borderRadius: 4,
+                          color: theme.palette.text.primary,
+                          border: `1px solid ${theme.palette.divider}`,
+                        }}
+                        labelStyle={{ color: theme.palette.text.primary }}
+                      />
+                      <Bar dataKey="count" fill="rgba(136, 132, 216, 0.7)" />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </Box>
+              </Box>
+
+              {/* Proportion */}
+              <Box flex="1 1 400px" minWidth="300px">
+                <Typography
+                  variant="subtitle2"
+                  color="text.secondary"
+                  gutterBottom
+                >
+                  Proportion
+                </Typography>
+                <Box sx={{ width: "100%", height: 250 }}>
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={stats.top_5}
+                        dataKey="count"
+                        nameKey="value"
+                        cx="50%"
+                        cy="50%"
+                        outerRadius={80}
+                        label
+                      >
+                        {stats.top_5.map((entry, index) => (
+                          <Cell
+                            key={index}
+                            fill={
+                              [
+                                "#8b5cf6",
+                                "#a78bfa",
+                                "#c4b5fd",
+                                "#ddd6fe",
+                                "#ede9fe",
+                              ][index]
+                            }
+                          />
+                        ))}
+                      </Pie>
+                      <Tooltip
+                        contentStyle={{
+                          backgroundColor: theme.palette.background.paper,
+                          borderRadius: 4,
+                          border: `1px solid ${theme.palette.divider}`,
+                        }}
+                        labelStyle={{ color: theme.palette.text.primary }}
+                        itemStyle={{ color: theme.palette.text.primary }}
+                      />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </Box>
               </Box>
             </Box>
-          </Box>
-        </CardContent>
-      </Card>
-    ))}
-  </Box>
-);
+          </CardContent>
+        </Card>
+      ))}
+    </Box>
+  );
+};
diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx
index ac9682321..8501eb07f 100644
--- a/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/tabs/NumericTab.jsx
@@ -1,142 +1,155 @@
 import React from "react";
 import { Box, Typography, Card, CardContent, Alert } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import TrendingUpIcon from "@mui/icons-material/TrendingUp";
 import InfoIcon from "@mui/icons-material/Info";
 import Plot from "react-plotly.js";
 import { StatBox } from "../StatBox";
 import { MetricRow } from "../MetricRow";
 
-export const NumericTab = ({ numericStats }) => (
-  <Box display="flex" flexDirection="column" gap={4}>
-    {Object.entries(numericStats).map(([column, stats]) => (
-      <Card key={column} sx={{ borderRadius: 2 }}>
-        <CardContent sx={{ bgcolor: "#2C2C2C" }}>
-          {/* Title */}
-          <Box display="flex" alignItems="center" mb={2}>
-            <TrendingUpIcon sx={{ color: "primary.main", mr: 1 }} />
-            <Typography variant="h6" fontWeight="bold">
-              {column}
-            </Typography>
-          </Box>
+export const NumericTab = ({ numericStats }) => {
+  const theme = useTheme();
 
-          {/* Summary Stats */}
-          <Box display="flex" flexWrap="wrap" gap={2} mb={3}>
-            <Box flex="1 1 200px" minWidth="150px">
-              <StatBox label="Mean" value={stats.mean.toFixed(2)} />
-            </Box>
-            <Box flex="1 1 200px" minWidth="150px">
-              <StatBox label="Median" value={stats.median.toFixed(2)} />
-            </Box>
-            <Box flex="1 1 200px" minWidth="150px">
-              <StatBox label="Std Dev" value={stats.std.toFixed(2)} />
+  return (
+    <Box display="flex" flexDirection="column" gap={4}>
+      {Object.entries(numericStats).map(([column, stats]) => (
+        <Card key={column} sx={{ borderRadius: 2 }}>
+          <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
+            {/* Title */}
+            <Box display="flex" alignItems="center" mb={2}>
+              <TrendingUpIcon sx={{ color: "primary.main", mr: 1 }} />
+              <Typography variant="h6" fontWeight="bold">
+                {column}
+              </Typography>
             </Box>
-            <Box flex="1 1 200px" minWidth="150px">
-              <StatBox label="Unique" value={stats.n_unique} />
+
+            {/* Summary Stats */}
+            <Box display="flex" flexWrap="wrap" gap={2} mb={3}>
+              <Box flex="1 1 200px" minWidth="150px">
+                <StatBox label="Mean" value={stats.mean.toFixed(2)} />
+              </Box>
+              <Box flex="1 1 200px" minWidth="150px">
+                <StatBox label="Median" value={stats.median.toFixed(2)} />
+              </Box>
+              <Box flex="1 1 200px" minWidth="150px">
+                <StatBox label="Std Dev" value={stats.std.toFixed(2)} />
+              </Box>
+              <Box flex="1 1 200px" minWidth="150px">
+                <StatBox label="Unique" value={stats.n_unique} />
+              </Box>
             </Box>
-          </Box>
 
-          {/* Two-column metrics */}
-          <Box display="flex" flexWrap="wrap" gap={4}>
-            {/* Distribution Metrics */}
-            <Box flex="1 1 300px" minWidth="250px">
-              <Typography
-                variant="subtitle2"
-                color="text.secondary"
-                gutterBottom
-              >
-                Distribution Metrics
-              </Typography>
-              <Box display="flex" flexDirection="column" gap={1}>
-                <MetricRow label="Min" value={stats.min.toFixed(2)} />
-                <MetricRow label="Q1" value={stats.q1.toFixed(2)} />
-                <MetricRow
-                  label="Median (Q2)"
-                  value={stats.median.toFixed(2)}
-                />
-                <MetricRow label="Q3" value={stats.q3.toFixed(2)} />
-                <MetricRow label="Max" value={stats.max.toFixed(2)} />
+            {/* Two-column metrics */}
+            <Box display="flex" flexWrap="wrap" gap={4}>
+              {/* Distribution Metrics */}
+              <Box flex="1 1 300px" minWidth="250px">
+                <Typography
+                  variant="subtitle2"
+                  color="text.secondary"
+                  gutterBottom
+                >
+                  Distribution Metrics
+                </Typography>
+                <Box display="flex" flexDirection="column" gap={1}>
+                  <MetricRow label="Min" value={stats.min.toFixed(2)} />
+                  <MetricRow label="Q1" value={stats.q1.toFixed(2)} />
+                  <MetricRow
+                    label="Median (Q2)"
+                    value={stats.median.toFixed(2)}
+                  />
+                  <MetricRow label="Q3" value={stats.q3.toFixed(2)} />
+                  <MetricRow label="Max" value={stats.max.toFixed(2)} />
+                </Box>
+              </Box>
+
+              {/* Shape Indicators */}
+              <Box flex="1 1 300px" minWidth="250px">
+                <Typography
+                  variant="subtitle2"
+                  color="text.secondary"
+                  gutterBottom
+                >
+                  Shape Indicators
+                </Typography>
+                <Box display="flex" flexDirection="column" gap={1}>
+                  <MetricRow label="Skewness" value={stats.skew.toFixed(3)} />
+                  <MetricRow
+                    label="Kurtosis"
+                    value={stats.kurtosis.toFixed(3)}
+                  />
+                  <MetricRow label="Outliers" value={stats.outliers_count} />
+                  <MetricRow
+                    label="Range"
+                    value={(stats.max - stats.min).toFixed(2)}
+                  />
+                </Box>
               </Box>
             </Box>
 
-            {/* Shape Indicators */}
-            <Box flex="1 1 300px" minWidth="250px">
+            {/* Horizontal Boxplot Visualization */}
+            <Box mt={4}>
               <Typography
                 variant="subtitle2"
                 color="text.secondary"
                 gutterBottom
               >
-                Shape Indicators
+                Boxplot
               </Typography>
-              <Box display="flex" flexDirection="column" gap={1}>
-                <MetricRow label="Skewness" value={stats.skew.toFixed(3)} />
-                <MetricRow label="Kurtosis" value={stats.kurtosis.toFixed(3)} />
-                <MetricRow label="Outliers" value={stats.outliers_count} />
-                <MetricRow
-                  label="Range"
-                  value={(stats.max - stats.min).toFixed(2)}
-                />
-              </Box>
+              <Plot
+                data={[
+                  {
+                    x: [stats.min, stats.q1, stats.median, stats.q3, stats.max],
+                    type: "box",
+                    name: column,
+                    orientation: "h", // ← rotated here
+                    boxpoints: "suspectedoutliers",
+                    marker: { color: "#8884d8" },
+                    line: { color: "#212121" },
+                    fillcolor: "#8884d8",
+                    opacity: 0.6,
+                    showlegend: false,
+                  },
+                ]}
+                layout={{
+                  paper_bgcolor: "transparent",
+                  plot_bgcolor: "transparent",
+                  font: { color: theme.palette.text.primary },
+                  margin: { t: 10, b: 40, l: 40, r: 20 },
+                  height: 220,
+                  xaxis: {
+                    title: "",
+                    zeroline: false,
+                    gridcolor:
+                      theme.palette.mode === "dark" ? "#444" : "#e0e0e0",
+                  },
+                  yaxis: {
+                    showticklabels: false,
+                  },
+                }}
+                config={{
+                  responsive: true,
+                  displayModeBar: false,
+                }}
+                style={{ width: "100%", height: "100%" }}
+              />
             </Box>
-          </Box>
-
-          {/* Horizontal Boxplot Visualization */}
-          <Box mt={4}>
-            <Typography variant="subtitle2" color="text.secondary" gutterBottom>
-              Boxplot
-            </Typography>
-            <Plot
-              data={[
-                {
-                  x: [stats.min, stats.q1, stats.median, stats.q3, stats.max],
-                  type: "box",
-                  name: column,
-                  orientation: "h", // ← rotated here
-                  boxpoints: "suspectedoutliers",
-                  marker: { color: "#8884d8" },
-                  line: { color: "#212121" },
-                  fillcolor: "#8884d8",
-                  opacity: 0.6,
-                  showlegend: false,
-                },
-              ]}
-              layout={{
-                paper_bgcolor: "transparent",
-                plot_bgcolor: "transparent",
-                font: { color: "#ddd" },
-                margin: { t: 10, b: 40, l: 40, r: 20 },
-                height: 220,
-                xaxis: {
-                  title: "",
-                  zeroline: false,
-                  gridcolor: "#444",
-                },
-                yaxis: {
-                  showticklabels: false,
-                },
-              }}
-              config={{
-                responsive: true,
-                displayModeBar: false,
-              }}
-              style={{ width: "100%", height: "100%" }}
-            />
-          </Box>
 
-          {/* Skewness Warning */}
-          {stats.skew > 1 && (
-            <Alert
-              severity="warning"
-              icon={<InfoIcon fontSize="inherit" />}
-              sx={{ mt: 3 }}
-            >
-              <Typography variant="body2">
-                <strong>Right-skewed distribution:</strong> Consider applying a
-                log transformation.
-              </Typography>
-            </Alert>
-          )}
-        </CardContent>
-      </Card>
-    ))}
-  </Box>
-);
+            {/* Skewness Warning */}
+            {stats.skew > 1 && (
+              <Alert
+                severity="warning"
+                icon={<InfoIcon fontSize="inherit" />}
+                sx={{ mt: 3 }}
+              >
+                <Typography variant="body2">
+                  <strong>Right-skewed distribution:</strong> Consider applying
+                  a log transformation.
+                </Typography>
+              </Alert>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </Box>
+  );
+};
diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx
index f7f79df8d..696965a11 100644
--- a/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/tabs/OverviewTab.jsx
@@ -61,7 +61,7 @@ const OverviewTab = ({
       </Card>
       {/* Missing Values Overview */}
       <Card>
-        <CardContent sx={{ bgcolor: "#2C2C2C" }}>
+        <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
           <Typography variant="h6" gutterBottom>
             Missing Values Overview
           </Typography>
@@ -74,11 +74,12 @@ const OverviewTab = ({
                   <YAxis />
                   <Tooltip
                     contentStyle={{
-                      backgroundColor: "#121212",
+                      backgroundColor: theme.palette.background.paper,
                       borderRadius: 4,
-                      color: "#ffffff",
+                      color: theme.palette.text.primary,
+                      border: `1px solid ${theme.palette.divider}`,
                     }}
-                    labelStyle={{ color: "#ffffff" }}
+                    labelStyle={{ color: theme.palette.text.primary }}
                   />
                   <Bar dataKey="missing" fill="rgba(136, 132, 216, 0.7)" />
                 </BarChart>
@@ -94,7 +95,7 @@ const OverviewTab = ({
 
       {/* Column Types Distribution */}
       <Card>
-        <CardContent sx={{ bgcolor: "#2C2C2C" }}>
+        <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
           <Typography variant="h6" gutterBottom>
             Column Types Distribution
           </Typography>
@@ -106,7 +107,7 @@ const OverviewTab = ({
                   sx={{
                     p: 2,
                     textAlign: "center",
-                    bgcolor: "#363636",
+                    bgcolor: theme.palette.ui.disabled,
                     borderRadius: 2,
                   }}
                 >
diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx
index a38ec0830..5f681246d 100644
--- a/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/tabs/QualityTab.jsx
@@ -14,7 +14,7 @@ const QualityTab = ({ qualityInfo, totalRows }) => {
     <Box display="flex" flexDirection="column" gap={4}>
       {/* Data Quality Summary */}
       <Card>
-        <CardContent sx={{ bgcolor: "#2C2C2C" }}>
+        <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
           <Typography variant="h6" fontWeight="bold" mb={2}>
             Data Quality Summary
           </Typography>
@@ -72,7 +72,11 @@ const QualityTab = ({ qualityInfo, totalRows }) => {
                 <Box display="flex" flexDirection="column" gap={2}>
                   <Paper
                     variant="outlined"
-                    sx={{ p: 2, bgcolor: "#363636", borderRadius: 2 }}
+                    sx={{
+                      p: 2,
+                      bgcolor: theme.palette.ui.disabled,
+                      borderRadius: 2,
+                    }}
                   >
                     <Typography variant="h5" fontWeight="bold">
                       {qualityInfo.rows_with_any_nan}
@@ -91,7 +95,11 @@ const QualityTab = ({ qualityInfo, totalRows }) => {
 
                   <Paper
                     variant="outlined"
-                    sx={{ p: 2, bgcolor: "#363636", borderRadius: 2 }}
+                    sx={{
+                      p: 2,
+                      bgcolor: theme.palette.ui.disabled,
+                      borderRadius: 2,
+                    }}
                   >
                     <Typography variant="h5" fontWeight="bold">
                       {qualityInfo.rows_with_multiple_nan}
@@ -116,7 +124,7 @@ const QualityTab = ({ qualityInfo, totalRows }) => {
 
       {/* Missing Data by Column */}
       <Card>
-        <CardContent sx={{ bgcolor: "#2C2C2C" }}>
+        <CardContent sx={{ bgcolor: theme.palette.ui.box }}>
           <Typography variant="h6" fontWeight="bold" mb={2}>
             Missing Data by Column
           </Typography>
diff --git a/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx b/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx
index bc362df54..503e66f31 100644
--- a/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx
+++ b/DashAI/front/src/components/notebooks/dataset/tabs/TextTab.jsx
@@ -153,11 +153,12 @@ export const TextTab = ({ textStats }) => (
                     <YAxis />
                     <RechartsTooltip
                       contentStyle={{
-                        backgroundColor: "#121212",
+                        backgroundColor: theme.palette.background.paper,
                         borderRadius: 4,
-                        color: "#ffffff",
+                        color: theme.palette.text.primary,
+                        border: `1px solid ${theme.palette.divider}`,
                       }}
-                      labelStyle={{ color: "#ffffff" }}
+                      labelStyle={{ color: theme.palette.text.primary }}
                     />
                     <Bar dataKey="value" fill="rgba(136, 132, 216, 0.7)" />
                   </BarChart>
diff --git a/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx b/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx
index c8f54cd88..954088fd4 100644
--- a/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx
+++ b/DashAI/front/src/components/notebooks/datasetCreation/PreviewDataset.jsx
@@ -166,7 +166,7 @@ function PreviewDataset({
                 fontSize: "1.3rem",
                 color: "text.secondary",
                 "&:hover": {
-                  backgroundColor: "action.hover",
+                  backgroundColor: "ui.hover",
                 },
               }}
             >
diff --git a/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx b/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx
index 37aca3854..862acf525 100644
--- a/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx
+++ b/DashAI/front/src/components/notebooks/notebook/DatasetPreviewNotebook.jsx
@@ -36,7 +36,7 @@ export default function DatasetPreviewNotebook({
           height: "100vh",
         }}
       >
-        <CircularProgress sx={{ color: "#00BEBB" }} />
+        <CircularProgress color="primary" />
         <Typography>Loading...</Typography>
       </Box>
     );
@@ -102,7 +102,7 @@ export default function DatasetPreviewNotebook({
       <Accordion
         data-tour="dataset-preview-section"
         sx={{
-          bgcolor: "#212121",
+          bgcolor: theme.palette.ui.box,
           borderRadius: 2,
           boxShadow: "none",
         }}
diff --git a/DashAI/front/src/components/notebooks/notebook/NotebookView.jsx b/DashAI/front/src/components/notebooks/notebook/NotebookView.jsx
index b6f6a642b..aa319a1c3 100644
--- a/DashAI/front/src/components/notebooks/notebook/NotebookView.jsx
+++ b/DashAI/front/src/components/notebooks/notebook/NotebookView.jsx
@@ -54,7 +54,7 @@ export default function NotebookView({ notebook }) {
       <Box
         sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
       >
-        <CircularProgress sx={{ color: "#00BEBB" }} />
+        <CircularProgress color="primary" />
         <Typography>Loading...</Typography>
       </Box>
     );
diff --git a/DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx b/DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx
index 882effd5e..fd7ae9f05 100644
--- a/DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx
+++ b/DashAI/front/src/components/notebooks/tool/ConfigureToolModal.jsx
@@ -244,7 +244,7 @@ export default function ConfigureToolModal({
             height: "6px",
             cursor: "row-resize",
             backgroundColor: "divider",
-            "&:hover": { backgroundColor: "action.hover" },
+            "&:hover": { backgroundColor: "ui.hover" },
             zIndex: 2,
           }}
         />
diff --git a/DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx b/DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx
index f20f1bc14..f83e1d255 100644
--- a/DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx
+++ b/DashAI/front/src/components/notebooks/tool/HoverToolInfo.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Box, Typography, Popover, Chip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import api from "../../../api/api";
 
 export default function HoverToolInfo({
@@ -8,6 +9,8 @@ export default function HoverToolInfo({
   hoveredTool,
   handleMouseLeave,
 }) {
+  const theme = useTheme();
+
   return (
     <Popover
       open={Boolean(anchorEl)}
@@ -25,8 +28,8 @@ export default function HoverToolInfo({
       sx={{
         pointerEvents: "none",
         "& .MuiPopover-paper": {
-          bgcolor: "rgb(20, 20, 24)",
-          border: "1px solid rgb(63, 63, 70)",
+          bgcolor: theme.palette.background.paper,
+          border: `1px solid ${theme.palette.divider}`,
           borderRadius: 2,
           p: 2,
           maxWidth: 320,
@@ -42,8 +45,8 @@ export default function HoverToolInfo({
               width: "100%",
               height: 160,
               borderRadius: 1.5,
-              bgcolor: "rgb(39, 39, 42)",
-              border: "1px solid rgb(63, 63, 70)",
+              bgcolor: theme.palette.ui.border,
+              border: `1px solid ${theme.palette.divider}`,
               overflow: "hidden",
               mb: 2,
             }}
@@ -58,7 +61,7 @@ export default function HoverToolInfo({
           {/* Title */}
           <Typography
             variant="subtitle2"
-            sx={{ color: "rgb(250, 250, 250)", fontWeight: 600, mb: 1 }}
+            sx={{ color: "text.primary", fontWeight: 600, mb: 1 }}
           >
             {hoveredTool.display_name}
           </Typography>
@@ -66,7 +69,7 @@ export default function HoverToolInfo({
           {/* Description */}
           <Typography
             variant="body2"
-            sx={{ color: "rgb(161, 161, 170)", lineHeight: 1.5, mb: 1.5 }}
+            sx={{ color: "text.secondary", lineHeight: 1.5, mb: 1.5 }}
           >
             {hoveredTool.description}
           </Typography>
@@ -78,7 +81,7 @@ export default function HoverToolInfo({
             sx={{
               bgcolor: hoveredTool.metadata.color,
               color: "rgba(255, 255, 255, 1)",
-              border: `1px solid rgb(63, 63, 70)`,
+              border: `1px solid ${theme.palette.divider}`,
               fontWeight: 500,
             }}
           />
diff --git a/DashAI/front/src/components/notebooks/tool/ToolList.jsx b/DashAI/front/src/components/notebooks/tool/ToolList.jsx
index 6b2221bce..02677d5d1 100644
--- a/DashAI/front/src/components/notebooks/tool/ToolList.jsx
+++ b/DashAI/front/src/components/notebooks/tool/ToolList.jsx
@@ -62,7 +62,7 @@ export default function ToolList({ tools, notebook, FormComponent }) {
             disableGutters
             defaultExpanded
             sx={{
-              bgcolor: "rgb(31, 31, 31)",
+              bgcolor: theme.palette.ui.box,
               borderRadius: 1.5,
               overflow: "hidden",
               "&:before": { display: "none" },
@@ -88,7 +88,7 @@ export default function ToolList({ tools, notebook, FormComponent }) {
                 size="small"
                 label={list.length}
                 sx={{
-                  bgcolor: "rgb(43, 43, 43)",
+                  bgcolor: theme.palette.ui.disabled,
                   color: "text.secondary",
                   height: 20,
                 }}
diff --git a/DashAI/front/src/components/notebooks/tool/ToolListItem.jsx b/DashAI/front/src/components/notebooks/tool/ToolListItem.jsx
index accda461d..94115b80b 100644
--- a/DashAI/front/src/components/notebooks/tool/ToolListItem.jsx
+++ b/DashAI/front/src/components/notebooks/tool/ToolListItem.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { Box, Typography, Chip, Tooltip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
 import HoverToolInfo from "./HoverToolInfo";
 import api from "../../../api/api";
 import { CategoryIcon } from "./CategoryIcon";
@@ -10,6 +11,7 @@ export default function ToolListItem({
   onClick,
   ...props
 }) {
+  const theme = useTheme();
   const [anchorEl, setAnchorEl] = useState(null);
   const [hoveredTool, setHoveredTool] = useState(null);
 
@@ -47,16 +49,16 @@ export default function ToolListItem({
         slotProps={{
           tooltip: {
             sx: {
-              bgcolor: "rgb(33, 33, 33)",
-              color: "rgb(255, 255, 255)",
+              bgcolor: theme.palette.background.paper,
+              color: theme.palette.text.primary,
               display: disabled ? "block" : "none",
-              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}`,
                 },
               },
             },
@@ -75,8 +77,8 @@ export default function ToolListItem({
             alignItems: "center",
             gap: 1.5,
             p: 1.5,
-            bgcolor: disabled ? "rgb(32, 32, 32)" : "rgb(44, 44, 44)",
-            border: "1px solid rgb(39, 39, 42)",
+            bgcolor: disabled ? "ui.disabled" : "ui.box",
+            border: `1px solid ${theme.palette.ui.border}`,
             borderRadius: 1,
             cursor: disabled ? "not-allowed" : "pointer",
             transition: "all 0.2s",
@@ -84,8 +86,10 @@ export default function ToolListItem({
             filter: disabled ? "grayscale(0.6)" : "none",
             position: "relative",
             "&:hover": {
-              bgcolor: disabled ? "rgb(32, 32, 32)" : "rgb(60, 60, 60)",
-              borderColor: disabled ? "rgb(39, 39, 42)" : tool.metadata.color,
+              bgcolor: disabled ? "ui.disabled" : theme.palette.action.hover,
+              borderColor: disabled
+                ? theme.palette.ui.border
+                : tool.metadata.color,
               transform: disabled ? "none" : "translateX(4px)",
             },
             "&::after": disabled
@@ -110,15 +114,17 @@ export default function ToolListItem({
               width: 36,
               height: 36,
               borderRadius: 1,
-              bgcolor: disabled ? "rgb(50, 50, 50)" : "rgb(63, 63, 70)",
-              color: disabled ? "rgb(150, 150, 150)" : "rgb(250, 250, 250)",
+              bgcolor: disabled ? "ui.disabled" : "ui.border",
+              color: disabled ? "text.disabled" : "text.primary",
               flexShrink: 0,
             }}
           >
             <CategoryIcon
               name={tool.type}
               category={tool.metadata.category}
-              color={disabled ? "rgb(100, 100, 100)" : tool.metadata.color}
+              color={
+                disabled ? theme.palette.text.disabled : tool.metadata.color
+              }
             />
           </Box>
 
@@ -135,7 +141,7 @@ export default function ToolListItem({
               <Typography
                 variant="body2"
                 sx={{
-                  color: disabled ? "rgb(150, 150, 150)" : "rgb(250, 250, 250)",
+                  color: disabled ? "text.disabled" : "text.primary",
                   fontWeight: 500,
                   overflow: "hidden",
                   textOverflow: "ellipsis",
@@ -158,7 +164,7 @@ export default function ToolListItem({
               <Typography
                 variant="caption"
                 sx={{
-                  color: disabled ? "rgb(90, 90, 90)" : "rgb(113, 113, 122)",
+                  color: disabled ? "text.disabled" : "text.secondary",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   width: 0,
@@ -177,9 +183,9 @@ export default function ToolListItem({
               width: 60,
               height: 40,
               borderRadius: 0.75,
-              bgcolor: disabled ? "rgb(30, 30, 30)" : "rgb(39, 39, 42)",
+              bgcolor: disabled ? "ui.disabled" : "ui.border",
               border: `1px solid ${
-                disabled ? "rgb(50, 50, 50)" : "rgb(63, 63, 70)"
+                disabled ? theme.palette.ui.disabled : theme.palette.ui.border
               }`,
               display: { xs: "none", lg: "none", xl: "block" },
               overflow: "hidden",
diff --git a/DashAI/front/src/components/predictions/PredictionsTable.jsx b/DashAI/front/src/components/predictions/PredictionsTable.jsx
index f55e3f3dd..aff486aa3 100644
--- a/DashAI/front/src/components/predictions/PredictionsTable.jsx
+++ b/DashAI/front/src/components/predictions/PredictionsTable.jsx
@@ -205,7 +205,7 @@ function PredictionsTable({ predictions, onItemClick, onItemDelete }) {
               outline: "none",
             },
             "& .MuiDataGrid-row:hover": {
-              backgroundColor: "action.hover",
+              backgroundColor: theme.palette.ui.hover,
             },
           }}
         />
diff --git a/DashAI/front/src/components/threeSectionLayout/OptionBox.jsx b/DashAI/front/src/components/threeSectionLayout/OptionBox.jsx
index 8a64cbe44..3208b4685 100644
--- a/DashAI/front/src/components/threeSectionLayout/OptionBox.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/OptionBox.jsx
@@ -43,7 +43,7 @@ export default function OptionBox({
           justifyContent: matches ? "space-between" : "center",
           textAlign: matches ? "left" : "center",
           "&:hover": {
-            backgroundColor: "#1e1e1e",
+            backgroundColor: theme.palette.action.hover,
           },
         }}
       >
diff --git a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx
index f97c9a102..152ed8526 100644
--- a/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx
+++ b/DashAI/front/src/components/threeSectionLayout/SearchBar.jsx
@@ -32,7 +32,7 @@ export default function SearchBar({ placeholder, onChange, value }) {
         input: {
           startAdornment: (
             <InputAdornment position="start">
-              <SearchIcon sx={{ color: theme.palette.text.secondary }} />
+              <SearchIcon color="action" />
             </InputAdornment>
           ),
         },
diff --git a/DashAI/front/src/contexts/ThemeContext.jsx b/DashAI/front/src/contexts/ThemeContext.jsx
new file mode 100644
index 000000000..9564da439
--- /dev/null
+++ b/DashAI/front/src/contexts/ThemeContext.jsx
@@ -0,0 +1,35 @@
+import React, { createContext, useState, useMemo, useEffect } from "react";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import getTheme from "../styles/theme";
+
+export const ColorModeContext = createContext({ toggleColorMode: () => {} });
+
+export function CustomThemeProvider({ children }) {
+  const [mode, setMode] = useState(() => {
+    // Load saved theme from localStorage or default to dark
+    const savedMode = localStorage.getItem("themeMode");
+    return savedMode || "dark";
+  });
+
+  // Save theme preference to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem("themeMode", mode);
+  }, [mode]);
+
+  const colorMode = useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
+      },
+    }),
+    [],
+  );
+
+  const theme = useMemo(() => createTheme(getTheme(mode)), [mode]);
+
+  return (
+    <ColorModeContext.Provider value={colorMode}>
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    </ColorModeContext.Provider>
+  );
+}
diff --git a/DashAI/front/src/index.jsx b/DashAI/front/src/index.jsx
index 27362ad2b..f8d698997 100644
--- a/DashAI/front/src/index.jsx
+++ b/DashAI/front/src/index.jsx
@@ -1,17 +1,17 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
-import { createTheme, ThemeProvider } from "@mui/material/styles";
 import CssBaseline from "@mui/material/CssBaseline";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import theme from "./styles/theme";
 import { SnackbarProvider } from "notistack";
+import { CustomThemeProvider } from "./contexts/ThemeContext";
+
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
 root.render(
   <React.StrictMode>
-    <ThemeProvider theme={createTheme(theme)}>
+    <CustomThemeProvider>
       <SnackbarProvider
         anchorOrigin={{
           vertical: "top",
@@ -22,7 +22,7 @@ root.render(
         <CssBaseline />
         <App />
       </SnackbarProvider>
-    </ThemeProvider>
+    </CustomThemeProvider>
   </React.StrictMode>,
 );
 
diff --git a/DashAI/front/src/pages/results/components/MetricsCard.jsx b/DashAI/front/src/pages/results/components/MetricsCard.jsx
index 4da38e3f3..814fb4e5a 100644
--- a/DashAI/front/src/pages/results/components/MetricsCard.jsx
+++ b/DashAI/front/src/pages/results/components/MetricsCard.jsx
@@ -17,10 +17,7 @@ export default function MetricsCard({ title, metrics }) {
             key={key}
             sx={{ display: "flex", justifyContent: "space-between", mb: 1 }}
           >
-            <Typography
-              variant="body2"
-              sx={{ color: theme.palette.text.secondary }}
-            >
+            <Typography variant="body2" color="text.secondary">
               {key}:
             </Typography>
             <Typography variant="body2" fontWeight="medium">
@@ -29,10 +26,7 @@ export default function MetricsCard({ title, metrics }) {
           </Box>
         ))
       ) : (
-        <Typography
-          variant="body2"
-          sx={{ color: theme.palette.text.secondary }}
-        >
+        <Typography variant="body2" color="text.secondary">
           No metrics available
         </Typography>
       )}
diff --git a/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx b/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx
index 812d13242..ed2512abf 100644
--- a/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx
+++ b/DashAI/front/src/pages/results/components/ResultsTabInfo.jsx
@@ -140,10 +140,7 @@ function ResultsTabInfo({ runData, handleRun }) {
             <Grid container spacing={2}>
               {runData.model_name && (
                 <Grid item xs={6} md={3}>
-                  <Typography
-                    variant="caption"
-                    sx={{ color: theme.palette.text.secondary }}
-                  >
+                  <Typography variant="caption" color="text.secondary">
                     Model
                   </Typography>
                   <Typography variant="body2" fontWeight="medium">
@@ -153,10 +150,7 @@ function ResultsTabInfo({ runData, handleRun }) {
               )}
               {runData.start_time && (
                 <Grid item xs={6} md={3}>
-                  <Typography
-                    variant="caption"
-                    sx={{ color: theme.palette.text.secondary }}
-                  >
+                  <Typography variant="caption" color="text.secondary">
                     Start Time
                   </Typography>
                   <Typography variant="body2" fontWeight="medium">
@@ -166,10 +160,7 @@ function ResultsTabInfo({ runData, handleRun }) {
               )}
               {runData.end_time && (
                 <Grid item xs={6} md={3}>
-                  <Typography
-                    variant="caption"
-                    sx={{ color: theme.palette.text.secondary }}
-                  >
+                  <Typography variant="caption" color="text.secondary">
                     End Time
                   </Typography>
                   <Typography variant="body2" fontWeight="medium">
@@ -179,10 +170,7 @@ function ResultsTabInfo({ runData, handleRun }) {
               )}
               {runData.start_time && runData.status !== "Error" && (
                 <Grid item xs={6} md={3}>
-                  <Typography
-                    variant="caption"
-                    sx={{ color: theme.palette.text.secondary }}
-                  >
+                  <Typography variant="caption" color="text.secondary">
                     Duration
                   </Typography>
                   <Typography variant="body2" fontWeight="medium">
diff --git a/DashAI/front/src/styles/theme.js b/DashAI/front/src/styles/theme.js
index c0f6e4370..83b9acfb6 100644
--- a/DashAI/front/src/styles/theme.js
+++ b/DashAI/front/src/styles/theme.js
@@ -1,8 +1,8 @@
 import QuicksandBoldWoff2 from "./fonts/Quicksand-Bold.woff2";
 
-const theme = {
+const getTheme = (mode) => ({
   palette: {
-    mode: "dark",
+    mode,
 
     // PRIMARY - Main application color
     // Used in: primary buttons, highlighted icons, links, active elements
@@ -22,31 +22,68 @@ const theme = {
       contrastText: "#000",
     },
 
+    // DIVIDER - Divider color
+    // Used in: Divider components, separators
+    divider:
+      mode === "dark" ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)",
+
     // BACKGROUND - Background colors for different surfaces
     // Used in: page backgrounds, cards, modals, panels
-    background: {
-      default: "#2e3037", // Main app background
-      paper: "#121212", // Cards and modals background
-      box: "#212121", // Boxes and containers (AppBar, sidebars)
-    },
+    background:
+      mode === "dark"
+        ? {
+            default: "#2e3037", // Main app background
+            paper: "#121212", // Cards and modals background
+            box: "#212121", // Boxes and containers (AppBar, sidebars)
+          }
+        : {
+            default: "#f5f5f5", // Main app background
+            paper: "#ffffff", // Cards and modals background
+            box: "#fafafa", // Boxes and containers (AppBar, sidebars)
+          },
 
     // TEXT - Text colors
     // Used in: Typography components, labels, paragraphs
-    text: {
-      primary: "#ffffff", // Primary text (titles, important labels)
-      secondary: "#b0b0b0", // Secondary text (descriptions, subtitles)
-    },
+    text:
+      mode === "dark"
+        ? {
+            primary: "#ffffff", // Primary text (titles, important labels)
+            secondary: "#b0b0b0", // Secondary text (descriptions, subtitles)
+            disabled: "#757575", // Disabled text
+          }
+        : {
+            primary: "#1a1a1a", // Primary text (titles, important labels)
+            secondary: "#666666", // Secondary text (descriptions, subtitles)
+            disabled: "#9e9e9e", // Disabled text
+          },
+
+    // ACTION - Interactive states
+    // Used in: hover states, selected items, disabled states, focus indicators
+    action:
+      mode === "dark"
+        ? {
+            hover: "rgba(255, 255, 255, 0.08)", // Hover state for interactive elements
+            selected: "rgba(255, 255, 255, 0.16)", // Selected state for items
+            disabled: "rgba(255, 255, 255, 0.3)", // Disabled state opacity
+            disabledBackground: "rgba(255, 255, 255, 0.12)", // Disabled background
+          }
+        : {
+            hover: "rgba(0, 0, 0, 0.04)", // Hover state for interactive elements
+            selected: "rgba(0, 0, 0, 0.08)", // Selected state for items
+            disabled: "rgba(0, 0, 0, 0.26)", // Disabled state opacity
+            disabledBackground: "rgba(0, 0, 0, 0.12)", // Disabled background
+          },
 
     // ERROR - Error states
     // Used in: error messages, failed validations, critical alerts
     error: {
-      main: "#ff8383",
+      main: mode === "dark" ? "#ff8383" : "#d32f2f",
     },
 
     // WARNING - Warning states
     // Used in: warning alerts, pending states requiring attention
     warning: {
-      main: "#f1ae61",
+      main: mode === "dark" ? "#f1ae61" : "#ed6c02",
     },
 
     // SUCCESS - Success states
@@ -66,6 +103,7 @@ const theme = {
     // ACCENT - Custom accent colors
     // Used in: elements requiring emphasis, special details
     accent: {
+      main: "#16FFFF", // Main accent color (cyan)
       cyan: "#16FFFF", // For highlights
       teal: "#00BEBB", // For featured elements
     },
@@ -73,11 +111,11 @@ const theme = {
     // STATUS - Experiment/job states
     // Used in: status badges, progress indicators in experiments and runs
     status: {
-      notStarted: "#626262", // Experiment not started
+      notStarted: mode === "dark" ? "#626262" : "#9e9e9e", // Experiment not started
       started: "#3e68ffff", // Experiment running
       finished: "#43A047", // Experiment completed successfully
       delivered: "#3e68ffff", // Results delivered
-      error: "#A70909", // Experiment error
+      error: mode === "dark" ? "#A70909" : "#c62828", // Experiment error
     },
 
     // DATATYPE - Colors for data types in columns
@@ -103,18 +141,36 @@ const theme = {
 
     // 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
-    },
+    ui:
+      mode === "dark"
+        ? {
+            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
+            box: "#212121", // Boxes and containers background
+            disabled: "#2C2C2C", // Disabled elements background
+          }
+        : {
+            border: "#e0e0e0", // Standard border
+            borderLight: "#f0f0f0", // Lighter border
+            borderDark: "#d0d0d0", // Darker border
+            panelDark: "#f5f5f5", // Light panel
+            panelMedium: "#fafafa", // Medium panel
+            panelLight: "#ffffff", // Lightest panel
+            scrollbar: "#bdbdbd", // Scrollbar color
+            scrollbarHover: "#9e9e9e", // Scrollbar on hover
+            hover: "rgba(0, 0, 0, 0.04)", // Element hover state
+            divider: "rgba(0, 0, 0, 0.12)", // Dividers and separators
+            box: "#fafafa", // Boxes and containers background
+            disabled: "#f5f5f5", // Disabled elements background
+          },
   },
   typography: {
     fontFamily: "Quicksand-Bold",
@@ -142,11 +198,11 @@ const theme = {
         ::-webkit-scrollbar-thumb {
             -webkit-border-radius: 10px;
             border-radius: 10px;
-            background: rgba(0, 0, 0, 0.8);
+            background: ${mode === "dark" ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.3)"};
             -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
         }
         ::-webkit-scrollbar-thumb:window-inactive {
-                background: rgba(0,0,0,0.4);
+                background: ${mode === "dark" ? "rgba(0,0,0,0.4)" : "rgba(0,0,0,0.2)"};
         }
       `,
     },
@@ -168,6 +224,6 @@ const theme = {
       },
     },
   },
-};
+});
 
-export default theme;
+export default getTheme;