diff --git a/src/pages/CodeEditor.jsx b/src/pages/CodeEditor.jsx
index 7c0ea3c..4bdcda2 100644
--- a/src/pages/CodeEditor.jsx
+++ b/src/pages/CodeEditor.jsx
@@ -2,20 +2,38 @@ import { useEffect, useState } from "react";
 import EditorPanel from "../components/EditorPanel";
 
 const PageCodeEditor = () => {
-  const [code, setCode] = useState(`# Write your Battlesnake code here\ndef move(board):\n    return { 'move': 'up' }`);
+  const [code, setCode] = useState(
+    `# NOW LOADING`
+  );
+  const appName = "snakeapi-demo-001";
 
   useEffect(() => {
     document.title = "Snake Brain Editor";
+
+    fetch(`https://assignment-service.fly.dev/notebook/${appName}`)
+      .then((res) => {
+        if (!res.ok) throw new Error("Network response was not ok");
+        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));
   }, []);
 
   return (
-    <main className="code-editor-page" style={{ paddingTop: '70px' }}>
+    <main className="code-editor-page" style={{ paddingTop: "70px" }}>
       <div
         className="editor-page-layout"
         style={{
-          display: 'flex',
-          gap: '2rem',
-          padding: '2rem',
+          display: "flex",
+          gap: "2rem",
+          padding: "2rem",
           fontFamily: "'Fira Code', 'Courier New', monospace",
         }}
       >
@@ -24,29 +42,21 @@ const PageCodeEditor = () => {
           className="box-panel"
           style={{
             flex: 2,
-            background: 'linear-gradient(145deg, #0d0221, #1a1a1a)',
-            borderRadius: '12px',
-            boxShadow: '0 0 15px #05d9e8, 0 0 30px #ff2a6d',
-            border: '1px solid #ff2a6d',
-            padding: '1rem',
-            color: '#eee',
+            background: "linear-gradient(145deg, #0d0221, #1a1a1a)",
+            borderRadius: "12px",
+            padding: "1rem",
+            color: "#eee",
+            minHeight: "80vh",
+            overflow: "auto",
           }}
         >
-          <div
-            style={{
-              backgroundColor: '#ff2a6d',
-              height: '6px',
-              borderRadius: '3px 3px 0 0',
-              marginBottom: '0.5rem',
-            }}
-          />
           <h3
             className="panel-heading"
             style={{
-              fontSize: '1.2rem',
-              color: '#05d9e8',
-              textShadow: '0 0 5px #05d9e8',
-              marginBottom: '1rem',
+              fontSize: "1.2rem",
+              color: "#05d9e8",
+              textShadow: "0 0 5px #05d9e8",
+              marginBottom: "1rem",
             }}
           >
             🐍 Snake Brain (Python)
@@ -59,75 +69,65 @@ const PageCodeEditor = () => {
           className="box-panel"
           style={{
             flex: 1,
-            background: '#1a1a1a',
-            borderRadius: '12px',
-            boxShadow: '0 0 15px #d300c5, 0 0 25px #ff2a6d',
-            border: '1px solid #d300c5',
-            padding: '1rem',
-            color: '#eee',
+            background: "#1a1a1a",
+            borderRadius: "12px",
+            padding: "1rem",
+            color: "#eee",
+            minHeight: "80vh",
           }}
         >
-          <div
-            style={{
-              backgroundColor: '#d300c5',
-              height: '6px',
-              borderRadius: '3px 3px 0 0',
-              marginBottom: '0.5rem',
-            }}
-          />
           <h3
             style={{
-              fontSize: '1.2rem',
-              color: '#d300c5',
-              textShadow: '0 0 5px #d300c5',
-              marginBottom: '1rem',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '0.5rem',
+              fontSize: "1.2rem",
+              color: "#d300c5",
+              textShadow: "0 0 5px #d300c5",
+              marginBottom: "1rem",
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
             }}
           >
             🎯 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*/}
+          {/* game url */}
           <div
             style={{
-              background: 'rgba(255,255,255,0.05)',
-              border: '1px solid #ff2a6d',
-              borderRadius: '8px',
-              padding: '1rem',
-              marginBottom: '1rem',
-              textAlign: 'center',
+              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',
+                background: "transparent",
+                border: "none",
+                color: "#fff",
+                width: "100%",
+                textAlign: "center",
                 fontFamily: "'Fira Code', monospace",
-                outline: 'none',
+                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',
+                backgroundColor: "#ff2a6d",
+                color: "#fff",
+                padding: "0.5rem 1rem",
+                border: "none",
+                borderRadius: "20px",
+                marginTop: "0.5rem",
+                cursor: "pointer",
+                width: "100%",
+                fontWeight: "bold",
               }}
             >
               FETCH BOARD
@@ -137,38 +137,37 @@ const PageCodeEditor = () => {
           {/* snake api */}
           <div
             style={{
-              background: 'rgba(255,255,255,0.05)',
-              border: '1px solid #ff2a6d',
-              borderRadius: '8px',
-              padding: '1rem',
-              marginBottom: '1rem',
-              textAlign: 'center',
+              background: "rgba(255,255,255,0.05)",
+              borderRadius: "8px",
+              padding: "1rem",
+              marginBottom: "1rem",
+              textAlign: "center",
             }}
           >
             <input
               type="text"
               placeholder="Your Snake API URL"
               style={{
-                background: 'transparent',
-                border: 'none',
-                color: '#fff',
-                width: '100%',
-                textAlign: 'center',
+                background: "transparent",
+                border: "none",
+                color: "#fff",
+                width: "100%",
+                textAlign: "center",
                 fontFamily: "'Fira Code', monospace",
-                outline: 'none',
+                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',
+                backgroundColor: "#ff2a6d",
+                color: "#fff",
+                padding: "0.5rem 1rem",
+                border: "none",
+                borderRadius: "20px",
+                marginTop: "0.5rem",
+                cursor: "pointer",
+                width: "100%",
+                fontWeight: "bold",
               }}
             >
               CONNECT SNAKE API
@@ -178,21 +177,20 @@ const PageCodeEditor = () => {
           {/* test move button */}
           <div
             style={{
-              display: 'flex',
-              justifyContent: 'center',
-              marginTop: '2rem',
+              display: "flex",
+              justifyContent: "center",
+              marginTop: "2rem",
             }}
           >
             <button
               style={{
-                backgroundColor: '#ff2a6d',
-                color: '#fff',
-                padding: '0.5rem 2rem',
-                border: 'none',
-                borderRadius: '20px',
-                fontWeight: 'bold',
-                cursor: 'pointer',
-                boxShadow: '0 0 10px #ff2a6d',
+                backgroundColor: "#ff2a6d",
+                color: "#fff",
+                padding: "0.5rem 2rem",
+                border: "none",
+                borderRadius: "20px",
+                fontWeight: "bold",
+                cursor: "pointer",
               }}
             >
               TEST MOVE