diff --git a/package-lock.json b/package-lock.json
index 697f093e..038d7e3c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -766,6 +766,126 @@
 				"glob": "10.3.10"
 			}
 		},
+		"node_modules/@next/swc-darwin-arm64": {
+			"version": "14.2.14",
+			"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.14.tgz",
+			"integrity": "sha512-bsxbSAUodM1cjYeA4o6y7sp9wslvwjSkWw57t8DtC8Zig8aG8V6r+Yc05/9mDzLKcybb6EN85k1rJDnMKBd9Gw==",
+			"cpu": [
+				"arm64"
+			],
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-darwin-x64": {
+			"version": "14.2.14",
+			"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.14.tgz",
+			"integrity": "sha512-cC9/I+0+SK5L1k9J8CInahduTVWGMXhQoXFeNvF0uNs3Bt1Ub0Azb8JzTU9vNCr0hnaMqiWu/Z0S1hfKc3+dww==",
+			"cpu": [
+				"x64"
+			],
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-linux-arm64-gnu": {
+			"version": "14.2.14",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.14.tgz",
+			"integrity": "sha512-RMLOdA2NU4O7w1PQ3Z9ft3PxD6Htl4uB2TJpocm+4jcllHySPkFaUIFacQ3Jekcg6w+LBaFvjSPthZHiPmiAUg==",
+			"cpu": [
+				"arm64"
+			],
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-linux-arm64-musl": {
+			"version": "14.2.14",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.14.tgz",
+			"integrity": "sha512-WgLOA4hT9EIP7jhlkPnvz49iSOMdZgDJVvbpb8WWzJv5wBD07M2wdJXLkDYIpZmCFfo/wPqFsFR4JS4V9KkQ2A==",
+			"cpu": [
+				"arm64"
+			],
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-linux-x64-gnu": {
+			"version": "14.2.14",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.14.tgz",
+			"integrity": "sha512-lbn7svjUps1kmCettV/R9oAvEW+eUI0lo0LJNFOXoQM5NGNxloAyFRNByYeZKL3+1bF5YE0h0irIJfzXBq9Y6w==",
+			"cpu": [
+				"x64"
+			],
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-linux-x64-musl": {
+			"version": "14.2.14",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.14.tgz",
+			"integrity": "sha512-7TcQCvLQ/hKfQRgjxMN4TZ2BRB0P7HwrGAYL+p+m3u3XcKTraUFerVbV3jkNZNwDeQDa8zdxkKkw2els/S5onQ==",
+			"cpu": [
+				"x64"
+			],
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-win32-arm64-msvc": {
+			"version": "14.2.14",
+			"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.14.tgz",
+			"integrity": "sha512-8i0Ou5XjTLEje0oj0JiI0Xo9L/93ghFtAUYZ24jARSeTMXLUx8yFIdhS55mTExq5Tj4/dC2fJuaT4e3ySvXU1A==",
+			"cpu": [
+				"arm64"
+			],
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-win32-ia32-msvc": {
+			"version": "14.2.14",
+			"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.14.tgz",
+			"integrity": "sha512-2u2XcSaDEOj+96eXpyjHjtVPLhkAFw2nlaz83EPeuK4obF+HmtDJHqgR1dZB7Gb6V/d55FL26/lYVd0TwMgcOQ==",
+			"cpu": [
+				"ia32"
+			],
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
 		"node_modules/@next/swc-win32-x64-msvc": {
 			"version": "14.2.14",
 			"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.14.tgz",
diff --git a/src/app/_components/HomePage/HomePageTypes.ts b/src/app/_components/HomePage/HomePageTypes.ts
index a9a50733..6a64e475 100644
--- a/src/app/_components/HomePage/HomePageTypes.ts
+++ b/src/app/_components/HomePage/HomePageTypes.ts
@@ -4,7 +4,6 @@ export interface HexagonProps {
 
 export interface GameInProgressPlayerProps {
 	playerImage: string;
-	hexagonColors: string[];
 }
 
 export interface PublicGameInProgressProps {
diff --git a/src/app/_components/HomePage/News/News.tsx b/src/app/_components/HomePage/News/News.tsx
index f1d7ea1e..c3c8ba4e 100644
--- a/src/app/_components/HomePage/News/News.tsx
+++ b/src/app/_components/HomePage/News/News.tsx
@@ -6,40 +6,26 @@ import { articles } from "@/app/_constants/mockData";
 const NewsColumn: React.FC = () => {;
 
 	const styles = {
-		notice: {
-			mb: "1rem",
-			height:"auto", 
-			overflow: "visible",
-		},
-		newsBox: {
+		box: {
 			display: "flex",
 			flexDirection: "column",
+			alignItems: "center",
 			height: "100%",
 		},
-		newsList: {
-			"::-webkit-scrollbar": {
-				width: "0.2vw",
-			},
-			"::-webkit-scrollbar-thumb": {
-				backgroundColor: "#D3D3D3B3",
-				borderRadius: "1vw",
-			},
-			"::-webkit-scrollbar-button": {
-				display: "none",
-			},
-			transition: "scrollbar-color 0.3s ease-in-out",
-			overflowY: "scroll",
+		notice: {
+			mb: "1.5rem",
+			overflow:"visible",
 		},
-		boxStyle: {
-			display: "flex",
-			flexDirection: "column",
-			alignItems: "center",
+		boxNews: {
 			height: "100%",
+			scrollbarColor: "#888888 rgba(0, 0, 0, 0)",
+  			scrollbarWidth: "thin",
 		},
 	};
 
 	return (
-		<Box sx={styles.boxStyle}>
+		<Box sx={styles.box}>
+
 			<Card variant="blue" sx={styles.notice}>
 				<CardContent>
 					<Typography variant="bodyBold">Karabast is an open-source, fan-made platform.</Typography>
@@ -48,19 +34,19 @@ const NewsColumn: React.FC = () => {;
 				</CardContent>
 			</Card>
 
-			{/* Bottom Card: Scrollable and displays NewsItem */}
-			<Card variant="black" sx={styles.newsBox}>
+			<Card variant="black" sx={styles.boxNews}>
 				<Box>
 					<Typography variant="h2">
 						News
 					</Typography>
 				</Box>
-				<Box sx={styles.newsList}>
+				<Box>
 					{articles.map((article, index) => (
 						<NewsItem article={article} key={index} />
 					))}
 				</Box>
 			</Card>
+
 		</Box>
 	);
 };
diff --git a/src/app/_components/HomePage/PublicGames/PublicGames.tsx b/src/app/_components/HomePage/PublicGames/PublicGames.tsx
index 8b85a557..dfd50e83 100644
--- a/src/app/_components/HomePage/PublicGames/PublicGames.tsx
+++ b/src/app/_components/HomePage/PublicGames/PublicGames.tsx
@@ -5,37 +5,37 @@ import GamesInProgress from "../_subcomponents/GamesInProgress/GamesInProgress";
 import { PublicGamesProps } from "../HomePageTypes";
 
 const PublicGames: React.FC<PublicGamesProps> = ({ format }) => {
-	//------------------------STYLES------------------------//
 
-
-	const PublicGamesWrapper = {
-		height: "100%",
-	  };
-
-	const cardContentStyle = {
-		display: "flex",
-		flexDirection: "column",
-		justifyContent: "center",
-	};
-
-	const dividerStyle = {
-		backgroundColor: "#fff",
-		my: ".7em",
+	const styles = {
+		publicGamesWrapper: {
+			height: "100%",
+			scrollbarColor: "#888888 rgba(0, 0, 0, 0)",
+			scrollbarWidth: "thin",
+		},
+		cardContent: {
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "center",
+		},
+		divider: {
+		 	 backgroundColor: "#fff",
+		  	my: ".7em",
+		},
 	};
 
 	return (
-		<Card variant="black" sx={PublicGamesWrapper}>
-			<CardContent sx={cardContentStyle}>
+		<Card variant="black" sx={styles.publicGamesWrapper}>
+			<CardContent sx={styles.cardContent}>
 				<Typography variant="h2">Public Games</Typography>
 				<Typography variant="h3">{format}</Typography>
-				<Divider sx={dividerStyle} />
+				<Divider sx={styles.divider} />
 				<JoinableGame />
 				<JoinableGame />
 				<JoinableGame />
 				<Typography variant="h3">
 					Request-Undo {format}
 				</Typography>
-				<Divider sx={dividerStyle} />
+				<Divider sx={styles.divider} />
 				<JoinableGame />
 				<GamesInProgress />
 			</CardContent>
diff --git a/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx b/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx
index e4fe3f5d..8224acd1 100644
--- a/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx
+++ b/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx
@@ -1,10 +1,8 @@
 import { Box } from "@mui/material";
-import Hexagon from "../Hexagon/Hexagon";
 import { GameInProgressPlayerProps } from "../../HomePageTypes";
 
 const GameInProgressPlayer: React.FC<GameInProgressPlayerProps> = ({
 	playerImage,
-	hexagonColors,
 }) => {
 	//------------------------STYLES------------------------//
 
@@ -17,14 +15,6 @@ const GameInProgressPlayer: React.FC<GameInProgressPlayerProps> = ({
 		display: "flex",
 	};
 
-	const hexagonsContainerStyle = {
-		display: "flex",
-		flexDirection: "column",
-		justifyContent: "center",
-		alignItems: "center",
-		ml: ".3vw",
-	};
-
 	const boxStyle = {
 		display: "flex",
 	};
diff --git a/src/app/_components/HomePage/_subcomponents/GamesInProgress/GamesInProgress.tsx b/src/app/_components/HomePage/_subcomponents/GamesInProgress/GamesInProgress.tsx
index fe647420..6b113360 100644
--- a/src/app/_components/HomePage/_subcomponents/GamesInProgress/GamesInProgress.tsx
+++ b/src/app/_components/HomePage/_subcomponents/GamesInProgress/GamesInProgress.tsx
@@ -8,49 +8,31 @@ const GamesInProgress: React.FC = () => {
 	const randomGamesInProgress =
 		Math.floor(Math.random() * 9 * twoOrThreeDigits) + twoOrThreeDigits;
 
-	//------------------------STYLES------------------------//
-
-	const headerBoxStyle = {
-		position: "sticky",
-		top: 0,
-		zIndex: 1,
-		display: "flex",
-		justifyContent: "space-between",
-		alignItems: "flex-end",
-		alignContent: "center",
-		mt: 1,
-	};
-
-	const dividerStyle = {
-		mt: ".5vh",
-		mb: "1vh",
-	};
-
-	const scrollableBoxStyle = {
-		overflowY: "auto",
-		mb: ".5em",
-		pr: ".5em",
-		"::-webkit-scrollbar": {
-			width: "0.2vw",
+	const styles = {
+		headerBox: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "flex-end",
+			alignContent: "center",
+			mt: 1,
 		},
-		"::-webkit-scrollbar-thumb": {
-			backgroundColor: "#D3D3D3B3",
-			borderRadius: "1vw",
+		divider: {
+			mt: ".5vh",
+			mb: "1vh",
 		},
-		"::-webkit-scrollbar-button": {
-			display: "none",
+		activeGamesNumber: {
+			fontWeight: 400,
 		},
-		transition: "scrollbar-color 0.3s ease-in-out",
 	};
 
 	return (
 		<>
-			<Box sx={headerBoxStyle}>
+			<Box sx={styles.headerBox}>
 				<Typography variant="h3">Games in Progress</Typography>
-				<Typography variant="h3">{randomGamesInProgress}</Typography>
+				<Typography variant="h3" sx={styles.activeGamesNumber}>{randomGamesInProgress}</Typography>
 			</Box>
-			<Divider sx={dividerStyle} />
-			<Box sx={scrollableBoxStyle}>
+		<Divider sx={styles.divider} />
+			<Box>
 				{playerMatches.map((match, index) => (
 					<PublicMatch key={index} match={match} />
 				))}
diff --git a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
index 206b1793..bacd238b 100644
--- a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
+++ b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
@@ -6,25 +6,23 @@ const JoinableGame: React.FC = () => {
 
 	//------------------------STYLES------------------------//
 
-	const boxStyle = {
-		width: "100%",
-		display: "flex",
-		justifyContent: "space-between",
-		alignContent: "center",
-		alignItems: "center",
-		mb: ".5em",
-		pr: ".5em",
-	};
-
-	const typographyStyle = {
-		fontFamily: "var(--font-barlow), sans-serif",
-		fontSize: "1.5em",
-		color: "#fff",
+	const styles = {
+		box: {
+			width: "100%",
+			display: "flex",
+			justifyContent: "space-between",
+			alignContent: "center",
+			alignItems: "center",
+			mb: "1rem",
+		},
+		matchType: {
+		  	margin: 0,
+		},
 	};
 
 	return (
-		<Box sx={boxStyle}>
-			<Typography variant="body1">Game #{randomGameId}</Typography>
+		<Box sx={styles.box}>
+			<Typography variant="body1" sx={styles.matchType}>Game #{randomGameId}</Typography>
 			<Button>Join Game</Button>
 		</Box>
 	);
diff --git a/src/app/_components/HomePage/_subcomponents/NewsItem/NewsItem.tsx b/src/app/_components/HomePage/_subcomponents/NewsItem/NewsItem.tsx
index 898ac076..bd2c82db 100644
--- a/src/app/_components/HomePage/_subcomponents/NewsItem/NewsItem.tsx
+++ b/src/app/_components/HomePage/_subcomponents/NewsItem/NewsItem.tsx
@@ -11,29 +11,24 @@ import parse from "html-react-parser";
 
 const NewsItem: React.FC<NewsItemProps> = ({ article }) => {
 
-	const boxStyle = {
-		display: "flex",
-		justifyContent: "space-between",
-		alignItems: "flex-end",
-		mt: 1,
-	};
-
-	const dividerStyle = {
-		mt: ".5vh",
-		mb: "1vh",
-	};
-
-	const contentTextStyle = {
-		color: "#fff",
-		textAlign: "left",
-		fontSize: "1em",
-		fontFamily: "var(--font-barlow), sans-serif",
-		fontWeight: "400",
-	};
-
-	const newsImageStyle = {
-		borderRadius: ".5vw",
-	};
+	const styles = {
+		box: {
+		  display: "flex",
+		  justifyContent: "space-between",
+		  alignItems: "flex-end",
+		  mt: "1rem",
+		},
+		divider: {
+		  mt: ".5vh",
+		  mb: "1vh",
+		},
+		contentText: {
+		  color: "#fff",
+		},
+		newsImage: {
+			borderRadius: ".5rem",
+		},
+	  };
 
 	return (
 		<>
@@ -42,15 +37,15 @@ const NewsItem: React.FC<NewsItemProps> = ({ article }) => {
 				height="auto"
 				image={article.image}
 				alt={article.imageAlt}
-				sx={newsImageStyle}
+				sx={styles.newsImage}
 			/>
 			<CardContent>
-				<Box sx={boxStyle}>
+				<Box sx={styles.box}>
 				<Typography variant="h3">{article.title}</Typography>
-				<Typography variant="h3">{article.date}</Typography>
+				<Typography variant="h3" sx={{fontWeight:400}}>{article.date}</Typography>
 				</Box>
-				<Divider sx={dividerStyle} />
-				<Box sx={contentTextStyle} className="news-content">
+				<Divider sx={styles.divider} />
+				<Box sx={styles.contentText} className="news-content">
 				{parse(article.content)}
 				</Box>
 			</CardContent>
diff --git a/src/app/_components/HomePage/_subcomponents/PublicMatch/PublicMatch.tsx b/src/app/_components/HomePage/_subcomponents/PublicMatch/PublicMatch.tsx
index dafabc9d..ba809cd2 100644
--- a/src/app/_components/HomePage/_subcomponents/PublicMatch/PublicMatch.tsx
+++ b/src/app/_components/HomePage/_subcomponents/PublicMatch/PublicMatch.tsx
@@ -4,31 +4,36 @@ import GameInProgressPlayer from "../GameInProgressPlayer/GameInProgressPlayer";
 import { PublicGameInProgressProps } from "../../HomePageTypes";
 
 const PublicMatch: React.FC<PublicGameInProgressProps> = ({ match }) => {
-	//------------------------STYLES------------------------//
 
-	const boxStyle = {
-		width: "100%",
-		display: "flex",
-		justifyContent: "space-between",
-		alignContent: "center",
-		alignItems: "center",
-		mb: "1rem",
+	const styles = {
+		box: {
+			width: "100%",
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center",
+			mb: "1rem",
+		},
+		matchItems: {
+			display: "flex",
+			alignItems: "center",
+			gap: "1rem",
+		},
+		matchType: {
+			margin: 0,
+		},
 	};
 
 	return (
-		<Box sx={boxStyle}>
-			<GameInProgressPlayer
-				playerImage={match.player1.playerImage}
-				hexagonColors={match.player1.hexagonColors}
-			/>
-
-			<Typography variant="body1">vs</Typography>
-
-			<GameInProgressPlayer
-				playerImage={match.player2.playerImage}
-				hexagonColors={match.player2.hexagonColors}
-			/>
-
+		<Box sx={styles.box}>
+			<Box sx={styles.matchItems}>
+				<GameInProgressPlayer
+					playerImage={match.player1.playerImage}
+				/>
+				<Typography variant="body1" sx={styles.matchType}>vs</Typography>
+				<GameInProgressPlayer
+					playerImage={match.player2.playerImage}
+				/>
+			</Box>
 			<Button>Spectate</Button>
 		</Box>
 	);
diff --git a/src/app/_components/_sharedcomponents/Banner/Banner.tsx b/src/app/_components/_sharedcomponents/Banner/Banner.tsx
index a2b0f8dc..92e38770 100644
--- a/src/app/_components/_sharedcomponents/Banner/Banner.tsx
+++ b/src/app/_components/_sharedcomponents/Banner/Banner.tsx
@@ -15,7 +15,7 @@ const KarabastBanner: React.FC = () => {
 	  },
 	  bannerContainerStyle: {
 		position: 'absolute',
-		height: '26vh',
+		height: '316px',
 		width: '100%',
 		display: 'flex',
 		alignItems: 'center',
@@ -24,11 +24,11 @@ const KarabastBanner: React.FC = () => {
 		overflow: 'hidden',
 	  },
 	  textBoxStyle: {
-		position: 'relative',
+		position: 'absolute',
+		top: 0,
+		margin: '2rem 0 0 1rem',
 		width: '20%',
 		zIndex: 10,
-		marginBottom: '7em',
-		marginLeft: '1em',
 	  },
 	  homeBanner: {
 		width: 'calc(100% - 240px)',
@@ -48,7 +48,7 @@ const KarabastBanner: React.FC = () => {
 		flex: 1,
 	  },
 	  block1: {
-		backgroundImage: `url(${s3ImageURL("ui/leia-banner.webp")})`,
+		backgroundImage: 'url(/leia-sor.jpg)',
 		marginRight: '-152px',
 		'@media (max-width:800px)': { marginRight: 0, },
 	  },
diff --git a/src/app/_components/_sharedcomponents/ControlHub/ControlHub.tsx b/src/app/_components/_sharedcomponents/ControlHub/ControlHub.tsx
index 09525c53..00eb3334 100644
--- a/src/app/_components/_sharedcomponents/ControlHub/ControlHub.tsx
+++ b/src/app/_components/_sharedcomponents/ControlHub/ControlHub.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Divider, IconButton, Typography } from "@mui/material";
 import { Settings, Menu, ArrowBackIosNew, GitHub } from "@mui/icons-material";
-import { FaDiscord, FaPatreon } from "react-icons/fa6";
+import { FaDiscord, } from "react-icons/fa6";
 import { useRouter } from "next/navigation";
 import NextLinkMui from "./_subcomponents/NextLinkMui/NextLinkMui";
 import { ControlHubProps } from "./ControlHubTypes";
@@ -25,9 +25,7 @@ const ControlHub: React.FC<ControlHubProps> = ({
 		}
 	};
 
-	// ---------------------- Styles ---------------------- //
-
-	const controlHubStyles = {
+	const styles = {
 		container: (isLobbyView: boolean, isGameboardView: boolean) => ({
 			position: "absolute",
 			top: 10,
@@ -38,14 +36,13 @@ const ControlHub: React.FC<ControlHubProps> = ({
 		}),
 		defaultMainContainer: {
 			display: "flex",
-			gap: 1,
+			gap: 2,
 			alignItems: "center",
 			ml: "1rem",
 		},
 		backButton: {
 			color: "#fff",
 			mt: ".5vh",
-			fontFamily: "var(--font-barlow), sans-serif",
 			fontWeight: "600",
 			fontSize: "1.5rem",
 		},
@@ -59,7 +56,7 @@ const ControlHub: React.FC<ControlHubProps> = ({
 		profileBox: {
 			display: "flex",
 			borderRadius: "50px",
-			backgroundColor: "#000000E6",
+			backgroundColor: "rgb(0, 0, 0, 0.40)",
 			backdropFilter: "blur(20px)",
 			height: "48px",
 			justifyContent: "space-around",
@@ -68,9 +65,9 @@ const ControlHub: React.FC<ControlHubProps> = ({
 			p: "0.5rem 1rem",
 		},
 		profileLink: {
-			fontFamily: "var(--font-barlow), sans-serif",
-			fontWeight: "400",
-			fontSize: "1em",
+			fontWeight: "600",
+			fontSize: "1.2em",
+			p: "0.5rem",
 			textDecoration: "none",
 			color: "#fff",
 			"&:hover": {
@@ -81,28 +78,30 @@ const ControlHub: React.FC<ControlHubProps> = ({
 			display: "flex",
 			height: "48px",
 			borderRadius: "50px 0 0 50px",
-			backgroundColor: "#000000E6",
+			backgroundColor: "rgb(0, 0, 0, 0.40)",
 			backdropFilter: "blur(20px)",
 			alignItems: "center",
-			p: "0.5rem",
+			p: "1rem",
 		},
 		iconButton: {
 			color: "#fff",
 			"&:hover": { color: "#00ffff" },
 		},
-	};
+
+	}
+
 
 	return (
-		<Box sx={controlHubStyles.container(isLobbyView, isGameboardView)}>
+		<Box sx={styles.container(isLobbyView, isGameboardView)}>
 			{isLobbyView ? (
 				<>
 					<IconButton>
 						<ArrowBackIosNew
-							sx={controlHubStyles.backButton}
+							sx={styles.backButton}
 							onClick={handleBack}
 						/>
 					</IconButton>
-					<Typography variant="h5" sx={controlHubStyles.exitText}>
+					<Typography variant="h5" sx={styles.exitText}>
 						EXIT
 					</Typography>
 				</>
@@ -118,39 +117,35 @@ const ControlHub: React.FC<ControlHubProps> = ({
 					)}
 				</>
 			) : (
-				<Box sx={controlHubStyles.defaultMainContainer}>
-					<Box sx={controlHubStyles.profileBox}>
+				<Box sx={styles.defaultMainContainer}>
+					<Box sx={styles.profileBox}>
 						{user ? (
 							<>
-								<NextLinkMui href="/profile" sx={controlHubStyles.profileLink}>
-									PROFILE
+								<NextLinkMui href="/profile" sx={styles.profileLink}>
+									Profile
 								</NextLinkMui>
 								<Divider
 									orientation="vertical"
 									flexItem
 									sx={{ borderColor: "#ffffff4D", mx: 1 }}
 								/>
-								<NextLinkMui
-									href="/"
-									onClick={logout}
-									sx={controlHubStyles.profileLink}
-								>
-									LOG OUT
+								<NextLinkMui href="/" onClick={logout} sx={styles.profileLink}>
+									Log Out
 								</NextLinkMui>
 							</>
 						) : (
-							<NextLinkMui href="/auth" sx={controlHubStyles.profileLink}>
-								LOG IN
+							<NextLinkMui href="/auth" sx={styles.profileLink}>
+								Log In
 							</NextLinkMui>
 						)}
 					</Box>
-					<Box sx={controlHubStyles.socialIconsBox}>
+					<Box sx={styles.socialIconsBox}>
 						<NextLinkMui
 							href="https://discord.com"
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<IconButton sx={controlHubStyles.iconButton}>
+							<IconButton sx={styles.iconButton}>
 								<FaDiscord />
 							</IconButton>
 						</NextLinkMui>
@@ -159,19 +154,10 @@ const ControlHub: React.FC<ControlHubProps> = ({
 							target="_blank"
 							rel="noopener noreferrer"
 						>
-							<IconButton sx={controlHubStyles.iconButton}>
+							<IconButton sx={styles.iconButton}>
 								<GitHub />
 							</IconButton>
 						</NextLinkMui>
-						<NextLinkMui
-							href="https://patreon.com"
-							target="_blank"
-							rel="noopener noreferrer"
-						>
-							<IconButton sx={controlHubStyles.iconButton}>
-								<FaPatreon />
-							</IconButton>
-						</NextLinkMui>
 					</Box>
 				</Box>
 			)}
diff --git a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
index 0f0f59b6..69cc0b71 100644
--- a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
+++ b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
@@ -11,6 +11,7 @@ import {
 	Typography,
 	Radio,
 	RadioGroup,
+	Link,
 } from "@mui/material";
 import StyledTextField from "../_styledcomponents/StyledTextField/StyledTextField";
 import { usePathname, useRouter } from "next/navigation";
@@ -46,65 +47,6 @@ const deckOptions: string[] = [
 
 const formatOptions: string[] = ["Premier", "Twin Suns", "Draft", "Sealed"];
 
-const createGameFormStyles = {
-	mainCard: {
-		borderRadius: "1.5em",
-		backgroundColor: "#000000E6",
-		backdropFilter: "blur(20px)",
-		fontFamily: "var(--font-barlow), sans-serif",
-		width: { xs: "90vw", sm: "70vw", md: "40vw", lg: "30vw" },
-		p: "2em",
-		mb: "2em",
-	},
-	formControl: {
-		mb: ".5em",
-	},
-	labelText: {
-		fontFamily: "var(--font-barlow), sans-serif",
-		fontSize: "1.3em",
-		color: "#fff",
-		mb: ".5em",
-	},
-	checkbox: {
-		color: "#fff",
-		"&.Mui-checked": {
-			color: "#fff",
-		},
-	},
-	checkboxAndRadioGroupText: {
-		color: "#fff",
-		fontSize: "1em",
-	},
-	submitButton: {
-		display: "block",
-		ml: "auto",
-		mr: "auto",
-	},
-	instructionsCard: {
-		width: { xs: "90vw", sm: "70vw", md: "40vw", lg: "30vw" },
-		borderRadius: "1.5em",
-		backgroundColor: "#18325199",
-		boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
-		p: "2em",
-		mb: "2em",
-	},
-	instructionsHeading: {
-		fontFamily: "var(--font-barlow), sans-serif",
-		fontWeight: "600",
-		fontSize: "1.8em",
-		color: "#fff",
-		mb: ".8em",
-	},
-	instructionsText: {
-		fontFamily: "var(--font-barlow), sans-serif",
-		fontWeight: "400",
-		fontSize: "1em",
-		textAlign: "left",
-		color: "#fff",
-		mb: ".2em",
-	},
-};
-
 const CreateGameForm: React.FC<CreateGameFormProps> = ({
 	format,
 	setFormat,
@@ -115,7 +57,7 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 
 	// Common State
 	const [favouriteDeck, setFavouriteDeck] =
-		useState<string>("Order66");
+		useState<string>("Vader Green Ramp");
 	const [deckLink, setDeckLink] = useState<string>("");
 	const [saveDeck, setSaveDeck] = useState<boolean>(false);
 	const [deckData, setDeckData] = useState<DeckData | null>(null);
@@ -181,22 +123,58 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 
 	};
 
-	//------------------------STYLES------------------------//
+	const formControlStyle = {
+		mb: "1.5rem",
+	};
+
+	const labelTextStyle = {
+		mb: ".5em",
+	};
+
+	const labelTextStyleSecondary = {
+		color: "#aaaaaa",
+		display: "inline",
+	};
+
+	const checkboxStyle = {
+		color: "#fff",
+		"&.Mui-checked": {
+			color: "#fff",
+		},
+	};
+
+	const checkboxAndRadioGroupTextStyle = {
+		color: "#fff",
+		fontSize: "1em",
+	};
+
+	const submitButtonStyle = {
+		display: "block",
+		ml: "auto",
+		mr: "auto",
+	};
+
+	const instructionsCardStyle = {
+		width: { xs: "90vw", sm: "70vw", md: "40vw", lg: "30vw" },
+		borderRadius: "1.5em",
+		backgroundColor: "#18325199",
+		boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+		p: "2em",
+		mb: "2em",
+	};
 
 	return (
 		<Box sx={{ height: "80vh" }}>
 			{/* Primary Card - Create/Choose Deck Form */}
-			<Card sx={createGameFormStyles.mainCard}>
+			<Card variant="black">
 				<CardContent>
 					<Typography variant="h2">
 						{isCreateGamePath ? "Choose Your Deck" : "Create New Game"}
 					</Typography>
 					<form onSubmit={handleCreateGameSubmit}>
 						{/* Favourite Decks Input */}
-						<FormControl fullWidth sx={createGameFormStyles.formControl}>
-							<Typography sx={createGameFormStyles.labelText}>
-								Favourite Decks
-							</Typography>
+						<FormControl fullWidth sx={formControlStyle}>
+							<Typography variant="body1" sx={labelTextStyle}>Favourite Decks</Typography>
 							<StyledTextField
 								select
 								value={favouriteDeck}
@@ -215,11 +193,18 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 						</FormControl>
 
 						{/* SWUDB Deck Link Input */}
-						<FormControl fullWidth sx={createGameFormStyles.formControl}>
-							<Typography sx={createGameFormStyles.labelText}>
-								SWUDB Deck Link
-								<Typography component="span" sx={{ fontSize: "0.7em" }}>
-									(use the url or &apos;Deck Link&apos; button)
+						<FormControl fullWidth sx={{ mb: 0 }}>
+							<Typography variant="body1" sx={labelTextStyle}>
+									<Link href="https://www.swudb.com/" target="_blank" sx={{ color: 'lightblue' }}>
+									SWUDB
+									</Link>{' '}
+									or{' '}
+									<Link href="https://www.sw-unlimited-db.com/" target="_blank" sx={{ color: 'lightblue' }}>
+									SW-Unlimited-DB
+									</Link>{' '}
+									Deck Link{' '}
+								<Typography variant="body1" sx={labelTextStyleSecondary}>
+									(use the URL or &apos;Deck Link&apos; button)
 								</Typography>
 							</Typography>
 							<StyledTextField
@@ -228,14 +213,16 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 								onChange={(e: ChangeEvent<HTMLInputElement>) =>
 									setDeckLink(e.target.value)
 								}
+								required
 							/>
 						</FormControl>
 
 						{/* Save Deck To Favourites Checkbox */}
 						<FormControlLabel
+							sx={{ mb: "1rem" }}
 							control={
 								<Checkbox
-									sx={createGameFormStyles.checkbox}
+									sx={checkboxStyle}
 									checked={saveDeck}
 									onChange={(
 										e: ChangeEvent<HTMLInputElement>,
@@ -244,23 +231,19 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 								/>
 							}
 							label={
-								<Typography sx={createGameFormStyles.checkboxAndRadioGroupText}>
-									Save Deck To Favourites
+								<Typography sx={checkboxAndRadioGroupTextStyle}>
+									Save to Favorite Decks
 								</Typography>
 							}
-							sx={{ mb: isCreateGamePath ? 1 : 3 }}
 						/>
 
 						{/* Additional Fields for Non-Creategame Path */}
 						{!isCreateGamePath && (
 							<>
 								{/* Game Name Input */}
-								<FormControl fullWidth sx={createGameFormStyles.formControl}>
-									<Typography sx={createGameFormStyles.labelText}>
-										Game Name{" "}
-										<Typography component="span" sx={{ fontSize: "0.8rem" }}>
-											(optional)
-										</Typography>
+								<FormControl fullWidth sx={formControlStyle}>
+									<Typography variant="body1" sx={labelTextStyle}>
+										Game Name
 									</Typography>
 									<StyledTextField
 										type="text"
@@ -268,15 +251,13 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 										onChange={(e: ChangeEvent<HTMLInputElement>) =>
 											setGameName(e.target.value)
 										}
-										placeholder="Enter Game Name"
+										placeholder="Game #"
 									/>
 								</FormControl>
 
 								{/* Format Selection */}
-								<FormControl fullWidth sx={{ mb: "1em" }}>
-									<Typography sx={createGameFormStyles.labelText}>
-										Format
-									</Typography>
+								<FormControl fullWidth sx={formControlStyle}>
+									<Typography variant="body1" sx={labelTextStyle}>Format</Typography>
 									<StyledTextField
 										select
 										value={format}
@@ -294,7 +275,7 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 								</FormControl>
 
 								{/* Privacy Selection */}
-								<FormControl component="fieldset" sx={{ mb: ".8em" }}>
+								<FormControl component="fieldset" sx={formControlStyle}>
 									<RadioGroup
 										row
 										value={privacy}
@@ -305,22 +286,18 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 									>
 										<FormControlLabel
 											value="Public"
-											control={<Radio sx={createGameFormStyles.checkbox} />}
+											control={<Radio sx={checkboxStyle} />}
 											label={
-												<Typography
-													sx={createGameFormStyles.checkboxAndRadioGroupText}
-												>
+												<Typography sx={checkboxAndRadioGroupTextStyle}>
 													Public
 												</Typography>
 											}
 										/>
 										<FormControlLabel
 											value="Private"
-											control={<Radio sx={createGameFormStyles.checkbox} />}
+											control={<Radio sx={checkboxStyle} />}
 											label={
-												<Typography
-													sx={createGameFormStyles.checkboxAndRadioGroupText}
-												>
+												<Typography sx={checkboxAndRadioGroupTextStyle}>
 													Private
 												</Typography>
 											}
@@ -331,16 +308,34 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 						)}
 
 						{/* Submit Button */}
-						<Button
-							type="submit"
-							variant="contained"
-							sx={createGameFormStyles.submitButton}
-						>
+						<Button type="submit" variant="contained" sx={submitButtonStyle}>
 							Create Game
 						</Button>
 					</form>
 				</CardContent>
 			</Card>
+
+			{/* Secondary Card - Instructions (Only for /creategame path) */}
+			{isCreateGamePath && (
+				<Card sx={instructionsCardStyle}>
+					<CardContent>
+						<Typography variant="h3">
+							Instructions
+						</Typography>
+						<Typography variant="body1">
+							Choose a deck, then click &apos;Create&apos; to be taken to the
+							game lobby.
+							<br />
+							<br />
+							Once in the lobby, the player who wins the dice roll chooses who
+							goes first. Then the host can start the game.
+							<br />
+							<br />
+							Have Fun!
+						</Typography>
+					</CardContent>
+				</Card>
+			)}
 		</Box>
 	);
 };
diff --git a/src/app/_components/_sharedcomponents/_styledcomponents/StyledTextField/StyledTextField.tsx b/src/app/_components/_sharedcomponents/_styledcomponents/StyledTextField/StyledTextField.tsx
index fea7ff51..d1d85a89 100644
--- a/src/app/_components/_sharedcomponents/_styledcomponents/StyledTextField/StyledTextField.tsx
+++ b/src/app/_components/_sharedcomponents/_styledcomponents/StyledTextField/StyledTextField.tsx
@@ -10,27 +10,6 @@ const StyledTextField: React.FC<StyledTextFieldProps> = ({
 		<TextField
 			variant="outlined"
 			fullWidth
-			sx={{
-				fontFamily: "var(--font-barlow), sans-serif",
-				backgroundColor: "#fff",
-				borderRadius: "0.5vw",
-				"& .MuiOutlinedInput-root": {
-					height: "3.5em",
-					borderRadius: "0.5vw",
-					"&.Mui-focused": {
-						borderRadius: "0.5vw",
-					},
-					"&.Mui-error": {
-						borderTopLeftRadius: "0.5vw",
-						borderTopRightRadius: "0.5vw",
-						borderBottomLeftRadius: 0,
-						borderBottomRightRadius: 0,
-					},
-				},
-				"& .MuiInputBase-input": {
-					fontSize: "1rem",
-				},
-			}}
 			error={!!errorMessage}
 			helperText={errorMessage || ""}
 			{...props}
diff --git a/src/app/_theme/theme.ts b/src/app/_theme/theme.ts
index 9a8df0ed..7067e050 100644
--- a/src/app/_theme/theme.ts
+++ b/src/app/_theme/theme.ts
@@ -97,7 +97,7 @@ export const theme: Theme = createTheme({
 			styleOverrides: {
 				root: {
 					borderRadius: ".8rem",
-					padding: "1rem",
+					padding: "1.5rem",
 					backdropFilter: "blur(20px)",
 					width: "100%",
 					overflow: "auto",
@@ -113,7 +113,7 @@ export const theme: Theme = createTheme({
 				{
 					props: { variant: "black" },
 					style: {
-						backgroundColor: "#000000E6",
+						backgroundColor: "rgb(0, 0, 0, 0.60)",
 					},
 				},
 			]
@@ -149,5 +149,82 @@ export const theme: Theme = createTheme({
 			  },
 			},
 		},
+		MuiSelect: {
+			defaultProps: {
+				size: 'small',
+			  },
+			styleOverrides: {
+			  select: {
+				backgroundColor: '#394452',
+				color: 'white',
+				'&:hover': {
+				  backgroundColor: '#4C5C71',
+				},
+				'&:focus': {
+				  borderRadius: '5px',
+				},
+			  },
+			  icon: {
+				color: 'white',
+			  },
+			},
+		  },
+		MuiTextField: {
+			defaultProps: {
+				size: 'small', // Set the default size to 'small' for TextField components
+			},
+		},
+		MuiOutlinedInput: {
+			styleOverrides: {
+				root: {
+					borderRadius: '5px',
+					backgroundColor: '#394452',
+					'& .MuiOutlinedInput-notchedOutline': {
+						borderColor: 'transparent',
+					},
+					'&:hover .MuiOutlinedInput-notchedOutline': {
+						borderColor: 'transparent', 
+					},
+					'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+						borderColor: '#7286A0',
+					},
+				},
+				input: {
+					color: 'white',
+					'&::placeholder': {
+					  color: 'white',
+					},
+				},
+			},
+		},
+		MuiMenu: {
+			styleOverrides: {
+				paper: {
+					backgroundColor: '#394452',
+					borderRadius: '5px',
+				},
+			},
+		},
+		MuiMenuItem: {
+			styleOverrides: {
+				root: {
+					color: 'white',
+					'&:hover': {
+						backgroundColor: '#4C5C71',
+					},
+					'&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus': {
+						backgroundColor: '#4C5C71',
+					},
+					'&:first-of-type': {
+						borderTopLeftRadius: '5px',
+						borderTopRightRadius: '5px',
+					},
+					'&:last-of-type': {
+						borderBottomLeftRadius: '5px',
+						borderBottomRightRadius: '5px',
+					},
+				},
+			},
+		},
 	},
-});
+});
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e20e99ad..b7a2d3ae 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
-import { Grid2 as Grid } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { Typography } from "@mui/material";
 import KarabastBanner from "./_components/_sharedcomponents/Banner/Banner";
 import PublicGames from "./_components/HomePage/PublicGames/PublicGames";
 import CreateGameForm from "./_components/_sharedcomponents/CreateGameForm/CreateGameForm";
@@ -9,37 +10,57 @@ import NewsColumn from "./_components/HomePage/News/News";
 const Home: React.FC = () => {
 	const [format, setFormat] = useState("Premier");
 
-	//------------------------STYLES------------------------//
-
-	const gridContainerStyle = {
-		position: "relative",
-		height: "100vh",
-		overflow: "hidden",
-	};
-
-	const columnStyle = {
-		justifyContent: "center",
-		alignContent: "center",
-		padding: "1rem",
-		mt: "17vh",
-		height: "83vh",
-	};
+	const styles = {
+		gridContainer: {
+			position: "relative",
+			overflow: "hidden",
+		},
+		columnContainer: {
+		  	height: "100vh",
+			padding: "1rem 0.75rem 3rem",
+		},
+		column: {
+			justifyContent: "center",
+			height: "calc(100% - 10.5rem)",
+			alignSelf: "end",
+			padding: "0 0.75rem",
+		},
+		disclaimer: {
+			position: "absolute",
+			bottom: 0,
+			width: "100%",
+			padding: "1rem",
+			textAlign: "center",
+			fontSize: "0.75rem",
+		},
+	  };
 
 	return (
-		<Grid container sx={gridContainerStyle}>
-			{/* Banner positioned absolutely */}
+		<Grid container sx={styles.gridContainer}>
+
 			<KarabastBanner />
-			<Grid container size={4} sx={columnStyle}>
+
+			<Grid container size={12} sx={styles.columnContainer}>
+				<Grid size={4} sx={styles.column}>
 				<PublicGames format={format} />
-			</Grid>
-			<Grid container size={4} sx={columnStyle}>
+				</Grid>
+				<Grid size={4} sx={styles.column}>
 				<CreateGameForm format={format} setFormat={setFormat} />
-			</Grid>
-			<Grid container size={4} sx={columnStyle}>
+				</Grid>
+				<Grid size={4} sx={styles.column}>
 				<NewsColumn />
+				</Grid>
+			</Grid>
+
+			<Grid size={12}>
+				<Typography variant="body1" sx={styles.disclaimer}>
+				Karabast is in no way affiliated with Disney or Fantasy Flight Games.
+				Star Wars characters, cards, logos, and art are property of Disney
+				and/or Fantasy Flight Games.
+				</Typography>
 			</Grid>
 		</Grid>
-	);
+  );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/src/next-auth.d.ts b/src/next-auth.d.ts
index 762813a7..6726854c 100644
--- a/src/next-auth.d.ts
+++ b/src/next-auth.d.ts
@@ -1,4 +1,5 @@
-import NextAuth from "next-auth";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { NextAuth } from "next-auth";
 
 declare module "next-auth" {
 	interface Session {