diff --git a/bun.lockb b/bun.lockb
index 0d5e34d..ff70e9c 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 517c622..1530ce9 100644
--- a/package.json
+++ b/package.json
@@ -22,11 +22,11 @@
     "@emotion/styled": "^11.13.5",
     "@hookform/resolvers": "^3.9.1",
     "@jest/globals": "^29.7.0",
-    "@mui/icons-material": "^6.1.9",
-    "@mui/material": "^6.1.9",
-    "@mui/material-nextjs": "^6.1.9",
-    "@mui/utils": "^6.1.9",
-    "@mui/x-data-grid": "^7.23.0",
+    "@mui/icons-material": "^7.0.0-rc.0",
+    "@mui/material": "^7.0.0-rc.0",
+    "@mui/material-nextjs": "^7.0.0-rc.0",
+    "@mui/utils": "^7.0.0-rc.0",
+    "@mui/x-data-grid": "^8.0.0-beta.3",
     "@reduxjs/toolkit": "^2.4.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.0",
diff --git a/src/app/[locale]/(home)/page.tsx b/src/app/[locale]/(home)/page.tsx
index 928aa8c..6958bbe 100644
--- a/src/app/[locale]/(home)/page.tsx
+++ b/src/app/[locale]/(home)/page.tsx
@@ -3,7 +3,6 @@ import { JobDetailsCard } from "@/components/job-details-card/job-details-card";
 import { Location } from "@/components/location-card/location-card";
 import { SocialLinks } from "@/components/social-links";
 import { TechnologyList } from "@/components/technology-list";
-import { TitleWithColor } from "@/components/title-with-color";
 import { LocationOn } from "@mui/icons-material";
 import { Divider, Stack, Typography } from "@mui/material";
 import type { Metadata } from "next";
@@ -70,7 +69,10 @@ export default async function Page(props: {
 					>
 						<h3 className="text-4xl md:text-6xl font-bold">
 							{t("presentation.title")} <br />
-							<TitleWithColor>Revolution</TitleWithColor>.
+							<span className="text-4xl md:text-6xl font-bold text-primary">
+								Revolution
+							</span>
+							.
 						</h3>
 						<h2 className="text-4xl md:text-6xl font-bold">👋</h2>
 					</Stack>
diff --git a/src/app/[locale]/(home)/projects/page.tsx b/src/app/[locale]/(home)/projects/page.tsx
index 75fde06..51b5c90 100644
--- a/src/app/[locale]/(home)/projects/page.tsx
+++ b/src/app/[locale]/(home)/projects/page.tsx
@@ -114,7 +114,7 @@ export default async function ProjectsPage(props: {
 														{repo.language}
 													</Typography>
 													<Grid container spacing={1} alignItems="center">
-														<Grid item>
+														<Grid>
 															<Stack
 																direction="row"
 																spacing={1}
@@ -129,7 +129,7 @@ export default async function ProjectsPage(props: {
 																</Typography>
 															</Stack>
 														</Grid>
-														<Grid item>
+														<Grid>
 															<Stack
 																direction="row"
 																spacing={1}
diff --git a/src/components/job-details-card/job-details-card.tsx b/src/components/job-details-card/job-details-card.tsx
index 169ed99..5c58032 100644
--- a/src/components/job-details-card/job-details-card.tsx
+++ b/src/components/job-details-card/job-details-card.tsx
@@ -1,4 +1,3 @@
-import { Circle } from "@/components/circle";
 import {
 	JobContainer,
 	JobItem,
@@ -50,7 +49,7 @@ const Item: FC<PropsWithChildren<JobDetailsCardItemProps>> = ({
 						alignItems="center"
 						sx={{ padding: 2 }}
 					>
-						<Circle />
+						<span className="w-2 h-2 rounded-full bg-primary" />
 						<Typography variant="body1" className="opacity-60">
 							{position}
 						</Typography>
diff --git a/src/components/title-with-color.tsx b/src/components/title-with-color.tsx
deleted file mode 100644
index 9287822..0000000
--- a/src/components/title-with-color.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-"use client";
-import { useTheme } from "@mui/material/styles";
-import type { PropsWithChildren } from "react";
-
-export const TitleWithColor = ({ children, ...props }: PropsWithChildren) => {
-	const theme = useTheme();
-
-	return (
-		<span
-			className="text-4xl md:text-6xl font-bold"
-			{...props}
-			style={{
-				color: theme.palette.primary.main,
-			}}
-		>
-			{children}
-		</span>
-	);
-};
diff --git a/src/templates/navbar/navbar.tsx b/src/templates/navbar/navbar.tsx
index 52fce27..0bf4aab 100644
--- a/src/templates/navbar/navbar.tsx
+++ b/src/templates/navbar/navbar.tsx
@@ -31,19 +31,19 @@ const Navbar: FC<PropsWithChildren> & Extensions = ({ children }) => {
 	return (
 		<>
 			<nav className="my-5 hidden md:block">
-				<Stack direction="row">
+				<Stack direction="row" justifyContent="space-between">
 					<Stack direction="row" spacing={2}>
 						{children}
 					</Stack>
 
 					<Grid container justifyContent="flex-end" spacing={2}>
-						<Grid item>
+						<Grid>
 							<SpotifyWatcher />
 						</Grid>
-						<Grid item>
+						<Grid>
 							<ToggleThemeButton />
 						</Grid>
-						<Grid item>
+						<Grid>
 							<LanguageSwitch />
 						</Grid>
 					</Grid>
@@ -55,7 +55,7 @@ const Navbar: FC<PropsWithChildren> & Extensions = ({ children }) => {
 					<Toolbar>
 						<MenuButton />
 						<Grid container justifyContent="flex-end">
-							<Grid item>
+							<Grid>
 								<SpotifyWatcher />
 							</Grid>
 						</Grid>
diff --git a/src/theme/theme-colors.ts b/src/theme/theme-colors.ts
index 17ed8a4..6753120 100644
--- a/src/theme/theme-colors.ts
+++ b/src/theme/theme-colors.ts
@@ -1,8 +1,11 @@
 "use client";
 
-import { extendTheme } from "@mui/material/styles";
+import { createTheme } from "@mui/material/styles";
 
-export const theme = extendTheme({
+export const theme = createTheme({
+	cssVariables: {
+		colorSchemeSelector: "class",
+	},
 	colorSchemes: {
 		light: {
 			palette: {
diff --git a/src/theme/theme-registry.tsx b/src/theme/theme-registry.tsx
index 0a59a38..9069538 100644
--- a/src/theme/theme-registry.tsx
+++ b/src/theme/theme-registry.tsx
@@ -1,5 +1,5 @@
 import { theme } from "@/theme/theme-colors";
-import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
+import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 import CssBaseline from "@mui/material/CssBaseline";
 import { Experimental_CssVarsProvider as CssVarsProvider } from "@mui/material/styles";
 import InitColorSchemeScript from "@mui/system/InitColorSchemeScript";