diff --git a/web/src/app/_components/comments/CommentItem.tsx b/web/src/app/_components/comments/CommentItem.tsx
index 1558609..475aa8f 100644
--- a/web/src/app/_components/comments/CommentItem.tsx
+++ b/web/src/app/_components/comments/CommentItem.tsx
@@ -52,7 +52,7 @@ export default function CommentItem({ event, validatorUser }: CommentItemProps)
                     </Typography>
                     <DateDisplay date={event.Date} />
                 </Box>
-                <Typography variant="body2">{decodeAuditEvent(event)}</Typography>
+                <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{decodeAuditEvent(event)}</Typography>
             </Box>
         </Box>
     );
diff --git a/web/src/app/_components/mapCard.tsx b/web/src/app/_components/mapCard.tsx
index f52596d..a6cdc29 100644
--- a/web/src/app/_components/mapCard.tsx
+++ b/web/src/app/_components/mapCard.tsx
@@ -3,6 +3,7 @@ import {Explore, Person2} from "@mui/icons-material";
 import {StatusChip} from "@/app/_components/statusChip";
 import {Link} from "react-router-dom";
 import {useAssetThumbnail, useUserThumbnail} from "@/app/hooks/useThumbnails";
+import {useUsername} from "@/app/hooks/useUsername";
 
 interface MapCardProps {
 	displayName: string;
@@ -20,6 +21,7 @@ interface MapCardProps {
 export function MapCard(props: MapCardProps) {
 	const { thumbnailUrl: assetThumbnail, isLoading: assetLoading } = useAssetThumbnail(props.assetId);
 	const { thumbnailUrl: userThumbnail, isLoading: userLoading } = useUserThumbnail(props.authorId);
+	const { username, isLoading: usernameLoading } = useUsername(props.type === 'mapfix' ? props.authorId : undefined);
 
 	return (
 		<Card sx={{ height: '100%' }}>
@@ -100,18 +102,22 @@ export function MapCard(props: MapCardProps) {
 									</Box>
 									<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
 										<Person2 sx={{ fontSize: '1rem', color: '#8b5cf6' }} />
-										<Typography
-											variant="body2"
-											color="text.secondary"
-											fontSize="0.875rem"
-											sx={{
-												overflow: 'hidden',
-												textOverflow: 'ellipsis',
-												whiteSpace: 'nowrap',
-											}}
-										>
-											{props.author}
-										</Typography>
+										{props.type === 'mapfix' && usernameLoading ? (
+											<Skeleton variant="text" width={80} />
+										) : (
+											<Typography
+												variant="body2"
+												color="text.secondary"
+												fontSize="0.875rem"
+												sx={{
+													overflow: 'hidden',
+													textOverflow: 'ellipsis',
+													whiteSpace: 'nowrap',
+												}}
+											>
+												{props.type === 'mapfix' && username ? `@${username}` : props.author}
+											</Typography>
+										)}
 									</Box>
 								</Box>
 							</Box>
diff --git a/web/src/app/globals.scss b/web/src/app/globals.scss
index 9534a49..b53e547 100644
--- a/web/src/app/globals.scss
+++ b/web/src/app/globals.scss
@@ -8,39 +8,23 @@ $form-label-fontsize: 1.3rem;
 }
 
 :root {
-	color-scheme: light dark;
+	color-scheme: dark;
 
 	--header-height: 45px;
 
-	--page:                white;
+	--page:                rgb(15,15,15);
 	--header-grad-left:    #363b40;
 	--header-grad-right:   #353a40;
 	--header-button-left:  white;
 	--header-button-right: #b4b4b4;
 	--header-button-hover: white;
-	--review-border:       #c8c8c8;
-	--text-color:          #1e1e1e;
+	--review-border:       rgb(50,50,50);
+	--text-color:          rgb(230,230,230);
 	--anchor-link-review:  #008fd6;
-	--window-header:       #f5f5f5;
+	--window-header:       rgb(10,10,10);
 	--comment-highlighted: #ffffd7;
-	--comment-area:        white;
-	--placeholder-text:    rgb(150,150,150);
-
-	@media (prefers-color-scheme: dark) {
-		--page:                rgb(15,15,15);
-		--header-grad-left:    #363b40;
-		--header-grad-right:   #353a40;
-		--header-button-left:  white;
-		--header-button-right: #b4b4b4;
-		--header-button-hover: white;
-		--review-border:       rgb(50,50,50);
-		--text-color:          rgb(230,230,230);
-		--anchor-link-review:  #008fd6;
-		--window-header:       rgb(10,10,10);
-		--comment-highlighted: #ffffd7;
-		--comment-area:        rgb(20,20,20);
-		--placeholder-text:    rgb(80,80,80);
-	}
+	--comment-area:        rgb(20,20,20);
+	--placeholder-text:    rgb(80,80,80);
 }
 
 body {
diff --git a/web/src/app/lib/theme.tsx b/web/src/app/lib/theme.tsx
index f4f16e6..079d60d 100644
--- a/web/src/app/lib/theme.tsx
+++ b/web/src/app/lib/theme.tsx
@@ -1,6 +1,13 @@
 import {createTheme} from "@mui/material";
 
 export const theme = createTheme({
+    cssVariables: {
+        colorSchemeSelector: 'class',
+    },
+    colorSchemes: {
+        dark: true,
+    },
+    defaultColorScheme: 'dark',
     palette: {
         mode: 'dark',
         primary: {
diff --git a/web/src/app/maps/page.tsx b/web/src/app/maps/page.tsx
index 266f0e0..8cd1eaf 100644
--- a/web/src/app/maps/page.tsx
+++ b/web/src/app/maps/page.tsx
@@ -1,5 +1,4 @@
 import {useState, useEffect} from "react";
-import {useNavigate} from "react-router-dom";
 import Webpage from "@/app/_components/webpage";
 import {
     Box,
@@ -37,7 +36,6 @@ interface Map {
 
 interface MapCardProps {
     map: Map;
-    onClick: (mapId: number) => void;
     formatDate: (timestamp: number) => string;
     getGameName: (gameId: number) => string;
     getGameLabelStyles: (gameId: number) => {
@@ -46,7 +44,7 @@ interface MapCardProps {
     };
 }
 
-function MapCard({ map, onClick, formatDate, getGameName, getGameLabelStyles }: MapCardProps) {
+function MapCard({ map, formatDate, getGameName, getGameLabelStyles }: MapCardProps) {
     const { thumbnailUrl, isLoading } = useAssetThumbnail(map.ID, '420x420');
 
     return (
@@ -63,7 +61,7 @@ function MapCard({ map, onClick, formatDate, getGameName, getGameLabelStyles }:
                 }
             }}
         >
-            <CardActionArea onClick={() => onClick(map.ID)}>
+            <CardActionArea component={Link} to={`/maps/${map.ID}`}>
                 <Box sx={{ position: 'relative', overflow: 'hidden' }}>
                     <Skeleton
                         variant="rectangular"
@@ -127,7 +125,6 @@ function MapCard({ map, onClick, formatDate, getGameName, getGameLabelStyles }:
 export default function MapsPage() {
     useTitle("Map Collection");
 
-    const navigate = useNavigate();
     const [maps, setMaps] = useState<Map[]>([]);
     const [loading, setLoading] = useState(true);
     const [searchQuery, setSearchQuery] = useState("");
@@ -200,10 +197,6 @@ export default function MapsPage() {
         window.scrollTo({top: 0, behavior: 'smooth'});
     };
 
-    const handleMapClick = (mapId: number) => {
-        navigate(`/maps/${mapId}`);
-    };
-
     const formatDate = (timestamp: number) => {
         return new Date(timestamp * 1000).toLocaleDateString('en-US', {
             year: 'numeric',
@@ -340,7 +333,6 @@ export default function MapsPage() {
                                     <Grid size={{ xs: 12, sm: 6, md: 4}} key={map.ID}>
                                         <MapCard
                                             map={map}
-                                            onClick={handleMapClick}
                                             formatDate={formatDate}
                                             getGameName={getGameName}
                                             getGameLabelStyles={getGameLabelStyles}