diff --git a/web/src/app/maps/[mapId]/page.tsx b/web/src/app/maps/[mapId]/page.tsx
index 6737f67..6afe389 100644
--- a/web/src/app/maps/[mapId]/page.tsx
+++ b/web/src/app/maps/[mapId]/page.tsx
@@ -4,8 +4,8 @@ import { MapInfo } from "@/app/ts/Map";
 import { MapImage } from "./_mapImage";
 import Webpage from "@/app/_components/webpage";
 import { useParams } from "next/navigation";
-import Link from "next/link";
 import { useState, useEffect } from "react";
+import Link from "next/link";
 
 // MUI Components
 import {
@@ -14,7 +14,10 @@ import {
   Button as MuiButton,
   Card,
   CardContent,
-  Skeleton
+  Skeleton,
+  ThemeProvider,
+  createTheme,
+  CssBaseline
 } from "@mui/material";
 
 interface ButtonProps {
@@ -32,6 +35,12 @@ function Button({ name, href }: ButtonProps) {
   );
 }
 
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
 export default function Map() {
   const { mapId } = useParams();
   const [map, setMap] = useState<MapInfo | null>(null);
@@ -47,45 +56,48 @@ export default function Map() {
   }, [mapId]);
 
   return (
-    <Webpage>
-      {!map ? (
-        <Card>
-          <CardContent>
-            <Skeleton variant="text" width={200} height={40} />
-            <Skeleton variant="text" width={300} />
-            <Skeleton variant="rectangular" height={200} />
-          </CardContent>
-        </Card>
-      ) : (
-        <Box display="flex" flexDirection={{ xs: "column", md: "row" }} gap={4}>
-          <Box flex={1}>
-            <Card>
-              <CardContent>
-                <Typography variant="h5" gutterBottom>
-                  Map Info
-                </Typography>
-                <Typography variant="body1"><strong>Map ID:</strong> {mapId}</Typography>
-                <Typography variant="body1"><strong>Display Name:</strong> {map.DisplayName}</Typography>
-                <Typography variant="body1"><strong>Creator:</strong> {map.Creator}</Typography>
-                <Typography variant="body1"><strong>Game ID:</strong> {map.GameID}</Typography>
-                <Typography variant="body1"><strong>Release Date:</strong> {new Date(map.Date * 1000).toLocaleString()}</Typography>
-                <Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
-              </CardContent>
-            </Card>
-          </Box>
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <Webpage>
+        {!map ? (
+          <Card>
+            <CardContent>
+              <Skeleton variant="text" width={200} height={40} />
+              <Skeleton variant="text" width={300} />
+              <Skeleton variant="rectangular" height={200} />
+            </CardContent>
+          </Card>
+        ) : (
+          <Box display="flex" flexDirection={{ xs: "column", md: "row" }} gap={4}>
+            <Box flex={1}>
+              <Card>
+                <CardContent>
+                  <Typography variant="h5" gutterBottom>
+                    Map Info
+                  </Typography>
+                  <Typography variant="body1"><strong>Map ID:</strong> {mapId}</Typography>
+                  <Typography variant="body1"><strong>Display Name:</strong> {map.DisplayName}</Typography>
+                  <Typography variant="body1"><strong>Creator:</strong> {map.Creator}</Typography>
+                  <Typography variant="body1"><strong>Game ID:</strong> {map.GameID}</Typography>
+                  <Typography variant="body1"><strong>Release Date:</strong> {new Date(map.Date * 1000).toLocaleString()}</Typography>
+                  <Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`} />
+                </CardContent>
+              </Card>
+            </Box>
 
-          <Box flex={1}>
-            <Card>
-              <CardContent>
-                <Typography variant="h6" gutterBottom>
-                  Map Preview
-                </Typography>
-                <MapImage id={map.ID} />
-              </CardContent>
-            </Card>
+            <Box flex={1}>
+              <Card>
+                <CardContent>
+                  <Typography variant="h6" gutterBottom>
+                    Map Preview
+                  </Typography>
+                  <MapImage id={map.ID} />
+                </CardContent>
+              </Card>
+            </Box>
           </Box>
-        </Box>
-      )}
-    </Webpage>
+        )}
+      </Webpage>
+    </ThemeProvider>
   );
 }