diff --git a/web/next.config.mjs b/web/next.config.mjs
index 8f767b0..04af33a 100644
--- a/web/next.config.mjs
+++ b/web/next.config.mjs
@@ -9,12 +9,14 @@ if (process.env.NODE_ENV === 'production') {
         assetPrefix: '/replay',
         env: {
             NEXT_PUBLIC_BASE_PATH: '/replay',
+            NEXT_PUBLIC_CONTENT_DIRECTORY: ''
         },   
     };
 } else {
     nextConfig = {
         env: {
-            NEXT_PUBLIC_BASE_PATH: ''
+            NEXT_PUBLIC_BASE_PATH: '',
+            NEXT_PUBLIC_CONTENT_DIRECTORY: ''
         }
     };
 }
diff --git a/web/public/images/maps/Southpark.jpg b/web/public/images/maps/Southpark.jpg
new file mode 100644
index 0000000..ca6979f
Binary files /dev/null and b/web/public/images/maps/Southpark.jpg differ
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 71440eb..95e46fe 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -5,18 +5,28 @@ import RenderLevel from '@/components/RenderLevel';
 
 export default function Page() {
   const [simId, setSimId] = useState<string | null>(null);
+  const [map, setMapName] = useState<string | null>(null);
+  const [img, setImgName] = useState<string | null>(null);
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const sim_id = params.get('sim_id');
+    const map = params.get('map');
+    const img = params.get('img');
     if (sim_id) {
       setSimId(sim_id);
     }
+    if (map) {
+      setMapName(map);
+    }
+    if (img) {
+      setImgName(img);
+    }
   }, []);
-  
+
   if (!simId) {
     return null;
   }
 
-  return <RenderLevel simId={simId} />;
+  return <RenderLevel simId={simId} map={map} img={img} />;
 }
diff --git a/web/src/components/Agent.module.css b/web/src/components/Agent.module.css
index af800ab..d0094e0 100644
--- a/web/src/components/Agent.module.css
+++ b/web/src/components/Agent.module.css
@@ -16,10 +16,28 @@
     top: -12px;
 }
 
+.stageLeftChatIcon {
+    position: absolute;
+    left: -40px;
+    top: -60px;
+}
+
+.stageThoughtBubbleIcon {
+    position: absolute;
+    right: 40px;
+    top: -80px;
+}
+
+.stageDeadIcon {
+    position: absolute;
+    right: 40px;
+    top: -80px;
+}
+
 .agent {
     position: relative;
 }
-  
+
 .hidden {
     visibility: hidden;
 }
\ No newline at end of file
diff --git a/web/src/components/AgentSprite.tsx b/web/src/components/AgentSprite.tsx
index 0fdc21f..4fd9ab7 100644
--- a/web/src/components/AgentSprite.tsx
+++ b/web/src/components/AgentSprite.tsx
@@ -1,50 +1,93 @@
 import React from "react";
 import styles from './Agent.module.css';
 
