diff --git a/web/src/app/maps/[mapId]/page.tsx b/web/src/app/maps/[mapId]/page.tsx
index 4674447..6737f67 100644
--- a/web/src/app/maps/[mapId]/page.tsx
+++ b/web/src/app/maps/[mapId]/page.tsx
@@ -7,51 +7,85 @@ import { useParams } from "next/navigation";
 import Link from "next/link";
 import { useState, useEffect } from "react";
 
-interface Button {
-	name: string,
-	href: string,
+// MUI Components
+import {
+  Typography,
+  Box,
+  Button as MuiButton,
+  Card,
+  CardContent,
+  Skeleton
+} from "@mui/material";
+
+interface ButtonProps {
+  name: string;
+  href: string;
 }
-function Button(button: Button) {
-	return (
-		<Link href={button.href}>
-			<button>{button.name}</button>
-		</Link>
-	)
+
+function Button({ name, href }: ButtonProps) {
+  return (
+    <Link href={href} passHref>
+      <MuiButton variant="contained" color="primary" sx={{ mt: 2 }}>
+        {name}
+      </MuiButton>
+    </Link>
+  );
 }
 
 export default function Map() {
-	const {mapId} = useParams()
+  const { mapId } = useParams();
+  const [map, setMap] = useState<MapInfo | null>(null);
 
-  const [map, setMap] = useState<MapInfo | null>(null)
+  useEffect(() => {
+    async function getMap() {
+      const res = await fetch(`/api/maps/${mapId}`);
+      if (res.ok) {
+        setMap(await res.json());
+      }
+    }
+    getMap();
+  }, [mapId]);
 
-	useEffect(() => { // needs to be client sided since server doesn't have a session, nextjs got mad at me for exporting an async function: (https://nextjs.org/docs/messages/no-async-client-component)
-		async function getMap() {
-			const res = await fetch(`/api/maps/${mapId}`)
-			if (res.ok) {
-				setMap(await res.json())
-			}
-		}
-      getMap()
-	}, [mapId])
-
-	if (!map) {
-		return <Webpage>
-			{/* TODO: Add skeleton loading thingy ? Maybe ? (https://mui.com/material-ui/react-skeleton/) */}
-		</Webpage>
-	}
   return (
-      <Webpage>
-	      <p>MapID: { mapId }</p>
-	      <p>Display Name: { map.DisplayName }</p>
-	      <p>Creator: { map.Creator }</p>
-	      <p>GameID: { map.GameID }</p>
-	      <p>Release Date: { new Date(map.Date * 1000).toLocaleString() }</p>
-	      <Button name="Submit A Mapfix For This Map" href={`/maps/${mapId}/fix`}/>
-       <aside className="review-area">
-        	<section className="map-image-area">
-         <MapImage id={map.ID}/>
-         	</section>
-        </aside>
-      </Webpage>
-	)
+    <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>
+        </Box>
+      )}
+    </Webpage>
+  );
 }