diff --git a/backend/sandbox/default_packs.py b/backend/sandbox/default_packs.py
index 725c1b7..cb1c2f3 100644
--- a/backend/sandbox/default_packs.py
+++ b/backend/sandbox/default_packs.py
@@ -169,7 +169,9 @@ def pack_hash(self) -> str:
 - Use p5.js best practices
 
 Structure Tips:
-- ALL changes and features should be in /app/frontend/public/sketch.js
+- ALL changes and features should be in /app/frontend/public/{sketch,helpers,objects}.js
+- Organize "objects" (balls, items, etc) into objects.js
+- Organize "utils" (utility functions, etc) into helpers.js
 - At all times, sketch.js should include setup() windowResized() and draw() functions
 - If the user wants to add a p5.js addon, edit layout.js to add a new <Script> (following existing scripts in that files)
 
@@ -192,6 +194,25 @@ def pack_hash(self) -> str:
   ...
 }
 ```
+
+```javascript
+// /app/frontend/public/objects.js
+// example objects.js
+
+class Ball {
+  constructor(x, y, size = 30) {
+    // ... init code ...
+  }
+
+  update() {
+    // ... update code ...
+  }
+
+  draw() {
+    // ... draw code ...
+  }
+} 
+```
 """.strip(),
         setup_time_seconds=60,
     ),
diff --git a/images/NextjsP5DockerFile b/images/NextjsP5DockerFile
index ce63bc9..e48a75c 100644
--- a/images/NextjsP5DockerFile
+++ b/images/NextjsP5DockerFile
@@ -19,12 +19,16 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
     cd frontend && \
     npm run build
 
-RUN curl -o /frontend/public/sketch.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/sketch.js && \
-    curl -o /frontend/src/app/globals.css https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/globals.css && \
-    curl -o /frontend/src/app/layout.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/layout.js && \
-    curl -o /frontend/src/app/page.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/page.js
+RUN curl -o /frontend/public/sketch.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/sketch.js && \
+    curl -o /frontend/public/helpers.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/helpers.js && \
+    curl -o /frontend/public/objects.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/objects.js && \
+    curl -o /frontend/src/app/globals.css https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/src/app/globals.css && \
+    curl -o /frontend/src/app/layout.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/src/app/layout.js && \
+    curl -o /frontend/src/app/page.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/src/app/page.js && \
+    rm -rf /frontend/public/*.svg
 
 RUN ls -asl /frontend && \
+    ls -asl /frontend/public && \
     ls -asl /frontend/src/app && \
     cat /frontend/package.json
 
diff --git a/images/NextjsShadcnDockerFile b/images/NextjsShadcnDockerFile
index d797c68..4201ebe 100644
--- a/images/NextjsShadcnDockerFile
+++ b/images/NextjsShadcnDockerFile
@@ -25,6 +25,8 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
 RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example
 
 RUN ls -asl /frontend && \
-    cat /frontend/package.json  
+    ls -asl /frontend/public && \
+    ls -asl /frontend/src/app && \
+    cat /frontend/package.json
 
 EXPOSE 3000
diff --git a/images/NextjsVanillaDockerFile b/images/NextjsVanillaDockerFile
index 492b71c..1120824 100644
--- a/images/NextjsVanillaDockerFile
+++ b/images/NextjsVanillaDockerFile
@@ -22,6 +22,8 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
 RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example
 
 RUN ls -asl /frontend && \
+    ls -asl /frontend/public && \
+    ls -asl /frontend/src/app && \
     cat /frontend/package.json
 
 EXPOSE 3000
diff --git a/images/p5/public/helpers.js b/images/p5/public/helpers.js
new file mode 100644
index 0000000..c388e84
--- /dev/null
+++ b/images/p5/public/helpers.js
@@ -0,0 +1 @@
+// Any helper functions go here
diff --git a/images/p5/public/objects.js b/images/p5/public/objects.js
new file mode 100644
index 0000000..7d97c9b
--- /dev/null
+++ b/images/p5/public/objects.js
@@ -0,0 +1,29 @@
+// Any objects types go here
+
+class Ball {
+  constructor(x, y, size = 30) {
+    this.x = x;
+    this.y = y;
+    this.size = size;
+    this.vx = 3;
+    this.vy = 2;
+  }
+
+  update() {
+    // Update position
+    this.x += this.vx;
+    this.y += this.vy;
+
+    // Bounce off walls
+    if (this.x + this.size / 2 > width || this.x - this.size / 2 < 0)
+      this.vx *= -1;
+    if (this.y + this.size / 2 > height || this.y - this.size / 2 < 0)
+      this.vy *= -1;
+  }
+
+  draw() {
+    fill(255);
+    noStroke();
+    circle(this.x, this.y, this.size);
+  }
+}
diff --git a/images/p5/public/sketch.js b/images/p5/public/sketch.js
new file mode 100644
index 0000000..55019f3
--- /dev/null
+++ b/images/p5/public/sketch.js
@@ -0,0 +1,17 @@
+let ball;
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  // Create ball in middle of screen
+  ball = new Ball(width / 2, height / 2);
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+function draw() {
+  background(0);
+  ball.update();
+  ball.draw();
+}
diff --git a/images/p5/sketch.js b/images/p5/sketch.js
deleted file mode 100644
index ab0a59e..0000000
--- a/images/p5/sketch.js
+++ /dev/null
@@ -1,33 +0,0 @@
-let x, y, vx, vy;
-let size = 30;
-
-function setup() {
-  createCanvas(windowWidth, windowHeight);
-  // Start circle in middle of screen
-  x = width / 2;
-  y = height / 2;
-  // Give it some initial velocity
-  vx = 3;
-  vy = 2;
-}
-
-function windowResized() {
-  resizeCanvas(windowWidth, windowHeight);
-}
-
-function draw() {
-  background(0);
-
-  // Update position
-  x += vx;
-  y += vy;
-
-  // Bounce off walls
-  if (x + size / 2 > width || x - size / 2 < 0) vx *= -1;
-  if (y + size / 2 > height || y - size / 2 < 0) vy *= -1;
-
-  // Draw circle
-  fill(255);
-  noStroke();
-  circle(x, y, size);
-}
diff --git a/images/p5/globals.css b/images/p5/src/app/globals.css
similarity index 100%
rename from images/p5/globals.css
rename to images/p5/src/app/globals.css
diff --git a/images/p5/layout.js b/images/p5/src/app/layout.js
similarity index 89%
rename from images/p5/layout.js
rename to images/p5/src/app/layout.js
index ea12e5d..b7e4f54 100644
--- a/images/p5/layout.js
+++ b/images/p5/src/app/layout.js
@@ -33,6 +33,8 @@ export default function RootLayout({ children }) {
           src="https://cdn.jsdelivr.net/npm/p5.collide2d"
           strategy="beforeInteractive"
         />
+        <Script src="/helpers.js" strategy="beforeInteractive" />
+        <Script src="/objects.js" strategy="beforeInteractive" />
         <Script src="/sketch.js" strategy="beforeInteractive" />
       </head>
       <body
diff --git a/images/p5/page.js b/images/p5/src/app/page.js
similarity index 100%
rename from images/p5/page.js
rename to images/p5/src/app/page.js