-const AgentSprite: React.FC<{ agentName: string, isTalking: boolean, isThinking: boolean, status: string }> = ({ agentName, isTalking, isThinking, status }) => {
+const AgentSprite: React.FC<{ agentName: string, isTalking: boolean, isThinking: boolean, status: string, map: string }> = ({ agentName, isTalking, isThinking, status, map }) => {
     let agentImage = `${process.env.NEXT_PUBLIC_BASE_PATH}/images/characters/${agentName}.png`;
     console.log("AgentSpriteeee status = ", status);
+
     // Check if agentName matches "Zombie" using regex
     if (/Zombie/.test(agentName)) {
         agentImage = `${process.env.NEXT_PUBLIC_BASE_PATH}/images/characters/Zombie_1.png`;
     }
-    return (
-        <div className={styles.agent}>
-            <div>
-                <img
-                    src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/ChatCircleDots-R.png`}
-                    alt="Talking"
-                    className={`${styles.leftChatIcon} ${isTalking ? '' : styles.hidden}`}
-                    width={32}
-                    height={32}
-                />
-                {isThinking && (
+
+    if (map == "stage") {
+        return (
+            <div className={styles.agent}>
+                <div>
                     <img
-                        src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/lightbulb.gif`}
-                        alt="Thinking"
-                        className={styles.thoughtBubbleIcon}
-                        width={16}
-                        height={16}
+                        src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/ChatCircleDots-R.png`}
+                        alt="Talking"
+                        className={`${styles.stageLeftChatIcon} ${isTalking ? '' : styles.hidden}`}
+                        width={90}
+                        height={90}
                     />
-                )}
-                {status == "dead" && (
+                    {isThinking && (
+                        <img
+                            src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/lightbulb.gif`}
+                            alt="Thinking"
+                            className={styles.stageThoughtBubbleIcon}
+                            width={75}
+                            height={75}
+                        />
+                    )}
+                    {status == "dead" && (
+                        <img
+                            src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/dead.png`}
+                            alt="Dead"
+                            className={styles.stageDeadIcon}
+                            width={75}
+                            height={75}
+                        />
+                    )}
+                </div>
+                <img
+                    src={agentImage}
+                    alt={agentName}
+                    width={150}
+                    height={150}
+                />
+            </div>
+        );
+    }
+    else {
+        return (
+            <div className={styles.agent}>
+                <div>
                     <img
-                        src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/dead.png`}
-                        alt="Dead"
-                        className={styles.deadIcon}
-                        width={16}
-                        height={16}
+                        src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/ChatCircleDots-R.png`}
+                        alt="Talking"
+                        className={`${styles.leftChatIcon} ${isTalking ? '' : styles.hidden}`}
+                        width={32}
+                        height={32}
                     />
-                )}
+                    {isThinking && (
+                        <img
+                            src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/lightbulb.gif`}
+                            alt="Thinking"
+                            className={styles.thoughtBubbleIcon}
+                            width={16}
+                            height={16}
+                        />
+                    )}
+                    {status == "dead" && (
+                        <img
+                            src={`${process.env.NEXT_PUBLIC_BASE_PATH}/images/icons/dead.png`}
+                            alt="Dead"
+                            className={styles.deadIcon}
+                            width={16}
+                            height={16}
+                        />
+                    )}
+                </div>
+                <img
+                    src={agentImage}
+                    alt={agentName}
+                    width={32}
+                    height={32}
+                />
             </div>
-            <img
-                src={agentImage}
-                alt={agentName}
-                width={32}
-                height={32}
-            />
-        </div>
-    );
+        );
+    }
 };
 
 export default AgentSprite;
diff --git a/web/src/components/RenderLevel.module.css b/web/src/components/RenderLevel.module.css
index db495d3..6e0070b 100644
--- a/web/src/components/RenderLevel.module.css
+++ b/web/src/components/RenderLevel.module.css
@@ -50,3 +50,29 @@
 .sidebarVisible {
     width: 200px; /*calc(var(--game-viewport-width) * 0.30);*/
 }
