diff --git a/client/index.html b/client/index.html
index 333249f..019a64c 100644
--- a/client/index.html
+++ b/client/index.html
@@ -5,6 +5,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Box Game</title>
+    <meta name="description"
+        content="Jump, collect hearts, and beat your friends in Box Game – a fast-paced multiplayer platformer." />
     <link rel="shortcut icon" href="icon.png" type="image" />
     <link rel="stylesheet" href="styles.css" />
 </head>
@@ -13,28 +15,72 @@
 
     <!-- ===== LOBBY SCREEN ===== -->
     <div id="nameScreen">
-        <div class="nameBox" id="lobbyBox">
-            <h2>Box Game</h2>
-            <p>Jump, collect hearts, beat your friends.</p>
+        <div class="landing-container">
 
-            <label class="field-label">Your Name</label>
-            <input type="text" id="nameInput" placeholder="Enter your name…" maxlength="15" autofocus />
+            <section class="hero">
 
-            <div class="divider"><span>choose a room</span></div>
+                <span class="hero-tag">MULTIPLAYER PLATFORMER</span>
 
-            <!-- Create Room -->
-            <button id="createRoomBtn" class="btn-primary">✦ Create Private Room</button>
+                <h1>BOX GAME</h1>
+
+                <p class="hero-description">
+                    Jump across platforms, collect points, compete with your friends,
+                    and top the leaderboard.
+                </p>
+
+                <!-- <div class="hero-features"> -->
+                <!--     <div class="feature"> -->
+                <!--         <span>⚡</span> -->
+                <!--         <p>Low Latency</p> -->
+                <!--     </div> -->
+                <!---->
+                <!--     <div class="feature"> -->
+                <!--         <span>❤</span> -->
+                <!--         <p>Collect Hearts</p> -->
+                <!--     </div> -->
+                <!---->
+                <!--     <div class="feature"> -->
+                <!--         <span>👥</span> -->
+                <!--         <p>Private Rooms</p> -->
+                <!--     </div> -->
+                <!-- </div> -->
+
+            </section>
+
+            <div class="nameBox" id="lobbyBox">
+
+                <h2>Play Now</h2>
+
+                <p>Enter your name and join a room.</p>
+
+                <label class="field-label">Player Name</label>
+
+                <input type="text" id="nameInput" maxlength="15" placeholder="Player name">
+
+                <button id="createRoomBtn" class="btn-primary">
+                    Create Private Room
+                </button>
+
+                <div class="divider">
+                    <span>OR</span>
+                </div>
+
+                <div class="join-row">
+
+                    <input id="roomCodeInput" maxlength="5" placeholder="ABCDE">
+
+                    <button id="joinRoomBtn" class="btn-secondary">
+                        Join
+                    </button>
+
+                </div>
+
+                <p id="lobbyError" class="error-msg"></p>
 
-            <!-- Join Room -->
-            <div class="join-row">
-                <input type="text" id="roomCodeInput" placeholder="Room code…" maxlength="5" />
-                <button id="joinRoomBtn" class="btn-secondary">Join</button>
             </div>
 
-            <p id="lobbyError" class="error-msg"></p>
         </div>
     </div>
-
     <!-- ===== IN-GAME HUD ===== -->
     <div id="hud" style="display:none;">
         <button id="menuBtn" title="Options">☰</button>
@@ -63,9 +109,9 @@ <h3>Options</h3>
     <script src="https://cdn.socket.io/4.8.3/socket.io.min.js"
         integrity="sha384-kzavj5fiMwLKzzD1f8S7TeoVIEi7uKHvbTA3ueZkrzYq75pNQUiUi6Dy98Q3fxb0"
         crossorigin="anonymous"></script>
