diff --git a/bun.lockb b/bun.lockb
index dff4b44..912cee3 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 2ee55d2..4b6cf40 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.12",
+    "@mui/icons-material": "^5.15.12",
+    "@mui/material": "^5.15.12",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.17",
     "@tanstack/react-router": "^1.18.3",
     "@tanstack/router-vite-plugin": "^1.18.1",
     "autoprefixer": "^10.4.18",
+    "install": "^0.13.0",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8",
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
diff --git a/src/app/App.tsx b/src/app/App.tsx
index a2d41b4..52b657b 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,6 +1,12 @@
 import { routeTree } from "@/routeTree.gen";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 
+import "./globals.css";
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+
 const router = createRouter({ routeTree });
 
 declare module "@tanstack/react-router" {
diff --git a/src/index.css b/src/app/globals.css
similarity index 100%
rename from src/index.css
rename to src/app/globals.css
diff --git a/src/main.tsx b/src/main.tsx
index b8255e2..721440c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,3 @@
-import "./index.css";
 import App from "./app/App.tsx";
 
 import React from "react";