diff --git a/global.d.ts b/global.d.ts
index 4780deb..4d20bfa 100644
--- a/global.d.ts
+++ b/global.d.ts
@@ -1,3 +1,35 @@
-interface Window {
-    ethereum?: any;
-  }
\ No newline at end of file
+export {};
+
+/**
+ * Minimal EIP-1193 / EVM provider interface
+ * matching ethers v6 Eip1193Provider signatures.
+ */
+interface EvmProvider {
+  isMetaMask?: boolean;
+  isCoinbaseWallet?: boolean;
+  isPhantom?: boolean; // some Phantom EVM betas might set this
+  providers?: EvmProvider[];
+
+  // Change from 'request?:' to 'request:' so it's non-optional
+  request: (args: {
+    method: string;
+    // Ethers v6 uses any[] | Record<string, any> for 'params'
+    params?: any[] | Record<string, any>;
+  }) => Promise<any>;
+}
+
+declare global {
+  interface Window {
+    ethereum?: EvmProvider;
+    solana?: {
+      isPhantom?: boolean;
+      connect: () => Promise<{ publicKey: { toString(): string } }>;
+    };
+    phantom?: {
+      isPhantom?: boolean;
+      sui?: {
+        // add connect if needed
+      };
+    };
+  }
+}
diff --git a/public/images/KRBYLAND.png b/public/images/KRBYLAND.png
new file mode 100644
index 0000000..72ba48a
Binary files /dev/null and b/public/images/KRBYLAND.png differ
diff --git a/src/app/components/WalletConnect.tsx b/src/app/components/WalletConnect.tsx
index 393063a..40deac3 100644
--- a/src/app/components/WalletConnect.tsx
+++ b/src/app/components/WalletConnect.tsx
@@ -1,20 +1,18 @@
 "use client";
 
 import React, { useState } from "react";
-import { ethers } from "ethers";
-import "./globals.css"; // The code that excludes <button>/<select> from your universal gradient
+import { ethers, Eip1193Provider, BrowserProvider } from "ethers";
+import "./globals.css";
 import Image from "next/image";
 import Link from "next/link";
 import { Press_Start_2P } from "next/font/google";
 
-/** Press_Start_2P as before */
 const pressStart2P = Press_Start_2P({
   subsets: ["latin"],
   weight: "400",
   display: "swap",
 });
 