-    <!-- ⬇ Change this URL when deploying to Vercel (point to your VM's gateway) -->
+    <!-- Gateway URL: set to production gateway for Vercel deployment -->
     <script>
-        window.GATEWAY_URL = "http://localhost:8080";
+        window.GATEWAY_URL = "https://gateway.boxgame.shadyggs.xyz";
     </script>
     <script src="index.js"></script>
     <script src="game.js"></script>
diff --git a/client/index.js b/client/index.js
index 2d02a8f..528ec9e 100644
--- a/client/index.js
+++ b/client/index.js
@@ -2,8 +2,15 @@
 // GATEWAY_URL is injected by index.html as a <script> block so it works
 // both locally and on Vercel without a bundler.
 // Locally:  window.GATEWAY_URL = "http://localhost:3000"
-// Vercel:   window.GATEWAY_URL = "https://<your-vm-ip-or-domain>"
-const GATEWAY_URL = window.GATEWAY_URL || "http://localhost:3000";
+// Vercel:   window.GATEWAY_URL = "https://gateway.boxgame.shadyggs.xyz"
+const GATEWAY_URL = window.GATEWAY_URL;
+
+// In production the game-server domain is server.boxgame.shadyggs.xyz.
+// Nginx terminates TLS for wss://server.boxgame.shadyggs.xyz:<port> and
+// forwards to the hostNetwork pod on the same port.
+// In local dev the cookie will contain "localhost" so http:// is used.
+const isLocalDev = GATEWAY_URL.startsWith("http://");
+const WS_SCHEME = isLocalDev ? "http" : "wss";
 
 // socket is created lazily after a room is assigned so we know which
 // game-server host+port to connect to.
@@ -52,29 +59,24 @@ createRoomBtn.addEventListener("click", async () => {
   try {
     // Gateway picks the least-loaded game server, sets cookies
     // (hostIp, port, roomID) and returns.
-    const res = await fetch(`${GATEWAY_URL}/createRoom`, {
-      credentials: "include", // receive the Set-Cookie headers
-    });
-
+    const res = await fetch(`${GATEWAY_URL}/createRoom`);
     if (!res.ok) {
       showLobbyError("No game servers available. Try again.");
       setLobbyLoading(false);
       return;
     }
-
-    // Read the cookies the gateway just set
-    const hostIp = getCookie("hostIp");
-    const port = getCookie("port");
-    const roomID = getCookie("roomID");
-
+    console.log("Logging res:");
+    console.log(res);
+    console.log("Logging hostIp and port");
+    const { hostIp, port, roomID } = await res.json();
+    console.log(`hostIp: ${hostIp}, port: ${port}`);
     if (!hostIp || !port || !roomID) {
       showLobbyError("Server response missing. Try again.");
       setLobbyLoading(false);
       return;
     }
-
-    // Connect socket directly to the assigned game-server
-    connectSocket(`http://${hostIp}:${port}`, () => {
+    // Connect socket directly to the assigned game-server via TLS in prod
+    connectSocket(`${WS_SCHEME}://${hostIp}:${port}`, () => {
       socket.emit("createRoom", pName, roomID, (ack) => {
         setLobbyLoading(false);
         if (ack && ack.success) {
@@ -118,17 +120,17 @@ joinRoomBtn.addEventListener("click", async () => {
       return;
     }
 
-    const hostIp = getCookie("hostIp");
-    const port = getCookie("port");
+    const { hostIp, port, roomID } = await res.json();
+    console.log(hostIp);
 
-    if (!hostIp || !port) {
+    if (!hostIp || !port || !roomID) {
       showLobbyError("Could not locate room server.");
       setLobbyLoading(false);
       return;
     }
 
-    connectSocket(`http://${hostIp}:${port}`, () => {
-      socket.emit("joinRoom", { name: pName, code }, (ack) => {
+    connectSocket(`${WS_SCHEME}://${hostIp}:${port}`, () => {
+      socket.emit("joinRoom", { name: pName, roomID }, (ack) => {
         setLobbyLoading(false);
         if (ack && ack.success) {
           enterGame(ack.code);
diff --git a/client/styles.css b/client/styles.css
index 70d6cd4..40caf27 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -12,7 +12,8 @@ body {
 
 body {
   overflow: hidden;
-  background-color: rgb(217, 235, 25);
+  background: #080808;
+  color: #fff;
 }
 
 canvas {
@@ -23,12 +24,13 @@ canvas {
 
 /* ===========================
    LOBBY / NAME SCREEN
-   =========================== */
+=========================== */
+
 #nameScreen {
   position: fixed;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f1a 70%);
+  inset: 0;
+  background:
+    radial-gradient(circle at top, #1d0000 0%, #0d0d0d 40%, #050505 100%);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -38,373 +40,705 @@ canvas {
 #nameScreen::before {
   content: "";
   position: absolute;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   background:
-    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.3), transparent),
-    radial-gradient(2px 2px at 40% 70%, rgba(255,255,255,0.2), transparent),
-    radial-gradient(2px 2px at 60% 20%, rgba(255,255,255,0.3), transparent),
-    radial-gradient(2px 2px at 80% 50%, rgba(255,255,255,0.2), transparent),
-    radial-gradient(2px 2px at 10% 80%, rgba(255,255,255,0.15),transparent),
-    radial-gradient(2px 2px at 70% 90%, rgba(255,255,255,0.2), transparent),
-    radial-gradient(2px 2px at 90% 10%, rgba(255,255,255,0.25),transparent),
-    radial-gradient(2px 2px at 50% 50%, rgba(255,255,255,0.1), transparent);
-  animation: twinkle 4s ease-in-out infinite alternate;
+    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.18), transparent),
+    radial-gradient(2px 2px at 40% 70%, rgba(255,80,80,.22), transparent),
+    radial-gradient(2px 2px at 70% 25%, rgba(255,255,255,.15), transparent),
+    radial-gradient(2px 2px at 80% 60%, rgba(255,80,80,.18), transparent),
+    radial-gradient(2px 2px at 15% 85%, rgba(255,255,255,.12), transparent),
+    radial-gradient(2px 2px at 60% 90%, rgba(255,80,80,.16), transparent);
+  animation: twinkle 5s ease-in-out infinite alternate;
   pointer-events: none;
 }
 
 @keyframes twinkle {
-  0%   { opacity: 0.5; }
-  100% { opacity: 1; }
+  from {
+    opacity: .4;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .nameBox {
-  background: rgba(255,255,255,0.05);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  padding: 44px 42px 36px;
-  border-radius: 22px;
-  text-align: center;
-  border: 1px solid rgba(255,255,255,0.1);
-  box-shadow:
-    0 25px 60px rgba(0,0,0,0.5),
-    0 0 40px rgba(100,100,255,0.08),
-    inset 0 1px 0 rgba(255,255,255,0.1);
   position: relative;
   z-index: 1;
-  animation: fadeInUp 0.8s ease-out;
-  min-width: 380px;
+
+  min-width: 390px;
+
+  padding: 44px 40px 36px;
+
+  border-radius: 6px;
+
+  background: rgba(18,18,18,.94);
+
+  backdrop-filter: blur(20px);
+
+  border: 1px solid rgba(239,68,68,.15);
+
+  box-shadow:
+      0 25px 70px rgba(0,0,0,.8),
+      0 0 40px rgba(220,38,38,.15),
+      inset 0 1px rgba(255,255,255,.04);
+
+  animation: fadeInUp .7s ease;
+}
+
+.nameBox::before{
+  content:"";
+  position:absolute;
+  inset:-1px;
+  border-radius:6px;
+  background:linear-gradient(
+      135deg,
+      rgba(239,68,68,.35),
+      transparent,
+      rgba(248,113,113,.28)
+  );
+  z-index:-1;
+  opacity:0;
+  transition:.35s;
+}
+
+.nameBox:hover::before{
 }
 
 @keyframes fadeInUp {
-  0%   { opacity: 0; transform: translateY(30px) scale(0.95); }
-  100% { opacity: 1; transform: translateY(0)    scale(1); }
+  from {
+    opacity:0;
+    transform:translateY(30px) scale(.96);
+  }
+  to {
+    opacity:1;
+    transform:none;
+  }
 }
 
-.nameBox h2 {
-  color: #fff;
-  font-size: 30px;
-  font-weight: 800;
-  margin-bottom: 6px;
-  letter-spacing: 2px;
-  background: linear-gradient(135deg, #ffffff, #a78bfa, #60a5fa);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+.nameBox h2{
+  font-size:30px;
+  font-weight:800;
+  letter-spacing:2px;
+  margin-bottom:8px;
+
+  background:linear-gradient(
+      135deg,
+      #ffffff,
+      #ef4444,
+      #fca5a5
+  );
+
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
 }
 
-.nameBox > p {
-  color: rgba(255,255,255,0.4);
-  font-size: 13px;
-  margin-bottom: 24px;
+.nameBox>p{
+  color:rgba(255,255,255,.5);
+  font-size:13px;
+  margin-bottom:24px;
 }
 
-/* field labels */
-.field-label {
-  display: block;
-  text-align: left;
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: rgba(255,255,255,0.4);
-  margin-bottom: 6px;
+/* labels */
+
+.field-label{
+  display:block;
+  text-align:left;
+  font-size:11px;
+  text-transform:uppercase;
+  letter-spacing:1px;
+  font-weight:600;
+
+  color:rgba(255,255,255,.45);
+
+  margin-bottom:6px;
 }
 
 /* inputs */
+
 .nameBox input,
-.modal-box input {
-  padding: 13px 18px;
-  width: 100%;
-  border: 2px solid rgba(255,255,255,0.1);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.07);
-  color: #fff;
-  font-size: 15px;
-  outline: none;
-  transition: all 0.25s ease;
-  text-align: center;
-  letter-spacing: 0.5px;
-  margin-bottom: 14px;
+.modal-box input{
+
+  width:100%;
+
+  padding:13px 18px;
+
+  border-radius:6px;
+
+  border:2px solid rgba(239,68,68,.12);
+
+  background:#111;
+
+  color:#fff;
+
+  text-align:center;
+
+  font-size:15px;
+
+  outline:none;
+
+  transition:.25s;
+
+  margin-bottom:14px;
 }
 
 .nameBox input::placeholder,
-.modal-box input::placeholder {
-  color: rgba(255,255,255,0.28);
-  font-style: italic;
+.modal-box input::placeholder{
+  color:rgba(255,255,255,.25);
 }
 
 .nameBox input:focus,
-.modal-box input:focus {
-  border-color: rgba(167,139,250,0.6);
-  background: rgba(255,255,255,0.1);
-  box-shadow: 0 0 18px rgba(167,139,250,0.15);
+.modal-box input:focus{
+
+  border-color:#ef4444;
+
+  background:#171717;
+
+  box-shadow:
+      0 0 18px rgba(239,68,68,.22);
 }
 
-/* buttons */
-.btn-primary {
-  padding: 13px 24px;
-  cursor: pointer;
-  width: 100%;
-  border: none;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #7c3aed, #6366f1, #3b82f6);
-  color: #fff;
-  font-size: 15px;
-  font-weight: 700;
-  letter-spacing: 0.8px;
-  text-transform: uppercase;
-  transition: all 0.25s ease;
-  position: relative;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
-  margin-bottom: 10px;
+/* PRIMARY BUTTON */
+
+.btn-primary{
+
+  width:100%;
+
+  padding:13px;
+
+  border:none;
+
+  border-radius:4px;
+
+  cursor:pointer;
+
+  color:#fff;
+
+  font-size:15px;
+
+  font-weight:700;
+
+  text-transform:uppercase;
+
+  letter-spacing:.8px;
+
+  position:relative;
+
+  overflow:hidden;
+
+  background:linear-gradient(
+      135deg,
+      #991b1b,
+      #dc2626,
+      #ef4444
+  );
+
+  box-shadow:
+      0 6px 22px rgba(220,38,38,.35);
+
+  transition:.25s;
+
+  margin-bottom:10px;
 }
 
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 30px rgba(99,102,241,0.6);
-  background: linear-gradient(135deg, #8b5cf6, #818cf8, #60a5fa);
+.btn-primary:hover:not(:disabled){
+
+
+  background:linear-gradient(
+      135deg,
+      #b91c1c,
+      #ef4444,
+      #f87171
+  );
+
+  box-shadow:
+      0 10px 30px rgba(239,68,68,.45);
 }
 
-.btn-primary:active { transform: translateY(0); }
-.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-primary:disabled{
+  opacity:.45;
+  cursor:not-allowed;
+}
 
-/* shimmer on primary */
-.btn-primary::after {
-  content: "";
-  position: absolute;
-  top: -50%; left: -60%;
-  width: 40%; height: 200%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
-  transform: skewX(-20deg);
-  animation: shimmer 3s ease-in-out infinite;
-}
-
-@keyframes shimmer {
-  0%   { left: -60%; }
-  100% { left: 120%; }
-}
-
-.btn-secondary {
-  padding: 12px 18px;
-  cursor: pointer;
-  border: 2px solid rgba(255,255,255,0.15);
-  border-radius: 12px;
-  background: rgba(255,255,255,0.06);
-  color: rgba(255,255,255,0.85);
-  font-size: 14px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-  transition: all 0.2s ease;
-  white-space: nowrap;
-}
-
-.btn-secondary:hover {
-  border-color: rgba(167,139,250,0.5);
-  background: rgba(167,139,250,0.1);
-  color: #fff;
+.btn-primary::after{
+
+  content:"";
+
+  position:absolute;
+
+  top:-50%;
+  left:-70%;
+
+  width:40%;
+  height:200%;
+
+  transform:skewX(-20deg);
+
+  background:
+      linear-gradient(
+          90deg,
+          transparent,
+          rgba(255,255,255,.18),
+          transparent
+      );
+
+  animation:shimmer 3s infinite;
 }
 
-.btn-ghost {
-  padding: 11px 18px;
-  cursor: pointer;
-  border: none;
-  border-radius: 12px;
-  background: transparent;
-  color: rgba(255,255,255,0.4);
-  font-size: 13px;
-  width: 100%;
-  transition: all 0.2s ease;
+@keyframes shimmer{
+
+  from{
+      left:-70%;
+  }
+
+  to{
+      left:120%;
+  }
+
+}
+
+/* secondary */
+
+.btn-secondary{
+
+  padding:12px 18px;
+
+  border-radius:4px;
+
+  cursor:pointer;
+
+  background:      #dc2626;
+
+  color:#f5f5f5;
+
+  border:2px solid rgba(239,68,68,.18);
+
+  transition:.2s;
+
+  font-weight:600;
+}
+
+.btn-secondary:hover{
+
+  border-color:#ef4444;
+
+  background:#1d0a0a;
+
+  color:#fff;
+}
+
+.btn-ghost{
+
+  width:100%;
+
+  padding:11px;
+
+  border:none;
+
+  background:transparent;
+
+  color:rgba(255,255,255,.45);
+
+  border-radius:12px;
+
+  cursor:pointer;
+
+  transition:.2s;
 }
 
-.btn-ghost:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.05); }
+.btn-ghost:hover{
+
+  color:#fff;
+
+  background:rgba(239,68,68,.08);
+}
 
 /* divider */
-.divider {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin: 18px 0 16px;
+
+.divider{
+
+  display:flex;
+
+  align-items:center;
+
+  gap:10px;
+
+  margin:18px 0;
 }
 
 .divider::before,
-.divider::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: rgba(255,255,255,0.1);
+.divider::after{
+
+  content:"";
+
+  flex:1;
+
+  height:1px;
+
+  background:rgba(239,68,68,.15);
 }
 
-.divider span {
-  color: rgba(255,255,255,0.3);
-  font-size: 11px;
-  letter-spacing: 1px;
-  text-transform: uppercase;
+.divider span{
+
+  color:rgba(255,255,255,.3);
+
+  font-size:11px;
+
+  text-transform:uppercase;
+
+  letter-spacing:1px;
 }
 
 /* join row */
-.join-row {
-  display: flex;
-  gap: 8px;
+
+.join-row{
+  display:flex;
+  gap:8px;
 }
 
-.join-row input {
-  flex: 1;
-  margin-bottom: 0;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 3px;
-  font-weight: 700;
-  font-size: 16px;
+.join-row input{
+  flex:1;
+  margin-bottom:0;
+  letter-spacing:3px;
+  font-weight:700;
+  text-transform:uppercase;
 }
 
-.join-row .btn-secondary {
-  flex-shrink: 0;
+.error-msg{
+  min-height:18px;
+  margin-top:10px;
+  color:#f87171;
+  opacity:0;
+  transition:.35s;
 }
 
-/* error message */
-.error-msg {
-  color: #ff6b6b;
-  font-size: 13px;
-  min-height: 18px;
-  margin-top: 10px;
-  transition: opacity 0.4s ease;
-  opacity: 0;
+/* ===========================
+   HUD
+=========================== */
+
+#hud{
+
+  position:fixed;
+
+  top:14px;
+  right:14px;
+
+  display:flex;
+
+  gap:10px;
+
+  align-items:center;
+
+  z-index:5;
 }
 
-/* glow ring */
-.nameBox::before {
-  content: "";
-  position: absolute;
-  inset: -1px;
-  border-radius: 22px;
-  background: linear-gradient(135deg, rgba(167,139,250,0.3), transparent, rgba(96,165,250,0.3));
-  z-index: -1;
-  opacity: 0;
-  transition: opacity 0.5s ease;
+#menuBtn{
+
+  width:40px;
+  height:40px;
+
+  border:none;
+
+  border-radius:10px;
+
+  background:rgba(0,0,0,.75);
+
+  color:#f87171;
+
+  cursor:pointer;
+
+  transition:.2s;
 }
 
-.nameBox:hover::before { opacity: 1; }
+#menuBtn:hover{
+
+  background:#dc2626;
+
+  color:white;
+
+  transform:scale(1.08);
+}
+
+#roomBadge{
+
+  padding:8px 14px;
+
+  border-radius:10px;
+
+  background:rgba(12,12,12,.9);
+
+  border:1px solid rgba(239,68,68,.18);
+
+  color:#fca5a5;
+
+  font-size:13px;
+
+  font-weight:700;
+
+  letter-spacing:1.5px;
+
+  text-transform:uppercase;
+}
 
 /* ===========================
-   IN-GAME HUD
-   =========================== */
-#hud {
-  position: fixed;
-  top: 14px;
-  right: 14px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  z-index: 5;
-}
-
-#menuBtn {
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 10px;
-  background: rgba(0,0,0,0.55);
-  backdrop-filter: blur(8px);
-  color: rgba(255,255,255,0.85);
-  font-size: 18px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+   MODAL
+=========================== */
+
+#optionsModal{
+
+  position:fixed;
+
+  inset:0;
+
+  display:flex;
+
+  justify-content:center;
+
+  align-items:center;
+
+  background:rgba(0,0,0,.72);
+
+  backdrop-filter:blur(4px);
+
+  z-index:20;
 }
 
-#menuBtn:hover {
-  background: rgba(99,102,241,0.7);
-  color: #fff;
-  transform: scale(1.08);
+.modal-box{
+
+  min-width:340px;
+
+  padding:36px 36px 28px;
+
+  border-radius:20px;
+
+  background:rgba(18,18,18,.97);
+
+  border:1px solid rgba(239,68,68,.15);
+
+  box-shadow:
+      0 30px 80px rgba(0,0,0,.85),
+      0 0 45px rgba(220,38,38,.12);
+
+  animation:popIn .22s;
 }
 
-#roomBadge {
-  background: rgba(0,0,0,0.5);
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255,255,255,0.12);
-  border-radius: 10px;
-  padding: 8px 14px;
-  color: rgba(255,255,255,0.9);
-  font-size: 13px;
-  font-weight: 700;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
+@keyframes popIn{
+
+  from{
+      opacity:0;
+      transform:scale(.9);
+  }
+
+  to{
+      opacity:1;
+      transform:scale(1);
+  }
+
 }
 
-/* ===========================
-   OPTIONS MODAL
-   =========================== */
-#optionsModal {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,0.6);
-  backdrop-filter: blur(4px);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 20;
-  animation: fadeIn 0.15s ease;
+.modal-box h3{
+
+  margin-bottom:22px;
+
+  font-size:22px;
+
+  background:linear-gradient(
+      135deg,
+      #fff,
+      #ef4444
+  );
+
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
 }
 
-@keyframes fadeIn {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
+.room-code-display{
+
+  display:block;
+
+  margin:8px 0;
+
+  font-size:28px;
+
+  font-weight:900;
+
+  letter-spacing:6px;
+
+  color:#ef4444;
 }
 
-.modal-box {
-  background: rgba(20,20,40,0.95);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 20px;
-  padding: 36px 36px 28px;
-  min-width: 340px;
-  text-align: center;
-  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(99,102,241,0.1);
-  animation: popIn 0.2s cubic-bezier(0.34,1.56,0.64,1);
+#roomInfo{
+
+  margin-top:8px;
+
+  padding:12px 16px;
+
+  border-radius:12px;
+
+  background:#111;
+
+  border:1px solid rgba(239,68,68,.12);
+
+  color:rgba(255,255,255,.55);
+
+  font-size:12px;
 }
 
-@keyframes popIn {
-  0%   { transform: scale(0.85); opacity: 0; }
-  100% { transform: scale(1);    opacity: 1; }
+#roomInfo small{
+
+  display:block;
+
+  margin-top:4px;
+
+  color:rgba(255,255,255,.35);
 }
 
-.modal-box h3 {
-  color: #fff;
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 22px;
-  background: linear-gradient(135deg, #ffffff, #a78bfa);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.modal-box .field-label { margin-top: 4px; }
-
-.room-code-display {
-  font-size: 28px;
-  font-weight: 900;
-  letter-spacing: 6px;
-  color: #a78bfa;
-  display: block;
-  margin: 8px 0 4px;
+.landing-container{
+
+    width:min(1200px,92vw);
+
+    display:grid;
+
+    grid-template-columns:1fr 430px;
+
+    align-items:center;
+
+    gap:80px;
 }
 
-#roomInfo {
-  background: rgba(255,255,255,0.04);
-  border: 1px solid rgba(255,255,255,0.08);
-  border-radius: 12px;
-  padding: 12px 16px;
-  margin-top: 4px;
-  color: rgba(255,255,255,0.5);
-  font-size: 12px;
+.hero{
+
+    color:white;
 }
 
-#roomInfo small {
-  display: block;
-  margin-top: 2px;
-  color: rgba(255,255,255,0.35);
+.hero-tag{
+
+    display:inline-block;
+
+    padding:8px 18px;
+
+    border-radius:999px;
+
+    background:rgba(239,68,68,.12);
+
+    border:1px solid rgba(239,68,68,.3);
+
+    color:#f87171;
+
+    font-size:.75rem;
+
+    letter-spacing:2px;
+
+    margin-bottom:24px;
+}
+
+.hero h1{
+
+    font-size:72px;
+
+    line-height:.95;
+
+    margin-bottom:20px;
+
+    font-weight:900;
+
+    background:linear-gradient(
+        180deg,
+        white,
+        #ef4444
+    );
+
+    -webkit-background-clip:text;
+
+    -webkit-text-fill-color:transparent;
+}
+
+.hero-description{
+
+    max-width:560px;
+
+    color:rgba(255,255,255,.7);
+
+    font-size:20px;
+
+    line-height:1.8;
+
+    margin-bottom:42px;
+}
+
+.hero-features{
+
+    display:flex;
+
+    gap:20px;
+
+    flex-wrap:wrap;
+}
+
+.feature{
+
+    width:140px;
+
+    padding:20px;
+
+    border-radius:18px;
+
+    background:rgba(255,255,255,.03);
+
+    border:1px solid rgba(239,68,68,.12);
+
+    text-align:center;
+
+    transition:.25s;
+}
+
+.feature:hover{
+
+    transform:translateY(-6px);
+
+    border-color:#ef4444;
+
+    box-shadow:0 0 25px rgba(239,68,68,.18);
+}
+
+.feature span{
+
+    font-size:28px;
+
+    display:block;
+
+    margin-bottom:10px;
+}
+
+.feature p{
+
+    color:rgba(255,255,255,.8);
+
+    font-size:14px;
+}
+
+@media (max-width:900px){
+
+    .landing-container{
+
+        grid-template-columns:1fr;
+
+        text-align:center;
+
+        gap:40px;
+    }
+
+    .hero-description{
+
+        margin-inline:auto;
+    }
+
+    .hero-features{
+
+        justify-content:center;
+    }
+
+    .hero h1{
+
+        font-size:54px;
+    }
 }
diff --git a/gateway/index.ts b/gateway/index.ts
index 9e54091..8b9ecda 100644
--- a/gateway/index.ts
+++ b/gateway/index.ts
@@ -5,17 +5,23 @@ import addToRoom from "./routes/addToRoom";
 
 const app = express();
 app.use(express.json());
+
+// Allow the client origin to send credentials (cookies).
+// Locally:   ALLOWED_ORIGIN=http://localhost:5500  (or omit for *)
+// On Vercel: ALLOWED_ORIGIN=https://your-app.vercel.app
+const allowedOrigin = [
+  "https://gateway.boxgame.shadyggs.xyz",
+  "http://localhost:4689",
+  "https://boxgame.shadyggs.xyz",
+];
+
 app.use(
   cors({
-    origin: "http://localhost:3000",
+    origin: allowedOrigin,
     credentials: true,
   }),
 );
 
-// Allow the client origin to send credentials (cookies).
-// Locally: http://localhost:5500 or file:// – use * for dev convenience.
-// On Vercel: set ALLOWED_ORIGIN=https://your-app.vercel.app
-
 const port = process.env.PORT || 3000;
 let roomMaps: { [id: string]: { [id: string]: string | number } } = {};
 
@@ -28,6 +34,7 @@ app.get("/createRoom", createRoom);
 
 app.listen(port, () => {
   console.log(`Listening on ${port}`);
+  console.log(`CORS allowed origin: ${allowedOrigin}`);
 });
 
 export default roomMaps;
diff --git a/gateway/routes/addToRoom.ts b/gateway/routes/addToRoom.ts
index 3644719..8553968 100644
--- a/gateway/routes/addToRoom.ts
+++ b/gateway/routes/addToRoom.ts
@@ -1,17 +1,32 @@
 import { type Request, type Response } from "express";
 import roomMaps from "../index.ts";
+
+// Cross-site cookie options – must match createRoom.ts
+const COOKIE_OPTS = {
+  sameSite: "none" as const,
+  secure: true,
+  httpOnly: false,
+};
+
+// Public hostname clients use to reach game-server pods (same as createRoom)
+const SERVER_HOST_DOMAIN = process.env.SERVER_HOST_DOMAIN || "localhost";
+
 const addToRoom = async (req: Request, res: Response) => {
   // roomID comes from the query string: GET /add?roomID=ABCDE
+  console.log(`roomID recvd:${req.query.roomID}`);
   const roomId = (req.query.roomID as string | undefined)?.toUpperCase();
   if (!roomId || roomMaps[roomId] == undefined) {
     res.status(400).send("Invalid room id");
     return;
   }
 
-  // Use the same cookie names as createRoom so the client's getCookie() works
-  res.cookie("hostIp", roomMaps[roomId]["hostIp"]);
-  res.cookie("port", roomMaps[roomId]["port"]);
-  res.status(200).send("here have your server");
+  // Use the same cookie names as createRoom so the client's getCookie() works.
+  // Always send the public domain as hostIp so the browser can open wss://.
+  res.json({
+    hostIp: SERVER_HOST_DOMAIN,
+    port: roomMaps[roomId].port,
+    roomID: roomId,
+  });
   return;
 };
 
diff --git a/gateway/routes/createRoom.ts b/gateway/routes/createRoom.ts
index d127567..348d68f 100644
--- a/gateway/routes/createRoom.ts
+++ b/gateway/routes/createRoom.ts
@@ -1,10 +1,43 @@
 import { type Request, type Response } from "express";
 import generateRoom from "../helper/generateRoom";
 import roomMaps from "../index.ts";
+
+// Cross-site cookie options required for Vercel (HTTPS) → VM (different origin).
+// SameSite=None + Secure is mandatory for browsers to send cookies cross-site.
+const COOKIE_OPTS = {
+  sameSite: "none" as const,
+  secure: true,
+  httpOnly: false, // client JS must read these values
+};
+
+// The public hostname clients use to reach game-server pods.
+// Set SERVER_HOST_DOMAIN=server.boxgame.shadyggs.xyz in production.
+// The raw pod IP (hostNetwork) is unreachable from the browser.
+
+async function fetchWithRetry(url: string, retries = 30) {
+  while (retries--) {
+    try {
+      const res = await fetch(url);
+
+      if (res.ok) {
+        return res;
+      }
+    } catch (err) {
+      console.error(err);
+      console.log("Waiting for server manager...");
+    }
+
+    await new Promise((r) => setTimeout(r, 1000));
+  }
+
+  throw new Error("Server manager unavailable");
+}
+const SERVER_HOST_DOMAIN = process.env.SERVER_HOST_DOMAIN || "localhost";
+
 const createRoom = async (_: Request, res: Response) => {
   let code: string;
 
-  // Generate a unqiue room code
+  // Generate a unique room code
   do {
     code = generateRoom();
   } while (roomMaps[code] != undefined);
@@ -13,7 +46,7 @@ const createRoom = async (_: Request, res: Response) => {
 
   try {
     // Get assigned a server
-    const response = await fetch(`${serverManager}/assign`);
+    const response = await fetchWithRetry(`${serverManager}/assign`);
 
     // Validate response
     if (
@@ -24,22 +57,28 @@ const createRoom = async (_: Request, res: Response) => {
       return;
     }
 
-    let roomInfo = {
-      hostIp: "",
-      port: 0,
+    // Port mapping: server-manager returns the INTERNAL pod port (30000–31000).
+    // The client must connect to the EXTERNAL nginx TLS port (20000–21000).
+    // nginx listens on EXT_PORT and proxy_passes to EXT_PORT + 10000 (INT_PORT).
+    // So: externalPort = internalPort - 10000.
+    // See: nginx-gameserver-stream.conf and scripts/gen-stream-ports.sh.
+    const INTERNAL_TO_EXTERNAL_OFFSET = 10000;
+    const internalPort = Number(response.headers.get("port"));
+    const externalPort = internalPort - INTERNAL_TO_EXTERNAL_OFFSET;
+
+    const roomInfo = {
+      // Always use the public domain — the raw pod IP (hostNetwork) is
+      // not reachable from the browser.
+      hostIp: SERVER_HOST_DOMAIN,
+      port: externalPort, // external TLS port (20000–21000) — what clients dial
     };
-    roomInfo.hostIp = response.headers.get("hostip")!;
-    roomInfo.port = Number(response.headers.get("port"));
 
     // Add roominfo in the map
     // TODO: Instead of using a map, use a key value store like Redis
     roomMaps[code] = roomInfo;
 
-    // Set cookies
-    res.cookie("hostIp", roomInfo.hostIp);
-    res.cookie("port", roomInfo.port);
-    res.cookie("roomID", code);
-    res.status(200).send("Here have your server");
+    // Set cookies – must be SameSite=None; Secure for cross-site delivery
+    res.json({ hostIp: roomInfo.hostIp, port: roomInfo.port, roomID: code });
   } catch (e) {
     console.error(e);
     res.status(400).send("Bad request");
diff --git a/k8s.yaml b/k8s.yaml
index 4127b28..67b9765 100644
--- a/k8s.yaml
+++ b/k8s.yaml
@@ -176,7 +176,15 @@ spec:
               value: "3000"
             # Talk to server-manager inside the cluster
             - name: SERVER_MANAGER_URL
-              value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
+              value: "http://10.99.57.238:4689"
+            # Origin allowed by CORS – must match the Vercel deployment URL.
+            # Update this to your exact Vercel URL after first deploy.
+            - name: ALLOWED_ORIGIN
+              value: "https://boxgame.shadyggs.xyz"
+            # Public domain that clients use to reach game-server pods over wss://.
+            # Nginx stream on the VM terminates TLS and forwards to the pod port.
+            - name: SERVER_HOST_DOMAIN
+              value: "server.boxgame.shadyggs.xyz"
           readinessProbe:
             httpGet:
               path: /healthz
@@ -203,18 +211,30 @@ kind: Service
 metadata:
   name: gateway-svc
   namespace: box-game
-  labels:
-    app: gateway
 spec:
   selector:
     app: gateway
   ports:
-    - port: 80
+    - port: 3000
       targetPort: 3000
       protocol: TCP
-      name: http
-  # Change to LoadBalancer if your cluster is on a cloud provider
-  type: LoadBalancer
+  type: ClusterIP
+
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: gateway-nodeport
+  namespace: box-game
+spec:
+  type: NodePort
+  selector:
+    app: gateway
+  ports:
+    - name: http
+      port: 3000
+      targetPort: 3000
+      nodePort: 31000
 
 ---
 # =============================================================================
@@ -256,6 +276,14 @@ data:
                   fieldPath: status.hostIP
             - name: SERVER_MANAGER_URL
               value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
+            # Port range for game-server sockets.
+            # Nginx stream on the host forwards this range with TLS so that
+            # the browser can open wss://server.boxgame.shadyggs.xyz:<port>.
+            # Ensure these ports are open in the VM firewall (ufw / iptables).
+            - name: PORT_MIN
+              value: "30000"
+            - name: PORT_MAX
+              value: "31000"
           resources:
             requests:
               cpu: "200m"
@@ -306,8 +334,12 @@ spec:
                 fieldRef:
                   fieldPath: status.hostIP
             - name: SERVER_MANAGER_URL
-              value: "http://server-manager-svc.box-game.svc.cluster.local:4689"
-          # No fixed containerPort – the server calls listen(0) for a random port
+              value: "http://10.99.57.238:4689"
+            - name: PORT_MIN
+              value: "30000"
+            - name: PORT_MAX
+              value: "31000"
+          # No fixed containerPort – the server picks a port in [PORT_MIN, PORT_MAX]
           resources:
             requests:
               cpu: "200m"
@@ -315,3 +347,68 @@ spec:
             limits:
               cpu: "1000m"
               memory: "512Mi"
+
+---
+# =============================================================================
+# CERT-MANAGER – ClusterIssuer (Let's Encrypt)
+# =============================================================================
+# Prerequisites (run once on the VM):
+#   kubectl apply -f https://github.com/cert-manager/cert-manager/releases/latest/download/cert-manager.yaml
+# =============================================================================
+
+---
+apiVersion: cert-manager.io/v1
+kind: ClusterIssuer
+metadata:
+  name: letsencrypt-prod
+spec:
+  acme:
+    server: https://acme-v02.api.letsencrypt.org/directory
+    # Replace with your real email – Let's Encrypt sends expiry warnings here.
+    email: admin@boxgame.shadyggs.xyz
+    privateKeySecretRef:
+      name: letsencrypt-prod-key
+    solvers:
+      - http01:
+          ingress:
+            class: nginx
+
+---
+# =============================================================================
+# NGINX INGRESS – gateway.boxgame.shadyggs.xyz → HTTPS
+# =============================================================================
+# Prerequisites (run once on the VM, kubeadm):
+#   kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.10.1/deploy/static/provider/baremetal/deploy.yaml
+# Then patch it to use host ports 80/443:
+#   kubectl patch svc ingress-nginx-controller -n ingress-nginx \
+#     -p '{"spec":{"type":"NodePort","externalTrafficPolicy":"Local"}}'
+# =============================================================================
+
+---
+apiVersion: networking.k8s.io/v1
+kind: Ingress
+metadata:
+  name: gateway-ingress
+  namespace: box-game
+  annotations:
+    kubernetes.io/ingress.class: nginx
+    cert-manager.io/cluster-issuer: letsencrypt-prod
+    # Required for Socket.IO long-polling fallback (not used, but safe to have)
+    nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
+    nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
+spec:
+  tls:
+    - hosts:
+        - gateway.boxgame.shadyggs.xyz
+      secretName: gateway-tls
+  rules:
+    - host: gateway.boxgame.shadyggs.xyz
+      http:
+        paths:
+          - path: /
+            pathType: Prefix
+            backend:
+              service:
+                name: gateway-svc
+                port:
+                  number: 3000
diff --git a/nginx-gameserver-stream.conf b/nginx-gameserver-stream.conf
new file mode 100644
index 0000000..2eb46e8
--- /dev/null
+++ b/nginx-gameserver-stream.conf
@@ -0,0 +1,76 @@
+# =============================================================================
+# HOST-LEVEL NGINX STREAM CONFIG – game-server TLS proxy
+# =============================================================================
+# Purpose
+# -------
+# Game-server pods use hostNetwork and listen on INTERNAL ports 30000–31000
+# on the VM. The client is served from Vercel (HTTPS) and must connect via
+# wss:// (TLS). Plain ws:// is blocked by browsers as mixed content.
+#
+# This config terminates TLS for server.boxgame.shadyggs.xyz on EXTERNAL ports
+# 20000–21000 and forwards each plaintext connection to the same-offset INTERNAL
+# port on 127.0.0.1.
+#
+# Port design – TWO distinct ranges (IMPORTANT – do not collapse back to one)
+# ---------------------------------------------------------------------------
+#   EXTERNAL (TLS, clients connect here):  20000–21000
+#   INTERNAL (plaintext, pods listen here): 30000–31000
+#   OFFSET: 10000  →  nginx listens on EXT_PORT, proxies to EXT_PORT + 10000
+#
+#   Example: wss://server.boxgame.shadyggs.xyz:20426
+#            → nginx :20426 (TLS terminated)
+#            → 127.0.0.1:30426 (game-server pod, hostNetwork, plaintext)
+#
+#   WHY TWO RANGES: If nginx binds 0.0.0.0:N and proxy_pass 127.0.0.1:N,
+#   nginx owns loopback too. The connection loops back into nginx's own TLS
+#   listener, producing repeated SSL_do_handshake() errors in error.log:
+#     SSL: error:1408F09C:SSL routines:ssl3_get_record:http request
+#   Distinct ranges guarantee proxy_pass always hits the real pod.
+#
+# Deployment steps
+# ----------------
+# 1. Install nginx on the VM (NOT inside k8s – this runs on the host):
+#        sudo dnf install nginx   # Oracle Linux / RHEL
+#
+# 2. Obtain a TLS cert for server.boxgame.shadyggs.xyz:
+#        sudo certbot certonly --standalone -d server.boxgame.shadyggs.xyz
+#    Cert lands at:
+#        /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/fullchain.pem
+#        /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/privkey.pem
+#
+# 3. Ensure nginx.conf has at the top level (outside http {}):
+#        stream {
+#            include /etc/nginx/stream-conf.d/*.conf;
+#        }
+#
+# 4. Deploy this file and generate port blocks:
+#        sudo mkdir -p /etc/nginx/stream-conf.d
+#        sudo cp nginx-gameserver-stream.conf /etc/nginx/stream-conf.d/gameserver-tls.conf
+#        sudo bash scripts/gen-stream-ports.sh
+#
+# 5. Test and reload:
+#        sudo nginx -t && sudo systemctl reload nginx
+#
+# 6. Open the EXTERNAL port range in firewalls (NOT the internal 30000-31000):
+#        OCI Security List: TCP 20000-21000 ingress from 0.0.0.0/0
+#        OS iptables: sudo iptables -I INPUT -p tcp --dport 20000:21000 -j ACCEPT
+#        (80/tcp and 443/tcp already open for gateway Ingress + Let's Encrypt)
+# =============================================================================
+
+# ── TLS context shared by all server blocks in this file ────────────────
+# NOTE: This file is included INSIDE the stream {} block in nginx.conf.
+#       Do NOT wrap this in another stream {} block.
+ssl_certificate     /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/fullchain.pem;
+ssl_certificate_key /etc/letsencrypt/live/server.boxgame.shadyggs.xyz/privkey.pem;
+ssl_protocols       TLSv1.2 TLSv1.3;
+ssl_ciphers         HIGH:!aNULL:!MD5;
+ssl_session_cache   shared:SSL_stream:10m;
+ssl_session_timeout 10m;
+
+# ── Per-port server blocks (generated by scripts/gen-stream-ports.sh) ───────
+# External ports 20000–21000 (TLS) → internal ports 30000–31000 (plaintext pods).
+# Regenerate after any port-range change:
+#   sudo bash scripts/gen-stream-ports.sh
+#   sudo nginx -t && sudo systemctl reload nginx
+include /etc/nginx/stream-conf.d/gameserver-ports.conf;
+
diff --git a/scripts/gen-stream-ports.sh b/scripts/gen-stream-ports.sh
new file mode 100755
index 0000000..051372b
--- /dev/null
+++ b/scripts/gen-stream-ports.sh
@@ -0,0 +1,65 @@
+#!/usr/bin/env bash
+# =============================================================================
+# gen-stream-ports.sh
+# =============================================================================
+# Generates /etc/nginx/stream-conf.d/gameserver-ports.conf
+#
+# Port design – TWO distinct ranges to avoid self-loop:
+# ┌─────────────────────────────────────────────────────────────────────────┐
+# │  EXTERNAL range (TLS-facing, what clients connect to via wss://):       │
+# │    EXT_MIN=20000  EXT_MAX=21000                                         │
+# │                                                                         │
+# │  INTERNAL range (plaintext, where hostNetwork pods actually listen):    │
+# │    INT_MIN=30000  INT_MAX=31000  (OFFSET = INT_MIN - EXT_MIN = 10000)   │
+# │                                                                         │
+# │  Mapping:  nginx listens on EXT_PORT (TLS)                             │
+# │            → proxy_pass to 127.0.0.1:(EXT_PORT + OFFSET)               │
+# │                                                                         │
+# │  Example:  client connects to wss://server.boxgame.shadyggs.xyz:20426  │
+# │            nginx terminates TLS on :20426                               │
+# │            → forwards plaintext to game-server pod on 127.0.0.1:30426  │
+# │                                                                         │
+# │  WHY: If nginx binds 0.0.0.0:N and proxy_pass 127.0.0.1:N, nginx owns  │
+# │       loopback too, so the connection loops back into itself, causing   │
+# │       the SSL_do_handshake error in nginx error.log. Distinct ranges    │
+# │       guarantee proxy_pass always reaches the real pod, not nginx.      │
+# └─────────────────────────────────────────────────────────────────────────┘
+#
+# Run on the VM (requires root / sudo):
+#   sudo bash scripts/gen-stream-ports.sh
+#   sudo nginx -t && sudo systemctl reload nginx
+#
+# FIREWALL: Open EXT range (clients connect here), NOT the INT range:
+#   OCI Security List: TCP 20000-21000 ingress from 0.0.0.0/0
+#   OS iptables:       sudo iptables -I INPUT -p tcp --dport 20000:21000 -j ACCEPT
+# =============================================================================
+
+set -euo pipefail
+
+EXT_MIN="${EXT_MIN:-20000}"
+EXT_MAX="${EXT_MAX:-21000}"
+OFFSET=10000   # INT_PORT = EXT_PORT + OFFSET  →  30000-31000
+OUT="/etc/nginx/stream-conf.d/gameserver-ports.conf"
+
+echo "Generating stream blocks: external ${EXT_MIN}–${EXT_MAX} → internal $((EXT_MIN+OFFSET))–$((EXT_MAX+OFFSET))"
+echo "Output: ${OUT}"
+
+{
+  echo "# AUTO-GENERATED by gen-stream-ports.sh – do not edit manually"
+  echo "# Re-run the script to regenerate after changing EXT_MIN / EXT_MAX."
+  echo "#"
+  echo "# Port mapping: listen EXT_PORT (TLS) → proxy_pass 127.0.0.1:(EXT_PORT+${OFFSET})"
+  echo "# External (clients) : ${EXT_MIN}–${EXT_MAX}  (open these in OCI Security List)"
+  echo "# Internal (pods)    : $((EXT_MIN+OFFSET))–$((EXT_MAX+OFFSET))  (hostNetwork, NOT exposed externally)"
+  echo ""
+  for ext_port in $(seq "$EXT_MIN" "$EXT_MAX"); do
+    int_port=$((ext_port + OFFSET))
+    echo "server {"
+    echo "    listen ${ext_port} ssl;"
+    echo "    proxy_pass 127.0.0.1:${int_port};"
+    echo "}"
+    echo ""
+  done
+} | sudo tee "$OUT" > /dev/null
+
+echo "Done. Run: sudo nginx -t && sudo systemctl reload nginx"
diff --git a/server-manager/index.ts b/server-manager/index.ts
index e7a7c1c..e475be3 100644
--- a/server-manager/index.ts
+++ b/server-manager/index.ts
@@ -3,15 +3,9 @@ import express from "express";
 import assignServer from "./routes/assignServer";
 import Heap from "./helper/heap";
 import handleRegister from "./routes/handleRegister";
-import cors from "cors";
 import { type Request, type Response } from "express";
 
 const app = express();
-app.use(
-  cors({
-    credentials: true,
-  }),
-);
 const port = process.env.PORT || 4689;
 app.use(express.json());
 
@@ -23,7 +17,7 @@ app.get("/health", (req: Request, res: Response) => {
   res.status(200).send("Yooo we're up");
 });
 
-app.listen(port, () => {
+app.listen({ port: Number(port), host: "0.0.0.0" }, () => {
   console.log(`Server listening on http://localhost:${port}`);
 });
 
diff --git a/server/Dockerfile b/server/Dockerfile
index 0d88996..419bc12 100644
--- a/server/Dockerfile
+++ b/server/Dockerfile
@@ -13,7 +13,7 @@ RUN npx tsc --target ES2020 --module commonjs --esModuleInterop true \
     --resolveJsonModule true --skipLibCheck true --outDir dist server.ts
 
 # ---- Runtime stage ----
-FROM node:lts-alpine AS runtime
+FROM node:lts-slim AS runtime
 
 WORKDIR /app
 
diff --git a/server/server.ts b/server/server.ts
index 0cd50b3..ded9fcc 100644
--- a/server/server.ts
+++ b/server/server.ts
@@ -1,3 +1,4 @@
+import { type Request, type Response } from "express";
 import express from "express";
 import http from "http";
 import { AddressInfo } from "net";
@@ -461,6 +462,21 @@ io.on("connection", (socket) => {
     socket.join(code);
 
     const sanitized = sanitizeName(playerName);
+
+    // Initialize the room if it doesn't exist yet
+    if (!rooms[code]) {
+      const target: Target = { x: 0, y: 0, width: 30, height: 30 };
+      repositionTarget(target);
+      rooms[code] = {
+        players: {},
+        playerCount: 0,
+        target,
+        lastSentState: {},
+        fullSyncCounter: 0,
+        pendingScoreEvents: [],
+      };
+    }
+
     rooms[code].players[socket.id] = makePlayer(socket.id, sanitized);
     rooms[code].playerCount++;
 
@@ -611,26 +627,84 @@ function makePlayer(id: string, name: string) {
 }
 
 // Status endpoint
-app.get("/status", () => {
-  console.log("Server is upppp");
+app.get("/status", (req: Request, res: Response) => {
+  res.sendStatus(200);
 });
 
-server.listen(0, async () => {
-  const address = server.address() as AddressInfo;
-  const serverInfo = {
-    hostIp: process.env.HOST_IP,
-    port: address.port,
-    connections: 0,
-  };
-
-  await fetch(`${process.env.SERVER_MANAGER_URL}/register`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(serverInfo),
+// ============== PORT SELECTION ==============
+// In production, game-server pods must listen on a port within PORT_MIN–PORT_MAX
+// so that the host Nginx stream proxy (which terminates TLS for
+// wss://server.boxgame.shadyggs.xyz:<port>) can forward the traffic.
+// In local dev, PORT_MIN / PORT_MAX are unset → falls back to listen(0).
+const PORT_MIN = process.env.PORT_MIN ? parseInt(process.env.PORT_MIN) : 0;
+const PORT_MAX = process.env.PORT_MAX ? parseInt(process.env.PORT_MAX) : 0;
+
+function pickPort(): number {
+  if (!PORT_MIN || !PORT_MAX) return 0;
+  const publicPort =
+    PORT_MIN + Math.floor(Math.random() * (PORT_MAX - PORT_MIN + 1));
+  return publicPort; // bind on the internal, offset port
+}
+async function startOnPort(port: number, retries = 20): Promise<void> {
+  return new Promise((resolve, reject) => {
+    server.once("error", async (err: NodeJS.ErrnoException) => {
+      if (err.code === "EADDRINUSE" && retries > 0) {
+        server.removeAllListeners("error");
+        const next = pickPort();
+        console.warn(`Port ${port} in use, trying ${next}…`);
+        await startOnPort(next, retries - 1)
+          .then(resolve)
+          .catch(reject);
+      } else {
+        reject(err);
+      }
+    });
+    server.listen(port, "127.0.0.1", resolve); // <-- bind loopback only
   });
+}
+startOnPort(pickPort())
+  .then(async () => {
+    const address = server.address() as AddressInfo;
+    const publicPort = address.port;
+
+    const serverInfo = {
+      hostIp: process.env.HOST_IP,
+      port: publicPort, // <-- report the public-facing port, clients/nginx use this
+      connections: 0,
+    };
+    while (true) {
+      try {
+        console.log("SERVER_MANAGER_URL =", process.env.SERVER_MANAGER_URL);
+        console.log("HOST_IP =", process.env.HOST_IP);
+        console.log("Register payload =", serverInfo);
+        const response = await fetch(
+          `${process.env.SERVER_MANAGER_URL}/register`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(serverInfo),
+          },
+        );
+
+        if (!response.ok) {
+          throw new Error(`Registration failed: HTTP ${response.status}`);
+        }
 
-  console.log(`Server running on http://localhost:${address.port}`);
-  console.log(`Tick rate: ${tick}`);
-});
+        console.log("Successfully registered with server-manager.");
+        break;
+      } catch (err) {
+        console.error("Registration failed, retrying in 2 seconds...", err);
+        await new Promise((resolve) => setTimeout(resolve, 2000));
+      }
+    }
+
+    console.log(`Server running on port ${address.port}`);
+    console.log(`Port range: ${PORT_MIN || "OS-assigned"}–${PORT_MAX || ""}`);
+    console.log(`Tick rate: ${tick}`);
+  })
+  .catch((err) => {
+    console.error("Unable to start HTTP server:", err);
+    process.exit(1);
+  });