diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 1e73ba9b..f9c24764 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -2,6 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import theme from "./theme";
 import reportWebVitals from "./reportWebVitals";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import axios from "axios";
@@ -16,7 +19,10 @@ const root = ReactDOM.createRoot(
 root.render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <App />
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <App />
+      </ThemeProvider>
     </QueryClientProvider>
   </React.StrictMode>
 );
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
new file mode 100644
index 00000000..37fc90d2
--- /dev/null
+++ b/frontend/src/theme.ts
@@ -0,0 +1,31 @@
+import { createTheme } from "@mui/material/styles";
+
+const theme = createTheme({
+  palette: {
+    mode: "light",
+    primary: {
+      main: "#1976d2",
+    },
+    secondary: {
+      main: "#9c27b0",
+    },
+    background: {
+      default: "#f4f6fa",
+      paper: "#fff",
+    },
+  },
+  components: {
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          "&.Mui-selected, &.Mui-selected:hover": {
+            backgroundColor: "#e3f2fd",
+            color: "#1976d2",
+          },
+        },
+      },
+    },
+  },
+});
+
+export default theme;