diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..62aa066
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,15 @@
+# Ignore everything
+*
+
+# Allow files and directories
+!/.cargo/
+!/Cargo.toml
+!/Cargo.lock
+!/crates/new_media
+!/recipie.json
+# Ignore unnecessary files inside allowed directories
+# This should go after the allowed directories
+# **/*~
+# **/*.log
+# **/.DS_Store
+# **/Thumbs.db
diff --git a/Cargo.toml b/Cargo.toml
index 7c8c3f4..7bd7a91 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [workspace]
 resolver = "2"
-members = ["crates/*", "examples/*"]
+members = ["crates/*"]
 
 package.rust-version = "1.75.0"
 
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..91e0152
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,25 @@
+FROM rust as planner
+WORKDIR /app
+RUN cargo install cargo-chef
+COPY . .
+RUN cargo chef prepare --recipe-path recipe.json
+
+FROM rust as cacher
+WORKDIR /app
+RUN cargo install cargo-chef
+COPY --from=planner /app/recipe.json recipe.json
+RUN cargo chef cook --release --recipe-path=recipe.json
+
+FROM rust as builder
+COPY . /app
+WORKDIR /app
+COPY --from=cacher /app/target target
+COPY --from=cacher /usr/local/cargo /usr/local/cargo
+RUN cargo build --release
+
+FROM bitnami/minideb:bookworm
+COPY --from=builder /app/target/release/new_media /app/new_media
+WORKDIR /app
+
+EXPOSE 8080
+CMD ["./new_media"]
diff --git a/examples/minimal/Cargo.toml b/crates/minimal_example/Cargo.toml
similarity index 100%
rename from examples/minimal/Cargo.toml
rename to crates/minimal_example/Cargo.toml
diff --git a/examples/minimal/src/main.rs b/crates/minimal_example/src/main.rs
similarity index 100%
rename from examples/minimal/src/main.rs
rename to crates/minimal_example/src/main.rs
diff --git a/examples/new_media/Cargo.toml b/crates/new_media/Cargo.toml
similarity index 100%
rename from examples/new_media/Cargo.toml
rename to crates/new_media/Cargo.toml
diff --git a/examples/new_media/src/controls.rs b/crates/new_media/src/controls.rs
similarity index 100%
rename from examples/new_media/src/controls.rs
rename to crates/new_media/src/controls.rs
diff --git a/examples/new_media/src/main.rs b/crates/new_media/src/main.rs
similarity index 97%
rename from examples/new_media/src/main.rs
rename to crates/new_media/src/main.rs
index c66d73a..fd0189e 100644
--- a/examples/new_media/src/main.rs
+++ b/crates/new_media/src/main.rs
@@ -30,7 +30,7 @@ fn setup_gaussian_cloud(
 ) {
     // let remote_file = Some("https://huggingface.co/datasets/cs50victor/splats/resolve/main/train/point_cloud/iteration_7000/point_cloud.gcloud");
     // TODO: figure out how to load remote files later
-    let splat_file = "splats/counter/point_cloud/iteration_7000/point_cloud.gcloud";
+    let splat_file = "splats/playroom/point_cloud/iteration_7000/point_cloud.gcloud";
     log::info!("loading {}", splat_file);
     let cloud = asset_server.load(splat_file.to_string());
 
diff --git a/examples/new_media/src/server.rs b/crates/new_media/src/server.rs
similarity index 100%
rename from examples/new_media/src/server.rs
rename to crates/new_media/src/server.rs
diff --git a/demo/app/page.tsx b/demo/app/page.tsx
index 2edefbc..0a420a7 100644
--- a/demo/app/page.tsx
+++ b/demo/app/page.tsx
@@ -4,7 +4,7 @@ export default function Page() {
   return (
     <div className="min-h-dvh prose w-full mx-auto">
       <div className="prose flex flex-col items-center justify-center">
-        <WebSocketExample display="canvas"/>
+        <WebSocketExample/>
       </div>
     </div>
   )
diff --git a/demo/components/Canvas.tsx b/demo/components/Canvas.tsx
index 929b92e..5197d97 100644
--- a/demo/components/Canvas.tsx
+++ b/demo/components/Canvas.tsx
@@ -3,16 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import { ServerWSResponse } from "./WebSocketExample";
 
-const validCommands : Record<string, string> = {
-  "W": "UP",
-  "A": "LEFT",
-  "S": "DOWN",
-  "D": "RIGHT",
-  "ARROWUP": "ZOOM-IN",
-  "ARROWDOWN": "ZOOM-OUT"
-}
-
-export const Canvas=({img_metadata, socket}:{img_metadata: ServerWSResponse, socket: WebSocket })=>{
+export const Canvas=({img_metadata}:{img_metadata: ServerWSResponse })=>{
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [cursorPosition, setCursorPosition] = useState<[number, number]>()
   const aspectRatio = 16/9;
@@ -29,20 +20,6 @@ export const Canvas=({img_metadata, socket}:{img_metadata: ServerWSResponse, soc
     }
   }, [img_metadata]);
 
-  const handle_keyboard_input = (e: KeyboardEvent) =>{
-    const key = e.key.toUpperCase()
-    if(key in validCommands){
-      e.preventDefault();
-      socket.send(validCommands[key])
-      console.log("key down -> ", key)
-    }
-  }
-
-  useEffect(() => {
-    document.addEventListener("keydown", handle_keyboard_input)
-    return () => document.removeEventListener("keydown", handle_keyboard_input)
-  }, []);
-
   return (
     <>
       <canvas
diff --git a/demo/components/Controller.tsx b/demo/components/Controller.tsx
new file mode 100644
index 0000000..6634d95
--- /dev/null
+++ b/demo/components/Controller.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useEffect } from "react"
+
+const validCommands : Record<string, string> = {
+  "W": "UP",
+  "A": "LEFT",
+  "S": "DOWN",
+  "D": "RIGHT",
+  "ARROWUP": "ZOOM-IN",
+  "ARROWDOWN": "ZOOM-OUT"
+}
+
+export const Controller=({socket}: {socket: WebSocket})=>{
+
+  const handle_keyboard_input = (e: KeyboardEvent) =>{
+    const key = e.key.toUpperCase()
+    if(key in validCommands){
+      e.preventDefault();
+      socket.send(validCommands[key])
+      console.log("key down -> ", key)
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener("keydown", handle_keyboard_input)
+    return () => document.removeEventListener("keydown", handle_keyboard_input)
+  }, []);
+
+  return null
+}
diff --git a/demo/components/WebSocketExample.tsx b/demo/components/WebSocketExample.tsx
index a7421fe..2d24ca7 100644
--- a/demo/components/WebSocketExample.tsx
+++ b/demo/components/WebSocketExample.tsx
@@ -1,17 +1,15 @@
 "use client"
 
 import { useEffect, useState } from 'react';
-import Image from 'next/image'
 import { Canvas } from './Canvas';
-
-type DisplayType = "image" | "canvas"
+import { Controller } from './Controller';
 
 export interface ServerWSResponse {
   image: string
   dimension: [number, number]
 }
 
-export default function WebSocketExample({port = 8080, display="canvas"}:{port?:number, display:DisplayType}){
+export default function WebSocketExample({port = 8080}:{port?:number}){
   const [imgMetadata, setImageMetadata] = useState<ServerWSResponse>();
   const [socket, setSocket] = useState<WebSocket>()
 
@@ -51,10 +49,11 @@ export default function WebSocketExample({port = 8080, display="canvas"}:{port?:
 
   return (
     <div>
-      { (imgMetadata && socket) ? (
-        display === "canvas" ? <Canvas img_metadata={imgMetadata} socket={socket}/> : <Image src={imgMetadata.image} alt="Streamed image" objectFit="cover" fill/>
+      { imgMetadata ? (
+        <Canvas img_metadata={imgMetadata} />
       ) : <p className='text-xl font-semibold'>NEW MEDIA | trying to connect to server...</p>
       }
+      {socket ? <Controller socket={socket}/> : null}
     </div>
   )
 };