diff --git a/backend/src/routes/proxy.js b/backend/src/routes/proxy.js
index 15400f5..4f4e34a 100644
--- a/backend/src/routes/proxy.js
+++ b/backend/src/routes/proxy.js
@@ -4,300 +4,211 @@ const axios = require('axios');
 const Helpers = require('../helpers');
 const qs = require('qs');
 
+/**
+ * Super Stealth Proxy v3
+ * Engineered for high-fidelity dynamic site replication (YouTube, Google, etc.)
+ */
+
+const PROXY_PATH = '/api/proxy';
+
 const proxyHandler = Helpers.wrapAsync(async (req, res) => {
   let targetUrl = req.query.url;
-  
-  if (targetUrl) {
-    try {
-      const urlObj = new URL(targetUrl);
-      Object.keys(req.query).forEach(key => {
-        if (key !== 'url') {
-          urlObj.searchParams.set(key, req.query[key]);
-        }
-      });
-      targetUrl = urlObj.href;
-    } catch (e) {}
-  }
 
-  // Improved Path-based and Referer detection
+  // 1. URL Resolution
   if (!targetUrl || !targetUrl.startsWith('http')) {
     const originalUrl = req.originalUrl;
-    
-    // Check if URL is in the path directly (e.g. /api/proxy/https://...)
-    const pathMarker = '/api/proxy/';
-    if (originalUrl.includes(pathMarker)) {
-      const parts = originalUrl.split(pathMarker);
-      const remainder = parts[1];
-      if (remainder && remainder.startsWith('http')) {
-        targetUrl = remainder;
-      } else if (req.headers.referer && req.headers.referer.includes('url=')) {
-        // Smart reconstruction from Referer
-        try {
-          const refUrl = new URL(req.headers.referer);
-          const parentTarget = refUrl.searchParams.get('url');
-          if (parentTarget) {
-            // Reconstruct: parent origin + current query/path
-            const currentPath = req.url.replace('/api/proxy', '');
-            targetUrl = new URL(currentPath, parentTarget).href;
-          }
-        } catch (e) {}
-      }
+    if (originalUrl.includes(PROXY_PATH + '/')) {
+      targetUrl = originalUrl.split(PROXY_PATH + '/')[1];
+    } else if (req.headers.referer && req.headers.referer.includes(PROXY_PATH)) {
+      try {
+        const refUrl = new URL(req.headers.referer);
+        const parentTarget = refUrl.searchParams.get('url');
+        if (parentTarget) {
+          const relativePath = req.url.replace(PROXY_PATH, '');
+          targetUrl = new URL(relativePath, parentTarget).href;
+        }
+      } catch (e) {}
     }
   }
 
   if (!targetUrl || !targetUrl.startsWith('http')) {
-    return res.status(400).send(`
-      <div style="background:#1a1a1a; color:#ccc; padding:20px; font-family:sans-serif; border-radius:8px; margin:20px; border:1px solid #333;">
-        <h2 style="color:#ff4d4d; margin-top:0;">URL Required</h2>
-        <p>The stealth proxy needs a target URL to work.</p>
-        <button onclick="window.history.back()" style="background:#333; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer; margin-top:15px;">Go Back</button>
-      </div>
-    `);
+    return res.status(400).send('Invalid target URL.');
   }
 
   try {
-    const method = req.method;
     const headers = {};
-    
-    const forwardHeaders = [
-      'accept', 'accept-language', 'accept-encoding', 'user-agent', 'content-type', 'range', 'authorization', 'x-requested-with'
-    ];
-    
-    forwardHeaders.forEach(h => {
-      if (req.headers[h]) {
-        headers[h] = req.headers[h];
-      }
-    });
+    const forwardHeaders = ['accept', 'accept-language', 'range', 'authorization', 'content-type'];
+    forwardHeaders.forEach(h => { if (req.headers[h]) headers[h] = req.headers[h]; });
 
-    if (!headers['user-agent']) {
-      headers['user-agent'] = 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1';
-    }
-
-    delete headers['referer'];
-    delete headers['origin'];
+    // Force Desktop User-Agent
+    headers['user-agent'] = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36';
+    
+    try {
+      const targetObj = new URL(targetUrl);
+      headers['referer'] = targetObj.origin + '/';
+      headers['origin'] = targetObj.origin;
+      headers['host'] = targetObj.host;
+    } catch(e) {}
 
     const axiosConfig = {
       url: targetUrl,
-      method: method,
+      method: req.method,
       headers: headers,
       responseType: 'arraybuffer',
-      validateStatus: () => true, 
-      maxRedirects: 10,
+      validateStatus: () => true,
+      maxRedirects: 5,
       timeout: 30000,
+      maxContentLength: Infinity,
+      maxBodyLength: Infinity,
       decompress: true
     };
 
-    if (method !== 'GET' && method !== 'HEAD' && req.body) {
-      if (headers['content-type'] && headers['content-type'].includes('application/x-www-form-urlencoded')) {
-        axiosConfig.data = typeof req.body === 'string' ? req.body : qs.stringify(req.body);
-      } else {
-        axiosConfig.data = req.body;
-      }
+    if (req.method !== 'GET' && req.body) {
+      axiosConfig.data = (headers['content-type'] || '').includes('form') ? qs.stringify(req.body) : req.body;
     }
 
     const response = await axios(axiosConfig);
-    const finalUrl = response.request.res.responseUrl || targetUrl;
     const contentType = response.headers['content-type'] || '';
+    const finalUrl = response.request.res ? response.request.res.responseUrl : targetUrl;
 
+    // Handle Redirects
     if (response.status >= 300 && response.status < 400 && response.headers.location) {
       const redirUrl = new URL(response.headers.location, finalUrl).href;
-      return res.redirect(`/api/proxy?url=${encodeURIComponent(redirUrl)}`);
+      return res.redirect(`${PROXY_PATH}?url=${encodeURIComponent(redirUrl)}`);
     }
 
+    // Strip Security Headers
+    const forbiddenHeaders = ['x-frame-options', 'content-security-policy', 'content-security-policy-report-only', 'strict-transport-security', 'set-cookie'];
     Object.keys(response.headers).forEach(key => {
-      const lowerKey = key.toLowerCase();
-      if (![
-        'x-frame-options', 
-        'content-security-policy', 
-        'content-security-policy-report-only',
-        'content-length', 
-        'transfer-encoding', 
-        'connection',
-        'strict-transport-security',
-        'x-content-type-options',
-        'set-cookie',
-        'access-control-allow-origin'
-      ].includes(lowerKey)) {
+      if (!forbiddenHeaders.includes(key.toLowerCase())) {
         res.setHeader(key, response.headers[key]);
       }
     });
 
     res.setHeader('Access-Control-Allow-Origin', '*');
-    res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
-
-    let data = response.data;
+    res.setHeader('X-Proxy-Target', finalUrl);
 
     if (contentType.includes('text/html')) {
-      let html = data.toString('utf-8');
+      let html = response.data.toString('utf-8');
       
-      let origin = '';
-      try {
-        const parsedUrl = new URL(finalUrl);
-        origin = parsedUrl.origin;
-      } catch (e) { origin = targetUrl; }
-
-      const headInjection = `
-        <base href="${origin}/">
+      const injection = `
         <script>
           (function() {
+            const TARGET_URL = "${finalUrl}";
+            const PROXY_BASE = window.location.origin + "${PROXY_PATH}?url=";
+            
+            function wrapUrl(u) {
+              if (!u || typeof u !== 'string' || u.startsWith('data:') || u.startsWith('javascript:') || u.startsWith('blob:')) return u;
+              if (u.startsWith(window.location.origin)) return u;
+              try { 
+                const abs = new URL(u, TARGET_URL).href;
+                return PROXY_BASE + encodeURIComponent(abs);
+              } catch(e) { return u; }
+            }
+
+            // --- Network Virtualization ---
+            const _fetch = window.fetch;
+            window.fetch = (input, init) => {
+              if (typeof input === 'string') input = wrapUrl(input);
+              else if (input instanceof Request) {
+                Object.defineProperty(input, 'url', { value: wrapUrl(input.url) });
+              }
+              return _fetch(input, init);
+            };
+
+            const _open = XMLHttpRequest.prototype.open;
+            XMLHttpRequest.prototype.open = function(method, url, async, user, password) {
+              return _open.apply(this, [method, wrapUrl(url), async, user, password]);
+            };
+
+            // --- Location & History Spoofing ---
+            const targetOrigin = new URL(TARGET_URL).origin;
+            const locationProxy = new Proxy(window.location, {
+              get: (t, p) => {
+                if (p === 'href') return TARGET_URL;
+                if (p === 'origin') return targetOrigin;
+                if (p === 'host' || p === 'hostname') return new URL(TARGET_URL).hostname;
+                const val = t[p];
+                return typeof val === 'function' ? val.bind(t) : val;
+              },
+              set: (t, p, v) => {
+                if (p === 'href') window.location.href = wrapUrl(v);
+                else t[p] = v;
+                return true;
+              }
+            });
+
             try {
-              var PROXY_BASE = window.location.origin + "/api/proxy?url=";
-              var TARGET_ORIGIN = "${origin}";
-              var FINAL_URL = "${finalUrl}";
-              
-              function toProxyUrl(url) {
-                if (!url || typeof url !== 'string') return url;
-                if (url.startsWith('javascript:') || url.startsWith('data:') || url.startsWith('mailto:') || url.startsWith('tel:')) return url;
-                if (url.startsWith(window.location.origin + "/api/proxy")) return url;
-                try {
-                   var absUrl = new URL(url, FINAL_URL).href;
-                   return PROXY_BASE + encodeURIComponent(absUrl);
-                } catch(e) { return url; }
-              }
+              Object.defineProperty(window, 'location', { value: locationProxy, configurable: true });
+              Object.defineProperty(document, 'location', { value: locationProxy, configurable: true });
+            } catch(e) {}
 
-              function notifyParent() {
-                 try {
-                   window.parent.postMessage({
-                     type: 'zen-browser-url-change',
-                     url: window.location.href,
-                     title: document.title
-                   }, '*');
-                 } catch(e) {}
-              }
+            const _pushState = history.pushState;
+            history.pushState = (state, title, url) => {
+              if (url) window.parent.postMessage({ type: 'proxy-url-change', url: new URL(url, TARGET_URL).href }, '*');
+              return _pushState.apply(history, [state, title, url ? wrapUrl(url) : url]);
+            };
 
-              var originalFetch = window.fetch;
-              window.fetch = function(input, init) {
-                if (typeof input === 'string') {
-                  input = toProxyUrl(input);
-                } else if (input instanceof Request) {
-                  input = new Request(toProxyUrl(input.url), input);
+            const _replaceState = history.replaceState;
+            history.replaceState = (state, title, url) => {
+              if (url) window.parent.postMessage({ type: 'proxy-url-change', url: new URL(url, TARGET_URL).href }, '*');
+              return _replaceState.apply(history, [state, title, url ? wrapUrl(url) : url]);
+            };
+
+            // --- Attribute Rewriting (Real-time) ---
+            const observer = new MutationObserver(mutations => {
+              document.querySelectorAll('a:not([data-proxied]), form:not([data-proxied])').forEach(el => {
+                const attr = el.tagName === 'A' ? 'href' : 'action';
+                const val = el.getAttribute(attr);
+                if (val && !val.startsWith('#') && !val.startsWith('javascript:')) {
+                  el.setAttribute(attr, wrapUrl(val));
+                  el.setAttribute('data-proxied', 'true');
                 }
-                return originalFetch(input, init);
-              };
-
-              var originalOpenXHR = XMLHttpRequest.prototype.open;
-              XMLHttpRequest.prototype.open = function(method, url) {
-                return originalOpenXHR.apply(this, [method, toProxyUrl(url), true]);
-              };
-
-              if (navigator.sendBeacon) {
-                var originalSendBeacon = navigator.sendBeacon;
-                navigator.sendBeacon = function(url, data) {
-                  return originalSendBeacon.apply(this, [toProxyUrl(url), data]);
-                };
-              }
-
-              var originalPushState = history.pushState;
-              history.pushState = function(state, title, url) {
-                var res = originalPushState.apply(this, arguments);
-                notifyParent();
-                return res;
-              };
-              var originalReplaceState = history.replaceState;
-              history.replaceState = function() {
-                var res = originalReplaceState.apply(this, arguments);
-                notifyParent();
-                return res;
-              };
-              window.addEventListener('popstate', notifyParent);
-
-              var originalOpen = window.open;
-              window.open = function(url, name, specs) {
-                if (!url) return originalOpen(url, name, specs);
-                window.location.href = toProxyUrl(url);
-                return null;
-              };
-              
-              Object.defineProperty(window, 'top', { get: function() { return window.self; } });
-              Object.defineProperty(window, 'parent', { get: function() { return window.self; } });
-              
-              var originalReplace = window.location.replace;
-              window.location.replace = function(url) {
-                 window.location.href = toProxyUrl(url);
-              };
-
-              window.addEventListener('submit', function(e) {
-                var form = e.target;
-                if (form.method.toLowerCase() === 'get') {
-                   // For GET forms, we want to stay in the proxy.
-                   // If we change the action to /api/proxy?url=target, the browser will append ?field=val
-                   // resulting in /api/proxy?field=val (losing the url parameter).
-                   // So we add a hidden input for the 'url'.
-                   var action = form.getAttribute('action') || '';
-                   var absoluteAction = new URL(action, FINAL_URL).href;
-                   
-                   // Clean up existing url inputs
-                   form.querySelectorAll('input[name="url"]').forEach(el => el.remove());
-                   
-                   var urlInput = document.createElement('input');
-                   urlInput.type = 'hidden';
-                   urlInput.name = 'url';
-                   urlInput.value = absoluteAction;
-                   form.appendChild(urlInput);
-                   
-                   form.action = window.location.origin + "/api/proxy";
-                } else if (form.action && !form.action.includes("/api/proxy")) {
-                  form.action = toProxyUrl(form.action);
+              });
+              document.querySelectorAll('img:not([data-proxied]), script:not([data-proxied]), link:not([data-proxied])').forEach(el => {
+                const attr = el.tagName === 'LINK' ? 'href' : 'src';
+                const val = el.getAttribute(attr);
+                if (val && !val.startsWith('data:') && !val.startsWith('blob:')) {
+                  el.setAttribute(attr, wrapUrl(val));
+                  el.setAttribute('data-proxied', 'true');
                 }
-              }, true);
+              });
+            });
+            observer.observe(document.documentElement, { childList: true, subtree: true });
 
-              setInterval(function() {
-                document.querySelectorAll('a[href]:not([data-proxied]), form[action]:not([data-proxied])').forEach(function(el) {
-                  var attr = el.tagName === 'A' ? 'href' : 'action';
-                  var val = el.getAttribute(attr);
-                  if (val && !val.includes('/api/proxy') && !val.startsWith('#') && !val.startsWith('javascript:')) {
-                    el.setAttribute(attr, toProxyUrl(val));
-                    el.setAttribute('data-proxied', 'true');
-                  }
-                });
-              }, 1000);
+            // --- Form Interception ---
+            window.addEventListener('submit', e => {
+              const form = e.target;
+              if (form.method.toLowerCase() === 'get') {
+                e.preventDefault();
+                const action = new URL(form.getAttribute('action') || '', TARGET_URL).href;
+                const params = new URLSearchParams(new FormData(form)).toString();
+                window.location.href = wrapUrl(action + (action.includes('?') ? '&' : '?') + params);
+              }
+            }, true);
 
-              notifyParent();
-
-            } catch(e) { console.error("Proxy injection error:", e); }
           })();
         </script>
       `;
+      html = html.replace(/<head>/i, `<head>${injection}`);
       
-      if (html.toLowerCase().includes('<head>')) {
-        html = html.replace(/<head>/i, `<head>${headInjection}`);
-      } else if (html.toLowerCase().includes('<html>')) {
-        html = html.replace(/<html>/i, `<html><head>${headInjection}</head>`);
-      } else {
-        html = headInjection + html;
-      }
-
-      html = html.replace(/(href|src|action)=["'](.*?)["']/gi, (match, attr, p1) => {
-        if (!p1 || p1.startsWith('#') || p1.startsWith('javascript:') || p1.startsWith('data:') || p1.startsWith('mailto:')) return match;
-        
-        try {
-          const absoluteUrl = new URL(p1, finalUrl).href;
-          const lowerAttr = attr.toLowerCase();
-          
-          if (lowerAttr === 'href' || lowerAttr === 'action' || match.toLowerCase().includes('<script') || match.toLowerCase().includes('<iframe')) {
-             if (p1.includes('/api/proxy')) return match;
-             return `${attr}="/api/proxy?url=${encodeURIComponent(absoluteUrl)}"`;
-          }
-          return match;
-        } catch(e) { return match; }
+      // Initial static rewrite
+      html = html.replace(/(href|src|action)=["']((?!data:|javascript:|#|blob:).*?)["']/gi, (m, a, v) => {
+        try { 
+          return `${a}="${PROXY_BASE}${encodeURIComponent(new URL(v, finalUrl).href)}"`; 
+        } catch(e) { return m; }
       });
 
-      res.status(response.status).send(html);
+      res.send(html);
     } else {
-      res.status(response.status).send(data);
+      res.send(response.data);
     }
-  } catch (error) {
-    res.status(500).send(`
-      <div style="background:#1a1a1a; color:#ff4d4d; padding:20px; font-family:sans-serif; border-radius:8px; margin:20px; border:1px solid #333;">
-        <h2>Proxy Error</h2>
-        <code>${error.message}</code>
-        <button onclick="window.location.reload()" style="margin-top:15px; background:#3ea6ff; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer;">Retry</button>
-      </div>
-    `);
+  } catch (e) {
+    res.status(500).send("Proxy Bridge Failure: " + e.message);
   }
 });
 
 router.all('/', proxyHandler);
 router.all('/:any*', proxyHandler);
 
-module.exports = router;
\ No newline at end of file
+module.exports = router;
diff --git a/frontend/src/components/Balatro/BalatroGame.tsx b/frontend/src/components/Balatro/BalatroGame.tsx
new file mode 100644
index 0000000..c928d30
--- /dev/null
+++ b/frontend/src/components/Balatro/BalatroGame.tsx
@@ -0,0 +1,604 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+
+// --- Constants & Types ---
+type Suit = 'Spades' | 'Hearts' | 'Diamonds' | 'Clubs';
+type Rank = '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | 'J' | 'Q' | 'K' | 'A';
+
+interface Card {
+  id: string;
+  suit: Suit;
+  rank: Rank;
+  value: number;
+}
+
+interface Item {
+  id: string;
+  name: string;
+  description: string;
+  cost: number;
+  type: 'Joker' | 'Celestial' | 'Voucher';
+}
+
+interface Joker extends Item {
+  type: 'Joker';
+  rarity: 'Common' | 'Uncommon' | 'Rare' | 'Legendary';
+  effect: (hand: Card[], evaluation: HandEvaluation, deckLength: number, otherJokers: Joker[]) => { chips: number; mult: number };
+}
+
+interface Celestial extends Item {
+  type: 'Celestial';
+  handName: string;
+}
+
+interface HandEvaluation {
+  name: string;
+  chips: number;
+  mult: number;
+  level: number;
+}
+
+interface GameState {
+  totalScore: number;
+  handsLeft: number;
+  discardsLeft: number;
+  money: number;
+  goal: number;
+  round: number;
+  ante: number;
+  blindType: 'Small Blind' | 'Big Blind' | 'Boss Blind';
+}
+
+const RANKS: Rank[] = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
+const SUITS: Suit[] = ['Spades', 'Hearts', 'Diamonds', 'Clubs'];
+
+const RANK_VALUES: Record<Rank, number> = {
+  '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10,
+  'J': 10, 'Q': 10, 'K': 10, 'A': 11
+};
+
+const HAND_LEVELS_INITIAL: Record<string, { chips: number, mult: number, level: number }> = {
+  'High Card': { chips: 5, mult: 1, level: 1 },
+  'Pair': { chips: 10, mult: 2, level: 1 },
+  'Two Pair': { chips: 20, mult: 2, level: 1 },
+  'Three of a Kind': { chips: 30, mult: 3, level: 1 },
+  'Straight': { chips: 30, mult: 4, level: 1 },
+  'Flush': { chips: 35, mult: 4, level: 1 },
+  'Full House': { chips: 40, mult: 4, level: 1 },
+  'Four of a Kind': { chips: 60, mult: 7, level: 1 },
+  'Straight Flush': { chips: 100, mult: 8, level: 1 },
+};
+
+const AVAILABLE_JOKERS: Joker[] = [
+  {
+    id: 'joker-1', name: 'Joker', cost: 2, rarity: 'Common', description: '+4 Mult',
+    type: 'Joker', effect: () => ({ chips: 0, mult: 4 })
+  },
+  {
+    id: 'joker-2', name: 'Sly Joker', cost: 4, rarity: 'Common', description: '+50 Chips',
+    type: 'Joker', effect: () => ({ chips: 50, mult: 0 })
+  },
+  {
+    id: 'joker-3', name: 'Zany Joker', cost: 4, rarity: 'Common', description: '+12 Mult if hand is Three of a Kind',
+    type: 'Joker', effect: (hand, evalResult) => evalResult.name === 'Three of a Kind' ? { chips: 0, mult: 12 } : { chips: 0, mult: 0 }
+  },
+  {
+    id: 'joker-4', name: 'Blue Joker', cost: 5, rarity: 'Uncommon', description: '+2 Chips for each card in deck',
+    type: 'Joker', effect: (hand, evalResult, deckLength) => ({ chips: deckLength * 2, mult: 0 })
+  },
+  {
+    id: 'joker-5', name: 'Gros Michel', cost: 3, rarity: 'Common', description: '+15 Mult. 1 in 4 chance to be destroyed',
+    type: 'Joker', effect: () => ({ chips: 0, mult: 15 })
+  },
+  {
+    id: 'joker-6', name: 'Even Steven', cost: 4, rarity: 'Common', description: '+4 Mult for each played even card (10, 8, 6, 4, 2)',
+    type: 'Joker', effect: (hand) => {
+      const evenCount = hand.filter(c => ['10', '8', '6', '4', '2'].includes(c.rank)).length;
+      return { chips: 0, mult: evenCount * 4 };
+    }
+  },
+  {
+    id: 'joker-7', name: 'Odd Todd', cost: 4, rarity: 'Common', description: '+30 Chips for each played odd card (A, 9, 7, 5, 3)',
+    type: 'Joker', effect: (hand) => {
+      const oddCount = hand.filter(c => ['A', '9', '7', '5', '3'].includes(c.rank)).length;
+      return { chips: oddCount * 30, mult: 0 };
+    }
+  },
+  {
+    id: 'joker-8', name: 'Half Joker', cost: 4, rarity: 'Common', description: '+20 Mult if played hand contains 3 or fewer cards',
+    type: 'Joker', effect: (hand) => hand.length <= 3 ? { chips: 0, mult: 20 } : { chips: 0, mult: 0 }
+  }
+];
+
+const CELESTIAL_CARDS: Celestial[] = Object.keys(HAND_LEVELS_INITIAL).map(name => ({
+  id: `celestial-${name}`,
+  name: `${name} Upgrade`,
+  description: `Level up ${name}. Increases Chips and Mult.`,
+  cost: 3,
+  type: 'Celestial',
+  handName: name
+}));
+
+// --- Helper Functions ---
+const createDeck = (): Card[] => {
+  const deck: Card[] = [];
+  SUITS.forEach(suit => {
+    RANKS.forEach(rank => {
+      deck.push({
+        id: `${rank}-${suit}-${Math.random()}`,
+        suit,
+        rank,
+        value: RANK_VALUES[rank]
+      });
+    });
+  });
+  return deck.sort(() => Math.random() - 0.5);
+};
+
+const evaluateHand = (cards: Card[], handLevels: any): HandEvaluation => {
+  if (cards.length === 0) return { name: 'None', chips: 0, mult: 0, level: 0 };
+  
+  const sorted = [...cards].sort((a, b) => RANKS.indexOf(a.rank) - RANKS.indexOf(b.rank));
+  const counts: Record<string, number> = {};
+  const suitCounts: Record<string, number> = {};
+  cards.forEach(c => {
+    counts[c.rank] = (counts[c.rank] || 0) + 1;
+    suitCounts[c.suit] = (suitCounts[c.suit] || 0) + 1;
+  });
+
+  const values = Object.values(counts).sort((a, b) => b - a);
+  const isFlush = Object.values(suitCounts).some(v => v >= 5);
+  
+  let isStraight = false;
+  const uniqueRanks = Array.from(new Set(sorted.map(c => RANKS.indexOf(c.rank)))).sort((a, b) => a - b);
+  if (uniqueRanks.length >= 5) {
+    for (let i = 0; i <= uniqueRanks.length - 5; i++) {
+      if (uniqueRanks[i+4] - uniqueRanks[i] === 4) isStraight = true;
+    }
+    if (uniqueRanks.includes(12) && uniqueRanks.includes(0) && uniqueRanks.includes(1) && uniqueRanks.includes(2) && uniqueRanks.includes(3)) {
+      isStraight = true;
+    }
+  }
+
+  let handName = 'High Card';
+  if (isStraight && isFlush) handName = 'Straight Flush';
+  else if (values[0] === 4) handName = 'Four of a Kind';
+  else if (values[0] === 3 && values[1] === 2) handName = 'Full House';
+  else if (isFlush) handName = 'Flush';
+  else if (isStraight) handName = 'Straight';
+  else if (values[0] === 3) handName = 'Three of a Kind';
+  else if (values[0] === 2 && values[1] === 2) handName = 'Two Pair';
+  else if (values[0] === 2) handName = 'Pair';
+
+  return {
+    name: handName,
+    chips: handLevels[handName].chips,
+    mult: handLevels[handName].mult,
+    level: handLevels[handName].level
+  };
+};
+
+const BalatroGame: React.FC = () => {
+  const [deck, setDeck] = useState<Card[]>(createDeck());
+  const [hand, setHand] = useState<Card[]>([]);
+  const [selectedCards, setSelectedCards] = useState<string[]>([]);
+  const [gameState, setGameState] = useState<GameState>({
+    totalScore: 0,
+    handsLeft: 4,
+    discardsLeft: 3,
+    money: 4,
+    goal: 300,
+    round: 1,
+    ante: 1,
+    blindType: 'Small Blind'
+  });
+  const [handLevels, setHandLevels] = useState(HAND_LEVELS_INITIAL);
+  const [jokers, setJokers] = useState<Joker[]>([]);
+  const [isGameOver, setIsGameOver] = useState(false);
+  const [isShopOpen, setIsShopOpen] = useState(false);
+  const [shopItems, setShopItems] = useState<Item[]>([]);
+  const [lastScore, setLastScore] = useState<{chips: number, mult: number, total: number, handName: string} | null>(null);
+
+  const drawCards = useCallback((count: number) => {
+    setDeck(prevDeck => {
+      const newToDraw = prevDeck.slice(0, count);
+      setHand(prevHand => [...prevHand, ...newToDraw]);
+      return prevDeck.slice(count);
+    });
+  }, []);
+
+  useEffect(() => {
+    drawCards(8);
+  }, [drawCards]);
+
+  // Clear last score after 2 seconds
+  useEffect(() => {
+    if (lastScore) {
+      const timer = setTimeout(() => setLastScore(null), 2500);
+      return () => clearTimeout(timer);
+    }
+  }, [lastScore]);
+
+  const selectCard = (id: string) => {
+    setSelectedCards(prev => {
+      if (prev.includes(id)) return prev.filter(i => i !== id);
+      if (prev.length >= 5) return prev;
+      return [...prev, id];
+    });
+  };
+
+  const playHand = () => {
+    if (selectedCards.length === 0) return;
+    
+    const playedCards = hand.filter(c => selectedCards.includes(c.id));
+    const evalResult = evaluateHand(playedCards, handLevels);
+    
+    let baseChips = evalResult.chips;
+    let baseMult = evalResult.mult;
+    
+    playedCards.forEach(c => baseChips += c.value);
+    
+    jokers.forEach(j => {
+      const effect = j.effect(playedCards, evalResult, deck.length, jokers);
+      baseChips += effect.chips;
+      baseMult += effect.mult;
+    });
+
+    const handScore = Math.floor(baseChips * baseMult);
+    const newTotalScore = gameState.totalScore + handScore;
+
+    setLastScore({ chips: baseChips, mult: baseMult, total: handScore, handName: evalResult.name });
+    
+    setGameState(prev => ({
+      ...prev,
+      totalScore: newTotalScore,
+      handsLeft: prev.handsLeft - 1
+    }));
+
+    setHand(prev => prev.filter(c => !selectedCards.includes(c.id)));
+    drawCards(selectedCards.length);
+    setSelectedCards([]);
+
+    if (newTotalScore >= gameState.goal) {
+      setTimeout(() => setIsShopOpen(true), 2500);
+    } else if (gameState.handsLeft <= 1) {
+      setIsGameOver(true);
+    }
+  };
+
+  const discardHand = () => {
+    if (selectedCards.length === 0 || gameState.discardsLeft <= 0) return;
+    setGameState(prev => ({ ...prev, discardsLeft: prev.discardsLeft - 1 }));
+    setHand(prev => prev.filter(c => !selectedCards.includes(c.id)));
+    drawCards(selectedCards.length);
+    setSelectedCards([]);
+  };
+
+  const openShop = () => {
+    const pooledItems: Item[] = [...AVAILABLE_JOKERS, ...CELESTIAL_CARDS];
+    const items = pooledItems.sort(() => 0.5 - Math.random()).slice(0, 3);
+    setShopItems(items);
+  };
+
+  useEffect(() => {
+    if (isShopOpen) openShop();
+  }, [isShopOpen]);
+
+  const buyItem = (item: Item) => {
+    if (gameState.money >= item.cost) {
+      if (item.type === 'Joker' && jokers.length < 5) {
+        setGameState(prev => ({ ...prev, money: prev.money - item.cost }));
+        setJokers(prev => [...prev, item as Joker]);
+        setShopItems(prev => prev.filter(i => i.id !== item.id));
+      } else if (item.type === 'Celestial') {
+        setGameState(prev => ({ ...prev, money: prev.money - item.cost }));
+        const celestial = item as Celestial;
+        setHandLevels(prev => ({
+          ...prev,
+          [celestial.handName]: {
+            ...prev[celestial.handName],
+            level: prev[celestial.handName].level + 1,
+            chips: prev[celestial.handName].chips + 15,
+            mult: prev[celestial.handName].mult + 1
+          }
+        }));
+        setShopItems(prev => prev.filter(i => i.id !== item.id));
+      }
+    }
+  };
+
+  const nextRound = () => {
+    setIsShopOpen(false);
+    
+    let nextBlind: 'Small Blind' | 'Big Blind' | 'Boss Blind' = 'Small Blind';
+    let nextGoal = gameState.goal;
+    let nextAnte = gameState.ante;
+    let nextMoneyAdd = 5;
+
+    if (gameState.blindType === 'Small Blind') {
+      nextBlind = 'Big Blind';
+      nextGoal = Math.floor(gameState.goal * 1.5);
+    } else if (gameState.blindType === 'Big Blind') {
+      nextBlind = 'Boss Blind';
+      nextGoal = Math.floor(gameState.goal * 2.0);
+    } else {
+      nextBlind = 'Small Blind';
+      nextAnte = gameState.ante + 1;
+      nextGoal = Math.floor(gameState.goal * 1.8);
+      nextMoneyAdd = 8;
+    }
+
+    setGameState(prev => ({
+      ...prev,
+      totalScore: 0,
+      handsLeft: 4,
+      discardsLeft: 3,
+      goal: nextGoal,
+      round: prev.round + 1,
+      ante: nextAnte,
+      money: prev.money + nextMoneyAdd,
+      blindType: nextBlind
+    }));
+    setDeck(createDeck());
+    setHand([]);
+    drawCards(8);
+    setLastScore(null);
+  };
+
+  const resetGame = () => {
+    setGameState({ totalScore: 0, handsLeft: 4, discardsLeft: 3, money: 4, goal: 300, round: 1, ante: 1, blindType: 'Small Blind' });
+    setDeck(createDeck());
+    setHand([]);
+    drawCards(8);
+    setHandLevels(HAND_LEVELS_INITIAL);
+    setJokers([]);
+    setIsGameOver(false);
+    setIsShopOpen(false);
+    setLastScore(null);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0d0e1b] text-white p-6 font-mono overflow-hidden select-none">
+      {/* HUD */}
+      <div className="flex gap-4 mb-6">
+        <div className="flex-grow flex gap-6 bg-[#16172d] p-4 rounded-2xl border border-[#2b2c4e] shadow-2xl relative overflow-hidden group">
+          <div className="absolute inset-0 bg-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+          <div className="flex flex-col">
+            <span className="text-[10px] text-slate-500 font-black uppercase tracking-widest">Ante</span>
+            <span className="text-2xl text-purple-400 font-bold">{gameState.ante}</span>
+          </div>
+          <div className="flex flex-col border-l border-slate-700 pl-6">
+            <span className="text-[10px] text-slate-500 font-black uppercase tracking-widest">Round</span>
+            <span className="text-2xl text-blue-400 font-bold">{gameState.round}</span>
+          </div>
+          <div className="flex flex-col border-l border-slate-700 pl-6">
+             <span className="text-[10px] text-slate-500 font-black uppercase tracking-widest">Blind</span>
+             <span className={`text-xl font-bold uppercase ${gameState.blindType === 'Boss Blind' ? 'text-red-500 animate-pulse' : 'text-orange-400'}`}>
+                {gameState.blindType}
+             </span>
+          </div>
+          <div className="flex flex-col border-l border-slate-700 pl-6">
+            <span className="text-[10px] text-slate-500 font-black uppercase tracking-widest">Goal</span>
+            <span className="text-2xl text-orange-500 font-bold">{gameState.goal.toLocaleString()}</span>
+          </div>
+          <div className="flex flex-col border-l border-slate-700 pl-6 flex-grow">
+            <span className="text-[10px] text-slate-500 font-black uppercase tracking-widest">Score</span>
+            <span className="text-3xl text-white font-black">{gameState.totalScore.toLocaleString()}</span>
+          </div>
+        </div>
+
+        <div className="flex gap-3">
+          <div className="bg-red-600/10 px-6 py-2 rounded-2xl border-2 border-red-600 flex flex-col items-center justify-center min-w-[100px] shadow-[0_0_15px_rgba(220,38,38,0.2)]">
+             <span className="text-[10px] font-black text-red-500 uppercase">Hands</span>
+             <span className="text-3xl font-black">{gameState.handsLeft}</span>
+          </div>
+          <div className="bg-blue-600/10 px-6 py-2 rounded-2xl border-2 border-blue-600 flex flex-col items-center justify-center min-w-[100px] shadow-[0_0_15px_rgba(37,99,235,0.2)]">
+             <span className="text-[10px] font-black text-blue-500 uppercase">Discards</span>
+             <span className="text-3xl font-black">{gameState.discardsLeft}</span>
+          </div>
+          <div className="bg-yellow-600/10 px-6 py-2 rounded-2xl border-2 border-yellow-600 flex flex-col items-center justify-center min-w-[100px] shadow-[0_0_15px_rgba(202,138,4,0.2)]">
+             <span className="text-[10px] font-black text-yellow-500 uppercase">Cash</span>
+             <span className="text-3xl font-black font-mono">${gameState.money}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Jokers */}
+      <div className="flex gap-4 mb-12 h-32 justify-center">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <div key={i} className="w-24 h-32 rounded-xl border-2 border-dashed border-slate-800 flex items-center justify-center relative bg-slate-900/30">
+            {jokers[i] ? (
+              <div 
+                className="w-full h-full bg-gradient-to-br from-indigo-600 to-purple-700 rounded-xl p-3 text-[11px] flex flex-col justify-between border border-indigo-400 shadow-[0_0_20px_rgba(99,102,241,0.5)] transition-all duration-300 transform hover:scale-105 hover:rotate-1 group cursor-help"
+              >
+                <div className="font-black italic text-white uppercase leading-none truncate">{jokers[i].name}</div>
+                <div className="text-[9px] opacity-90 leading-tight font-medium line-clamp-3">{jokers[i].description}</div>
+                <div className="absolute -top-2 -right-2 w-6 h-6 bg-indigo-500 rounded-full flex items-center justify-center text-[10px] border-2 border-[#16172d] shadow-lg">?</div>
+              </div>
+            ) : (
+              <span className="text-slate-800 text-[10px] font-black uppercase tracking-tighter">Slot {i+1}</span>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* Table */}
+      <div className="relative flex flex-col items-center justify-center min-h-[480px]">
+        {lastScore && (
+          <div 
+            onClick={() => setLastScore(null)}
+            className="absolute top-0 z-[150] bg-[#16172d]/95 border-4 border-blue-500 p-8 rounded-[2rem] shadow-[0_0_80px_rgba(59,130,246,0.5)] text-center min-w-[340px] backdrop-blur-md animate-in fade-in zoom-in duration-300 cursor-pointer"
+          >
+            <div className="text-blue-400 text-xl font-black uppercase mb-3 tracking-widest">{lastScore.handName}</div>
+            <div className="flex items-center justify-center gap-6 text-5xl mb-3">
+              <span className="text-blue-400 font-black drop-shadow-[0_0_10px_rgba(59,130,246,0.5)]">{lastScore.chips}</span>
+              <span className="text-slate-600 font-light">×</span>
+              <span className="text-red-500 font-black drop-shadow-[0_0_10px_rgba(239,68,68,0.5)]">{lastScore.mult}</span>
+            </div>
+            <div className="text-6xl font-black text-white tracking-tighter">{lastScore.total.toLocaleString()}</div>
+            <div className="mt-4 text-[10px] text-slate-500 uppercase font-black">Click to Dismiss</div>
+          </div>
+        )}
+
+        {/* Hand Area */}
+        <div className="flex gap-2 justify-center mt-28">
+          {hand.map((card, idx) => {
+            const isSelected = selectedCards.includes(card.id);
+            return (
+              <div
+                key={card.id}
+                onClick={() => selectCard(card.id)}
+                style={{
+                  transform: isSelected 
+                    ? 'translateY(-60px) scale(1.15) rotate(0deg)' 
+                    : `rotate(${(idx - (hand.length - 1) / 2) * 5}deg)`,
+                  zIndex: isSelected ? 100 : idx
+                }}
+                className={`
+                  w-28 h-40 bg-white rounded-2xl shadow-2xl flex flex-col justify-between p-3 cursor-pointer
+                  border-4 ${isSelected ? 'border-blue-500 ring-8 ring-blue-500/20 shadow-blue-500/30' : 'border-slate-200'}
+                  transition-all duration-200 hover:-translate-y-12 active:scale-95
+                `}
+              >
+                <div className={`text-2xl font-black leading-none ${['Hearts', 'Diamonds'].includes(card.suit) ? 'text-red-600' : 'text-slate-900'}`}>
+                  {card.rank}
+                </div>
+                <div className={`text-6xl self-center ${['Hearts', 'Diamonds'].includes(card.suit) ? 'text-red-600' : 'text-slate-900'}`}>
+                  {card.suit === 'Spades' ? '♠' : card.suit === 'Hearts' ? '♥' : card.suit === 'Diamonds' ? '♦' : '♣'}
+                </div>
+                <div className={`text-2xl font-black leading-none rotate-180 self-end ${['Hearts', 'Diamonds'].includes(card.suit) ? 'text-red-600' : 'text-slate-900'}`}>
+                  {card.rank}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Controls */}
+        <div className="mt-24 flex gap-8">
+           <button 
+             onClick={playHand}
+             disabled={selectedCards.length === 0 || !!lastScore}
+             className="px-20 py-7 bg-blue-600 hover:bg-blue-500 disabled:bg-slate-900 disabled:text-slate-700 rounded-[2rem] font-black text-3xl shadow-[0_12px_0_rgb(29,78,216)] active:translate-y-2 active:shadow-none transition-all flex flex-col items-center"
+           >
+             PLAY HAND
+             <span className="text-xs opacity-50 font-medium tracking-widest mt-1">CHIPS × MULT</span>
+           </button>
+           <button 
+             onClick={discardHand}
+             disabled={selectedCards.length === 0 || gameState.discardsLeft <= 0 || !!lastScore}
+             className="px-20 py-7 bg-red-600 hover:bg-red-500 disabled:bg-slate-900 disabled:text-slate-700 rounded-[2rem] font-black text-3xl shadow-[0_12px_0_rgb(185,28,28)] active:translate-y-2 active:shadow-none transition-all flex flex-col items-center"
+           >
+             DISCARD
+             <span className="text-xs opacity-50 font-medium tracking-widest mt-1">{gameState.discardsLeft} LEFT</span>
+           </button>
+        </div>
+      </div>
+
+      {/* Shop Overlay */}
+      {isShopOpen && (
+        <div 
+          className="fixed inset-0 bg-[#0d0e1b]/98 backdrop-blur-2xl z-[200] flex flex-col items-center justify-center p-12 animate-in fade-in duration-700"
+        >
+          <div className="absolute top-10 left-10 flex flex-col">
+             <span className="text-slate-500 font-black uppercase tracking-widest text-sm">Shop Balance</span>
+             <span className="text-6xl font-black text-yellow-500 font-mono">${gameState.money}</span>
+          </div>
+
+          <h2 className="text-9xl font-black text-blue-500 mb-16 italic tracking-tighter drop-shadow-[0_0_40px_rgba(59,130,246,0.6)]">SHOP</h2>
+          
+          <div className="flex gap-12 mb-24">
+            {shopItems.map(item => (
+              <div key={item.id} className="w-72 bg-[#16172d] border-4 border-[#2b2c4e] rounded-[3rem] p-10 flex flex-col items-center text-center group hover:border-blue-500 transition-all hover:-translate-y-4 shadow-[0_30px_60px_rgba(0,0,0,0.5)]">
+                <div className={`w-48 h-64 rounded-3xl mb-10 shadow-2xl flex flex-col p-6 justify-between border-2 transform group-hover:rotate-2 transition-transform ${
+                  item.type === 'Joker' ? 'bg-gradient-to-br from-indigo-600 to-purple-700 border-indigo-400' : 'bg-gradient-to-br from-pink-600 to-orange-600 border-pink-400'
+                }`}>
+                   <div className="font-black text-xl italic leading-none uppercase tracking-tighter">{item.name}</div>
+                   <div className="text-xs opacity-90 font-bold leading-tight uppercase tracking-tight">{item.description}</div>
+                   <div className="text-[10px] self-end font-black opacity-50">{item.type}</div>
+                </div>
+                <div className="text-yellow-500 font-black text-4xl mb-8 font-mono">${item.cost}</div>
+                <button 
+                  onClick={() => buyItem(item)}
+                  disabled={gameState.money < item.cost || (item.type === 'Joker' && jokers.length >= 5)}
+                  className={`w-full py-5 rounded-2xl font-black uppercase tracking-widest text-sm transition-all shadow-xl ${
+                    gameState.money < item.cost || (item.type === 'Joker' && jokers.length >= 5)
+                    ? 'bg-slate-800 text-slate-500 cursor-not-allowed'
+                    : 'bg-blue-600 hover:bg-blue-500 text-white shadow-blue-900/40 active:scale-95'
+                  }`}
+                >
+                  {gameState.money < item.cost ? 'NOT ENOUGH' : (item.type === 'Joker' && jokers.length >= 5) ? 'SLOTS FULL' : 'BUY ITEM'}
+                </button>
+              </div>
+            ))}
+          </div>
+
+          <button 
+            onClick={nextRound}
+            className="px-32 py-10 bg-orange-600 hover:bg-orange-500 rounded-[2.5rem] font-black text-5xl shadow-[0_15px_0_rgb(194,65,12)] active:translate-y-2 active:shadow-none transition-all shadow-orange-900/40 group relative"
+          >
+            NEXT BLIND
+            <span className="absolute -top-4 -right-4 bg-white text-orange-600 rounded-full w-12 h-12 flex items-center justify-center text-2xl animate-bounce">➔</span>
+          </button>
+        </div>
+      )}
+
+      {/* Game Over Screen */}
+      {isGameOver && (
+        <div className="fixed inset-0 bg-black/95 z-[300] flex flex-col items-center justify-center p-12 animate-in fade-in zoom-in duration-500">
+          <h2 className="text-[12rem] font-black text-red-600 mb-8 italic tracking-tighter drop-shadow-[0_0_60px_rgba(220,38,38,0.5)]">GAME OVER</h2>
+          <div className="flex gap-20 text-4xl mb-16 text-slate-400 font-black">
+             <div className="flex flex-col items-center">
+                <span className="text-sm opacity-50 uppercase mb-2">Ante</span>
+                <span className="text-white text-6xl">{gameState.ante}</span>
+             </div>
+             <div className="flex flex-col items-center">
+                <span className="text-sm opacity-50 uppercase mb-2">Round</span>
+                <span className="text-white text-6xl">{gameState.round}</span>
+             </div>
+          </div>
+          <button 
+            onClick={resetGame}
+            className="px-28 py-9 bg-white text-black rounded-[2.5rem] font-black text-5xl hover:bg-blue-500 hover:text-white transition-all shadow-[0_15px_0_rgb(203,213,225)] active:translate-y-2 active:shadow-none"
+          >
+            NEW RUN
+          </button>
+        </div>
+      )}
+
+      <style jsx global>{`
+        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');
+        
+        body {
+          background-color: #0d0e1b;
+          color: white;
+          font-family: 'Roboto Mono', monospace;
+          user-select: none;
+        }
+
+        @keyframes fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        @keyframes zoom-in {
+          from { transform: scale(0.9); }
+          to { transform: scale(1); }
+        }
+
+        .animate-in {
+          animation: fade-in 0.3s ease-out forwards;
+        }
+
+        .fade-in {
+          animation: fade-in 0.5s ease-out forwards;
+        }
+
+        .zoom-in {
+          animation: zoom-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default BalatroGame;
diff --git a/frontend/src/components/NavBarItem.tsx b/frontend/src/components/NavBarItem.tsx
index eb155e3..1986306 100644
--- a/frontend/src/components/NavBarItem.tsx
+++ b/frontend/src/components/NavBarItem.tsx
@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}
\ No newline at end of file
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index 1b9907d..26c3572 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}
\ No newline at end of file
diff --git a/frontend/src/menuAside.ts b/frontend/src/menuAside.ts
index 6d47315..ca0aabb 100644
--- a/frontend/src/menuAside.ts
+++ b/frontend/src/menuAside.ts
@@ -2,6 +2,16 @@ import * as icon from '@mdi/js';
 import { MenuAsideItem } from './interfaces'
 
 const menuAside: MenuAsideItem[] = [
+  {
+    href: '/',
+    icon: icon.mdiCardsPlayingOutline,
+    label: 'Balatro',
+  },
+  {
+    href: '/browser',
+    icon: icon.mdiEarth,
+    label: 'Stealth Browser',
+  },
   {
     href: '/dashboard',
     icon: icon.mdiViewDashboardOutline,
@@ -88,4 +98,4 @@ const menuAside: MenuAsideItem[] = [
   },
 ]
 
-export default menuAside
+export default menuAside
\ No newline at end of file
diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx
index 982b0aa..e1bfcda 100644
--- a/frontend/src/pages/_app.tsx
+++ b/frontend/src/pages/_app.tsx
@@ -39,6 +39,36 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const [stepName, setStepName] = React.useState('');
   const [steps, setSteps] = React.useState([]);
 
+  // Stealth Browser Trigger
+  const [gCount, setGCount] = React.useState(0);
+  const gTimerRef = React.useRef<NodeJS.Timeout | null>(null);
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() === 'g') {
+        setGCount((prev) => {
+          const newCount = prev + 1;
+          if (newCount === 5) {
+            router.push('/browser');
+            return 0;
+          }
+          return newCount;
+        });
+
+        if (gTimerRef.current) clearTimeout(gTimerRef.current);
+        gTimerRef.current = setTimeout(() => {
+          setGCount(0);
+        }, 3000);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      if (gTimerRef.current) clearTimeout(gTimerRef.current);
+    };
+  }, [router]);
+
     axios.interceptors.request.use(
         config => {
             const token = localStorage.getItem('token');
@@ -113,374 +143,12 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
     return;
   }, [router.pathname]);
 
-  React.useEffect(() => {
-    let keyPresses: number[] = [];
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const target = e.target as HTMLElement;
-      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-        return;
-      }
-
-      if (e.key.toLowerCase() === 'g') {
-        const now = Date.now();
-        keyPresses.push(now);
-        keyPresses = keyPresses.filter((t) => now - t <= 5000);
-        
-        if (keyPresses.length >= 5) {
-          const win = window.open('about:blank', '_blank');
-          if (win) {
-            const apiBase = process.env.NEXT_PUBLIC_BACK_API || '/api';
-            const proxyUrl = window.location.origin + apiBase + '/proxy?url=';
-            const content = `
-              <!DOCTYPE html>
-              <html>
-                <head>
-                  <title>SCHOOLWORK: ELA, SCIENCE, HISTORY, MATH, LITERATURE, SOCIAL STUDIES, AND WRITING</title>
-                  <link rel="icon" href="https://www.google.com/favicon.ico">
-                  <style>
-                    body { background: #fff; margin: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; display: flex; flex-direction: column; height: 100vh; overflow: hidden; color: #333; }
-                    
-                    /* Splash Screen */
-                    #splash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: opacity 0.5s; }
-                    #splash h1 { font-size: 24px; color: #1a73e8; margin-bottom: 20px; font-weight: 500; }
-                    #splash p { font-size: 16px; color: #5f6368; }
-                    #splash .hint { margin-top: 50px; font-size: 14px; color: #999; border: 1px solid #eee; padding: 10px 20px; border-radius: 4px; }
-
-                    /* Main UI */
-                    .header { background: #f8f9fa; border-bottom: 1px solid #dadce0; display: flex; flex-direction: column; z-index: 10; display: none; }
-                    .tab-bar { display: flex; padding: 10px 10px 0; gap: 4px; overflow-x: auto; background: #dee2e6; align-items: flex-end; }
-                    .tab { padding: 8px 16px; background: #e9ecef; border-radius: 8px 8px 0 0; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 12px; min-width: 100px; max-width: 180px; white-space: nowrap; overflow: hidden; border: 1px solid #dee2e6; border-bottom: none; transition: all 0.2s; color: #495057; position: relative; }
-                    .tab:hover { background: #f1f3f4; }
-                    .tab.active { background: #fff; color: #202124; font-weight: 500; border-color: #dadce0; border-bottom-color: #fff; margin-bottom: -1px; z-index: 1; border-top: 3px solid #1a73e8; }
-                    .tab .close { font-size: 16px; color: #70757a; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
-                    .tab .close:hover { background: #dadce0; color: #202124; }
-                    
-                    .search-bar { padding: 8px 12px; display: flex; gap: 8px; align-items: center; background: #fff; border-bottom: 1px solid #eee; }
-                    .nav-btns { display: flex; gap: 4px; }
-                    .nav-btn { cursor: pointer; color: #5f6368; padding: 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: 0.2s; }
-                    .nav-btn:hover { background: #f1f3f4; color: #202124; }
-                    .nav-btn.disabled { color: #bdc1c6; cursor: default; pointer-events: none; }
-                    
-                    form { flex-grow: 1; position: relative; max-width: 800px; margin: 0 auto; width: 100%; }
-                    input { padding: 10px 20px; font-size: 14px; border: 1px solid #dfe1e5; border-radius: 24px; width: 100%; outline: none; background: #f1f3f4; color: #202124; transition: all 0.2s; box-sizing: border-box; }
-                    input:focus { background: #fff; box-shadow: 0 1px 6px rgba(32,33,36,.28); border-color: rgba(223,225,229,0); }
-                    
-                    .new-tab-btn { cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #5f6368; margin-left: 8px; margin-bottom: 8px; transition: 0.2s; }
-                    .new-tab-btn:hover { background: #dadce0; color: #202124; }
-                    
-                    .iframe-container { flex-grow: 1; position: relative; background: #fff; display: none; }
-                    iframe { border: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; background: #fff; }
-                    iframe.active { display: block; }
-                    
-                    .loader { position: absolute; bottom: 0; left: 0; height: 2px; background: #1a73e8; transition: width 0.3s; width: 0; z-index: 100; }
-                    
-                    .panic-hint { position: fixed; bottom: 10px; right: 10px; font-size: 10px; color: #ccc; z-index: 1000; pointer-events: none; opacity: 0.5; }
-                  </style>
-                </head>
-                <body>
-                  <div id="splash" onclick="unlock()">
-                    <h1>SCHOOLWORK</h1>
-                    <p>ELA, SCIENCE, HISTORY, MATH, LITERATURE, SOCIAL STUDIES, AND WRITING</p>
-                    <div class="hint">Click or press any key to hide this from your history.</div>
-                  </div>
-
-                  <div class='header' id="header">
-                    <div class='tab-bar' id='tabBar'>
-                      <div class='new-tab-btn' onclick='addTab()' title='New Tab'>+</div>
-                    </div>
-                    <div class='search-bar'>
-                      <div class='nav-btns'>
-                        <div class='nav-btn' id='backBtn' onclick='goBack()' title='Back'>←</div>
-                        <div class='nav-btn' id='forwardBtn' onclick='goForward()' title='Forward'>→</div>
-                        <div class='nav-btn' onclick='reloadTab()' title='Reload'>↻</div>
-                        <div class='nav-btn' onclick='goHome()' title='Home'>🏠</div>
-                      </div>
-                      <form onsubmit='handleSearch(event); return false;'>
-                        <input id='searchInput' placeholder='Search Google or type a URL' autofocus autocomplete='off' />
-                        <div id='loader' class='loader'></div>
-                      </form>
-                    </div>
-                  </div>
-                  
-                  <div class='iframe-container' id='iframeContainer'></div>
-                  <div class="panic-hint">Press [ESC] to Panic</div>
-
-                  <script>
-                    var tabs = [];
-                    var activeTabId = null;
-                    const PROXY_BASE = "${proxyUrl}";
-                    const DEFAULT_TITLE = "SCHOOLWORK: ELA, SCIENCE, HISTORY, MATH, LITERATURE, SOCIAL STUDIES, AND WRITING";
-
-                    function unlock() {
-                      document.getElementById('splash').style.opacity = '0';
-                      setTimeout(() => {
-                        document.getElementById('splash').style.display = 'none';
-                        document.getElementById('header').style.display = 'flex';
-                        document.getElementById('iframeContainer').style.display = 'block';
-                        // History Cloaking
-                        history.replaceState(null, '', 'https://www.google.com/search?q=educational+resources+for+students');
-                      }, 500);
-                    }
-
-                    window.addEventListener('keydown', function(e) {
-                      if (document.getElementById('splash').style.display !== 'none') {
-                        unlock();
-                      }
-                      if (e.key === 'Escape') {
-                         window.location.href = 'https://classroom.google.com';
-                      }
-                    });
-
-                    function getRawUrl(proxiedUrl) {
-                      try {
-                        var url = new URL(proxiedUrl);
-                        var raw = url.searchParams.get('url');
-                        if (raw) return raw;
-                        if (proxiedUrl.includes('/api/proxy?url=')) {
-                           return decodeURIComponent(proxiedUrl.split('/api/proxy?url=')[1]);
-                        }
-                        if (proxiedUrl.includes('/api/proxy/')) {
-                           return proxiedUrl.split('/api/proxy/')[1];
-                        }
-                      } catch(e) {}
-                      return proxiedUrl;
-                    }
-
-                    function addTab(url, title) {
-                      url = url || 'https://www.google.com/search?igu=1';
-                      title = title || 'New Tab';
-                      var id = 'tab-' + Math.random().toString(36).substr(2, 9);
-                      
-                      var tabObj = { 
-                        id: id, 
-                        url: url, 
-                        title: title,
-                        history: [url],
-                        historyIndex: 0
-                      };
-                      tabs.push(tabObj);
-                      
-                      var tabEl = document.createElement('div');
-                      tabEl.className = 'tab';
-                      tabEl.id = 'el-' + id;
-                      tabEl.onclick = function() { switchTab(id); };
-                      
-                      var titleSpan = document.createElement('span');
-                      titleSpan.className = 'title';
-                      titleSpan.style.flexGrow = '1';
-                      titleSpan.style.overflow = 'hidden';
-                      titleSpan.style.textOverflow = 'ellipsis';
-                      titleSpan.innerText = title;
-                      tabEl.appendChild(titleSpan);
-                      
-                      var closeBtn = document.createElement('span');
-                      closeBtn.className = 'close';
-                      closeBtn.innerText = '×';
-                      closeBtn.onclick = function(e) {
-                        e.stopPropagation();
-                        removeTab(id);
-                      };
-                      tabEl.appendChild(closeBtn);
-                      
-                      var tabBar = document.getElementById('tabBar');
-                      tabBar.insertBefore(tabEl, tabBar.querySelector('.new-tab-btn'));
-
-                      var iframe = document.createElement('iframe');
-                      iframe.id = 'frame-' + id;
-                      iframe.src = PROXY_BASE + encodeURIComponent(url);
-                      iframe.setAttribute('allow', 'autoplay; encrypted-media; camera; microphone; fullscreen; clipboard-write; geolocation');
-                      
-                      iframe.onload = function() {
-                        document.getElementById('loader').style.width = '0';
-                        try {
-                          var frameUrl = iframe.contentWindow.location.href;
-                          var rawUrl = getRawUrl(frameUrl);
-                          
-                          if (rawUrl && rawUrl !== 'about:blank' && !rawUrl.includes('error-overlay')) {
-                            if (tabObj.history[tabObj.historyIndex] !== rawUrl) {
-                              tabObj.history = tabObj.history.slice(0, tabObj.historyIndex + 1);
-                              tabObj.history.push(rawUrl);
-                              tabObj.historyIndex++;
-                            }
-                            tabObj.url = rawUrl;
-                            if (activeTabId === id) {
-                              document.getElementById('searchInput').value = rawUrl;
-                              updateNavButtons();
-                            }
-                            if (iframe.contentDocument && iframe.contentDocument.title) {
-                               titleSpan.innerText = iframe.contentDocument.title;
-                            }
-                          }
-                        } catch(e) {}
-                      };
-
-                      document.getElementById('iframeContainer').appendChild(iframe);
-                      switchTab(id);
-                      return id;
-                    }
-
-                    window.addEventListener('message', function(e) {
-                      if (e.data && e.data.type === 'zen-browser-url-change') {
-                        var rawUrl = getRawUrl(e.data.url);
-                        var iframe = Array.from(document.querySelectorAll('iframe')).find(f => f.contentWindow === e.source);
-                        if (!iframe) return;
-                        var id = iframe.id.replace('frame-', '');
-                        var tab = tabs.find(t => t.id === id);
-                        
-                        if (tab && rawUrl && rawUrl !== 'about:blank') {
-                           if (tab.history[tab.historyIndex] !== rawUrl) {
-                              tab.history = tab.history.slice(0, tab.historyIndex + 1);
-                              tab.history.push(rawUrl);
-                              tab.historyIndex++;
-                           }
-                           tab.url = rawUrl;
-                           if (activeTabId === tab.id) {
-                             document.getElementById('searchInput').value = rawUrl;
-                             updateNavButtons();
-                           }
-                           if (e.data.title) {
-                             var tabEl = document.getElementById('el-' + tab.id);
-                             if (tabEl) tabEl.querySelector('.title').innerText = e.data.title;
-                           }
-                        }
-                      }
-                    });
-
-                    function switchTab(id) {
-                      activeTabId = id;
-                      document.querySelectorAll('.tab').forEach(el => el.classList.remove('active'));
-                      document.querySelectorAll('iframe').forEach(el => el.classList.remove('active'));
-                      
-                      var el = document.getElementById('el-' + id);
-                      var frame = document.getElementById('frame-' + id);
-                      if (el) el.classList.add('active');
-                      if (frame) frame.classList.add('active');
-                      
-                      var tab = tabs.find(t => t.id === id);
-                      if (tab) {
-                        document.getElementById('searchInput').value = tab.url;
-                        updateNavButtons();
-                      }
-                      document.title = DEFAULT_TITLE;
-                    }
-
-                    function updateNavButtons() {
-                       var tab = tabs.find(t => t.id === activeTabId);
-                       if (!tab) return;
-                       document.getElementById('backBtn').classList.toggle('disabled', tab.historyIndex <= 0);
-                       document.getElementById('forwardBtn').classList.toggle('disabled', tab.historyIndex >= tab.history.length - 1);
-                    }
-
-                    function removeTab(id) {
-                      var index = tabs.findIndex(t => t.id === id);
-                      if (index === -1) return;
-                      tabs = tabs.filter(t => t.id !== id);
-                      document.getElementById('el-' + id).remove();
-                      document.getElementById('frame-' + id).remove();
-                      if (activeTabId === id) {
-                        if (tabs.length > 0) {
-                          var nextTab = tabs[index] || tabs[index - 1];
-                          switchTab(nextTab.id);
-                        } else {
-                          addTab();
-                        }
-                      }
-                    }
-
-                    function goBack() {
-                      var tab = tabs.find(t => t.id === activeTabId);
-                      if (tab && tab.historyIndex > 0) {
-                        tab.historyIndex--;
-                        loadUrlInTab(tab, tab.history[tab.historyIndex], true);
-                      }
-                    }
-
-                    function goForward() {
-                       var tab = tabs.find(t => t.id === activeTabId);
-                       if (tab && tab.historyIndex < tab.history.length - 1) {
-                         tab.historyIndex++;
-                         loadUrlInTab(tab, tab.history[tab.historyIndex], true);
-                       }
-                    }
-
-                    function loadUrlInTab(tab, url, skipHistory) {
-                       tab.url = url;
-                       var iframe = document.getElementById('frame-' + tab.id);
-                       iframe.src = PROXY_BASE + encodeURIComponent(url);
-                       if (activeTabId === tab.id) {
-                         document.getElementById('searchInput').value = url;
-                       }
-                       document.getElementById('loader').style.width = '40%';
-                       updateNavButtons();
-                    }
-
-                    function reloadTab() {
-                      if (activeTabId) {
-                        var frame = document.getElementById('frame-' + activeTabId);
-                        frame.src = frame.src;
-                        document.getElementById('loader').style.width = '50%';
-                      }
-                    }
-
-                    function goHome() {
-                       handleSearch({ preventDefault: () => {}, target: null }, 'https://www.google.com/search?igu=1');
-                    }
-
-                    function handleSearch(e, forcedUrl) {
-                      if (e) e.preventDefault();
-                      var input = document.getElementById('searchInput');
-                      var query = forcedUrl || input.value.trim();
-                      if (!query) return false;
-
-                      var url = query;
-                      if (!query.match(/^(https?:\\/\\/)/i)) {
-                        if (query.includes('.') && !query.includes(' ')) {
-                           url = 'https://' + query;
-                        } else {
-                           url = "https://www.google.com/search?igu=1&q=" + encodeURIComponent(query);
-                        }
-                      }
-                      
-                      if (url.includes('youtube.com') && !url.includes('m.youtube.com')) {
-                        url = url.replace('www.youtube.com', 'm.youtube.com');
-                      }
-
-                      if (!activeTabId) {
-                        addTab(url);
-                      } else {
-                        var tab = tabs.find(t => t.id === activeTabId);
-                        loadUrlInTab(tab, url);
-                      }
-                      input.blur();
-                      return false;
-                    }
-
-                    addTab();
-                    // Initial title set
-                    document.title = DEFAULT_TITLE;
-                  </script>
-                </body>
-              </html>
-            `;
-            win.document.open();
-            win.document.write(content);
-            win.document.close();
-          }
-          keyPresses = [];
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, []);
-
   const handleExit = () => {
     setStepsEnabled(false);
   };
 
-  const title = 'App Draft'
-  const description = "24/7 looped white noise audio player to improve focus during study sessions."
+  const title = 'Balatro App'
+  const description = "A high-fidelity poker-inspired roguelike deck builder."
   const url = "https://flatlogic.com/"
   const image = "https://flatlogic.com/logo.svg"
   const imageWidth = '1920'
@@ -524,4 +192,4 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   )
 }
 
-export default appWithTranslation(MyApp);
+export default appWithTranslation(MyApp);
\ No newline at end of file
diff --git a/frontend/src/pages/browser.tsx b/frontend/src/pages/browser.tsx
new file mode 100644
index 0000000..4e5ebed
--- /dev/null
+++ b/frontend/src/pages/browser.tsx
@@ -0,0 +1,304 @@
+import React, { useState, useRef, useEffect } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import LayoutGuest from '../layouts/Guest';
+import { getPageTitle } from '../config';
+import BaseIcon from '../components/BaseIcon';
+import { mdiArrowLeft, mdiArrowRight, mdiRefresh, mdiHome, mdiMagnify, mdiShieldCheck, mdiDotsVertical, mdiAlertOctagon, mdiPlus, mdiClose } from '@mdi/js';
+
+const QUICK_LINKS = [
+  { name: 'Google', url: 'https://www.google.com', color: 'bg-blue-500' },
+  { name: 'YouTube', url: 'https://www.youtube.com', color: 'bg-red-500' },
+  { name: 'Wikipedia', url: 'https://www.wikipedia.org', color: 'bg-slate-500' },
+  { name: 'Reddit', url: 'https://www.reddit.com', color: 'bg-orange-500' },
+  { name: 'Twitch', url: 'https://www.twitch.tv', color: 'bg-purple-500' },
+];
+
+interface Tab {
+  id: string;
+  url: string;
+  displayUrl: string;
+  iframeUrl: string;
+  title: string;
+  isLoading: boolean;
+}
+
+export default function BrowserPage() {
+  const [tabs, setTabs] = useState<Tab[]>([
+    { id: '1', url: '', displayUrl: '', iframeUrl: '', title: 'Educational Portal', isLoading: false }
+  ]);
+  const [activeTabId, setActiveTabId] = useState('1');
+  
+  const activeTab = tabs.find(t => t.id === activeTabId) || tabs[0];
+
+  const getProxyUrl = (target: string) => {
+    const apiBase = process.env.NEXT_PUBLIC_BACK_API || '/api';
+    return `${apiBase}/proxy?url=${encodeURIComponent(target)}`;
+  };
+
+  const updateTab = (id: string, updates: Partial<Tab>) => {
+    setTabs(prev => prev.map(t => t.id === id ? { ...t, ...updates } : t));
+  };
+
+  const navigate = (target: string, tabId: string = activeTabId) => {
+    let finalTarget = target.trim();
+    if (!finalTarget) return;
+
+    if (!finalTarget.startsWith('http')) {
+      if (finalTarget.includes('.') && !finalTarget.includes(' ')) {
+        finalTarget = 'https://' + finalTarget;
+      } else {
+        finalTarget = `https://www.google.com/search?q=${encodeURIComponent(finalTarget)}`;
+      }
+    }
+    
+    updateTab(tabId, {
+      iframeUrl: getProxyUrl(finalTarget),
+      displayUrl: finalTarget,
+      url: finalTarget,
+      isLoading: true,
+      title: 'Loading...'
+    });
+  };
+
+  const addTab = () => {
+    const newId = Math.random().toString(36).substr(2, 9);
+    setTabs(prev => [...prev, { 
+      id: newId, 
+      url: '', 
+      displayUrl: '', 
+      iframeUrl: '', 
+      title: 'New Tab', 
+      isLoading: false 
+    }]);
+    setActiveTabId(newId);
+  };
+
+  const closeTab = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    if (tabs.length === 1) {
+      updateTab(id, { url: '', displayUrl: '', iframeUrl: '', title: 'Educational Portal', isLoading: false });
+      return;
+    }
+    const newTabs = tabs.filter(t => t.id !== id);
+    setTabs(newTabs);
+    if (activeTabId === id) {
+      setActiveTabId(newTabs[newTabs.length - 1].id);
+    }
+  };
+
+  const goHome = () => {
+    updateTab(activeTabId, { iframeUrl: '', url: '', displayUrl: '', title: 'Educational Portal' });
+  };
+
+  const panic = () => {
+    window.location.href = 'https://classroom.google.com';
+  };
+
+  useEffect(() => {
+    const handleMessage = (e: MessageEvent) => {
+      if (e.data && e.data.type === 'proxy-url-change') {
+         const newUrl = e.data.url;
+         try {
+           const hostname = new URL(newUrl).hostname;
+           updateTab(activeTabId, { displayUrl: newUrl, url: newUrl, title: hostname });
+         } catch(e) {
+           updateTab(activeTabId, { displayUrl: newUrl, url: newUrl });
+         }
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') panic();
+    };
+
+    window.addEventListener('message', handleMessage);
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('message', handleMessage);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [activeTabId]);
+
+  return (
+    <div className="flex flex-col h-screen bg-[#f8f9fa] text-slate-900 overflow-hidden font-sans">
+      <Head>
+        <title>SCHOOLWORK - Educational Resources</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+      </Head>
+
+      {/* Chrome-style Tab Bar */}
+      <div className="bg-[#dee1e6] px-2 pt-2 flex items-end gap-1 select-none overflow-x-auto no-scrollbar">
+        {tabs.map(tab => (
+          <div 
+            key={tab.id}
+            onClick={() => setActiveTabId(tab.id)}
+            className={`
+              rounded-t-lg px-4 py-2 text-xs flex items-center gap-2 min-w-[120px] max-w-[200px] cursor-pointer relative group transition-all
+              ${activeTabId === tab.id ? 'bg-white shadow-sm border-t border-x border-[#bdc1c6] z-10' : 'bg-[#dee1e6] hover:bg-[#cfd2d7] text-slate-600'}
+            `}
+          >
+            <BaseIcon path={mdiShieldCheck} size={14} className={activeTabId === tab.id ? 'text-green-600' : 'text-slate-400'} />
+            <span className="truncate flex-grow font-medium">
+              {tab.title}
+            </span>
+            <button 
+              onClick={(e) => closeTab(e, tab.id)}
+              className="hover:bg-gray-200 rounded-full p-0.5 opacity-0 group-hover:opacity-100"
+            >
+              <BaseIcon path={mdiClose} size={14} />
+            </button>
+            {activeTabId !== tab.id && <div className="absolute right-0 top-1/4 bottom-1/4 w-px bg-slate-400"></div>}
+          </div>
+        ))}
+        <button 
+          onClick={addTab}
+          className="mb-2 ml-1 p-1 hover:bg-[#cfd2d7] rounded-lg cursor-pointer text-slate-600"
+        >
+          <BaseIcon path={mdiPlus} size={20} />
+        </button>
+      </div>
+
+      {/* Toolbar */}
+      <div className="bg-white p-2 flex gap-3 items-center border-b border-[#dee1e6] shadow-sm z-20">
+        <div className="flex gap-1">
+           <button onClick={() => window.history.back()} className="p-1.5 hover:bg-gray-100 rounded-full transition-colors text-slate-600">
+             <BaseIcon path={mdiArrowLeft} size={20} />
+           </button>
+           <button onClick={() => window.history.forward()} className="p-1.5 hover:bg-gray-100 rounded-full transition-colors text-slate-600">
+             <BaseIcon path={mdiArrowRight} size={20} />
+           </button>
+           <button onClick={() => updateTab(activeTabId, { iframeUrl: activeTab.iframeUrl })} className="p-1.5 hover:bg-gray-100 rounded-full transition-colors text-slate-600">
+             <BaseIcon path={mdiRefresh} size={20} className={activeTab.isLoading ? 'animate-spin' : ''} />
+           </button>
+           <button onClick={goHome} className="p-1.5 hover:bg-gray-100 rounded-full transition-colors text-slate-600">
+             <BaseIcon path={mdiHome} size={20} />
+           </button>
+        </div>
+
+        <form 
+          onSubmit={(e) => { e.preventDefault(); navigate(activeTab.url); }} 
+          className="flex-grow flex items-center bg-[#f1f3f4] hover:bg-[#e8eaed] border border-transparent focus-within:bg-white focus-within:border-blue-500 rounded-full px-4 py-1.5 transition-all group"
+        >
+          <BaseIcon path={mdiMagnify} size={18} className="text-slate-500 mr-2" />
+          <input 
+            type="text" 
+            value={activeTab.url}
+            onChange={(e) => updateTab(activeTabId, { url: e.target.value })}
+            placeholder="Search Google or type a URL"
+            className="flex-grow bg-transparent outline-none text-sm text-slate-700"
+          />
+        </form>
+
+        <div className="flex gap-1 items-center">
+          <button 
+            onClick={panic}
+            className="flex items-center gap-1.5 px-3 py-1.5 bg-red-50 text-red-600 hover:bg-red-100 rounded-full text-xs font-bold transition-colors border border-red-100"
+          >
+            <BaseIcon path={mdiAlertOctagon} size={16} />
+            PANIC (ESC)
+          </button>
+          <button className="p-2 hover:bg-gray-100 rounded-full text-slate-600">
+            <BaseIcon path={mdiDotsVertical} size={20} />
+          </button>
+        </div>
+      </div>
+
+      {/* Browser Content */}
+      <div className="flex-grow relative bg-white overflow-hidden">
+        {tabs.map(tab => (
+          <div key={tab.id} className={`absolute inset-0 ${tab.id === activeTabId ? 'block' : 'hidden'}`}>
+            {!tab.iframeUrl ? (
+              <div className="flex flex-col items-center justify-center h-full bg-white p-8">
+                <div className="max-w-2xl w-full text-center">
+                  <h1 className="text-5xl font-bold mb-8 tracking-tight text-[#1a73e8]">
+                    <span className="text-blue-500">S</span>
+                    <span className="text-red-500">t</span>
+                    <span className="text-yellow-500">u</span>
+                    <span className="text-blue-500">d</span>
+                    <span className="text-green-500">y</span>
+                    <span className="text-red-500 ml-1">P</span>
+                    <span className="text-blue-500">o</span>
+                    <span className="text-yellow-500">r</span>
+                    <span className="text-green-500">t</span>
+                    <span className="text-red-500">a</span>
+                    <span className="text-blue-500">l</span>
+                  </h1>
+                  
+                  <div className="relative mb-12 group">
+                     <div className="absolute inset-y-0 left-4 flex items-center pointer-events-none">
+                       <BaseIcon path={mdiMagnify} size={24} className="text-gray-400" />
+                     </div>
+                     <input 
+                       type="text"
+                       placeholder="Search educational resources..."
+                       className="w-full bg-white border border-gray-200 hover:shadow-md focus:shadow-md rounded-full py-4 pl-12 pr-6 outline-none transition-all text-lg"
+                       onKeyDown={(e) => e.key === 'Enter' && navigate((e.target as HTMLInputElement).value, tab.id)}
+                     />
+                  </div>
+
+                  <div className="flex flex-wrap justify-center gap-6">
+                    {QUICK_LINKS.map(link => (
+                      <button 
+                        key={link.name}
+                        onClick={() => navigate(link.url, tab.id)}
+                        className="flex flex-col items-center gap-2 group"
+                      >
+                        <div className={`${link.color} w-14 h-14 rounded-full flex items-center justify-center shadow-sm group-hover:shadow-md transition-all text-white font-bold text-xl`}>
+                          {link.name[0]}
+                        </div>
+                        <span className="text-sm text-gray-600 group-hover:underline">{link.name}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <>
+                {tab.isLoading && (
+                  <div className="absolute inset-x-0 top-0 h-1 bg-blue-100 overflow-hidden z-50">
+                    <div className="h-full bg-blue-500 animate-progress origin-left w-full"></div>
+                  </div>
+                )}
+                <iframe 
+                  src={tab.iframeUrl}
+                  className="w-full h-full border-none bg-white"
+                  onLoad={() => {
+                    updateTab(tab.id, { isLoading: false });
+                    try {
+                      const hostname = new URL(tab.displayUrl).hostname;
+                      updateTab(tab.id, { title: hostname });
+                    } catch(e) {}
+                  }}
+                  allow="autoplay; encrypted-media; fullscreen; clipboard-write; geolocation"
+                />
+              </>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <style jsx global>{`
+        @keyframes progress {
+          0% { transform: scaleX(0); }
+          50% { transform: scaleX(0.7); }
+          100% { transform: scaleX(1); }
+        }
+        .animate-progress {
+          animation: progress 2s infinite ease-in-out;
+        }
+        .no-scrollbar::-webkit-scrollbar {
+          display: none;
+        }
+        .no-scrollbar {
+          -ms-overflow-style: none;
+          scrollbar-width: none;
+        }
+      `}</style>
+    </div>
+  );
+}
+
+BrowserPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
\ No newline at end of file
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 597c478..5775bde 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,335 +1,21 @@
-
-import React, { useEffect, useState, useRef } from 'react';
-import type { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import Head from 'next/head';
-import Link from 'next/link';
-import { 
-  mdiPlay, 
-  mdiPause, 
-  mdiVolumeHigh, 
-  mdiTuneVariant, 
-  mdiClockOutline, 
-  mdiCoffeeOutline, 
-  mdiBookOpenVariant, 
-  mdiRefresh,
-  mdiWeatherRainy,
-  mdiWaves,
-  mdiTree,
-  mdiVolumeMedium
-} from '@mdi/js';
-import BaseIcon from '../components/BaseIcon';
+import BalatroGame from '../components/Balatro/BalatroGame';
 import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 
-export default function WhiteNoiseHome() {
-  // Audio State
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [volume, setVolume] = useState(0.5);
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-
-  const sounds = [
-    { id: 'white', name: 'White Noise', url: 'https://actions.google.com/sounds/v1/ambiences/white_noise.ogg', icon: mdiTuneVariant, color: 'indigo' },
-    { id: 'rain', name: 'Heavy Rain', url: 'https://actions.google.com/sounds/v1/weather/rain_heavy_loud.ogg', icon: mdiWeatherRainy, color: 'blue' },
-    { id: 'ocean', name: 'Ocean Waves', url: 'https://actions.google.com/sounds/v1/water/waves_crashing_on_shore.ogg', icon: mdiWaves, color: 'cyan' },
-    { id: 'forest', name: 'Night Forest', url: 'https://actions.google.com/sounds/v1/ambiences/night_forest_with_insects.ogg', icon: mdiTree, color: 'green' },
-  ];
-  const [currentSound, setCurrentSound] = useState(sounds[0]);
-
-  // Timer State
-  const [timerMinutes, setTimerMinutes] = useState(25);
-  const [timerSeconds, setTimerSeconds] = useState(0);
-  const [isTimerRunning, setIsTimerRunning] = useState(false);
-  const [timerMode, setTimerMode] = useState<'focus' | 'break'>('focus');
-
-  // Timer Logic
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-
-    if (isTimerRunning) {
-      interval = setInterval(() => {
-        if (timerSeconds > 0) {
-          setTimerSeconds(timerSeconds - 1);
-        } else if (timerMinutes > 0) {
-          setTimerMinutes(timerMinutes - 1);
-          setTimerSeconds(59);
-        } else {
-          // Timer finished
-          const nextMode = timerMode === 'focus' ? 'break' : 'focus';
-          setTimerMode(nextMode);
-          setTimerMinutes(nextMode === 'focus' ? 25 : 5);
-          setTimerSeconds(0);
-          setIsTimerRunning(false);
-          // Play a notification sound could be added here
-        }
-      }, 1000);
-    }
-
-    return () => clearInterval(interval);
-  }, [isTimerRunning, timerMinutes, timerSeconds, timerMode]);
-
-  const toggleTimer = () => setIsTimerRunning(!isTimerRunning);
-  const resetTimer = () => {
-    setIsTimerRunning(false);
-    setTimerMinutes(timerMode === 'focus' ? 25 : 5);
-    setTimerSeconds(0);
-  };
-
-  const togglePlay = () => {
-    if (audioRef.current) {
-      if (isPlaying) {
-        audioRef.current.pause();
-      } else {
-        audioRef.current.play().catch(err => console.error("Audio play failed:", err));
-      }
-      setIsPlaying(!isPlaying);
-    }
-  };
-
-  const changeSound = (sound: typeof sounds[0]) => {
-    setCurrentSound(sound);
-    setIsPlaying(false);
-    if (audioRef.current) {
-      audioRef.current.load();
-    }
-  };
-
-  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newVolume = parseFloat(e.target.value);
-    setVolume(newVolume);
-    if (audioRef.current) {
-      audioRef.current.volume = newVolume;
-    }
-  };
-
+export default function Home() {
   return (
-    <div className="min-h-screen bg-slate-950 text-slate-100 flex flex-col font-sans selection:bg-indigo-500/30">
+    <>
       <Head>
-        <title>{getPageTitle('ZenNoise - Deep Focus Study Tools')}</title>
-        <meta name="description" content="Seamless white noise loop and study timer. Achieve deep flow state with ZenNoise." />
+        <title>{getPageTitle('Balatro - Poker Roguelike')}</title>
+        <meta name="description" content="A high-fidelity poker-inspired roguelike deck builder." />
       </Head>
-
-      <audio
-        ref={audioRef}
-        src={currentSound.url}
-        loop
-        onPlay={() => setIsPlaying(true)}
-        onPause={() => setIsPlaying(false)}
-      />
-
-      {/* Header */}
-      <nav className="flex items-center justify-between px-6 md:px-12 py-6 bg-slate-950/50 backdrop-blur-xl sticky top-0 z-50 border-b border-white/5">
-        <div className="flex items-center space-x-3">
-          <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/20 rotate-3">
-            <BaseIcon path={mdiTuneVariant} size={22} className="text-white" />
-          </div>
-          <span className="text-2xl font-black tracking-tighter text-white">
-            ZenNoise
-          </span>
-        </div>
-        <div className="flex items-center space-x-4 md:space-x-8">
-          <Link href="/login" className="hidden md:block text-sm font-bold text-slate-400 hover:text-white transition-colors uppercase tracking-widest">
-            Sign In
-          </Link>
-          <Link 
-            href="/login" 
-            className="px-6 py-2.5 bg-white hover:bg-slate-200 text-slate-950 text-sm font-bold rounded-full transition-all shadow-xl hover:scale-105 active:scale-95"
-          >
-            Dashboard
-          </Link>
-        </div>
-      </nav>
-
-      <main className="flex-grow container mx-auto px-4 py-12 space-y-24">
-        
-        {/* Hero & Primary Player */}
-        <section className="flex flex-col items-center justify-center text-center space-y-12 relative py-20">
-          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-indigo-600/10 rounded-full blur-[120px] -z-10" />
-          
-          <div className="space-y-6">
-            <h1 className="text-5xl md:text-7xl font-black tracking-tight text-white leading-tight">
-              Design Your <br />
-              <span className="text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-purple-400">Atmosphere.</span>
-            </h1>
-            <p className="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto font-medium">
-              Mixing high-fidelity noise loops with a precision study timer to help you reach a state of absolute focus.
-            </p>
-          </div>
-
-          <div className="flex flex-col items-center space-y-8">
-            <div className="relative group cursor-pointer" onClick={togglePlay}>
-              <div className={`absolute -inset-10 bg-indigo-500/20 rounded-full blur-3xl transition-all duration-1000 ${isPlaying ? 'animate-pulse scale-125' : 'scale-100'}`} />
-              <div className={`relative w-48 h-48 rounded-full flex items-center justify-center transition-all duration-700 ${
-                isPlaying 
-                ? 'bg-white text-slate-950 scale-105 shadow-[0_0_80px_rgba(255,255,255,0.2)]' 
-                : 'bg-indigo-600 text-white shadow-2xl shadow-indigo-600/40'
-              }`}>
-                <BaseIcon path={isPlaying ? mdiPause : mdiPlay} size={80} />
-              </div>
-            </div>
-            
-            <div className="flex items-center space-x-3 text-slate-400 font-bold uppercase tracking-widest text-xs">
-              <span className="w-8 h-[1px] bg-slate-800" />
-              <span>Now Playing: {currentSound.name}</span>
-              <span className="w-8 h-[1px] bg-slate-800" />
-            </div>
-          </div>
-        </section>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-          
-          {/* Study Timer Section */}
-          <section className="bg-white/5 border border-white/10 rounded-[40px] p-8 md:p-12 space-y-8 backdrop-blur-sm relative overflow-hidden group">
-            <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
-              <BaseIcon path={mdiClockOutline} size={120} />
-            </div>
-            
-            <div className="space-y-2">
-              <h2 className="text-3xl font-black text-white">Study Timer</h2>
-              <p className="text-slate-400 font-medium">Precision Pomodoro to keep your brain sharp.</p>
-            </div>
-
-            <div className="flex flex-col items-center space-y-8">
-              <div className="text-8xl md:text-9xl font-black tabular-nums tracking-tighter text-white">
-                {String(timerMinutes).padStart(2, '0')}:{String(timerSeconds).padStart(2, '0')}
-              </div>
-
-              <div className="flex items-center space-x-4">
-                <button 
-                  onClick={toggleTimer}
-                  className={`px-10 py-4 rounded-2xl font-bold text-lg transition-all active:scale-95 ${
-                    isTimerRunning 
-                    ? 'bg-slate-800 text-white hover:bg-slate-700' 
-                    : 'bg-indigo-600 text-white hover:bg-indigo-500 shadow-xl shadow-indigo-600/20'
-                  }`}
-                >
-                  {isTimerRunning ? 'Pause' : 'Start Focus'}
-                </button>
-                <button 
-                  onClick={resetTimer}
-                  className="p-4 bg-white/5 hover:bg-white/10 rounded-2xl text-slate-400 hover:text-white transition-all"
-                >
-                  <BaseIcon path={mdiRefresh} size={28} />
-                </button>
-              </div>
-
-              <div className="flex bg-slate-900 p-1.5 rounded-2xl border border-white/5">
-                <button 
-                  onClick={() => { setTimerMode('focus'); setTimerMinutes(25); setTimerSeconds(0); setIsTimerRunning(false); }}
-                  className={`px-6 py-2 rounded-xl text-sm font-bold transition-all ${timerMode === 'focus' ? 'bg-white text-slate-950 shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
-                >
-                  Focus (25m)
-                </button>
-                <button 
-                  onClick={() => { setTimerMode('break'); setTimerMinutes(5); setTimerSeconds(0); setIsTimerRunning(false); }}
-                  className={`px-6 py-2 rounded-xl text-sm font-bold transition-all ${timerMode === 'break' ? 'bg-white text-slate-950 shadow-lg' : 'text-slate-500 hover:text-slate-300'}`}
-                >
-                  Break (5m)
-                </button>
-              </div>
-            </div>
-          </section>
-
-          {/* Library Section */}
-          <section className="bg-white/5 border border-white/10 rounded-[40px] p-8 md:p-12 space-y-8 backdrop-blur-sm relative overflow-hidden group">
-            <div className="absolute top-0 right-0 p-8 opacity-10 group-hover:opacity-20 transition-opacity">
-              <BaseIcon path={mdiBookOpenVariant} size={120} />
-            </div>
-
-            <div className="space-y-2">
-              <h2 className="text-3xl font-black text-white">Sound Library</h2>
-              <p className="text-slate-400 font-medium">Switch between different high-fidelity environments.</p>
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              {sounds.map((sound) => (
-                <button
-                  key={sound.id}
-                  onClick={() => changeSound(sound)}
-                  className={`p-6 rounded-3xl border transition-all text-left flex flex-col space-y-4 group/card ${
-                    currentSound.id === sound.id 
-                    ? 'bg-white border-white text-slate-950' 
-                    : 'bg-white/5 border-white/10 text-white hover:bg-white/10 hover:border-white/20'
-                  }`}
-                >
-                  <div className={`w-12 h-12 rounded-2xl flex items-center justify-center transition-colors ${
-                    currentSound.id === sound.id ? 'bg-slate-100 text-indigo-600' : 'bg-slate-900 text-slate-400 group-hover/card:text-indigo-400'
-                  }`}>
-                    <BaseIcon path={sound.icon} size={28} />
-                  </div>
-                  <div>
-                    <div className="font-bold text-lg">{sound.name}</div>
-                    <div className={`text-xs uppercase tracking-widest font-bold opacity-50 ${currentSound.id === sound.id ? 'text-indigo-600' : 'text-slate-400'}`}>
-                      {sound.id === 'white' ? 'Continuous' : 'Atmospheric'}
-                    </div>
-                  </div>
-                </button>
-              ))}
-            </div>
-
-            {/* Volume Control Overlay */}
-            <div className="pt-4">
-              <div className="bg-slate-900/80 backdrop-blur-xl p-6 rounded-[32px] border border-white/5 flex items-center space-x-6">
-                <BaseIcon path={volume > 0.5 ? mdiVolumeHigh : volume > 0 ? mdiVolumeMedium : mdiVolumeMedium} size={24} className="text-indigo-400" />
-                <input
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.01"
-                  value={volume}
-                  onChange={handleVolumeChange}
-                  className="flex-grow h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500"
-                />
-                <span className="text-slate-400 font-mono text-xs w-8">{Math.round(volume * 100)}%</span>
-              </div>
-            </div>
-          </section>
-
-        </div>
-
-        {/* Benefits Section */}
-        <section className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center py-12">
-          <div className="space-y-4">
-            <div className="w-16 h-16 bg-indigo-500/10 rounded-2xl flex items-center justify-center mx-auto text-indigo-400">
-              <BaseIcon path={mdiTuneVariant} size={32} />
-            </div>
-            <h3 className="text-xl font-bold text-white">Mask Distractions</h3>
-            <p className="text-slate-500 leading-relaxed">Cancel out annoying background noise like construction or chatter with ease.</p>
-          </div>
-          <div className="space-y-4">
-            <div className="w-16 h-16 bg-purple-500/10 rounded-2xl flex items-center justify-center mx-auto text-purple-400">
-              <BaseIcon path={mdiClockOutline} size={32} />
-            </div>
-            <h3 className="text-xl font-bold text-white">Improve Focus</h3>
-            <p className="text-slate-500 leading-relaxed">Standardize your study environment to trigger &quot;flow state&quot; faster and more reliably.</p>
-          </div>
-          <div className="space-y-4">
-            <div className="w-16 h-16 bg-cyan-500/10 rounded-2xl flex items-center justify-center mx-auto text-cyan-400">
-              <BaseIcon path={mdiCoffeeOutline} size={32} />
-            </div>
-            <h3 className="text-xl font-bold text-white">Reduce Stress</h3>
-            <p className="text-slate-500 leading-relaxed">Gentle noise frequencies are proven to lower cortisol levels during high-stress tasks.</p>
-          </div>
-        </section>
-      </main>
-
-      {/* Footer */}
-      <footer className="py-12 px-12 border-t border-white/5 flex flex-col md:flex-row items-center justify-between text-slate-500 text-sm bg-slate-950">
-        <div className="flex items-center space-x-2 opacity-50 mb-6 md:mb-0">
-          <BaseIcon path={mdiTuneVariant} size={18} />
-          <span className="font-bold tracking-tighter">ZenNoise</span>
-        </div>
-        <div className="flex flex-col md:flex-row items-center md:space-x-12 space-y-4 md:space-y-0">
-          <p>© 2026. Designed for Focus.</p>
-          <div className="flex space-x-6">
-            <Link href="/privacy-policy" className="hover:text-indigo-400 transition-colors">Privacy</Link>
-            <Link href="/terms" className="hover:text-indigo-400 transition-colors">Terms</Link>
-          </div>
-        </div>
-      </footer>
-    </div>
+      <BalatroGame />
+    </>
   );
 }
 
-WhiteNoiseHome.getLayout = function getLayout(page: ReactElement) {
+Home.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
-};
+};
\ No newline at end of file