+
+.stageImg {
+    width: 100vw;
+    height: 100vh;
+    object-fit: "cover";
+}
+
+.agentContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    /* Prevent wrapping */
+    justify-content: center;
+    align-items: flex-end;
+    padding: 150px;
+}
+
+.agentItem {
+    margin-right: 20px;
+    /* Adjust spacing between agents */
+    position: relative;
+}
diff --git a/web/src/components/RenderLevel.tsx b/web/src/components/RenderLevel.tsx
index b645c9e..c4c71af 100644
--- a/web/src/components/RenderLevel.tsx
+++ b/web/src/components/RenderLevel.tsx
@@ -28,7 +28,7 @@ async function getData(sim_id: string, fromIndex: number) {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const RenderLevel: React.FC<{ simId: string }> = ({ simId }) => {
+const RenderLevel: React.FC<{ simId: string, map?: string | null, img?: string | null }> = ({ simId, map, img }) => {
     const [isPlaying, setIsPlaying] = useState(true);
     const [followAgent, setFollowAgent] = useState<Agent | undefined>(undefined);
     const [levelState, setLevelState] = useState<LevelState>({ stepId: 0, substepId: 0, agents: [] });
@@ -84,6 +84,30 @@ const RenderLevel: React.FC<{ simId: string }> = ({ simId }) => {
     }
 
     const renderAgents = () => {
+        if (map == "stage") {
+            console.log("STEPID", levelState.stepId);
+            console.log("AGENT LENGTH", levelState.agents.length);
+            return levelState.agents.map((agent, index) => {
+                const x = agent.position.x;
+                const y = agent.position.y;
+
+                const style: React.CSSProperties = {
+                    position: 'relative',
+                    cursor: 'pointer',
+                    top: x,
+                    left: y,
+                };
+
+                return (
+                    <div key={index}
+                        style={style}
+                        className={styles.placement}>
+                        <AgentSprite agentName={agent.agentName} isTalking={agent.isTalking} isThinking={agent.isThinking} status={agent.status} map={map} />
+                    </div>
+                );
+            });
+
+        }
         return levelState.agents.map((agent, index) => {
             const x = agent.position.x * CELL_SIZE;
             const y = agent.position.y * CELL_SIZE;
@@ -100,19 +124,39 @@ const RenderLevel: React.FC<{ simId: string }> = ({ simId }) => {
                     style={style}
                     className={styles.placement}
                     onClick={() => setFollowAgent(agent)}>
-                    <AgentSprite agentName={agent.agentName} isTalking={agent.isTalking} isThinking={agent.isThinking} status={agent.status} />
+                    <AgentSprite agentName={agent.agentName} isTalking={agent.isTalking} isThinking={agent.isThinking} status={agent.status} map=""/>
                 </div>
             );
         });
     };
 
+    if (map == "stage") {
+        return (
+            <div className={styles.fullScreenContainer}>
+                <img
+                    src={img ? (process.env.NEXT_PUBLIC_CONTENT_DIRECTORY + "/images/maps/" + img) : (process.env.NEXT_PUBLIC_BASE_PATH + "/images/maps/Large.png")}
+                    alt="Stage Map"
+                    className={styles.stageImg}
+                />
+                <div className={styles.agentContainer}>
+                    <>
+                        {renderAgents()}
+                    </>
+                </div>
+            </div>
+        );
+    }
+
     return (
 
         <div className={styles.fullScreenContainer}>
             <div className={styles.gameContainer}>
 
                 <Camera followAgent={followAgent} setFollowAgent={setFollowAgent}>
-                    <img src={process.env.NEXT_PUBLIC_BASE_PATH + "/images/maps/Large.png"} alt="Default Map" />
+                    <img
+                        src={img ? (process.env.NEXT_PUBLIC_CONTENT_DIRECTORY + "/images/maps/" + img) : (process.env.NEXT_PUBLIC_BASE_PATH + "/images/maps/Large.png")}
+                        alt="Default Map"
+                    />
                     <>
                         {renderAgents()}
                     </>
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index ac055a5..a46170d 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -131,7 +131,7 @@ const Sidebar: React.FC<SidebarProps> = (
         <div className={styles.sidebar}>
             {renderControls()}
             {agentPlacement && <div className={styles.agentModule}>
-                <AgentSprite agentName={agentPlacement.agentName} isTalking={false} isThinking={false} status={agentPlacement.status} />
+                <AgentSprite agentName={agentPlacement.agentName} isTalking={false} isThinking={false} status={agentPlacement.status} map=""/>
                 <div className={styles.agentName}>{agentPlacement.agentName}</div>
                 <div className={styles.thoughtSelector}>
                     <label>