diff --git a/src/components/EditorPanel.jsx b/src/components/EditorPanel.jsx
index fadcc5d..d96b02e 100644
--- a/src/components/EditorPanel.jsx
+++ b/src/components/EditorPanel.jsx
@@ -4,12 +4,13 @@ import Editor from '@monaco-editor/react';
 export default function EditorPanel({ code, onChange }) {
   return (
     <div style={{
+      fontSize: '15px',
       border: '1px solid #444',
       borderRadius: '8px',
       backgroundColor: '#1e1e1e',
-      height: '400px',
+      height: '90%',
       boxShadow: '0 0 10px rgba(255, 0, 255, 0.2)',
-      overflow: 'hidden',
+      overflow: 'hidden'
     }}>
       <Editor
         height="100%"
@@ -18,15 +19,15 @@ export default function EditorPanel({ code, onChange }) {
         onChange={v => onChange(v || '')}
         theme="vs-dark"
         options={{
-          fontSize: 16,
+          fontSize: 20,
           padding: { top: 10, bottom: 10 },
           minimap: { enabled: false },
           scrollbar: {
-            verticalScrollbarSize: 8,
-            horizontalScrollbarSize: 8,
+            verticalScrollbarSize: 12,
+            horizontalScrollbarSize: 12
           },
           lineNumbers: 'on',
-          scrollBeyondLastLine: false,
+          scrollBeyondLastLine: false
         }}
       />
     </div>
diff --git a/src/components/PreviewPanel.jsx b/src/components/PreviewPanel.jsx
index afec57f..3e66bd7 100644
--- a/src/components/PreviewPanel.jsx
+++ b/src/components/PreviewPanel.jsx
@@ -3,124 +3,119 @@ import React, { useState } from 'react';
 export default function PreviewPanel({ code }) {
   const [gameUrl, setGameUrl] = useState('');
   const [settings, setSettings] = useState(null);
-  const [moveRes, setMoveRes] = useState(null);
   const [loadingSetup, setLoadingSetup] = useState(false);
-  const [loadingMove, setLoadingMove] = useState(false);
 
-
-    const fetchSetup = async (e) => {
-      e.preventDefault();
-      setLoadingSetup(true);
-      try {
-        const res = await fetch(
-          `/api/fetch-board?url=${encodeURIComponent(gameUrl.trim())}`
-        );
-        setSettings(await res.json());
-        setMoveRes(null);
-      } catch (err) {
-        console.error(err);
-      }
-      setLoadingSetup(false);
-    };
-
-  const testMove = async (e) => {
-    e.preventDefault();
-    if (!settings) return;
-    setLoadingMove(true);
+  const fetchBoard = async () => {
+    if (!gameUrl.trim()) return;
+    setLoadingSetup(true);
     try {
-      const res = await fetch('/api/move', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ code, boardState: settings })
-      });
-      setMoveRes(await res.json());
+      const res = await fetch(
+        `/api/fetch-board?url=${encodeURIComponent(gameUrl.trim())}`
+      );
+      if (!res.ok) throw new Error('Fetch board failed');
+      setSettings(await res.json());
     } catch (err) {
       console.error(err);
+    } finally {
+      setLoadingSetup(false);
     }
-    setLoadingMove(false);
   };
 
   const gameId = gameUrl.trim().split('/').pop();
 
   return (
-    <div
-      className="preview-panel"
-      style={{ display: 'flex', flexDirection: 'column', height: '100%' }}
-    >
-      <h2>Battlesnake Preview</h2>
+    <div style={{
+      flex: 1,
+      background: '#1a1a1a',
+      borderRadius: '12px',
+      boxShadow: '0 0 15px #d300c5, 0 0 25px #ff2a6d',
+      border: '1px solid #d300c5',
+      padding: '1rem',
+      color: '#eee',
+      display: 'flex',
+      flexDirection: 'column',
+      boxSizing: 'border-box'
+    }}>
+      <div style={{
+        backgroundColor: '#d300c5',
+        height: '6px',
+        borderRadius: '3px 3px 0 0',
+        marginBottom: '0.5rem'
+      }} />
+      <h3 style={{
+        fontSize: '1.2rem',
+        margin: '0 0 1rem',
+        color: '#d300c5',
+        textShadow: '0 0 5px #d300c5',
+        textAlign: 'center'
+      }}>
+        🎯 Live Arena Output
+      </h3>
 
-      {/* game board URL */}
-      <form style={{ display: 'flex', gap: '0.5rem', marginBottom: '1rem' }}>
+      <div style={{
+        background: 'rgba(255,255,255,0.05)',
+        border: '1px solid #ff2a6d',
+        borderRadius: '8px',
+        padding: '1rem',
+        marginBottom: '1rem'
+      }}>
         <input
           type="text"
           placeholder="Game URL"
           value={gameUrl}
-          onChange={(e) => setGameUrl(e.target.value)}
-          style={{ flex: 1 }}
+          onChange={e => setGameUrl(e.target.value)}
+          style={{
+            width: '100%',
+            padding: '0.5rem',
+            marginBottom: '0.75rem',
+            border: 'none',
+            borderRadius: 4,
+            background: 'transparent',
+            color: '#fff',
+            outline: 'none'
+          }}
         />
-        <button onClick={fetchSetup} disabled={!gameUrl || loadingSetup}>
-          {loadingSetup ? 'Loading…' : 'Fetch Board'}
-        </button>
-      </form>
-
-      {/* Test Move */}
-      <div style={{ marginBottom: '1rem' }}>
-        <button onClick={testMove} disabled={!settings || loadingMove}>
-          {loadingMove ? 'Testing…' : 'Test Move'}
+        <button
+          type="button"
+          onClick={fetchBoard}
+          disabled={!gameUrl.trim() || loadingSetup}
+          style={{
+            width: '100%',
+            padding: '0.75rem',
+            backgroundColor: '#ff2a6d',
+            border: 'none',
+            borderRadius: '20px',
+            color: '#fff',
+            fontWeight: 'bold',
+            cursor: 'pointer'
+          }}
+        >
+          {loadingSetup ? 'Loading…' : 'FETCH BOARD'}
         </button>
       </div>
 
-      {settings && gameId && (
-        <div style={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+      {/* <div style={{
+        background: 'rgba(255,255,255,0.05)',
+        border: '1px solid #ff2a6d',
+        borderRadius: '8px',
+        padding: '1rem',
+        marginBottom: '1rem'
+      }}>
+      </div> */}
+
+      <div style={{
+        flex: 1,
+        overflow: 'hidden',
+        borderRadius: '8px'
+      }}>
+        {settings && gameId && (
           <iframe
-            src={`/proxy/?game=${gameId}&autoplay=false&showControls=true`}
-            style={{ width: '70%', height: '100%', border: 'none' }}
+            src={`/proxy/?game=${encodeURIComponent(gameId)}&autoplay=false&showControls=true`}
+            style={{ width: '100%', height: '100%', border: 'none' }}
             title="Battlesnake Board"
           />
-
-          {/*<iframe
-            src={`/board/index.html?game=${gameId}&autoplay=true&showControls=true`}
-            style={{ width: '70%', height: '100%', border: 'none' }}
-            title="Battlesnake Board"
-          />*/}
-
-          <div
-            style={{
-              width: '30%',
-              display: 'flex',
-              flexDirection: 'column',
-              overflow: 'auto',
-              background: '#222',
-              color: '#eee',
-              padding: '1rem'
-            }}
-          >
-            {moveRes && (
-              <pre
-                style={{
-                  background: moveRes.error ? '#500' : '#050',
-                  color: '#fff',
-                  padding: '0.5rem',
-                  marginBottom: '1rem',
-                  overflowX: 'auto'
-                }}
-              >
-                {JSON.stringify(moveRes, null, 2)}
-              </pre>
-            )}
-            <pre
-              style={{
-                flex: 1,
-                margin: 0,
-                padding: '0.5rem',
-                overflow: 'auto'
-              }}
-            >
-              {JSON.stringify(settings, null, 2)}
-            </pre>
-          </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }
diff --git a/src/pages/CodeEditor.jsx b/src/pages/CodeEditor.jsx
index 8bf9310..709f84c 100644
--- a/src/pages/CodeEditor.jsx
+++ b/src/pages/CodeEditor.jsx
@@ -1,50 +1,65 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import EditorPanel from "../components/EditorPanel";
 import PreviewPanel from "../components/PreviewPanel";
 
-const PageCodeEditor = () => {
-  const [code, setCode] = useState(
-    `# NOW LOADING`
-  );
-  const appName = "snakeapi-demo-001";
+export default function PageCodeEditor() {
+  const { assignmentId: routeId } = useParams();
+  const assignmentId = routeId || "52";
+
+  const [appName, setAppName] = useState("");
+  const [code, setCode] = useState("# NOW LOADING");
 
   useEffect(() => {
     document.title = "Snake Brain Editor";
+  }, []);
 
+  useEffect(() => {
+    fetch(`https://assignment-service.fly.dev/student/assignment/${assignmentId}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Failed to fetch assignment");
+        return res.json();
+      })
+      .then((data) => setAppName(data.appname))
+      .catch((err) => console.error("Assignment fetch error:", err));
+  }, [assignmentId]);
+
+  useEffect(() => {
+    if (!appName) return;
     fetch(`https://assignment-service.fly.dev/notebook/${appName}`)
       .then((res) => {
-        if (!res.ok) throw new Error("Network response was not ok");
+        if (!res.ok) throw new Error("Failed to fetch notebook");
         return res.json();
       })
       .then((notebook) => {
-        // extract code cell sources and join them
         const combined = notebook.cells
           .filter((cell) => cell.cell_type === "code")
           .map((cell) => cell.source.join(""))
           .join("\n\n");
         setCode(combined);
       })
-      .catch((err) => console.error("Failed to fetch notebook:", err));
-  }, []);
+      .catch((err) => console.error("Notebook fetch error:", err));
+  }, [appName]);
 
   return (
-    <main className="code-editor-page" style={{ paddingTop: "70px" }}>
+    <main className="code-editor-page" style={{ paddingTop: "35px" }}>
       <div
         className="editor-page-layout"
         style={{
           display: "flex",
-          gap: "2rem",
-          padding: "2rem",
+          gap: "1rem",
+          width: "120rem",
+          padding: "1rem",
           fontFamily: "'Fira Code', 'Courier New', monospace",
         }}
       >
-        {/* python editor */}
+        {/* Python Editor */}
         <div
           className="box-panel"
           style={{
             flex: 2,
             background: "linear-gradient(145deg, #0d0221, #1a1a1a)",
-            borderRadius: "12px",
+            borderRadius: "10px",
             padding: "1rem",
             color: "#eee",
             minHeight: "80vh",
@@ -63,14 +78,38 @@ const PageCodeEditor = () => {
             🐍 Snake Brain (Python)
           </h3>
           <EditorPanel code={code} onChange={setCode} />
+          <div style={{ marginTop: "1rem", display: "flex" }}>
+            <button
+              style={{
+                backgroundColor: "#ff2a6d",
+                color: "#fff",
+                padding: "0.5rem 2rem",
+                border: "none",
+                borderRadius: "20px",
+                fontWeight: "bold",
+                cursor: "pointer",
+              }}
+            >
+              Save
+            </button>
+            <button
+              style={{
+                backgroundColor: "#ff2a6d",
+                color: "#fff",
+                padding: "0.5rem 2rem",
+                marginLeft: "1rem",
+                border: "none",
+                borderRadius: "20px",
+                fontWeight: "bold",
+                cursor: "pointer",
+              }}
+            >
+              Deploy
+            </button>
+          </div>
         </div>
 
-        {/* <div className="preview-section">
-            <PreviewPanel code={code} />
-        </div> */}
-
-
-        {/* live arena */}
+        {/* Live Arena */}
         <div
           className="box-panel"
           style={{
@@ -95,77 +134,18 @@ const PageCodeEditor = () => {
           >
             🎯 Live Arena Output
           </h3>
-
-          <h4 style={{ color: "#fff", textAlign: "center", marginBottom: "1rem" }}>
+          <h4
+            style={{
+              color: "#fff",
+              textAlign: "center",
+              marginBottom: "1rem",
+            }}
+          >
             Battlesnake Preview
           </h4>
-
-          {/* game url */}
-          <div
-            style={{
-              background: "rgba(255,255,255,0.05)",
-              borderRadius: "8px",
-              padding: "1rem",
-              marginBottom: "1rem",
-              textAlign: "center",
-            }}
-          >
-            <input
-              type="text"
-              placeholder="Game URL"
-              style={{
-                background: "transparent",
-                border: "none",
-                color: "#fff",
-                width: "100%",
-                textAlign: "center",
-                fontFamily: "'Fira Code', monospace",
-                outline: "none",
-              }}
-            />
-            <button
-              style={{
-                backgroundColor: "#ff2a6d",
-                color: "#fff",
-                padding: "0.5rem 1rem",
-                border: "none",
-                borderRadius: "20px",
-                marginTop: "0.5rem",
-                cursor: "pointer",
-                width: "100%",
-                fontWeight: "bold",
-              }}
-            >
-              FETCH BOARD
-            </button>
-          </div>
-
-          {/* test move button */}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              marginTop: "2rem",
-            }}
-          >
-            <button
-              style={{
-                backgroundColor: "#ff2a6d",
-                color: "#fff",
-                padding: "0.5rem 2rem",
-                border: "none",
-                borderRadius: "20px",
-                fontWeight: "bold",
-                cursor: "pointer",
-              }}
-            >
-              TEST MOVE
-            </button>
-          </div>
+          <PreviewPanel code={code} />
         </div>
       </div>
     </main>
   );
-};
-
-export default PageCodeEditor;
+}