diff --git a/src/app/GameBoard/page.tsx b/src/app/GameBoard/page.tsx
index 666c2c34..287dc61b 100644
--- a/src/app/GameBoard/page.tsx
+++ b/src/app/GameBoard/page.tsx
@@ -2,7 +2,7 @@
 "use client";
 import React, { useState, useRef, useEffect, useContext } from "react";
 import { Box, Grid2 as Grid } from "@mui/material";
-import { s3ImageURL } from "../_utils/s3Assets";
+import { s3ImageURL } from "../_utils/s3Utils";
 import ChatDrawer from "../_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer";
 import OpponentCardTray from "../_components/Gameboard/OpponentCardTray/OpponentCardTray";
 import Board from "../_components/Gameboard/Board/Board";
diff --git a/src/app/_components/Auth/AuthTypes.ts b/src/app/_components/Auth/AuthTypes.ts
index b8e71b8f..58da403c 100644
--- a/src/app/_components/Auth/AuthTypes.ts
+++ b/src/app/_components/Auth/AuthTypes.ts
@@ -1,10 +1,10 @@
 import React from "react";
 
-export interface LoginProps {
+export interface ILoginProps {
 	handleSubmit: (provider: "google" | "discord") => void;
 }
 
-export interface StyledTextFieldProps {
+export interface IStyledTextFieldProps {
 	variant?: "outlined" | "filled" | "standard";
 	fullWidth?: boolean;
 	value?: string | null;
diff --git a/src/app/_components/Auth/Login/Login.tsx b/src/app/_components/Auth/Login/Login.tsx
index 025302d1..325ecf07 100644
--- a/src/app/_components/Auth/Login/Login.tsx
+++ b/src/app/_components/Auth/Login/Login.tsx
@@ -2,9 +2,9 @@
 
 import React from "react";
 import { Box, Button, Card, CardContent, Typography } from "@mui/material";
-import { LoginProps } from "../AuthTypes";
+import { ILoginProps } from "../AuthTypes";
 
-const Login: React.FC<LoginProps> = ({ handleSubmit }) => {
+const Login: React.FC<ILoginProps> = ({ handleSubmit }) => {
 	//------------------------STYLES------------------------//
 	const loginStyles = {
 		container: {
diff --git a/src/app/_components/ClientProviders/ClientProviders.tsx b/src/app/_components/ClientProviders/ClientProviders.tsx
index d4e0320e..2cabc51b 100644
--- a/src/app/_components/ClientProviders/ClientProviders.tsx
+++ b/src/app/_components/ClientProviders/ClientProviders.tsx
@@ -5,11 +5,11 @@ import { ThemeContextProvider } from "@/app/_contexts/Theme.context";
 import { UserProvider } from "@/app/_contexts/User.context";
 import { SessionProvider } from "next-auth/react";
 
-interface ClientProvidersProps {
+interface IClientProvidersProps {
 	children: React.ReactNode;
 }
 
-const ClientProviders: React.FC<ClientProvidersProps> = ({ children }) => {
+const ClientProviders: React.FC<IClientProvidersProps> = ({ children }) => {
 	return (
 		<SessionProvider>
 			<UserProvider>
diff --git a/src/app/_components/Gameboard/Board/Board.tsx b/src/app/_components/Gameboard/Board/Board.tsx
index 1212d668..f0d76e37 100644
--- a/src/app/_components/Gameboard/Board/Board.tsx
+++ b/src/app/_components/Gameboard/Board/Board.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import Grid from "@mui/material/Grid2";
 import UnitsBoard from "../_subcomponents/UnitsBoard";
 import LeaderBaseBoard from "../../_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard";
-import { BoardProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { IBoardProps } from "@/app/_components/Gameboard/GameboardTypes";
 
-const Board: React.FC<BoardProps> = ({
+const Board: React.FC<IBoardProps> = ({
 	sidebarOpen,
 }) => {
 	//----------------Styles----------------//
diff --git a/src/app/_components/Gameboard/GameboardTypes.ts b/src/app/_components/Gameboard/GameboardTypes.ts
index 22324d59..35175c78 100644
--- a/src/app/_components/Gameboard/GameboardTypes.ts
+++ b/src/app/_components/Gameboard/GameboardTypes.ts
@@ -1,18 +1,18 @@
-import { CardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
+import { ICardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
 
-export type ParticipantType = "player" | "opponent";
+export type IParticipantType = "player" | "opponent";
 
-export interface Participant {
+export interface IParticipant {
 	id: string;
 	name: string;
-	type: ParticipantType;
+	type: IParticipantType;
 	initiative: boolean | null;
 	deckSize: number;
-	cards: CardData[];
-	fullDeck: CardData[];
+	cards: ICardData[];
+	fullDeck: ICardData[];
 }
 
-export interface ChatDrawerProps {
+export interface IChatDrawerProps {
 	sidebarOpen: boolean;
 	toggleSidebar: () => void;
 	chatHistory: string[];
@@ -22,48 +22,48 @@ export interface ChatDrawerProps {
 	currentRound: number;
 }
 
-export interface PlayerCardTrayProps {
+export interface IPlayerCardTrayProps {
 	trayPlayer: string;
 	handleModalToggle: () => void;
 	handleBasicPromptToggle: () => void;
 }
 
-export interface OpponentCardTrayProps {
+export interface IOpponentCardTrayProps {
 	trayPlayer: string;
 }
 
-export interface BoardProps {
+export interface IBoardProps {
 	sidebarOpen: boolean;
 }
 
-export interface DeckDiscardProps {
+export interface IDeckDiscardProps {
 	trayPlayer: string;
 }
 
-export interface ResourcesProps {
+export interface IResourcesProps {
 	trayPlayer: string;
 	handleModalToggle?: () => void;
 }
 
-export interface ResourcesOverlayProps {
+export interface IResourcesOverlayProps {
 	isModalOpen: boolean;
 	handleModalToggle: () => void;
 }
 
-export interface BasicPromptProps {
+export interface IBasicPromptProps {
 	isBasicPromptOpen: boolean;
 	handleBasicPromptToggle: () => void;
 }
 
-export interface CardAreaProps {
-	cards: CardData[];
+export interface ICardAreaProps {
+	cards: ICardData[];
 }
 
-export interface UnitsBoardProps {
+export interface IUnitsBoardProps {
 	sidebarOpen: boolean;
 	arena: string;
 }
 
-export interface PlayerHandProps {
-	cards: CardData[];
+export interface IPlayerHandProps {
+	cards: ICardData[];
 }
\ No newline at end of file
diff --git a/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx b/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx
index c8ad807a..4bfb26ab 100644
--- a/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx
+++ b/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx
@@ -3,10 +3,10 @@ import Grid from "@mui/material/Grid2";
 import Resources from "../_subcomponents/PlayerTray/Resources";
 import PlayerHand from "../_subcomponents/PlayerTray/PlayerHand";
 import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard";
-import { OpponentCardTrayProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { IOpponentCardTrayProps } from "@/app/_components/Gameboard/GameboardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
 
-const OpponentCardTray: React.FC<OpponentCardTrayProps> = ({ trayPlayer }) => {
+const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer }) => {
 	//---------------Styles------------------- //
 	const leftColumn = {
 		display: "flex",
diff --git a/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx b/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx
index 34e26dff..4efcba53 100644
--- a/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx
+++ b/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx
@@ -4,10 +4,10 @@ import Resources from "../_subcomponents/PlayerTray/Resources";
 import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard";
 import CardActionTray from "../_subcomponents/PlayerTray/CardActionTray";
 import PlayerHand from "../_subcomponents/PlayerTray/PlayerHand";
-import { PlayerCardTrayProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { IPlayerCardTrayProps } from "@/app/_components/Gameboard/GameboardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
 
-const PlayerCardTray: React.FC<PlayerCardTrayProps> = ({
+const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({
 	trayPlayer,
 	handleModalToggle,
 }) => {
diff --git a/src/app/_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer.tsx b/src/app/_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer.tsx
index d6b06e40..063c637a 100644
--- a/src/app/_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer.tsx
+++ b/src/app/_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer.tsx
@@ -2,9 +2,9 @@ import React, { forwardRef } from "react";
 import { Drawer, Box, IconButton, Typography } from "@mui/material";
 import { Settings, Close } from "@mui/icons-material";
 import Chat from "@/app/_components/_sharedcomponents/Chat/Chat";
-import { ChatDrawerProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { IChatDrawerProps } from "@/app/_components/Gameboard/GameboardTypes";
 
-const ChatDrawer = forwardRef<HTMLDivElement, ChatDrawerProps>(
+const ChatDrawer = forwardRef<HTMLDivElement, IChatDrawerProps>(
 	function ChatDrawer(
 		{
 			sidebarOpen,
diff --git a/src/app/_components/Gameboard/_subcomponents/Overlays/Prompts/BasicPrompt.tsx b/src/app/_components/Gameboard/_subcomponents/Overlays/Prompts/BasicPrompt.tsx
index f5345a41..c51258c3 100644
--- a/src/app/_components/Gameboard/_subcomponents/Overlays/Prompts/BasicPrompt.tsx
+++ b/src/app/_components/Gameboard/_subcomponents/Overlays/Prompts/BasicPrompt.tsx
@@ -12,9 +12,9 @@ import {
 } from "@mui/material";
 import { Close } from "@mui/icons-material";
 import { useGame } from "@/app/_contexts/Game.context";
-import { BasicPromptProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { IBasicPromptProps } from "@/app/_components/Gameboard/GameboardTypes";
 
-const BasicPrompt: React.FC<BasicPromptProps> = ({
+const BasicPrompt: React.FC<IBasicPromptProps> = ({
 	isBasicPromptOpen,
 	handleBasicPromptToggle,
 }) => {
@@ -54,7 +54,7 @@ const BasicPrompt: React.FC<BasicPromptProps> = ({
 						{playerState.promptTitle || ""}
 					</Typography>
 					<Box>
-						{playerState.buttons.map((button: ButtonsProps) => (
+						{playerState.buttons.map((button: IButtonsProps) => (
 							<PromptButton
 								key={button.arg}
 								button={button}
@@ -82,19 +82,19 @@ const BasicPrompt: React.FC<BasicPromptProps> = ({
 	);
 };
 
-interface PromptButtonProps {
-	button: ButtonsProps
+interface IPromptButtonProps {
+	button: IButtonsProps
 	sendGameMessage: (args: [string, string, string]) => void;
 }
 
-interface ButtonsProps {
+interface IButtonsProps {
 	command: string;
 	arg: string;
 	text: string;
 	uuid: string;
 }
 
-const PromptButton: React.FC<PromptButtonProps> = ({ button, sendGameMessage }) => {
+const PromptButton: React.FC<IPromptButtonProps> = ({ button, sendGameMessage }) => {
 	return (
 		<Button
 			variant="contained"
diff --git a/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx b/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx
index 455d36d8..440a2fe1 100644
--- a/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx
+++ b/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx
@@ -11,10 +11,10 @@ import {
 } from "@mui/material";
 import { Close } from "@mui/icons-material";
 import CardArea from "../../../../_sharedcomponents/CardArea/CardArea";
-import { ResourcesOverlayProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { IResourcesOverlayProps } from "@/app/_components/Gameboard/GameboardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
 
-const ResourcesOverlay: React.FC<ResourcesOverlayProps> = ({
+const ResourcesOverlay: React.FC<IResourcesOverlayProps> = ({
 	isModalOpen,
 	handleModalToggle,
 }) => {
diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray.tsx
index e007ea02..261375a9 100644
--- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray.tsx
+++ b/src/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray.tsx
@@ -25,7 +25,7 @@ const CardActionTray: React.FC = () => {
 					{playerState.menuTitle}
 				</Typography>
 				<Box>
-					{playerState.buttons.map((button: ButtonsProps) => (
+					{playerState.buttons.map((button: IButtonsProps) => (
 						<PromptButton
 							key={button.arg}
 							button={button}
@@ -38,19 +38,19 @@ const CardActionTray: React.FC = () => {
 	);
 };
 
-interface PromptButtonProps {
-	button: ButtonsProps
+interface IPromptButtonProps {
+	button: IButtonsProps
 	sendGameMessage: (args: [string, string, string]) => void;
 }
 
-interface ButtonsProps {
+interface IButtonsProps {
 	command: string;
 	arg: string;
 	text: string;
 	uuid: string;
 }
 
-const PromptButton: React.FC<PromptButtonProps> = ({ button, sendGameMessage }) => {
+const PromptButton: React.FC<IPromptButtonProps> = ({ button, sendGameMessage }) => {
 	return (
 		<Button
 			variant="contained"
diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx
index d3d513a1..2128e9a7 100644
--- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx
+++ b/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { Card, CardContent, Box, Typography } from "@mui/material";
 import GameCard from "../../../_sharedcomponents/Cards/GameCard/GameCard";
-import { DeckDiscardProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { IDeckDiscardProps } from "@/app/_components/Gameboard/GameboardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
 
-const DeckDiscard: React.FC<DeckDiscardProps> = (
+const DeckDiscard: React.FC<IDeckDiscardProps> = (
 	trayPlayer
 ) => {
 
diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx
index c414c168..6c05f540 100644
--- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx
+++ b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx
@@ -1,9 +1,9 @@
 import { Grid2 as Grid, Box } from "@mui/material";
 import { useDragScroll } from "@/app/_utils/useDragScroll";
 import GameCard from "@/app/_components/_sharedcomponents/Cards/GameCard/GameCard";
-import { PlayerHandProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { IPlayerHandProps } from "@/app/_components/Gameboard/GameboardTypes";
 
-const PlayerHand: React.FC<PlayerHandProps> = ({
+const PlayerHand: React.FC<IPlayerHandProps> = ({
 	cards = []
 }) => {
 	const {
diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/Resources.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/Resources.tsx
index e68b2ff0..67cc2396 100644
--- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/Resources.tsx
+++ b/src/app/_components/Gameboard/_subcomponents/PlayerTray/Resources.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { Card, CardContent, Box, Typography } from "@mui/material";
 import Image from "next/image";
-import { ResourcesProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { IResourcesProps } from "@/app/_components/Gameboard/GameboardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
 
-const Resources: React.FC<ResourcesProps> = ({
+const Resources: React.FC<IResourcesProps> = ({
 	trayPlayer,
 	handleModalToggle,
 }) => {
diff --git a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx
index 2ff9a9cf..dcdd7d10 100644
--- a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx
+++ b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import { Box, Grid2 as Grid } from "@mui/material";
 import GameCard from "../../_sharedcomponents/Cards/GameCard/GameCard";
-import { CardData } from "../../_sharedcomponents/Cards/CardTypes";
-import { UnitsBoardProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { ICardData } from "../../_sharedcomponents/Cards/CardTypes";
+import { IUnitsBoardProps } from "@/app/_components/Gameboard/GameboardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
 
-const UnitsBoard: React.FC<UnitsBoardProps> = ({
+const UnitsBoard: React.FC<IUnitsBoardProps> = ({
 	sidebarOpen,
 	arena
 }) => {
@@ -53,7 +53,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 			<Grid container direction="column" sx={containerStyle}>
 				{/* Opponent's Ground Units */}
 				<Grid sx={opponentGridStyle}>
-					{opponentUnits.map((card: CardData) => (
+					{opponentUnits.map((card: ICardData) => (
 						<Box key={card.id} sx={{ flex: "0 0 auto" }}>
 							<GameCard card={card} size="square" />
 						</Box>
@@ -62,7 +62,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 
 				{/* Player's Ground Units */}
 				<Grid sx={playerGridStyle}>
-					{playerUnits.map((card: CardData) => (
+					{playerUnits.map((card: ICardData) => (
 						<Box key={card.id} sx={{ flex: "0 0 auto" }}>
 							<GameCard card={card} size="square" />
 						</Box>
diff --git a/src/app/_components/HomePage/HomePageTypes.ts b/src/app/_components/HomePage/HomePageTypes.ts
index 6a64e475..af142932 100644
--- a/src/app/_components/HomePage/HomePageTypes.ts
+++ b/src/app/_components/HomePage/HomePageTypes.ts
@@ -1,23 +1,23 @@
-export interface HexagonProps {
+export interface IHexagonProps {
 	backgroundColor: string;
 }
 
-export interface GameInProgressPlayerProps {
+export interface IGameInProgressPlayerProps {
 	playerImage: string;
 }
 
-export interface PublicGameInProgressProps {
+export interface IPublicGameInProgressProps {
 	match: {
-		player1: GameInProgressPlayerProps;
-		player2: GameInProgressPlayerProps;
+		player1: IGameInProgressPlayerProps;
+		player2: IGameInProgressPlayerProps;
 	};
 }
 
-export interface PublicGamesProps {
+export interface IPublicGamesProps {
 	format: string;
 }
 
-export type Article = {
+export type IArticle = {
 	title: string;
 	content: string;
 	date: string;
@@ -25,6 +25,6 @@ export type Article = {
 	imageAlt: string;
 };
 
-export interface NewsItemProps {
-	article: Article;
+export interface INewsItemProps {
+	article: IArticle;
 }
diff --git a/src/app/_components/HomePage/PublicGames/PublicGames.tsx b/src/app/_components/HomePage/PublicGames/PublicGames.tsx
index 4e094abb..c024ddde 100644
--- a/src/app/_components/HomePage/PublicGames/PublicGames.tsx
+++ b/src/app/_components/HomePage/PublicGames/PublicGames.tsx
@@ -2,9 +2,9 @@ import React from "react";
 import { Card, CardContent, Typography, Divider } from "@mui/material";
 import JoinableGame from "../_subcomponents/JoinableGame/JoinableGame";
 import GamesInProgress from "../_subcomponents/GamesInProgress/GamesInProgress";
-import { PublicGamesProps } from "../HomePageTypes";
+import { IPublicGamesProps } from "../HomePageTypes";
 
-const PublicGames: React.FC<PublicGamesProps> = ({ format }) => {
+const PublicGames: React.FC<IPublicGamesProps> = ({ format }) => {
 
 	const styles = {
 		publicGamesWrapper: {
diff --git a/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx b/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx
index 8224acd1..ae1e6a8b 100644
--- a/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx
+++ b/src/app/_components/HomePage/_subcomponents/GameInProgressPlayer/GameInProgressPlayer.tsx
@@ -1,7 +1,7 @@
 import { Box } from "@mui/material";
-import { GameInProgressPlayerProps } from "../../HomePageTypes";
+import { IGameInProgressPlayerProps } from "../../HomePageTypes";
 
-const GameInProgressPlayer: React.FC<GameInProgressPlayerProps> = ({
+const GameInProgressPlayer: React.FC<IGameInProgressPlayerProps> = ({
 	playerImage,
 }) => {
 	//------------------------STYLES------------------------//
diff --git a/src/app/_components/HomePage/_subcomponents/Hexagon/Hexagon.tsx b/src/app/_components/HomePage/_subcomponents/Hexagon/Hexagon.tsx
index aa74b11b..39939787 100644
--- a/src/app/_components/HomePage/_subcomponents/Hexagon/Hexagon.tsx
+++ b/src/app/_components/HomePage/_subcomponents/Hexagon/Hexagon.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { Box } from "@mui/material";
-import { HexagonProps } from "../../HomePageTypes";
+import { IHexagonProps } from "../../HomePageTypes";
 
-const Hexagon: React.FC<HexagonProps> = ({
+const Hexagon: React.FC<IHexagonProps> = ({
 	backgroundColor,
 }: {
 	backgroundColor: string;
diff --git a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
index 98cfe78b..20fbdcb5 100644
--- a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
+++ b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState} from "react";
 import { Box, Button, Typography } from "@mui/material";
 import { usePathname, useRouter } from "next/navigation";
-interface Lobby {
+interface ILobby {
 	id: string;
 	name: string;
 }
@@ -9,7 +9,7 @@ interface Lobby {
 const JoinableGame: React.FC = () => {
 	//const randomGameId = Math.floor(Math.random() * 10000);
 	const router = useRouter();
-	const [lobbies, setLobbies] = useState<Lobby[]>([]);
+	const [lobbies, setLobbies] = useState<ILobby[]>([]);
 	useEffect(() => {
 		// Fetch unfilled lobbies from the server
 		const fetchLobbies = async () => {
@@ -18,7 +18,7 @@ const JoinableGame: React.FC = () => {
 				if (!response.ok) {
 					throw new Error(`Error fetching lobbies: ${response.statusText}`);
 				}
-				const data: Lobby[] = await response.json();
+				const data: ILobby[] = await response.json();
 				setLobbies(data);
 			} catch (error) {
 				console.error('Error fetching lobbies:', error);
diff --git a/src/app/_components/HomePage/_subcomponents/NewsItem/NewsItem.tsx b/src/app/_components/HomePage/_subcomponents/NewsItem/NewsItem.tsx
index bd2c82db..78d5320d 100644
--- a/src/app/_components/HomePage/_subcomponents/NewsItem/NewsItem.tsx
+++ b/src/app/_components/HomePage/_subcomponents/NewsItem/NewsItem.tsx
@@ -6,10 +6,10 @@ import {
 	Typography,
 	Box,
 } from "@mui/material";
-import { NewsItemProps } from "../../HomePageTypes";
+import { INewsItemProps } from "../../HomePageTypes";
 import parse from "html-react-parser";
 
-const NewsItem: React.FC<NewsItemProps> = ({ article }) => {
+const NewsItem: React.FC<INewsItemProps> = ({ article }) => {
 
 	const styles = {
 		box: {
diff --git a/src/app/_components/HomePage/_subcomponents/PublicMatch/PublicMatch.tsx b/src/app/_components/HomePage/_subcomponents/PublicMatch/PublicMatch.tsx
index ba809cd2..c903f610 100644
--- a/src/app/_components/HomePage/_subcomponents/PublicMatch/PublicMatch.tsx
+++ b/src/app/_components/HomePage/_subcomponents/PublicMatch/PublicMatch.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { Box, Button, Typography } from "@mui/material";
 import GameInProgressPlayer from "../GameInProgressPlayer/GameInProgressPlayer";
-import { PublicGameInProgressProps } from "../../HomePageTypes";
+import { IPublicGameInProgressProps } from "../../HomePageTypes";
 
-const PublicMatch: React.FC<PublicGameInProgressProps> = ({ match }) => {
+const PublicMatch: React.FC<IPublicGameInProgressProps> = ({ match }) => {
 
 	const styles = {
 		box: {
diff --git a/src/app/_components/Lobby/LobbyTypes.ts b/src/app/_components/Lobby/LobbyTypes.ts
index a64abd3b..6a9729b6 100644
--- a/src/app/_components/Lobby/LobbyTypes.ts
+++ b/src/app/_components/Lobby/LobbyTypes.ts
@@ -1,8 +1,8 @@
-export interface PlayersProps {
+export interface IPlayersProps {
 	isLobbyView?: boolean;
 }
 
-export interface SetUpProps {
+export interface ISetUpProps {
 	chatHistory: string[];
 	chatMessage: string;
 	setChatMessage: (message: string) => void;
diff --git a/src/app/_components/Lobby/Players/Players.tsx b/src/app/_components/Lobby/Players/Players.tsx
index 30caf652..8a7b0f0e 100644
--- a/src/app/_components/Lobby/Players/Players.tsx
+++ b/src/app/_components/Lobby/Players/Players.tsx
@@ -2,9 +2,9 @@
 import React from "react";
 import { Card, Box, Typography } from "@mui/material";
 import LeaderBaseBoard from "../../_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard";
-import { PlayersProps } from "../LobbyTypes";
+import { IPlayersProps } from "../LobbyTypes";
 
-const Players: React.FC<PlayersProps> = ({ isLobbyView }) => {
+const Players: React.FC<IPlayersProps> = ({ isLobbyView }) => {
 	//------------------------STYLES------------------------//
 
 	const cardStyle = {
diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx
index ddccacd5..a38502f6 100644
--- a/src/app/_components/Lobby/SetUp/SetUp.tsx
+++ b/src/app/_components/Lobby/SetUp/SetUp.tsx
@@ -7,10 +7,10 @@ import {
 import Chat from "@/app/_components/_sharedcomponents/Chat/Chat";
 import GameLinkCard from "../_subcomponents/GameLinkCard/GameLinkCard";
 import { useGame } from "@/app/_contexts/Game.context";
-import { SetUpProps } from "../LobbyTypes";
+import { ISetUpProps } from "../LobbyTypes";
 import { useRouter, useSearchParams } from "next/navigation"
 
-const SetUp: React.FC<SetUpProps> = ({
+const SetUp: React.FC<ISetUpProps> = ({
 	chatHistory,
 	chatMessage,
 	setChatMessage,
diff --git a/src/app/_components/_sharedcomponents/Banner/Banner.tsx b/src/app/_components/_sharedcomponents/Banner/Banner.tsx
index 92e38770..f46a4751 100644
--- a/src/app/_components/_sharedcomponents/Banner/Banner.tsx
+++ b/src/app/_components/_sharedcomponents/Banner/Banner.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Typography } from "@mui/material";
-import { s3ImageURL } from "@/app/_utils/s3Assets";
+import { s3ImageURL } from "@/app/_utils/s3Utils";
 
 const KarabastBanner: React.FC = () => {
 	
diff --git a/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx b/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx
index 11563cf9..5a73a167 100644
--- a/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx
+++ b/src/app/_components/_sharedcomponents/CardArea/CardArea.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { Box } from "@mui/material";
 import GameCard from "../Cards/GameCard/GameCard";
-import { CardAreaProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { ICardAreaProps } from "@/app/_components/Gameboard/GameboardTypes";
 
-const CardArea: React.FC<CardAreaProps> = ({ cards }) => {
+const CardArea: React.FC<ICardAreaProps> = ({ cards }) => {
 	//------------------------STYLES------------------------//
 	const mainContainerStyle = {
 		display: "flex",
diff --git a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts
index 91895c45..bf047f0c 100644
--- a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts
+++ b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts
@@ -1,9 +1,9 @@
-interface CardSetId {
+interface ICardSetId {
 	set: string;
 	number: number;
 }
 
-export interface CardData {
+export interface ICardData {
 	uuid: string;
 	id?: number;
 	name?: string;
@@ -19,20 +19,20 @@ export interface CardData {
 	cost?: number;
 	exhausted?: boolean;
 	damage?: number;
-	setId: CardSetId;
+	setId: ICardSetId;
 	type: string;
 }
 
-export interface GameCardProps {
-	card: CardData;
+export interface IGameCardProps {
+	card: ICardData;
 	size?: "standard" | "square";
 }
 
-export interface LeaderBaseCardProps {
+export interface ILeaderBaseCardProps {
 	variant: "base" | "leader";
 	selected?: boolean;
 	isLobbyView?: boolean;
 	handleSelect?: () => void;
 	title?: string;
-	card: CardData;
+	card: ICardData;
 }
\ No newline at end of file
diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx
index 2c938757..4182fa16 100644
--- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx
+++ b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx
@@ -7,11 +7,11 @@ import {
 	Box,
 } from "@mui/material";
 import Image from "next/image";
-import { GameCardProps, CardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
+import { IGameCardProps, ICardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
-import { s3CardImageURL } from "@/app/_utils/s3Assets";
+import { s3CardImageURL } from "@/app/_utils/s3Utils";
 
-const GameCard: React.FC<GameCardProps> = ({
+const GameCard: React.FC<IGameCardProps> = ({
 	card,
 	size = "standard",
 }) => {
@@ -21,7 +21,7 @@ const GameCard: React.FC<GameCardProps> = ({
 
 	const { sendGameMessage } = useGame();
 
-	const cardBorderColor = (card: CardData) => {
+	const cardBorderColor = (card: ICardData) => {
 		if (card.selected) return "yellow";
 		if (card.selectable) return "limegreen";
 		if (card.exhausted) return "gray";
diff --git a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx
index 79b68d36..c525ac9c 100644
--- a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx
+++ b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx
@@ -6,19 +6,19 @@ import {
 	Typography,
 	Box,
 } from "@mui/material";
-import { LeaderBaseCardProps } from "../CardTypes";
-import { CardData } from "../CardTypes";
+import { ILeaderBaseCardProps } from "../CardTypes";
+import { ICardData } from "../CardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
-import { s3CardImageURL } from "@/app/_utils/s3Assets";
+import { s3CardImageURL } from "@/app/_utils/s3Utils";
 
 
-const LeaderBaseCard: React.FC<LeaderBaseCardProps> = ({
+const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
 	variant,
 	isLobbyView = false,
 	title,
 	card
 }) => {
-	const cardBorderColor = (card: CardData) => {
+	const cardBorderColor = (card: ICardData) => {
 		if (!card) return "";
 		if (card.selected) return "yellow";
 		if (card.selectable) return "limegreen";
diff --git a/src/app/_components/_sharedcomponents/Chat/Chat.tsx b/src/app/_components/_sharedcomponents/Chat/Chat.tsx
index 38acbe30..27bd69ed 100644
--- a/src/app/_components/_sharedcomponents/Chat/Chat.tsx
+++ b/src/app/_components/_sharedcomponents/Chat/Chat.tsx
@@ -8,9 +8,9 @@ import {
 	Typography,
 } from "@mui/material";
 import { Send } from "@mui/icons-material";
-import { ChatProps } from "./ChatTypes";
+import { IChatProps } from "./ChatTypes";
 
-const Chat: React.FC<ChatProps> = ({
+const Chat: React.FC<IChatProps> = ({
 	chatHistory,
 	chatMessage,
 	playerRoll = null,
diff --git a/src/app/_components/_sharedcomponents/Chat/ChatTypes.ts b/src/app/_components/_sharedcomponents/Chat/ChatTypes.ts
index 303da64f..f82ddaef 100644
--- a/src/app/_components/_sharedcomponents/Chat/ChatTypes.ts
+++ b/src/app/_components/_sharedcomponents/Chat/ChatTypes.ts
@@ -1,4 +1,4 @@
-export interface ChatProps {
+export interface IChatProps {
 	chatHistory: string[];
 	chatMessage: string;
 	playerRoll?: number;
diff --git a/src/app/_components/_sharedcomponents/ControlHub/ControlHub.tsx b/src/app/_components/_sharedcomponents/ControlHub/ControlHub.tsx
index 00eb3334..20af69d2 100644
--- a/src/app/_components/_sharedcomponents/ControlHub/ControlHub.tsx
+++ b/src/app/_components/_sharedcomponents/ControlHub/ControlHub.tsx
@@ -4,9 +4,9 @@ import { Settings, Menu, ArrowBackIosNew, GitHub } from "@mui/icons-material";
 import { FaDiscord, } from "react-icons/fa6";
 import { useRouter } from "next/navigation";
 import NextLinkMui from "./_subcomponents/NextLinkMui/NextLinkMui";
-import { ControlHubProps } from "./ControlHubTypes";
+import { IControlHubProps } from "./ControlHubTypes";
 
-const ControlHub: React.FC<ControlHubProps> = ({
+const ControlHub: React.FC<IControlHubProps> = ({
 	sidebarOpen,
 	toggleSidebar,
 	path,
diff --git a/src/app/_components/_sharedcomponents/ControlHub/ControlHubTypes.ts b/src/app/_components/_sharedcomponents/ControlHub/ControlHubTypes.ts
index 50fc6d23..03209c54 100644
--- a/src/app/_components/_sharedcomponents/ControlHub/ControlHubTypes.ts
+++ b/src/app/_components/_sharedcomponents/ControlHub/ControlHubTypes.ts
@@ -1,9 +1,9 @@
-import { User } from "./../../../_contexts/UserTypes";
+import { IUser } from "./../../../_contexts/UserTypes";
 
-export interface ControlHubProps {
+export interface IControlHubProps {
 	path?: string;
 	sidebarOpen?: boolean;
 	toggleSidebar?: () => void;
-	user?: User | null;
+	user?: IUser | null;
 	logout?: () => void;
 }
diff --git a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
index 5562a0f6..36e19b92 100644
--- a/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
+++ b/src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx
@@ -15,29 +15,30 @@ import {
 } from "@mui/material";
 import StyledTextField from "../_styledcomponents/StyledTextField/StyledTextField";
 import { usePathname, useRouter } from "next/navigation";
+import {updateIdsWithMapping, mapIdToInternalName, transformDeckWithCardData} from "@/app/_utils/s3Utils";
 
-interface CreateGameFormProps {
+interface ICreateGameFormProps {
 	format?: string | null;
 	setFormat?: (format: string) => void;
 }
 
-interface DeckMetadata {
+interface IDeckMetadata {
 	name: string;
 	author: string;
 }
 
-interface DeckCard {
+interface IDeckCard {
 	id: string;
 	count: number;
 }
 
-interface DeckData {
-	metadata: DeckMetadata;
-	leader: DeckCard;
-	secondleader: DeckCard | null;
-	base: DeckCard;
-	deck: DeckCard[];
-	sideboard: DeckCard[];
+interface IDeckData {
+	metadata: IDeckMetadata;
+	leader: IDeckCard;
+	secondleader: IDeckCard | null;
+	base: IDeckCard;
+	deck: IDeckCard[];
+	sideboard: IDeckCard[];
 }
 
 const deckOptions: string[] = [
@@ -47,7 +48,7 @@ const deckOptions: string[] = [
 
 const formatOptions: string[] = ["Premier", "Twin Suns", "Draft", "Sealed"];
 
-const CreateGameForm: React.FC<CreateGameFormProps> = ({
+const CreateGameForm: React.FC<ICreateGameFormProps> = ({
 	format,
 	setFormat,
 }) => {
@@ -60,7 +61,7 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 		useState<string>("Vader Green Ramp");
 	const [deckLink, setDeckLink] = useState<string>("");
 	const [saveDeck, setSaveDeck] = useState<boolean>(false);
-	const [deckData, setDeckData] = useState<DeckData | null>(null);
+	//let [deckData, setDeckData] = useState<DeckData | null>(null); Because of Async this won't set in the correct timeframe
 
 	// Additional State for Non-Creategame Path
 	const [gameName, setGameName] = useState<string>("");
@@ -71,13 +72,33 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 			const response = await fetch(
 				`/api/swudbdeck?deckLink=${encodeURIComponent(deckLink)}`
 			);
-
 			if (!response.ok) {
 				throw new Error(`Failed to fetch deck: ${response.statusText}`);
 			}
 
-			const data: DeckData = await response.json();
-			setDeckData(data);
+			const data: IDeckData = await response.json();
+
+			// Fetch setToId mapping from the s3bucket endpoint
+			const setCodeMapping = await fetch("/api/s3bucket?jsonFile=_setCodeMap.json"); // Adjust to your actual endpoint if different
+			if (!setCodeMapping.ok) {
+				throw new Error("Failed to fetch card mapping");
+			}
+
+			const jsonData = await setCodeMapping.json();
+			const deckWithIds = updateIdsWithMapping(data, jsonData);
+
+			// Fetch codeToInternalname mapping
+			const codeInternalnameMapping = await fetch("/api/s3bucket?jsonFile=_cardMap.json"); // Adjust to your actual endpoint if different
+			if (!codeInternalnameMapping.ok) {
+				throw new Error("Failed to fetch card mapping");
+			}
+
+			const codeInternalnameJson = await codeInternalnameMapping.json();
+			const deckWithInternalNames = mapIdToInternalName(codeInternalnameJson, deckWithIds)
+
+			// Fetch internalNameToCardMapping
+			const finalDeckForm = await transformDeckWithCardData(deckWithInternalNames);
+			return finalDeckForm
 		} catch (error) {
 			if (error instanceof Error) {
 				console.error("Error fetching deck:", error.message);
@@ -93,13 +114,13 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 		console.log("Favourite Deck:", favouriteDeck);
 		console.log("SWUDB Deck Link:", deckLink);
 		console.log("beginning fetch for deck link");
-		fetchDeckData(deckLink);
+		const deckData = await fetchDeckData(deckLink);
 		console.log("fetch complete, deck data:", deckData);
 		console.log("Save Deck To Favourites:", saveDeck);
-
 		try {
 			const payload = {
-				user: favouriteDeck
+				user: favouriteDeck,
+				deck: deckData
 			};
 			const response = await fetch("http://localhost:9500/api/create-lobby",
 				{
diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx
index dc17192a..e253e1ab 100644
--- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx
+++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx
@@ -1,11 +1,11 @@
 import React from "react";
 import Grid from "@mui/material/Grid2";
 import LeaderBaseCard from "../../Cards/LeaderBaseCard/LeaderBaseCard";
-import { LeaderBaseProps } from "../LeaderBaseBoardTypes";
+import { ILeaderBaseProps } from "../LeaderBaseBoardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
-import { s3CardImageURL } from "@/app/_utils/s3Assets";
+import { s3CardImageURL } from "@/app/_utils/s3Utils";
 
-const LeaderBase: React.FC<LeaderBaseProps> = ({
+const LeaderBase: React.FC<ILeaderBaseProps> = ({
 	player,
 	isLobbyView = false,
 	title,
diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx
index ea6c76e4..90e1b0e4 100644
--- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx
+++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard.tsx
@@ -3,10 +3,10 @@ import Grid from "@mui/material/Grid2";
 import LeaderBase from "./LeaderBase/LeaderBase";
 import CardActionTray from "@/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray";
 import { useGame } from "@/app/_contexts/Game.context";
-import { LeaderBaseBoardProps } from "./LeaderBaseBoardTypes";
+import { ILeaderBaseBoardProps } from "./LeaderBaseBoardTypes";
 
 
-const LeaderBaseBoard: React.FC<LeaderBaseBoardProps> = ({
+const LeaderBaseBoard: React.FC<ILeaderBaseBoardProps> = ({
 	isLobbyView,
 }) => {
 	const { connectedPlayer, getOpponent } = useGame();
diff --git a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoardTypes.ts b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoardTypes.ts
index 67892fea..2b3c55a1 100644
--- a/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoardTypes.ts
+++ b/src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBaseBoardTypes.ts
@@ -1,8 +1,8 @@
-export interface LeaderBaseBoardProps {
+export interface ILeaderBaseBoardProps {
 	isLobbyView?: boolean;
 }
 
-export interface LeaderBaseProps {
+export interface ILeaderBaseProps {
 	player: string;
 	isLobbyView?: boolean;
 	title?: string;
diff --git a/src/app/_components/_sharedcomponents/_styledcomponents/StyledTextField/StyledTextField.tsx b/src/app/_components/_sharedcomponents/_styledcomponents/StyledTextField/StyledTextField.tsx
index d1d85a89..d5bb2064 100644
--- a/src/app/_components/_sharedcomponents/_styledcomponents/StyledTextField/StyledTextField.tsx
+++ b/src/app/_components/_sharedcomponents/_styledcomponents/StyledTextField/StyledTextField.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { TextField } from "@mui/material";
-import { StyledTextFieldProps } from "@/app/_components/Auth/AuthTypes";
+import { IStyledTextFieldProps } from "@/app/_components/Auth/AuthTypes";
 
-const StyledTextField: React.FC<StyledTextFieldProps> = ({
+const StyledTextField: React.FC<IStyledTextFieldProps> = ({
 	errorMessage,
 	...props
 }) => {
diff --git a/src/app/_constants/mockData.ts b/src/app/_constants/mockData.ts
index 1d62bd2b..cb9caf70 100644
--- a/src/app/_constants/mockData.ts
+++ b/src/app/_constants/mockData.ts
@@ -1,4 +1,4 @@
-import { Article } from "@/app/_components/HomePage/HomePageTypes";
+import { IArticle } from "@/app/_components/HomePage/HomePageTypes";
 
 export const playerMatches = [
 	{
@@ -83,7 +83,7 @@ export const playerMatches = [
 	},
 ];
 
-export const articles: Article[] = [
+export const articles: IArticle[] = [
 	{
 	  title: "Welcome to the Karabast Beta!",
 	  content: `
diff --git a/src/app/_contexts/Game.context.tsx b/src/app/_contexts/Game.context.tsx
index 2db34202..c5334bf9 100644
--- a/src/app/_contexts/Game.context.tsx
+++ b/src/app/_contexts/Game.context.tsx
@@ -10,7 +10,7 @@ import React, {
 } from "react";
 import io, { Socket } from "socket.io-client";
 
-interface GameContextType {
+interface IGameContextType {
 	gameState: any;
 	sendMessage: (message: string, args?: any[]) => void;
 	sendGameMessage: (args: any[]) => void;
@@ -18,7 +18,7 @@ interface GameContextType {
 	connectedPlayer: string;
 }
 
-const GameContext = createContext<GameContextType | undefined>(undefined);
+const GameContext = createContext<IGameContextType | undefined>(undefined);
 
 export const GameProvider = ({ children }: { children: ReactNode }) => {
 	const [gameState, setGameState] = useState<any>(null);
diff --git a/src/app/_contexts/Sidebar.context.tsx b/src/app/_contexts/Sidebar.context.tsx
index d1e147f2..e699b5b2 100644
--- a/src/app/_contexts/Sidebar.context.tsx
+++ b/src/app/_contexts/Sidebar.context.tsx
@@ -1,12 +1,12 @@
 "use client";
 import React, { createContext, useContext, useState, ReactNode } from "react";
 
-interface SidebarContextType {
+interface ISidebarContextType {
 	sidebarOpen: boolean;
 	toggleSidebar: () => void;
 }
 
-const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+const SidebarContext = createContext<ISidebarContextType | undefined>(undefined);
 
 export const SidebarProvider = ({ children }: { children: ReactNode }) => {
 	const [sidebarOpen, setSidebarOpen] = useState(false);
diff --git a/src/app/_contexts/User.context.tsx b/src/app/_contexts/User.context.tsx
index b1d922e5..fb86529d 100644
--- a/src/app/_contexts/User.context.tsx
+++ b/src/app/_contexts/User.context.tsx
@@ -8,9 +8,9 @@ import React, {
 	useState,
 } from "react";
 import { useSession, signIn, signOut } from "next-auth/react";
-import { UserContextType } from "./UserTypes";
+import { IUserContextType } from "./UserTypes";
 
-const UserContext = createContext<UserContextType>({
+const UserContext = createContext<IUserContextType>({
 	user: null,
 	login: () => {},
 	logout: () => {},
@@ -20,7 +20,7 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
 	children,
 }) => {
 	const { data: session } = useSession(); // Get session from next-auth
-	const [user, setUser] = useState<UserContextType["user"]>(null);
+	const [user, setUser] = useState<IUserContextType["user"]>(null);
 
 	useEffect(() => {
 		// Keep context in sync with next-auth session
diff --git a/src/app/_contexts/UserTypes.ts b/src/app/_contexts/UserTypes.ts
index b3240835..53774619 100644
--- a/src/app/_contexts/UserTypes.ts
+++ b/src/app/_contexts/UserTypes.ts
@@ -1,4 +1,4 @@
-export interface User {
+export interface IUser {
 	id: string | null;
 	name: string | null;
 	email: string | null;
@@ -6,8 +6,8 @@ export interface User {
 	provider: string | null;
 }
 
-export interface UserContextType {
-	user: User | null;
+export interface IUserContextType {
+	user: IUser | null;
 	login: (provider: "google" | "discord") => void;
 	logout: () => void;
 }
diff --git a/src/app/_utils/s3Assets.ts b/src/app/_utils/s3Assets.ts
deleted file mode 100644
index 5beca7dd..00000000
--- a/src/app/_utils/s3Assets.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CardData } from "../_components/_sharedcomponents/Cards/CardTypes";
-
-export const s3ImageURL = (path: string) => {
-    const s3Bucket = "https://karabast-assets.s3.amazonaws.com/";
-    return s3Bucket + path;
-};
-
-export const s3CardImageURL = (card: CardData) => {
-    if (!card) return "game/epic-action-token.webp";
-    const cardNumber = card.setId.number.toString().padStart(3, "0") + (card.type === "leaderUnit" ? "-portrait" : "");
-    return s3ImageURL(`cards/${card.setId.set}/${cardNumber}.webp`);
-};
\ No newline at end of file
diff --git a/src/app/_utils/s3Utils.ts b/src/app/_utils/s3Utils.ts
new file mode 100644
index 00000000..46a94399
--- /dev/null
+++ b/src/app/_utils/s3Utils.ts
@@ -0,0 +1,194 @@
+import { ICardData } from "../_components/_sharedcomponents/Cards/CardTypes";
+
+// Deck data interfaces for deck info from swudb
+interface IDeckMetadata {
+    name: string;
+    author: string;
+}
+
+interface IDeckCard {
+    id: string;
+    count: number;
+}
+
+interface IDeckData {
+    metadata: IDeckMetadata;
+    leader: IDeckCard;
+    secondleader: IDeckCard | null;
+    base: IDeckCard;
+    deck: IDeckCard[];
+    sideboard: IDeckCard[];
+}
+
+// Deck data interfaces for deck info on the server
+interface IServerCardDetails {
+    title: string;
+    subtitle: string | null;
+    cost: number | null;
+    hp: number | null;
+    power: number | null;
+    text: string;
+    deployBox: string | null;
+    epicAction: string | null;
+    unique: boolean;
+    rules: string;
+    id: string;
+    aspects: string[];
+    traits: string[];
+    keywords: string[];
+    types: string[];
+    setId: {
+        set: string;
+        number: number;
+    };
+    internalName: string;
+}
+
+interface IServerDeckCard {
+    count: number;
+    card: IServerCardDetails;
+}
+
+interface IServerDeckData {
+    leader: IServerDeckCard[];
+    base: IServerDeckCard[];
+    deckCards: IServerDeckCard[];
+    sideboard: IServerDeckCard[];
+}
+
+// types of mapping
+type IMapping = {
+    [id:string]: string;
+}
+type IIdToInternalNameMapping = {
+    "id": string,
+    "internalName": string,
+    "title": string,
+    "subtitle": string
+}
+
+export const s3ImageURL = (path: string) => {
+    const s3Bucket = "https://karabast-assets.s3.amazonaws.com/";
+    return s3Bucket + path;
+};
+
+export const s3CardImageURL = (card: ICardData) => {
+    if (!card) return "game/epic-action-token.webp";
+    const cardNumber = card.setId.number.toString().padStart(3, "0") + (card.type === "leaderUnit" ? "-portrait" : "");
+    return s3ImageURL(`cards/${card.setId.set}/${cardNumber}.webp`);
+};
+
+
+// Helper function to update a card's id
+export const updateIdsWithMapping = (data: IDeckData, mapping: IMapping): IDeckData => {
+
+    const updateCard = (card: IDeckCard): IDeckCard => {
+        const updatedId = mapping[card.id] || card.id; // Use mapping if available, else keep the original id
+        return { ...card, id: updatedId };
+    };
+
+    return {
+        metadata: data.metadata,
+        leader: updateCard(data.leader),
+        secondleader: data.secondleader,
+        base: updateCard(data.base),
+        deck: data.deck.map(updateCard), // Update all cards in the deck
+        sideboard: data.sideboard.map(updateCard) // Update all cards in the sideboard
+    };
+};
+
+// Helper function to update a cards id to its internal name
+export function mapIdToInternalName(
+    mapper: IIdToInternalNameMapping[],
+    deckData: IDeckData
+): IDeckData {
+    // Convert the mapper array to a lookup map for faster access
+    const idToNameMap = new Map<string, string>();
+    mapper.forEach(entry => {
+        idToNameMap.set(entry.id, entry.internalName);
+    });
+
+    // Helper function to update a single CardSlot
+    const updateCardSlot = (slot: IDeckCard): IDeckCard => {
+        const { id, count } = slot;
+        const mappedName = idToNameMap.get(id);
+        if (mappedName) {
+            return { id: mappedName, count };
+        } else {
+            // If no mapping found, log a warning and retain the original ID
+            console.warn(`No internalName mapping found for ID: ${id}`);
+            return { id, count };
+        }
+    };
+
+    // Update leader, secondleader, base
+    const updatedLeader = updateCardSlot(deckData.leader);
+    let updatedSecondLeader = null;
+    if(deckData.secondleader) {
+        updatedSecondLeader = updateCardSlot(deckData.secondleader);
+    }
+    const updatedBase = updateCardSlot(deckData.base);
+
+    // Update deck and sideboard arrays
+    const updatedDeck = deckData.deck.map(updateCardSlot).filter((slot): slot is IDeckCard => slot !== null);
+    const updatedSideboard = deckData.sideboard.map(updateCardSlot).filter((slot): slot is IDeckCard => slot !== null);
+
+    return {
+        metadata: deckData.metadata,
+        leader: updatedLeader,
+        secondleader: updatedSecondLeader,
+        base: updatedBase,
+        deck: updatedDeck,
+        sideboard: updatedSideboard
+    };
+}
+
+// helper function to convert DeckWithInternalName to a playable set of cards.
+// Fetch card details from the API
+const fetchCardData = async (internalName: string): Promise<IServerCardDetails | null> => {
+    try {
+        const response = await fetch(`/api/s3bucket?jsonFile=cards/${encodeURIComponent(internalName)}.json`);
+        const cardDetails = await response.json();
+        // Do we want to inform the user that some of the cards weren't imported?
+        if(cardDetails.status){
+            console.error(`Failed to fetch card data for ${internalName}:`);
+            return null
+        }
+        return cardDetails[0];
+    } catch {
+        console.error(`Failed to fetch card data for ${internalName}:`);
+        return null;
+    }
+};
+
+// Transform Deck with card details
+export const transformDeckWithCardData = async (deckData: IDeckData): Promise<IServerDeckData | null> => {
+    try {
+        const transformCard = async (deckCard: IDeckCard): Promise<IServerDeckCard | null> => {
+            const cardData = await fetchCardData(deckCard.id);
+            if (!cardData) return null;
+            return {
+                count: deckCard.count,
+                card: cardData, // Add full card details under "card"
+            };
+        };
+
+        const leader = await transformCard(deckData.leader);
+        const base = await transformCard(deckData.base);
+        const deckCards = (
+            await Promise.all(deckData.deck.map((card) => transformCard(card)))
+        ).filter((card) => card !== null);
+        const sideboard = (
+            await Promise.all(deckData.sideboard.map((card) => transformCard(card)))
+        ).filter((card) => card !== null);
+        return {
+            leader: leader ? [leader] : [],
+            base: base ? [base] : [],
+            deckCards,
+            sideboard,
+        };
+    } catch {
+        console.error('Error transforming deck with card data');
+        return null;
+    }
+};
\ No newline at end of file
diff --git a/src/app/api/s3bucket/route.ts b/src/app/api/s3bucket/route.ts
new file mode 100644
index 00000000..baee52c6
--- /dev/null
+++ b/src/app/api/s3bucket/route.ts
@@ -0,0 +1,30 @@
+import {NextResponse} from "next/server";
+
+export async function GET(req: Request) {
+    try {
+        const { searchParams } = new URL(req.url);
+        const jsonFile = searchParams.get("jsonFile");
+        if(!jsonFile) {
+            console.error("Error: Missing parameter jsonFile");
+            return NextResponse.json({ error: "Missing parameter jsonFile", status: 400 });
+        }
+        const response = await fetch("https://karabast-assets.s3.amazonaws.com/data/"+encodeURIComponent(jsonFile));
+
+        if (!response.ok) {
+            console.error("Failed to fetch card mapping:", response.statusText);
+            return NextResponse.json({ error: "Failed to fetch card mapping", status: 500 });
+        }
+
+        const data = await response.json();
+        return NextResponse.json(data);
+    } catch (error) {
+        if (error instanceof Error) {
+            console.error("Internal Server Error:", error.message);
+            return NextResponse.json({ error: error.message, status: 500 });
+        }
+
+        return NextResponse.json(
+            { error: "An unexpected error occurred", status: 500 }
+        );
+    }
+}
diff --git a/src/app/api/swudbdeck/route.ts b/src/app/api/swudbdeck/route.ts
index b1927bbf..3974f5b7 100644
--- a/src/app/api/swudbdeck/route.ts
+++ b/src/app/api/swudbdeck/route.ts
@@ -1,22 +1,22 @@
 import { NextResponse } from "next/server";
 
-interface DeckMetadata {
+interface IDeckMetadata {
 	name: string;
 	author: string;
 }
 
-interface DeckCard {
+interface IDeckCard {
 	id: string;
 	count: number;
 }
 
-interface DeckData {
-	metadata: DeckMetadata;
-	leader: DeckCard;
-	secondleader: DeckCard | null;
-	base: DeckCard;
-	deck: DeckCard[];
-	sideboard: DeckCard[];
+interface IDeckData {
+	metadata: IDeckMetadata;
+	leader: IDeckCard;
+	secondleader: IDeckCard | null;
+	base: IDeckCard;
+	deck: IDeckCard[];
+	sideboard: IDeckCard[];
 }
 
 export async function GET(req: Request) {
@@ -49,7 +49,7 @@ export async function GET(req: Request) {
 			throw new Error(`SWUDB API error: ${response.statusText}`);
 		}
 
-		const data: DeckData = await response.json();
+		const data: IDeckData = await response.json();
 
 		return NextResponse.json(data);
 	} catch (error) {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 75cc1637..cfacee27 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 import React from 'react';
 import ClientLayout from './ClientLayout';
 import { Barlow } from "next/font/google";
-import "./_utils/s3Assets";
+import "./_utils/s3Utils";
 
 const barlow = Barlow({
 	subsets: ["latin"],