-/** Minimal chain configs for demonstration */
 const CHAINS = {
   ETHEREUM: {
     label: "Ethereum",
@@ -32,180 +30,132 @@ const CHAINS = {
     rpcUrls: ["https://polygon-rpc.com"],
     blockExplorerUrls: ["https://polygonscan.com"],
   },
-  // ... Arbitrum, Avalanche, Base if desired
+  // ... add more as needed
 } as const;
 
-/** 
- * 1) A custom chain dropdown => shows if user is EVM-connected 
- */
-function ChainDropdown({
-  chains,
-  selectedChain,
-  onSelectChain,
-}: {
-  chains: { key: string; label: string }[];
-  selectedChain: string;
-  onSelectChain: (key: string) => void;
-}) {
-  const [open, setOpen] = useState(false);
-
-  // find label for the selected chain
-  const chainLabel =
-    chains.find((c) => c.key === selectedChain)?.label || "Select Chain";
-
-  return (
-    <div className="relative inline-block ml-2">
-      <button
-        onClick={() => setOpen(!open)}
-        className="px-2 py-1 text-xs text-white border-2 border-white rounded-full bg-transparent
-                   transition-colors cursor-pointer
-                   hover:bg-gradient-to-r hover:from-pink-500 hover:to-yellow-500
-                   hover:text-transparent hover:bg-clip-text"
-      >
-        {chainLabel}
-      </button>
-      {open && (
-        <div className="absolute mt-2 w-40 whitespace-nowrap border border-white rounded bg-black text-white z-10">
-          {chains.map((c) => (
-            <div
-              key={c.key}
-              onClick={() => {
-                onSelectChain(c.key);
-                setOpen(false);
-              }}
-              className="px-3 py-1 cursor-pointer
-                         hover:bg-gradient-to-r hover:from-pink-500 hover:to-yellow-500
-                         hover:text-transparent hover:bg-clip-text"
-            >
-              {c.label}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+type ChainKey = keyof typeof CHAINS;
 
-/** 
- * 2) The RootLayout => same UI ordering, 
- *    left => Logo + Title + (chain dropdown if EVM connected) + wallet logic
- *    right => Nav menu (Home, About, etc.)
+/**
+ * 1) The RootLayout => brand + aggregator
+ *    Because this file is `"use client"`, we can pass function props freely inside it.
  */
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  // State: which wallet is connected? "metamask","coinbase","phantom" or null
+export default function WalletConnectLayout({ children }: { children: React.ReactNode }) {
   const [connectedWallet, setConnectedWallet] = useState<"metamask"|"coinbase"|"phantom"|null>(null);
-
-  // The actual EVM address (if EVM connected) or null
   const [evmAddress, setEvmAddress] = useState<string|null>(null);
-
-  // If user picks Solana Phantom => store that address here
   const [solanaAddress, setSolanaAddress] = useState<string|null>(null);
 
-  // For chain switching => default "ETHEREUM"
-  const [selectedChain, setSelectedChain] = useState<keyof typeof CHAINS>("ETHEREUM");
-
-  // Show/hide sub-buttons => metamask/coinbase/phantom
+  const [selectedChain, setSelectedChain] = useState<ChainKey>("ETHEREUM");
   const [showWalletButtons, setShowWalletButtons] = useState(false);
 
-  // =============== Connect Logic ===============
-
-  // (A) Connect => EVM (MetaMask) => never pick Phantom EVM
+  // =============== (A) Connect => EVM => MetaMask ===============
   async function connectMetaMask() {
     setConnectedWallet("metamask");
-    setSolanaAddress(null); // reset solana if previously connected
+    setSolanaAddress(null);
+
+    if (!window.ethereum) {
+      alert("No window.ethereum => MetaMask missing?");
+      return;
+    }
 
-    // Forcibly pick metamask if multiple providers => skip p.isPhantom
-    let chosenProvider: any = window.ethereum;
-    if (window.ethereum?.providers) {
-      const mm = window.ethereum.providers.find((p: any) => p.isMetaMask);
+    let chosenProvider = window.ethereum;
+    if (window.ethereum.providers?.length) {
+      const mm = window.ethereum.providers.find((p) => p.isMetaMask);
       if (mm) chosenProvider = mm;
     }
-    if (!chosenProvider?.isMetaMask) {
+
+    if (!chosenProvider.isMetaMask) {
       alert("MetaMask overshadowed or not found!");
       return;
     }
 
     try {
-      const provider = new ethers.BrowserProvider(chosenProvider);
+      const provider = new BrowserProvider(chosenProvider as Eip1193Provider);
+      await provider.send("eth_requestAccounts", []);
       const signer = await provider.getSigner();
-      const address = await signer.getAddress();
-      setEvmAddress(address);
+      setEvmAddress(await signer.getAddress());
     } catch (err) {
-      console.error("MetaMask connect error", err);
+      console.error("MetaMask connect error:", err);
     }
   }
 
-  // (B) Connect => EVM (Coinbase) => never pick Phantom EVM
+  // =============== (B) Connect => EVM => Coinbase ===============
   async function connectCoinbase() {
     setConnectedWallet("coinbase");
     setSolanaAddress(null);
 
-    let chosenProvider: any = window.ethereum;
-    if (window.ethereum?.providers) {
-      const cb = window.ethereum.providers.find((p: any) => p.isCoinbaseWallet);
+    if (!window.ethereum) {
+      alert("No window.ethereum => Coinbase extension missing?");
+      return;
+    }
+
+    let chosenProvider = window.ethereum;
+    if (window.ethereum.providers?.length) {
+      const cb = window.ethereum.providers.find((p) => p.isCoinbaseWallet);
       if (cb) chosenProvider = cb;
     }
-    if (!chosenProvider?.isCoinbaseWallet) {
+
+    if (!chosenProvider.isCoinbaseWallet) {
       alert("Coinbase overshadowed or not found!");
       return;
     }
 
     try {
-      const provider = new ethers.BrowserProvider(chosenProvider);
+      const provider = new BrowserProvider(chosenProvider as Eip1193Provider);
+      await provider.send("eth_requestAccounts", []);
       const signer = await provider.getSigner();
-      const address = await signer.getAddress();
-      setEvmAddress(address);
+      setEvmAddress(await signer.getAddress());
     } catch (err) {
-      console.error("Coinbase connect error", err);
+      console.error("Coinbase connect error:", err);
     }
   }
 
-  // (C) Connect => Phantom => solana only => ignore phantom EVM
+  // =============== (C) Connect => Phantom => Solana ===============
   async function connectPhantom() {
     setConnectedWallet("phantom");
-    setEvmAddress(null); // reset EVM if previously connected
+    setEvmAddress(null);
 
     if (!window.solana?.isPhantom) {
-      alert("Phantom overshadowed or not found!");
+      alert("Phantom overshadowed or not found => Solana!");
       return;
     }
     try {
       const resp = await window.solana.connect();
       setSolanaAddress(resp.publicKey.toString());
     } catch (err) {
-      console.error("Phantom connect error", err);
+      console.error("Phantom connect error:", err);
     }
   }
 
-  // =============== Disconnect ================
+  // =============== Disconnect ===============
   function disconnectWallet() {
     setConnectedWallet(null);
     setEvmAddress(null);
     setSolanaAddress(null);
   }
 
-  // =============== Switch EVM chain ===============
-  async function switchChain(chainKey: keyof typeof CHAINS) {
+  // =============== Switch EVM Chain ===============
+  async function switchChain(chainKey: ChainKey) {
     if (!evmAddress) {
-      alert("No EVM address found. Connect an EVM wallet first!");
+      alert("No EVM address => connect metamask/coinbase first!");
       return;
     }
     if (connectedWallet!=="metamask" && connectedWallet!=="coinbase") {
-      alert("Chain switching only for metamask/coinbase wallets.");
+      alert("Chain switching => metamask or coinbase only!");
       return;
     }
+
     const chainData = CHAINS[chainKey];
     if (!chainData) return;
 
     try {
-      await window.ethereum.request({
+      await window.ethereum?.request?.({
         method: "wallet_switchEthereumChain",
         params: [{ chainId: chainData.chainId }],
       });
     } catch (error: any) {
       if (error.code === 4902) {
         try {
-          await window.ethereum.request({
+          await window.ethereum?.request?.({
             method: "wallet_addEthereumChain",
             params: [
               {
@@ -226,19 +176,19 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     }
   }
 
-  // Figure out which address to display => EVM or solana
+  // =============== aggregator => truncated display address ===============
   let displayAddress: string | null = null;
-  if (connectedWallet==="metamask" || connectedWallet==="coinbase") {
+  if (connectedWallet === "metamask" || connectedWallet === "coinbase") {
     if (evmAddress) {
-      displayAddress = evmAddress.slice(0,5)+"..."+evmAddress.slice(-4);
+      displayAddress = evmAddress.slice(0, 5) + "..." + evmAddress.slice(-4);
     }
-  } else if (connectedWallet==="phantom") {
+  } else if (connectedWallet === "phantom") {
     if (solanaAddress) {
-      displayAddress = solanaAddress.slice(0,5)+"..."+solanaAddress.slice(-4);
+      displayAddress = solanaAddress.slice(0, 5) + "..." + solanaAddress.slice(-4);
     }
   }
 
-  // Pink→yellow gradient on hover => for "Connect Wallet" button
+  // Pink→yellow gradient for "Connect Wallet" button
   const sharedHoverGradient = `
     px-2 py-1
     text-xs
@@ -259,11 +209,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body className={`min-h-screen text-xs bg-black ${pressStart2P.className}`}>
-
-        {/* 
-          EXACT same layout => left = brand + chain + "Connect or address"
-          right = nav
-        */}
         <header className="p-2 bg-black border-b border-neutral-800">
           <nav className="container mx-auto flex items-center justify-between">
             
@@ -276,32 +221,30 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                   width={36}
                   height={36}
                 />
-                <span className="text-xs font-bold">KRBYLAND</span>
               </Link>
 
+              {/* If user is EVM => show chain dropdown (below) */}
               {connectedWallet!=="phantom" && evmAddress && (
                 <ChainDropdown
                   chains={Object.keys(CHAINS).map((k) => ({
                     key: k,
-                    label: CHAINS[k as keyof typeof CHAINS].label
+                    label: CHAINS[k as ChainKey].label
                   }))}
                   selectedChain={selectedChain}
                   onSelectChain={(k: string) => {
-                    setSelectedChain(k as keyof typeof CHAINS);
-                    switchChain(k as keyof typeof CHAINS);
+                    setSelectedChain(k as ChainKey);
+                    switchChain(k as ChainKey);
                   }}
                 />
               )}
 
-              {/* If connected => show address + Disconnect. Else show "Connect" => sub buttons */}
+              {/* If connected => show address + Disconnect. Else => “Connect” => sub‐buttons */}
               <div className="ml-2">
                 {displayAddress ? (
                   <div className="flex items-center gap-2">
-                    {/* Show truncated address in a button or span */}
                     <button className={sharedHoverGradient}>
                       {displayAddress}
                     </button>
-                    {/* New "Disconnect" button => sets connectedWallet to null */}
                     <button onClick={disconnectWallet} className={sharedHoverGradient}>
                       Disconnect
                     </button>
@@ -316,7 +259,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 )}
               </div>
 
-              {/* The row of 3 sub-buttons => metamask, coinbase, phantom => only if not connected */}
+              {/* sub-buttons => metamask, coinbase, phantom => only if not connected */}
               {!displayAddress && showWalletButtons && (
                 <div className="ml-2 flex items-center space-x-2">
                   <button onClick={connectMetaMask} className={sharedHoverGradient}>
@@ -332,7 +275,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               )}
             </div>
 
-            {/* RIGHT side => nav menu => exactly the same as your code */}
+            {/* RIGHT side => nav menu */}
             <ul className="flex gap-2">
               <li>
                 <Link
@@ -385,3 +328,53 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     </html>
   );
 }
+
+/**
+ * 2) ChainDropdown => Now we keep it in the SAME "use client" file
+ *    so we don't pass function props across a server boundary.
+ */
+function ChainDropdown({
+  chains,
+  selectedChain,
+  onSelectChain,
+}: {
+  chains: { key: string; label: string }[];
+  selectedChain: string;
+  onSelectChain: (key: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const chainLabel = chains.find((c) => c.key === selectedChain)?.label || "Select Chain";
+
+  return (
+    <div className="relative inline-block ml-2">
+      <button
+        onClick={() => setOpen(!open)}
+        className="px-2 py-1 text-xs text-white border-2 border-white rounded-full bg-transparent
+                   transition-colors cursor-pointer
+                   hover:bg-gradient-to-r hover:from-pink-500 hover:to-yellow-500
+                   hover:text-transparent hover:bg-clip-text"
+      >
+        {chainLabel}
+      </button>
+      {open && (
+        <div className="absolute mt-2 w-40 whitespace-nowrap border border-white rounded bg-black text-white z-10">
+          {chains.map((c) => (
+            <div
+              key={c.key}
+              onClick={() => {
+                onSelectChain(c.key);
+                setOpen(false);
+              }}
+              className="px-3 py-1 cursor-pointer
+                         hover:bg-gradient-to-r hover:from-pink-500 hover:to-yellow-500
+                         hover:text-transparent hover:bg-clip-text"
+            >
+              {c.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/debug1/page.tsx b/src/app/debug1/page.tsx
deleted file mode 100644
index a62a0a8..0000000
--- a/src/app/debug1/page.tsx
+++ /dev/null
@@ -1,440 +0,0 @@
-"use client";
-
-import React, { useRef, useMemo } from "react";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { OrbitControls, Environment, useTexture } from "@react-three/drei";
-import * as THREE from "three";
-
-/* =================== TYPE DEFINITIONS =================== */
-interface CeilingLightProps {
-  color: string;
-  x: number;
-  z: number;
-  speed: number;
-  mode: "rotate" | "scan";
-  overheadIntensity?: number;
-}
-interface LaserProps {
-  color: string;
-  x: number;
-  z: number;
-  speed: number;
-  mode: "rotate" | "scan";
-  apexY?: number;
-}
-
-/* 
-   =========== RandomColorStrobeLight ===========
-   Flickers ON half time, OFF half time,
-   picks random color each time it flips ON.
-*/
-function RandomColorStrobeLight({
-  position = [0, 5, 5],
-  frequency = 5,
-  maxIntensity = 80,
-}: {
-  position?: [number, number, number];
-  frequency?: number;
-  maxIntensity?: number;
-}) {
-  const lightRef = useRef<THREE.SpotLight>(null);
-  const isOnRef = useRef<boolean>(false);
-
-  useFrame(() => {
-    const t = performance.now() * 0.001;
-    // wave => 0..1
-    const strobeValue = (Math.sin(t * frequency * 2 * Math.PI) + 1) / 2;
-    const isOn = strobeValue > 0.5;
-    const intensity = isOn ? maxIntensity : 0;
-
-    if (lightRef.current) {
-      lightRef.current.intensity = intensity;
-      // random color when it flips ON
-      if (isOn && !isOnRef.current) {
-        const hue = Math.random() * 360;
-        const color = new THREE.Color(`hsl(${hue}, 100%, 50%)`);
-        lightRef.current.color = color;
-      }
-    }
-    isOnRef.current = isOn;
-  });
-
-  return (
-    <spotLight
-      ref={lightRef}
-      position={position}
-      angle={0.8}
-      penumbra={0.4}
-      distance={200}
-      castShadow
-    />
-  );
-}
-
-/* 
-   =========== DiscoBallSpotlight ===========
-   A spotlight from above & slightly forward,
-   set to an intensity that brightens the ball without flooding the floor.
-*/
-function DiscoBallSpotlight({
-  position = [0, 7, 1],
-  targetPos = [0, 2, 0],
-  intensity = 2,
-  angle = 0.2,
-}: {
-  position?: [number, number, number];
-  targetPos?: [number, number, number];
-  intensity?: number;
-  angle?: number;
-}) {
-  const lightRef = useRef<THREE.SpotLight>(null);
-
-  useFrame(() => {
-    if (!lightRef.current) return;
-    // always aim at disco ball center
-    lightRef.current.target.position.set(...targetPos);
-    lightRef.current.target.updateMatrixWorld();
-  });
-
-  return (
-    <>
-      <spotLight
-        ref={lightRef}
-        position={position}
-        intensity={intensity}
-        angle={angle}
-        penumbra={0.3}
-        distance={60}
-        castShadow
-      />
-      <object3D position={targetPos} />
-    </>
-  );
-}
-
-/* =================== MAIN PAGE COMPONENT =================== */
-export default function Page() {
-  return (
-    <main className="h-screen w-screen bg-black text-white flex flex-col">
-      <section className="pt-6 text-center space-y-2">
-        <h1 className="text-4xl sm:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-cyan-400">
-          Balanced Scene: Brighter Overheads & Disco Ball
-        </h1>
-        <h2 className="text-xl sm:text-2xl text-cyan-300">
-          Overheads=4 (colored), Floor Spots=0, DiscoBallSpot=6
-        </h2>
-      </section>
-
-      <section className="flex-1">
-        <Canvas shadows className="h-full w-full">
-          {/* Slight ambient => 0.03, plus environment => mild reflections */}
-          <ambientLight intensity={0.03} />
-          <Environment preset="studio" />
-          <OrbitControls />
-
-          <RotatingScene />
-        </Canvas>
-      </section>
-    </main>
-  );
-}
-
-/* =================== RotatingScene =================== */
-function RotatingScene() {
-  const sceneRef = useRef<THREE.Group>(null);
-
-  useFrame(() => {
-    if (sceneRef.current) {
-      sceneRef.current.rotation.y += 0.01; 
-    }
-  });
-
-  return (
-    <group ref={sceneRef}>
-      {/* Overheads => overheadIntensity=4 => fairly bright, no white */}
-      <CeilingLights overheadIntensity={100} />
-
-      {/* No white floor spots => none at all */}
-      {/* Or define them colored at a low intensity if you want. */}
-      {/* <FloorSpotlight color="blue" floorIntensity={...} /> etc. */}
-
-      {/* Disco ball spotlight => overhead & slightly front => intensity=6 */}
-      <DiscoBallSpotlight position={[0,7,1]} targetPos={[0,2,0]} intensity={3} angle={0.2}/>
-
-      <FloorPattern />
-      <DiscoBall />
-      <WallsWithNeon />
-      <BarArea />
-      <StageArea />
-      <DJBooth />
-
-      <LaserLightsGroup groupID="left"   xRange={[-60,-40]} zRange={[-10,10]} />
-      <LaserLightsGroup groupID="center" xRange={[-10,10]}  zRange={[-10,10]} />
-      <LaserLightsGroup groupID="right"  xRange={[40,60]}   zRange={[-10,10]} />
-
-      {/* Random color strobe => 80 */}
-      <RandomColorStrobeLight position={[0,5,5]} frequency={5} maxIntensity={80} />
-    </group>
-  );
-}
-
-/* =========== OverheadLights => purely colored, overheadIntensity=4 =========== */
-function CeilingLights({ overheadIntensity=4 }: { overheadIntensity?: number }) {
-  const numLights=30;
-  // Remove "white"
-  const colorOptions = ["red","blue","green","yellow","magenta","cyan"];
-
-  const lights= useMemo(()=>{
-    const arr: CeilingLightProps[]=[];
-    for(let i=0;i<numLights;i++){
-      const color= colorOptions[Math.floor(Math.random()* colorOptions.length)];
-      const x=(Math.random()-0.5)*30;
-      const z=(Math.random()-0.5)*30;
-      const speed= 0.5+ Math.random()*1.5;
-      const mode= Math.random()>0.5? "rotate":"scan";
-      arr.push({ color, x, z, speed, mode, overheadIntensity });
-    }
-    return arr;
-  },[]);
-
-  return(
-    <>
-      {lights.map((cfg,i)=><CeilingLight key={i} {...cfg}/>)}
-    </>
-  );
-}
-function CeilingLight({
-  color, x, z, speed, mode, overheadIntensity=4
-}: CeilingLightProps & { overheadIntensity?: number }){
-  const lightRef= useRef<THREE.SpotLight>(null);
-  const angleRef= useRef<number>(0);
-  const overheadY=10;
-
-  useFrame((_, delta)=>{
-    angleRef.current+= speed*delta;
-    if(!lightRef.current) return;
-
-    if(mode==="rotate"){
-      const localRadius=3;
-      const offX= localRadius*Math.cos(angleRef.current);
-      const offZ= localRadius*Math.sin(angleRef.current);
-      lightRef.current.position.set(x+offX,overheadY,z+offZ);
-    } else {
-      const sweep= Math.sin(angleRef.current)*15;
-      lightRef.current.position.set(x+sweep,overheadY,z);
-    }
-    lightRef.current.target.position.set(0,0,0);
-    lightRef.current.target.updateMatrixWorld();
-  });
-
-  return(
-    <spotLight
-      ref={lightRef}
-      color={color}
-      intensity={overheadIntensity}
-      distance={300}
-      angle={1.2}
-      penumbra={0.5}
-      castShadow={false}
-    />
-  );
-}
-
-/* =========== FloorPattern => checker.jpg =========== */
-function FloorPattern(){
-  const checker= useTexture("/textures/checker.jpg");
-  checker.wrapS= THREE.RepeatWrapping;
-  checker.wrapT= THREE.RepeatWrapping;
-  checker.repeat.set(8,8);
-
-  return(
-    <mesh rotation={[-Math.PI/2,0,0]} position={[0,-1,0]} receiveShadow>
-      <planeGeometry args={[60,60]}/>
-      <meshStandardMaterial map={checker} metalness={0.2} roughness={0.3}/>
-    </mesh>
-  );
-}
-
-/* =========== DiscoBall => disco_color.jpg =========== */
-function DiscoBall(){
-  const groupRef= useRef<THREE.Group>(null);
-  const discoTex= useTexture("/textures/disco_color.jpg");
-
-  useFrame(()=>{
-    if(groupRef.current){
-      groupRef.current.rotation.y += 0.05;
-    }
-  });
-
-  return(
-    <group ref={groupRef} position={[0,2,0]}>
-      <mesh castShadow>
-        <sphereGeometry args={[0.8,32,32]}/>
-        <meshStandardMaterial map={discoTex} metalness={1} roughness={0}/>
-      </mesh>
-    </group>
-  );
-}
-
-/* =========== Walls with neon stripes =========== */
-function WallsWithNeon(){
-  return(
-    <group>
-      <mesh rotation={[-Math.PI/2,0,0]}>
-        <cylinderGeometry args={[35,35,10,32,1,true]}/>
-        <meshStandardMaterial
-          color="#111"
-          side={THREE.DoubleSide}
-          metalness={0.2}
-          roughness={0.6}
-        />
-      </mesh>
-      <NeonStrip y={-2}/>
-      <NeonStrip y={0}/>
-      <NeonStrip y={2}/>
-    </group>
-  );
-}
-function NeonStrip({y}:{y:number}){
-  return(
-    <mesh position={[0,y,0]} rotation={[Math.PI/2,0,0]}>
-      <torusGeometry args={[35,0.15,16,100]}/>
-      <meshStandardMaterial
-        color="#ffffff"
-        emissive="#ffffff"
-        emissiveIntensity={1}
-        metalness={0.1}
-        roughness={0.2}
-      />
-    </mesh>
-  );
-}
-
-/* =========== Bar, Stage, DJ =========== */
-function BarArea(){
-  return(
-    <group position={[-20,0,0]}>
-      <mesh receiveShadow castShadow position={[0,1,0]}>
-        <boxGeometry args={[4,2,10]}/>
-        <meshStandardMaterial color="#552222" metalness={0.2} roughness={0.4}/>
-      </mesh>
-    </group>
-  );
-}
-function StageArea(){
-  return(
-    <group position={[0,0,-20]}>
-      <mesh receiveShadow castShadow position={[0,0.1,0]}>
-        <boxGeometry args={[10,0.2,6]}/>
-        <meshStandardMaterial color="#444" metalness={0.2} roughness={0.3}/>
-      </mesh>
-    </group>
-  );
-}
-function DJBooth(){
-  return(
-    <group position={[15,0,15]}>
-      <mesh receiveShadow castShadow position={[0,1,0]}>
-        <boxGeometry args={[4,2,3]}/>
-        <meshStandardMaterial color="#333366" metalness={0.3} roughness={0.3}/>
-      </mesh>
-    </group>
-  );
-}
-
-/* =========== LaserLightsGroup => 20 lasers =========== */
-function LaserLightsGroup({
-  groupID,
-  xRange=[-60,-40],
-  zRange=[-10,10],
-  apexY=25
-}: {
-  groupID:string;
-  xRange?:[number,number];
-  zRange?:[number,number];
-  apexY?: number;
-}){
-  const numLasers=20;
-  const colorOptions=[
-    "#ff00ff","#00ffff","#ff9900","#ff0000","#00ff00","#ffff00","#ff0099"
-  ];
-
-  const lasers= React.useMemo(()=>{
-    const arr: LaserProps[]=[];
-    for(let i=0;i<numLasers;i++){
-      const color= colorOptions[Math.floor(Math.random()* colorOptions.length)];
-      const xRand= xRange[0]+ Math.random()*(xRange[1]- xRange[0]);
-      const zRand= zRange[0]+ Math.random()*(zRange[1]- zRange[0]);
-      const speed= 0.5+ Math.random()*1.5;
-      const mode= Math.random()>0.5? "rotate":"scan";
-      arr.push({ color, x: xRand, z: zRand, speed, mode, apexY});
-    }
-    return arr;
-  },[xRange,zRange,apexY]);
-
-  return(
-    <>
-      {lasers.map((cfg,i)=>(
-        <MovingLaser key={`${groupID}_${i}`} {...cfg}/>
-      ))}
-    </>
-  );
-}
-function MovingLaser({
-  color, x, z, speed, mode, apexY=25
-}: LaserProps){
-  const coneRef= useRef<THREE.Mesh>(null);
-  const angleRef= useRef<number>(0);
-
-  useFrame((_, delta)=>{
-    angleRef.current+= speed*delta;
-    if(!coneRef.current) return;
-
-    let sx= x; 
-    let sz= z;
-    if(mode==="rotate"){
-      const localRadius=4;
-      const offX= localRadius*Math.cos(angleRef.current);
-      const offZ= localRadius*Math.sin(angleRef.current);
-      sx+= offX;
-      sz+= offZ;
-    } else {
-      const sweep= Math.sin(angleRef.current)*8;
-      sx+= sweep;
-    }
-
-    const apex= new THREE.Vector3(sx, apexY, sz);
-    const base= new THREE.Vector3(0,0,0);
-    const dir= new THREE.Vector3().subVectors(base, apex);
-    const dist= dir.length();
-    const midpoint= apex.clone().add( dir.clone().multiplyScalar(0.5));
-
-    const up= new THREE.Vector3(0,1,0);
-    const look= new THREE.Quaternion();
-    look.setFromUnitVectors(up, dir.clone().normalize());
-
-    if(coneRef.current){
-      coneRef.current.position.copy(midpoint);
-      coneRef.current.quaternion.copy(look);
-      const oldGeo= coneRef.current.geometry as THREE.ConeGeometry;
-      if(oldGeo) oldGeo.dispose();
-      coneRef.current.geometry= new THREE.ConeGeometry(0.1, dist,16,1,false);
-    }
-  });
-
-  return(
-    <mesh ref={coneRef}>
-      <coneGeometry args={[0.1,1,16,1,false]}/>
-      <meshStandardMaterial
-        color={color}
-        emissive={color}
-        emissiveIntensity={1}
-        side={THREE.DoubleSide}
-        transparent
-        opacity={0.7}
-        metalness={0.1}
-        roughness={0.2}
-      />
-    </mesh>
-  );
-}
diff --git a/src/app/debug2/page.tsx b/src/app/debug2/page.tsx
deleted file mode 100644
index 2733cd7..0000000
--- a/src/app/debug2/page.tsx
+++ /dev/null
@@ -1,447 +0,0 @@
-"use client";
-
-import React, { useRef, useMemo } from "react";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { OrbitControls, Environment, useTexture } from "@react-three/drei";
-import * as THREE from "three";
-
-/* ===================== TYPE DEFINITIONS ===================== */
-interface CeilingLightProps {
-  color: string;
-  x: number;
-  z: number;
-  speed: number;
-  mode: "rotate" | "scan";
-  overheadIntensity?: number;
-}
-interface LaserProps {
-  color: string;
-  x: number;
-  z: number;
-  speed: number;
-  mode: "rotate" | "scan";
-  apexY?: number;
-}
-
-/* 
-   ============ RandomColorStrobeLight ============
-   Flickers ON half time, OFF half time,
-   picks random color each time it flips ON
-*/
-function RandomColorStrobeLight({
-  position = [0, 5, 5],
-  frequency = 5,
-  maxIntensity = 80,
-}: {
-  position?: [number, number, number];
-  frequency?: number;
-  maxIntensity?: number;
-}) {
-  const lightRef = useRef<THREE.SpotLight>(null);
-  const isOnRef = useRef<boolean>(false);
-
-  useFrame(() => {
-    const t = performance.now() * 0.001;
-    // wave => 0..1
-    const strobeValue = (Math.sin(t * frequency * 2 * Math.PI) + 1) / 2;
-    const isOn = strobeValue > 0.5;
-    const intensity = isOn ? maxIntensity : 0;
-
-    if (lightRef.current) {
-      lightRef.current.intensity = intensity;
-
-      // pick random hue each time strobe flips ON
-      if (isOn && !isOnRef.current) {
-        const hue = Math.random() * 360;
-        const color = new THREE.Color(`hsl(${hue}, 100%, 50%)`);
-        lightRef.current.color = color;
-      }
-    }
-    isOnRef.current = isOn;
-  });
-
-  return (
-    <spotLight
-      ref={lightRef}
-      position={position}
-      angle={0.8}
-      penumbra={0.4}
-      distance={200}
-      castShadow
-    />
-  );
-}
-
-/* 
-   ============ DiscoBallSpotlight ============
-   Spotlight from above & slightly front => [0,7,1]
-   intensity=3, angle=0.2 for narrower beam
-*/
-function DiscoBallSpotlight({
-  position = [0, 7, 1],
-  targetPos = [0, 2, 0],
-  intensity = 3,
-  angle = 0.2,
-}: {
-  position?: [number, number, number];
-  targetPos?: [number, number, number];
-  intensity?: number;
-  angle?: number;
-}) {
-  const lightRef = useRef<THREE.SpotLight>(null);
-
-  useFrame(() => {
-    if (!lightRef.current) return;
-    // always aim at disco ball center
-    lightRef.current.target.position.set(...targetPos);
-    lightRef.current.target.updateMatrixWorld();
-  });
-
-  return (
-    <>
-      <spotLight
-        ref={lightRef}
-        position={position}
-        intensity={intensity}
-        angle={angle}
-        penumbra={0.3}
-        distance={60}
-        castShadow
-      />
-      {/* The target object in the scene */}
-      <object3D position={targetPos} />
-    </>
-  );
-}
-
-/* ===================== MAIN PAGE COMPONENT ===================== */
-export default function Page() {
-  return (
-    <main className="h-screen w-screen bg-black text-white flex flex-col">
-      <section className="pt-6 text-center space-y-2">
-        <h1 className="text-4xl sm:text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-cyan-400">
-          Balanced Scene: Overheads=100, DiscoBallSpot=3
-        </h1>
-        <h2 className="text-xl sm:text-2xl text-cyan-300">
-          No Floor Spots, Random Strobe=80, environment=studio
-        </h2>
-      </section>
-
-      <section className="flex-1">
-        <Canvas shadows className="h-full w-full">
-          {/* Slight ambient => 0.03, environment => mild reflections */}
-          <ambientLight intensity={0.03} />
-          <Environment preset="studio" />
-          <OrbitControls />
-
-          <RotatingScene />
-        </Canvas>
-      </section>
-    </main>
-  );
-}
-
-/* ===================== RotatingScene ===================== */
-function RotatingScene() {
-  const sceneRef = useRef<THREE.Group>(null);
-
-  // Slowly rotate entire scene
-  useFrame(() => {
-    if (sceneRef.current) {
-      sceneRef.current.rotation.y += 0.01;
-    }
-  });
-
-  return (
-    <group ref={sceneRef}>
-      {/* Overheads => overheadIntensity=100 => super bright colored lights */}
-      <CeilingLights overheadIntensity={100} />
-
-      {/* No floor spotlights => preventing white circles */}
-      {/* Add them if you want colored floor spots at low intensity. */}
-
-      {/* Disco ball spotlight => from above, intensity=3 */}
-      <DiscoBallSpotlight position={[0,7,1]} targetPos={[0,2,0]} intensity={3} angle={0.2}/>
-
-      <FloorPattern />
-      <DiscoBall />
-      <WallsWithNeon />
-      <BarArea />
-      <StageArea />
-      <DJBooth />
-
-      {/* 3 Laser groups => left, center, right */}
-      <LaserLightsGroup groupID="left"   xRange={[-60,-40]} zRange={[-10,10]} />
-      <LaserLightsGroup groupID="center" xRange={[-10,10]}  zRange={[-10,10]} />
-      <LaserLightsGroup groupID="right"  xRange={[40,60]}   zRange={[-10,10]} />
-
-      {/* Random color strobe => 80 */}
-      <RandomColorStrobeLight position={[0,5,5]} frequency={5} maxIntensity={80} />
-    </group>
-  );
-}
-
-/* 
-   =========== OverheadLights => purely colored array, overheadIntensity=100 
-   means very bright 
-*/
-function CeilingLights({ overheadIntensity=100 }: { overheadIntensity?: number }) {
-  const numLights = 30;
-  // No "white" => purely colored
-  const colorOptions = ["red","blue","green","yellow","magenta","cyan"];
-
-  const lights= useMemo(()=>{
-    const arr: CeilingLightProps[]=[];
-    for(let i=0; i<numLights; i++){
-      const color= colorOptions[Math.floor(Math.random()* colorOptions.length)];
-      const x=(Math.random()-0.5)*30;
-      const z=(Math.random()-0.5)*30;
-      const speed= 0.5+ Math.random()*1.5;
-      const mode= Math.random()>0.5? "rotate":"scan";
-      arr.push({ color, x, z, speed, mode, overheadIntensity });
-    }
-    return arr;
-  },[]);
-
-  return (
-    <>
-      {lights.map((cfg,i)=><CeilingLight key={i} {...cfg} />)}
-    </>
-  );
-}
-function CeilingLight({
-  color, x, z, speed, mode, overheadIntensity=100
-}: CeilingLightProps & { overheadIntensity?: number }){
-  const lightRef= useRef<THREE.SpotLight>(null);
-  const angleRef= useRef<number>(0);
-  const overheadY=10;
-
-  useFrame((_, delta)=>{
-    angleRef.current += speed*delta;
-    if(!lightRef.current) return;
-
-    if(mode==="rotate"){
-      // revolve around local radius=3
-      const localRadius=3;
-      const offX= localRadius*Math.cos(angleRef.current);
-      const offZ= localRadius*Math.sin(angleRef.current);
-      lightRef.current.position.set(x+offX, overheadY, z+offZ);
-    } else {
-      // scanning
-      const sweep= Math.sin(angleRef.current)*15;
-      lightRef.current.position.set(x+sweep, overheadY, z);
-    }
-    lightRef.current.target.position.set(0,0,0);
-    lightRef.current.target.updateMatrixWorld();
-  });
-
-  return(
-    <spotLight
-      ref={lightRef}
-      color={color}
-      intensity={overheadIntensity}
-      distance={300}
-      angle={1.2}
-      penumbra={0.5}
-      castShadow={false}
-    />
-  );
-}
-
-/* =========== FloorPattern => checker.jpg =========== */
-function FloorPattern(){
-  const checker= useTexture("/textures/checker.jpg");
-  checker.wrapS= THREE.RepeatWrapping;
-  checker.wrapT= THREE.RepeatWrapping;
-  checker.repeat.set(8,8);
-
-  return(
-    <mesh rotation={[-Math.PI/2,0,0]} position={[0,-1,0]} receiveShadow>
-      <planeGeometry args={[60,60]}/>
-      <meshStandardMaterial map={checker} metalness={0.2} roughness={0.3}/>
-    </mesh>
-  );
-}
-
-/* =========== DiscoBall => disco_color.jpg =========== */
-function DiscoBall(){
-  const groupRef= useRef<THREE.Group>(null);
-  const discoTex= useTexture("/textures/disco_color.jpg");
-
-  useFrame(()=>{
-    if(groupRef.current){
-      // spin disco ball
-      groupRef.current.rotation.y += 0.05;
-    }
-  });
-
-  return(
-    <group ref={groupRef} position={[0,2,0]}>
-      <mesh castShadow>
-        <sphereGeometry args={[0.8,32,32]} />
-        <meshStandardMaterial map={discoTex} metalness={1} roughness={0}/>
-      </mesh>
-    </group>
-  );
-}
-
-/* =========== Walls w/ neon stripes =========== */
-function WallsWithNeon(){
-  return(
-    <group>
-      <mesh rotation={[-Math.PI/2,0,0]}>
-        <cylinderGeometry args={[35,35,10,32,1,true]}/>
-        <meshStandardMaterial
-          color="#111"
-          side={THREE.DoubleSide}
-          metalness={0.2}
-          roughness={0.6}
-        />
-      </mesh>
-      <NeonStrip y={-2}/>
-      <NeonStrip y={0}/>
-      <NeonStrip y={2}/>
-    </group>
-  );
-}
-function NeonStrip({y}:{y:number}){
-  return(
-    <mesh position={[0,y,0]} rotation={[Math.PI/2,0,0]}>
-      <torusGeometry args={[35,0.15,16,100]}/>
-      <meshStandardMaterial
-        color="#ffffff"
-        emissive="#ffffff"
-        emissiveIntensity={1}
-        metalness={0.1}
-        roughness={0.2}
-      />
-    </mesh>
-  );
-}
-
-/* =========== Bar, Stage, DJ =========== */
-function BarArea(){
-  return(
-    <group position={[-20,0,0]}>
-      <mesh receiveShadow castShadow position={[0,1,0]}>
-        <boxGeometry args={[4,2,10]}/>
-        <meshStandardMaterial color="#552222" metalness={0.2} roughness={0.4}/>
-      </mesh>
-    </group>
-  );
-}
-function StageArea(){
-  return(
-    <group position={[0,0,-20]}>
-      <mesh receiveShadow castShadow position={[0,0.1,0]}>
-        <boxGeometry args={[10,0.2,6]}/>
-        <meshStandardMaterial color="#444" metalness={0.2} roughness={0.3}/>
-      </mesh>
-    </group>
-  );
-}
-function DJBooth(){
-  return(
-    <group position={[15,0,15]}>
-      <mesh receiveShadow castShadow position={[0,1,0]}>
-        <boxGeometry args={[4,2,3]}/>
-        <meshStandardMaterial color="#333366" metalness={0.3} roughness={0.3}/>
-      </mesh>
-    </group>
-  );
-}
-
-/* =========== LaserLightsGroup => 20 lasers =========== */
-function LaserLightsGroup({
-  groupID,
-  xRange=[-60,-40],
-  zRange=[-10,10],
-  apexY=25
-}: {
-  groupID: string;
-  xRange?: [number, number];
-  zRange?: [number, number];
-  apexY?: number;
-}){
-  const numLasers=20;
-  const colorOptions=[
-    "#ff00ff","#00ffff","#ff9900","#ff0000","#00ff00","#ffff00","#ff0099"
-  ];
-
-  const lasers= React.useMemo(()=>{
-    const arr: LaserProps[]=[];
-    for(let i=0;i<numLasers;i++){
-      const color= colorOptions[Math.floor(Math.random()* colorOptions.length)];
-      const xRand= xRange[0]+ Math.random()*(xRange[1]- xRange[0]);
-      const zRand= zRange[0]+ Math.random()*(zRange[1]- zRange[0]);
-      const speed= 0.5+ Math.random()*1.5;
-      const mode= Math.random()>0.5? "rotate":"scan";
-      arr.push({ color, x: xRand, z: zRand, speed, mode, apexY});
-    }
-    return arr;
-  },[xRange,zRange,apexY]);
-
-  return(
-    <>
-      {lasers.map((cfg,i)=>(<MovingLaser key={`${groupID}_${i}`} {...cfg}/>))}
-    </>
-  );
-}
-function MovingLaser({
-  color, x, z, speed, mode, apexY=25
-}: LaserProps){
-  const coneRef= useRef<THREE.Mesh>(null);
-  const angleRef= useRef<number>(0);
-
-  useFrame((_, delta)=>{
-    angleRef.current+= speed*delta;
-    if(!coneRef.current) return;
-
-    let sx= x; 
-    let sz= z;
-    if(mode==="rotate"){
-      const localRadius=4;
-      const offX= localRadius*Math.cos(angleRef.current);
-      const offZ= localRadius*Math.sin(angleRef.current);
-      sx+= offX;
-      sz+= offZ;
-    } else {
-      const sweep= Math.sin(angleRef.current)*8;
-      sx+= sweep;
-    }
-
-    const apex= new THREE.Vector3(sx, apexY, sz);
-    const base= new THREE.Vector3(0,0,0);
-    const dir= new THREE.Vector3().subVectors(base, apex);
-    const dist= dir.length();
-    const midpoint= apex.clone().add( dir.clone().multiplyScalar(0.5));
-
-    const up= new THREE.Vector3(0,1,0);
-    const look= new THREE.Quaternion();
-    look.setFromUnitVectors(up, dir.clone().normalize());
-
-    if(coneRef.current){
-      coneRef.current.position.copy(midpoint);
-      coneRef.current.quaternion.copy(look);
-      const oldGeo= coneRef.current.geometry as THREE.ConeGeometry;
-      if(oldGeo) oldGeo.dispose();
-      coneRef.current.geometry= new THREE.ConeGeometry(0.1, dist,16,1,false);
-    }
-  });
-
-  return(
-    <mesh ref={coneRef}>
-      <coneGeometry args={[0.1,1,16,1,false]}/>
-      <meshStandardMaterial
-        color={color}
-        emissive={color}
-        emissiveIntensity={1}
-        side={THREE.DoubleSide}
-        transparent
-        opacity={0.7}
-        metalness={0.1}
-        roughness={0.2}
-      />
-    </mesh>
-  );
-}
diff --git a/src/app/debug3/page.tsx b/src/app/debug3/page.tsx
deleted file mode 100644
index 8eeb651..0000000
--- a/src/app/debug3/page.tsx
+++ /dev/null
@@ -1,750 +0,0 @@
-"use client";
-
-import React, { useRef, useMemo } from "react";
-import { Canvas, useFrame } from "@react-three/fiber";
-import { OrbitControls, Environment, useTexture } from "@react-three/drei";
-import * as THREE from "three";
-
-/* =================== TYPE DEFINITIONS (unchanged) =================== */
-interface CeilingLightProps {
-  color: string;
-  x: number;
-  z: number;
-  speed: number;
-  mode: "rotate" | "scan";
-  overheadIntensity?: number;
-}
-interface LaserProps {
-  color: string;
-  x: number;
-  z: number;
-  speed: number;
-  mode: "rotate" | "scan";
-  apexY?: number;
-}
-interface AvatarProps {
-  position?: [number, number, number];
-  color?: string;
-}
-
-/* =================== 1) RANDOM COLOR STROBE LIGHT (renamed) =================== */
-function RandomColorStrobeLightDebug({
-  position = [0, 5, 5],
-  frequency = 5,
-  maxIntensity = 80,
-}: {
-  position?: [number, number, number];
-  frequency?: number;
-  maxIntensity?: number;
-}) {
-  const lightRef = useRef<THREE.SpotLight>(null);
-  const isOnRef = useRef(false);
-
-  useFrame(() => {
-    const t = performance.now() * 0.001;
-    const wave = (Math.sin(t * frequency * 2 * Math.PI) + 1) / 2;
-    const isOn = wave > 0.5;
-    const intensity = isOn ? maxIntensity : 0;
-
-    if (lightRef.current) {
-      lightRef.current.intensity = intensity;
-      if (isOn && !isOnRef.current) {
-        const hue = Math.random() * 360;
-        lightRef.current.color = new THREE.Color(`hsl(${hue}, 100%, 50%)`);
-      }
-    }
-    isOnRef.current = isOn;
-  });
-
-  return (
-    <spotLight
-      ref={lightRef}
-      position={position}
-      angle={0.8}
-      penumbra={0.4}
-      distance={200}
-      castShadow
-    />
-  );
-}
-
-/* =================== 2) DISCO BALL SPOTLIGHT (renamed) =================== */
-function DiscoBallSpotlightDebug({
-  position = [0, 7, 1],
-  targetPos = [0, 2, 0],
-  intensity = 3,
-  angle = 0.2,
-}: {
-  position?: [number, number, number];
-  targetPos?: [number, number, number];
-  intensity?: number;
-  angle?: number;
-}) {
-  const lightRef = useRef<THREE.SpotLight>(null);
-
-  useFrame(() => {
-    if (!lightRef.current) return;
-    lightRef.current.target.position.set(...targetPos);
-    lightRef.current.target.updateMatrixWorld();
-  });
-
-  return (
-    <>
-      <spotLight
-        ref={lightRef}
-        position={position}
-        intensity={intensity}
-        angle={angle}
-        penumbra={0.3}
-        distance={60}
-        castShadow
-      />
-      <object3D position={targetPos} />
-    </>
-  );
-}
-
-/* =================== 3) AVATAR COMPONENTS (all renamed) =================== */
-
-/* --- BartenderMaleDebug --- */
-function BartenderMaleDebug({ position = [0, 0, 0] }: AvatarProps) {
-  const skinColor = "#ffe0bd";
-  const clothesColor = "#000000";
-  const bottleColor = "#33ff33";
-  const UPPER_ARM_ANGLE = -Math.PI / 2;
-  const FOREARM_ANGLE = 0.2;
-
-  return (
-    <group position={position}>
-      {/* Legs */}
-      <mesh position={[-0.25, 0.5, 0]}>
-        <cylinderGeometry args={[0.15, 0.15, 1, 12]} />
-        <meshStandardMaterial color={clothesColor} />
-      </mesh>
-      <mesh position={[0.25, 0.5, 0]}>
-        <cylinderGeometry args={[0.15, 0.15, 1, 12]} />
-        <meshStandardMaterial color={clothesColor} />
-      </mesh>
-
-      {/* Torso */}
-      <mesh position={[0, 1, 0]}>
-        <boxGeometry args={[0.8, 1, 0.4]} />
-        <meshStandardMaterial color={clothesColor} />
-      </mesh>
-
-      {/* Head */}
-      <mesh position={[0, 2, 0]}>
-        <sphereGeometry args={[0.25, 16, 16]} />
-        <meshStandardMaterial color={skinColor} />
-      </mesh>
-
-      {/* Fedora */}
-      <group position={[0, 2.2, 0]}>
-        <mesh rotation={[Math.PI / 2, 0, 0]}>
-          <torusGeometry args={[0.3, 0.06, 16, 24]} />
-          <meshStandardMaterial color={clothesColor} />
-        </mesh>
-        <mesh position={[0, 0.05, 0]}>
-          <cylinderGeometry args={[0.2, 0.2, 0.2, 16]} />
-          <meshStandardMaterial color={clothesColor} />
-        </mesh>
-      </group>
-
-      {/* Arms */}
-      {/* Left Arm (overhead waving) */}
-      <group position={[-0.55, 1.5, 0]}>
-        <mesh position={[0, 0.2, 0]} rotation={[UPPER_ARM_ANGLE, 0, 0]}>
-          <boxGeometry args={[0.15, 0.4, 0.15]} />
-          <meshStandardMaterial color={skinColor} />
-        </mesh>
-        <group position={[0, 0.4, 0]}>
-          <mesh position={[0, 0.2, 0]} rotation={[FOREARM_ANGLE, 0, 0]}>
-            <boxGeometry args={[0.15, 0.4, 0.15]} />
-            <meshStandardMaterial color={skinColor} />
-          </mesh>
-        </group>
-      </group>
-
-      {/* Right Arm (overhead, holding bottle) */}
-      <group position={[0.55, 1.5, 0]}>
-        <mesh position={[0, 0.2, 0]} rotation={[UPPER_ARM_ANGLE, 0, 0]}>
-          <boxGeometry args={[0.15, 0.4, 0.15]} />
-          <meshStandardMaterial color={skinColor} />
-        </mesh>
-        <group position={[0, 0.4, 0]}>
-          <mesh position={[0, 0.2, 0]} rotation={[FOREARM_ANGLE, 0, 0]}>
-            <boxGeometry args={[0.15, 0.4, 0.15]} />
-            <meshStandardMaterial color={skinColor} />
-          </mesh>
-
-          {/* Bottle */}
-          <mesh position={[0, 0.4, 0]} rotation={[0, 0, Math.PI / 2]}>
-            <cylinderGeometry args={[0.06, 0.06, 0.3, 8]} />
-            <meshStandardMaterial color={bottleColor} metalness={0.1} roughness={0.5} />
-          </mesh>
-        </group>
-      </group>
-    </group>
-  );
-}
-
-/* --- BartenderFemaleDebug --- */
-function BartenderFemaleDebug({ position = [0, 0, 0] }: AvatarProps) {
-  const skinColor = "#ffe0bd";
-  const clothesColor = "#000000";
-  const glassColor = "#ffffff";
-  const UPPER_ARM_ANGLE = -Math.PI / 2;
-  const FOREARM_ANGLE = 0.2;
-
-  return (
-    <group position={position}>
-      {/* Legs */}
-      <mesh position={[-0.15, 0.5, 0]}>
-        <cylinderGeometry args={[0.13, 0.13, 1, 12]} />
-        <meshStandardMaterial color={clothesColor} />
-      </mesh>
-      <mesh position={[0.15, 0.5, 0]}>
-        <cylinderGeometry args={[0.13, 0.13, 1, 12]} />
-        <meshStandardMaterial color={clothesColor} />
-      </mesh>
-
-      {/* Torso */}
-      <mesh position={[0, 1, 0]}>
-        <boxGeometry args={[0.7, 1, 0.4]} />
-        <meshStandardMaterial color={clothesColor} />
-      </mesh>
-
-      {/* Head */}
-      <mesh position={[0, 2, 0]}>
-        <sphereGeometry args={[0.25, 16, 16]} />
-        <meshStandardMaterial color={skinColor} />
-      </mesh>
-
-      {/* Left Arm (holding glass) */}
-      <group position={[-0.5, 1.5, 0]}>
-        <mesh position={[0, 0.2, 0]} rotation={[UPPER_ARM_ANGLE, 0, 0]}>
-          <boxGeometry args={[0.15, 0.4, 0.15]} />
-          <meshStandardMaterial color={skinColor} />
-        </mesh>
-        <group position={[0, 0.4, 0]}>
-          <mesh position={[0, 0.2, 0]} rotation={[FOREARM_ANGLE, 0, 0]}>
-            <boxGeometry args={[0.15, 0.4, 0.15]} />
-            <meshStandardMaterial color={skinColor} />
-          </mesh>
-
-          {/* Glass */}
-          <mesh position={[0, 0.4, 0]} rotation={[Math.PI / 2, 0, 0]}>
-            <cylinderGeometry args={[0.06, 0.08, 0.2, 8]} />
-            <meshStandardMaterial
-              color={glassColor}
-              emissive="#cccccc"
-              emissiveIntensity={0.1}
-              transparent
-              opacity={0.8}
-            />
-          </mesh>
-        </group>
-      </group>
-
-      {/* Right Arm (static) */}
-      <group position={[0.5, 1.5, 0]}>
-        <mesh position={[0, 0.2, 0]} rotation={[UPPER_ARM_ANGLE, 0, 0]}>
-          <boxGeometry args={[0.15, 0.4, 0.15]} />
-          <meshStandardMaterial color={skinColor} />
-        </mesh>
-        <group position={[0, 0.4, 0]}>
-          <mesh position={[0, 0.2, 0]} rotation={[FOREARM_ANGLE, 0, 0]}>
-            <boxGeometry args={[0.15, 0.4, 0.15]} />
-            <meshStandardMaterial color={skinColor} />
-          </mesh>
-        </group>
-      </group>
-    </group>
-  );
-}
-
-/* --- DJAvatarMixingDebug --- */
-function DJAvatarMixingDebug({ position = [15, 1, 14] }: AvatarProps) {
-  const skinColor = "#ffe0bd";
-  const clothesColor = "#000000";
-  const headphoneColor = "#000000";
-  const UPPER_ARM_ANGLE = -0.4;
-  const BASE_FOREARM_ANGLE = 0.3;
-  const rightForearmRef = useRef<THREE.Mesh>(null);
-
-  useFrame((state) => {
-    const t = state.clock.elapsedTime;
-    if (rightForearmRef.current) {
-      rightForearmRef.current.rotation.x =
-        BASE_FOREARM_ANGLE + Math.sin(t * 2) * 0.2;
-    }
-  });
-
-  return (
-    <group position={position}>
-      {/* Legs */}
-      <mesh position={[-0.15, 0.5, 0]}>
-        <cylinderGeometry args={[0.13, 0.13, 1, 12]} />
-        <meshStandardMaterial color={clothesColor} />
-      </mesh>
-      <mesh position={[0.15, 0.5, 0]}>
-        <cylinderGeometry args={[0.13, 0.13, 1, 12]} />
-        <meshStandardMaterial color={clothesColor} />
-      </mesh>
-
-      {/* Torso */}
-      <mesh position={[0, 1, 0]}>
-        <boxGeometry args={[0.75, 1, 0.4]} />
-        <meshStandardMaterial color={clothesColor} />
-      </mesh>
-
-      {/* Head */}
-      <mesh position={[0, 2, 0]}>
-        <sphereGeometry args={[0.24, 16, 16]} />
-        <meshStandardMaterial color={skinColor} />
-      </mesh>
-
-      {/* HEADPHONES */}
-      <group position={[0, 2, 0]}>
-        <mesh rotation={[0, 0, Math.PI / 2]} position={[0, 0.03, 0]}>
-          <torusGeometry args={[0.28, 0.04, 12, 24]} />
-          <meshStandardMaterial color={headphoneColor} metalness={0.4} roughness={0.2} />
-        </mesh>
-        <mesh position={[0.25, 0, 0]}>
-          <sphereGeometry args={[0.07, 12, 12]} />
-          <meshStandardMaterial color={headphoneColor} metalness={0.4} roughness={0.2} />
-        </mesh>
-        <mesh position={[-0.25, 0, 0]}>
-          <sphereGeometry args={[0.07, 12, 12]} />
-          <meshStandardMaterial color={headphoneColor} metalness={0.4} roughness={0.2} />
-        </mesh>
-      </group>
-
-      {/* Left Arm (static) */}
-      <group position={[-0.45, 1.5, 0]}>
-        <mesh position={[0, 0.2, 0]} rotation={[-UPPER_ARM_ANGLE, 0, 0]}>
-          <boxGeometry args={[0.13, 0.4, 0.13]} />
-          <meshStandardMaterial color={skinColor} />
-        </mesh>
-        <group position={[0, 0.4, 0]}>
-          <mesh position={[0, 0.2, 0]} rotation={[0.2, 0, 0]}>
-            <boxGeometry args={[0.13, 0.4, 0.13]} />
-            <meshStandardMaterial color={skinColor} />
-          </mesh>
-        </group>
-      </group>
-
-      {/* Right Arm (mixing motion) */}
-      <group position={[0.45, 1.5, 0]}>
-        <mesh position={[0, 0.2, 0]} rotation={[-UPPER_ARM_ANGLE, 0, 0]}>
-          <boxGeometry args={[0.13, 0.4, 0.13]} />
-          <meshStandardMaterial color={skinColor} />
-        </mesh>
-        <group position={[0, 0.4, 0]}>
-          <mesh
-            ref={rightForearmRef}
-            position={[0, 0.2, 0]}
-            rotation={[BASE_FOREARM_ANGLE, 0, 0]}
-          >
-            <boxGeometry args={[0.13, 0.4, 0.13]} />
-            <meshStandardMaterial color={skinColor} />
-          </mesh>
-        </group>
-      </group>
-    </group>
-  );
-}
-
-/* --- DancerAvatarDebug --- */
-function DancerAvatarDebug({ position = [0, 0, 0], color = "#000000" }: AvatarProps) {
-  return (
-    <group position={position}>
-      <mesh position={[-0.15, 0.5, 0]}>
-        <cylinderGeometry args={[0.2, 0.2, 1, 12]} />
-        <meshStandardMaterial color={color} />
-      </mesh>
-      <mesh position={[0.15, 0.5, 0]}>
-        <cylinderGeometry args={[0.2, 0.2, 1, 12]} />
-        <meshStandardMaterial color={color} />
-      </mesh>
-      <mesh position={[0, 1.5, 0]}>
-        <boxGeometry args={[0.6, 1, 0.4]} />
-        <meshStandardMaterial color={color} />
-      </mesh>
-      <mesh position={[0, 2.3, 0]}>
-        <sphereGeometry args={[0.25, 16, 16]} />
-        <meshStandardMaterial color={color} />
-      </mesh>
-      <mesh position={[-0.55, 1.5, 0]} rotation={[-Math.PI / 2, 0, 0]}>
-        <boxGeometry args={[0.15, 0.8, 0.15]} />
-        <meshStandardMaterial color={color} />
-      </mesh>
-      <mesh position={[0.55, 1.5, 0]} rotation={[-Math.PI / 2, 0, 0]}>
-        <boxGeometry args={[0.15, 0.8, 0.15]} />
-        <meshStandardMaterial color={color} />
-      </mesh>
-    </group>
-  );
-}
-
-/* ========================= 4) ROTATING SCENE (renamed) ========================= */
-function RotatingSceneDebug() {
-  const sceneRef = useRef<THREE.Group>(null);
-
-  useFrame(() => {
-    if (sceneRef.current) {
-      sceneRef.current.rotation.y += 0.01;
-    }
-  });
-
-  return (
-    <group ref={sceneRef}>
-      <CeilingLightsDebug overheadIntensity={100} />
-      <DiscoBallSpotlightDebug
-        position={[0, 7, 1]}
-        targetPos={[0, 2, 0]}
-        intensity={3}
-        angle={0.2}
-      />
-      <FloorPatternDebug />
-      <DiscoBallDebug />
-      <WallsWithNeonDebug />
-      <BarAreaDebug />
-      <StageAreaDebug />
-      <DJBoothDebug />
-
-      <LaserLightsGroupDebug groupID="left" xRange={[-60, -40]} zRange={[-10, 10]} />
-      <LaserLightsGroupDebug groupID="center" xRange={[-10, 10]} zRange={[-10, 10]} />
-      <LaserLightsGroupDebug groupID="right" xRange={[40, 60]} zRange={[-10, 10]} />
-
-      <RandomColorStrobeLightDebug position={[0, 5, 5]} frequency={5} maxIntensity={80} />
-
-      {/* Avatars */}
-      <BartenderMaleDebug position={[-19, 0, 1]} />
-      <BartenderFemaleDebug position={[-19, 0, -1]} />
-      <DJAvatarMixingDebug position={[15, 1, 14]} />
-      <DancerAvatarDebug position={[0, 0, -10]} />
-    </group>
-  );
-}
-
-/* ========================= 5) CEILING LIGHTS (renamed) ========================= */
-function CeilingLightsDebug({ overheadIntensity = 100 }: { overheadIntensity?: number }) {
-  const numLights = 30;
-  const colorOptions = ["red", "blue", "green", "yellow", "magenta", "cyan"];
-
-  const lights = useMemo(() => {
-    const temp: CeilingLightProps[] = [];
-    for (let i = 0; i < numLights; i++) {
-      const c = colorOptions[Math.floor(Math.random() * colorOptions.length)];
-      const x = (Math.random() - 0.5) * 30;
-      const z = (Math.random() - 0.5) * 30;
-      const speed = 0.5 + Math.random() * 1.5;
-      const mode = Math.random() > 0.5 ? "rotate" : "scan";
-      temp.push({ color: c, x, z, speed, mode, overheadIntensity });
-    }
-    return temp;
-  }, [overheadIntensity]);
-
-  return (
-    <>
-      {lights.map((cfg, i) => (
-        <SingleOverheadDebug key={i} {...cfg} />
-      ))}
-    </>
-  );
-}
-
-function SingleOverheadDebug({
-  color,
-  x,
-  z,
-  speed,
-  mode,
-  overheadIntensity = 100,
-}: CeilingLightProps & { overheadIntensity?: number }) {
-  const lightRef = useRef<THREE.SpotLight>(null);
-  const angleRef = useRef(0);
-  const overheadY = 10;
-
-  useFrame((_, delta) => {
-    angleRef.current += speed * delta;
-    if (!lightRef.current) return;
-
-    if (mode === "rotate") {
-      const r = 3;
-      const offX = r * Math.cos(angleRef.current);
-      const offZ = r * Math.sin(angleRef.current);
-      lightRef.current.position.set(x + offX, overheadY, z + offZ);
-    } else {
-      const sweep = Math.sin(angleRef.current) * 15;
-      lightRef.current.position.set(x + sweep, overheadY, z);
-    }
-
-    lightRef.current.target.position.set(0, 0, 0);
-    lightRef.current.target.updateMatrixWorld();
-  });
-
-  return (
-    <spotLight
-      ref={lightRef}
-      color={color}
-      intensity={overheadIntensity}
-      distance={300}
-      angle={1.2}
-      penumbra={0.5}
-      castShadow={false}
-    />
-  );
-}
-
-/* ========================= 6) FLOOR & DISCO BALL (renamed) ========================= */
-function FloorPatternDebug() {
-  const checker = useTexture("/textures/checker.jpg");
-  checker.wrapS = THREE.RepeatWrapping;
-  checker.wrapT = THREE.RepeatWrapping;
-  checker.repeat.set(8, 8);
-
-  return (
-    <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -1, 0]} receiveShadow>
-      <planeGeometry args={[60, 60]} />
-      <meshStandardMaterial map={checker} metalness={0.2} roughness={0.3} />
-    </mesh>
-  );
-}
-
-function DiscoBallDebug() {
-  const groupRef = useRef<THREE.Group>(null);
-  const discoTex = useTexture("/textures/disco_color.jpg");
-
-  useFrame(() => {
-    if (groupRef.current) {
-      groupRef.current.rotation.y += 0.05;
-    }
-  });
-
-  return (
-    <group ref={groupRef} position={[0, 2, 0]}>
-      <mesh castShadow>
-        <sphereGeometry args={[0.8, 32, 32]} />
-        <meshStandardMaterial map={discoTex} metalness={1} roughness={0} />
-      </mesh>
-    </group>
-  );
-}
-
-/* ========================= 7) WALLS, BAR, STAGE, DJ BOOTH (renamed) ========================= */
-function WallsWithNeonDebug() {
-  return (
-    <group>
-      <mesh rotation={[-Math.PI / 2, 0, 0]}>
-        <cylinderGeometry args={[35, 35, 10, 32, 1, true]} />
-        <meshStandardMaterial
-          color="#111"
-          side={THREE.DoubleSide}
-          metalness={0.2}
-          roughness={0.6}
-        />
-      </mesh>
-
-      <NeonStripDebug y={-2} />
-      <NeonStripDebug y={0} />
-      <NeonStripDebug y={2} />
-    </group>
-  );
-}
-
-function NeonStripDebug({ y }: { y: number }) {
-  return (
-    <mesh position={[0, y, 0]} rotation={[Math.PI / 2, 0, 0]}>
-      <torusGeometry args={[35, 0.15, 16, 100]} />
-      <meshStandardMaterial
-        color="#ffffff"
-        emissive="#ffffff"
-        emissiveIntensity={1}
-        metalness={0.1}
-        roughness={0.2}
-      />
-    </mesh>
-  );
-}
-
-function BarAreaDebug() {
-  return (
-    <group position={[-20, -1, 0]}>
-      <mesh receiveShadow castShadow position={[0, 1, 0]}>
-        <boxGeometry args={[4, 2, 10]} />
-        <meshStandardMaterial color="#552222" metalness={0.2} roughness={0.4} />
-      </mesh>
-    </group>
-  );
-}
-
-function StageAreaDebug() {
-  return (
-    <group position={[0, 0, -20]}>
-      <mesh receiveShadow castShadow position={[0, 0.1, 0]}>
-        <boxGeometry args={[10, 0.2, 6]} />
-        <meshStandardMaterial color="#444444" metalness={0.2} roughness={0.3} />
-      </mesh>
-      <mesh receiveShadow castShadow position={[0, 0.3, 0]}>
-        <boxGeometry args={[8, 0.2, 4]} />
-        <meshStandardMaterial color="#555555" metalness={0.2} roughness={0.3} />
-      </mesh>
-      <mesh receiveShadow castShadow position={[0, 0.5, 0]}>
-        <boxGeometry args={[6, 0.2, 3]} />
-        <meshStandardMaterial color="#666666" metalness={0.2} roughness={0.3} />
-      </mesh>
-    </group>
-  );
-}
-
-function DJBoothDebug() {
-  return (
-    <group position={[15, 0, 15]}>
-      <mesh receiveShadow castShadow position={[0, 1, 0]}>
-        <boxGeometry args={[4, 2, 3]} />
-        <meshStandardMaterial color="#333366" metalness={0.3} roughness={0.3} />
-      </mesh>
-    </group>
-  );
-}
-
-/* ========================= 8) LASER LIGHTS GROUP & MOVING LASER (renamed) ========================= */
-function LaserLightsGroupDebug({
-  groupID,
-  xRange,
-  zRange,
-  apexY = 25,
-}: {
-  groupID: string;
-  xRange: [number, number];
-  zRange: [number, number];
-  apexY?: number;
-}) {
-  const numLasers = 20;
-  const colorOptions = [
-    "#ff00ff",
-    "#00ffff",
-    "#ff9900",
-    "#ff0000",
-    "#00ff00",
-    "#ffff00",
-    "#ff0099",
-  ];
-
-  const lasers = useMemo(() => {
-    const temp: LaserProps[] = [];
-    for (let i = 0; i < numLasers; i++) {
-      const c = colorOptions[Math.floor(Math.random() * colorOptions.length)];
-      const xRand = xRange[0] + Math.random() * (xRange[1] - xRange[0]);
-      const zRand = zRange[0] + Math.random() * (zRange[1] - zRange[0]);
-      const speed = 0.5 + Math.random() * 1.5;
-      const mode = Math.random() > 0.5 ? "rotate" : "scan";
-      temp.push({ color: c, x: xRand, z: zRand, speed, mode, apexY });
-    }
-    return temp;
-  }, [xRange, zRange, apexY]);
-
-  return (
-    <>
-      {lasers.map((cfg, i) => (
-        <MovingLaserDebug key={`${groupID}_${i}`} {...cfg} />
-      ))}
-    </>
-  );
-}
-
-function MovingLaserDebug({
-  color,
-  x,
-  z,
-  speed,
-  mode,
-  apexY = 25,
-}: LaserProps) {
-  const coneRef = useRef<THREE.Mesh>(null);
-  const angleRef = useRef<number>(0);
-
-  useFrame((_, delta) => {
-    angleRef.current += speed * delta;
-    if (!coneRef.current) return;
-
-    let sx = x;
-    let sz = z;
-
-    if (mode === "rotate") {
-      const localRadius = 4;
-      const offX = localRadius * Math.cos(angleRef.current);
-      const offZ = localRadius * Math.sin(angleRef.current);
-      sx += offX;
-      sz += offZ;
-    } else {
-      const sweep = Math.sin(angleRef.current) * 8;
-      sx += sweep;
-    }
-
-    const apex = new THREE.Vector3(sx, apexY, sz);
-    const base = new THREE.Vector3(0, 0, 0);
-    const dir = new THREE.Vector3().subVectors(base, apex);
-    const dist = dir.length();
-    const midpoint = apex.clone().add(dir.clone().multiplyScalar(0.5));
-
-    const up = new THREE.Vector3(0, 1, 0);
-    const look = new THREE.Quaternion();
-    look.setFromUnitVectors(up, dir.clone().normalize());
-
-    if (coneRef.current) {
-      coneRef.current.position.copy(midpoint);
-      coneRef.current.quaternion.copy(look);
-
-      const oldGeo = coneRef.current.geometry as THREE.ConeGeometry;
-      if (oldGeo) oldGeo.dispose();
-
-      coneRef.current.geometry = new THREE.ConeGeometry(0.1, dist, 16, 1, false);
-    }
-  });
-
-  return (
-    <mesh ref={coneRef}>
-      <coneGeometry args={[0.1, 1, 16, 1, false]} />
-      <meshStandardMaterial
-        color={color}
-        emissive={color}
-        emissiveIntensity={3}
-        side={THREE.DoubleSide}
-        transparent
-        opacity={0.7}
-        metalness={0.1}
-        roughness={0.2}
-      />
-    </mesh>
-  );
-}
-
-/* ========================= 9) DEBUG PAGE (Default Export) ========================= */
-export default function DebugPage() {
-  return (
-    <main className="h-screen w-screen bg-black text-white flex flex-col">
-      {/* Title / Intro */}
-      <section className="pt-6 text-center space-y-2">
-        <h1 className="text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-cyan-400">
-          KRBYLAND (Debug)
-        </h1>
-        <h2 className="text-2xl font-medium text-cyan-300">
-          Gig From Anywhere - Debug Version
-        </h2>
-      </section>
-
-      {/* Canvas */}
-      <section className="flex-1">
-        <Canvas shadows className="h-full w-full">
-          <ambientLight intensity={0.03} />
-          <Environment preset="studio" />
-          <OrbitControls />
-          <RotatingSceneDebug />
-        </Canvas>
-      </section>
-    </main>
-  );
-}
diff --git a/src/app/debug4/page.tsx b/src/app/debug4/page.tsx
deleted file mode 100644
index aca024b..0000000
--- a/src/app/debug4/page.tsx
+++ /dev/null
@@ -1,419 +0,0 @@
-"use client";
-
-import React, { useRef, useMemo } from "react";
-import { Canvas, useFrame } from "@react-three/fiber";
-import {
-  OrbitControls,
-  Environment,
-  useTexture
-} from "@react-three/drei";
-import * as THREE from "three";
-
-/* ==================== TYPE DEFINITIONS ==================== */
-interface CeilingLightProps {
-  color: string;
-  x: number;
-  z: number;
-  speed: number;
-  mode: "rotate" | "scan";
-}
-interface FloorSpotlightProps {
-  color?: string;
-  initialAngle?: number;
-  speed?: number;
-}
-
-/** LaserProps => apex overhead => floor center */
-interface LaserProps {
-  color: string;
-  x: number; // apex x
-  z: number; // apex z
-  speed: number;
-  mode: "rotate" | "scan";
-  apexY?: number; // default 25
-}
-
-/* ==================== MAIN PAGE COMPONENT ==================== */
-export default function Page() {
-  return (
-    <main className="h-screen w-screen bg-black text-white flex flex-col">
-      <section className="pt-6 text-center space-y-2">
-        <h1 className="text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-cyan-400">
-          KRBYLAND
-        </h1>
-        <h2 className="text-2xl font-medium text-cyan-300">Gig From Anywhere</h2>
-      </section>
-
-      <section className="flex-1">
-        <Canvas shadows className="h-full w-full">
-          <ambientLight intensity={0.02} />
-          <Environment preset="studio" />
-
-          {/* Overhead Lights */}
-          <CeilingLights />
-
-          {/* 4 rotating floor spots => cast shadows */}
-          <FloorSpotlight color="red" />
-          <FloorSpotlight color="blue" initialAngle={Math.PI / 2} speed={1.5} />
-          <FloorSpotlight color="green" initialAngle={Math.PI} speed={0.8} />
-          <FloorSpotlight color="magenta" initialAngle={(3 * Math.PI)/2} speed={1.2} />
-
-          <Floor />
-          <DiscoBall />
-
-          <Walls />
-          <BarArea />
-          <StageArea />
-          <DJBooth />
-
-          {/* 
-            3 distinct laser groups => 20 lasers each, 
-            each group in different overhead region
-          */}
-          <LaserLightsGroup groupID="left"   xRange={[-60, -40]} zRange={[-10, 10]} />
-          <LaserLightsGroup groupID="center" xRange={[-10, 10]}  zRange={[-10, 10]} />
-          <LaserLightsGroup groupID="right"  xRange={[40, 60]}   zRange={[-10, 10]} />
-
-          <OrbitControls />
-        </Canvas>
-      </section>
-    </main>
-  );
-}
-
-/* ==================== 1) Floor => #333 ==================== */
-function Floor() {
-  return (
-    <mesh rotation={[-Math.PI/2,0,0]} position={[0,-1,0]} receiveShadow>
-      <planeGeometry args={[60,60]} />
-      <meshStandardMaterial color="#333" metalness={0.2} roughness={0.3}/>
-    </mesh>
-  );
-}
-
-/* ==================== 2) DiscoBall => fast spin ==================== */
-function DiscoBall() {
-  const groupRef= useRef<THREE.Group>(null);
-  const colorMap= useTexture("/textures/disco_color.jpg");
-
-  useFrame(()=>{
-    if(groupRef.current){
-      groupRef.current.rotation.y += 0.05; // spin faster
-    }
-  });
-
-  return (
-    <group ref={groupRef} position={[0,2,0]}>
-      <mesh castShadow>
-        <sphereGeometry args={[0.8,32,32]} />
-        <meshStandardMaterial map={colorMap} metalness={1} roughness={0}/>
-      </mesh>
-    </group>
-  );
-}
-
-/* ==================== 3) Overhead Lights => 50 ==================== */
-function CeilingLights(){
-  const numLights=50;
-  const colorOptions=["red","blue","green","yellow","magenta","cyan","white"];
-
-  const lights= useMemo(()=>{
-    const arr: CeilingLightProps[]=[];
-    for(let i=0;i<numLights;i++){
-      const color= colorOptions[Math.floor(Math.random()* colorOptions.length)];
-      const x=(Math.random()-0.5)*30;
-      const z=(Math.random()-0.5)*30;
-      const speed=0.5 + Math.random()*1.5;
-      const mode= Math.random()>0.5? "rotate":"scan";
-      arr.push({color,x,z,speed,mode});
-    }
-    return arr;
-  },[numLights]);
-
-  return (
-    <>
-      {lights.map((cfg,i)=>(<CeilingLight key={i} {...cfg}/>))}
-    </>
-  );
-}
-function CeilingLight({ color, x, z, speed, mode }: CeilingLightProps){
-  const lightRef= useRef<THREE.SpotLight>(null);
-  const angleRef= useRef<number>(0);
-  const overheadY=10;
-
-  useFrame((_,delta)=>{
-    angleRef.current+= speed*delta;
-    if(!lightRef.current) return;
-
-    if(mode==="rotate"){
-      const localRadius=3;
-      const offsetX= localRadius*Math.cos(angleRef.current);
-      const offsetZ= localRadius*Math.sin(angleRef.current);
-      lightRef.current.position.set(x+offsetX,overheadY,z+offsetZ);
-      lightRef.current.target.position.set(0,0,0);
-      lightRef.current.target.updateMatrixWorld();
-    } else {
-      // scan
-      const sweep= Math.sin(angleRef.current)*15;
-      lightRef.current.position.set(x+sweep,overheadY,z);
-      lightRef.current.target.position.set(0,0,0);
-      lightRef.current.target.updateMatrixWorld();
-    }
-  });
-
-  return(
-    <spotLight
-      ref={lightRef}
-      color={color}
-      intensity={15}
-      distance={300}
-      angle={1.2}
-      penumbra={0.5}
-      castShadow={false}
-    />
-  );
-}
-
-/* ==================== 4) FloorSpotlight => rotating = shadows ==================== */
-function FloorSpotlight({
-  color="white",
-  initialAngle=0,
-  speed=1
-}: FloorSpotlightProps){
-  const lightRef= useRef<THREE.SpotLight>(null);
-  const angleRef= useRef<number>(initialAngle);
-
-  useFrame((_,delta)=>{
-    angleRef.current+= speed*delta;
-    const radius=6; const height=3;
-    const x= radius*Math.cos(angleRef.current);
-    const z= radius*Math.sin(angleRef.current);
-    if(lightRef.current){
-      lightRef.current.position.set(x,height,z);
-      lightRef.current.target.position.set(0,0,0);
-      lightRef.current.target.updateMatrixWorld();
-    }
-  });
-
-  return (
-    <spotLight
-      ref={lightRef}
-      color={color}
-      intensity={4}
-      distance={30}
-      angle={0.4}
-      penumbra={0.5}
-      castShadow
-    />
-  );
-}
-
-/* ==================== 5) Cylinder walls => #111 w/ neon stripes ==================== */
-function Walls(){
-  return (
-    <group>
-      <mesh rotation={[-Math.PI/2,0,0]}>
-        <cylinderGeometry args={[35,35,10,32,1,true]}/>
-        <meshStandardMaterial
-          color="#111"
-          side={THREE.DoubleSide}
-          metalness={0.2}
-          roughness={0.6}
-        />
-      </mesh>
-
-      <NeonStrip y={-2}/>
-      <NeonStrip y={0}/>
-      <NeonStrip y={2}/>
-    </group>
-  );
-}
-function NeonStrip({y}:{y:number}){
-  return (
-    <mesh position={[0,y,0]} rotation={[Math.PI/2,0,0]}>
-      <torusGeometry args={[35,0.1,16,100]}/>
-      <meshStandardMaterial
-        color="#00ffcc"
-        emissive="#00ffcc"
-        emissiveIntensity={1}
-        metalness={0.2}
-        roughness={0.2}
-      />
-    </mesh>
-  );
-}
-
-/* ==================== 6) Bar ==================== */
-function BarArea(){
-  return(
-    <group position={[-20,0,0]}>
-      <mesh receiveShadow castShadow position={[0,1,0]}>
-        <boxGeometry args={[4,2,10]}/>
-        <meshStandardMaterial color="#552222" metalness={0.3} roughness={0.4}/>
-      </mesh>
-
-      <mesh receiveShadow castShadow position={[0,2,0]}>
-        <boxGeometry args={[4.5,0.2,11]}/>
-        <meshStandardMaterial color="#774444" metalness={0.3} roughness={0.3}/>
-      </mesh>
-
-      <mesh receiveShadow castShadow position={[1.8,2,0]}>
-        <boxGeometry args={[0.2,2,10]}/>
-        <meshStandardMaterial color="#442222" metalness={0.2} roughness={0.4}/>
-      </mesh>
-    </group>
-  );
-}
-
-/* ==================== 7) Stage => 3 steps ==================== */
-function StageArea(){
-  return(
-    <group position={[0,0,-20]}>
-      <mesh receiveShadow castShadow position={[0,0.1,0]}>
-        <boxGeometry args={[10,0.2,6]}/>
-        <meshStandardMaterial color="#444444" metalness={0.2} roughness={0.3}/>
-      </mesh>
-      <mesh receiveShadow castShadow position={[0,0.3,0]}>
-        <boxGeometry args={[8,0.2,4]}/>
-        <meshStandardMaterial color="#555555" metalness={0.2} roughness={0.3}/>
-      </mesh>
-      <mesh receiveShadow castShadow position={[0,0.5,0]}>
-        <boxGeometry args={[6,0.2,3]}/>
-        <meshStandardMaterial color="#666666" metalness={0.2} roughness={0.3}/>
-      </mesh>
-    </group>
-  );
-}
-
-/* ==================== 8) DJBooth ==================== */
-function DJBooth(){
-  return(
-    <group position={[15,0,15]}>
-      <mesh receiveShadow castShadow position={[0,1,0]}>
-        <boxGeometry args={[4,2,3]}/>
-        <meshStandardMaterial color="#333366" metalness={0.3} roughness={0.3}/>
-      </mesh>
-      <mesh receiveShadow castShadow position={[0,2,0]}>
-        <boxGeometry args={[4.5,0.2,3.5]}/>
-        <meshStandardMaterial color="#555588" metalness={0.3} roughness={0.3}/>
-      </mesh>
-      <mesh receiveShadow castShadow position={[0,1.5,1.75]}>
-        <boxGeometry args={[3.5,1,0.1]}/>
-        <meshStandardMaterial color="#222255" metalness={0.2} roughness={0.3}/>
-      </mesh>
-    </group>
-  );
-}
-
-/* ==================== 9) LaserLightsGroup => spawns 20 lasers in a distinct region ==================== */
-function LaserLightsGroup({
-  groupID,
-  xRange,
-  zRange,
-  apexY=25
-}: {
-  groupID: string;
-  xRange: [number, number];
-  zRange: [number, number];
-  apexY?: number;
-}) {
-  const numLasers = 20;
-  const colorOptions = [
-    "#ff00ff","#00ffff","#ff9900","#ff0000","#00ff00","#ffff00","#ff0099"
-  ];
-
-  const lasers = useMemo(() => {
-    const arr: LaserProps[] = [];
-    for (let i = 0; i < numLasers; i++) {
-      const color =
-        colorOptions[Math.floor(Math.random() * colorOptions.length)];
-      // pick x in [xRange[0], xRange[1]]
-      const xRand = xRange[0] + Math.random()*(xRange[1] - xRange[0]);
-      // pick z in [zRange[0], zRange[1]]
-      const zRand = zRange[0] + Math.random()*(zRange[1] - zRange[0]);
-      const speed = 0.5 + Math.random() * 1.5;
-      const mode: "rotate" | "scan" = Math.random() > 0.5 ? "rotate" : "scan";
-      arr.push({ color, x: xRand, z: zRand, speed, mode, apexY});
-    }
-    return arr;
-  }, [numLasers, xRange, zRange, apexY]);
-
-  return (
-    <>
-      {lasers.map((cfg, i) => (
-        <MovingLaser key={`${groupID}_${i}`} {...cfg} />
-      ))}
-    </>
-  );
-}
-
-/* ==================== 10) Single moving laser => apex => (sx, apexY, sz), base => (0,0,0) ==================== */
-function MovingLaser({
-  color, x, z, speed, mode, apexY=25
-}: LaserProps) {
-  const coneRef = useRef<THREE.Mesh>(null);
-  const angleRef = useRef<number>(0);
-
-  useFrame((_, delta) => {
-    angleRef.current += speed * delta;
-    if (!coneRef.current) return;
-
-    let sx = x; 
-    let sz = z;
-
-    // revolve or scan
-    if (mode === "rotate") {
-      const localRadius=4;
-      const offsetX= localRadius*Math.cos(angleRef.current);
-      const offsetZ= localRadius*Math.sin(angleRef.current);
-      sx += offsetX;
-      sz += offsetZ;
-    } else {
-      // scanning
-      const sweep= Math.sin(angleRef.current)*8;
-      sx += sweep;
-    }
-
-    // apex overhead
-    const apex = new THREE.Vector3(sx, apexY, sz);
-    const base = new THREE.Vector3(0,0,0);
-
-    // direction => base - apex => downward
-    const dir = new THREE.Vector3().subVectors(base, apex);
-    const dist= dir.length();
-    const midpoint= apex.clone().add( dir.clone().multiplyScalar(0.5));
-
-    // orientation => from +Y => downward
-    const up= new THREE.Vector3(0,1,0);
-    const look= new THREE.Quaternion();
-    look.setFromUnitVectors(up, dir.clone().normalize());
-
-    coneRef.current.position.copy(midpoint);
-    coneRef.current.quaternion.copy(look);
-
-    // rebuild geometry => apex local y=0 => base local y=+dist
-    const oldGeo = coneRef.current.geometry as THREE.ConeGeometry;
-    if(oldGeo) oldGeo.dispose();
-
-    // apex radius= 0.1 => slightly visible top, height= dist => all the way to floor
-    coneRef.current.geometry = new THREE.ConeGeometry(0.1, dist, 16,1,false);
-  });
-
-  return (
-    <mesh ref={coneRef}>
-      {/* dummy geometry => replaced each frame */}
-      <coneGeometry args={[0.1,1,16,1,false]}/>
-
-      <meshStandardMaterial
-        color={color}
-        emissive={color}
-        emissiveIntensity={3}
-        side={THREE.DoubleSide}
-        transparent
-        opacity={0.7}
-        metalness={0.1}
-        roughness={0.2}
-      />
-    </mesh>
-  );
-}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
index 718d6fe..98f30b7 100644
Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e2cfd47..9bd356b 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,14 +1,14 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import { ethers } from "ethers";
+import { ethers, Eip1193Provider } from "ethers";
 import "./globals.css";
 import Image from "next/image";
 import Link from "next/link";
 import { Press_Start_2P } from "next/font/google";
 
-/** 
- * 1) Retro font => Press_Start_2P => same as before
+/**
+ * 1) Retro font => Press_Start_2P
  */
 const pressStart2P = Press_Start_2P({
   subsets: ["latin"],
@@ -16,8 +16,8 @@ const pressStart2P = Press_Start_2P({
   display: "swap",
 });
 
-/** 
- * 2) EVM chain configs => Ethereum, Polygon, Arbitrum, Avalanche, Base
+/**
+ * 2) EVM chain configs => Ethereum, Polygon, Arbitrum, Avalanche, Base, Optimism
  */
 const EVM_CHAINS = {
   ETHEREUM: {
@@ -60,63 +60,68 @@ const EVM_CHAINS = {
     rpcUrls: ["https://mainnet.base.org"],
     blockExplorerUrls: ["https://explorer.base.org"],
   },
+  OPTIMISM: {
+    label: "Optimism",
+    chainId: "0xa",
+    chainName: "Optimism Mainnet",
+    nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+    rpcUrls: ["https://mainnet.optimism.io"],
+    blockExplorerUrls: ["https://optimistic.etherscan.io"],
+  },
 } as const;
+
 type EvmChainKey = keyof typeof EVM_CHAINS;
 
 /** 
  * 3) Phantom network => "SOLANA" or "SUI"
+ *    We'll keep "SUI" in the union, but won't ever use it below.
  */
-type PhantomNetworkKey = "SOLANA" | "SUI";
+type PhantomNetworkKey = "SOLANA" | "SUI"; 
 
-/**
- * 4) RootLayout => single aggregator with brand+nav on left, aggregator on right
- */
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   // SSR skip => “ready” approach
   const [ready, setReady] = useState(false);
   useEffect(() => setReady(true), []);
 
-  // connected wallet => metamask, coinbase, phantom
   const [connectedWallet, setConnectedWallet] = useState<"metamask"|"coinbase"|"phantom"|null>(null);
-
-  // EVM => metamask/coinbase address
   const [evmAddress, setEvmAddress] = useState<string|null>(null);
 
   // Phantom => which "network"? => solana or sui
   const [phantomNetwork, setPhantomNetwork] = useState<PhantomNetworkKey|null>(null);
-  // store addresses for each
   const [solanaAddress, setSolanaAddress] = useState<string|null>(null);
-  const [suiAddress, setSuiAddress] = useState<string|null>(null);
 
-  // EVM chain => default "ETHEREUM"
-  const [selectedEvmChain, setSelectedEvmChain] = useState<EvmChainKey>("ETHEREUM");
+  // Comment out the SUI address if you're not supporting it
+  // const [suiAddress, setSuiAddress] = useState<string|null>(null);
 
-  // show sub‐buttons => metamask, coinbase, phantom
+  const [selectedEvmChain, setSelectedEvmChain] = useState<EvmChainKey>("ETHEREUM");
   const [showWalletButtons, setShowWalletButtons] = useState(false);
 
-  // ============= EVM Connect => metamask =============
+  // ============== CONNECT => METAMASK ==============
   async function connectMetaMask() {
     setConnectedWallet("metamask");
     setEvmAddress(null);
     setPhantomNetwork(null);
     setSolanaAddress(null);
-    setSuiAddress(null);
+    // setSuiAddress(null);
 
     if (!window.ethereum) {
-      alert("No window.ethereum => metamask missing?");
+      alert("No window.ethereum => MetaMask missing?");
       return;
     }
-    let chosenProvider: any = window.ethereum;
-    if (window.ethereum.providers) {
-      const mm = window.ethereum.providers.find((p: any) => p.isMetaMask);
+
+    let chosenProvider = window.ethereum;
+    if (window.ethereum.providers && window.ethereum.providers.length > 0) {
+      const mm = window.ethereum.providers.find((p) => p.isMetaMask);
       if (mm) chosenProvider = mm;
     }
+
     if (!chosenProvider?.isMetaMask) {
       alert("MetaMask overshadowed or not found!");
       return;
     }
+
     try {
-      const provider = new ethers.BrowserProvider(chosenProvider);
+      const provider = new ethers.BrowserProvider(chosenProvider as Eip1193Provider);
       await provider.send("eth_requestAccounts", []);
       const signer = await provider.getSigner();
       setEvmAddress(await signer.getAddress());
@@ -125,29 +130,32 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     }
   }
 
-  // ============= EVM Connect => coinbase =============
+  // ============== CONNECT => COINBASE ==============
   async function connectCoinbase() {
     setConnectedWallet("coinbase");
     setEvmAddress(null);
     setPhantomNetwork(null);
     setSolanaAddress(null);
-    setSuiAddress(null);
+    // setSuiAddress(null);
 
     if (!window.ethereum) {
-      alert("No window.ethereum => coinbase extension missing?");
+      alert("No window.ethereum => Coinbase extension missing?");
       return;
     }
-    let chosenProvider: any = window.ethereum;
-    if (window.ethereum.providers) {
-      const cb = window.ethereum.providers.find((p: any) => p.isCoinbaseWallet);
+
+    let chosenProvider = window.ethereum;
+    if (window.ethereum.providers && window.ethereum.providers.length > 0) {
+      const cb = window.ethereum.providers.find((p) => p.isCoinbaseWallet);
       if (cb) chosenProvider = cb;
     }
+
     if (!chosenProvider?.isCoinbaseWallet) {
       alert("Coinbase overshadowed or not found!");
       return;
     }
+
     try {
-      const provider = new ethers.BrowserProvider(chosenProvider);
+      const provider = new ethers.BrowserProvider(chosenProvider as Eip1193Provider);
       await provider.send("eth_requestAccounts", []);
       const signer = await provider.getSigner();
       setEvmAddress(await signer.getAddress());
@@ -156,17 +164,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     }
   }
 
-  // ============= Phantom => always connect to SOLANA by default =============
+  // ============== CONNECT => PHANTOM => SOLANA ==============
   async function connectPhantom() {
     setConnectedWallet("phantom");
     setEvmAddress(null);
     setPhantomNetwork(null);
     setSolanaAddress(null);
-    setSuiAddress(null);
+    // setSuiAddress(null);
 
-    // Immediately try connecting to SOLANA
     if (!window.solana?.isPhantom) {
-      alert("Phantom overshadowed or not found => solana!");
+      alert("Phantom overshadowed or not found => Solana!");
       return;
     }
     try {
@@ -178,64 +185,51 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     }
   }
 
-  // Then if user picks "SUI" in the phantom dropdown, we do this:
-  async function switchPhantomToSui() {
-    if (!window.phantom?.sui) {
-      alert("Phantom overshadowed or not found => SUI!");
-      return;
-    }
-    try {
-      // Real code may differ
-      const resp = await window.phantom.sui.connect();
-      setSuiAddress(resp.address);
-      setPhantomNetwork("SUI");
-      // clear solana address so we don't show the old one
-      setSolanaAddress(null);
-    } catch (err) {
-      console.error("Phantom(Sui) connect error =>", err);
-    }
-  }
+  // ============== SWITCH PHANTOM => SUI (COMMENT OUT) ==============
+  // async function switchPhantomToSui() {
+  //   alert("Phantom Sui is not supported yet!");
+  //   // If you actually had code calling window.phantom.sui, remove or comment it out.
+  // }
 
-  // If user picks "Solana" in the phantom dropdown *after* picking Sui, we do:
+  // ============== SWITCH PHANTOM => SOLANA ==============
   async function switchPhantomToSolana() {
     if (!window.solana?.isPhantom) {
-      alert("Phantom overshadowed or not found => solana!");
+      alert("Phantom overshadowed or not found => Solana!");
       return;
     }
     try {
       const resp = await window.solana.connect();
       setSolanaAddress(resp.publicKey.toString());
       setPhantomNetwork("SOLANA");
-      // clear sui address so we don't show the old one
-      setSuiAddress(null);
+      // setSuiAddress(null);
     } catch (err) {
       console.error("Phantom(Solana) connect error =>", err);
     }
   }
 
-  // ============= Switch EVM chain => metamask/coinbase only =============
+  // ============== SWITCH EVM CHAIN ==============
   async function switchEvmChain(chainKey: EvmChainKey) {
     if (!evmAddress) {
       alert("No EVM address => connect metamask/coinbase first!");
       return;
     }
-    if (connectedWallet!=="metamask" && connectedWallet!=="coinbase") {
+    if (connectedWallet !== "metamask" && connectedWallet !== "coinbase") {
       alert("EVM chain switching => metamask or coinbase only!");
       return;
     }
+
     const chainData = EVM_CHAINS[chainKey];
     if (!chainData) return;
 
     try {
-      await window.ethereum.request({
+      await window.ethereum?.request?.({
         method: "wallet_switchEthereumChain",
         params: [{ chainId: chainData.chainId }],
       });
-    } catch (error: any) {
-      if (error.code === 4902) {
-        // chain not added => attempt add
+    } catch (error: unknown) {
+      if (error instanceof Error && (error as any).code === 4902) {
         try {
-          await window.ethereum.request({
+          await window.ethereum?.request?.({
             method: "wallet_addEthereumChain",
             params: [
               {
@@ -256,30 +250,30 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     }
   }
 
-  // ============= aggregator => truncated address =============
-  let displayAddress: string|null = null;
-  if (connectedWallet==="metamask" || connectedWallet==="coinbase") {
+  // ============== aggregator => truncated address ==============
+  let displayAddress: string | null = null;
+  if (connectedWallet === "metamask" || connectedWallet === "coinbase") {
     if (evmAddress) {
-      displayAddress = evmAddress.slice(0,5)+"..."+evmAddress.slice(-4);
+      displayAddress = evmAddress.slice(0, 5) + "..." + evmAddress.slice(-4);
     }
-  } else if (connectedWallet==="phantom") {
-    if (phantomNetwork==="SOLANA" && solanaAddress) {
-      displayAddress = solanaAddress.slice(0,5)+"..."+solanaAddress.slice(-4);
-    } else if (phantomNetwork==="SUI" && suiAddress) {
-      displayAddress = suiAddress.slice(0,5)+"..."+suiAddress.slice(-4);
+  } else if (connectedWallet === "phantom") {
+    if (phantomNetwork === "SOLANA" && solanaAddress) {
+      displayAddress = solanaAddress.slice(0, 5) + "..." + solanaAddress.slice(-4);
     }
+    // else if (phantomNetwork === "SUI" && suiAddress) {
+    //   displayAddress = suiAddress.slice(0, 5) + "..." + suiAddress.slice(-4);
+    // }
   }
 
-  // ============= aggregator => disconnect =============
+  // ============== aggregator => disconnect ==============
   function disconnectWallet() {
     setConnectedWallet(null);
     setEvmAddress(null);
     setPhantomNetwork(null);
     setSolanaAddress(null);
-    setSuiAddress(null);
+    // setSuiAddress(null);
   }
 
-  // shared style => text-xs => pink→yellow gradient on hover
   const sharedHoverGradient = `
     px-2 py-1
     text-xs
@@ -298,40 +292,33 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   `;
 
   if (!ready) {
-    // SSR fallback => no aggregator
     return (
       <html lang="en">
         <body className={`min-h-screen text-xs bg-black ${pressStart2P.className}`}>
           <div className="p-4 text-white text-center">Loading aggregator...</div>
-          <main className="container mx-auto px-4 py-4">
-            {children}
-          </main>
+          <main className="container mx-auto px-4 py-4">{children}</main>
         </body>
       </html>
     );
   }
 
-  // final aggregator once client is mounted
   return (
     <html lang="en">
       <body className={`min-h-screen text-xs bg-black ${pressStart2P.className}`}>
-        
         <header className="p-2 bg-black border-b border-neutral-800">
           <nav className="container mx-auto flex items-center justify-between">
             
-            {/* LEFT => brand + nav => text-[10px] => near each other => gap-4 */}
+            {/* LEFT => brand + nav */}
             <div className="flex items-center gap-4">
-              {/* Brand => KRBYLAND */}
               <Link href="/" className="flex items-center space-x-2">
                 <Image
-                  src="/images/krbyland_logo.png"
+                  src="/images/KRBYLAND.png"
                   alt="KRBYLAND Logo"
                   width={36}
                   height={36}
                 />
               </Link>
-
-              {/* Nav => text-[10px], small */}
+              {/* Nav */}
               <ul className="flex gap-2 text-[10px]">
                 <li>
                   <Link
@@ -378,11 +365,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
             {/* RIGHT => aggregator => chain or phantom net => address => disconnect */}
             <div className="flex items-center gap-2">
-              
               {displayAddress ? (
                 <>
-                  {/** If metamask or coinbase => EVM chain dropdown */}
-                  {(connectedWallet==="metamask" || connectedWallet==="coinbase") && evmAddress && (
+                  {/* EVM chain dropdown if metamask or coinbase */}
+                  {connectedWallet !== "phantom" && evmAddress && (
                     <EvmChainDropdown
                       chainKey={selectedEvmChain}
                       onSwitch={(ck) => {
@@ -392,16 +378,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     />
                   )}
 
-                  {/** If phantom => show a phantom net dropdown => Solana / Sui */}
-                  {connectedWallet==="phantom" && (
+                  {/* Phantom net dropdown if phantom */}
+                  {connectedWallet === "phantom" && (
                     <PhantomNetworkDropdown
                       current={phantomNetwork}
                       switchToSolana={switchPhantomToSolana}
-                      switchToSui={switchPhantomToSui}
+                      // switchToSui={switchPhantomToSui} // commented out
                     />
                   )}
 
-                  {/* truncated address + Disconnect */}
                   <button className={sharedHoverGradient}>
                     {displayAddress}
                   </button>
@@ -411,7 +396,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 </>
               ) : (
                 <>
-                  {/* If not connected => single “Connect Wallet” => shows sub‐buttons */}
                   <button
                     onClick={() => setShowWalletButtons(!showWalletButtons)}
                     className={sharedHoverGradient}
@@ -438,16 +422,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           </nav>
         </header>
 
-        <main className="container mx-auto px-4 py-4">
-          {children}
-        </main>
+        <main className="container mx-auto px-4 py-4">{children}</main>
       </body>
     </html>
   );
 }
 
-/** 
- * EvmChainDropdown => same as before => “Ethereum / Polygon / …”
+/**
+ * EvmChainDropdown => “Ethereum / Polygon / …”
  */
 function EvmChainDropdown({
   chainKey,
@@ -496,27 +478,25 @@ function EvmChainDropdown({
   );
 }
 
-/** 
- * PhantomNetworkDropdown => pick “Solana” or “Sui”
- * We actually do the “connectPhantomSolana()” or “connectPhantomSui()” calls 
- * in the aggregator => we pass them in as props
+/**
+ * PhantomNetworkDropdown => pick “Solana” ~~or “Sui”~~
+ *    we comment out anything referencing "SUI"
  */
 function PhantomNetworkDropdown({
   current,
   switchToSolana,
-  switchToSui,
+  // switchToSui,
 }: {
-  current: PhantomNetworkKey|null;
+  current: PhantomNetworkKey | null;
   switchToSolana: () => Promise<void>;
-  switchToSui: () => Promise<void>;
+  // switchToSui: () => Promise<void>;
 }) {
   const [open, setOpen] = useState(false);
 
-  // if user connected => show “Phantom Solana” or “Phantom Sui”
-  // else => “Phantom?”
+  // We'll pretend only SOLANA is valid now
   let label = "Phantom?";
-  if (current==="SOLANA") label = "Solana";
-  if (current==="SUI") label = "Sui";
+  if (current === "SOLANA") label = "Solana";
+  // if (current === "SUI") label = "Sui";
 
   return (
     <div className="relative inline-block">
@@ -546,7 +526,7 @@ function PhantomNetworkDropdown({
           >
             Solana
           </div>
-          <div
+          {/* <div
             onClick={() => {
               switchToSui();
               setOpen(false);
@@ -558,7 +538,7 @@ function PhantomNetworkDropdown({
             "
           >
             Sui
-          </div>
+          </div> */}
         </div>
       )}
     </div>
diff --git a/tsconfig.json b/tsconfig.json
index c133409..e0e99c3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,27 +1,58 @@
 {
   "compilerOptions": {
+    // ESNext + DOM libraries are typical for Next.js 13
     "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
+
+    // Allow JS in case you have legacy JavaScript files
     "allowJs": true,
-    "skipLibCheck": true,
+
+    // If you prefer super strict type-checking, keep "strict": true
     "strict": true,
+
+    // "skipLibCheck": true can reduce friction from 3rd-party types,
+    // but you can set this to false if you want stricter checks in node_modules
+    "skipLibCheck": true,
+
+    // Next.js typically doesn't emit separate build files in dev
     "noEmit": true,
+
     "esModuleInterop": true,
+
+    // The new standard for Next.js 13 or bundler-based frameworks
     "module": "esnext",
     "moduleResolution": "bundler",
+
+    // Required for JSON imports, if any
     "resolveJsonModule": true,
+
+    // Ensures each file is treated as a separate module
     "isolatedModules": true,
+
+    // Next.js default for TSX
     "jsx": "preserve",
+
+    // Speeds up incremental builds
     "incremental": true,
+
+    // Next.js plugin for better IntelliSense
     "plugins": [
       {
         "name": "next"
       }
     ],
+
+    // Path alias for "src/*"
     "paths": {
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.d.ts",  // Ensures your global.d.ts is included
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }