commit 8a7ab3ac24d86c208a11c6d692d39659cf11dda6
Author: kcar <kcar@kevlarai.com>
Date:   Fri Jul 11 13:21:49 2025 +0000

    Initial commit

diff --git a/.env b/.env
new file mode 100644
index 0000000..0657ca7
--- /dev/null
+++ b/.env
@@ -0,0 +1,14 @@
+VITE_APP_URL=app.classroomcopilot.ai
+VITE_FRONTEND_SITE_URL=classroomcopilot.ai
+VITE_APP_PROTOCOL=https
+VITE_APP_NAME=Classroom Copilot
+VITE_SUPER_ADMIN_EMAIL=kcar@kevlarai.com
+VITE_DEV=false
+VITE_SUPABASE_URL=https://supa.classroomcopilot.ai
+VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiaWF0IjoxNzM0OTg4MzkxLCJpc3MiOiJzdXBhYmFzZSIsImV4cCI6MTc2NjUyNDM5MSwicm9sZSI6ImFub24ifQ.utdDZzVlhYIc-cSXuC2kyZz7HN59YfyMH4eaOw1hRlk
+VITE_APP_API_URL=https://api.classroomcopilot.ai
+VITE_STRICT_MODE=false
+
+APP_PROTOCOL=https
+APP_URL=app.classroomcopilot.ai
+PORT_FRONTEND=3000
\ No newline at end of file
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..ae29536
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,15 @@
+# Production environment configuration
+# These values override .env for production mode
+
+# Disable development features
+VITE_DEV=true
+VITE_STRICT_MODE=true
+
+# App environment
+VITE_SUPER_ADMIN_EMAIL=kcar@kevlarai.com
+VITE_FRONTEND_SITE_URL=classroomcopilot.test
+VITE_APP_PROTOCOL=http
+VITE_SUPABASE_URL=supa.classroomcopilot.test
+VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiaWF0IjoxNzM0OTg4MzkxLCJpc3MiOiJzdXBhYmFzZSIsImV4cCI6MTc2NjUyNDM5MSwicm9sZSI6ImFub24ifQ.utdDZzVlhYIc-cSXuC2kyZz7HN59YfyMH4eaOw1hRlk
+VITE_WHISPERLIVE_URL=whisperlive.classroomcopilot.test
+VITE_APP_API_URL=api.classroomcopilot.test
\ No newline at end of file
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..e69de29
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..7a0f1a5
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,15 @@
+# Production environment configuration
+# These values override .env for production mode
+
+# Disable development features
+VITE_DEV=false
+VITE_STRICT_MODE=false
+
+# App environment
+VITE_SUPER_ADMIN_EMAIL=kcar@kevlarai.com
+VITE_FRONTEND_SITE_URL=classroomcopilot.ai
+VITE_APP_PROTOCOL=https
+VITE_SUPABASE_URL=supa.classroomcopilot.ai
+VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiaWF0IjoxNzM0OTg4MzkxLCJpc3MiOiJzdXBhYmFzZSIsImV4cCI6MTc2NjUyNDM5MSwicm9sZSI6ImFub24ifQ.utdDZzVlhYIc-cSXuC2kyZz7HN59YfyMH4eaOw1hRlk
+VITE_WHISPERLIVE_URL=whisperlive.classroomcopilot.ai
+VITE_APP_API_URL=api.classroomcopilot.ai
\ No newline at end of file
diff --git a/App.test.tsx b/App.test.tsx
new file mode 100644
index 0000000..414f0a3
--- /dev/null
+++ b/App.test.tsx
@@ -0,0 +1,33 @@
+import { describe, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { WrappedApp, App } from '../src/App';
+
+describe('App', () => {
+    it('Renders hello world', () => {
+        //  ARRANGE
+        render(<WrappedApp />);
+        //  ACT
+        //  EXPECT
+        expect(
+            screen.getByRole('heading', {
+                level: 1,
+            }
+        )).toHaveTextContent('Hello World')
+    });
+    it('Renders not found if invalid path', () => {
+        //  ARRANGE
+        render(
+            <MemoryRouter initialEntries={['/this-route-does-not-exist']}>
+                <App />
+            </MemoryRouter>
+        );
+        //  ACT
+        //  EXPECT
+        expect(
+            screen.getByRole('heading', {
+                level: 1,
+            }
+        )).toHaveTextContent('Not Found')
+    });
+});
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..b25a9e1
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,42 @@
+FROM node:20 as builder
+WORKDIR /app
+COPY package*.json ./
+# TODO: Remove this or review embedded variables
+COPY .env .env
+
+# First generate package-lock.json if it doesn't exist, then do clean install
+RUN if [ ! -f package-lock.json ]; then npm install --package-lock-only; fi && npm ci
+COPY . .
+# Run build with production mode
+RUN npm run build -- --mode production
+
+FROM nginx:alpine
+# Copy built files
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Create a simple nginx configuration
+RUN echo 'server { \
+    listen 3000; \
+    root /usr/share/nginx/html; \
+    index index.html; \
+    location / { \
+        try_files $uri $uri/ /index.html; \
+        expires 30d; \
+        add_header Cache-Control "public, no-transform"; \
+    } \
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ { \
+        expires 30d; \
+        add_header Cache-Control "public, no-transform"; \
+    } \
+    location ~ /\. { \
+        deny all; \
+    } \
+    error_page 404 /index.html; \
+}' > /etc/nginx/conf.d/default.conf
+
+# Set up permissions
+RUN chown -R nginx:nginx /usr/share/nginx/html \
+    && chown -R nginx:nginx /var/log/nginx
+
+# Expose HTTP port (NPM will handle HTTPS)
+EXPOSE 3000
\ No newline at end of file
diff --git a/Dockerfile.dev b/Dockerfile.dev
new file mode 100644
index 0000000..50c4a93
--- /dev/null
+++ b/Dockerfile.dev
@@ -0,0 +1,41 @@
+FROM node:20 as builder
+WORKDIR /app
+COPY package*.json ./
+COPY .env.development .env.development
+
+# First generate package-lock.json if it doesn't exist, then do clean install
+RUN if [ ! -f package-lock.json ]; then npm install --package-lock-only; fi && npm ci
+COPY . .
+# Run build with development mode
+RUN npm run build -- --mode development
+
+FROM nginx:alpine
+# Copy built files
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Create a simple nginx configuration
+RUN echo 'server { \
+    listen 3003; \
+    root /usr/share/nginx/html; \
+    index index.html; \
+    location / { \
+        try_files $uri $uri/ /index.html; \
+        expires 30d; \
+        add_header Cache-Control "public, no-transform"; \
+    } \
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ { \
+        expires 30d; \
+        add_header Cache-Control "public, no-transform"; \
+    } \
+    location ~ /\. { \
+        deny all; \
+    } \
+    error_page 404 /index.html; \
+}' > /etc/nginx/conf.d/default.conf
+
+# Set up permissions
+RUN chown -R nginx:nginx /usr/share/nginx/html \
+    && chown -R nginx:nginx /var/log/nginx
+
+# Expose HTTP port (NPM will handle HTTPS)
+EXPOSE 3003
\ No newline at end of file
diff --git a/Dockerfile.storybook.macos.dev b/Dockerfile.storybook.macos.dev
new file mode 100644
index 0000000..3a9f10d
--- /dev/null
+++ b/Dockerfile.storybook.macos.dev
@@ -0,0 +1,28 @@
+# Dockerfile.storybook
+FROM node:20-slim
+
+WORKDIR /app
+
+# Install basic dependencies
+RUN apt-get update && apt-get install -y \
+    xdg-utils \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy package files
+COPY package*.json ./
+
+# Copy yarn.lock if it exists
+COPY yarn.lock* ./
+
+# Install dependencies
+RUN yarn install
+
+# Copy the rest of the application
+COPY . .
+
+# Expose port Storybook runs on
+EXPOSE 6006
+
+# Start Storybook in development mode with host configuration
+ENV BROWSER=none
+CMD ["yarn", "storybook", "dev", "-p", "6006", "--host", "0.0.0.0"]
\ No newline at end of file
diff --git a/Dockerfile.storybook.macos.prod b/Dockerfile.storybook.macos.prod
new file mode 100644
index 0000000..f8a2ca9
--- /dev/null
+++ b/Dockerfile.storybook.macos.prod
@@ -0,0 +1,51 @@
+# Build stage
+FROM node:20 as builder
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Copy yarn.lock if it exists
+COPY yarn.lock* ./
+
+# Install dependencies
+RUN yarn install
+
+# Copy the rest of the application
+COPY . .
+
+# Build Storybook
+RUN yarn build-storybook
+
+# Production stage
+FROM nginx:alpine
+WORKDIR /usr/share/nginx/html
+
+# Copy built Storybook files
+COPY --from=builder /app/storybook-static .
+
+# Create nginx configuration
+RUN echo 'server { \
+    listen 6006; \
+    root /usr/share/nginx/html; \
+    index index.html; \
+    location / { \
+        try_files $uri $uri/ /index.html; \
+        expires 30d; \
+        add_header Cache-Control "public, no-transform"; \
+    } \
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ { \
+        expires 30d; \
+        add_header Cache-Control "public, no-transform"; \
+    } \
+    location ~ /\. { \
+        deny all; \
+    } \
+    error_page 404 /index.html; \
+}' > /etc/nginx/conf.d/default.conf
+
+# Set up permissions
+RUN chown -R nginx:nginx /usr/share/nginx/html \
+    && chown -R nginx:nginx /var/log/nginx
+
+EXPOSE 6006
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..a30d7f1
--- /dev/null
+++ b/README.md
@@ -0,0 +1,107 @@
+# Frontend Service
+
+This directory contains the frontend service for ClassroomCopilot, including the web application and static file serving configuration.
+
+## Directory Structure
+
+```
+frontend/
+├── src/                     # Frontend application source code
+└── Dockerfile.dev          # Development container configuration
+└── Dockerfile.prod         # Production container configuration
+```
+
+## Configuration
+
+### Environment Variables
+
+The frontend service uses the following environment variables:
+
+- `VITE_FRONTEND_SITE_URL`: The base URL of the frontend application
+- `VITE_APP_NAME`: The name of the application
+- `VITE_SUPER_ADMIN_EMAIL`: Email address of the super admin
+- `VITE_DEV`: Development mode flag
+- `VITE_SUPABASE_URL`: Supabase API URL
+- `VITE_SUPABASE_ANON_KEY`: Supabase anonymous key
+- `VITE_STRICT_MODE`: Strict mode flag
+- Other environment variables are defined in the root `.env` file
+
+### Server Configuration
+
+The frontend container uses a simple nginx configuration that:
+- Serves static files on port 80
+- Handles SPA routing
+- Manages caching headers
+- Denies access to hidden files
+
+SSL termination and domain routing are handled by Nginx Proxy Manager (NPM).
+
+## Usage
+
+### Development
+
+1. Start the development environment:
+   ```bash
+   NGINX_MODE=dev ./init_macos_dev.sh up
+   ```
+
+2. Configure NPM:
+   - Create a new proxy host for app.localhost
+   - Forward to http://frontend:80
+   - Enable SSL with a self-signed certificate
+   - Add custom locations for SPA routing
+
+3. Access the application:
+   - HTTPS: https://app.localhost
+
+### Production
+
+1. Set environment variables:
+   ```bash
+   NGINX_MODE=prod
+   ```
+
+2. Start the production environment:
+   ```bash
+   ./init_macos_dev.sh up
+   ```
+
+3. Configure NPM:
+   - Create a new proxy host for app.classroomcopilot.ai
+   - Forward to http://frontend:80
+   - Enable SSL with Cloudflare certificates
+   - Add custom locations for SPA routing
+
+## Security
+
+- SSL termination handled by NPM
+- Static file serving with proper caching headers
+- Hidden file access denied
+- SPA routing with fallback to index.html
+
+## Troubleshooting
+
+### Connection Issues
+- Check NPM logs in the admin interface
+- Verify frontend container is running
+- Ensure NPM proxy host is properly configured
+- Check network connectivity between NPM and frontend
+
+### SPA Routing Issues
+- Verify NPM custom locations are properly configured
+- Check frontend container logs
+- Ensure all routes fall back to index.html
+
+## Maintenance
+
+### Log Files
+Located in `/var/log/nginx/`:
+- `access.log`: General access logs
+- `error.log`: Error logs
+
+### Configuration Updates
+1. Modify Dockerfile.dev or Dockerfile.prod as needed
+2. Rebuild and restart the container:
+   ```bash
+   docker compose up -d --build frontend
+   ```
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..579769d
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,19 @@
+services:
+  classroom-copilot:
+    container_name: classroom-copilot
+    build:
+      context: .
+      dockerfile: Dockerfile
+    env_file:
+      - .env
+    ports:
+      - 3000:3000
+    volumes:
+      - ./:/app
+    networks:
+      - kevlarai-network
+
+networks:
+  kevlarai-network:
+    name: kevlarai-network
+    driver: bridge
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..de6e6cc
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,52 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import importPlugin from 'eslint-plugin-import';
+
+export default [
+  { 
+    languageOptions: { 
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        ...globals.node,
+        ...globals.serviceworker
+      },
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true
+        }
+      }
+    },
+    plugins: {
+      import: importPlugin
+    }
+  },
+  pluginJs.configs.recommended,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    plugins: {
+      '@typescript-eslint': tseslint
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules
+    }
+  },
+  {
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin
+    },
+    rules: {
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react/react-in-jsx-scope': 'off'
+    }
+  }
+];
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cf7fff5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Classroom Copilot</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ae381de
--- /dev/null
+++ b/package.json
@@ -0,0 +1,98 @@
+{
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "start": "vite --host",
+    "build": "vite build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@dagrejs/dagre": "^1.1.4",
+    "@emotion/react": "11.11.3",
+    "@emotion/styled": "11.11.0",
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/list": "^6.1.15",
+    "@fullcalendar/multimonth": "^6.1.15",
+    "@fullcalendar/react": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
+    "@mui/icons-material": "5.15.0",
+    "@mui/material": "5.15.0",
+    "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-navigation-menu": "^1.2.4",
+    "@radix-ui/react-toast": "^1.2.5",
+    "@supabase/gotrue-js": "^2.66.1",
+    "@supabase/supabase-js": "^2.46.1",
+    "@tldraw/store": "3.6.1",
+    "@tldraw/sync": "3.6.1",
+    "@tldraw/sync-core": "3.6.1",
+    "@tldraw/tldraw": "3.6.1",
+    "@tldraw/tlschema": "3.6.1",
+    "@types/pdfjs-dist": "^2.10.378",
+    "@types/styled-components": "^5.1.34",
+    "@types/uuid": "^10.0.0",
+    "@vercel/analytics": "^1.3.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@xyflow/react": "^12.3.1",
+    "axios": "^1.7.7",
+    "cmdk": "^1.0.4",
+    "dotenv": "^16.4.5",
+    "pdf-lib": "^1.17.1",
+    "pdfjs-dist": "^4.10.38",
+    "postcss-import": "^16.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
+    "react-modal": "^3.16.1",
+    "react-router-dom": "^6.23.1",
+    "react-use": "^17.3.1",
+    "styled-components": "^6.1.13",
+    "uuid": "^11.1.0",
+    "vite": "^5.2.0",
+    "vite-plugin-mkcert": "^1.17.5",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.15.0",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-modal": "^3.16.3",
+    "@types/serviceworker": "^0.0.119",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
+    "autoprefixer": "^10.4.19",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.2.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "globals": "^15.3.0",
+    "jsdom": "^24.0.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "react-refresh": "^0.14.2",
+    "storybook": "^8.6.12",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.2",
+    "vite-plugin-pwa": "^0.21.1",
+    "vitest": "^1.6.0"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..b7d2aa8
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    'postcss-import': {},
+  },
+};
\ No newline at end of file
diff --git a/public/audioWorklet.js b/public/audioWorklet.js
new file mode 100644
index 0000000..f42b160
--- /dev/null
+++ b/public/audioWorklet.js
@@ -0,0 +1,12 @@
+class AudioProcessor extends AudioWorkletProcessor {
+  process(inputs) {
+    const input = inputs[0];
+    if (input.length > 0) {
+      const audioData = input[0];
+      this.port.postMessage(audioData);
+    }
+    return true;
+  }
+}
+
+registerProcessor('audio-processor', AudioProcessor); 
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..a08664f
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/icons/icon-192x192-maskable.png b/public/icons/icon-192x192-maskable.png
new file mode 100644
index 0000000..cadaf4a
Binary files /dev/null and b/public/icons/icon-192x192-maskable.png differ
diff --git a/public/icons/icon-192x192.png b/public/icons/icon-192x192.png
new file mode 100644
index 0000000..cadaf4a
Binary files /dev/null and b/public/icons/icon-192x192.png differ
diff --git a/public/icons/icon-512x512-maskable.png b/public/icons/icon-512x512-maskable.png
new file mode 100644
index 0000000..df8388c
Binary files /dev/null and b/public/icons/icon-512x512-maskable.png differ
diff --git a/public/icons/icon-512x512.png b/public/icons/icon-512x512.png
new file mode 100644
index 0000000..df8388c
Binary files /dev/null and b/public/icons/icon-512x512.png differ
diff --git a/public/icons/sticker-tool.svg b/public/icons/sticker-tool.svg
new file mode 100644
index 0000000..5261504
--- /dev/null
+++ b/public/icons/sticker-tool.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Sticker outline -->
+  <path d="M20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" 
+    stroke="currentColor" 
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <!-- Peeling corner effect -->
+  <path d="M16 8C16 10.2091 14.2091 12 12 12" 
+    stroke="currentColor" 
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <!-- Star decoration -->
+  <path d="M12 8L13 9L12 10L11 9L12 8Z" 
+    fill="currentColor"
+  />
+</svg>
diff --git a/public/offline.html b/public/offline.html
new file mode 100644
index 0000000..74ec32a
--- /dev/null
+++ b/public/offline.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Offline - Classroom Copilot</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            margin: 0;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            background-color: #f5f5f5;
+            color: #333;
+            text-align: center;
+        }
+        .container {
+            max-width: 600px;
+            padding: 40px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #1a73e8;
+            margin-bottom: 20px;
+        }
+        p {
+            line-height: 1.6;
+            margin-bottom: 20px;
+        }
+        .retry-button {
+            background-color: #1a73e8;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            transition: background-color 0.2s;
+        }
+        .retry-button:hover {
+            background-color: #1557b0;
+        }
+        .icon {
+            font-size: 64px;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="icon">📡</div>
+        <h1>You're Offline</h1>
+        <p>It looks like you've lost your internet connection. Don't worry - any work you've done has been saved locally.</p>
+        <p>Please check your connection and try again.</p>
+        <button class="retry-button" onclick="window.location.reload()">Try Again</button>
+    </div>
+    <script>
+        // Check if we're back online
+        window.addEventListener('online', () => {
+            window.location.reload();
+        });
+    </script>
+</body>
+</html> 
\ No newline at end of file
diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 0000000..306a64f
Binary files /dev/null and b/src/.DS_Store differ
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..36884a6
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,34 @@
+import { BrowserRouter } from 'react-router-dom';
+import { ThemeProvider } from '@mui/material/styles';
+import { theme } from './services/themeService';
+import { AuthProvider } from './contexts/AuthContext';
+import { TLDrawProvider } from './contexts/TLDrawContext';
+import { UserProvider } from './contexts/UserContext';
+import { NeoUserProvider } from './contexts/NeoUserContext';
+import { NeoInstituteProvider } from './contexts/NeoInstituteContext';
+import AppRoutes from './AppRoutes';
+import React from 'react';
+
+// Wrap the entire app in a memo to prevent unnecessary re-renders
+const App = React.memo(() => (
+  <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+    <ThemeProvider theme={theme}>
+      <AuthProvider>
+        <UserProvider>
+          <NeoUserProvider>
+            <NeoInstituteProvider>
+              <TLDrawProvider>
+                <AppRoutes />
+              </TLDrawProvider>
+            </NeoInstituteProvider>
+          </NeoUserProvider>
+        </UserProvider>
+      </AuthProvider>
+    </ThemeProvider>
+  </BrowserRouter>
+));
+
+// Add display name for better debugging
+App.displayName = import.meta.env.VITE_APP_NAME;
+
+export default App;
\ No newline at end of file
diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx
new file mode 100644
index 0000000..d744203
--- /dev/null
+++ b/src/AppRoutes.tsx
@@ -0,0 +1,133 @@
+import React from 'react';
+import { Routes, Route, useLocation } from 'react-router-dom';
+import { useAuth } from './contexts/AuthContext';
+import { useUser } from './contexts/UserContext';
+import { useNeoUser } from './contexts/NeoUserContext';
+import { useNeoInstitute } from './contexts/NeoInstituteContext';
+import Layout from './pages/Layout';
+import LoginPage from './pages/auth/loginPage';
+import SignupPage from './pages/auth/signupPage';
+import SinglePlayerPage from './pages/tldraw/singlePlayerPage';
+import MultiplayerUser from './pages/tldraw/multiplayerUser';
+import { CCExamMarker } from './pages/tldraw/CCExamMarker/CCExamMarker';
+import CalendarPage from './pages/user/calendarPage';
+import SettingsPage from './pages/user/settingsPage';
+import TLDrawCanvas from './pages/tldraw/TLDrawCanvas';
+import AdminDashboard from './pages/auth/adminPage';
+import TLDrawDevPage from './pages/tldraw/devPlayerPage';
+import DevPage from './pages/tldraw/devPage';
+import TeacherPlanner from './pages/react-flow/teacherPlanner';
+import MorphicPage from './pages/morphicPage';
+import NotFound from './pages/user/NotFound';
+import NotFoundPublic from './pages/NotFoundPublic';
+import ShareHandler from './pages/tldraw/ShareHandler';
+import SearxngPage from './pages/searxngPage';
+import { logger } from './debugConfig';
+import { CircularProgress } from '@mui/material';
+
+const AppRoutes: React.FC = () => {
+  const { user, loading: isAuthLoading } = useAuth();
+  const { isInitialized: isUserInitialized } =
+    useUser();
+  const { isLoading: isNeoUserLoading, isInitialized: isNeoUserInitialized } =
+    useNeoUser();
+  const {
+    isLoading: isNeoInstituteLoading,
+    isInitialized: isNeoInstituteInitialized,
+  } = useNeoInstitute();
+  const location = useLocation();
+
+  // Debug log for routing
+  logger.debug('routing', '🔄 Rendering routes', {
+    hasUser: !!user,
+    userId: user?.id,
+    userEmail: user?.email,
+    currentPath: location.pathname,
+    authStatus: {
+      isLoading: isAuthLoading,
+    },
+    userStatus: {
+      isInitialized: isUserInitialized,
+    },
+    neoUserStatus: {
+      isLoading: isNeoUserLoading,
+      isInitialized: isNeoUserInitialized,
+    },
+    neoInstituteStatus: {
+      isLoading: isNeoInstituteLoading,
+      isInitialized: isNeoInstituteInitialized,
+    },
+  });
+
+  // Show loading state while initializing
+  if (
+    isAuthLoading ||
+    (user &&
+      (!isUserInitialized ||
+        !isNeoUserInitialized ||
+        !isNeoInstituteInitialized))
+  ) {
+    return (
+      <Layout>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100vh',
+          }}
+        >
+          <CircularProgress />
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <Routes>
+        {/* Public routes */}
+        <Route
+          path="/"
+          element={user ? <SinglePlayerPage /> : <TLDrawCanvas />}
+        />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/signup" element={<SignupPage />} />
+        <Route path="/share" element={<ShareHandler />} />
+
+        {/* Super Admin only routes */}
+        <Route
+          path="/admin"
+          element={
+            user?.user_type === 'admin' ? <AdminDashboard /> : <NotFound />
+          }
+        />
+
+        {/* Authentication only routes - only render if all contexts are initialized */}
+        {user &&
+          isUserInitialized &&
+          isNeoUserInitialized &&
+          isNeoInstituteInitialized && (
+            <>
+              <Route path="/search" element={<SearxngPage />} />
+              <Route path="/teacher-planner" element={<TeacherPlanner />} />
+              <Route path="/exam-marker" element={<CCExamMarker />} />
+              <Route path="/morphic" element={<MorphicPage />} />
+              <Route path="/tldraw-dev" element={<TLDrawDevPage />} />
+              <Route path="/dev" element={<DevPage />} />
+              <Route path="/single-player" element={<SinglePlayerPage />} />
+              <Route path="/multiplayer" element={<MultiplayerUser />} />
+              <Route path="/calendar" element={<CalendarPage />} />
+              <Route path="/settings" element={<SettingsPage />} />
+            </>
+          )}
+
+        {/* Fallback route - use different NotFound pages based on auth state */}
+        <Route path="*" element={user ? <NotFound /> : <NotFoundPublic />} />
+      </Routes>
+    </Layout>
+  );
+};
+
+export default AppRoutes;
+
diff --git a/src/axiosConfig.ts b/src/axiosConfig.ts
new file mode 100644
index 0000000..36bf15d
--- /dev/null
+++ b/src/axiosConfig.ts
@@ -0,0 +1,68 @@
+import axios from 'axios';
+import { logger } from './debugConfig';
+
+// Use development backend URL if no custom URL is provided
+const appProtocol = import.meta.env.VITE_APP_PROTOCOL;
+const baseURL = `${appProtocol}://${import.meta.env.VITE_APP_API_URL}`;
+
+const instance = axios.create({
+  baseURL,
+  timeout: 120000,  // Increase timeout to 120 seconds for large files
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+
+// Add request interceptor for logging
+instance.interceptors.request.use(
+  (config) => {
+    // Don't override Content-Type if it's already set (e.g., for multipart/form-data)
+    if (config.headers['Content-Type'] === 'application/json' && config.data instanceof FormData) {
+      delete config.headers['Content-Type'];
+    }
+    
+    logger.debug('axios', '🔄 Outgoing request', {
+      method: config.method,
+      url: config.url,
+      baseURL: config.baseURL
+    });
+    return config;
+  },
+  (error) => {
+    logger.error('axios', '❌ Request error', error);
+    return Promise.reject(error);
+  }
+);
+
+// Add response interceptor for logging
+instance.interceptors.response.use(
+  (response) => {
+    logger.debug('axios', '✅ Response received', {
+      status: response.status,
+      url: response.config.url
+    });
+    return response;
+  },
+  (error) => {
+    if (error.response) {
+      logger.error('axios', '❌ Response error', {
+        status: error.response.status,
+        url: error.config.url,
+        data: error.response.data
+      });
+    } else if (error.request) {
+      logger.error('axios', '❌ No response received', {
+        url: error.config.url
+      });
+    } else {
+      logger.error('axios', '❌ Request setup error', error.message);
+    }
+    return Promise.reject(error);
+  }
+);
+
+// Add type guard for Axios errors
+export const {isAxiosError} = axios;
+
+// Export the axios instance with the type guard
+export default Object.assign(instance, { isAxiosError });
\ No newline at end of file
diff --git a/src/components/navigation/GraphNavigator.tsx b/src/components/navigation/GraphNavigator.tsx
new file mode 100644
index 0000000..353a1ff
--- /dev/null
+++ b/src/components/navigation/GraphNavigator.tsx
@@ -0,0 +1,458 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { 
+    IconButton, 
+    Tooltip, 
+    Box, 
+    Menu,
+    MenuItem,
+    ListItemIcon,
+    ListItemText,
+    Button,
+    styled
+} from '@mui/material';
+import { 
+    ArrowBack as ArrowBackIcon,
+    ArrowForward as ArrowForwardIcon,
+    History as HistoryIcon,
+    School as SchoolIcon,
+    Person as PersonIcon,
+    AccountCircle as AccountCircleIcon,
+    CalendarToday as CalendarIcon,
+    School as TeachingIcon,
+    Business as BusinessIcon,
+    AccountTree as DepartmentIcon,
+    Class as ClassIcon,
+    ExpandMore as ExpandMoreIcon
+} from '@mui/icons-material';
+import { useNavigationStore } from '../../stores/navigationStore';
+import { useNeoUser } from '../../contexts/NeoUserContext';
+import { NAVIGATION_CONTEXTS } from '../../config/navigationContexts';
+import { 
+    BaseContext,
+    ViewContext
+} from '../../types/navigation';
+import { logger } from '../../debugConfig';
+
+const NavigationRoot = styled(Box)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 100%;
+  overflow: hidden;
+`;
+
+const NavigationControls = styled(Box)`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+const ContextToggleContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    backgroundColor: theme.palette.action.hover,
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(0.5),
+    gap: theme.spacing(0.5),
+    '& .button-label': {
+        '@media (max-width: 500px)': {
+            display: 'none'
+        }
+    }
+}));
+
+const ContextToggleButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== 'active'
+})<{ active?: boolean }>(({ theme, active }) => ({
+    minWidth: 0,
+    padding: theme.spacing(0.5, 1.5),
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: active ? theme.palette.primary.main : 'transparent',
+    color: active ? theme.palette.primary.contrastText : theme.palette.text.primary,
+    textTransform: 'none',
+    transition: theme.transitions.create(['background-color', 'color'], {
+        duration: theme.transitions.duration.shorter,
+    }),
+    '&:hover': {
+        backgroundColor: active ? theme.palette.primary.dark : theme.palette.action.hover,
+    },
+    '@media (max-width: 500px)': {
+        padding: theme.spacing(0.5),
+    }
+}));
+
+export const GraphNavigator: React.FC = () => {
+    const {
+        context,
+        switchContext,
+        goBack,
+        goForward,
+        isLoading
+    } = useNavigationStore();
+
+    const { userDbName, workerDbName, isInitialized: isNeoUserInitialized } = useNeoUser();
+
+    const [contextMenuAnchor, setContextMenuAnchor] = useState<null | HTMLElement>(null);
+    const [historyMenuAnchor, setHistoryMenuAnchor] = useState<null | HTMLElement>(null);
+    const rootRef = useRef<HTMLDivElement>(null);
+    const [availableWidth, setAvailableWidth] = useState<number>(0);
+
+    useEffect(() => {
+        const calculateAvailableSpace = () => {
+            if (!rootRef.current) return;
+            
+            // Get the header element
+            const header = rootRef.current.closest('.MuiToolbar-root');
+            if (!header) return;
+
+            // Get the title and menu elements
+            const title = header.querySelector('.app-title');
+            const menu = header.querySelector('.menu-button');
+            
+            if (!title || !menu) return;
+
+            // Calculate available width
+            const headerWidth = header.clientWidth;
+            const titleWidth = title.clientWidth;
+            const menuWidth = menu.clientWidth;
+            const padding = 48; // Increased buffer space
+            
+            const newAvailableWidth = headerWidth - titleWidth - menuWidth - padding;
+            console.log('Available width:', newAvailableWidth); // Debug log
+            setAvailableWidth(newAvailableWidth);
+        };
+
+        // Set up ResizeObserver
+        const resizeObserver = new ResizeObserver(() => {
+            // Use requestAnimationFrame to debounce calculations
+            window.requestAnimationFrame(calculateAvailableSpace);
+        });
+
+        // Observe both the root element and the header
+        if (rootRef.current) {
+            const header = rootRef.current.closest('.MuiToolbar-root');
+            if (header) {
+                resizeObserver.observe(header);
+                resizeObserver.observe(rootRef.current);
+            }
+        }
+
+        // Initial calculation
+        calculateAvailableSpace();
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+
+    // Helper function to determine what should be visible
+    const getVisibility = () => {
+        // Adjusted thresholds and collapse order:
+        // 1. Navigation controls (back/forward/history) collapse first
+        // 2. Toggle labels collapse second
+        // 3. Context label collapses last
+        if (availableWidth < 300) {
+            return {
+                navigation: false,
+                contextLabel: true,  // Keep context label visible longer
+                toggleLabels: false
+            };
+        } else if (availableWidth < 450) {
+            return {
+                navigation: false,
+                contextLabel: true,  // Keep context label visible
+                toggleLabels: true
+            };
+        } else if (availableWidth < 600) {
+            return {
+                navigation: true,
+                contextLabel: true,
+                toggleLabels: true
+            };
+        }
+        return {
+            navigation: true,
+            contextLabel: true,
+            toggleLabels: true
+        };
+    };
+
+    const visibility = getVisibility();
+
+    const handleHistoryClick = (event: React.MouseEvent<HTMLElement>) => {
+        setHistoryMenuAnchor(event.currentTarget);
+    };
+
+    const handleHistoryClose = () => {
+        setHistoryMenuAnchor(null);
+    };
+
+    const handleHistoryItemClick = (index: number) => {
+        const {currentIndex} = context.history;
+        const steps = index - currentIndex;
+        
+        if (steps < 0) {
+            for (let i = 0; i < -steps; i++) {
+                goBack();
+            }
+        } else if (steps > 0) {
+            for (let i = 0; i < steps; i++) {
+                goForward();
+            }
+        }
+        
+        handleHistoryClose();
+    };
+
+    const handleContextChange = useCallback(async (newContext: BaseContext) => {
+        try {
+            // Check if trying to access institute contexts without worker database
+            if (['school', 'department', 'class'].includes(newContext) && !workerDbName) {
+                logger.error('navigation', '❌ Cannot switch to institute context: missing worker database');
+                return;
+            }
+            // Check if trying to access profile contexts without user database
+            if (['profile', 'calendar', 'teaching'].includes(newContext) && !userDbName) {
+                logger.error('navigation', '❌ Cannot switch to profile context: missing user database');
+                return;
+            }
+
+            logger.debug('navigation', '🔄 Changing main context', {
+                from: context.main,
+                to: newContext,
+                userDbName,
+                workerDbName
+            });
+
+            // Get default view for new context
+            const defaultView = getDefaultViewForContext(newContext);
+            
+            // Use unified context switch with both base and extended contexts
+            await switchContext({ 
+                main: ['profile', 'calendar', 'teaching'].includes(newContext) ? 'profile' : 'institute',
+                base: newContext,
+                extended: defaultView,
+                skipBaseContextLoad: false
+            }, userDbName, workerDbName);
+
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to change context:', error);
+        }
+    }, [context.main, switchContext, userDbName, workerDbName]);
+
+    // Helper function to get default view for a context
+    const getDefaultViewForContext = (context: BaseContext): ViewContext => {
+        switch (context) {
+            case 'calendar':
+                return 'overview';
+            case 'teaching':
+                return 'overview';
+            case 'school':
+                return 'overview';
+            case 'department':
+                return 'overview';
+            case 'class':
+                return 'overview';
+            default:
+                return 'overview';
+        }
+    };
+
+    const handleContextMenu = (event: React.MouseEvent<HTMLElement>) => {
+        setContextMenuAnchor(event.currentTarget);
+    };
+
+    const handleContextSelect = useCallback(async (context: BaseContext) => {
+        setContextMenuAnchor(null);
+        try {
+            // Use unified context switch with both base and extended contexts
+            const contextDef = NAVIGATION_CONTEXTS[context];
+            const defaultExtended = contextDef?.views[0]?.id;
+            
+            await switchContext({ 
+                base: context,
+                extended: defaultExtended 
+            }, userDbName, workerDbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to select context:', error);
+        }
+    }, [switchContext, userDbName, workerDbName]);
+
+    const getContextItems = useCallback(() => {
+        if (context.main === 'profile') {
+            return [
+                { id: 'profile', label: 'Profile', icon: AccountCircleIcon },
+                { id: 'calendar', label: 'Calendar', icon: CalendarIcon },
+                { id: 'teaching', label: 'Teaching', icon: TeachingIcon },
+            ];
+        } else {
+            return [
+                { id: 'school', label: 'School', icon: BusinessIcon },
+                { id: 'department', label: 'Department', icon: DepartmentIcon },
+                { id: 'class', label: 'Class', icon: ClassIcon },
+            ];
+        }
+    }, [context.main]);
+
+    const getContextIcon = useCallback((contextType: string) => {
+        switch (contextType) {
+            case 'profile':
+                return <AccountCircleIcon />;
+            case 'calendar':
+                return <CalendarIcon />;
+            case 'teaching':
+                return <TeachingIcon />;
+            case 'school':
+                return <BusinessIcon />;
+            case 'department':
+                return <DepartmentIcon />;
+            case 'class':
+                return <ClassIcon />;
+            default:
+                return <AccountCircleIcon />;
+        }
+    }, []);
+
+    const isDisabled = !isNeoUserInitialized || isLoading;
+    const { history } = context;
+    const canGoBack = history.currentIndex > 0;
+    const canGoForward = history.currentIndex < history.nodes.length - 1;
+
+    return (
+        <NavigationRoot ref={rootRef}>
+            <NavigationControls sx={{ display: visibility.navigation ? 'flex' : 'none' }}>
+                <Tooltip title="Back">
+                    <span>
+                        <IconButton 
+                            onClick={goBack} 
+                            disabled={!canGoBack || isDisabled} 
+                            size="small"
+                        >
+                            <ArrowBackIcon fontSize="small" />
+                        </IconButton>
+                    </span>
+                </Tooltip>
+
+                <Tooltip title="History">
+                    <span>
+                        <IconButton 
+                            onClick={handleHistoryClick} 
+                            disabled={!history.nodes.length || isDisabled} 
+                            size="small"
+                        >
+                            <HistoryIcon fontSize="small" />
+                        </IconButton>
+                    </span>
+                </Tooltip>
+
+                <Tooltip title="Forward">
+                    <span>
+                        <IconButton 
+                            onClick={goForward} 
+                            disabled={!canGoForward || isDisabled} 
+                            size="small"
+                        >
+                            <ArrowForwardIcon fontSize="small" />
+                        </IconButton>
+                    </span>
+                </Tooltip>
+            </NavigationControls>
+
+            {/* History Menu */}
+            <Menu
+                anchorEl={historyMenuAnchor}
+                open={Boolean(historyMenuAnchor)}
+                onClose={handleHistoryClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'center',
+                }}
+                transformOrigin={{
+                    vertical: 'top',
+                    horizontal: 'center',
+                }}
+            >
+                {history.nodes.map((node, index) => (
+                    <MenuItem
+                        key={`${node.id}-${index}`}
+                        onClick={() => handleHistoryItemClick(index)}
+                        selected={index === history.currentIndex}
+                    >
+                        <ListItemIcon>
+                            {getContextIcon(node.type)}
+                        </ListItemIcon>
+                        <ListItemText 
+                            primary={node.label || node.id}
+                            secondary={node.type}
+                        />
+                    </MenuItem>
+                ))}
+            </Menu>
+
+            <ContextToggleContainer>
+                <ContextToggleButton
+                    active={context.main === 'profile'}
+                    onClick={() => handleContextChange('profile' as BaseContext)}
+                    startIcon={<PersonIcon />}
+                    disabled={isDisabled || !userDbName}
+                >
+                    {visibility.toggleLabels && <span className="button-label">Profile</span>}
+                </ContextToggleButton>
+                <ContextToggleButton
+                    active={context.main === 'institute'}
+                    onClick={() => handleContextChange('school' as BaseContext)}
+                    startIcon={<SchoolIcon />}
+                    disabled={isDisabled || !workerDbName}
+                >
+                    {visibility.toggleLabels && <span className="button-label">Institute</span>}
+                </ContextToggleButton>
+            </ContextToggleContainer>
+
+            <Box>
+                <Tooltip title={context.base}>
+                    <span>
+                        <Button
+                            onClick={handleContextMenu}
+                            disabled={isDisabled}
+                            sx={{
+                                minWidth: 0,
+                                p: 0.5,
+                                color: 'text.primary',
+                                '&:hover': {
+                                    bgcolor: 'action.hover'
+                                }
+                            }}
+                        >
+                            {getContextIcon(context.base)}
+                            {visibility.contextLabel && (
+                                <Box sx={{ ml: 1 }}>
+                                    {context.base}
+                                </Box>
+                            )}
+                            <ExpandMoreIcon sx={{ ml: visibility.contextLabel ? 0.5 : 0 }} />
+                        </Button>
+                    </span>
+                </Tooltip>
+            </Box>
+
+            <Menu
+                anchorEl={contextMenuAnchor}
+                open={Boolean(contextMenuAnchor)}
+                onClose={() => setContextMenuAnchor(null)}
+            >
+                {getContextItems().map(item => (
+                    <MenuItem 
+                        key={item.id} 
+                        onClick={() => handleContextSelect(item.id as BaseContext)}
+                        disabled={isDisabled}
+                    >
+                        <ListItemIcon>
+                            <item.icon />
+                        </ListItemIcon>
+                        <ListItemText primary={item.label} />
+                    </MenuItem>
+                ))}
+            </Menu>
+        </NavigationRoot>
+    );
+}; 
\ No newline at end of file
diff --git a/src/components/navigation/extended/CalendarNavigation.tsx b/src/components/navigation/extended/CalendarNavigation.tsx
new file mode 100644
index 0000000..4c54960
--- /dev/null
+++ b/src/components/navigation/extended/CalendarNavigation.tsx
@@ -0,0 +1,371 @@
+import React, { useMemo } from 'react';
+import { Box, IconButton, Button, Typography, styled, ThemeProvider, createTheme, useMediaQuery } from '@mui/material';
+import {
+    NavigateBefore as NavigateBeforeIcon,
+    NavigateNext as NavigateNextIcon,
+    Today as TodayIcon,
+    ViewWeek as ViewWeekIcon,
+    DateRange as DateRangeIcon,
+    Event as EventIcon
+} from '@mui/icons-material';
+import { useNeoUser } from '../../../contexts/NeoUserContext';
+import { CalendarExtendedContext } from '../../../types/navigation';
+import { logger } from '../../../debugConfig';
+import { useTLDraw } from '../../../contexts/TLDrawContext';
+
+const NavigationContainer = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '0 8px',
+    minHeight: '48px',
+    width: '100%',
+    overflow: 'hidden',
+    '@media (max-width: 600px)': {
+        flexWrap: 'wrap',
+        padding: '4px',
+        gap: '4px',
+    },
+}));
+
+const ViewControls = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '4px',
+    flexShrink: 0,
+}));
+
+const NavigationSection = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '4px',
+    flex: 1,
+    minWidth: 0, // Allows the container to shrink below its content size
+    '@media (max-width: 600px)': {
+        order: -1,
+        flex: '1 1 100%',
+        justifyContent: 'space-between',
+    },
+}));
+
+const TitleTypography = styled(Typography)(() => ({
+    color: 'var(--color-text)',
+    fontWeight: 500,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    margin: '0 8px',
+}));
+
+const ActionButtonContainer = styled(Box)(() => ({
+    flexShrink: 0,
+    '@media (max-width: 600px)': {
+        width: 'auto',
+    },
+}));
+
+const StyledIconButton = styled(IconButton)(() => ({
+    color: 'var(--color-text)',
+    transition: 'background-color 200ms ease, color 200ms ease, transform 200ms ease',
+    '&:hover': {
+        backgroundColor: 'var(--color-hover)',
+        transform: 'scale(1.05)',
+    },
+    '&.Mui-disabled': {
+        color: 'var(--color-text-disabled)',
+    },
+    '&.active': {
+        color: 'var(--color-selected)',
+        backgroundColor: 'var(--color-selected-background)',
+        '&:hover': {
+            backgroundColor: 'var(--color-selected-hover)',
+            transform: 'scale(1.05)',
+        }
+    },
+    '& .MuiSvgIcon-root': {
+        fontSize: '1.25rem',
+        transition: 'transform 150ms ease',
+    },
+}));
+
+const ActionButton = styled(Button)(() => ({
+    textTransform: 'none',
+    padding: '6px 16px',
+    gap: '8px',
+    color: 'var(--color-text)',
+    transition: 'background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease',
+    '&:hover': {
+        backgroundColor: 'var(--color-hover)',
+        transform: 'translateY(-1px)',
+    },
+    '&:active': {
+        transform: 'translateY(0)',
+    },
+    '&.Mui-disabled': {
+        color: 'var(--color-text-disabled)',
+    },
+    '& .MuiSvgIcon-root': {
+        fontSize: '1.25rem',
+        color: 'inherit',
+        transition: 'transform 150ms ease',
+    },
+}));
+
+interface Props {
+    activeView: CalendarExtendedContext;
+    onViewChange: (view: CalendarExtendedContext) => void;
+}
+
+export const CalendarNavigation: React.FC<Props> = ({ activeView, onViewChange }) => {
+    const { tldrawPreferences } = useTLDraw();
+    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    
+    // Create a dynamic theme based on TLDraw preferences
+    const theme = useMemo(() => {
+        let mode: 'light' | 'dark';
+        
+        // Determine mode based on TLDraw preferences
+        if (tldrawPreferences?.colorScheme === 'system') {
+            mode = prefersDarkMode ? 'dark' : 'light';
+        } else {
+            mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
+        }
+
+        return createTheme({
+            palette: {
+                mode,
+                divider: 'var(--color-divider)',
+            },
+        });
+    }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
+
+    const { 
+        navigateToDay,
+        navigateToWeek,
+        navigateToMonth,
+        navigateToYear,
+        currentCalendarNode,
+        calendarStructure
+    } = useNeoUser();
+
+    const handlePrevious = async () => {
+        if (!currentCalendarNode || !calendarStructure) return;
+
+        try {
+            switch (activeView) {
+                case 'day': {
+                    // Find current day and get previous
+                    const days = Object.values(calendarStructure.days);
+                    const currentIndex = days.findIndex(d => d.id === currentCalendarNode.id);
+                    if (currentIndex > 0) {
+                        await navigateToDay(days[currentIndex - 1].id);
+                    }
+                    break;
+                }
+                case 'week': {
+                    // Find current week and get previous
+                    const weeks = Object.values(calendarStructure.weeks);
+                    const currentIndex = weeks.findIndex(w => w.id === currentCalendarNode.id);
+                    if (currentIndex > 0) {
+                        await navigateToWeek(weeks[currentIndex - 1].id);
+                    }
+                    break;
+                }
+                case 'month': {
+                    // Find current month and get previous
+                    const months = Object.values(calendarStructure.months);
+                    const currentIndex = months.findIndex(m => m.id === currentCalendarNode.id);
+                    if (currentIndex > 0) {
+                        await navigateToMonth(months[currentIndex - 1].id);
+                    }
+                    break;
+                }
+                case 'year': {
+                    // Find current year and get previous
+                    const years = calendarStructure.years;
+                    const currentIndex = years.findIndex(y => y.id === currentCalendarNode.id);
+                    if (currentIndex > 0) {
+                        await navigateToYear(years[currentIndex - 1].id);
+                    }
+                    break;
+                }
+            }
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to navigate to previous:', error);
+        }
+    };
+
+    const handleNext = async () => {
+        if (!currentCalendarNode || !calendarStructure) return;
+
+        try {
+            switch (activeView) {
+                case 'day': {
+                    // Find current day and get next
+                    const days = Object.values(calendarStructure.days);
+                    const currentIndex = days.findIndex(d => d.id === currentCalendarNode.id);
+                    if (currentIndex < days.length - 1) {
+                        await navigateToDay(days[currentIndex + 1].id);
+                    }
+                    break;
+                }
+                case 'week': {
+                    // Find current week and get next
+                    const weeks = Object.values(calendarStructure.weeks);
+                    const currentIndex = weeks.findIndex(w => w.id === currentCalendarNode.id);
+                    if (currentIndex < weeks.length - 1) {
+                        await navigateToWeek(weeks[currentIndex + 1].id);
+                    }
+                    break;
+                }
+                case 'month': {
+                    // Find current month and get next
+                    const months = Object.values(calendarStructure.months);
+                    const currentIndex = months.findIndex(m => m.id === currentCalendarNode.id);
+                    if (currentIndex < months.length - 1) {
+                        await navigateToMonth(months[currentIndex + 1].id);
+                    }
+                    break;
+                }
+                case 'year': {
+                    // Find current year and get next
+                    const years = calendarStructure.years;
+                    const currentIndex = years.findIndex(y => y.id === currentCalendarNode.id);
+                    if (currentIndex < years.length - 1) {
+                        await navigateToYear(years[currentIndex + 1].id);
+                    }
+                    break;
+                }
+            }
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to navigate to next:', error);
+        }
+    };
+
+    const handleToday = async () => {
+        if (!calendarStructure) return;
+
+        try {
+            // Navigate to current day based on active view
+            switch (activeView) {
+                case 'day':
+                    await navigateToDay(calendarStructure.currentDay);
+                    break;
+                case 'week': {
+                    const currentDay = calendarStructure.days[calendarStructure.currentDay];
+                    if (currentDay) {
+                        const week = Object.values(calendarStructure.weeks)
+                            .find(w => w.days.includes(currentDay));
+                        if (week) {
+                            await navigateToWeek(week.id);
+                        }
+                    }
+                    break;
+                }
+                case 'month': {
+                    const currentDay = calendarStructure.days[calendarStructure.currentDay];
+                    if (currentDay) {
+                        const month = Object.values(calendarStructure.months)
+                            .find(m => m.days.includes(currentDay));
+                        if (month) {
+                            await navigateToMonth(month.id);
+                        }
+                    }
+                    break;
+                }
+                case 'year': {
+                    const currentDay = calendarStructure.days[calendarStructure.currentDay];
+                    if (currentDay) {
+                        const month = Object.values(calendarStructure.months)
+                            .find(m => m.days.includes(currentDay));
+                        if (month) {
+                            const year = calendarStructure.years
+                                .find(y => y.months.includes(month));
+                            if (year) {
+                                await navigateToYear(year.id);
+                            }
+                        }
+                    }
+                    break;
+                }
+            }
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to navigate to today:', error);
+        }
+    };
+
+    return (
+        <ThemeProvider theme={theme}>
+            <NavigationContainer>
+                <NavigationSection>
+                    <StyledIconButton 
+                        size="small" 
+                        onClick={handlePrevious}
+                        disabled={!currentCalendarNode || !calendarStructure}
+                    >
+                        <NavigateBeforeIcon />
+                    </StyledIconButton>
+
+                    {currentCalendarNode && (
+                        <TitleTypography 
+                            variant="subtitle2"
+                        >
+                            {currentCalendarNode.title}
+                        </TitleTypography>
+                    )}
+
+                    <StyledIconButton 
+                        size="small" 
+                        onClick={handleNext}
+                        disabled={!currentCalendarNode || !calendarStructure}
+                    >
+                        <NavigateNextIcon />
+                    </StyledIconButton>
+                </NavigationSection>
+
+                <ViewControls>
+                    <StyledIconButton 
+                        size="small" 
+                        onClick={() => onViewChange('day')}
+                        className={activeView === 'day' ? 'active' : ''}
+                    >
+                        <TodayIcon />
+                    </StyledIconButton>
+                    <StyledIconButton 
+                        size="small" 
+                        onClick={() => onViewChange('week')}
+                        className={activeView === 'week' ? 'active' : ''}
+                    >
+                        <ViewWeekIcon />
+                    </StyledIconButton>
+                    <StyledIconButton 
+                        size="small" 
+                        onClick={() => onViewChange('month')}
+                        className={activeView === 'month' ? 'active' : ''}
+                    >
+                        <DateRangeIcon />
+                    </StyledIconButton>
+                    <StyledIconButton 
+                        size="small" 
+                        onClick={() => onViewChange('year')}
+                        className={activeView === 'year' ? 'active' : ''}
+                    >
+                        <EventIcon />
+                    </StyledIconButton>
+                </ViewControls>
+
+                <ActionButtonContainer>
+                    <ActionButton 
+                        size="small" 
+                        startIcon={<TodayIcon />}
+                        onClick={handleToday}
+                        disabled={!calendarStructure}
+                    >
+                        Today
+                    </ActionButton>
+                </ActionButtonContainer>
+            </NavigationContainer>
+        </ThemeProvider>
+    );
+}; 
\ No newline at end of file
diff --git a/src/components/navigation/extended/TeacherNavigation.tsx b/src/components/navigation/extended/TeacherNavigation.tsx
new file mode 100644
index 0000000..6986def
--- /dev/null
+++ b/src/components/navigation/extended/TeacherNavigation.tsx
@@ -0,0 +1,361 @@
+import React from 'react';
+import { Box, IconButton, Typography, styled, Tabs, Tab } from '@mui/material';
+import {
+    Schedule as ScheduleIcon,
+    Book as JournalIcon,
+    EventNote as PlannerIcon,
+    Class as ClassIcon,
+    MenuBook as LessonIcon,
+    NavigateBefore as NavigateBeforeIcon,
+    NavigateNext as NavigateNextIcon,
+    Dashboard as DashboardIcon
+} from '@mui/icons-material';
+import { useNeoUser } from '../../../contexts/NeoUserContext';
+import { TeacherExtendedContext } from '../../../types/navigation';
+import { logger } from '../../../debugConfig';
+import { useTLDraw } from '../../../contexts/TLDrawContext';
+
+const NavigationContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+    padding: theme.spacing(0, 2),
+}));
+
+const ViewControls = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+}));
+
+const StyledIconButton = styled(IconButton, {
+    shouldForwardProp: prop => prop !== 'isDarkMode'
+})<{ isDarkMode?: boolean }>(({ theme, isDarkMode }) => ({
+    color: isDarkMode ? theme.palette.text.primary : theme.palette.text.secondary,
+    transition: theme.transitions.create(['background-color', 'color', 'transform'], {
+        duration: theme.transitions.duration.shorter,
+    }),
+    '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+        transform: 'scale(1.05)',
+    },
+    '&.Mui-disabled': {
+        color: theme.palette.action.disabled,
+    },
+    '& .MuiSvgIcon-root': {
+        fontSize: '1.25rem',
+        transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shortest,
+        }),
+    },
+}));
+
+const StyledTabs = styled(Tabs, {
+    shouldForwardProp: prop => prop !== 'isDarkMode'
+})<{ isDarkMode?: boolean }>(({ theme, isDarkMode }) => ({
+    minHeight: 'unset',
+    '& .MuiTab-root': {
+        minHeight: 'unset',
+        padding: theme.spacing(1),
+        textTransform: 'none',
+        fontSize: '0.875rem',
+        color: isDarkMode ? theme.palette.text.primary : theme.palette.text.secondary,
+        transition: theme.transitions.create(['color', 'background-color', 'box-shadow'], {
+            duration: theme.transitions.duration.shorter,
+        }),
+        '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+            color: theme.palette.primary.main,
+        },
+        '&.Mui-selected': {
+            color: theme.palette.primary.main,
+            '&:hover': {
+                backgroundColor: theme.palette.action.selected,
+            },
+        },
+        '& .MuiSvgIcon-root': {
+            fontSize: '1.25rem',
+            marginBottom: theme.spacing(0.5),
+            transition: theme.transitions.create('transform', {
+                duration: theme.transitions.duration.shortest,
+            }),
+        },
+        '&:hover .MuiSvgIcon-root': {
+            transform: 'scale(1.1)',
+        },
+    },
+    '& .MuiTabs-indicator': {
+        transition: theme.transitions.create(['width', 'left'], {
+            duration: theme.transitions.duration.standard,
+            easing: theme.transitions.easing.easeInOut,
+        }),
+    },
+}));
+
+interface Props {
+    activeView: TeacherExtendedContext;
+    onViewChange: (view: TeacherExtendedContext) => void;
+}
+
+export const TeacherNavigation: React.FC<Props> = ({ activeView, onViewChange }) => {
+    const { tldrawPreferences } = useTLDraw();
+    const isDarkMode = tldrawPreferences?.colorScheme === 'dark';
+    const { 
+        navigateToTimetable,
+        navigateToClass,
+        navigateToLesson,
+        navigateToJournal,
+        navigateToPlanner,
+        currentWorkerNode,
+        workerStructure
+    } = useNeoUser();
+
+    const handlePrevious = async () => {
+        if (!currentWorkerNode || !workerStructure) return;
+
+        try {
+            switch (activeView) {
+                case 'overview': {
+                    // Overview doesn't have navigation
+                    break;
+                }
+                case 'timetable': {
+                    // Find current timetable and get previous
+                    const deptId = Object.keys(workerStructure.timetables).find(
+                        deptId => workerStructure.timetables[deptId].some(t => t.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const timetables = workerStructure.timetables[deptId];
+                        const currentIndex = timetables.findIndex(t => t.id === currentWorkerNode.id);
+                        if (currentIndex > 0) {
+                            await navigateToTimetable(timetables[currentIndex - 1].id);
+                        }
+                    }
+                    break;
+                }
+                case 'classes': {
+                    // Find current class and get previous
+                    const deptId = Object.keys(workerStructure.classes).find(
+                        deptId => workerStructure.classes[deptId].some(c => c.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const classes = workerStructure.classes[deptId];
+                        const currentIndex = classes.findIndex(c => c.id === currentWorkerNode.id);
+                        if (currentIndex > 0) {
+                            await navigateToClass(classes[currentIndex - 1].id);
+                        }
+                    }
+                    break;
+                }
+                case 'lessons': {
+                    // Find current lesson and get previous
+                    const deptId = Object.keys(workerStructure.lessons).find(
+                        deptId => workerStructure.lessons[deptId].some(l => l.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const lessons = workerStructure.lessons[deptId];
+                        const currentIndex = lessons.findIndex(l => l.id === currentWorkerNode.id);
+                        if (currentIndex > 0) {
+                            await navigateToLesson(lessons[currentIndex - 1].id);
+                        }
+                    }
+                    break;
+                }
+                case 'journal': {
+                    // Find current journal and get previous
+                    const deptId = Object.keys(workerStructure.journals).find(
+                        deptId => workerStructure.journals[deptId].some(j => j.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const journals = workerStructure.journals[deptId];
+                        const currentIndex = journals.findIndex(j => j.id === currentWorkerNode.id);
+                        if (currentIndex > 0) {
+                            await navigateToJournal(journals[currentIndex - 1].id);
+                        }
+                    }
+                    break;
+                }
+                case 'planner': {
+                    // Find current planner and get previous
+                    const deptId = Object.keys(workerStructure.planners).find(
+                        deptId => workerStructure.planners[deptId].some(p => p.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const planners = workerStructure.planners[deptId];
+                        const currentIndex = planners.findIndex(p => p.id === currentWorkerNode.id);
+                        if (currentIndex > 0) {
+                            await navigateToPlanner(planners[currentIndex - 1].id);
+                        }
+                    }
+                    break;
+                }
+            }
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to navigate to previous:', error);
+        }
+    };
+
+    const handleNext = async () => {
+        if (!currentWorkerNode || !workerStructure) return;
+
+        try {
+            switch (activeView) {
+                case 'overview': {
+                    // Overview doesn't have navigation
+                    break;
+                }
+                case 'timetable': {
+                    // Find current timetable and get next
+                    const deptId = Object.keys(workerStructure.timetables).find(
+                        deptId => workerStructure.timetables[deptId].some(t => t.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const timetables = workerStructure.timetables[deptId];
+                        const currentIndex = timetables.findIndex(t => t.id === currentWorkerNode.id);
+                        if (currentIndex < timetables.length - 1) {
+                            await navigateToTimetable(timetables[currentIndex + 1].id);
+                        }
+                    }
+                    break;
+                }
+                case 'classes': {
+                    // Find current class and get next
+                    const deptId = Object.keys(workerStructure.classes).find(
+                        deptId => workerStructure.classes[deptId].some(c => c.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const classes = workerStructure.classes[deptId];
+                        const currentIndex = classes.findIndex(c => c.id === currentWorkerNode.id);
+                        if (currentIndex < classes.length - 1) {
+                            await navigateToClass(classes[currentIndex + 1].id);
+                        }
+                    }
+                    break;
+                }
+                case 'lessons': {
+                    // Find current lesson and get next
+                    const deptId = Object.keys(workerStructure.lessons).find(
+                        deptId => workerStructure.lessons[deptId].some(l => l.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const lessons = workerStructure.lessons[deptId];
+                        const currentIndex = lessons.findIndex(l => l.id === currentWorkerNode.id);
+                        if (currentIndex < lessons.length - 1) {
+                            await navigateToLesson(lessons[currentIndex + 1].id);
+                        }
+                    }
+                    break;
+                }
+                case 'journal': {
+                    // Find current journal and get next
+                    const deptId = Object.keys(workerStructure.journals).find(
+                        deptId => workerStructure.journals[deptId].some(j => j.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const journals = workerStructure.journals[deptId];
+                        const currentIndex = journals.findIndex(j => j.id === currentWorkerNode.id);
+                        if (currentIndex < journals.length - 1) {
+                            await navigateToJournal(journals[currentIndex + 1].id);
+                        }
+                    }
+                    break;
+                }
+                case 'planner': {
+                    // Find current planner and get next
+                    const deptId = Object.keys(workerStructure.planners).find(
+                        deptId => workerStructure.planners[deptId].some(p => p.id === currentWorkerNode.id)
+                    );
+                    if (deptId) {
+                        const planners = workerStructure.planners[deptId];
+                        const currentIndex = planners.findIndex(p => p.id === currentWorkerNode.id);
+                        if (currentIndex < planners.length - 1) {
+                            await navigateToPlanner(planners[currentIndex + 1].id);
+                        }
+                    }
+                    break;
+                }
+            }
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to navigate to next:', error);
+        }
+    };
+
+    return (
+        <NavigationContainer>
+            <StyledTabs 
+                value={activeView} 
+                onChange={(_, value) => onViewChange(value as TeacherExtendedContext)}
+                variant="scrollable"
+                scrollButtons="auto"
+                isDarkMode={isDarkMode}
+            >
+                <Tab 
+                    value="overview"
+                    icon={<DashboardIcon />}
+                    label="Overview"
+                />
+                <Tab 
+                    value="timetable"
+                    icon={<ScheduleIcon />}
+                    label="Timetable"
+                />
+                <Tab 
+                    value="classes"
+                    icon={<ClassIcon />}
+                    label="Classes"
+                />
+                <Tab 
+                    value="lessons"
+                    icon={<LessonIcon />}
+                    label="Lessons"
+                />
+                <Tab 
+                    value="journal"
+                    icon={<JournalIcon />}
+                    label="Journal"
+                />
+                <Tab 
+                    value="planner"
+                    icon={<PlannerIcon />}
+                    label="Planner"
+                />
+            </StyledTabs>
+
+            <Box sx={{ flex: 1 }} />
+
+            <ViewControls>
+                <StyledIconButton 
+                    size="small" 
+                    onClick={handlePrevious}
+                    disabled={!currentWorkerNode || !workerStructure}
+                    isDarkMode={isDarkMode}
+                >
+                    <NavigateBeforeIcon />
+                </StyledIconButton>
+
+                {currentWorkerNode && (
+                    <Typography 
+                        variant="subtitle2" 
+                        component="span" 
+                        sx={{ 
+                            mx: 2,
+                            color: 'text.primary',
+                            fontWeight: 500
+                        }}
+                    >
+                        {currentWorkerNode.title}
+                    </Typography>
+                )}
+
+                <StyledIconButton 
+                    size="small" 
+                    onClick={handleNext}
+                    disabled={!currentWorkerNode || !workerStructure}
+                    isDarkMode={isDarkMode}
+                >
+                    <NavigateNextIcon />
+                </StyledIconButton>
+            </ViewControls>
+        </NavigationContainer>
+    );
+}; 
\ No newline at end of file
diff --git a/src/components/navigation/extended/UserNavigation.tsx b/src/components/navigation/extended/UserNavigation.tsx
new file mode 100644
index 0000000..f4b6546
--- /dev/null
+++ b/src/components/navigation/extended/UserNavigation.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Box, Typography, styled, Tabs, Tab } from '@mui/material';
+import {
+    AccountCircle as ProfileIcon,
+    Book as JournalIcon,
+    EventNote as PlannerIcon
+} from '@mui/icons-material';
+import { useNeoUser } from '../../../contexts/NeoUserContext';
+import { UserExtendedContext } from '../../../types/navigation';
+
+const NavigationContainer = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 16px;
+`;
+
+interface Props {
+    activeView: UserExtendedContext;
+    onViewChange: (view: UserExtendedContext) => void;
+}
+
+export const UserNavigation: React.FC<Props> = ({ activeView, onViewChange }) => {
+    const { currentWorkerNode } = useNeoUser();
+
+    return (
+        <NavigationContainer>
+            <Tabs 
+                value={activeView} 
+                onChange={(_, value) => onViewChange(value as UserExtendedContext)}
+                variant="scrollable"
+                scrollButtons="auto"
+            >
+                <Tab 
+                    value="profile"
+                    icon={<ProfileIcon />}
+                    label="Profile"
+                />
+                <Tab 
+                    value="journal"
+                    icon={<JournalIcon />}
+                    label="Journal"
+                />
+                <Tab 
+                    value="planner"
+                    icon={<PlannerIcon />}
+                    label="Planner"
+                />
+            </Tabs>
+
+            <Box sx={{ flex: 1 }} />
+
+            {currentWorkerNode && (
+                <Typography variant="subtitle2" sx={{ px: 2 }}>
+                    {currentWorkerNode.label}
+                </Typography>
+            )}
+        </NavigationContainer>
+    );
+}; 
\ No newline at end of file
diff --git a/src/components/navigation/extended/index.ts b/src/components/navigation/extended/index.ts
new file mode 100644
index 0000000..4a49214
--- /dev/null
+++ b/src/components/navigation/extended/index.ts
@@ -0,0 +1,3 @@
+export { CalendarNavigation } from './CalendarNavigation';
+export { TeacherNavigation } from './TeacherNavigation';
+export { UserNavigation } from './UserNavigation'; 
\ No newline at end of file
diff --git a/src/config/navigationContexts.ts b/src/config/navigationContexts.ts
new file mode 100644
index 0000000..7193023
--- /dev/null
+++ b/src/config/navigationContexts.ts
@@ -0,0 +1,211 @@
+import { ContextDefinition } from '../types/navigation';
+
+export const NAVIGATION_CONTEXTS: Record<string, ContextDefinition> = {
+  // Personal Contexts
+  profile: {
+    id: 'profile',
+    icon: 'Person',
+    label: 'User Profile',
+    description: 'Personal workspace and settings',
+    defaultNodeId: 'user-root',
+    views: [
+      {
+        id: 'overview',
+        icon: 'Dashboard',
+        label: 'Overview',
+        description: 'View your profile overview'
+      },
+      {
+        id: 'settings',
+        icon: 'Settings',
+        label: 'Settings',
+        description: 'Manage your preferences'
+      },
+      {
+        id: 'history',
+        icon: 'History',
+        label: 'History',
+        description: 'View your activity history'
+      },
+      {
+        id: 'journal',
+        icon: 'Book',
+        label: 'Journal',
+        description: 'Your personal journal'
+      },
+      {
+        id: 'planner',
+        icon: 'Event',
+        label: 'Planner',
+        description: 'Plan your activities'
+      }
+    ]
+  },
+  calendar: {
+    id: 'calendar',
+    icon: 'CalendarToday',
+    label: 'Calendar',
+    description: 'Calendar navigation and events',
+    defaultNodeId: 'calendar-root',
+    views: [
+      {
+        id: 'overview',
+        icon: 'Dashboard',
+        label: 'Overview',
+        description: 'Calendar overview'
+      },
+      {
+        id: 'day',
+        icon: 'Today',
+        label: 'Day View',
+        description: 'Navigate by day'
+      },
+      {
+        id: 'week',
+        icon: 'ViewWeek',
+        label: 'Week View',
+        description: 'Navigate by week'
+      },
+      {
+        id: 'month',
+        icon: 'DateRange',
+        label: 'Month View',
+        description: 'Navigate by month'
+      },
+      {
+        id: 'year',
+        icon: 'Event',
+        label: 'Year View',
+        description: 'Navigate by year'
+      }
+    ]
+  },
+  teaching: {
+    id: 'teaching',
+    icon: 'School',
+    label: 'Teaching',
+    description: 'Teaching workspace',
+    defaultNodeId: 'teacher-root',
+    views: [
+      {
+        id: 'overview',
+        icon: 'Dashboard',
+        label: 'Overview',
+        description: 'Teaching overview'
+      },
+      {
+        id: 'timetable',
+        icon: 'Schedule',
+        label: 'Timetable',
+        description: 'View your teaching schedule'
+      },
+      {
+        id: 'classes',
+        icon: 'Class',
+        label: 'Classes',
+        description: 'Manage your classes'
+      },
+      {
+        id: 'lessons',
+        icon: 'Book',
+        label: 'Lessons',
+        description: 'Plan and view lessons'
+      },
+      {
+        id: 'journal',
+        icon: 'Book',
+        label: 'Journal',
+        description: 'Your teaching journal'
+      },
+      {
+        id: 'planner',
+        icon: 'Event',
+        label: 'Planner',
+        description: 'Plan your teaching activities'
+      }
+    ]
+  },
+
+  // Institutional Contexts
+  school: {
+    id: 'school',
+    icon: 'Business',
+    label: 'School',
+    description: 'School management',
+    defaultNodeId: 'school-root',
+    views: [
+      {
+        id: 'overview',
+        icon: 'Dashboard',
+        label: 'Overview',
+        description: 'School overview'
+      },
+      {
+        id: 'departments',
+        icon: 'AccountTree',
+        label: 'Departments',
+        description: 'View departments'
+      },
+      {
+        id: 'staff',
+        icon: 'People',
+        label: 'Staff',
+        description: 'Staff directory'
+      }
+    ]
+  },
+  department: {
+    id: 'department',
+    icon: 'AccountTree',
+    label: 'Department',
+    description: 'Department management',
+    defaultNodeId: 'department-root',
+    views: [
+      {
+        id: 'overview',
+        icon: 'Dashboard',
+        label: 'Overview',
+        description: 'Department overview'
+      },
+      {
+        id: 'teachers',
+        icon: 'People',
+        label: 'Teachers',
+        description: 'Department teachers'
+      },
+      {
+        id: 'subjects',
+        icon: 'Subject',
+        label: 'Subjects',
+        description: 'Department subjects'
+      }
+    ]
+  },
+  class: {
+    id: 'class',
+    icon: 'Class',
+    label: 'Class',
+    description: 'Class management',
+    defaultNodeId: 'class-root',
+    views: [
+      {
+        id: 'overview',
+        icon: 'Dashboard',
+        label: 'Overview',
+        description: 'Class overview'
+      },
+      {
+        id: 'students',
+        icon: 'People',
+        label: 'Students',
+        description: 'Class students'
+      },
+      {
+        id: 'timetable',
+        icon: 'Schedule',
+        label: 'Timetable',
+        description: 'Class schedule'
+      }
+    ]
+  }
+}; 
\ No newline at end of file
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
new file mode 100644
index 0000000..cb041e9
--- /dev/null
+++ b/src/contexts/AuthContext.tsx
@@ -0,0 +1,157 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { CCUser, CCUserMetadata, authService } from '../services/auth/authService';
+import { logger } from '../debugConfig';
+import { supabase } from '../supabaseClient';
+
+export interface AuthContextType {
+  user: CCUser | null;
+  user_role: string | null;
+  loading: boolean;
+  error: Error | null;
+  signIn: (email: string, password: string) => Promise<void>;
+  signOut: () => Promise<void>;
+  clearError: () => void;
+}
+
+export const AuthContext = createContext<AuthContextType>({
+  user: null,
+  user_role: null,
+  loading: true,
+  error: null,
+  signIn: async () => {},
+  signOut: async () => {},
+  clearError: () => {}
+});
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const navigate = useNavigate();
+  const [user, setUser] = useState<CCUser | null>(null);
+  const [user_role, setUserRole] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const loadUser = async () => {
+      try {
+        const { data: { user } } = await supabase.auth.getUser();
+        
+        if (user) {
+          const metadata = user.user_metadata as CCUserMetadata;
+          setUser({
+            id: user.id,
+            email: user.email,
+            user_type: metadata.user_type || '',
+            username: metadata.username || '',
+            display_name: metadata.display_name || '',
+            user_db_name: `cc.users.${metadata.user_type}.${metadata.username}`,
+            school_db_name: 'cc.institutes.development.default',
+            created_at: user.created_at,
+            updated_at: user.updated_at
+          });
+          setUserRole(metadata.user_role || null);
+        } else {
+          setUser(null);
+        }
+      } catch (error) {
+        logger.error('auth-context', '❌ Failed to load user', { error });
+        setError(error instanceof Error ? error : new Error('Failed to load user'));
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadUser();
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(async (event, session) => {
+      if (event === 'SIGNED_IN' && session?.user) {
+        const metadata = session.user.user_metadata as CCUserMetadata;
+        setUser({
+          id: session.user.id,
+          email: session.user.email,
+          user_type: metadata.user_type || '',
+          username: metadata.username || '',
+          display_name: metadata.display_name || '',
+          user_db_name: `cc.users.${metadata.user_type}.${metadata.username}`,
+          school_db_name: 'cc.institutes.development.default',
+          created_at: session.user.created_at,
+          updated_at: session.user.updated_at
+        });
+      } else if (event === 'SIGNED_OUT') {
+        setUser(null);
+      }
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  const signIn = async (email: string, password: string) => {
+    try {
+      setLoading(true);
+      const { data, error: signInError } = await supabase.auth.signInWithPassword({
+        email,
+        password
+      });
+
+      if (signInError) throw signInError;
+
+      if (data.user) {
+        const metadata = data.user.user_metadata as CCUserMetadata;
+        setUser({
+          id: data.user.id,
+          email: data.user.email,
+          user_type: metadata.user_type || '',
+          username: metadata.username || '',
+          display_name: metadata.display_name || '',
+          user_db_name: `cc.users.${metadata.user_type}.${metadata.username}`,
+          school_db_name: 'cc.institutes.development.default',
+          created_at: data.user.created_at,
+          updated_at: data.user.updated_at
+        });
+      }
+    } catch (error) {
+      logger.error('auth-context', '❌ Sign in failed', { error });
+      setError(error instanceof Error ? error : new Error('Sign in failed'));
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const signOut = async () => {
+    try {
+      setLoading(true);
+      await authService.logout();
+      setUser(null);
+      navigate('/');
+    } catch (error) {
+      logger.error('auth-context', '❌ Sign out failed', { error });
+      setError(error instanceof Error ? error : new Error('Sign out failed'));
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearError = () => setError(null);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        user_role,
+        loading,
+        error,
+        signIn,
+        signOut,
+        clearError
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext);
diff --git a/src/contexts/NeoInstituteContext.tsx b/src/contexts/NeoInstituteContext.tsx
new file mode 100644
index 0000000..560df47
--- /dev/null
+++ b/src/contexts/NeoInstituteContext.tsx
@@ -0,0 +1,92 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { useAuth } from './AuthContext';
+import { useUser } from './UserContext';
+import { SchoolNeoDBService } from '../services/graph/schoolNeoDBService';
+import { CCSchoolNodeProps } from '../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { logger } from '../debugConfig';
+
+export interface NeoInstituteContextType {
+    schoolNode: CCSchoolNodeProps | null;
+    isLoading: boolean;
+    isInitialized: boolean;
+    error: string | null;
+}
+
+const NeoInstituteContext = createContext<NeoInstituteContextType>({
+    schoolNode: null,
+    isLoading: true,
+    isInitialized: false,
+    error: null
+});
+
+export const NeoInstituteProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+    const { user } = useAuth();
+    const { profile, isInitialized: isUserInitialized } = useUser();
+    
+    const [schoolNode, setSchoolNode] = useState<CCSchoolNodeProps | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        // Wait for user profile to be ready
+        if (!isUserInitialized) {
+            logger.debug('neo-institute-context', '⏳ Waiting for user initialization...');
+            return;
+        }
+
+        // If no profile or no worker database, mark as initialized with no data
+        if (!profile || !profile.school_db_name) {
+            setIsLoading(false);
+            setIsInitialized(true);
+            return;
+        }
+
+        const loadSchoolNode = async () => {
+            try {
+                setIsLoading(true);
+                logger.debug('neo-institute-context', '🔄 Loading school node', {
+                    schoolDbName: profile.school_db_name,
+                    userEmail: user?.email
+                });
+
+                const node = await SchoolNeoDBService.getSchoolNode(profile.school_db_name);
+                if (node) {
+                    setSchoolNode(node);
+                    logger.debug('neo-institute-context', '✅ School node loaded', {
+                        schoolId: node.unique_id,
+                        dbName: profile.school_db_name
+                    });
+                } else {
+                    logger.warn('neo-institute-context', '⚠️ No school node found');
+                }
+
+            } catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to load school node';
+                logger.error('neo-institute-context', '❌ Failed to load school node', {
+                    error: errorMessage,
+                    schoolDbName: profile.school_db_name
+                });
+                setError(errorMessage);
+            } finally {
+                setIsLoading(false);
+                setIsInitialized(true);
+            }
+        };
+
+        loadSchoolNode();
+    }, [user?.email, profile, isUserInitialized]);
+
+    return (
+        <NeoInstituteContext.Provider value={{
+            schoolNode,
+            isLoading,
+            isInitialized,
+            error
+        }}>
+            {children}
+        </NeoInstituteContext.Provider>
+    );
+};
+
+export const useNeoInstitute = () => useContext(NeoInstituteContext);
diff --git a/src/contexts/NeoUserContext.tsx b/src/contexts/NeoUserContext.tsx
new file mode 100644
index 0000000..6751948
--- /dev/null
+++ b/src/contexts/NeoUserContext.tsx
@@ -0,0 +1,624 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { useAuth } from './AuthContext';
+import { useUser } from './UserContext';
+import { logger } from '../debugConfig';
+import { CCUserNodeProps, CCCalendarNodeProps, CCUserTeacherTimetableNodeProps } from '../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { CalendarStructure, WorkerStructure } from '../types/navigation';
+import { useNavigationStore } from '../stores/navigationStore';
+
+// Core Node Types
+export interface CalendarNode {
+  id: string;
+  label: string;
+  title: string;
+  tldraw_snapshot: string;
+  type?: CCCalendarNodeProps['__primarylabel__'];
+  nodeData?: CCCalendarNodeProps;
+}
+
+export interface WorkerNode {
+  id: string;
+  label: string;
+  title: string;
+  tldraw_snapshot: string;
+  type?: CCUserTeacherTimetableNodeProps['__primarylabel__'];
+  nodeData?: CCUserTeacherTimetableNodeProps;
+}
+
+// Calendar Structure Types
+export interface CalendarDay {
+  id: string;
+  date: string;
+  title: string;
+}
+
+export interface CalendarWeek {
+  id: string;
+  title: string;
+  days: { id: string }[];
+  startDate: string;
+  endDate: string;
+}
+
+export interface CalendarMonth {
+  id: string;
+  title: string;
+  days: { id: string }[];
+  weeks: { id: string }[];
+  year: string;
+  month: string;
+}
+
+export interface CalendarYear {
+  id: string;
+  title: string;
+  months: { id: string }[];
+  year: string;
+}
+
+// Worker Structure Types
+export interface TimetableEntry {
+  id: string;
+  title: string;
+  type: string;
+  startTime: string;
+  endTime: string;
+}
+
+export interface ClassEntry {
+  id: string;
+  title: string;
+  type: string;
+}
+
+export interface LessonEntry {
+  id: string;
+  title: string;
+  type: string;
+}
+
+interface NeoUserContextType {
+  userNode: CCUserNodeProps | null;
+  calendarNode: CalendarNode | null;
+  workerNode: WorkerNode | null;
+  userDbName: string | null;
+  workerDbName: string | null;
+  isLoading: boolean;
+  isInitialized: boolean;
+  error: string | null;
+  
+  // Calendar Navigation
+  navigateToDay: (id: string) => Promise<void>;
+  navigateToWeek: (id: string) => Promise<void>;
+  navigateToMonth: (id: string) => Promise<void>;
+  navigateToYear: (id: string) => Promise<void>;
+  currentCalendarNode: CalendarNode | null;
+  calendarStructure: CalendarStructure | null;
+  
+  // Worker Navigation
+  navigateToTimetable: (id: string) => Promise<void>;
+  navigateToJournal: (id: string) => Promise<void>;
+  navigateToPlanner: (id: string) => Promise<void>;
+  navigateToClass: (id: string) => Promise<void>;
+  navigateToLesson: (id: string) => Promise<void>;
+  currentWorkerNode: WorkerNode | null;
+  workerStructure: WorkerStructure | null;
+}
+
+const NeoUserContext = createContext<NeoUserContextType>({
+  userNode: null,
+  calendarNode: null,
+  workerNode: null,
+  userDbName: null,
+  workerDbName: null,
+  isLoading: false,
+  isInitialized: false,
+  error: null,
+  navigateToDay: async () => {},
+  navigateToWeek: async () => {},
+  navigateToMonth: async () => {},
+  navigateToYear: async () => {},
+  navigateToTimetable: async () => {},
+  navigateToJournal: async () => {},
+  navigateToPlanner: async () => {},
+  navigateToClass: async () => {},
+  navigateToLesson: async () => {},
+  currentCalendarNode: null,
+  currentWorkerNode: null,
+  calendarStructure: null,
+  workerStructure: null
+});
+
+export const NeoUserProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const { user } = useAuth();
+  const { profile, isInitialized: isUserInitialized } = useUser();
+  const navigationStore = useNavigationStore();
+  
+  const [userNode, setUserNode] = useState<CCUserNodeProps | null>(null);
+  const [calendarNode] = useState<CalendarNode | null>(null);
+  const [workerNode] = useState<WorkerNode | null>(null);
+  const [currentCalendarNode, setCurrentCalendarNode] = useState<CalendarNode | null>(null);
+  const [currentWorkerNode, setCurrentWorkerNode] = useState<WorkerNode | null>(null);
+  const [calendarStructure] = useState<CalendarStructure | null>(null);
+  const [workerStructure] = useState<WorkerStructure | null>(null);
+  const [userDbName, setUserDbName] = useState<string | null>(null);
+  const [workerDbName, setWorkerDbName] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Use ref for initialization tracking to prevent re-renders
+  const initializationRef = React.useRef({
+    hasStarted: false,
+    isComplete: false
+  });
+
+  // Add base properties for node data
+  const getBaseNodeProps = () => ({
+    title: '',
+    w: 200,
+    h: 200,
+    headerColor: '#000000',
+    backgroundColor: '#ffffff',
+    isLocked: false,
+    __primarylabel__: 'UserTeacherTimetable',
+    unique_id: '',
+    tldraw_snapshot: '',
+    created: new Date().toISOString(),
+    merged: new Date().toISOString(),
+    state: {
+      parentId: null,
+      isPageChild: false,
+      hasChildren: false,
+      bindings: [],
+    },
+    defaultComponent: true,
+  });
+
+  // Initialize context when dependencies are ready
+  useEffect(() => {
+    if (!isUserInitialized || !profile || isInitialized || initializationRef.current.hasStarted) {
+      return;
+    }
+
+    const initializeContext = async () => {
+      try {
+        initializationRef.current.hasStarted = true;
+        setIsLoading(true);
+        setError(null);
+
+        // Set database names
+        const userDb = profile.user_db_name || (user?.email ? 
+          `cc.users.${user.email.replace('@', 'at').replace(/\./g, 'dot')}` : null);
+        
+        if (!userDb) {
+          throw new Error('No user database name available');
+        }
+
+        // Initialize user node in profile context
+        logger.debug('neo-user-context', '🔄 Starting context initialization');
+
+        // Initialize user node
+        await navigationStore.switchContext({
+          main: 'profile',
+          base: 'profile',
+          extended: 'overview'
+        }, userDb, profile.school_db_name);
+
+        const userNavigationNode = navigationStore.context.node;
+        if (userNavigationNode?.data) {
+          const userNodeData: CCUserNodeProps = {
+            ...getBaseNodeProps(),
+            __primarylabel__: 'User',
+            unique_id: userNavigationNode.id,
+            tldraw_snapshot: userNavigationNode.tldraw_snapshot || '',
+            title: String(userNavigationNode.data?.user_name || 'User'),
+            user_name: String(userNavigationNode.data?.user_name || 'User'),
+            user_email: user?.email || '',
+            user_type: 'User',
+            user_id: userNavigationNode.id,
+            worker_node_data: JSON.stringify(userNavigationNode.data || {})
+          };
+          setUserNode(userNodeData);
+        }
+
+        // Set final state
+        setUserDbName(userDb);
+        setWorkerDbName(profile.school_db_name);
+        setIsInitialized(true);
+        setIsLoading(false);
+        initializationRef.current.isComplete = true;
+        
+        logger.debug('neo-user-context', '✅ Context initialization complete');
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Failed to initialize user context';
+        logger.error('neo-user-context', '❌ Failed to initialize context', { error: errorMessage });
+        setError(errorMessage);
+        setIsLoading(false);
+        setIsInitialized(true);
+        initializationRef.current.isComplete = true;
+      }
+    };
+
+    initializeContext();
+  }, [user?.email, profile, isUserInitialized, navigationStore, isInitialized]);
+
+  // Calendar Navigation Functions
+  const navigateToDay = async (id: string) => {
+    if (!userDbName) return;
+    setIsLoading(true);
+    try {
+      await navigationStore.switchContext({
+        base: 'calendar',
+        extended: 'day'
+      }, userDbName, workerDbName);
+
+      const node = navigationStore.context.node;
+      if (node?.data) {
+        const nodeData: CCCalendarNodeProps = {
+          ...getBaseNodeProps(),
+          __primarylabel__: 'CalendarDay',
+          unique_id: id || node.id,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          title: node.label,
+          name: node.label,
+          calendar_type: 'day',
+          calendar_name: node.label,
+          start_date: new Date().toISOString(),
+          end_date: new Date().toISOString()
+        };
+
+        setCurrentCalendarNode({
+          id: id || node.id,
+          label: node.label,
+          title: node.label,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          type: 'CalendarDay',
+          nodeData
+        });
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to navigate to day');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const navigateToWeek = async (id: string) => {
+    if (!userDbName) return;
+    setIsLoading(true);
+    try {
+      await navigationStore.switchContext({
+        base: 'calendar',
+        extended: 'week'
+      }, userDbName, workerDbName);
+
+      const node = navigationStore.context.node;
+      if (node?.data) {
+        const nodeData: CCCalendarNodeProps = {
+          ...getBaseNodeProps(),
+          __primarylabel__: 'CalendarWeek',
+          unique_id: id || node.id,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          title: node.label,
+          name: node.label,
+          calendar_type: 'week',
+          calendar_name: node.label,
+          start_date: new Date().toISOString(),
+          end_date: new Date().toISOString()
+        };
+
+        setCurrentCalendarNode({
+          id: id || node.id,
+          label: node.label,
+          title: node.label,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          type: 'CalendarWeek',
+          nodeData
+        });
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to navigate to week');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const navigateToMonth = async (id: string) => {
+    if (!userDbName) return;
+    setIsLoading(true);
+    try {
+      await navigationStore.switchContext({
+        base: 'calendar',
+        extended: 'month'
+      }, userDbName, workerDbName);
+
+      const node = navigationStore.context.node;
+      if (node?.data) {
+        const nodeData: CCCalendarNodeProps = {
+          ...getBaseNodeProps(),
+          __primarylabel__: 'CalendarMonth',
+          unique_id: id || node.id,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          title: node.label,
+          name: node.label,
+          calendar_type: 'month',
+          calendar_name: node.label,
+          start_date: new Date().toISOString(),
+          end_date: new Date().toISOString()
+        };
+
+        setCurrentCalendarNode({
+          id: id || node.id,
+          label: node.label,
+          title: node.label,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          type: 'CalendarMonth',
+          nodeData
+        });
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to navigate to month');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const navigateToYear = async (id: string) => {
+    if (!userDbName) return;
+    setIsLoading(true);
+    try {
+      await navigationStore.switchContext({
+        base: 'calendar',
+        extended: 'year'
+      }, userDbName, workerDbName);
+
+      const node = navigationStore.context.node;
+      if (node?.data) {
+        const nodeData: CCCalendarNodeProps = {
+          ...getBaseNodeProps(),
+          __primarylabel__: 'CalendarYear',
+          unique_id: id || node.id,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          title: node.label,
+          name: node.label,
+          calendar_type: 'year',
+          calendar_name: node.label,
+          start_date: new Date().toISOString(),
+          end_date: new Date().toISOString()
+        };
+
+        setCurrentCalendarNode({
+          id: id || node.id,
+          label: node.label,
+          title: node.label,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          type: 'CalendarYear',
+          nodeData
+        });
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to navigate to year');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Worker Navigation Functions
+  const navigateToTimetable = async (id: string) => {
+    if (!userDbName) return;
+    setIsLoading(true);
+    try {
+      await navigationStore.switchContext({
+        base: 'teaching',
+        extended: 'timetable'
+      }, userDbName, workerDbName);
+
+      const node = navigationStore.context.node;
+      if (node?.data) {
+        const nodeData: CCUserTeacherTimetableNodeProps = {
+          ...getBaseNodeProps(),
+          __primarylabel__: 'UserTeacherTimetable',
+          unique_id: id || node.id,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          title: node.label,
+          school_db_name: workerDbName || '',
+          school_timetable_id: id || node.id
+        };
+
+        setCurrentWorkerNode({
+          id: id || node.id,
+          label: node.label,
+          title: node.label,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          type: 'UserTeacherTimetable',
+          nodeData
+        });
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to navigate to timetable');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const navigateToJournal = async (id: string) => {
+    if (!userDbName) return;
+    setIsLoading(true);
+    try {
+      await navigationStore.switchContext({
+        base: 'teaching',
+        extended: 'journal'
+      }, userDbName, workerDbName);
+
+      const node = navigationStore.context.node;
+      if (node?.data) {
+        const nodeData: CCUserTeacherTimetableNodeProps = {
+          ...getBaseNodeProps(),
+          __primarylabel__: 'UserTeacherTimetable',
+          unique_id: id || node.id,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          title: node.label,
+          school_db_name: workerDbName || '',
+          school_timetable_id: id || node.id
+        };
+
+        setCurrentWorkerNode({
+          id: id || node.id,
+          label: node.label,
+          title: node.label,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          type: 'UserTeacherTimetable',
+          nodeData
+        });
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to navigate to journal');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const navigateToPlanner = async (id: string) => {
+    if (!userDbName) return;
+    setIsLoading(true);
+    try {
+      await navigationStore.switchContext({
+        base: 'teaching',
+        extended: 'planner'
+      }, userDbName, workerDbName);
+
+      const node = navigationStore.context.node;
+      if (node?.data) {
+        const nodeData: CCUserTeacherTimetableNodeProps = {
+          ...getBaseNodeProps(),
+          __primarylabel__: 'UserTeacherTimetable',
+          unique_id: id || node.id,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          title: node.label,
+          school_db_name: workerDbName || '',
+          school_timetable_id: id || node.id
+        };
+
+        setCurrentWorkerNode({
+          id: id || node.id,
+          label: node.label,
+          title: node.label,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          type: 'UserTeacherTimetable',
+          nodeData
+        });
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to navigate to planner');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const navigateToClass = async (id: string) => {
+    if (!userDbName) return;
+    setIsLoading(true);
+    try {
+      await navigationStore.switchContext({
+        base: 'teaching',
+        extended: 'classes'
+      }, userDbName, workerDbName);
+      await navigationStore.navigate(id, userDbName);
+
+      const node = navigationStore.context.node;
+      if (node?.data) {
+        const nodeData: CCUserTeacherTimetableNodeProps = {
+          ...getBaseNodeProps(),
+          __primarylabel__: 'UserTeacherTimetable',
+          unique_id: node.id,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          title: node.label,
+          school_db_name: workerDbName || '',
+          school_timetable_id: node.id
+        };
+
+        setCurrentWorkerNode({
+          id: node.id,
+          label: node.label,
+          title: node.label,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          type: 'UserTeacherTimetable',
+          nodeData
+        });
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to navigate to class');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const navigateToLesson = async (id: string) => {
+    if (!userDbName) return;
+    setIsLoading(true);
+    try {
+      await navigationStore.switchContext({
+        base: 'teaching',
+        extended: 'lessons'
+      }, userDbName, workerDbName);
+      await navigationStore.navigate(id, userDbName);
+
+      const node = navigationStore.context.node;
+      if (node?.data) {
+        const nodeData: CCUserTeacherTimetableNodeProps = {
+          ...getBaseNodeProps(),
+          __primarylabel__: 'UserTeacherTimetable',
+          unique_id: node.id,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          title: node.label,
+          school_db_name: workerDbName || '',
+          school_timetable_id: node.id
+        };
+
+        setCurrentWorkerNode({
+          id: node.id,
+          label: node.label,
+          title: node.label,
+          tldraw_snapshot: node.tldraw_snapshot || '',
+          type: 'UserTeacherTimetable',
+          nodeData
+        });
+      }
+    } catch (error) {
+      setError(error instanceof Error ? error.message : 'Failed to navigate to lesson');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <NeoUserContext.Provider value={{
+      userNode,
+      calendarNode,
+      workerNode,
+      userDbName,
+      workerDbName,
+      isLoading,
+      isInitialized,
+      error,
+      navigateToDay,
+      navigateToWeek,
+      navigateToMonth,
+      navigateToYear,
+      navigateToTimetable,
+      navigateToJournal,
+      navigateToPlanner,
+      navigateToClass,
+      navigateToLesson,
+      currentCalendarNode,
+      currentWorkerNode,
+      calendarStructure,
+      workerStructure
+    }}>
+      {children}
+    </NeoUserContext.Provider>
+  );
+};
+
+export const useNeoUser = () => useContext(NeoUserContext);
diff --git a/src/contexts/TLDrawContext.tsx b/src/contexts/TLDrawContext.tsx
new file mode 100644
index 0000000..337c3ee
--- /dev/null
+++ b/src/contexts/TLDrawContext.tsx
@@ -0,0 +1,221 @@
+import React, { ReactNode, createContext, useContext, useState, useCallback } from 'react';
+import { TLUserPreferences, TLEditorSnapshot, TLStore, getSnapshot, loadSnapshot, Editor } from '@tldraw/tldraw';
+import { storageService, StorageKeys } from '../services/auth/localStorageService';
+import { LoadingState } from '../services/tldraw/snapshotService';
+import { SharedStoreService } from '../services/tldraw/sharedStoreService';
+import { logger } from '../debugConfig';
+import { PresentationService } from '../services/tldraw/presentationService';
+
+interface TLDrawContextType {
+  tldrawPreferences: TLUserPreferences | null;
+  tldrawUserFilePath: string | null;
+  localSnapshot: Partial<TLEditorSnapshot> | null;
+  presentationMode: boolean;
+  sharedStore: SharedStoreService | null;
+  connectionStatus: 'online' | 'offline' | 'error';
+  presentationService: PresentationService | null;
+  setTldrawPreferences: (preferences: TLUserPreferences | null) => void;
+  setTldrawUserFilePath: (path: string | null) => void;
+  handleLocalSnapshot: (
+    action: string,
+    store: TLStore,
+    setLoadingState: (state: LoadingState) => void
+  ) => Promise<void>;
+  togglePresentationMode: (editor?: Editor) => void;
+  initializePreferences: (userId: string) => void;
+  setSharedStore: (store: SharedStoreService | null) => void;
+  setConnectionStatus: (status: 'online' | 'offline' | 'error') => void;
+}
+
+const TLDrawContext = createContext<TLDrawContextType>({
+  tldrawPreferences: null,
+  tldrawUserFilePath: null,
+  localSnapshot: null,
+  presentationMode: false,
+  sharedStore: null,
+  connectionStatus: 'online',
+  presentationService: null,
+  setTldrawPreferences: () => {},
+  setTldrawUserFilePath: () => {},
+  handleLocalSnapshot: async () => {},
+  togglePresentationMode: () => {},
+  initializePreferences: () => {},
+  setSharedStore: () => {},
+  setConnectionStatus: () => {}
+});
+
+export const TLDrawProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [tldrawPreferences, setTldrawPreferencesState] = useState<TLUserPreferences | null>(
+    storageService.get(StorageKeys.TLDRAW_PREFERENCES)
+  );
+  const [tldrawUserFilePath, setTldrawUserFilePathState] = useState<string | null>(
+    storageService.get(StorageKeys.TLDRAW_FILE_PATH)
+  );
+  const [localSnapshot, setLocalSnapshot] = useState<Partial<TLEditorSnapshot> | null>(
+    storageService.get(StorageKeys.LOCAL_SNAPSHOT)
+  );
+  const [presentationMode, setPresentationMode] = useState<boolean>(
+    storageService.get(StorageKeys.PRESENTATION_MODE) || false
+  );
+  const [sharedStore, setSharedStore] = useState<SharedStoreService | null>(null);
+  const [connectionStatus, setConnectionStatus] = useState<'online' | 'offline' | 'error'>('online');
+  const [presentationService, setPresentationService] = useState<PresentationService | null>(null);
+
+  const initializePreferences = useCallback((userId: string) => {
+    logger.debug('tldraw-context', '🔄 Initializing TLDraw preferences');
+    const storedPrefs = storageService.get(StorageKeys.TLDRAW_PREFERENCES);
+    
+    if (storedPrefs) {
+      logger.debug('tldraw-context', '📥 Found stored preferences');
+      setTldrawPreferencesState(storedPrefs);
+      return;
+    }
+
+    // Create default preferences if none exist
+    const defaultPrefs: TLUserPreferences = {
+      id: userId,
+      name: 'User',
+      color: `hsl(${Math.random() * 360}, 70%, 50%)`,
+      locale: 'en',
+      colorScheme: 'system',
+      isSnapMode: false,
+      isWrapMode: false,
+      isDynamicSizeMode: false,
+      isPasteAtCursorMode: false,
+      animationSpeed: 1,
+      edgeScrollSpeed: 1
+    };
+
+    logger.debug('tldraw-context', '📝 Creating default preferences');
+    storageService.set(StorageKeys.TLDRAW_PREFERENCES, defaultPrefs);
+    setTldrawPreferencesState(defaultPrefs);
+  }, []);
+
+  const setTldrawPreferences = useCallback((preferences: TLUserPreferences | null) => {
+    logger.debug('tldraw-context', '🔄 Setting TLDraw preferences', { preferences });
+    if (preferences) {
+      storageService.set(StorageKeys.TLDRAW_PREFERENCES, preferences);
+    } else {
+      storageService.remove(StorageKeys.TLDRAW_PREFERENCES);
+    }
+    setTldrawPreferencesState(preferences);
+  }, []);
+
+  const setTldrawUserFilePath = (path: string | null) => {
+    logger.debug('tldraw-context', '🔄 Setting TLDraw user file path');
+    if (path) {
+      storageService.set(StorageKeys.TLDRAW_FILE_PATH, path);
+    } else {
+      storageService.remove(StorageKeys.TLDRAW_FILE_PATH);
+    }
+    setTldrawUserFilePathState(path);
+  };
+
+  const handleLocalSnapshot = useCallback(async (
+    action: string,
+    store: TLStore,
+    setLoadingState: (state: LoadingState) => void
+  ): Promise<void> => {
+    if (!store) {
+      setLoadingState({ status: 'error', error: 'Store not initialized' });
+      return;
+    }
+    
+    try {
+      if (sharedStore) {
+        if (action === 'put') {
+          const snapshot = getSnapshot(store);
+          await sharedStore.saveSnapshot(snapshot, setLoadingState);
+        } else if (action === 'get') {
+          const savedSnapshot = storageService.get(StorageKeys.LOCAL_SNAPSHOT);
+          if (savedSnapshot) {
+            await sharedStore.loadSnapshot(savedSnapshot, setLoadingState);
+          }
+        }
+      }
+      else if (action === 'put') {
+        logger.debug('tldraw-context', '💾 Putting snapshot into local storage');
+        const snapshot = getSnapshot(store);
+        logger.debug('tldraw-context', '📦 Snapshot:', snapshot);
+        setLocalSnapshot(snapshot);
+        storageService.set(StorageKeys.LOCAL_SNAPSHOT, snapshot);
+        setLoadingState({ status: 'ready', error: '' });
+      }
+      else if (action === 'get') {
+        logger.debug('tldraw-context', '📂 Getting snapshot from local storage');
+        setLoadingState({ status: 'loading', error: '' });
+        const savedSnapshot = storageService.get(StorageKeys.LOCAL_SNAPSHOT);
+        
+        if (savedSnapshot && savedSnapshot.document && savedSnapshot.session) {
+          try {
+            logger.debug('tldraw-context', '📥 Loading snapshot into editor');
+            loadSnapshot(store, savedSnapshot);
+            setLoadingState({ status: 'ready', error: '' });
+          } catch (error) {
+            logger.error('tldraw-context', '❌ Failed to load snapshot:', error);
+            store.clear();
+            setLoadingState({ status: 'error', error: 'Failed to load snapshot' });
+          }
+        } else {
+          logger.debug('tldraw-context', '⚠️ No valid snapshot found in local storage');
+          setLoadingState({ status: 'ready', error: '' });
+        }
+      }
+    } catch (error) {
+      logger.error('tldraw-context', '❌ Error handling local snapshot:', error);
+      setLoadingState({ 
+        status: 'error', 
+        error: error instanceof Error ? error.message : 'Unknown error' 
+      });
+    }
+  }, [sharedStore]);
+
+  const togglePresentationMode = useCallback((editor?: Editor) => {
+    logger.debug('tldraw-context', '🔄 Toggling presentation mode');
+    
+    setPresentationMode(prev => {
+      const newValue = !prev;
+      storageService.set(StorageKeys.PRESENTATION_MODE, newValue);
+
+      if (newValue && editor) {
+        // Starting presentation mode
+        logger.info('presentation', '🎥 Initializing presentation service');
+        const service = new PresentationService(editor);
+        setPresentationService(service);
+        service.startPresentationMode();
+      } else if (!newValue && presentationService) {
+        // Stopping presentation mode
+        logger.info('presentation', '🛑 Stopping presentation service');
+        presentationService.stopPresentationMode();
+        setPresentationService(null);
+      }
+
+      return newValue;
+    });
+  }, [presentationService]);
+
+  return (
+    <TLDrawContext.Provider
+      value={{
+        tldrawPreferences,
+        tldrawUserFilePath,
+        localSnapshot,
+        presentationMode,
+        sharedStore,
+        connectionStatus,
+        presentationService,
+        setTldrawPreferences,
+        setTldrawUserFilePath,
+        handleLocalSnapshot,
+        togglePresentationMode,
+        initializePreferences,
+        setSharedStore,
+        setConnectionStatus
+      }}
+    >
+      {children}
+    </TLDrawContext.Provider>
+  );
+};
+
+export const useTLDraw = () => useContext(TLDrawContext);
diff --git a/src/contexts/UserContext.tsx b/src/contexts/UserContext.tsx
new file mode 100644
index 0000000..3707774
--- /dev/null
+++ b/src/contexts/UserContext.tsx
@@ -0,0 +1,191 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { supabase } from '../supabaseClient';
+import { logger } from '../debugConfig';
+import { CCUser, CCUserMetadata } from '../services/auth/authService';
+import { UserPreferences } from '../services/auth/profileService';
+import { DatabaseNameService } from '../services/graph/databaseNameService';
+
+export interface UserContextType {
+  user: CCUser | null;
+  loading: boolean;
+  error: Error | null;
+  profile: CCUser | null;
+  preferences: UserPreferences;
+  isMobile: boolean;
+  isInitialized: boolean;
+  updateProfile: (updates: Partial<CCUser>) => Promise<void>;
+  updatePreferences: (updates: Partial<UserPreferences>) => Promise<void>;
+  clearError: () => void;
+}
+
+export const UserContext = createContext<UserContextType>({
+  user: null,
+  loading: true,
+  error: null,
+  profile: null,
+  preferences: {},
+  isMobile: false,
+  isInitialized: false,
+  updateProfile: async () => {},
+  updatePreferences: async () => {},
+  clearError: () => {}
+});
+
+export function UserProvider({ children }: { children: React.ReactNode }) {
+  const [user] = useState<CCUser | null>(null);
+  const [profile, setProfile] = useState<CCUser | null>(null);
+  const [preferences, setPreferences] = useState<UserPreferences>({});
+  const [loading, setLoading] = useState(true);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [isMobile] = useState(window.innerWidth <= 768);
+
+  useEffect(() => {
+    const loadUserProfile = async () => {
+      try {
+        const { data: { user } } = await supabase.auth.getUser();
+        
+        if (!user) {
+          setProfile(null);
+          setLoading(false);
+          setIsInitialized(true);
+          return;
+        }
+
+        const { data, error } = await supabase
+          .from('profiles')
+          .select('*')
+          .eq('id', user.id)
+          .single();
+
+        if (error) {
+          throw error;
+        }
+
+        const metadata = user.user_metadata as CCUserMetadata;
+        const userDbName = DatabaseNameService.getUserPrivateDB(metadata.user_type || '', metadata.username || '');
+        const schoolDbName = DatabaseNameService.getDevelopmentSchoolDB();
+
+        const userProfile: CCUser = {
+          id: user.id,
+          email: user.email,
+          user_type: metadata.user_type || '',
+          username: metadata.username || '',
+          display_name: metadata.display_name || '',
+          user_db_name: userDbName,
+          school_db_name: schoolDbName,
+          created_at: user.created_at,
+          updated_at: user.updated_at
+        };
+
+        setProfile(userProfile);
+        
+        logger.debug('user-context', '✅ User profile loaded', {
+          userId: userProfile.id,
+          userType: userProfile.user_type,
+          username: userProfile.username,
+          userDbName: userProfile.user_db_name,
+          schoolDbName: userProfile.school_db_name
+        });
+
+        // Load preferences from profile data
+        setPreferences({
+          theme: data.theme || 'system',
+          notifications: data.notifications_enabled || false
+        });
+
+      } catch (error) {
+        logger.error('user-context', '❌ Failed to load user profile', { error });
+        setError(error instanceof Error ? error : new Error('Failed to load user profile'));
+      } finally {
+        setLoading(false);
+        setIsInitialized(true);
+      }
+    };
+
+    loadUserProfile();
+  }, []);
+
+  const updateProfile = async (updates: Partial<CCUser>) => {
+    if (!user?.id || !profile) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const { error } = await supabase
+        .from('profiles')
+        .update({
+          ...updates,
+          updated_at: new Date().toISOString()
+        })
+        .eq('id', user.id);
+
+      if (error) {
+        throw error;
+      }
+
+      setProfile(prev => prev ? { ...prev, ...updates } : null);
+      logger.info('user-context', '✅ Profile updated successfully');
+    } catch (error) {
+      logger.error('user-context', '❌ Failed to update profile', { error });
+      setError(error instanceof Error ? error : new Error('Failed to update profile'));
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const updatePreferences = async (updates: Partial<UserPreferences>) => {
+    if (!user?.id) {
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const newPreferences = { ...preferences, ...updates };
+      setPreferences(newPreferences);
+
+      const { error } = await supabase
+        .from('profiles')
+        .update({
+          preferences: newPreferences,
+          updated_at: new Date().toISOString()
+        })
+        .eq('id', user.id);
+
+      if (error) {
+        throw error;
+      }
+
+      logger.info('user-context', '✅ Preferences updated successfully');
+    } catch (error) {
+      logger.error('user-context', '❌ Failed to update preferences', { error });
+      setError(error instanceof Error ? error : new Error('Failed to update preferences'));
+      throw error;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <UserContext.Provider
+      value={{
+        user: profile,
+        loading,
+        error,
+        profile,
+        preferences,
+        isMobile,
+        isInitialized,
+        updateProfile,
+        updatePreferences,
+        clearError: () => setError(null)
+      }}
+    >
+      {children}
+    </UserContext.Provider>
+  );
+}
+
+export const useUser = () => useContext(UserContext);
diff --git a/src/debugConfig.ts b/src/debugConfig.ts
new file mode 100644
index 0000000..cfc0206
--- /dev/null
+++ b/src/debugConfig.ts
@@ -0,0 +1,342 @@
+export type LogLevel = 'error' | 'warn' | 'info' | 'debug' | 'trace';
+export type LogCategory =
+  | 'app'
+  | 'header'
+  | 'not-found'
+  | 'routing'
+  | 'neo4j-service'
+  | 'site-page'
+  | 'supabase-client'
+  | 'user-page'
+  | 'auth-page'
+  | 'supabase-profile-service'
+  | 'email-signup-form'
+  | 'routes'
+  | 'super-admin-section'
+  | 'tldraw-context'
+  | 'user-context'
+  | 'super-admin-auth-route'
+  | 'admin-page'
+  | 'neo4j-context'
+  | 'auth-context'
+  | 'neo-user-context'
+  | 'neo-institute-context'
+  | 'auth-service'
+  | 'graph-service'
+  | 'registration-service'
+  | 'snapshot-service'
+  | 'shared-store-service'
+  | 'sync-service'
+  | 'state-management'
+  | 'local-store-service'
+  | 'storage-service'
+  | 'school-service'
+  | 'timetable-service'
+  | 'local-storage'
+  | 'single-player-page'
+  | 'multiplayer-page'
+  | 'login-page'
+  | 'signup-page'
+  | 'login-form'
+  | 'dev-page'
+  | 'axios'
+  | 'tldraw-events'
+  | 'user-toolbar'
+  | 'snapshot-toolbar'
+  | 'microphone-state-tool'
+  | 'graph-shape'
+  | 'graph-panel'
+  | 'graph-shape-shared' // For shared graph shape functionality
+  | 'graph-shape-user' // For user node specific functionality
+  | 'graph-shape-teacher' // For teacher node specific functionality
+  | 'graph-shape-student' // For student node specific functionality
+  | 'calendar-shape'
+  | 'calendar'
+  | 'supabase'
+  | 'binding'
+  | 'translation'
+  | 'position'
+  | 'array'
+  | 'shape'
+  | 'baseNodeShapeUtil'
+  | 'general'
+  | 'system'
+  | 'slides-panel'
+  | 'graphStateUtil'
+  | 'navigation' // For slide navigation
+  | 'presentation' // For presentation mode
+  | 'selection' // For slide/slideshow selection
+  | 'camera' // For camera movements
+  | 'tldraw-service' // For tldraw related logs
+  | 'store-service' // For store related logs
+  | 'morphic-page' // For Morphic page related logs
+  | 'share-handler' // For share handler related logs
+  | 'transcription-service' // For transcription service related logs
+  | 'slideshow-helpers' // For slideshow helpers related logs
+  | 'slide-shape' // For slide shape util related logs
+  | 'cc-base-shape-util' // For cc base shape util related logs
+  | 'cc-user-node-shape-util' // For cc user node shape util related logs
+  | 'node-canvas' // For node canvas related logs
+  | 'navigation-service' // For navigation service related logs
+  | 'autosave' // For autosave service related logs
+  | 'cc-exam-marker' // For cc exam marker related logs
+  | 'cc-search' // For cc search related logs
+  | 'cc-web-browser' // For cc web browser related logs
+  | 'cc-node-snapshot-panel' // For cc node snapshot related logs
+  | 'user-neo-db'
+  | 'navigation-queue-service' // For navigation queue service related logs
+  | 'editor-state' // For editor state related logs
+  | 'neo-shape-service' // For neo shape service related logs
+  // New navigation-specific categories
+  | 'navigation-context' // Context switching and state
+  | 'navigation-history' // History management
+  | 'navigation-ui' // UI interactions in navigation
+  | 'navigation-store' // Navigation store updates
+  | 'navigation-queue' // Navigation queue operations
+  | 'navigation-state' // Navigation state changes
+  | 'context-switch' // Context switching operations
+  | 'history-management' // History stack operations
+  | 'node-navigation' // Node-specific navigation
+  | 'navigation-panel' // Navigation panel related logs
+  | 'auth'
+  | 'school-context'
+  | 'database-name-service'
+  | 'tldraw'
+  | 'websocket'
+  | 'app'
+  | 'storage-service'
+  | 'routing'
+  | 'auth-service'
+  | 'user-context'
+  | 'neo-user-context'
+  | 'neo-institute-context';
+
+interface LogConfig {
+  enabled: boolean; // Master switch to turn logging on/off
+  level: LogLevel; // Current log level
+  categories: LogCategory[]; // Which categories to show
+}
+
+const LOG_LEVELS: Record<LogLevel, number> = {
+  error: 0, // Always shown if enabled
+  warn: 1, // Shows warns and errors
+  info: 2, // Shows info, warns, and errors
+  debug: 3, // Shows debug and above
+  trace: 4, // Shows everything
+};
+
+class DebugLogger {
+  private config: LogConfig = {
+    enabled: true,
+    level: 'debug',
+    categories: [
+      'system',
+      'navigation',
+      'presentation',
+      'selection',
+      'camera',
+      'binding',
+      'shape',
+      'tldraw-service',
+    ],
+  };
+
+  setConfig(config: Partial<LogConfig>) {
+    this.config = { ...this.config, ...config };
+  }
+
+  private shouldLog(level: LogLevel, category: LogCategory): boolean {
+    return (
+      this.config.enabled &&
+      LOG_LEVELS[level] <= LOG_LEVELS[this.config.level] &&
+      this.config.categories.includes(category)
+    );
+  }
+
+  log(level: LogLevel, category: LogCategory, message: string, data?: unknown) {
+    if (!this.shouldLog(level, category)) {
+      return;
+    }
+
+    const levelEmojis: Record<LogLevel, string> = {
+      error: '🔴', // Red circle for errors
+      warn: '⚠️', // Warning symbol
+      info: 'ℹ️', // Information symbol
+      debug: '🔧', // Wrench for debug
+      trace: '🔍', // Magnifying glass for trace
+    };
+
+    const prefix = `${levelEmojis[level]} [${category}]`;
+
+    // Use appropriate console method based on level
+    switch (level) {
+      case 'error':
+        if (data) {
+          console.error(`${prefix} ${message}`, data);
+        } else {
+          console.error(`${prefix} ${message}`);
+        }
+        break;
+      case 'warn':
+        if (data) {
+          console.warn(`${prefix} ${message}`, data);
+        } else {
+          console.warn(`${prefix} ${message}`);
+        }
+        break;
+      case 'info':
+        if (data) {
+          console.info(`${prefix} ${message}`, data);
+        } else {
+          console.info(`${prefix} ${message}`);
+        }
+        break;
+      case 'debug':
+        if (data) {
+          console.debug(`${prefix} ${message}`, data);
+        } else {
+          console.debug(`${prefix} ${message}`);
+        }
+        break;
+      case 'trace':
+        if (data) {
+          console.trace(`${prefix} ${message}`, data);
+        } else {
+          console.trace(`${prefix} ${message}`);
+        }
+        break;
+    }
+  }
+
+  // Convenience methods
+  error(category: LogCategory, message: string, data?: unknown) {
+    this.log('error', category, message, data);
+  }
+
+  warn(category: LogCategory, message: string, data?: unknown) {
+    this.log('warn', category, message, data);
+  }
+
+  info(category: LogCategory, message: string, data?: unknown) {
+    this.log('info', category, message, data);
+  }
+
+  debug(category: LogCategory, message: string, data?: unknown) {
+    this.log('debug', category, message, data);
+  }
+
+  trace(category: LogCategory, message: string, data?: unknown) {
+    this.log('trace', category, message, data);
+  }
+}
+
+export const logger = new DebugLogger();
+
+logger.setConfig({
+  enabled: true,
+  level: 'debug',
+  categories: [
+    'app',
+    'header',
+    'routing',
+    'neo4j-context',
+    'auth-context',
+    'auth-service',
+    'state-management',
+    'local-storage',
+    'axios',
+    'system',
+    'navigation',
+    'calendar',
+    'presentation',
+    'selection',
+    'camera',
+    'binding',
+    'shape',
+    'tldraw-service',
+    'tldraw-events',
+    'signup-page',
+    'timetable-service',
+    'dev-page',
+    'super-admin-auth-route',
+    'admin-page',
+    'storage-service',
+    'user-context',
+    'login-form',
+    'super-admin-section',
+    'routes',
+    'neo4j-service',
+    'supabase-client',
+    'user-page',
+    'site-page',
+    'auth-page',
+    'email-signup-form',
+    'supabase-profile-service',
+    'multiplayer-page',
+    'snapshot-service',
+    'sync-service',
+    'slides-panel',
+    'local-store-service',
+    'shared-store-service',
+    'single-player-page',
+    'user-toolbar',
+    'registration-service',
+    'graph-service',
+    'graph-shape',
+    'calendar-shape',
+    'snapshot-toolbar',
+    'graphStateUtil',
+    'baseNodeShapeUtil',
+    'school-service',
+    'microphone-state-tool',
+    'store-service',
+    'morphic-page',
+    'not-found',
+    'share-handler',
+    'transcription-service',
+    'slideshow-helpers',
+    'slide-shape',
+    'graph-panel',
+    'cc-user-node-shape-util',
+    'cc-base-shape-util',
+    'node-canvas',
+    'navigation-service',
+    'autosave',
+    'cc-exam-marker',
+    'cc-search',
+    'cc-web-browser',
+    'neo-user-context',
+    'neo-institute-context',
+    'cc-node-snapshot-panel',
+    'user-neo-db',
+    'navigation-queue-service',
+    'editor-state',
+    'neo-shape-service',
+    // Add new navigation categories
+    'navigation-context',
+    'navigation-history',
+    'navigation-ui',
+    'navigation-store',
+    'navigation-queue',
+    'navigation-state',
+    'context-switch',
+    'history-management',
+    'node-navigation',
+    'navigation-panel',
+    'auth',
+    'school-context',
+    'database-name-service',
+    'tldraw',
+    'websocket',
+    'app',
+    'auth-service',
+    'storage-service',
+    'routing',
+    'auth-service',
+    'user-context',
+    'neo-user-context',
+    'neo-institute-context',
+  ],
+});
+
+export default logger;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..dd25258
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,507 @@
+/* src/index.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Base styles */
+html,
+body {
+  padding: 0;
+  margin: 0;
+  overscroll-behavior: none;
+  touch-action: none;
+  min-height: 100vh;
+  /* mobile viewport bug fix */
+  min-height: -webkit-fill-available;
+  height: 100%;
+}
+
+/* Container styles */
+.login-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+}
+
+/* Typography styles */
+@media (max-width: 600px) {
+  .MuiTypography-h2 {
+    font-size: 2rem !important;
+    line-height: 2.5rem !important;
+    margin-bottom: 16px !important;
+    padding: 0 16px !important;
+    word-break: break-word !important;
+  }
+
+  .MuiTypography-h5 {
+    font-size: 1.25rem !important;
+    line-height: 1.75rem !important;
+    margin-bottom: 16px !important;
+    padding: 0 16px !important;
+  }
+}
+
+/* Form and input styles */
+@media (max-width: 600px) {
+  .MuiContainer-root {
+    padding: 20px !important;
+  }
+
+  .MuiGrid-container {
+    gap: 16px !important;
+    padding: 0 16px !important;
+    justify-content: center !important;
+  }
+
+  .MuiGrid-item {
+    width: 100% !important;
+    max-width: 100% !important;
+    flex-basis: 100% !important;
+    padding: 0 !important;
+  }
+
+  .MuiTextField-root {
+    width: 100% !important;
+    margin: 0 !important;
+  }
+
+  .MuiButton-root {
+    width: 100% !important;
+    margin: 0 !important;
+  }
+
+  .login-form {
+    gap: 8px;
+  }
+}
+
+/* Add styles for wider screens */
+@media (min-width: 601px) {
+  .MuiTextField-root {
+    width: 100% !important;
+    margin: 0 !important;
+  }
+
+  .MuiButton-root {
+    width: 100% !important;
+    margin: 0 !important;
+  }
+}
+
+/* Add this after your existing styles */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.login-buttons-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  margin-top: 16px;
+}
+
+@media (max-width: 600px) {
+  .login-buttons-container {
+    gap: 8px;
+  }
+}
+
+.login-form-container {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.login-form-container .MuiTextField-root,
+.login-form-container .MuiButton-root {
+  width: 100%;
+}
+
+/* Adjust spacing for mobile */
+@media (max-width: 600px) {
+  .login-form-container {
+    gap: 8px;
+  }
+}
+
+.login-section {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.login-section-header {
+  text-align: center;
+  color: #666;
+  font-size: 1rem;
+  font-weight: 500;
+  margin-top: 8px;
+}
+
+.login-role-header {
+  font-weight: 600 !important;
+  color: #1976d2 !important;
+  margin-bottom: 24px !important;
+  padding-bottom: 8px !important;
+  border-bottom: 2px solid #1976d2 !important;
+  width: fit-content !important;
+}
+
+@media (max-width: 600px) {
+  .login-role-header {
+    font-size: 1.75rem !important;
+    margin-bottom: 16px !important;
+  }
+}
+
+
+/* Calendar styles */
+.fc-timegrid-slot {
+  height: 2em !important;
+}
+
+.fc-timegrid-event {
+  min-height: 2.5em !important;
+}
+
+.fc-timegrid-slot-label {
+  vertical-align: middle;
+}
+
+.fc-event {
+cursor: pointer;
+overflow: visible !important;
+}
+
+.fc-event:hover {
+filter: brightness(90%);
+}
+
+.fc-event-title {
+font-weight: bold;
+}
+
+.custom-event-content > div {
+  transition: all 0.3s ease;
+  overflow: hidden;
+  max-height: 1.5em;
+}
+
+.custom-event-content > div[style*="display: none"] {
+  max-height: 0;
+  opacity: 0;
+}
+
+/* Custom button styling */
+.fc-filterClassesButton-button {
+background-color: #4CAF50;
+border: none;
+color: white;
+padding: 10px 20px;
+text-align: center;
+text-decoration: none;
+display: inline-block;
+font-size: 16px;
+margin: 4px 2px;
+cursor: pointer;
+border-radius: 4px;
+}
+
+/* Modal styling */
+.class-filter-modal {
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+background-color: white;
+padding: 30px;
+border-radius: 12px;
+box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+z-index: 9999;
+max-width: 90%;
+width: 400px;
+padding-bottom: 50px;
+}
+
+.class-filter-modal h2 {
+margin-top: 0;
+margin-bottom: 20px;
+font-size: 24px;
+text-align: center;
+}
+
+.class-filter-modal-overlay {
+position: fixed;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+background-color: rgba(0, 0, 0, 0.5);
+z-index: 9998;
+}
+
+.class-filter-list {
+display: grid;
+grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+gap: 10px;
+margin-bottom: 20px;
+}
+
+.class-filter-button {
+display: flex;
+align-items: center;
+padding: 10px;
+border-radius: 8px;
+font-size: 14px;
+cursor: pointer;
+transition: all 0.3s ease;
+}
+
+.class-filter-button:hover {
+opacity: 0.8;
+}
+
+.class-filter-button .checkbox {
+width: 20px;
+height: 20px;
+border-radius: 4px;
+border: 2px solid currentColor;
+display: flex;
+align-items: center;
+justify-content: center;
+margin-right: 10px;
+/* Add this to ensure the checkbox is visible */
+background-color: rgba(255, 255, 255, 0.5);
+}
+
+.class-filter-button .checkbox svg {
+font-size: 12px;
+}
+
+.class-filter-button span {
+flex-grow: 1;
+text-align: left;
+}
+
+.close-button {
+background-color: #2C3E50;
+border: 1px solid #2C3E50;
+color: #fff;
+padding: 6px 12px;
+text-align: center;
+text-decoration: none;
+display: inline-block;
+font-size: 14px;
+margin: 4px 2px;
+cursor: pointer;
+border-radius: 4px;
+transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.close-button:hover {
+background-color: #34495E;
+border-color: #34495E;
+}
+
+.close-button-container {
+text-align: center;
+margin-top: 20px;
+}
+
+.event-details-modal {
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+background-color: white;
+padding: 30px;
+border-radius: 12px;
+box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+z-index: 9999;
+max-width: 90%;
+width: 400px;
+}
+
+.event-details-modal-overlay {
+position: fixed;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+background-color: rgba(0, 0, 0, 0.5);
+z-index: 9998;
+}
+
+.open-tldraw-button {
+background-color: #4CAF50;
+border: none;
+color: white;
+padding: 10px 20px;
+text-align: center;
+text-decoration: none;
+display: inline-flex;
+align-items: center;
+font-size: 16px;
+margin: 4px 2px;
+cursor: pointer;
+border-radius: 4px;
+transition: background-color 0.3s ease;
+}
+
+.open-tldraw-button:hover {
+background-color: #45a049;
+}
+
+.open-tldraw-button svg {
+margin-left: 8px;
+}
+
+.event-dropdown {
+position: absolute;
+z-index: 1100;  /* Higher value to ensure it appears above events */
+right: -5px;
+top: 25px;
+background-color: white;
+border: 1px solid #ccc;
+border-radius: 4px;
+box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+min-width: 180px;
+max-width: 250px;
+min-height: 185px;  /* Ensure a minimum height */
+max-height: 200px;
+padding: 5px;
+overflow-y: scroll;  /* Always show scrollbar */
+display: flex;
+flex-direction: column;
+}
+
+.event-dropdown div {
+padding: 8px 12px;
+cursor: pointer;
+white-space: nowrap;
+font-size: 12px;
+color: #000;
+flex-shrink: 0;
+}
+
+.event-dropdown div:not(:last-child) {
+border-bottom: 1px solid #eee;  /* Add separators between items */
+}
+
+.event-dropdown div:hover {
+background-color: #f0f0f0;
+}
+
+/* Styling for webkit browsers */
+.event-dropdown::-webkit-scrollbar {
+width: 8px;
+}
+
+.event-dropdown::-webkit-scrollbar-track {
+background: #f1f1f1;
+}
+
+.event-dropdown::-webkit-scrollbar-thumb {
+background: #888;
+border-radius: 4px;
+}
+
+.event-dropdown::-webkit-scrollbar-thumb:hover {
+background: #555;
+}
+
+/* Styling for Firefox */
+.event-dropdown {
+scrollbar-width: thin;
+scrollbar-color: #888 #f1f1f1;
+}
+
+/* Ensure the dropdown is on top of other elements */
+.fc-event-main {
+overflow: visible !important;
+}
+
+/* Style for the ellipsis icon */
+.custom-event-content .fa-ellipsis-v {
+opacity: 0.7;
+transition: opacity 0.3s ease;
+font-size: 16px;
+}
+
+.custom-event-content .fa-ellipsis-v:hover {
+opacity: 1;
+}
+
+/* Add this new style to ensure the event content doesn't overflow */
+.fc-event-main-frame {
+overflow: visible !important;
+}
+
+/* View Toggle Modal styles */
+.view-toggle-modal {
+position: absolute;
+top: 50%;
+left: 50%;
+transform: translate(-50%, -50%);
+background-color: white;
+padding: 30px;
+border-radius: 12px;
+box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+z-index: 9999;
+max-width: 90%;
+width: 300px;
+}
+
+.view-toggle-modal-overlay {
+position: fixed;
+top: 0;
+left: 0;
+right: 0;
+bottom: 0;
+background-color: rgba(0, 0, 0, 0.5);
+z-index: 9998;
+}
+
+.view-toggle-modal h2 {
+margin-top: 0;
+margin-bottom: 20px;
+font-size: 24px;
+text-align: center;
+}
+
+.view-toggle-list {
+display: flex;
+flex-direction: column;
+gap: 10px;
+}
+
+.view-toggle-button {
+background-color: #4CAF50;
+border: none;
+color: white;
+padding: 10px 20px;
+text-align: center;
+text-decoration: none;
+display: inline-block;
+font-size: 16px;
+margin: 4px 2px;
+cursor: pointer;
+border-radius: 4px;
+transition: background-color 0.3s ease;
+}
+
+.view-toggle-button:hover {
+background-color: #45a049;
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..f0f64dd
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { initializeApp } from './services/initService';
+import App from './App';
+import './index.css';
+
+const isDevMode = import.meta.env.VITE_DEV === 'true';
+
+// Initialize the app before rendering
+initializeApp();
+
+// In development, React.StrictMode causes components to render twice
+// This is intentional and helps catch certain bugs, but can be disabled
+// if double-mounting is causing issues with initialization
+const AppWithStrictMode = isDevMode ? (
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+) : (
+  <App />
+);
+
+// Register SW only if we're on the app subdomain
+if ('serviceWorker' in navigator && window.location.hostname.startsWith('app.')) {
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/sw.js').catch(console.error);
+  });
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  AppWithStrictMode
+);
diff --git a/src/pages/.DS_Store b/src/pages/.DS_Store
new file mode 100644
index 0000000..6ae2fb1
Binary files /dev/null and b/src/pages/.DS_Store differ
diff --git a/src/pages/Header.tsx b/src/pages/Header.tsx
new file mode 100644
index 0000000..a0c476e
--- /dev/null
+++ b/src/pages/Header.tsx
@@ -0,0 +1,305 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import { 
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Box,
+  useTheme,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  Divider
+} from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import { 
+  Login as LoginIcon,
+  Logout as LogoutIcon,
+  School as TeacherIcon,
+  Person as StudentIcon,
+  Dashboard as TLDrawDevIcon,
+  Build as DevToolsIcon,
+  Groups as MultiplayerIcon,
+  CalendarToday as CalendarIcon,
+  Assignment as TeacherPlannerIcon,
+  AssignmentTurnedIn as ExamMarkerIcon,
+  Settings as SettingsIcon,
+  Search as SearchIcon,
+  AdminPanelSettings as AdminIcon
+} from '@mui/icons-material';
+import { HEADER_HEIGHT } from './Layout';
+import { logger } from '../debugConfig';
+import { GraphNavigator } from '../components/navigation/GraphNavigator';
+
+const Header: React.FC = () => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user, signOut } = useAuth();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(!!user);
+  const isAdmin = user?.email === import.meta.env.VITE_SUPER_ADMIN_EMAIL;
+  const showGraphNavigation = location.pathname === '/single-player';
+
+  // Update authentication state whenever user changes
+  useEffect(() => {
+    const newAuthState = !!user;
+    setIsAuthenticated(newAuthState);
+    logger.debug('user-context', '🔄 User state changed in header', { 
+      hasUser: newAuthState,
+      userId: user?.id,
+      userEmail: user?.email,
+      userState: newAuthState ? 'logged-in' : 'logged-out',
+      isAdmin
+    });
+  }, [user, isAdmin]);
+
+  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleNavigation = (path: string) => {
+    navigate(path);
+    handleMenuClose();
+  };
+
+  const handleSignupNavigation = (role: 'teacher' | 'student') => {
+    navigate('/signup', { state: { role } });
+    handleMenuClose();
+  };
+
+  const handleSignOut = async () => {
+    try {
+      logger.debug('auth-service', '🔄 Signing out user', { userId: user?.id });
+      await signOut();
+      // Clear local state immediately
+      setIsAuthenticated(false);
+      setAnchorEl(null);
+      logger.debug('auth-service', '✅ User signed out');
+    } catch (error) {
+      logger.error('auth-service', '❌ Error signing out:', error);
+      console.error('Error signing out:', error);
+    }
+  };
+
+  return (
+    <AppBar 
+      position="fixed" 
+      sx={{ 
+        height: `${HEADER_HEIGHT}px`,
+        bgcolor: theme.palette.background.paper,
+        color: theme.palette.text.primary,
+        boxShadow: 1
+      }}
+    >
+      <Toolbar sx={{ 
+        display: 'flex', 
+        justifyContent: 'space-between',
+        minHeight: `${HEADER_HEIGHT}px !important`,
+        height: `${HEADER_HEIGHT}px`,
+        gap: 2,
+        px: { xs: 1, sm: 2 }
+      }}>
+        <Box sx={{ 
+          display: 'flex', 
+          alignItems: 'center', 
+          gap: 2,
+          minWidth: { xs: 'auto', sm: '200px' }
+        }}>
+          <Typography 
+            variant="h6" 
+            component="div"
+            className="app-title"
+            sx={{ 
+              cursor: 'pointer',
+              color: theme.palette.text.primary,
+              '&:hover': {
+                color: theme.palette.primary.main
+              },
+              fontSize: { xs: '1rem', sm: '1.25rem' }
+            }}
+            onClick={() => navigate(isAuthenticated ? '/single-player' : '/')}
+          >
+            ClassroomCopilot
+          </Typography>
+        </Box>
+
+        <Box sx={{ 
+          position: 'absolute',
+          left: '50%',
+          transform: 'translateX(-50%)',
+          display: 'flex', 
+          justifyContent: 'center',
+          visibility: showGraphNavigation ? 'visible' : 'hidden',
+          width: { 
+            xs: 'calc(100% - 160px)', // More space for menu and title
+            sm: 'calc(100% - 200px)',  // Standard spacing
+            md: 'auto'                 // Full width on medium and up
+          },
+          maxWidth: '800px',
+          '& .navigation-controls': {
+            display: { xs: 'none', sm: 'flex' }
+          },
+          '& .context-section': {
+            display: { xs: 'none', md: 'flex' }
+          },
+          '& .context-toggle': {
+            display: 'flex'  // Always show the profile/institute toggle
+          }
+        }}>
+          <GraphNavigator />
+        </Box>
+
+        <Box sx={{ 
+          display: 'flex', 
+          justifyContent: 'flex-end',
+          minWidth: { xs: 'auto', sm: '200px' },
+          ml: 'auto'
+        }}>
+          <IconButton
+            className="menu-button"
+            color="inherit"
+            onClick={handleMenuOpen}
+            edge="end"
+            sx={{ 
+              '&:hover': {
+                bgcolor: theme.palette.action.hover
+              }
+            }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Menu
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl)}
+            onClose={handleMenuClose}
+            slotProps={{
+              paper: {
+                elevation: 3,
+                sx: {
+                  bgcolor: theme.palette.background.paper,
+                  color: theme.palette.text.primary,
+                  minWidth: '240px'
+                }
+              }
+            }}
+          >
+            {isAuthenticated ? [
+                // Development Tools Section
+                <MenuItem key="tldraw" onClick={() => handleNavigation('/tldraw-dev')}>
+                  <ListItemIcon>
+                    <TLDrawDevIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="TLDraw Dev" />
+                </MenuItem>,
+                <MenuItem key="dev" onClick={() => handleNavigation('/dev')}>
+                  <ListItemIcon>
+                    <DevToolsIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Dev Tools" />
+                </MenuItem>,
+                <Divider key="dev-divider" />,
+
+                // Main Features Section
+                <MenuItem key="multiplayer" onClick={() => handleNavigation('/multiplayer')}>
+                  <ListItemIcon>
+                    <MultiplayerIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Multiplayer" />
+                </MenuItem>,
+                <MenuItem key="calendar" onClick={() => handleNavigation('/calendar')}>
+                  <ListItemIcon>
+                    <CalendarIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Calendar" />
+                </MenuItem>,
+                <MenuItem key="planner" onClick={() => handleNavigation('/teacher-planner')}>
+                  <ListItemIcon>
+                    <TeacherPlannerIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Teacher Planner" />
+                </MenuItem>,
+                <MenuItem key="exam" onClick={() => handleNavigation('/exam-marker')}>
+                  <ListItemIcon>
+                    <ExamMarkerIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Exam Marker" />
+                </MenuItem>,
+                <Divider key="features-divider" />,
+
+                // Utilities Section
+                <MenuItem key="settings" onClick={() => handleNavigation('/settings')}>
+                  <ListItemIcon>
+                    <SettingsIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Settings" />
+                </MenuItem>,
+                <MenuItem key="search" onClick={() => handleNavigation('/search')}>
+                  <ListItemIcon>
+                    <SearchIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Search" />
+                </MenuItem>,
+
+                // Admin Section
+                ...(isAdmin ? [
+                  <Divider key="admin-divider" />,
+                  <MenuItem key="admin" onClick={() => handleNavigation('/admin')}>
+                    <ListItemIcon>
+                      <AdminIcon />
+                    </ListItemIcon>
+                    <ListItemText primary="Admin Dashboard" />
+                  </MenuItem>
+                ] : []),
+
+                // Authentication Section
+                <Divider key="auth-divider" />,
+                <MenuItem key="signout" onClick={handleSignOut}>
+                  <ListItemIcon>
+                    <LogoutIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Sign Out" />
+                </MenuItem>
+            ] : [
+                // Authentication Section for Non-authenticated Users
+                <MenuItem key="signin" onClick={() => handleNavigation('/login')}>
+                  <ListItemIcon>
+                    <LoginIcon />
+                  </ListItemIcon>
+                  <ListItemText primary="Sign In" />
+                </MenuItem>,
+                <Divider key="signup-divider" />,
+                <MenuItem key="teacher-signup" onClick={() => handleSignupNavigation('teacher')}>
+                  <ListItemIcon>
+                    <TeacherIcon />
+                  </ListItemIcon>
+                  <ListItemText 
+                    primary="Sign up as Teacher"
+                    secondary="Create a teacher account"
+                  />
+                </MenuItem>,
+                <MenuItem key="student-signup" onClick={() => handleSignupNavigation('student')}>
+                  <ListItemIcon>
+                    <StudentIcon />
+                  </ListItemIcon>
+                  <ListItemText 
+                    primary="Sign up as Student"
+                    secondary="Create a student account"
+                  />
+                </MenuItem>
+            ]}
+          </Menu>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header; 
\ No newline at end of file
diff --git a/src/pages/Layout.tsx b/src/pages/Layout.tsx
new file mode 100644
index 0000000..bc312b4
--- /dev/null
+++ b/src/pages/Layout.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Header from './Header';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export const HEADER_HEIGHT = 40; // in pixels
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  return (
+    <div>
+      <Header />
+      <main className="main-content" style={{ 
+        paddingTop: `${HEADER_HEIGHT}px`,
+        height: '100vh',
+        width: '100%'
+      }}>
+        {children}
+      </main>
+    </div>
+  );
+};
+
+export default Layout; 
\ No newline at end of file
diff --git a/src/pages/NotFoundPublic.tsx b/src/pages/NotFoundPublic.tsx
new file mode 100644
index 0000000..f4b7459
--- /dev/null
+++ b/src/pages/NotFoundPublic.tsx
@@ -0,0 +1,51 @@
+import { useNavigate } from "react-router-dom";
+import { Box, Typography, Button, Container, useTheme } from "@mui/material";
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { logger } from '../debugConfig';
+
+function NotFoundPublic() {
+    const theme = useTheme();
+    const navigate = useNavigate();
+
+    const handleReturn = () => {
+        logger.debug('not-found', '🔄 Public user navigating to home');
+        navigate('/');
+    };
+
+    return (
+        <Container maxWidth="sm">
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: '100vh',
+                    textAlign: 'center',
+                    gap: 3
+                }}
+            >
+                <ErrorOutlineIcon sx={{ fontSize: 60, color: theme.palette.error.main }} />
+                <Typography variant="h2" component="h1" gutterBottom>
+                    404
+                </Typography>
+                <Typography variant="h5" gutterBottom>
+                    Page Not Found
+                </Typography>
+                <Typography variant="body1" color="text.secondary" paragraph>
+                    The page you're looking for doesn't exist or has been moved.
+                </Typography>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    size="large"
+                    onClick={handleReturn}
+                >
+                    Return to Canvas
+                </Button>
+            </Box>
+        </Container>
+    );
+}
+
+export default NotFoundPublic; 
\ No newline at end of file
diff --git a/src/pages/auth/AuthCallback.tsx b/src/pages/auth/AuthCallback.tsx
new file mode 100644
index 0000000..b80cd56
--- /dev/null
+++ b/src/pages/auth/AuthCallback.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export default function AuthCallback() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Redirect to login page since we're no longer supporting external authentication
+    navigate('/login');
+  }, [navigate]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-50">
+      <div className="w-full max-w-md space-y-8 rounded-lg bg-white p-6 shadow-lg">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold text-gray-900">Redirecting...</h2>
+          <p className="mt-2 text-sm text-gray-600">Please wait while we redirect you to the login page...</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
diff --git a/src/pages/auth/EmailLoginForm.tsx b/src/pages/auth/EmailLoginForm.tsx
new file mode 100644
index 0000000..91738d6
--- /dev/null
+++ b/src/pages/auth/EmailLoginForm.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { TextField, Button, Box, Alert } from '@mui/material';
+import { EmailCredentials } from '../../services/auth/authService';
+
+interface EmailLoginFormProps {
+  role: 'email_teacher' | 'email_student';
+  onSubmit: (credentials: EmailCredentials) => Promise<void>;
+}
+
+export const EmailLoginForm: React.FC<EmailLoginFormProps> = ({ role, onSubmit }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      await onSubmit({ email, password, role });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to login');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
+      {error && (
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {error}
+        </Alert>
+      )}
+      
+      <TextField
+        fullWidth
+        label="Email"
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        margin="normal"
+        required
+      />
+      
+      <TextField
+        fullWidth
+        label="Password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        margin="normal"
+        required
+      />
+      
+      <Button
+        type="submit"
+        fullWidth
+        variant="contained"
+        color="primary"
+        disabled={isLoading}
+        sx={{ mt: 3 }}
+      >
+        {isLoading ? 'Logging in...' : 'Login'}
+      </Button>
+    </Box>
+  );
+}; 
\ No newline at end of file
diff --git a/src/pages/auth/EmailSignupForm.tsx b/src/pages/auth/EmailSignupForm.tsx
new file mode 100644
index 0000000..22b4a77
--- /dev/null
+++ b/src/pages/auth/EmailSignupForm.tsx
@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { TextField, Button, Box, Alert, Stack } from '@mui/material';
+import { EmailCredentials } from '../../services/auth/authService';
+import { logger } from '../../debugConfig';
+
+interface EmailSignupFormProps {
+  role: 'email_teacher' | 'email_student';
+  onSubmit: (
+    credentials: EmailCredentials,
+    displayName: string
+  ) => Promise<void>;
+}
+
+export const EmailSignupForm: React.FC<EmailSignupFormProps> = ({
+  role,
+  onSubmit,
+}) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [displayName, setDisplayName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const validateForm = () => {
+    if (!email || !password || !confirmPassword || !displayName) {
+      return 'All fields are required';
+    }
+    if (password !== confirmPassword) {
+      return 'Passwords do not match';
+    }
+    if (password.length < 6) {
+      return 'Password must be at least 6 characters';
+    }
+    if (!email.includes('@')) {
+      return 'Please enter a valid email address';
+    }
+    return null;
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const validationError = validateForm();
+    if (validationError) {
+      setError(validationError);
+      return;
+    }
+
+    setError(null);
+    setIsLoading(true);
+
+    try {
+      logger.debug('email-signup-form', '🔄 Submitting signup form', {
+        email,
+        role,
+        hasDisplayName: !!displayName,
+      });
+
+      await onSubmit({ email, password, role }, displayName);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'An error occurred during signup'
+      );
+      logger.error(
+        'email-signup-form',
+        '❌ Signup form submission failed',
+        err
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Box component="form" onSubmit={handleSubmit} noValidate>
+      <Stack spacing={2}>
+        <TextField
+          required
+          fullWidth
+          id="displayName"
+          label="Display Name"
+          name="displayName"
+          autoComplete="name"
+          value={displayName}
+          onChange={(e) => setDisplayName(e.target.value)}
+          autoFocus
+        />
+
+        <TextField
+          required
+          fullWidth
+          id="email"
+          label="Email Address"
+          name="email"
+          autoComplete="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+
+        <TextField
+          required
+          fullWidth
+          name="password"
+          label="Password"
+          type="password"
+          id="password"
+          autoComplete="new-password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+
+        <TextField
+          required
+          fullWidth
+          name="confirmPassword"
+          label="Confirm Password"
+          type="password"
+          id="confirmPassword"
+          autoComplete="new-password"
+          value={confirmPassword}
+          onChange={(e) => setConfirmPassword(e.target.value)}
+        />
+
+        {error && <Alert severity="error">{error}</Alert>}
+
+        <Button
+          type="submit"
+          fullWidth
+          variant="contained"
+          disabled={
+            isLoading || !email || !password || !confirmPassword || !displayName
+          }
+        >
+          {isLoading ? 'Signing up...' : 'Sign Up'}
+        </Button>
+      </Stack>
+    </Box>
+  );
+};
diff --git a/src/pages/auth/adminPage.tsx b/src/pages/auth/adminPage.tsx
new file mode 100644
index 0000000..fb23e0d
--- /dev/null
+++ b/src/pages/auth/adminPage.tsx
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { Container, Box, Typography, Tabs, Tab, Paper, Button } from '@mui/material';
+import { useNavigate } from 'react-router';
+import { useAuth } from '../../contexts/AuthContext';
+import { SchoolUploadSection } from '../components/admin/SchoolUploadSection';
+import { TimetableUploadSection } from '../components/admin/TimetableUploadSection';
+import { logger } from '../../debugConfig';
+
+const SUPER_ADMIN_EMAIL = import.meta.env.VITE_SUPER_ADMIN_EMAIL;
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+  return (
+    <div hidden={value !== index} {...other}>
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+export default function AdminDashboard() {
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [tabValue, setTabValue] = useState(0);
+  
+  const isSuperAdmin = user?.email === SUPER_ADMIN_EMAIL;
+  
+  logger.debug('admin-page', '🔍 Super admin check', {
+    userEmail: user?.email,
+    superAdminEmail: SUPER_ADMIN_EMAIL,
+    isMatch: isSuperAdmin
+  });
+
+  const handleReturn = () => {
+    logger.info('admin-page', '🏠 Returning to single player page');
+    navigate('/single-player');
+  };
+
+  if (!isSuperAdmin) {
+    logger.error('admin-page', '🚫 Unauthorized access attempt', {
+      userEmail: user?.email,
+      requiredEmail: SUPER_ADMIN_EMAIL
+    });
+    return (
+      <Container>
+        <Typography variant="h4" color="error">Unauthorized Access</Typography>
+        <Button 
+          onClick={handleReturn}
+          variant="contained" 
+          sx={{ mt: 2 }}
+        >
+          Return to User Page
+        </Button>
+      </Container>
+    );
+  }
+
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  return (
+    <Container maxWidth="lg" sx={{ mt: 4 }}>
+      <Box sx={{ 
+        display: 'flex', 
+        justifyContent: 'space-between', 
+        alignItems: 'center',
+        mb: 2 
+      }}>
+        <Typography variant="h4">Admin Dashboard</Typography>
+        <Button 
+          onClick={handleReturn}
+          variant="outlined"
+        >
+          Return to User Page
+        </Button>
+      </Box>
+
+      <Paper sx={{ width: '100%', mb: 2 }}>
+        <Tabs value={tabValue} onChange={handleTabChange}>
+          <Tab label="System Settings" />
+          <Tab label="Database Management" />
+          <Tab label="User Management" />
+          <Tab label="Schools" />
+          <Tab label="Timetables" />
+        </Tabs>
+        <TabPanel value={tabValue} index={0}>
+          <Typography variant="h6">System Settings</Typography>
+          {/* Add system settings components here */}
+        </TabPanel>
+        <TabPanel value={tabValue} index={1}>
+          <Typography variant="h6">Database Management</Typography>
+          {/* Add database management components here */}
+        </TabPanel>
+        <TabPanel value={tabValue} index={2}>
+          <Typography variant="h6">User Management</Typography>
+          {/* Add user management components here */}
+        </TabPanel>
+        <TabPanel value={tabValue} index={3}>
+          <SchoolUploadSection />
+        </TabPanel>
+        <TabPanel value={tabValue} index={4}>
+          <TimetableUploadSection />
+        </TabPanel>
+      </Paper>
+    </Container>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/auth/loginPage.tsx b/src/pages/auth/loginPage.tsx
new file mode 100644
index 0000000..7f53654
--- /dev/null
+++ b/src/pages/auth/loginPage.tsx
@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Container, Typography, Box, Alert } from '@mui/material';
+import { useAuth } from '../../contexts/AuthContext';
+import { EmailLoginForm } from './EmailLoginForm';
+import { EmailCredentials } from '../../services/auth/authService';
+import { logger } from '../../debugConfig';
+
+const LoginPage: React.FC = () => {
+  const navigate = useNavigate();
+  const { user, signIn } = useAuth();
+  const [error, setError] = useState<string | null>(null);
+
+  logger.debug('login-page', '🔍 Login page loaded', { 
+    hasUser: !!user
+  });
+
+  useEffect(() => {
+    if (user) {
+      navigate('/single-player');
+    }
+  }, [user, navigate]);
+
+  const handleLogin = async (credentials: EmailCredentials) => {
+    try {
+      setError(null);
+      await signIn(credentials.email, credentials.password);
+      navigate('/single-player');
+    } catch (error) {
+      logger.error('login-page', '❌ Login failed', error);
+      setError(error instanceof Error ? error.message : 'Login failed');
+      throw error;
+    }
+  };
+
+  if (user) {
+    return null;
+  }
+
+  return (
+    <Container 
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        gap: 4
+      }}
+    >
+      <Typography variant="h2" component="h1" gutterBottom>
+        ClassroomCopilot.ai
+      </Typography>
+
+      <Typography variant="h4" gutterBottom>
+        Login
+      </Typography>
+
+      {error && (
+        <Alert severity="error" sx={{ width: '100%', maxWidth: 400 }}>
+          {error}
+        </Alert>
+      )}
+
+      <Box sx={{ width: '100%', maxWidth: 400 }}>
+        <EmailLoginForm 
+          role="email_teacher"
+          onSubmit={handleLogin}
+        />
+      </Box>
+    </Container>
+  );
+};
+
+export default LoginPage; 
\ No newline at end of file
diff --git a/src/pages/auth/signupPage.tsx b/src/pages/auth/signupPage.tsx
new file mode 100644
index 0000000..7809c1e
--- /dev/null
+++ b/src/pages/auth/signupPage.tsx
@@ -0,0 +1,120 @@
+import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import {
+  Container,
+  Typography,
+  Box,
+  Button,
+  Stack,
+  Divider,
+} from '@mui/material';
+import { useAuth } from '../../contexts/AuthContext';
+import { EmailSignupForm } from './EmailSignupForm';
+import { EmailCredentials } from '../../services/auth/authService';
+import { RegistrationService } from '../../services/auth/registrationService';
+import { logger } from '../../debugConfig';
+import MicrosoftIcon from '@mui/icons-material/Microsoft';
+
+const SignupPage: React.FC = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { user } = useAuth();
+  const registrationService = RegistrationService.getInstance();
+
+  // Get role from location state, default to teacher
+  const { role = 'teacher' } = location.state || {};
+  const roleDisplay = role === 'teacher' ? 'Teacher' : 'Student';
+
+  logger.debug('signup-page', '🔍 Signup page loaded', {
+    role,
+    hasUser: !!user,
+  });
+
+  useEffect(() => {
+    if (user) {
+      navigate('/single-player');
+    }
+  }, [user, navigate]);
+
+  const handleSignup = async (
+    credentials: EmailCredentials,
+    displayName: string
+  ) => {
+    try {
+      const result = await registrationService.register(
+        credentials,
+        displayName
+      );
+      if (result.user) {
+        navigate('/single-player');
+      }
+    } catch (error) {
+      logger.error('signup-page', '❌ Registration failed', error);
+      throw error;
+    }
+  };
+
+  const switchRole = () => {
+    navigate('/signup', {
+      state: { role: role === 'teacher' ? 'student' : 'teacher' },
+    });
+  };
+
+  if (user) {
+    return null;
+  }
+
+  return (
+    <Container
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+        gap: 4,
+      }}
+    >
+      <Typography variant="h2" component="h1" gutterBottom>
+        ClassroomCopilot.ai
+      </Typography>
+
+      <Typography variant="h4" gutterBottom>
+        {roleDisplay} Sign Up
+      </Typography>
+
+      <Box sx={{ width: '100%', maxWidth: 400 }}>
+        <Button
+          fullWidth
+          variant="outlined"
+          startIcon={<MicrosoftIcon />}
+          onClick={() => {}}
+          sx={{ mb: 3 }}
+        >
+          Sign up with Microsoft
+        </Button>
+
+        <Divider sx={{ my: 2 }}>OR</Divider>
+
+        <EmailSignupForm
+          role={`email_${role}` as 'email_teacher' | 'email_student'}
+          onSubmit={handleSignup}
+        />
+
+        <Stack
+          direction="row"
+          spacing={2}
+          justifyContent="center"
+          sx={{ mt: 3 }}
+        >
+          <Button variant="text" onClick={switchRole}>
+            Switch to {role === 'teacher' ? 'Student' : 'Teacher'} Sign Up
+          </Button>
+        </Stack>
+      </Box>
+    </Container>
+  );
+};
+
+export default SignupPage;
+
diff --git a/src/pages/components/admin/SchoolUploadSection.tsx b/src/pages/components/admin/SchoolUploadSection.tsx
new file mode 100644
index 0000000..890d46e
--- /dev/null
+++ b/src/pages/components/admin/SchoolUploadSection.tsx
@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Button, Box, Typography, Alert } from '@mui/material';
+import { logger } from '../../../debugConfig';
+import { SchoolNeoDBService } from '../../../services/graph/schoolNeoDBService';
+
+export const SchoolUploadSection = () => {
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState<string | null>(null);
+    const [isCreating, setIsCreating] = useState(false);
+
+    const handleSchoolUpload = async () => {
+        try {
+            setIsCreating(true);
+            setError(null);
+            setSuccess(null);
+
+            const result = await SchoolNeoDBService.createSchools();
+            setSuccess(result.message);
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to upload school';
+            logger.error('admin-page', '❌ School upload failed:', error);
+            setError(errorMessage);
+        } finally {
+            setIsCreating(false);
+        }
+    };
+
+    return (
+        <Box sx={{ mt: 4 }}>
+            <Typography variant="h6" gutterBottom>
+                Create Schools
+            </Typography>
+
+            {error && (
+                <Alert severity="error" sx={{ mb: 2 }}>
+                    {error}
+                </Alert>
+            )}
+
+            {success && (
+                <Alert severity="success" sx={{ mb: 2 }}>
+                    {success}
+                </Alert>
+            )}
+
+            <Button
+                variant="contained"
+                onClick={handleSchoolUpload}
+                disabled={isCreating}
+            >
+                {isCreating ? 'Creating...' : 'Create Schools'}
+            </Button>
+        </Box>
+    );
+}; 
\ No newline at end of file
diff --git a/src/pages/components/admin/TimetableUploadSection.tsx b/src/pages/components/admin/TimetableUploadSection.tsx
new file mode 100644
index 0000000..8e347fd
--- /dev/null
+++ b/src/pages/components/admin/TimetableUploadSection.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Button, Box, Typography, Alert } from '@mui/material';
+import { useNeoUser } from '../../../contexts/NeoUserContext';
+import { TimetableNeoDBService } from '../../../services/graph/timetableNeoDBService';
+import { CCTeacherNodeProps } from '../../../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+
+export const TimetableUploadSection = () => {
+    const { userNode, workerNode } = useNeoUser();
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState<string | null>(null);
+    const [isUploading, setIsUploading] = useState(false);
+
+    const handleTimetableUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        try {
+            setIsUploading(true);
+            setError(null);
+            setSuccess(null);
+
+            const result = await TimetableNeoDBService.handleTimetableUpload(
+                event.target.files?.[0],
+                userNode || undefined,
+                workerNode?.nodeData as CCTeacherNodeProps | undefined
+            );
+
+            if (result.success) {
+                setSuccess(result.message);
+            } else {
+                setError(result.message);
+            }
+        } finally {
+            setIsUploading(false);
+            if (event.target) {
+                event.target.value = '';
+            }
+        }
+    };
+
+    return (
+        <Box sx={{ mt: 4 }}>
+            <Typography variant="h6" gutterBottom>
+                Upload Teacher Timetable
+            </Typography>
+
+            {error && (
+                <Alert severity="error" sx={{ mb: 2 }}>
+                    {error}
+                </Alert>
+            )}
+
+            {success && (
+                <Alert severity="success" sx={{ mb: 2 }}>
+                    {success}
+                </Alert>
+            )}
+
+            <Button
+                variant="contained"
+                component="label"
+                disabled={isUploading || !workerNode}
+            >
+                {isUploading ? 'Uploading...' : 'Upload Timetable'}
+                <input
+                    type="file"
+                    hidden
+                    accept=".xlsx"
+                    onChange={handleTimetableUpload}
+                    disabled={isUploading}
+                />
+            </Button>
+
+            {!workerNode && (
+                <Typography color="error" sx={{ mt: 1 }}>
+                    No teacher node found. Please ensure you have the correct permissions.
+                </Typography>
+            )}
+        </Box>
+    );
+}; 
\ No newline at end of file
diff --git a/src/pages/components/auth/LoginForm.tsx b/src/pages/components/auth/LoginForm.tsx
new file mode 100644
index 0000000..4e7f9b8
--- /dev/null
+++ b/src/pages/components/auth/LoginForm.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Button, TextField } from '@mui/material';
+import { EmailCredentials } from '../../../services/auth/authService';
+import { logger } from '../../../debugConfig';
+
+interface LoginFormProps {
+  role: 'email_teacher' | 'email_student';
+  onSubmit: (credentials: EmailCredentials) => Promise<void>;
+}
+
+export const LoginForm: React.FC<LoginFormProps> = ({ role, onSubmit }) => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    logger.debug('login-form', '🔄 Submitting login form', { role });
+    await onSubmit({ email, password, role });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="login-form">
+      <TextField
+        label="Email"
+        variant="outlined"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        fullWidth
+        autoComplete="new-username"
+      />
+      <TextField
+        label="Password"
+        type="password"
+        variant="outlined"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        fullWidth
+        autoComplete="new-password"
+      />
+      <Button type="submit" variant="contained" fullWidth>
+        Login
+      </Button>
+    </form>
+  );
+}; 
\ No newline at end of file
diff --git a/src/pages/components/auth/SuperAdminSection.tsx b/src/pages/components/auth/SuperAdminSection.tsx
new file mode 100644
index 0000000..0292208
--- /dev/null
+++ b/src/pages/components/auth/SuperAdminSection.tsx
@@ -0,0 +1,23 @@
+import { Button } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import { logger } from '../../../debugConfig';
+
+export const SuperAdminSection = () => {
+    const navigate = useNavigate();
+
+    const handleAdminClick = () => {
+        logger.info('super-admin-section', '🔑 Navigating to admin page');
+        navigate('/admin');
+    };
+
+    return (
+        <Button 
+            onClick={handleAdminClick}
+            variant="contained" 
+            color="warning"
+            sx={{ mb: 2 }}
+        >
+            Admin Dashboard
+        </Button>
+    );
+}; 
\ No newline at end of file
diff --git a/src/pages/components/common/LoadingSpinner.tsx b/src/pages/components/common/LoadingSpinner.tsx
new file mode 100644
index 0000000..e18f6ce
--- /dev/null
+++ b/src/pages/components/common/LoadingSpinner.tsx
@@ -0,0 +1,12 @@
+import { CircularProgress, Box } from '@mui/material';
+
+export const LoadingSpinner = () => (
+  <Box 
+    display="flex" 
+    justifyContent="center" 
+    alignItems="center" 
+    minHeight="100vh"
+  >
+    <CircularProgress />
+  </Box>
+); 
\ No newline at end of file
diff --git a/src/pages/morphicPage.tsx b/src/pages/morphicPage.tsx
new file mode 100644
index 0000000..04a4150
--- /dev/null
+++ b/src/pages/morphicPage.tsx
@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { Container, Typography, CircularProgress } from '@mui/material';
+import { logger } from '../debugConfig';
+
+const MorphicPage: React.FC = () => {
+  useEffect(() => {
+    // Redirect to the nginx-handled /morphic URL
+    window.location.href = '/morphic';
+    logger.debug('morphic-page', '🔄 Redirecting to Morphic');
+  }, []);
+
+  return (
+    <Container sx={{ 
+      display: 'flex', 
+      flexDirection: 'column', 
+      alignItems: 'center', 
+      justifyContent: 'center', 
+      height: '100vh' 
+    }}>
+      <Typography variant="h5" gutterBottom>
+        Redirecting to Morphic...
+      </Typography>
+      <CircularProgress />
+    </Container>
+  );
+};
+
+export default MorphicPage; 
\ No newline at end of file
diff --git a/src/pages/react-flow/teacherPlanner.tsx b/src/pages/react-flow/teacherPlanner.tsx
new file mode 100644
index 0000000..acb06ba
--- /dev/null
+++ b/src/pages/react-flow/teacherPlanner.tsx
@@ -0,0 +1,67 @@
+import { useCallback } from 'react';
+import {
+    ReactFlow,
+    MiniMap,
+    Controls,
+    Background,
+    useNodesState,
+    useEdgesState,
+    Node,
+    Edge,
+    Connection,
+    addEdge,
+    BackgroundVariant
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+const initialNodes: Node[] = [
+    {
+        id: '1',
+        type: 'input',
+        data: { label: 'Teacher Node' },
+        position: { x: 250, y: 25 },
+    },
+    {
+        id: '2',
+        data: { label: 'Class Node' },
+        position: { x: 100, y: 125 },
+    },
+    {
+        id: '3',
+        type: 'output',
+        data: { label: 'Student Node' },
+        position: { x: 400, y: 125 },
+    },
+];
+
+const initialEdges: Edge[] = [
+    { id: 'e1-2', source: '1', target: '2' },
+    { id: 'e1-3', source: '1', target: '3' },
+];
+
+export default function TeacherPlanner() {
+    const [nodes, , onNodesChange] = useNodesState(initialNodes);
+    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+    const onConnect = useCallback(
+        (params: Connection) => setEdges((eds) => addEdge(params, eds)),
+        [setEdges],
+    );
+
+    return (
+        <div style={{ width: '100vw', height: '100vh' }}>
+            <ReactFlow
+                nodes={nodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onConnect={onConnect}
+                fitView
+            >
+                <Controls />
+                <MiniMap />
+                <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
+            </ReactFlow>
+        </div>
+    );
+}
diff --git a/src/pages/searxngPage.tsx b/src/pages/searxngPage.tsx
new file mode 100644
index 0000000..15845d0
--- /dev/null
+++ b/src/pages/searxngPage.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { HEADER_HEIGHT } from './Layout';
+
+const SearxngPage: React.FC = () => {
+  return (
+    <Box sx={{ 
+      position: 'absolute',
+      top: HEADER_HEIGHT,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      overflow: 'hidden',
+      bgcolor: 'background.default'
+    }}>
+      <iframe
+        src={`${import.meta.env.VITE_FRONTEND_SITE_URL}/searxng-api/`}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 'none',
+          display: 'block'
+        }}
+        title="SearXNG Search"
+      />
+    </Box>
+  );
+};
+
+export default SearxngPage;
diff --git a/src/pages/tldraw/CCExamMarker/AnnotationManager.ts b/src/pages/tldraw/CCExamMarker/AnnotationManager.ts
new file mode 100644
index 0000000..cd3450a
--- /dev/null
+++ b/src/pages/tldraw/CCExamMarker/AnnotationManager.ts
@@ -0,0 +1,92 @@
+import { TLShapeId } from '@tldraw/tldraw';
+
+export interface AnnotationData {
+  studentIndex?: number;  // undefined for exam/markscheme annotations
+  pageIndex: number;
+  shapeId: TLShapeId;
+  bounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+}
+
+export class AnnotationManager {
+  private examAnnotations: Set<TLShapeId> = new Set();
+  private markSchemeAnnotations: Set<TLShapeId> = new Set();
+  private studentAnnotations: Map<number, Set<TLShapeId>> = new Map();
+  private annotationData: Map<TLShapeId, AnnotationData> = new Map();
+
+  addAnnotation(shapeId: TLShapeId, data: AnnotationData) {
+    this.annotationData.set(shapeId, data);
+    
+    if (data.studentIndex !== undefined) {
+      // Student response annotation
+      let studentSet = this.studentAnnotations.get(data.studentIndex);
+      if (!studentSet) {
+        studentSet = new Set();
+        this.studentAnnotations.set(data.studentIndex, studentSet);
+      }
+      studentSet.add(shapeId);
+    } else {
+      // Exam or mark scheme annotation
+      if (data.pageIndex < 0) {
+        this.examAnnotations.add(shapeId);
+      } else {
+        this.markSchemeAnnotations.add(shapeId);
+      }
+    }
+  }
+
+  removeAnnotation(shapeId: TLShapeId) {
+    const data = this.annotationData.get(shapeId);
+    if (!data) return;
+
+    if (data.studentIndex !== undefined) {
+      const studentSet = this.studentAnnotations.get(data.studentIndex);
+      studentSet?.delete(shapeId);
+    } else {
+      if (data.pageIndex < 0) {
+        this.examAnnotations.delete(shapeId);
+      } else {
+        this.markSchemeAnnotations.delete(shapeId);
+      }
+    }
+    this.annotationData.delete(shapeId);
+  }
+
+  getAnnotationsForStudent(studentIndex: number): TLShapeId[] {
+    return Array.from(this.studentAnnotations.get(studentIndex) || []);
+  }
+
+  getAnnotationsForExam(): TLShapeId[] {
+    return Array.from(this.examAnnotations);
+  }
+
+  getAnnotationsForMarkScheme(): TLShapeId[] {
+    return Array.from(this.markSchemeAnnotations);
+  }
+
+  getAnnotationData(shapeId: TLShapeId): AnnotationData | undefined {
+    return this.annotationData.get(shapeId);
+  }
+
+  clear() {
+    this.examAnnotations.clear();
+    this.markSchemeAnnotations.clear();
+    this.studentAnnotations.clear();
+    this.annotationData.clear();
+  }
+
+  // Future transcription support
+  addTranscriptionToAnnotation(shapeId: TLShapeId) {
+    const data = this.annotationData.get(shapeId);
+    if (data) {
+      this.annotationData.set(shapeId, {
+        ...data
+      });
+    }
+  }
+
+} 
\ No newline at end of file
diff --git a/src/pages/tldraw/CCExamMarker/CCExamMarker.tsx b/src/pages/tldraw/CCExamMarker/CCExamMarker.tsx
new file mode 100644
index 0000000..c965891
--- /dev/null
+++ b/src/pages/tldraw/CCExamMarker/CCExamMarker.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { Box } from '@mui/material';
+import 'tldraw/tldraw.css';
+import { CCPdfEditor } from './CCPdfEditor';
+import { CCPdfPicker } from './CCPdfPicker';
+import { ExamPdfState } from './types';
+import './cc-exam-marker.css';
+import { HEADER_HEIGHT } from '../../Layout';
+import { CCPanel } from '../../../utils/tldraw/ui-overrides/components/CCPanel';
+
+export const CCExamMarker = () => {
+  const [state, setState] = useState<ExamPdfState>({ phase: 'pick' });
+  const [view, setView] = useState<'exam-and-markscheme' | 'student-responses'>('exam-and-markscheme');
+  const [currentStudentIndex, setCurrentStudentIndex] = useState(0);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isPinned, setIsPinned] = useState(false);
+
+  const handleViewChange = (newView: 'exam-and-markscheme' | 'student-responses') => {
+    setView(newView);
+  };
+
+  const handleNextStudent = () => {
+    if (state.phase === 'edit' && 'studentResponses' in state && 'examPaper' in state) {
+      const totalStudents = Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length);
+      if (currentStudentIndex < totalStudents - 1) {
+        setCurrentStudentIndex(prev => prev + 1);
+      }
+    }
+  };
+
+  const handlePreviousStudent = () => {
+    if (currentStudentIndex > 0) {
+      setCurrentStudentIndex(prev => prev - 1);
+    }
+  };
+
+  return (
+    <Box sx={{ 
+      position: 'fixed',
+      inset: 0,
+      top: `${HEADER_HEIGHT}px`,
+      display: 'flex',
+      flexDirection: 'column',
+      bgcolor: 'background.default',
+      color: 'text.primary',
+    }}>
+      {state.phase === 'pick' ? (
+        <CCPdfPicker 
+          onOpenPdfs={(pdfs) =>
+            setState({
+              phase: 'edit',
+              examPaper: pdfs.examPaper,
+              markScheme: pdfs.markScheme,
+              studentResponses: pdfs.studentResponses,
+            })
+          }
+        />
+      ) : (
+        <Box sx={{ flex: 1, position: 'relative' }}>
+          <Box sx={{ 
+            position: 'absolute',
+            inset: 0,
+            bgcolor: 'background.paper',
+          }}>
+            <CCPdfEditor
+              examPaper={state.examPaper}
+              markScheme={state.markScheme}
+              studentResponses={state.studentResponses}
+              currentView={view}
+              currentStudentIndex={currentStudentIndex}
+              onEditorMount={(editor) => {
+                if (!editor) return null;
+                const examMarkerProps = {
+                  editor,
+                  currentView: view,
+                  onViewChange: handleViewChange,
+                  currentStudentIndex,
+                  totalStudents: Math.floor(state.studentResponses.pages.length / state.examPaper.pages.length),
+                  onPreviousStudent: handlePreviousStudent,
+                  onNextStudent: handleNextStudent,
+                  getCurrentPdf: () => {
+                    if (!editor) return null;
+                    const currentPageId = editor.getCurrentPageId();
+                    if (currentPageId.includes('exam-page')) {
+                      return state.examPaper;
+                    } else if (currentPageId.includes('mark-scheme-page')) {
+                      return state.markScheme;
+                    } else if (currentPageId.includes('student-response')) {
+                      return state.studentResponses;
+                    }
+                    return null;
+                  },
+                };
+                return <CCPanel 
+                  examMarkerProps={examMarkerProps} 
+                  isExpanded={isExpanded}
+                  isPinned={isPinned}
+                  onExpandedChange={setIsExpanded}
+                  onPinnedChange={setIsPinned}
+                />;
+              }}
+            />
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
diff --git a/src/pages/tldraw/CCExamMarker/CCExportPdfButton.tsx b/src/pages/tldraw/CCExamMarker/CCExportPdfButton.tsx
new file mode 100644
index 0000000..585f4b7
--- /dev/null
+++ b/src/pages/tldraw/CCExamMarker/CCExportPdfButton.tsx
@@ -0,0 +1,113 @@
+import { PDFDocument } from 'pdf-lib';
+import { useState } from 'react';
+import { Editor, exportToBlob } from '@tldraw/tldraw';
+import { Button } from '@mui/material';
+import { Pdf } from './types';
+
+interface CCExportPdfButtonProps {
+  editor: Editor;
+  pdf: Pdf;
+}
+
+export function CCExportPdfButton({ editor, pdf }: CCExportPdfButtonProps) {
+  const [exportProgress, setExportProgress] = useState<number | null>(null);
+
+  const exportPdf = async (
+    editor: Editor,
+    { name, source, pages }: Pdf,
+    onProgress: (progress: number) => void
+  ) => {
+    const totalThings = pages.length * 2 + 2;
+    let progressCount = 0;
+    const tickProgress = () => {
+      progressCount++;
+      onProgress(progressCount / totalThings);
+    };
+
+    const pdf = await PDFDocument.load(source);
+    tickProgress();
+    const pdfPages = pdf.getPages();
+
+    if (pdfPages.length !== pages.length) {
+      throw new Error('PDF page count mismatch');
+    }
+
+    const pageShapeIds = new Set(pages.map((page) => page.shapeId));
+    const allIds = Array.from(editor.getCurrentPageShapeIds()).filter(
+      (id) => !pageShapeIds.has(id)
+    );
+
+    for (let i = 0; i < pages.length; i++) {
+      const page = pages[i];
+      const pdfPage = pdfPages[i];
+      const {bounds} = page;
+
+      const shapesInBounds = allIds.filter((id) => {
+        const shapePageBounds = editor.getShapePageBounds(id);
+        if (!shapePageBounds) return false;
+        return shapePageBounds.collides(bounds);
+      });
+
+      if (shapesInBounds.length === 0) {
+        tickProgress();
+        tickProgress();
+        continue;
+      }
+
+      const exportedPng = await exportToBlob({
+        editor,
+        ids: allIds,
+        format: 'png',
+        opts: { background: false, bounds: page.bounds, padding: 0, scale: 1 },
+      });
+
+      tickProgress();
+
+      pdfPage.drawImage(await pdf.embedPng(await exportedPng.arrayBuffer()), {
+        x: 0,
+        y: 0,
+        width: pdfPage.getWidth(),
+        height: pdfPage.getHeight(),
+      });
+
+      tickProgress();
+    }
+
+    const url = URL.createObjectURL(
+      new Blob([await pdf.save()], { type: 'application/pdf' })
+    );
+    tickProgress();
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Button
+      className="CCExportPdfButton"
+      variant="contained"
+      color="primary"
+      onClick={async () => {
+        setExportProgress(0);
+        try {
+          await exportPdf(editor, pdf, setExportProgress);
+        } finally {
+          setExportProgress(null);
+        }
+      }}
+      sx={{
+        position: 'absolute',
+        top: 16,
+        right: 16,
+        zIndex: 1000,
+      }}
+    >
+      {exportProgress
+        ? `Exporting... ${Math.round(exportProgress * 100)}%`
+        : 'Export PDF'}
+    </Button>
+  );
+} 
\ No newline at end of file
diff --git a/src/pages/tldraw/CCExamMarker/CCPdfEditor.tsx b/src/pages/tldraw/CCExamMarker/CCPdfEditor.tsx
new file mode 100644
index 0000000..4e1b90c
--- /dev/null
+++ b/src/pages/tldraw/CCExamMarker/CCPdfEditor.tsx
@@ -0,0 +1,385 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { Editor, TLPageId, Box as TLBox } from '@tldraw/editor';
+import { Tldraw } from '@tldraw/tldraw';
+import { useCallback, useEffect, useState, useRef } from 'react';
+import { ExamPdfs } from './types';
+import { AnnotationManager, AnnotationData } from './AnnotationManager';
+import { logger } from '../../../debugConfig';
+
+const PAGE_SPACING = 32; // Same spacing as the example
+
+interface CCPdfEditorProps extends ExamPdfs {
+  currentView: 'exam-and-markscheme' | 'student-responses';
+  currentStudentIndex: number;
+  onEditorMount: (editor: Editor) => React.ReactNode;
+}
+
+export function CCPdfEditor({
+  examPaper,
+  markScheme,
+  studentResponses,
+  currentView,
+  currentStudentIndex,
+  onEditorMount,
+}: CCPdfEditorProps) {
+  const [editor, setEditor] = useState<Editor | null>(null);
+  const [pagesInitialized, setPagesInitialized] = useState(false);
+  const annotationManager = useRef(new AnnotationManager());
+
+  const handleMount = useCallback((editor: Editor) => {
+    setEditor(editor);
+    onEditorMount(editor);
+
+    // Subscribe to shape changes
+    editor.on('change', () => {
+      const shapes = editor.getCurrentPageShapeIds();
+      logger.debug('cc-exam-marker', '🔄 Shape change detected', {
+        totalShapes: shapes.size,
+        currentPage: editor.getCurrentPageId()
+      });
+
+      shapes.forEach(shapeId => {
+        const shape = editor.getShape(shapeId);
+        if (shape && !shape.isLocked) {  // Only track non-locked shapes (annotations)
+          const bounds = editor.getShapePageBounds(shapeId);
+          if (bounds) {
+            const currentPageId = editor.getCurrentPageId();
+            let annotationData: AnnotationData;
+
+            if (currentPageId.includes('student-response')) {
+              const studentIndex = parseInt(currentPageId.split('-').pop() || '0', 10);
+              
+              // Find which page this annotation belongs to by checking collision with page bounds
+              const pageShapes = Array.from(shapes).filter(id => {
+                const s = editor.getShape(id);
+                return s?.isLocked;  // Locked shapes are our PDF pages
+              });
+
+              let pageIndex = -1;  // Default to -1 if no collision found
+              for (let i = 0; i < pageShapes.length; i++) {
+                const pageShape = editor.getShape(pageShapes[i]);
+                if (!pageShape) continue;
+                
+                const pageBounds = editor.getShapePageBounds(pageShapes[i]);
+                if (!pageBounds) continue;
+
+                // Check if the annotation's center point is within the page bounds
+                const annotationCenter = {
+                  x: bounds.x + bounds.width / 2,
+                  y: bounds.y + bounds.height / 2
+                };
+
+                if (annotationCenter.x >= pageBounds.x && 
+                    annotationCenter.x <= pageBounds.x + pageBounds.width &&
+                    annotationCenter.y >= pageBounds.y && 
+                    annotationCenter.y <= pageBounds.y + pageBounds.height) {
+                  pageIndex = i;
+                  break;
+                }
+              }
+
+              logger.debug('cc-exam-marker', '📏 Calculated page index', {
+                shapeId,
+                shapeBounds: bounds,
+                pageIndex,
+                studentIndex
+              });
+
+              annotationData = {
+                studentIndex,
+                pageIndex,
+                shapeId,
+                bounds: {
+                  x: bounds.x,
+                  y: bounds.y,
+                  width: bounds.width,
+                  height: bounds.height,
+                }
+              };
+            } else {
+              // For exam/mark scheme, use current page type as index
+              const pageIndex = currentPageId.includes('exam') ? -1 : 1;
+              annotationData = {
+                pageIndex,
+                shapeId,
+                bounds: {
+                  x: bounds.x,
+                  y: bounds.y,
+                  width: bounds.width,
+                  height: bounds.height,
+                }
+              };
+            }
+
+            logger.debug('cc-exam-marker', '📝 Adding/updating annotation', {
+              shapeId,
+              annotationData,
+              currentPage: currentPageId
+            });
+
+            annotationManager.current.addAnnotation(shapeId, annotationData);
+          }
+        }
+      });
+    });
+  }, [onEditorMount]);
+
+  // Initial setup effect - runs only once when editor is mounted
+  useEffect(() => {
+    if (!editor || pagesInitialized) return;
+
+    const setupExamAndMarkScheme = async () => {
+      const examPageId = 'page:exam-page' as TLPageId;
+      const markSchemePageId = 'page:mark-scheme-page' as TLPageId;
+
+      // Calculate vertical layout for exam pages
+      let top = 0;
+      let widest = 0;
+      const examPages = examPaper.pages.map(page => {
+        const width = page.bounds.width;
+        const height = page.bounds.height;
+        const currentTop = top;
+        top += height + PAGE_SPACING;
+        widest = Math.max(widest, width);
+        return { ...page, top: currentTop, width, height };
+      });
+
+      // Center pages horizontally
+      examPages.forEach(page => {
+        page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
+      });
+
+      // Create exam paper page
+      editor.createPage({ 
+        id: examPageId,
+        name: 'Exam Paper',
+      });
+      editor.setCurrentPage(examPageId);
+
+      // Create assets and shapes for exam pages
+      examPages.forEach((page) => {
+        editor.createAssets([{
+          id: page.assetId,
+          typeName: 'asset',
+          type: 'image',
+          props: {
+            w: page.bounds.width,
+            h: page.bounds.height,
+            name: 'PDF Page',
+            src: page.src,
+            isAnimated: false,
+            mimeType: 'image/png',
+          },
+          meta: {},
+        }]);
+
+        editor.createShape({
+          id: page.shapeId,
+          type: 'image',
+          x: page.bounds.x,
+          y: page.bounds.y,
+          props: {
+            w: page.bounds.width,
+            h: page.bounds.height,
+            assetId: page.assetId,
+          },
+          isLocked: true,
+        });
+      });
+
+      // Similar process for mark scheme pages
+      let markSchemeTop = 0;
+      const markSchemePages = markScheme.pages.map(page => {
+        const width = page.bounds.width;
+        const height = page.bounds.height;
+        const currentTop = markSchemeTop;
+        markSchemeTop += height + PAGE_SPACING;
+        return {
+          ...page,
+          bounds: new TLBox((widest - width) / 2, currentTop, width, height)
+        };
+      });
+
+      // Create mark scheme page
+      editor.createPage({ 
+        id: markSchemePageId,
+        name: 'Mark Scheme',
+      });
+      editor.setCurrentPage(markSchemePageId);
+
+      // Create assets and shapes for mark scheme pages
+      markSchemePages.forEach((page) => {
+        editor.createAssets([{
+          id: page.assetId,
+          typeName: 'asset',
+          type: 'image',
+          props: {
+            w: page.bounds.width,
+            h: page.bounds.height,
+            name: 'PDF Page',
+            src: page.src,
+            isAnimated: false,
+            mimeType: 'image/png',
+          },
+          meta: {},
+        }]);
+
+        editor.createShape({
+          id: page.shapeId,
+          type: 'image',
+          x: page.bounds.x,
+          y: page.bounds.y,
+          props: {
+            w: page.bounds.width,
+            h: page.bounds.height,
+            assetId: page.assetId,
+          },
+          isLocked: true,
+        });
+      });
+
+      // Go back to exam page
+      editor.setCurrentPage(examPageId);
+    };
+
+    const setupStudentResponses = async () => {
+      const pagesPerStudent = examPaper.pages.length;
+      const totalStudents = Math.floor(studentResponses.pages.length / pagesPerStudent);
+
+      for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
+        const startPage = studentIndex * pagesPerStudent;
+        const endPage = startPage + pagesPerStudent;
+        const studentPageId = `page:student-response-${studentIndex}` as TLPageId;
+
+        // Calculate vertical layout
+        let top = 0;
+        let widest = 0;
+        const studentPages = studentResponses.pages
+          .slice(startPage, endPage)
+          .map(page => {
+            const width = page.bounds.width;
+            const height = page.bounds.height;
+            const currentTop = top;
+            top += height + PAGE_SPACING;
+            widest = Math.max(widest, width);
+            return { ...page, top: currentTop, width, height };
+          });
+
+        // Center pages horizontally
+        studentPages.forEach(page => {
+          page.bounds = new TLBox((widest - page.width) / 2, page.top, page.width, page.height);
+        });
+
+        // Create page for this student
+        editor.createPage({ 
+          id: studentPageId,
+          name: `Student ${studentIndex + 1}`,
+        });
+        editor.setCurrentPage(studentPageId);
+
+        // Create assets and shapes
+        studentPages.forEach((page) => {
+          editor.createAssets([{
+            id: page.assetId,
+            typeName: 'asset',
+            type: 'image',
+            props: {
+              w: page.bounds.width,
+              h: page.bounds.height,
+              name: 'PDF Page',
+              src: page.src,
+              isAnimated: false,
+              mimeType: 'image/png',
+            },
+            meta: {},
+          }]);
+
+          editor.createShape({
+            id: page.shapeId,
+            type: 'image',
+            x: page.bounds.x,
+            y: page.bounds.y,
+            props: {
+              w: page.bounds.width,
+              h: page.bounds.height,
+              assetId: page.assetId,
+            },
+            isLocked: true,
+          });
+        });
+      }
+    };
+
+    // Initial setup of all pages
+    const setup = async () => {
+      await setupExamAndMarkScheme();
+      await setupStudentResponses();
+      setPagesInitialized(true);
+    };
+
+    setup();
+  }, [editor, pagesInitialized, examPaper, markScheme, studentResponses]);
+
+  // Effect to handle view changes and navigation
+  useEffect(() => {
+    if (!editor || !pagesInitialized) return;
+
+    // Switch to appropriate page based on current view
+    const targetPageId = currentView === 'exam-and-markscheme'
+      ? ('page:exam-page' as TLPageId)
+      : (`page:student-response-${currentStudentIndex}` as TLPageId);
+
+    logger.debug('cc-exam-marker', '🔄 Switching view', {
+      currentView,
+      currentStudentIndex,
+      targetPageId
+    });
+
+    editor.setCurrentPage(targetPageId);
+
+    // Update camera constraints for current page
+    const currentPageBounds = Array.from(editor.getCurrentPageShapeIds()).reduce(
+      (acc: TLBox | null, shapeId) => {
+        const bounds = editor.getShapePageBounds(shapeId);
+        return bounds ? (acc ? acc.union(bounds) : bounds) : acc;
+      },
+      null as TLBox | null
+    );
+
+    if (currentPageBounds) {
+      const isMobile = editor.getViewportScreenBounds().width < 840;
+      editor.setCameraOptions({
+        constraints: {
+          bounds: currentPageBounds,
+          padding: { x: isMobile ? 16 : 164, y: 64 },
+          origin: { x: 0.5, y: 0 },
+          initialZoom: 'fit-x-100',
+          baseZoom: 'default',
+          behavior: 'contain',
+        },
+      });
+      editor.setCamera(editor.getCamera(), { reset: true });
+    }
+  }, [editor, pagesInitialized, currentView, currentStudentIndex]);
+
+  // Expose annotationManager to parent through onEditorMount
+  useEffect(() => {
+    if (editor) {
+      onEditorMount(editor);
+      // @ts-expect-error - Adding custom property to editor for CCExamMarkerPanel access
+      editor.annotationManager = annotationManager.current;
+    }
+  }, [editor, onEditorMount]);
+
+  return (
+    <Box sx={{ width: '100%', height: '100%', position: 'relative' }}>
+      <Tldraw 
+        onMount={handleMount}
+        components={{
+          InFrontOfTheCanvas: () => onEditorMount(editor!)
+        }}
+      />
+    </Box>
+  );
+} 
\ No newline at end of file
diff --git a/src/pages/tldraw/CCExamMarker/CCPdfPicker.tsx b/src/pages/tldraw/CCExamMarker/CCPdfPicker.tsx
new file mode 100644
index 0000000..f879c6d
--- /dev/null
+++ b/src/pages/tldraw/CCExamMarker/CCPdfPicker.tsx
@@ -0,0 +1,210 @@
+import { useState } from 'react';
+import { Box, Button, Stack, Typography } from '@mui/material';
+import { AssetRecordType, Box as TLBox, createShapeId } from '@tldraw/editor';
+import { ExamPdfs, Pdf, PdfPage } from './types';
+
+interface CCPdfPickerProps {
+  onOpenPdfs: (pdfs: ExamPdfs) => void;
+}
+
+const pageSpacing = 32;
+
+export function CCPdfPicker({ onOpenPdfs }: CCPdfPickerProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedPdfs, setSelectedPdfs] = useState<Partial<ExamPdfs>>({});
+
+  async function loadPdf(name: string, source: ArrayBuffer): Promise<Pdf> {
+    const PdfJS = await import('pdfjs-dist');
+    PdfJS.GlobalWorkerOptions.workerSrc = new URL(
+      'pdfjs-dist/build/pdf.worker.min.mjs',
+      import.meta.url
+    ).toString();
+
+    const pdf = await PdfJS.getDocument(source.slice()).promise;
+    const pages: PdfPage[] = [];
+    const canvas = window.document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) throw new Error('Failed to create canvas context');
+
+    const visualScale = 1.5;
+    const scale = window.devicePixelRatio;
+    let top = 0;
+    let widest = 0;
+
+    for (let i = 1; i <= pdf.numPages; i++) {
+      const page = await pdf.getPage(i);
+      const viewport = page.getViewport({ scale: scale * visualScale });
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+
+      const renderContext = {
+        canvasContext: context,
+        viewport,
+      };
+
+      await page.render(renderContext).promise;
+      const width = viewport.width / scale;
+      const height = viewport.height / scale;
+
+      pages.push({
+        src: canvas.toDataURL(),
+        bounds: new TLBox(0, top, width, height),
+        assetId: AssetRecordType.createId(),
+        shapeId: createShapeId(),
+      });
+
+      top += height + pageSpacing;
+      widest = Math.max(widest, width);
+    }
+
+    canvas.width = 0;
+    canvas.height = 0;
+
+    for (const page of pages) {
+      page.bounds.x = (widest - page.bounds.width) / 2;
+    }
+
+    return {
+      name,
+      pages,
+      source,
+    };
+  }
+
+  const handleFileSelect = async (type: keyof ExamPdfs, file: File) => {
+    setIsLoading(true);
+    try {
+      const pdf = await loadPdf(file.name, await file.arrayBuffer());
+
+      // Validate student responses page count
+      if (type === 'studentResponses' && selectedPdfs.examPaper) {
+        const examPageCount = selectedPdfs.examPaper.pages.length;
+        if (pdf.pages.length % examPageCount !== 0) {
+          alert(`Student responses PDF must have a number of pages that is a multiple of the exam paper's ${examPageCount} pages.\n\nStudent responses PDF has ${pdf.pages.length} pages, which is not a multiple of ${examPageCount}.`);
+          return;
+        }
+      }
+
+      setSelectedPdfs((prev) => ({ ...prev, [type]: pdf }));
+    } catch (error) {
+      console.error('Error loading PDF:', error);
+      alert('Error loading PDF (mismatch between responses and exam paper). Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const createFileInput = (type: keyof ExamPdfs) => {
+    const input = window.document.createElement('input');
+    input.type = 'file';
+    input.accept = 'application/pdf';
+    input.addEventListener('change', async (e) => {
+      const fileList = (e.target as HTMLInputElement).files;
+      if (!fileList || fileList.length === 0) return;
+      await handleFileSelect(type, fileList[0]);
+    });
+    input.click();
+  };
+
+  const allPdfsSelected = () => {
+    return (
+      selectedPdfs.examPaper &&
+      selectedPdfs.markScheme &&
+      selectedPdfs.studentResponses
+    );
+  };
+
+  if (isLoading) {
+    return (
+      <Box className="CCPdfPicker" sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        width: '100%'
+      }}>
+        <Typography>Loading...</Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box className="CCPdfPicker" sx={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      width: '100%'
+    }}>
+      <Stack 
+        spacing={4} 
+        alignItems="center" 
+        sx={{ 
+          maxWidth: '800px',
+          width: '100%',
+          p: 3
+        }}
+      >
+        <Typography variant="h5">Select PDF Files</Typography>
+        
+        <Stack 
+          direction="row" 
+          sx={{ 
+            width: '100%', 
+            justifyContent: 'center',
+            gap: 4  // Using MUI's spacing unit (1 unit = 8px, so 4 = 32px)
+          }}
+        >
+          <Button
+            variant={selectedPdfs.examPaper ? 'contained' : 'outlined'}
+            onClick={() => createFileInput('examPaper')}
+            sx={{ 
+              minWidth: '180px',
+              height: '48px'
+            }}
+          >
+            {selectedPdfs.examPaper ? '✓ Exam Paper' : 'Select Exam Paper'}
+          </Button>
+
+          <Button
+            variant={selectedPdfs.markScheme ? 'contained' : 'outlined'}
+            onClick={() => createFileInput('markScheme')}
+            sx={{ 
+              minWidth: '180px',
+              height: '48px'
+            }}
+          >
+            {selectedPdfs.markScheme ? '✓ Mark Scheme' : 'Select Mark Scheme'}
+          </Button>
+
+          <Button
+            variant={selectedPdfs.studentResponses ? 'contained' : 'outlined'}
+            onClick={() => createFileInput('studentResponses')}
+            sx={{ 
+              minWidth: '180px',
+              height: '48px'
+            }}
+          >
+            {selectedPdfs.studentResponses ? '✓ Student Responses' : 'Select Student Responses'}
+          </Button>
+        </Stack>
+
+        {allPdfsSelected() && (
+          <Box sx={{ mt: 4, width: '100%', display: 'flex', justifyContent: 'center' }}>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={() => onOpenPdfs(selectedPdfs as ExamPdfs)}
+              sx={{ 
+                minWidth: '180px',
+                height: '48px'
+              }}
+            >
+              Continue
+            </Button>
+          </Box>
+        )}
+      </Stack>
+    </Box>
+  );
+} 
\ No newline at end of file
diff --git a/src/pages/tldraw/CCExamMarker/cc-exam-marker.css b/src/pages/tldraw/CCExamMarker/cc-exam-marker.css
new file mode 100644
index 0000000..b72fda9
--- /dev/null
+++ b/src/pages/tldraw/CCExamMarker/cc-exam-marker.css
@@ -0,0 +1,61 @@
+.CCExamMarker {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.CCExamMarker .CCPdfPicker {
+  position: absolute;
+  inset: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.CCExamMarker .CCPdfBgRenderer {
+  position: absolute;
+  pointer-events: none;
+}
+
+.CCExamMarker .CCPdfBgRenderer img {
+  position: absolute;
+}
+
+.CCExamMarker .PageOverlayScreen-screen {
+  pointer-events: none;
+  z-index: -1;
+  fill: var(--color-background);
+  fill-opacity: 0.8;
+  stroke: none;
+}
+
+.CCExamMarker .PageOverlayScreen-outline {
+  position: absolute;
+  pointer-events: none;
+  z-index: -1;
+  box-shadow: var(--shadow-2);
+}
+
+.CCExamMarker .CCExportPdfButton {
+  font: inherit;
+  background: var(--color-primary);
+  border: none;
+  color: var(--color-selected-contrast);
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  margin: 6px;
+  margin-bottom: 0;
+  pointer-events: all;
+  z-index: var(--layer-panels);
+  border: 2px solid var(--color-background);
+  cursor: pointer;
+}
+
+.CCExamMarker .CCExportPdfButton:hover {
+  filter: brightness(1.1);
+} 
\ No newline at end of file
diff --git a/src/pages/tldraw/CCExamMarker/types.ts b/src/pages/tldraw/CCExamMarker/types.ts
new file mode 100644
index 0000000..c474c69
--- /dev/null
+++ b/src/pages/tldraw/CCExamMarker/types.ts
@@ -0,0 +1,44 @@
+import { Box, TLAssetId, TLShapeId } from '@tldraw/tldraw';
+
+export interface PdfPage {
+  src: string;
+  bounds: Box;
+  assetId: TLAssetId;
+  shapeId: TLShapeId;
+}
+
+export interface Pdf {
+  name: string;
+  pages: PdfPage[];
+  source: string | ArrayBuffer;
+}
+
+export interface ExamPdfs {
+  examPaper: Pdf;
+  markScheme: Pdf;
+  studentResponses: Pdf;
+}
+
+export type ExamPdfState =
+  | {
+      phase: 'pick';
+    }
+  | {
+      phase: 'edit';
+      examPaper: Pdf;
+      markScheme: Pdf;
+      studentResponses: Pdf;
+    };
+
+export interface StudentResponse {
+  studentId: string;
+  pageStart: number;
+  pageEnd: number;
+}
+
+export interface ExamMetadata {
+  totalPages: number;
+  pagesPerStudent: number;
+  totalStudents: number;
+  studentResponses: StudentResponse[];
+} 
\ No newline at end of file
diff --git a/src/pages/tldraw/ShareHandler.tsx b/src/pages/tldraw/ShareHandler.tsx
new file mode 100644
index 0000000..7006c4d
--- /dev/null
+++ b/src/pages/tldraw/ShareHandler.tsx
@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { logger } from '../../debugConfig';
+
+interface LaunchParams {
+  files: FileSystemFileHandle[];
+}
+
+interface LaunchQueue {
+  setConsumer(callback: (params: LaunchParams) => Promise<void>): void;
+}
+
+interface WindowWithLaunchQueue extends Window {
+  launchQueue: LaunchQueue;
+}
+
+const ShareHandler = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const processSharedData = async () => {
+      try {
+        // Handle files shared through Web Share Target API
+        if ('launchQueue' in window) {
+          (window as WindowWithLaunchQueue).launchQueue.setConsumer(async (launchParams: LaunchParams) => {
+            if (!launchParams.files.length) {
+              logger.debug('share-handler', 'No files shared');
+              return;
+            }
+
+            for (const fileHandle of launchParams.files) {
+              const file = await fileHandle.getFile();
+              logger.info('share-handler', 'Processing shared file', { 
+                name: file.name,
+                type: file.type,
+                size: file.size
+              });
+
+              // Navigate to single player with the shared file
+              // You might want to modify this based on your needs
+              navigate('/single-player', { 
+                state: { 
+                  sharedFile: file 
+                }
+              });
+            }
+          });
+        }
+
+        // Handle URL parameters for text/url sharing
+        const urlParams = new URLSearchParams(window.location.search);
+        const title = urlParams.get('title');
+        const text = urlParams.get('text');
+        const url = urlParams.get('url');
+
+        if (title || text || url) {
+          logger.info('share-handler', 'Processing shared content', { 
+            title, 
+            text, 
+            url 
+          });
+
+          // Navigate to single player with the shared content
+          navigate('/single-player', { 
+            state: { 
+              sharedContent: { title, text, url } 
+            }
+          });
+        }
+      } catch (error) {
+        logger.error('share-handler', 'Error processing shared content', { error });
+      }
+    };
+
+    processSharedData();
+  }, [navigate]);
+
+  return (
+    <div style={{ 
+      display: 'flex', 
+      justifyContent: 'center', 
+      alignItems: 'center', 
+      height: '100vh' 
+    }}>
+      Processing shared content...
+    </div>
+  );
+};
+
+export default ShareHandler; 
\ No newline at end of file
diff --git a/src/pages/tldraw/TLDrawCanvas.tsx b/src/pages/tldraw/TLDrawCanvas.tsx
new file mode 100644
index 0000000..80da64a
--- /dev/null
+++ b/src/pages/tldraw/TLDrawCanvas.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Tldraw } from '@tldraw/tldraw';
+import '@tldraw/tldraw/tldraw.css';
+
+const TLDrawCanvas: React.FC = () => {
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <Tldraw persistenceKey="classroom-copilot-landing-page" />
+    </div>
+  );
+};
+
+export default TLDrawCanvas; 
\ No newline at end of file
diff --git a/src/pages/tldraw/devPage.tsx b/src/pages/tldraw/devPage.tsx
new file mode 100644
index 0000000..21cfe65
--- /dev/null
+++ b/src/pages/tldraw/devPage.tsx
@@ -0,0 +1,469 @@
+import React, { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+    Tldraw,
+    Editor,
+    useTldrawUser,
+    DEFAULT_SUPPORT_VIDEO_TYPES,
+    DEFAULT_SUPPORTED_IMAGE_TYPES,
+} from '@tldraw/tldraw';
+import { useAuth } from '../../contexts/AuthContext';
+import { useTLDraw } from '../../contexts/TLDrawContext';
+// Tldraw services
+import { localStoreService } from '../../services/tldraw/localStoreService';
+// Tldraw utils
+import { customAssets } from '../../utils/tldraw/assets';
+import { devEmbeds } from '../../utils/tldraw/embeds';
+import { allShapeUtils } from '../../utils/tldraw/shapes';
+import { allBindingUtils } from '../../utils/tldraw/bindings';
+import { devTools } from '../../utils/tldraw/tools';
+import { customSchema } from '../../utils/tldraw/schemas';
+// Layout
+import { HEADER_HEIGHT } from '../Layout';
+// Styles
+import '../../utils/tldraw/tldraw.css';
+// App debug
+import { logger } from '../../debugConfig';
+
+interface EventFilter {
+  type: 'all' | 'ui' | 'store' | 'canvas';
+  subType?: string;
+  enabled: boolean;
+}
+
+interface EventFilters {
+  mode: 'all' | 'specific';
+  filters: {
+    [key: string]: EventFilter;
+  };
+}
+
+const EventMonitoringControls: React.FC<{
+  filters: EventFilters;
+  setFilters: (filters: EventFilters) => void;
+  onClear: () => void;
+}> = ({ filters, setFilters, onClear }) => {
+  const handleModeChange = (mode: 'all' | 'specific') => {
+    setFilters({ ...filters, mode });
+  };
+
+  const handleFilterChange = (key: string, enabled: boolean) => {
+    setFilters({
+      ...filters,
+      filters: {
+        ...filters.filters,
+        [key]: { ...filters.filters[key], enabled }
+      }
+    });
+  };
+
+  return (
+    <div className="event-monitor-controls">
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <div className="mode-selector">
+          <label>
+            <input
+              type="radio"
+              checked={filters.mode === 'all'}
+              onChange={() => handleModeChange('all')}
+            />
+            Monitor All Events
+          </label>
+          <label>
+            <input
+              type="radio"
+              checked={filters.mode === 'specific'}
+              onChange={() => handleModeChange('specific')}
+            />
+            Monitor Specific Events
+          </label>
+        </div>
+        <button 
+          onClick={onClear}
+          style={{
+            padding: '4px 8px',
+            backgroundColor: '#f44336',
+            color: 'white',
+            border: 'none',
+            borderRadius: '4px',
+            cursor: 'pointer'
+          }}
+        >
+          Clear Logs
+        </button>
+      </div>
+      
+      {filters.mode === 'specific' && (
+        <div className="specific-filters">
+          <select 
+            onChange={(e) => handleFilterChange(e.target.value, true)}
+            value=""
+          >
+            <option value="" disabled>Add Event Filter</option>
+            <optgroup label="UI Events">
+              <option value="ui-selection">Selection Changes</option>
+              <option value="ui-tool">Tool Changes</option>
+              <option value="ui-viewport">Viewport Changes</option>
+            </optgroup>
+            <optgroup label="Store Events">
+              <option value="store-shapes">Shape Updates</option>
+              <option value="store-bindings">Binding Updates</option>
+              <option value="store-assets">Asset Updates</option>
+            </optgroup>
+            <optgroup label="Canvas Events">
+              <option value="canvas-pointer">Pointer Events</option>
+              <option value="canvas-camera">Camera Events</option>
+              <option value="canvas-selection">Selection Events</option>
+            </optgroup>
+          </select>
+
+          <div className="active-filters">
+            {Object.entries(filters.filters)
+              .filter(([, filter]) => filter.enabled)
+              .map(([key]) => (
+                <div key={key} className="filter-tag">
+                  {key}
+                  <button onClick={() => handleFilterChange(key, false)}>×</button>
+                </div>
+              ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const MAX_EVENTS = 100; // Limit visible events to last 100
+
+const EventDisplay: React.FC<{ events: Array<{ type: string; data: string; timestamp: string }> }> = 
+  ({ events }) => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+    }
+  }, [events]);
+
+  // Only show the last MAX_EVENTS events
+  const visibleEvents = useMemo(() => 
+    events.slice(-MAX_EVENTS),
+    [events]
+  );
+
+  return (
+    <div
+      ref={scrollContainerRef}
+      className="event-display"
+      style={{
+        flex: 1,
+        padding: 8,
+        background: '#ddd',
+        borderLeft: 'solid 2px #333',
+        fontFamily: 'monospace',
+        fontSize: 12,
+        overflow: 'auto',
+        scrollBehavior: 'smooth',
+      }}
+    >
+      {visibleEvents.length === MAX_EVENTS && (
+        <div style={{
+          padding: '4px 8px',
+          marginBottom: 8,
+          backgroundColor: '#fff3cd',
+          color: '#856404',
+          borderRadius: 4,
+          fontSize: 11,
+        }}>
+          Showing last {MAX_EVENTS} events only
+        </div>
+      )}
+      {visibleEvents.map((event, i) => (
+        <pre
+          key={event.timestamp + i}
+          style={{
+            borderBottom: '1px solid #000',
+            marginBottom: 0,
+            paddingBottom: '12px',
+            backgroundColor: getEventTypeColor(event.type),
+            whiteSpace: 'pre-wrap',
+            wordWrap: 'break-word',
+          }}
+        >
+          <span className="event-timestamp">{event.timestamp}</span>
+          <span className="event-type">[{event.type}]</span>
+          {event.data}
+        </pre>
+      ))}
+    </div>
+  );
+};
+
+const getEventTypeColor = (type: string): string => {
+  switch (type) {
+    case 'ui':
+      return '#e8f0fe';  // Light blue
+    case 'store':
+      return '#fef3e8';  // Light orange
+    case 'canvas':
+      return '#f0fee8';  // Light green
+    default:
+      return 'transparent';
+  }
+};
+
+export default function DevPage() {
+    const { user } = useAuth();
+    const navigate = useNavigate();
+    const { tldrawPreferences, initializePreferences, setTldrawPreferences } = useTLDraw();
+    const [events, setEvents] = useState<Array<{ type: 'ui' | 'store' | 'canvas'; data: string; timestamp: string; }>>([]);
+    const [eventFilters, setEventFilters] = useState<EventFilters>({ mode: 'all', filters: {} });
+    const [logPanelWidth, setLogPanelWidth] = useState(30); // Width in percentage
+    const editorRef = useRef<Editor | null>(null);
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const isDraggingRef = useRef(false);
+
+    const handleDragStart = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        isDraggingRef.current = true;
+        document.body.style.cursor = 'col-resize';
+        
+        const handleDragMove = (e: MouseEvent) => {
+            if (!isDraggingRef.current) return;
+            
+            const windowWidth = window.innerWidth;
+            const newWidth = (e.clientX / windowWidth) * 100;
+            
+            // Limit the range to between 20% and 80%
+            const clampedWidth = Math.min(Math.max(newWidth, 20), 80);
+            setLogPanelWidth(100 - clampedWidth);
+        };
+
+        const handleDragUp = () => {
+            isDraggingRef.current = false;
+            document.body.style.cursor = 'default';
+            window.removeEventListener('mousemove', handleDragMove);
+            window.removeEventListener('mouseup', handleDragUp);
+        };
+
+        window.addEventListener('mousemove', handleDragMove);
+        window.addEventListener('mouseup', handleDragUp);
+    }, []);
+
+    // Create tldraw user
+    const tldrawUser = useTldrawUser({
+        userPreferences: {
+            id: user?.id ?? 'dev-user',
+            name: user?.display_name ?? 'Unknown User',
+            color: tldrawPreferences?.color,
+            locale: tldrawPreferences?.locale,
+            colorScheme: tldrawPreferences?.colorScheme,
+            animationSpeed: tldrawPreferences?.animationSpeed,
+            isSnapMode: tldrawPreferences?.isSnapMode
+        },
+        setUserPreferences: setTldrawPreferences
+    });
+
+    // Create store
+    const store = useMemo(() => localStoreService.getStore({
+        schema: customSchema,
+        shapeUtils: allShapeUtils,
+        bindingUtils: allBindingUtils
+    }), []);
+
+    // Initialize preferences when user is available
+    useEffect(() => {
+        if (user?.id && !tldrawPreferences) {
+            logger.debug('dev-page', '🔄 Initializing preferences for user', { userId: user.id });
+            initializePreferences(user.id);
+        }
+    }, [user?.id, tldrawPreferences, initializePreferences]);
+
+    // Redirect if no user
+    useEffect(() => {
+        if (!user) {
+            logger.info('dev-page', '🚪 Redirecting to home - no user logged in');
+            navigate('/');
+        }
+    }, [user, navigate]);
+
+    const shouldCaptureEvent = useCallback((type: 'ui' | 'store' | 'canvas', data: string) => {
+        if (eventFilters.mode === 'all') return true;
+
+        // Check specific filters
+        return Object.entries(eventFilters.filters)
+            .some(([key, filter]) => {
+                if (!filter.enabled) return false;
+                
+                const [filterType, filterSubType] = key.split('-');
+                if (filterType !== type) return false;
+
+                // Match specific event subtypes
+                switch (filterType) {
+                    case 'ui':
+                        return data.includes(filterSubType);
+                    case 'store':
+                        return data.includes(`"type":"${filterSubType}"`);
+                    case 'canvas':
+                        return data.includes(`Canvas Event: ${filterSubType}`);
+                    default:
+                        return false;
+                }
+            });
+    }, [eventFilters]);
+
+    const addEvent = useCallback((type: 'ui' | 'store' | 'canvas', data: string) => {
+        if (!shouldCaptureEvent(type, data)) return;
+        
+        setEvents(prevEvents => {
+            const newEvents = [...prevEvents, {
+                type,
+                data,
+                timestamp: new Date().toISOString()
+            }];
+            // Keep last 2 * MAX_EVENTS in state to allow some scrollback
+            return newEvents.slice(-(MAX_EVENTS * 2));
+        });
+    }, [shouldCaptureEvent]);
+
+    const handleUiEvent = useCallback((name: string, data: unknown) => {
+        const eventString = `UI Event: ${name} ${JSON.stringify(data)}`;
+        addEvent('ui', eventString);
+        console.log(eventString);
+    }, [addEvent]);
+
+    const handleCanvasEvent = useCallback((editor: Editor) => {
+        logger.trace('dev-page', '🎨 Canvas editor mounted');
+        
+        editor.on('change', () => {
+            const camera = editor.getCamera();
+            logger.trace('dev-page', '🎥 Camera changed', { camera });
+            addEvent('canvas', `Canvas Event: camera ${JSON.stringify(camera)}`);
+        });
+    
+        editor.on('change', () => {
+            const selectedIds = editor.getSelectedShapeIds();
+            if (selectedIds.length > 0) {
+                logger.trace('dev-page', '🔍 Selection changed', { selectedIds });
+                addEvent('canvas', `Canvas Event: selection ${JSON.stringify(selectedIds)}`);
+            }
+        });
+    
+        editor.on('event', (info) => {
+            if (info.type === 'pointer') {
+                const point = editor.inputs.currentPagePoint;
+                logger.trace('dev-page', '👆 Pointer event', { point });
+                addEvent('canvas', `Canvas Event: pointer ${JSON.stringify(point)}`);
+            }
+        });
+    }, [addEvent]);
+
+    useEffect(() => {
+        if (store) {
+            const cleanupFn = store.listen((info) => {
+                const eventString = `Store Event: ${info.source} ${JSON.stringify(info.changes)}`;
+                addEvent('store', eventString);
+                console.log(eventString);
+            });
+            return () => cleanupFn();
+        }
+    }, [store, addEvent]);
+
+    useEffect(() => {
+        if (scrollContainerRef.current) {
+            const scrollContainer = scrollContainerRef.current;
+            scrollContainer.scrollTop = scrollContainer.scrollHeight;
+        }
+    }, [events]);
+
+    const clearEvents = useCallback(() => {
+        setEvents([]);
+    }, []);
+
+    if (!user) {
+        logger.info('dev-page', '🚫 Rendering null - no user');
+        return null;
+    }
+
+    return (
+        <div style={{ 
+            display: 'flex', 
+            width: '100%', 
+            height: `calc(100vh - ${HEADER_HEIGHT}px)`, 
+            position: 'fixed',
+            top: `${HEADER_HEIGHT}px`
+        }}>
+            <div style={{ 
+                width: `${100 - logPanelWidth}%`, 
+                height: '100%', 
+                position: "absolute", 
+                left: 0,
+                overflow: 'hidden'
+            }}>
+                <Tldraw
+                    user={tldrawUser}
+                    store={store}
+                    onMount={(editor) => {
+                        editorRef.current = editor;
+                        handleCanvasEvent(editor);
+                        logger.info('system', '🎨 Tldraw mounted', {
+                            editorId: editor.store.id
+                        });
+                    }}
+                    onUiEvent={handleUiEvent}
+                    tools={devTools}
+                    shapeUtils={allShapeUtils}
+                    bindingUtils={allBindingUtils}
+                    embeds={devEmbeds}
+                    assetUrls={customAssets}
+                    autoFocus={true}
+                    hideUi={false}
+                    inferDarkMode={false}
+                    acceptedImageMimeTypes={DEFAULT_SUPPORTED_IMAGE_TYPES}
+                    acceptedVideoMimeTypes={DEFAULT_SUPPORT_VIDEO_TYPES}
+                    maxImageDimension={Infinity}
+                    maxAssetSize={100 * 1024 * 1024}
+                    renderDebugMenuItems={() => []}
+                />
+            </div>
+            <div
+                style={{
+                    width: '5px',
+                    height: '100%',
+                    position: 'absolute',
+                    left: `${100 - logPanelWidth}%`,
+                    transform: 'translateX(-50%)',
+                    cursor: 'col-resize',
+                    backgroundColor: 'transparent',
+                    zIndex: 1000,
+                }}
+                onMouseDown={handleDragStart}
+            >
+                <div style={{
+                    width: '1px',
+                    height: '100%',
+                    backgroundColor: '#333',
+                    margin: '0 auto',
+                }} />
+            </div>
+            <div
+                style={{
+                    width: `${logPanelWidth}%`,
+                    height: '100%',
+                    position: 'absolute',
+                    right: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    overflow: 'hidden'
+                }}
+            >
+                <EventMonitoringControls 
+                    filters={eventFilters} 
+                    setFilters={setEventFilters}
+                    onClear={clearEvents}
+                />
+                <EventDisplay events={events} />
+            </div>
+        </div>
+    );
+}
diff --git a/src/pages/tldraw/devPlayerPage.tsx b/src/pages/tldraw/devPlayerPage.tsx
new file mode 100644
index 0000000..41f4338
--- /dev/null
+++ b/src/pages/tldraw/devPlayerPage.tsx
@@ -0,0 +1,140 @@
+import { useEffect, useMemo, useRef } from 'react';
+import {
+    Tldraw,
+    Editor,
+    useTldrawUser,
+    DEFAULT_SUPPORT_VIDEO_TYPES,
+    DEFAULT_SUPPORTED_IMAGE_TYPES,
+    TLAnyShapeUtilConstructor
+} from '@tldraw/tldraw';
+// App context
+import { useTLDraw } from '../../contexts/TLDrawContext';
+// Tldraw services
+import { localStoreService } from '../../services/tldraw/localStoreService';
+import { PresentationService } from '../../services/tldraw/presentationService';
+// Tldraw utils
+import { getUiOverrides, getUiComponents } from '../../utils/tldraw/ui-overrides';
+import { customAssets } from '../../utils/tldraw/assets';
+import { devEmbeds } from '../../utils/tldraw/embeds';
+import { allShapeUtils } from '../../utils/tldraw/shapes';
+import { allBindingUtils } from '../../utils/tldraw/bindings';
+import { devTools } from '../../utils/tldraw/tools';
+import { customSchema } from '../../utils/tldraw/schemas';
+// Layout
+import { HEADER_HEIGHT } from '../../pages/Layout';
+// Styles
+import '../../utils/tldraw/tldraw.css';
+// App debug
+import { logger } from '../../debugConfig';
+
+const devUserId = 'dev-user';
+
+export default function TLDrawDevPage() {
+    // 1. All context hooks first
+    const { 
+        tldrawPreferences, 
+        initializePreferences,
+        presentationMode,
+        setTldrawPreferences
+    } = useTLDraw();
+
+    // 2. All refs
+    const editorRef = useRef<Editor | null>(null);
+
+    // 4. All memos
+    const tldrawUser = useTldrawUser({
+        userPreferences: {
+            id: devUserId,
+            name: 'Dev User',
+            color: tldrawPreferences?.color,
+            locale: tldrawPreferences?.locale,
+            colorScheme: tldrawPreferences?.colorScheme,
+            animationSpeed: tldrawPreferences?.animationSpeed,
+            isSnapMode: tldrawPreferences?.isSnapMode
+        },
+        setUserPreferences: setTldrawPreferences
+    });
+
+    const store = useMemo(() => localStoreService.getStore({
+        schema: customSchema,
+        shapeUtils: [...allShapeUtils] as TLAnyShapeUtilConstructor[],
+        bindingUtils: allBindingUtils
+    }), []);
+
+    // Initialize preferences when user is available
+    useEffect(() => {
+        if (!tldrawPreferences) {
+            logger.debug('single-player-page', '🔄 Initializing preferences');
+            initializePreferences(devUserId);
+        }
+    }, [tldrawPreferences, initializePreferences]);
+
+    // Load initial data when user node is available
+    useEffect(() => {
+        if (!tldrawUser) {
+          return;
+        }
+    }, [tldrawUser, store]);
+
+    // Handle presentation mode
+    useEffect(() => {
+        if (presentationMode && editorRef.current) {
+            logger.info('presentation', '🔄 Presentation mode changed', { 
+                presentationMode,
+                editorExists: !!editorRef.current
+            });
+
+            const editor = editorRef.current;
+            const presentationService = new PresentationService(editor);
+            const cleanup = presentationService.startPresentationMode();
+
+            return () => {
+                logger.info('presentation', '🧹 Cleaning up presentation mode');
+                presentationService.stopPresentationMode();
+                cleanup();
+            };
+        }
+    }, [presentationMode]);
+
+    // Modify the render logic to use presentationMode
+    const uiOverrides = getUiOverrides(presentationMode);
+    const uiComponents = getUiComponents(presentationMode);
+
+    return (
+        <div style={{ 
+            position: 'fixed',
+            inset: 0,
+            top: `${HEADER_HEIGHT}px`,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden'
+        }}>
+            <Tldraw
+                user={tldrawUser}
+                store={store}
+                tools={devTools}
+                shapeUtils={allShapeUtils as TLAnyShapeUtilConstructor[]}
+                bindingUtils={allBindingUtils}
+                components={uiComponents}
+                overrides={uiOverrides}
+                embeds={devEmbeds}
+                assetUrls={customAssets}
+                autoFocus={true}
+                hideUi={false}
+                inferDarkMode={false}
+                acceptedImageMimeTypes={DEFAULT_SUPPORTED_IMAGE_TYPES}
+                acceptedVideoMimeTypes={DEFAULT_SUPPORT_VIDEO_TYPES}
+                maxImageDimension={Infinity}
+                maxAssetSize={100 * 1024 * 1024}
+                renderDebugMenuItems={() => []}
+                onMount={(editor) => {
+                    logger.info('system', '🎨 Tldraw mounted', {
+                        editorId: editor.store.id,
+                        presentationMode
+                    });
+                    editorRef.current = editor;
+                }}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/tldraw/multiplayerUser.tsx b/src/pages/tldraw/multiplayerUser.tsx
new file mode 100644
index 0000000..f870ddb
--- /dev/null
+++ b/src/pages/tldraw/multiplayerUser.tsx
@@ -0,0 +1,200 @@
+import { useEffect, useRef, useMemo } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import {
+    Tldraw,
+    Editor,
+    useTldrawUser,
+    DEFAULT_SUPPORTED_IMAGE_TYPES,
+    DEFAULT_SUPPORT_VIDEO_TYPES,
+} from '@tldraw/tldraw';
+import { useSync } from '@tldraw/sync';
+// App context
+import { useAuth } from '../../contexts/AuthContext';
+import { useTLDraw } from '../../contexts/TLDrawContext';
+import { useNeoInstitute } from '../../contexts/NeoInstituteContext';
+// Tldraw services
+import { multiplayerOptions } from '../../services/tldraw/optionsService';
+import { PresentationService } from '../../services/tldraw/presentationService';
+import { createSyncConnectionOptions, handleExternalAsset } from '../../services/tldraw/syncService';
+// Tldraw utils
+import { getUiOverrides, getUiComponents } from '../../utils/tldraw/ui-overrides';
+import { customAssets } from '../../utils/tldraw/assets';
+import { multiplayerTools } from '../../utils/tldraw/tools';
+import { allShapeUtils } from '../../utils/tldraw/shapes';
+import { customSchema } from '../../utils/tldraw/schemas';
+import { allBindingUtils } from '../../utils/tldraw/bindings';
+import { multiplayerEmbeds } from '../../utils/tldraw/embeds';
+// Layout
+import { HEADER_HEIGHT } from '../../pages/Layout';
+// Styles
+import '../../utils/tldraw/tldraw.css';
+// App debug
+import { logger } from '../../debugConfig';
+
+const SYNC_WORKER_URL = import.meta.env.VITE_FRONTEND_SITE_URL.startsWith('http') 
+    ? `${import.meta.env.VITE_FRONTEND_SITE_URL}/tldraw`
+    : `https://${import.meta.env.VITE_FRONTEND_SITE_URL}/tldraw`;
+
+export default function TldrawMultiUser() {
+    const { user } = useAuth();
+    const { isLoading: isInstituteLoading, isInitialized: isInstituteInitialized } = useNeoInstitute();
+    const {
+        tldrawPreferences,
+        setTldrawPreferences,
+        initializePreferences,
+        presentationMode
+    } = useTLDraw();
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const editorRef = useRef<Editor | null>(null);
+
+    // Get room ID from URL params
+    const roomId = searchParams.get('room') || 'multiplayer';
+
+    // Memoize user information to ensure consistency
+    const userInfo = useMemo(() => ({
+        id: user?.id ?? '',
+        name: user?.display_name ?? user?.email?.split('@')[0] ?? 'Anonymous User',
+        color: tldrawPreferences?.color ?? `hsl(${Math.random() * 360}, 70%, 50%)`
+    }), [user?.id, user?.display_name, user?.email, tldrawPreferences?.color]);
+
+    // Create editor user with memoization
+    const editorUser = useTldrawUser({
+        userPreferences: {
+            id: userInfo.id,
+            name: userInfo.name,
+            color: userInfo.color,
+            locale: tldrawPreferences?.locale,
+            colorScheme: tldrawPreferences?.colorScheme,
+            animationSpeed: tldrawPreferences?.animationSpeed,
+            isSnapMode: tldrawPreferences?.isSnapMode
+        },
+        setUserPreferences: setTldrawPreferences
+    });
+
+    const connectionOptions = useMemo(() => createSyncConnectionOptions({
+        userId: userInfo.id,
+        displayName: userInfo.name,
+        color: userInfo.color,
+        roomId,
+        baseUrl: SYNC_WORKER_URL
+    }), [userInfo, roomId]);
+
+    const store = useSync({
+        ...connectionOptions,
+        schema: customSchema,
+        shapeUtils: allShapeUtils,
+        bindingUtils: allBindingUtils,
+        userInfo: {
+            id: userInfo.id,
+            name: userInfo.name,
+            color: userInfo.color
+        }
+    });
+
+    // Log connection status changes
+    useEffect(() => {
+        logger.info('multiplayer-page', `🔄 Connection status changed: ${store.status}`, {
+            status: store.status,
+            connectionOptions
+        });
+    }, [store.status, connectionOptions]);
+
+    // Effect for initializing preferences
+    useEffect(() => {
+        if (user?.id && !tldrawPreferences) {
+            logger.info('multiplayer-page', '🔄 Initializing preferences');
+            initializePreferences(user.id);
+        }
+    }, [user?.id, tldrawPreferences, initializePreferences]);
+
+    // Effect for redirecting if user is not authenticated
+    useEffect(() => {
+        if (!user) {
+            navigate('/');
+        }
+    }, [user, navigate]);
+
+    // Effect for presentation mode
+    useEffect(() => {
+        if (presentationMode && editorRef.current) {
+            const editor = editorRef.current;
+            const presentationService = new PresentationService(editor);
+            const cleanup = presentationService.startPresentationMode();
+
+            return () => {
+                presentationService.stopPresentationMode();
+                cleanup();
+            };
+        }
+    }, [presentationMode]);
+
+    // Memoize UI overrides and components
+    const uiOverrides = useMemo(() => getUiOverrides(presentationMode), [presentationMode]);
+    const uiComponents = useMemo(() => getUiComponents(presentationMode), [presentationMode]);
+
+    // Render conditionally to avoid unnecessary rerenders
+    if (!user) {
+        return null;
+    }
+
+    if (store.status !== 'synced-remote' || isInstituteLoading || !isInstituteInitialized) {
+        return (
+            <div style={{
+                position: 'fixed',
+                inset: 0,
+                top: `${HEADER_HEIGHT}px`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.1)'
+            }}>
+                <div style={{
+                    padding: '20px',
+                    backgroundColor: 'white',
+                    borderRadius: '8px',
+                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
+                }}>
+                    {isInstituteLoading ? 'Loading institute data...' : `Connecting to room: ${roomId}...`}
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div style={{ 
+            position: 'fixed',
+            inset: 0,
+            top: `${HEADER_HEIGHT}px`,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden'
+        }}>
+            <Tldraw
+                user={editorUser}
+                store={store.store}
+                onMount={(editor) => {
+                    editorRef.current = editor;
+                    editor.registerExternalAssetHandler('url', async ({ url }: { url: string }) => {
+                        return handleExternalAsset(SYNC_WORKER_URL, url);
+                    });
+                }}
+                options={multiplayerOptions}
+                embeds={multiplayerEmbeds}
+                tools={multiplayerTools}
+                shapeUtils={allShapeUtils}
+                bindingUtils={allBindingUtils}
+                overrides={uiOverrides}
+                components={uiComponents}
+                assetUrls={customAssets}
+                autoFocus={true}
+                hideUi={false}
+                acceptedImageMimeTypes={DEFAULT_SUPPORTED_IMAGE_TYPES}
+                acceptedVideoMimeTypes={DEFAULT_SUPPORT_VIDEO_TYPES}
+                maxImageDimension={Infinity}
+                maxAssetSize={100 * 1024 * 1024}
+                renderDebugMenuItems={() => []}
+            />
+        </div>
+    );
+}
diff --git a/src/pages/tldraw/singlePlayerPage.tsx b/src/pages/tldraw/singlePlayerPage.tsx
new file mode 100644
index 0000000..c047c5d
--- /dev/null
+++ b/src/pages/tldraw/singlePlayerPage.tsx
@@ -0,0 +1,514 @@
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate, useLocation } from 'react-router';
+import {
+    Tldraw,
+    Editor,
+    useTldrawUser,
+    DEFAULT_SUPPORT_VIDEO_TYPES,
+    DEFAULT_SUPPORTED_IMAGE_TYPES,
+    TLStore,
+    TLStoreWithStatus
+} from '@tldraw/tldraw';
+import { useTLDraw } from '../../contexts/TLDrawContext';
+import { useUser } from '../../contexts/UserContext';
+// Tldraw services
+import { localStoreService } from '../../services/tldraw/localStoreService';
+import { PresentationService } from '../../services/tldraw/presentationService';
+import { UserNeoDBService } from '../../services/graph/userNeoDBService';
+import { NodeCanvasService } from '../../services/tldraw/nodeCanvasService';
+import { NavigationSnapshotService } from '../../services/tldraw/snapshotService';
+// Tldraw utils
+import { getUiOverrides, getUiComponents } from '../../utils/tldraw/ui-overrides';
+import { customAssets } from '../../utils/tldraw/assets';
+import { singlePlayerTools } from '../../utils/tldraw/tools';
+import { allShapeUtils } from '../../utils/tldraw/shapes';
+import { allBindingUtils } from '../../utils/tldraw/bindings';
+import { singlePlayerEmbeds } from '../../utils/tldraw/embeds';
+import { customSchema } from '../../utils/tldraw/schemas';
+// Navigation
+import { useNavigationStore } from '../../stores/navigationStore';
+// Layout
+import { HEADER_HEIGHT } from '../../pages/Layout';
+// Styles
+import '../../utils/tldraw/tldraw.css';
+// App debug
+import { logger } from '../../debugConfig';
+import { CircularProgress, Alert, Snackbar } from '@mui/material';
+import { getThemeFromLabel } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-styles';
+import { NodeData } from '../../types/graph-shape';
+import { NavigationNode } from '../../types/navigation';
+
+interface LoadingState {
+    status: 'ready' | 'loading' | 'error';
+    error: string;
+}
+
+export default function SinglePlayerPage() {
+    // Context hooks with initialization states
+    const { user, loading: userLoading } = useUser();
+    const { 
+        tldrawPreferences, 
+        initializePreferences,
+        presentationMode,
+        setTldrawPreferences
+    } = useTLDraw();
+    const routerNavigate = useNavigate();
+    const location = useLocation();
+
+    // Navigation store
+    const { context } = useNavigationStore();
+
+    // Refs
+    const editorRef = useRef<Editor | null>(null);
+    const snapshotServiceRef = useRef<NavigationSnapshotService | null>(null);
+
+    // State
+    const [loadingState, setLoadingState] = useState<LoadingState>({ 
+        status: 'ready', 
+        error: '' 
+    });
+    const [isInitialLoad, setIsInitialLoad] = useState(true);
+    const [isEditorReady, setIsEditorReady] = useState(false);
+    const [store, setStore] = useState<TLStore | TLStoreWithStatus | undefined>(undefined);
+
+    // TLDraw user preferences
+    const tldrawUser = useTldrawUser({
+        userPreferences: {
+            id: user?.id ?? '',
+            name: user?.display_name,
+            color: tldrawPreferences?.color,
+            locale: tldrawPreferences?.locale,
+            colorScheme: tldrawPreferences?.colorScheme,
+            animationSpeed: tldrawPreferences?.animationSpeed,
+            isSnapMode: tldrawPreferences?.isSnapMode
+        },
+        setUserPreferences: setTldrawPreferences
+    });
+
+    // Initialize store
+    useEffect(() => {
+        if (!isEditorReady) {
+            logger.debug('single-player-page', '⏳ Waiting for editor to be ready');
+            return;
+        }
+        
+        if (!user) {
+            logger.debug('single-player-page', '⏳ Waiting for user data');
+            return;
+        }
+
+        if (!editorRef.current) {
+            logger.debug('single-player-page', '⏳ Waiting for editor ref');
+            return;
+        }
+
+        logger.info('single-player-page', '🔄 Starting store initialization', {
+            isEditorReady,
+            hasUser: !!user,
+            userType: user.user_type,
+            username: user.username
+        });
+
+        const initializeStoreAndSnapshot = async () => {
+            try {
+                setLoadingState({ status: 'loading', error: '' });
+                
+                // 1. Create store
+                logger.debug('single-player-page', '🔄 Creating TLStore');
+                const newStore = localStoreService.getStore({
+                    schema: customSchema,
+                    shapeUtils: allShapeUtils,
+                    bindingUtils: allBindingUtils
+                });
+                logger.debug('single-player-page', '✅ TLStore created');
+
+                // 2. Initialize snapshot service
+                const snapshotService = new NavigationSnapshotService(newStore);
+                snapshotServiceRef.current = snapshotService;
+                logger.debug('single-player-page', '✨ Initialized NavigationSnapshotService');
+
+                // 3. Load initial snapshot if we have a node
+                if (context.node) {
+                    logger.debug('single-player-page', '📥 Loading snapshot from database', { 
+                        dbName: user.user_db_name,
+                        tldraw_snapshot: context.node.tldraw_snapshot,
+                        user_type: user.user_type,
+                        username: user.username
+                    });
+
+                    await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
+                        context.node.tldraw_snapshot,
+                        user.user_db_name,
+                        newStore,
+                        setLoadingState
+                    );
+                    logger.debug('single-player-page', '✅ Snapshot loaded from database');
+                } else {
+                    logger.debug('single-player-page', '⚠️ No node in context, skipping snapshot load');
+                }
+
+                // 4. Set up auto-save
+                newStore.listen(() => {
+                    if (snapshotServiceRef.current && context.node) {
+                        logger.debug('single-player-page', '💾 Auto-saving changes');
+                        snapshotServiceRef.current.forceSaveCurrentNode().catch(error => {
+                            logger.error('single-player-page', '❌ Auto-save failed', error);
+                        });
+                    }
+                });
+
+                // 5. Update store state
+                setStore(newStore);
+                setLoadingState({ status: 'ready', error: '' });
+                logger.info('single-player-page', '✅ Store initialization complete');
+
+                // 6. Handle cleanup
+                return () => {
+                    logger.debug('single-player-page', '🧹 Starting cleanup');
+                    if (snapshotServiceRef.current) {
+                        snapshotServiceRef.current.forceSaveCurrentNode().catch(error => {
+                            logger.error('single-player-page', '❌ Final save failed', error);
+                        });
+                        snapshotServiceRef.current.clearCurrentNode();
+                        snapshotServiceRef.current = null;
+                    }
+                    newStore.dispose();
+                    setStore(undefined);
+                    logger.debug('single-player-page', '🧹 Cleanup complete');
+                };
+            } catch (error) {
+                const errorMessage = error instanceof Error ? error.message : 'Failed to initialize store';
+                logger.error('single-player-page', '❌ Store initialization failed', error);
+                setLoadingState({ status: 'error', error: errorMessage });
+                return undefined;
+            }
+        };
+
+        initializeStoreAndSnapshot();
+    }, [isEditorReady, user, context.node, editorRef.current]);
+
+    // Handle initial node placement
+    useEffect(() => {
+        const placeInitialNode = async () => {
+            if (!context.node || !editorRef.current || !store || !isInitialLoad) {
+                return;
+            }
+
+            try {
+                setLoadingState({ status: 'loading', error: '' });
+                
+                // Center the node
+                const nodeData = await loadNodeData(context.node);
+                await NodeCanvasService.centerCurrentNode(editorRef.current, context.node, nodeData);
+                
+                setIsInitialLoad(false);
+                setLoadingState({ status: 'ready', error: '' });
+            } catch (error) {
+                logger.error('single-player-page', '❌ Failed to place initial node', error);
+                setLoadingState({ 
+                    status: 'error', 
+                    error: error instanceof Error ? error.message : 'Failed to place initial node'
+                });
+            }
+        };
+
+        placeInitialNode();
+    }, [context.node, store, isInitialLoad]);
+
+    // Handle navigation changes
+    useEffect(() => {
+        const handleNodeChange = async () => {
+            if (!context.node?.id || !editorRef.current || !snapshotServiceRef.current || !store) {
+                return;
+            }
+
+            // We can safely assert these types because we've checked for null above
+            const editor = editorRef.current as Editor;
+            const snapshotService = snapshotServiceRef.current;
+            const currentNode = context.node;
+
+            try {
+                setLoadingState({ status: 'loading', error: '' });
+                logger.debug('single-player-page', '🔄 Loading node data', {
+                    nodeId: currentNode.id,
+                    tldraw_snapshot: currentNode.tldraw_snapshot,
+                    isInitialLoad
+                });
+
+                // Get the previous node from navigation history
+                const previousNode = context.history.currentIndex > 0 
+                    ? context.history.nodes[context.history.currentIndex - 1] 
+                    : null;
+
+                // Handle navigation in snapshot service
+                await snapshotService.handleNavigationStart(previousNode, currentNode);
+
+                // Center the node on canvas
+                const nodeData = await loadNodeData(currentNode);
+                await NodeCanvasService.centerCurrentNode(editor, currentNode, nodeData);
+
+                setLoadingState({ status: 'ready', error: '' });
+            } catch (error) {
+                logger.error('single-player-page', '❌ Failed to load node data', error);
+                setLoadingState({ 
+                    status: 'error', 
+                    error: error instanceof Error ? error.message : 'Failed to load node data'
+                });
+            }
+        };
+
+        handleNodeChange();
+    }, [context.node?.id, context.history, store]);
+
+    // Initialize preferences when user is available
+    useEffect(() => {
+        if (user?.id && !tldrawPreferences) {
+            logger.debug('single-player-page', '🔄 Initializing preferences for user', { userId: user.id });
+            initializePreferences(user.id);
+        }
+    }, [user?.id, tldrawPreferences, initializePreferences]);
+
+    // Redirect if no user or incorrect role
+    useEffect(() => {
+        if (!user || user.user_type !== 'admin') {
+            logger.info('single-player-page', '🚪 Redirecting to home - no user or incorrect role', {
+                hasUser: !!user,
+                userType: user?.user_type
+            });
+            routerNavigate('/', { replace: true });
+        }
+    }, [user, routerNavigate]);
+
+    // Handle presentation mode
+    useEffect(() => {
+        if (presentationMode && editorRef.current) {
+            logger.info('presentation', '🔄 Presentation mode changed', { 
+                presentationMode,
+                editorExists: !!editorRef.current
+            });
+
+            const editor = editorRef.current;
+            const presentationService = new PresentationService(editor);
+            const cleanup = presentationService.startPresentationMode();
+
+            return () => {
+                logger.info('presentation', '🧹 Cleaning up presentation mode');
+                presentationService.stopPresentationMode();
+                cleanup();
+            };
+        }
+    }, [presentationMode]);
+
+    // Handle shared content
+    useEffect(() => {
+        const handleSharedContent = async () => {
+            if (!editorRef.current || !location.state) {
+              return;
+            }
+
+            const editor = editorRef.current;
+            const { sharedFile, sharedContent } = location.state as {
+                sharedFile?: File;
+                sharedContent?: {
+                    title?: string;
+                    text?: string;
+                    url?: string;
+                };
+            };
+
+            if (sharedFile) {
+                logger.info('single-player-page', '📤 Processing shared file', { 
+                    name: sharedFile.name,
+                    type: sharedFile.type
+                });
+
+                try {
+                    // Handle different file types
+                    if (sharedFile.type.startsWith('image/')) {
+                        const imageUrl = URL.createObjectURL(sharedFile);
+                        await editor.createShape({
+                            type: 'image',
+                            props: {
+                                url: imageUrl,
+                                w: 320,
+                                h: 240,
+                                name: sharedFile.name
+                            }
+                        });
+                        URL.revokeObjectURL(imageUrl);
+                    } else if (sharedFile.type === 'application/pdf') {
+                        // Handle PDF (you might want to implement PDF handling)
+                        logger.info('single-player-page', '📄 PDF handling not implemented yet');
+                    } else if (sharedFile.type === 'text/plain') {
+                        const text = await sharedFile.text();
+                        editor.createShape({
+                            type: 'text',
+                            props: { text }
+                        });
+                    }
+                } catch (error) {
+                    logger.error('single-player-page', '❌ Error processing shared file', { error });
+                }
+            }
+
+            if (sharedContent) {
+                logger.info('single-player-page', '📤 Processing shared content', { sharedContent });
+                
+                const { title, text, url } = sharedContent;
+                let contentText = '';
+                
+                if (title) {
+                  contentText += `${title}\n`;
+                }
+                if (text) {
+                  contentText += `${text}\n`;
+                }
+                if (url) {
+                  contentText += url;
+                }
+
+                if (contentText) {
+                    editor.createShape({
+                        type: 'text',
+                        props: { text: contentText }
+                    });
+                }
+            }
+        };
+
+        handleSharedContent();
+    }, [location.state]);
+
+    // Modify the render logic to use presentationMode
+    const uiOverrides = getUiOverrides(presentationMode);
+    const uiComponents = getUiComponents(presentationMode);
+
+    // Show loading state if user context is still loading
+    if (userLoading) {
+        return (
+            <div style={{ 
+                position: 'fixed',
+                inset: 0,
+                top: `${HEADER_HEIGHT}px`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                backgroundColor: 'var(--color-background)'
+            }}>
+                <CircularProgress />
+            </div>
+        );
+    }
+
+    return (
+        <div style={{ 
+            position: 'fixed',
+            inset: 0,
+            top: `${HEADER_HEIGHT}px`,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden'
+        }}>
+            {/* Loading overlay - show when loading or contexts not initialized */}
+            {(loadingState.status === 'loading' || !store) && (
+                <div style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: 'rgba(255, 255, 255, 0.8)',
+                    zIndex: 1000,
+                }}>
+                    <CircularProgress />
+                </div>
+            )}
+
+            {/* Error snackbar */}
+            <Snackbar 
+                open={loadingState.status === 'error'} 
+                autoHideDuration={6000}
+                onClose={() => setLoadingState({ status: 'ready', error: '' })}
+            >
+                <Alert severity="error" onClose={() => setLoadingState({ status: 'ready', error: '' })}>
+                    {loadingState.error}
+                </Alert>
+            </Snackbar>
+
+            <Tldraw
+                user={tldrawUser}
+                store={store}
+                tools={singlePlayerTools}
+                shapeUtils={allShapeUtils}
+                bindingUtils={allBindingUtils}
+                components={uiComponents}
+                overrides={uiOverrides}
+                embeds={singlePlayerEmbeds}
+                assetUrls={customAssets}
+                autoFocus={true}
+                hideUi={false}
+                inferDarkMode={false}
+                acceptedImageMimeTypes={DEFAULT_SUPPORTED_IMAGE_TYPES}
+                acceptedVideoMimeTypes={DEFAULT_SUPPORT_VIDEO_TYPES}
+                maxImageDimension={Infinity}
+                maxAssetSize={100 * 1024 * 1024}
+                renderDebugMenuItems={() => []}
+                onMount={(editor) => {
+                    logger.info('single-player-page', '🎨 Starting Tldraw mount');
+                    try {
+                        if (!editor) {
+                            logger.error('single-player-page', '❌ Editor is null in onMount');
+                            return;
+                        }
+                        
+                        editorRef.current = editor;
+                        logger.debug('single-player-page', '✅ Editor ref set');
+                        
+                        setIsEditorReady(true);
+                        logger.info('single-player-page', '✅ Tldraw mounted successfully', {
+                            editorId: editor.store.id,
+                            presentationMode,
+                            isEditorReady: true
+                        });
+                    } catch (error) {
+                        logger.error('single-player-page', '❌ Error in onMount', error);
+                    }
+                }}
+            />
+        </div>
+    );
+}
+
+const loadNodeData = async (node: NavigationNode): Promise<NodeData> => {
+    // 1. Always fetch fresh data
+    const dbName = UserNeoDBService.getNodeDatabaseName(node);
+    const fetchedData = await UserNeoDBService.fetchNodeData(node.id, dbName);
+    
+    if (!fetchedData?.node_data) {
+        throw new Error('Failed to fetch node data');
+    }
+
+    // 2. Process the data into the correct shape
+    const theme = getThemeFromLabel(node.type);
+    return {
+        ...fetchedData.node_data,
+        title: fetchedData.node_data.title || node.label,
+        w: 500,
+        h: 350,
+        state: {
+            parentId: null,
+            isPageChild: true,
+            hasChildren: null,
+            bindings: null
+        },
+        headerColor: theme.headerColor,
+        backgroundColor: theme.backgroundColor,
+        isLocked: false,
+        __primarylabel__: node.type,
+        unique_id: node.id,
+        tldraw_snapshot: node.tldraw_snapshot
+    };
+};
diff --git a/src/pages/user/NotFound.tsx b/src/pages/user/NotFound.tsx
new file mode 100644
index 0000000..f078faf
--- /dev/null
+++ b/src/pages/user/NotFound.tsx
@@ -0,0 +1,62 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { Box, Typography, Button, Container, useTheme } from "@mui/material";
+import { useAuth } from "../../contexts/AuthContext";
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import { logger } from '../../debugConfig';
+
+function NotFound() {
+    const theme = useTheme();
+    const navigate = useNavigate();
+    const { user } = useAuth();
+
+    useEffect(() => {
+        logger.debug('not-found', '🔄 Not Found page rendered', { 
+            hasUser: !!user,
+            userId: user?.id 
+        });
+    }, [user]);
+
+    const handleReturn = () => {
+        const returnPath = user ? '/single-player' : '/';
+        logger.debug('not-found', '🔄 Navigating to return path', { returnPath });
+        navigate(returnPath);
+    };
+
+    return (
+        <Container maxWidth="sm">
+            <Box
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: '100vh',
+                    textAlign: 'center',
+                    gap: 3
+                }}
+            >
+                <ErrorOutlineIcon sx={{ fontSize: 60, color: theme.palette.error.main }} />
+                <Typography variant="h2" component="h1" gutterBottom>
+                    404
+                </Typography>
+                <Typography variant="h5" gutterBottom>
+                    Page Not Found
+                </Typography>
+                <Typography variant="body1" color="text.secondary" paragraph>
+                    The page you're looking for doesn't exist or has been moved.
+                </Typography>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    size="large"
+                    onClick={handleReturn}
+                >
+                    Return to {user ? 'Canvas' : 'Home'}
+                </Button>
+            </Box>
+        </Container>
+    );
+}
+
+export default NotFound;
\ No newline at end of file
diff --git a/src/pages/user/calendarPage.tsx b/src/pages/user/calendarPage.tsx
new file mode 100644
index 0000000..cea2361
--- /dev/null
+++ b/src/pages/user/calendarPage.tsx
@@ -0,0 +1,530 @@
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { EventContentArg, EventClickArg, CalendarOptions } from '@fullcalendar/core';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import multiMonthPlugin from '@fullcalendar/multimonth';  // Import the multiMonth plugin for year view
+import listPlugin from '@fullcalendar/list';
+import { useAuth } from '../../contexts/AuthContext';
+import { useNeoUser } from '../../contexts/NeoUserContext';
+import { FaEllipsisV } from 'react-icons/fa';
+import { logger } from '../../debugConfig';
+import { TimetableNeoDBService } from '../../services/graph/timetableNeoDBService';
+
+interface Event {
+  id: string;
+  title: string;
+  start: string;
+  end: string;
+  groupId?: string;
+  extendedProps?: {
+    subjectClass: string;
+    color: string;
+    periodCode: string;
+    tldraw_snapshot?: string;
+  };
+}
+
+function lightenColor(color: string, amount: number): string {
+  // Remove the '#' if it exists
+  color = color.replace(/^#/, '');
+
+  // Parse the color
+  let r = parseInt(color.slice(0, 2), 16);
+  let g = parseInt(color.slice(2, 4), 16);
+  let b = parseInt(color.slice(4, 6), 16);
+
+  // Convert to HSL
+  const [h, s, l] = rgbToHsl(r, g, b);
+
+  // Adjust the lightness based on the current lightness
+  const newL = l < 0.5 ? l + (1 - l) * amount : l + (1 - l) * amount * 0.5;
+
+  // Convert back to RGB
+  [r, g, b] = hslToRgb(h, s, newL);
+
+  // Convert to hex and return
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
+
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0, s, l = (max + min) / 2;
+
+  if (max === min) {
+    h = s = 0; // achromatic
+  } else {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+      case g: h = (b - r) / d + 2; break;
+      case b: h = (r - g) / d + 4; break;
+    }
+    h /= 6;
+  }
+
+  return [h, s, l];
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  let r, g, b;
+
+  if (s === 0) {
+    r = g = b = l; // achromatic
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) {
+        t += 1;
+      }
+      if (t > 1) {
+        t -= 1;
+      }
+      if (t < 1/6) {
+        return p + (q - p) * 6 * t;
+      }
+      if (t < 1/2) {
+        return q;
+      }
+      if (t < 2/3) {
+        return p + (q - p) * (2/3 - t) * 6;
+      }
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1/3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1/3);
+  }
+
+  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+const CalendarPage: React.FC = () => {
+  const [events, setEvents] = useState<Event[]>([]);
+  const [selectedClasses, setSelectedClasses] = useState<string[]>([]);
+  const { user } = useAuth();
+  const calendarRef = useRef<FullCalendar>(null);
+  const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
+  const [hiddenSubjectClassDivs, setHiddenSubjectClassDivs] = useState<string[]>([]);
+  const [hiddenPeriodCodeDivs, setHiddenPeriodCodeDivs] = useState<string[]>([]);
+  const [hiddenTimeDivs, setHiddenTimeDivs] = useState<string[]>([]);
+  const [eventRange, setEventRange] = useState<{ start: Date | null; end: Date | null }>({ start: null, end: null });
+  const { workerNode, isLoading, error, workerDbName } = useNeoUser();
+
+  const getEventRange = useCallback((events: Event[]) => {
+    if (events.length === 0) {
+      return { start: null, end: null };
+    }
+
+    let start = new Date(events[0].start);
+    let end = new Date(events[0].end);
+
+    events.forEach(event => {
+      const eventStart = new Date(event.start);
+      const eventEnd = new Date(event.end);
+      if (eventStart < start) {
+        start = eventStart;
+      }
+      if (eventEnd > end) {
+        end = eventEnd;
+      }
+    });
+
+    // Adjust start to the beginning of its month and end to the end of its month
+    start.setDate(1);
+    end.setMonth(end.getMonth() + 1, 0);
+
+    return { start, end };
+  }, []);
+
+  const fetchEvents = useCallback(async () => {
+    if (!user || isLoading || error || !workerNode?.nodeData) {
+      if (error) {
+        logger.error('calendar', 'NeoUser context error', { error });
+      }
+      return;
+    }
+
+    try {
+      logger.debug('calendar', 'Fetching events', {
+        unique_id: workerNode.nodeData.unique_id,
+        school_db_name: workerDbName
+      });
+
+      const events = await TimetableNeoDBService.fetchTeacherTimetableEvents(
+        workerNode.nodeData.unique_id,
+        workerDbName || ''
+      );
+
+      const transformedEvents = events.map(event => ({
+        ...event,
+        extendedProps: {
+          ...event.extendedProps,
+          tldraw_snapshot: workerNode?.nodeData?.tldraw_snapshot
+        }
+      }));
+
+      setEvents(transformedEvents);
+      
+      const classes: string[] = [];
+      transformedEvents.forEach((event: Event) => {
+        if (event.extendedProps?.subjectClass && !classes.includes(event.extendedProps.subjectClass)) {
+          classes.push(event.extendedProps.subjectClass);
+        }
+      });
+      
+      setSelectedClasses(classes);
+
+      const range = getEventRange(transformedEvents);
+      setEventRange(range);
+      
+    } catch (error) {
+      logger.error('calendar', 'Error fetching events', { error });
+    }
+  }, [user, workerNode, workerDbName, isLoading, error, getEventRange]);
+
+  useEffect(() => {
+    fetchEvents();
+  }, [fetchEvents]);
+
+  const handleEventClick = useCallback((clickInfo: EventClickArg) => {
+    const tldraw_snapshot = clickInfo.event.extendedProps?.tldraw_snapshot;
+    if (tldraw_snapshot) {
+      // TODO: Implement tldraw_snapshot retrieval from storage API
+      // For now, we'll just log it
+      console.log('TLDraw snapshot:', tldraw_snapshot);
+    }
+  }, []);
+
+  const filteredEvents = useMemo(() => 
+    events.filter(event => 
+      selectedClasses.includes(event.extendedProps?.subjectClass || '')
+    ), [events, selectedClasses]
+  );
+
+  const handleResize = useCallback(() => {
+    if (calendarRef.current) {
+      calendarRef.current.getApi().updateSize();
+    }
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+
+  const toggleDropdown = useCallback((eventId: string) => {
+    setOpenDropdownId(openDropdownId === eventId ? null : eventId);
+  }, [openDropdownId]);
+
+  const toggleSubjectClassDivVisibility = useCallback((subjectClass: string) => {
+    setHiddenSubjectClassDivs(prev => 
+      prev.includes(subjectClass)
+        ? prev.filter(c => c !== subjectClass)
+        : [...prev, subjectClass]
+    );
+  }, []);
+
+  const togglePeriodCodeDivVisibility = useCallback((subjectClass: string) => {
+    setHiddenPeriodCodeDivs(prev => 
+      prev.includes(subjectClass)
+        ? prev.filter(c => c !== subjectClass)
+        : [...prev, subjectClass]
+    );
+  }, []);
+
+  const toggleTimeDivVisibility = useCallback((subjectClass: string) => {
+    setHiddenTimeDivs(prev => 
+      prev.includes(subjectClass)
+        ? prev.filter(c => c !== subjectClass)
+        : [...prev, subjectClass]
+    );
+  }, []);
+
+  const hideSubjectClassFromView = useCallback((subjectClass: string) => {
+    setSelectedClasses(prev => prev.filter(c => c !== subjectClass));
+  }, []);
+
+  const toggleAllDivs = useCallback((subjectClass: string, hide: boolean) => {
+    const updateHiddenDivs = (prev: string[]) => 
+      hide ? [...prev, subjectClass] : prev.filter(c => c !== subjectClass);
+
+    setHiddenSubjectClassDivs(updateHiddenDivs);
+    setHiddenPeriodCodeDivs(updateHiddenDivs);
+    setHiddenTimeDivs(updateHiddenDivs);
+  }, []);
+
+  const areAllDivsHidden = useCallback((subjectClass: string) => {
+    return hiddenSubjectClassDivs.includes(subjectClass) &&
+           hiddenPeriodCodeDivs.includes(subjectClass) &&
+           hiddenTimeDivs.includes(subjectClass);
+  }, [hiddenSubjectClassDivs, hiddenPeriodCodeDivs, hiddenTimeDivs]);
+
+  const renderEventContent = useCallback((eventInfo: EventContentArg) => {
+    const { event } = eventInfo;
+    const subjectClass = event.extendedProps?.subjectClass || 'Subject Class';
+    const originalColor = event.extendedProps?.color || '#ffffff';
+    const lightenedColor = lightenColor(originalColor, 0.9);
+
+    const eventStyle = {
+      backgroundColor: lightenedColor,
+      color: '#000',
+      padding: '4px 6px',
+      borderRadius: '6px',
+      fontSize: '1.0em',
+      overflow: 'visible',
+      display: 'flex',
+      flexDirection: 'column' as const,
+      height: '100%',
+      boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+      border: `2px solid ${originalColor}`,
+      position: 'relative' as const,
+    };
+
+    const titleStyle = {
+      fontWeight: 'bold' as const,
+      whiteSpace: 'nowrap' as const,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      paddingRight: '20px',
+    };
+
+    const contentStyle = {
+      fontSize: '0.8em',
+      whiteSpace: 'nowrap' as const,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    };
+
+    const ellipsisStyle = {
+      position: 'absolute' as const,
+      top: '4px',
+      right: '4px',
+      cursor: 'pointer',
+      zIndex: 10,
+    };
+
+    return (
+      <div className={`custom-event-content ${openDropdownId === event.id ? 'event-with-dropdown' : ''}`} style={eventStyle}>
+        <div style={titleStyle}>{event.title}</div>
+        <div style={ellipsisStyle}>
+          <FaEllipsisV onClick={(e) => {
+            e.stopPropagation();
+            toggleDropdown(event.id);
+          }} />
+        </div>
+        {openDropdownId === event.id && (
+          <div className="event-dropdown" style={{ position: 'absolute'}}>
+            <div onClick={(e) => {
+                e.stopPropagation();
+                hideSubjectClassFromView(subjectClass);
+                setOpenDropdownId(null);
+            }}>
+                Hide this class from view
+            </div>
+            <div onClick={(e) => {
+              e.stopPropagation();
+              toggleAllDivs(subjectClass, !areAllDivsHidden(subjectClass));
+              setOpenDropdownId(null);
+            }}>
+              {areAllDivsHidden(subjectClass) ? 'Show' : 'Hide'} all divs
+            </div>
+            <div onClick={(e) => {
+              e.stopPropagation();
+              toggleSubjectClassDivVisibility(subjectClass);
+              setOpenDropdownId(null);
+            }}>
+              {hiddenSubjectClassDivs.includes(subjectClass) ? 'Show' : 'Hide'} subject class
+            </div>
+            <div onClick={(e) => {
+              e.stopPropagation();
+              togglePeriodCodeDivVisibility(subjectClass);
+              setOpenDropdownId(null);
+            }}>
+              {hiddenPeriodCodeDivs.includes(subjectClass) ? 'Show' : 'Hide'} period code
+            </div>
+            <div onClick={(e) => {
+              e.stopPropagation();
+              toggleTimeDivVisibility(subjectClass);
+              setOpenDropdownId(null);
+            }}>
+              {hiddenTimeDivs.includes(subjectClass) ? 'Show' : 'Hide'} time
+            </div>
+          </div>
+        )}
+        {!hiddenSubjectClassDivs.includes(subjectClass) && (
+          <div style={contentStyle} className="event-subject-class">{subjectClass}</div>
+        )}
+        {!hiddenPeriodCodeDivs.includes(subjectClass) && (
+          <div style={contentStyle} className="event-period">{event.extendedProps?.periodCode || 'Period Code'}</div>
+        )}
+        {!hiddenTimeDivs.includes(subjectClass) && (
+          <div style={contentStyle} className="event-time">
+            {event.start?.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})} - 
+            {event.end?.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
+          </div>
+        )}
+      </div>
+    );
+  }, [openDropdownId, hiddenSubjectClassDivs, hiddenPeriodCodeDivs, hiddenTimeDivs, toggleDropdown, hideSubjectClassFromView, toggleAllDivs, areAllDivsHidden, toggleSubjectClassDivVisibility, togglePeriodCodeDivVisibility, toggleTimeDivVisibility]);
+
+  const calendarOptions: CalendarOptions = useMemo(() => ({
+    plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, multiMonthPlugin, listPlugin],
+    initialView: "timeGridWeek",
+    headerToolbar: {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'viewToggle filterClassesButton'
+    },
+    customButtons: {
+      filterClassesButton: {
+        text: 'Filter Classes',
+        click: () => {} // We'll implement this differently later
+      },
+      viewToggle: {
+        text: 'Change View',
+        click: () => {} // We'll implement this differently later
+      }
+    },
+    views: {
+      dayGridYear: {
+        type: 'dayGrid',
+        duration: { years: 1 },
+        buttonText: 'Year Grid',
+        visibleRange: (currentDate: Date) => ({
+          start: eventRange.start || currentDate,
+          end: eventRange.end || currentDate
+        }),
+      },
+      dayGridMonth: {
+        buttonText: 'Month',
+        visibleRange: (currentDate: Date) => ({
+          start: eventRange.start || currentDate,
+          end: eventRange.end || currentDate
+        }),
+      },
+      timeGridWeek: {
+        buttonText: 'Week',
+        visibleRange: (currentDate: Date) => ({
+          start: eventRange.start || currentDate,
+          end: eventRange.end || currentDate
+        }),
+      },
+      timeGridDay: {
+        buttonText: 'Day',
+        visibleRange: (currentDate: Date) => ({
+          start: eventRange.start || currentDate,
+          end: eventRange.end || currentDate
+        }),
+      },
+      listYear: {
+        buttonText: 'List Year',
+        visibleRange: (currentDate: Date) => ({
+          start: eventRange.start || currentDate,
+          end: eventRange.end || currentDate
+        }),
+      },
+      listMonth: {
+        buttonText: 'List Month',
+        visibleRange: (currentDate: Date) => ({
+          start: eventRange.start || currentDate,
+          end: eventRange.end || currentDate
+        }),
+      },
+      listWeek: {
+        buttonText: 'List Week',
+        visibleRange: (currentDate: Date) => ({
+          start: eventRange.start || currentDate,
+          end: eventRange.end || currentDate
+        }),
+      },
+      listDay: {
+        buttonText: 'List Day',
+        visibleRange: (currentDate: Date) => ({
+          start: eventRange.start || currentDate,
+          end: eventRange.end || currentDate
+        }),
+      },
+    },
+    validRange: eventRange.start && eventRange.end ? {
+      start: eventRange.start,
+      end: eventRange.end
+    } : undefined,
+    events: filteredEvents,
+    height: "100%",
+    slotMinTime: "08:00:00",
+    slotMaxTime: "17:00:00",
+    allDaySlot: false,
+    expandRows: true,
+    slotEventOverlap: false,
+    slotDuration: "00:30:00",
+    slotLabelInterval: "01:00",
+    eventContent: renderEventContent,
+    eventClassNames: (arg: { event: { extendedProps?: { subjectClass?: string } } }) => 
+      [arg.event.extendedProps?.subjectClass || ''],
+    eventDidMount: (arg: { event: { extendedProps?: { color?: string }; id: string }; el: HTMLElement }) => {
+      if (arg.event.extendedProps?.color) {
+        const originalColor = arg.event.extendedProps.color;
+        const lightenedColor = lightenColor(originalColor, 0.4);
+        arg.el.style.backgroundColor = lightenedColor;
+        arg.el.style.borderColor = originalColor;
+      }
+      
+      const updateEventContent = () => {
+        const height = arg.el.offsetHeight;
+        const contentElements = arg.el.querySelectorAll('.custom-event-content > div:not(.event-dropdown)');
+        
+        contentElements.forEach((el, index) => {
+          const element = el as HTMLElement;
+          if (index === 0 || index === 1) {
+            element.style.display = 'block';
+          } else if (height >= 40 && index === 2) {
+            element.style.display = 'block';
+          } else if (height >= 60 && index === 3) {
+            element.style.display = 'block';
+          } else if (height >= 80 && index === 4) {
+            element.style.display = 'block';
+          } else {
+            element.style.display = 'none';
+          }
+        });
+      };
+
+      updateEventContent();
+      
+      const resizeObserver = new ResizeObserver(updateEventContent);
+      resizeObserver.observe(arg.el);
+
+      return () => resizeObserver.disconnect();
+    },
+    eventClick: handleEventClick,
+  }), [eventRange.start, eventRange.end, filteredEvents, renderEventContent, handleEventClick]);
+
+  if (!user) {
+    console.log('User not logged in');
+    return <div>Please log in to view your calendar.</div>;
+  }
+
+  return (
+    <div className="calendar-page">
+      <div className="calendar-container" style={{ height: '100vh', position: 'relative' }}>
+        <FullCalendar
+          {...calendarOptions}
+          ref={calendarRef}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CalendarPage;
\ No newline at end of file
diff --git a/src/pages/user/settingsPage.tsx b/src/pages/user/settingsPage.tsx
new file mode 100644
index 0000000..6192959
--- /dev/null
+++ b/src/pages/user/settingsPage.tsx
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { 
+  Container, 
+  Typography, 
+  Paper, 
+  Box,
+  Button,
+  Alert
+} from '@mui/material';
+import { useAuth } from '../../contexts/AuthContext';
+import { useNeoUser } from '../../contexts/NeoUserContext';
+import { TimetableNeoDBService } from '../../services/graph/timetableNeoDBService';
+import { CCTeacherNodeProps } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+
+const SettingsPage: React.FC = () => {
+  const { user, user_role } = useAuth();
+  const { userNode, workerNode } = useNeoUser();
+  const [uploadError, setUploadError] = useState<string | null>(null);
+  const [uploadSuccess, setUploadSuccess] = useState<string | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  // Check if user is a teacher (includes both email and MS teachers)
+  const isTeacher = user_role?.includes('teacher');
+
+  const handleTimetableUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      setIsUploading(true);
+      setUploadError(null);
+      setUploadSuccess(null);
+      const result = await TimetableNeoDBService.handleTimetableUpload(
+        event.target.files?.[0],
+        userNode || undefined,
+        workerNode?.nodeData as CCTeacherNodeProps | undefined
+      );
+      if (result.success) {
+        setUploadSuccess(result.message);
+      } else {
+        setUploadError(result.message);
+      }
+    } finally {
+      setIsUploading(false);
+      if (event.target) {
+        event.target.value = '';
+      }
+    }
+  };
+
+  return (
+    <Container maxWidth="md" sx={{ mt: 4, mb: 4 }}>
+      <Typography variant="h4" gutterBottom>
+        Settings
+      </Typography>
+
+      {/* User Info Section */}
+      <Paper sx={{ p: 3, mb: 3 }}>
+        <Typography variant="h6" gutterBottom>
+          User Information
+        </Typography>
+        <Box sx={{ mb: 2 }}>
+          <Typography variant="body1">
+            Email: {user?.email}
+          </Typography>
+          <Typography variant="body1">
+            Role: {user_role}
+          </Typography>
+        </Box>
+      </Paper>
+
+      {/* Timetable Upload Section - Only visible for teachers */}
+      {isTeacher && (
+        <Paper sx={{ p: 3, mb: 3 }}>
+          <Typography variant="h6" gutterBottom>
+            Timetable Management
+          </Typography>
+          
+          {!userNode && (
+            <Alert severity="info" sx={{ mb: 2 }}>
+              Your workspace is being set up. Some features may be limited until setup is complete.
+            </Alert>
+          )}
+          
+          {uploadError && (
+            <Alert severity="error" sx={{ mb: 2 }}>
+              {uploadError}
+            </Alert>
+          )}
+          
+          {uploadSuccess && (
+            <Alert severity="success" sx={{ mb: 2 }}>
+              {uploadSuccess}
+            </Alert>
+          )}
+
+          <Box sx={{ mt: 2 }}>
+            <Button
+              variant="contained"
+              component="label"
+              disabled={isUploading || !workerNode}
+              color="secondary"
+              fullWidth
+            >
+              {isUploading ? 'Uploading...' : 'Upload Timetable'}
+              <input
+                type="file"
+                hidden
+                accept=".xlsx"
+                onChange={handleTimetableUpload}
+                disabled={isUploading}
+              />
+            </Button>
+            <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+              Upload your timetable in Excel (.xlsx) format
+            </Typography>
+          </Box>
+        </Paper>
+      )}
+
+      {/* Additional settings sections can be added here */}
+    </Container>
+  );
+};
+
+export default SettingsPage; 
\ No newline at end of file
diff --git a/src/services/.DS_Store b/src/services/.DS_Store
new file mode 100644
index 0000000..490fe2d
Binary files /dev/null and b/src/services/.DS_Store differ
diff --git a/src/services/auth/authService.ts b/src/services/auth/authService.ts
new file mode 100644
index 0000000..832f13f
--- /dev/null
+++ b/src/services/auth/authService.ts
@@ -0,0 +1,265 @@
+import { User, AuthChangeEvent, Session } from '@supabase/supabase-js';
+import { TLUserPreferences } from '@tldraw/tldraw';
+import { supabase } from '../../supabaseClient';
+import { storageService, StorageKeys } from './localStorageService';
+import { logger } from '../../debugConfig';
+import { DatabaseNameService } from '../graph/databaseNameService';
+
+export interface CCUser {
+  id: string;
+  email?: string;
+  user_type: string;
+  username: string;
+  display_name: string;
+  user_db_name: string;
+  school_db_name: string;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface CCUserMetadata {
+  username?: string;
+  user_type?: string;
+  display_name?: string;
+  email?: string;
+  name?: string;
+  preferred_username?: string;
+  [key: string]: string | undefined;
+}
+
+export function convertToCCUser(user: User, metadata: CCUserMetadata): CCUser {
+  // Extract username from various possible sources
+  const username = metadata.username || 
+                  metadata.preferred_username || 
+                  metadata.email?.split('@')[0] || 
+                  user.email?.split('@')[0] || 
+                  'user';
+
+  // Extract display name from various possible sources
+  const displayName = metadata.display_name || 
+                     metadata.name || 
+                     metadata.preferred_username || 
+                     username;
+
+  // Default to student if no user type specified
+  const userType = metadata.user_type || 'student';
+
+  const userDbName = DatabaseNameService.getUserPrivateDB(
+    userType,
+    username
+  );
+  const schoolDbName = DatabaseNameService.getDevelopmentSchoolDB();
+
+  return {
+    id: user.id,
+    email: user.email,
+    user_type: userType,
+    username: username,
+    display_name: displayName,
+    user_db_name: userDbName,
+    school_db_name: schoolDbName,
+    created_at: user.created_at,
+    updated_at: user.updated_at,
+  };
+}
+
+export type UserRole =
+  | 'email_teacher'
+  | 'email_student'
+  | 'cc_admin'
+  | 'cc_developer'
+  | 'super_admin';
+
+// Login response
+export interface LoginResponse {
+  user: CCUser | null;
+  accessToken: string | null;
+  userRole: string;
+  message: string | null;
+}
+
+// Session response
+export interface SessionResponse {
+  user: CCUser | null;
+  accessToken: string | null;
+  message: string | null;
+}
+
+// Registration response
+export interface RegistrationResponse extends LoginResponse {
+  user: CCUser;
+  accessToken: string | null;
+  userRole: UserRole;
+  message: string | null;
+}
+
+export interface EmailCredentials {
+  email: string;
+  password: string;
+  role: 'email_teacher' | 'email_student';
+}
+
+export type AuthCredentials = EmailCredentials;
+
+export const getTldrawPreferences = (user: CCUser): TLUserPreferences => {
+  return {
+    id: user.id,
+    colorScheme: 'system',
+  };
+};
+
+class AuthService {
+  private static instance: AuthService;
+
+  private constructor() {}
+
+  onAuthStateChange(
+    callback: (event: AuthChangeEvent, session: Session | null) => void
+  ) {
+    return supabase.auth.onAuthStateChange((event, session) => {
+      logger.info('auth-service', '🔄 Auth state changed', {
+        event,
+        hasSession: !!session,
+        userId: session?.user?.id,
+        eventType: event,
+      });
+
+      // Ensure we clear storage on signout
+      if (event === 'SIGNED_OUT') {
+        storageService.clearAll();
+      }
+
+      callback(event, session);
+    });
+  }
+
+  static getInstance(): AuthService {
+    if (!AuthService.instance) {
+      AuthService.instance = new AuthService();
+    }
+    return AuthService.instance;
+  }
+
+  async getCurrentSession(): Promise<SessionResponse> {
+    try {
+      const {
+        data: { session },
+        error,
+      } = await supabase.auth.getSession();
+      if (error) {
+        throw error;
+      }
+
+      if (!session) {
+        return { user: null, accessToken: null, message: 'No active session' };
+      }
+
+      return {
+        user: convertToCCUser(
+          session.user,
+          session.user.user_metadata as CCUserMetadata
+        ),
+        accessToken: session.access_token,
+        message: 'Session retrieved',
+      };
+    } catch (error) {
+      logger.error('auth-service', 'Failed to get current session:', error);
+      throw error;
+    }
+  }
+
+  async getCurrentUser(): Promise<CCUser | null> {
+    try {
+      const {
+        data: { user },
+        error,
+      } = await supabase.auth.getUser();
+      if (error || !user) {
+        return null;
+      }
+      return convertToCCUser(user, user.user_metadata as CCUserMetadata);
+    } catch (error) {
+      logger.error('auth-service', 'Failed to get current user:', error);
+      return null;
+    }
+  }
+
+  async login({
+    email,
+    password,
+    role,
+  }: EmailCredentials): Promise<LoginResponse> {
+    try {
+      logger.info('auth-service', '🔄 Attempting login', {
+        email,
+        role,
+      });
+
+      const { data, error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+
+      if (error) {
+        logger.error('auth-service', '❌ Supabase auth error', {
+          error: error.message,
+          status: error.status,
+        });
+        throw error;
+      }
+
+      if (!data.session) {
+        logger.error('auth-service', '❌ No session after login');
+        throw new Error('No session after login');
+      }
+
+      const ccUser = convertToCCUser(
+        data.user,
+        data.user.user_metadata as CCUserMetadata
+      );
+
+      // Store auth session in storage
+      storageService.set(StorageKeys.USER_ROLE, ccUser.user_type);
+      storageService.set(StorageKeys.USER, ccUser);
+      storageService.set(StorageKeys.SUPABASE_TOKEN, data.session.access_token);
+
+      logger.info('auth-service', '✅ Login successful', {
+        userId: ccUser.id,
+        role: ccUser.user_type,
+        username: ccUser.username,
+      });
+
+      return {
+        user: ccUser,
+        accessToken: data.session.access_token,
+        userRole: ccUser.user_type,
+        message: 'Login successful',
+      };
+    } catch (error) {
+      logger.error('auth-service', '❌ Login failed:', error);
+      throw error;
+    }
+  }
+
+  async logout(): Promise<void> {
+    try {
+      logger.debug('auth-service', '🔄 Attempting logout');
+      const { error } = await supabase.auth.signOut({ scope: 'local' });
+      if (error) {
+        logger.error('auth-service', '❌ Logout failed:', error);
+        throw error;
+      }
+      // Clear all stored data
+      storageService.clearAll();
+      // Force a refresh of the auth state
+      await supabase.auth.refreshSession();
+      logger.debug('auth-service', '✅ Logout successful');
+    } catch (error) {
+      logger.error('auth-service', '❌ Logout failed:', error);
+      throw error;
+    }
+  }
+}
+
+export const authService = AuthService.getInstance();
+
diff --git a/src/services/auth/localStorageService.ts b/src/services/auth/localStorageService.ts
new file mode 100644
index 0000000..812729e
--- /dev/null
+++ b/src/services/auth/localStorageService.ts
@@ -0,0 +1,111 @@
+import React from 'react';
+import { TLUserPreferences, TLUser } from '@tldraw/tldraw';
+import { CCUser } from '../../services/auth/authService';
+import { logger } from '../../debugConfig';
+
+// Type-safe storage keys
+export enum StorageKeys {
+  USER = 'user',
+  USER_ROLE = 'user_role',
+  SUPABASE_TOKEN = 'supabase_token',
+  MS_TOKEN = 'msAccessToken',
+  NEO4J_USER_DB = 'neo4jUserDbName',
+  NEO4J_WORKER_DB = 'neo4jWorkerDbName',
+  USER_NODES = 'userNodes',
+  CALENDAR_DATA = 'calendarData',
+  IS_NEW_REGISTRATION = 'isNewRegistration',
+  TLDRAW_PREFERENCES = 'tldrawUserPreferences',
+  TLDRAW_FILE_PATH = 'tldrawUserFilePath',
+  LOCAL_SNAPSHOT = 'localSnapshot',
+  NODE_FILE_PATH = 'nodeFilePath',
+  ONENOTE_NOTEBOOK = 'oneNoteNotebook',
+  PRESENTATION_MODE = 'presentationMode',
+  TLDRAW_USER = 'tldrawUser'
+}
+
+interface StorageValueTypes {
+  [StorageKeys.USER]: CCUser;
+  [StorageKeys.USER_ROLE]: string;
+  [StorageKeys.SUPABASE_TOKEN]: string;
+  [StorageKeys.MS_TOKEN]: string;
+  [StorageKeys.NEO4J_USER_DB]: string;
+  [StorageKeys.NEO4J_WORKER_DB]: string;
+  [StorageKeys.USER_NODES]: any[];
+  [StorageKeys.CALENDAR_DATA]: any;
+  [StorageKeys.IS_NEW_REGISTRATION]: boolean;
+  [StorageKeys.TLDRAW_PREFERENCES]: TLUserPreferences;
+  [StorageKeys.TLDRAW_FILE_PATH]: string;
+  [StorageKeys.LOCAL_SNAPSHOT]: any;
+  [StorageKeys.NODE_FILE_PATH]: string;
+  [StorageKeys.ONENOTE_NOTEBOOK]: any;
+  [StorageKeys.PRESENTATION_MODE]: boolean;
+  [StorageKeys.TLDRAW_USER]: TLUser;
+}
+
+type StorageKey = keyof StorageValueTypes;
+
+class StorageService {
+  private static instance: StorageService;
+
+  private constructor() {}
+
+  static getInstance(): StorageService {
+    if (!StorageService.instance) {
+      StorageService.instance = new StorageService();
+    }
+    return StorageService.instance;
+  }
+
+  get<K extends StorageKey>(key: K): StorageValueTypes[K] | null {
+    try {
+      const item = localStorage.getItem(key);
+      return item ? JSON.parse(item) : null;
+    } catch (error) {
+      logger.error('storage-service', `Error retrieving ${key}:`, error);
+      return null;
+    }
+  }
+
+  set<K extends StorageKey>(key: K, value: StorageValueTypes[K]): void {
+    try {
+      const serializedValue = JSON.stringify(value);
+      localStorage.setItem(key, serializedValue);
+      logger.debug('storage-service', `Stored ${key} in localStorage`);
+    } catch (error) {
+      logger.error('storage-service', `Error storing ${key}:`, error);
+    }
+  }
+
+  remove(key: StorageKey): void {
+    try {
+      localStorage.removeItem(key);
+      logger.debug('storage-service', `Removed ${key} from localStorage`);
+    } catch (error) {
+      logger.error('storage-service', `Error removing ${key}:`, error);
+    }
+  }
+
+  clearAll(): void {
+    try {
+      // Only clear app-specific storage, not Supabase's internal keys
+      Object.values(StorageKeys).forEach(key => {
+        localStorage.removeItem(key);
+      });
+      logger.debug('storage-service', 'Cleared all app items from localStorage');
+    } catch (error) {
+      logger.error('storage-service', 'Error clearing storage:', error);
+    }
+  }
+
+  // Helper method to update state and storage together
+  setStateAndStorage<K extends StorageKey>(
+    setter: React.Dispatch<React.SetStateAction<StorageValueTypes[K]>>, 
+    key: K, 
+    value: StorageValueTypes[K]
+  ): void {
+    setter(value);
+    this.set(key, value);
+  }
+}
+
+export const storageService = StorageService.getInstance();
diff --git a/src/services/auth/microsoft/oneDriveService.ts b/src/services/auth/microsoft/oneDriveService.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/services/auth/microsoft/oneNoteService.ts b/src/services/auth/microsoft/oneNoteService.ts
new file mode 100644
index 0000000..4cb30e0
--- /dev/null
+++ b/src/services/auth/microsoft/oneNoteService.ts
@@ -0,0 +1,107 @@
+import { supabase } from '../../../supabaseClient';
+import axios from '../../../axiosConfig';
+
+export interface StandardizedOneNoteDetails {
+  id: string;
+  displayName: string;
+  createdDateTime: string;
+  lastModifiedDateTime: string;
+  links: {
+    oneNoteClientUrl: string;
+    oneNoteWebUrl: string;
+  };
+}
+
+export async function updateUserOneNoteDetails(userId: string, oneNoteDetails: StandardizedOneNoteDetails) {
+  const { error } = await supabase
+    .from('profiles')
+    .update({ 
+      one_note_details: oneNoteDetails,
+      updated_at: new Date().toISOString()
+    })
+    .eq('id', userId);
+
+  if (error) {
+    console.error('Error updating OneNote details:', error);
+    throw error;
+  }
+}
+
+export async function getOneNoteNotebooks(msAccessToken: string) {
+  try {
+    const response = await axios.get(`/msgraph/onenote/get-onenote-notebooks`, {
+      headers: {
+        'Authorization': `Bearer ${msAccessToken}`,
+        'Content-Type': 'application/json'
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error('Error getting notebooks:', error);
+    throw error;
+  }
+}
+
+export async function createOneNoteNotebook(msAccessToken: string, uid: string): Promise<StandardizedOneNoteDetails> {
+  if (!msAccessToken) {
+    throw new Error('Microsoft token not found');
+  }
+
+  try {
+    const notebooks = await getOneNoteNotebooks(msAccessToken);
+    const existingNotebook = notebooks.value.find((notebook: any) => 
+      notebook.displayName === 'Classroom Copilot'
+    );
+
+    if (existingNotebook) {
+      const standardizedNotebook = standardizeNotebookDetails(existingNotebook);
+      await updateUserOneNoteDetails(uid, standardizedNotebook);
+      return standardizedNotebook;
+    }
+
+    const response = await axios.post(
+      `/msgraph/onenote/create-onenote-notebook?notebook_name=${encodeURIComponent('Classroom Copilot')}`,
+      {},
+      {
+        headers: {
+          'Authorization': `Bearer ${msAccessToken}`,
+          'Content-Type': 'application/json'
+        },
+      }
+    );
+
+    if (response.status !== 200) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const standardizedNotebook = standardizeNotebookDetails(response.data);
+    await updateUserOneNoteDetails(uid, standardizedNotebook);
+    return standardizedNotebook;
+  } catch (error) {
+    console.error('Error creating notebook:', error);
+    throw error;
+  }
+}
+
+export async function registerOneNoteUser(msAccessToken: string, uid: string) {
+  try {
+    return await createOneNoteNotebook(msAccessToken, uid);
+  } catch (error) {
+    console.error('Error registering Microsoft user:', error);
+    throw error;
+  }
+}
+
+function standardizeNotebookDetails(notebook: any): StandardizedOneNoteDetails {
+  const notebookData = notebook.data || notebook;
+  return {
+    id: notebookData.id || '',
+    displayName: notebookData.displayName || '',
+    createdDateTime: notebookData.createdDateTime || '',
+    lastModifiedDateTime: notebookData.lastModifiedDateTime || '',
+    links: {
+      oneNoteClientUrl: notebookData.links?.oneNoteClientUrl?.href || '',
+      oneNoteWebUrl: notebookData.links?.oneNoteWebUrl?.href || '',
+    },
+  };
+} 
\ No newline at end of file
diff --git a/src/services/auth/profileService.ts b/src/services/auth/profileService.ts
new file mode 100644
index 0000000..df4a3f8
--- /dev/null
+++ b/src/services/auth/profileService.ts
@@ -0,0 +1,86 @@
+import { TLUserPreferences } from '@tldraw/tldraw';
+import { supabase } from '../../supabaseClient';
+import { logger } from '../../debugConfig';
+import { CCUser } from './authService';
+
+export type UserProfile = CCUser;
+
+export interface UserProfileUpdate extends Partial<UserProfile> {
+  id: string; // ID is always required for updates
+}
+
+export interface UserPreferences {
+  tldraw?: TLUserPreferences;
+  theme?: 'light' | 'dark' | 'system';
+  notifications?: boolean;
+}
+
+export async function createUserProfile(profile: UserProfile): Promise<UserProfile | null> {
+  try {
+    const { data, error } = await supabase
+      .from('profiles')
+      .insert([profile])
+      .select()
+      .single();
+
+    if (error) {
+      logger.error('supabase-profile-service', '❌ Failed to create user profile', { 
+        userId: profile.id,
+        error 
+      });
+      throw error;
+    }
+
+    return data;
+  } catch (error) {
+    logger.error('supabase-profile-service', '❌ Error in createUserProfile', error);
+    return null;
+  }
+}
+
+export async function getUserProfile(userId: string): Promise<UserProfile | null> {
+  try {
+    const { data, error } = await supabase
+      .from('profiles')
+      .select('*')
+      .eq('id', userId)
+      .single();
+
+    if (error) {
+      logger.error('supabase-profile-service', '❌ Failed to fetch user profile', { 
+        userId,
+        error 
+      });
+      throw error;
+    }
+
+    return data;
+  } catch (error) {
+    logger.error('supabase-profile-service', '❌ Error in getUserProfile', error);
+    return null;
+  }
+}
+
+export async function updateUserProfile(update: UserProfileUpdate): Promise<UserProfile | null> {
+  try {
+    const { data, error } = await supabase
+      .from('profiles')
+      .update(update)
+      .eq('id', update.id)
+      .select()
+      .single();
+
+    if (error) {
+      logger.error('supabase-profile-service', '❌ Failed to update user profile', { 
+        userId: update.id,
+        error 
+      });
+      throw error;
+    }
+
+    return data;
+  } catch (error) {
+    logger.error('supabase-profile-service', '❌ Error in updateUserProfile', error);
+    return null;
+  }
+}
diff --git a/src/services/auth/registrationService.ts b/src/services/auth/registrationService.ts
new file mode 100644
index 0000000..7a26452
--- /dev/null
+++ b/src/services/auth/registrationService.ts
@@ -0,0 +1,118 @@
+import { supabase } from '../../supabaseClient';
+import { CCUser, convertToCCUser } from '../../services/auth/authService';
+import { EmailCredentials } from '../../services/auth/authService';
+import { formatEmailForDatabase } from '../graph/neoDBService';
+import { RegistrationResponse } from '../../services/auth/authService';
+import { neoRegistrationService } from '../graph/neoRegistrationService';
+import { storageService, StorageKeys } from './localStorageService';
+import { logger } from '../../debugConfig';
+
+const REGISTRATION_SERVICE = 'registration-service';
+
+export class RegistrationService {
+    private static instance: RegistrationService;
+
+    private constructor() {}
+
+    static getInstance(): RegistrationService {
+        if (!RegistrationService.instance) {
+            RegistrationService.instance = new RegistrationService();
+        }
+        return RegistrationService.instance;
+    }
+
+    async register(credentials: EmailCredentials, displayName: string): Promise<RegistrationResponse> {
+        try {
+            logger.debug(REGISTRATION_SERVICE, '🔄 Starting registration', { 
+                email: credentials.email, 
+                role: credentials.role,
+                hasDisplayName: !!displayName 
+            });
+
+            // Generate username from email (or use another method)
+            const username = formatEmailForDatabase(credentials.email);
+
+            // 1. First sign up the user in auth
+            const { data: authData, error: signUpError } = await supabase.auth.signUp({
+                email: credentials.email,
+                password: credentials.password,
+                options: {
+                    data: {
+                        user_type: credentials.role,
+                        username: username,
+                        display_name: displayName
+                    }
+                }
+            });
+
+            if (signUpError) {
+                logger.error(REGISTRATION_SERVICE, '❌ Supabase signup error', { error: signUpError });
+                throw signUpError;
+            }
+
+            if (!authData.user) {
+                logger.error(REGISTRATION_SERVICE, '❌ No user data after registration');
+                throw new Error('No user data after registration');
+            }
+
+            const ccUser: CCUser = convertToCCUser(authData.user, authData.user.user_metadata);
+
+            // 2. Update the profile with the correct user type
+            const { error: updateError } = await supabase
+                .from('profiles')
+                .update({ 
+                    user_type: credentials.role,
+                    username: username,
+                    display_name: displayName
+                })
+                .eq('id', authData.user.id)
+                .select()
+                .single();
+
+            if (updateError) {
+                logger.error(REGISTRATION_SERVICE, '❌ Failed to update profile', updateError);
+                throw updateError;
+            }
+
+            storageService.set(StorageKeys.IS_NEW_REGISTRATION, true);
+
+            // 3. Create Neo4j nodes
+            try {
+                const userNode = await neoRegistrationService.registerNeo4JUser(
+                    ccUser,
+                    username, // Pass username for database operations
+                    credentials.role
+                );
+
+                logger.info(REGISTRATION_SERVICE, '✅ Registration successful with Neo4j setup', {
+                    userId: ccUser.id,
+                    hasUserNode: !!userNode
+                });
+
+                return {
+                    user: ccUser,
+                    accessToken: authData.session?.access_token || null,
+                    userRole: credentials.role,
+                    message: 'Registration successful'
+                };
+            } catch (neo4jError) {
+                logger.warn(REGISTRATION_SERVICE, '⚠️ Neo4j setup problem', { 
+                    userId: ccUser.id,
+                    error: neo4jError 
+                });
+                // Return success even if Neo4j setup is pending
+                return {
+                    user: ccUser,
+                    accessToken: authData.session?.access_token || null,
+                    userRole: credentials.role,
+                    message: 'Registration successful - Neo4j setup pending'
+                };
+            }
+        } catch (error) {
+            logger.error(REGISTRATION_SERVICE, '❌ Registration failed:', error);
+            throw error;
+        }
+    }
+}
+
+export const registrationService = RegistrationService.getInstance();
diff --git a/src/services/graph/calendarNeoDBService.ts b/src/services/graph/calendarNeoDBService.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/services/graph/curriculumNeoDBService.ts b/src/services/graph/curriculumNeoDBService.ts
new file mode 100644
index 0000000..722cdf6
--- /dev/null
+++ b/src/services/graph/curriculumNeoDBService.ts
@@ -0,0 +1,45 @@
+export async function uploadCurriculum(file: File, backendUrl: string) {
+    const formData = new FormData();
+    formData.append("file", file);
+    
+    try {
+      const response = await fetch(`${backendUrl}/database/curriculum/upload-subject-curriculum`, {
+        method: 'POST',
+        body: formData,
+      });
+  
+      if (response.status === 200) {
+        const result = await response.json();
+        console.log(result);
+        alert('Upload Successful!');
+      } else {
+        alert('Upload failed!');
+      }
+    } catch (error) {
+      console.error('Error uploading curriculum:', error);
+      alert('Upload failed!');
+    }
+  }
+
+export async function uploadSubjectCurriculum(file: File, backendUrl: string) {
+    const formData = new FormData();
+    formData.append("file", file);
+  
+    try {
+      const response = await fetch(`${backendUrl}/database/curriculum/upload-subject-curriculum`, {
+        method: 'POST',
+        body: formData,
+      });
+  
+      if (response.status === 200) {
+        const result = await response.json();
+        console.log(result);
+        alert('Upload Successful!');
+      } else {
+        alert('Upload failed!');
+      }
+    } catch (error) {
+      console.error('Error uploading curriculum:', error);
+      alert('Upload failed!');
+    }
+  }
\ No newline at end of file
diff --git a/src/services/graph/databaseNameService.ts b/src/services/graph/databaseNameService.ts
new file mode 100644
index 0000000..e21c2cc
--- /dev/null
+++ b/src/services/graph/databaseNameService.ts
@@ -0,0 +1,58 @@
+import { logger } from '../../debugConfig';
+
+export class DatabaseNameService {
+  static readonly CC_USERS = 'cc.users';
+  static readonly CC_SCHOOLS = 'cc.institutes';
+  
+  static getUserPrivateDB(userType: string, username: string): string {
+    const dbName = `${this.CC_USERS}.${userType}.${username}`;
+    logger.debug('database-name-service', '📥 Generating user private DB name', {
+      userType,
+      username,
+      dbName
+    });
+    return dbName;
+  }
+  
+  static getSchoolPrivateDB(schoolId: string): string {
+    const dbName = `${this.CC_SCHOOLS}.${schoolId}`;
+    logger.debug('database-name-service', '📥 Generating school private DB name', {
+      schoolId,
+      dbName
+    });
+    return dbName;
+  }
+  
+  static getDevelopmentSchoolDB(): string {
+    const dbName = `${this.CC_SCHOOLS}.development.default`;
+    logger.debug('database-name-service', '📥 Getting default school DB name', {
+      dbName
+    });
+    return dbName;
+  }
+  
+  static getContextDatabase(context: string, userType: string, username: string): string {
+    logger.debug('database-name-service', '📥 Resolving context database', {
+      context,
+      userType,
+      username
+    });
+
+    // For school-related contexts, use the schools database
+    if (['school', 'department', 'class'].includes(context)) {
+      logger.debug('database-name-service', '✅ Using schools database for context', {
+        context,
+        dbName: this.CC_SCHOOLS
+      });
+      return this.CC_SCHOOLS;
+    }
+    
+    // For user-specific contexts, use their private database
+    const userDb = this.getUserPrivateDB(userType, username);
+    logger.debug('database-name-service', '✅ Using user private database for context', {
+      context,
+      dbName: userDb
+    });
+    return userDb;
+  }
+} 
\ No newline at end of file
diff --git a/src/services/graph/graphNeoDBService.ts b/src/services/graph/graphNeoDBService.ts
new file mode 100644
index 0000000..3795b1f
--- /dev/null
+++ b/src/services/graph/graphNeoDBService.ts
@@ -0,0 +1,159 @@
+import { Editor, createShapeId, IndexKey } from '@tldraw/tldraw';
+import axios from '../../axiosConfig';
+import { getShapeType, isValidNodeType, CCNodeTypes } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { AllNodeShapes, NodeShapeType, ShapeUtils } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-shapes';
+import { graphState } from '../../utils/tldraw/cc-base/cc-graph/graphStateUtil';
+import { NodeResponse, ConnectedNodesResponse } from '../../types/api';
+import { logger } from '../../debugConfig';
+
+export class GraphNeoDBService {
+    static async fetchConnectedNodesAndEdges(
+        unique_id: string,
+        db_name: string,
+        editor: Editor
+    ) {
+        try {
+            logger.debug('graph-service', '📤 Fetching connected nodes', { 
+                unique_id,
+                db_name 
+            });
+
+            const response = await axios.get<ConnectedNodesResponse>(
+                '/database/tools/get-connected-nodes-and-edges', {
+                    params: { 
+                        unique_id,
+                        db_name
+                    }
+                }
+            );
+
+            if (response.data.status === "success") {
+                // Make sure editor is set in graphState
+                graphState.setEditor(editor);
+                await this.processConnectedNodesResponse(response.data);
+                return true;
+            }
+            
+            throw new Error('Failed to fetch connected nodes');
+        } catch (error) {
+            logger.error('graph-service', '❌ Failed to fetch connected nodes', { error });
+            throw error;
+        }
+    }
+
+    private static async processConnectedNodesResponse(
+        data: ConnectedNodesResponse
+    ) {
+        try {
+            // Log the incoming data
+            logger.debug('graph-service', '📥 Processing nodes response', {
+                mainNode: data.main_node,
+                connectedNodesCount: data.connected_nodes?.length,
+                relationshipsCount: data.relationships?.length
+            });
+
+            // Create a batch of nodes to process
+            const nodesToProcess: NodeResponse['node_data'][] = [];
+
+            // Add connected nodes first
+            if (data.connected_nodes) {
+                data.connected_nodes.forEach(connectedNode => {
+                    if (isValidNodeType(connectedNode.type)) {
+                        // Convert the simplified node structure to node_data format
+                        const nodeData = {
+                            unique_id: connectedNode.id,
+                            tldraw_snapshot: connectedNode.tldraw_snapshot,
+                            name: connectedNode.label,
+                            __primarylabel__: connectedNode.type as keyof CCNodeTypes,
+                            created: new Date().toISOString(),
+                            merged: new Date().toISOString(),
+                        };
+                        nodesToProcess.push(nodeData);
+                    }
+                });
+            }
+
+            // Add main node last (if it exists) to ensure it's processed after connected nodes
+            if (data.main_node) {
+                nodesToProcess.push(data.main_node.node_data);
+            }
+
+            // Process all nodes in batch
+            for (const nodeData of nodesToProcess) {
+                await this.createOrUpdateNode(nodeData);
+                logger.debug('graph-service', '📝 Processed node', { 
+                    nodeId: nodeData.unique_id,
+                    nodeType: nodeData.__primarylabel__
+                });
+            }
+
+            // After all nodes are processed, arrange them in grid
+            graphState.arrangeNodesInGrid();
+
+            logger.debug('graph-service', '✅ Processed nodes batch', { 
+                processedCount: nodesToProcess.length,
+                totalNodes: graphState.getAllNodes().length,
+                nodesInState: Array.from(graphState.nodeData.keys())
+            });
+
+        } catch (error) {
+            logger.error('graph-service', '❌ Failed to process connected nodes response', { error });
+            throw error;
+        }
+    }
+
+    private static async createOrUpdateNode(
+        nodeData: NodeResponse['node_data']
+    ) {
+        const uniqueId = nodeData.unique_id;
+        const nodeType = nodeData.__primarylabel__;
+
+        if (!isValidNodeType(nodeType)) {
+            logger.warn('graph-service', '⚠️ Unknown node type', { data: nodeData });
+            return;
+        }
+
+        const shapeType = getShapeType(nodeType) as NodeShapeType;
+        
+        // Get the shape util for this node type
+        const shapeUtil = ShapeUtils[shapeType];
+        if (!shapeUtil) {
+            logger.warn('graph-service', '⚠️ No shape util found for type', { type: shapeType });
+            return;
+        }
+
+        // Get default props from the shape util's prototype
+        const defaultProps = shapeUtil.prototype.getDefaultProps();
+
+        // Create the shape with proper typing based on the node type
+        const shape = {
+            id: createShapeId(uniqueId),
+            type: shapeType,
+            x: 0,
+            y: 0,
+            rotation: 0,
+            index: 'a1' as IndexKey,
+            parentId: createShapeId('page:page'),
+            isLocked: false,
+            opacity: 1,
+            meta: {},
+            props: {
+                ...defaultProps,
+                ...nodeData,
+                __primarylabel__: nodeData.__primarylabel__,
+                unique_id: nodeData.unique_id,
+                tldraw_snapshot: nodeData.path as string || '',
+            }
+        };
+
+        // Add to graphState
+        graphState.addNode(shape as AllNodeShapes);
+
+        logger.debug('graph-service', '📝 Node processed', { 
+            uniqueId,
+            nodeType,
+            shapeId: shape.id,
+            shapeType: shape.type
+        });
+    }
+}
diff --git a/src/services/graph/neoDBService.ts b/src/services/graph/neoDBService.ts
new file mode 100644
index 0000000..086ac94
--- /dev/null
+++ b/src/services/graph/neoDBService.ts
@@ -0,0 +1,118 @@
+import { CCNodeTypes } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { logger } from '../../debugConfig';
+
+export interface BaseNodeData {
+  unique_id: string;
+  path: string;
+  __primarylabel__: string;
+  [key: string]: unknown;
+}
+
+export interface CalendarNodeData extends BaseNodeData {
+  __primarylabel__: 'Calendar' | 'CalendarYear' | 'CalendarMonth' | 'CalendarWeek' | 'CalendarDay';
+  date?: string;
+}
+
+export interface WorkerNodeData extends BaseNodeData {
+  __primarylabel__: 'School' | 'Department' | 'Teacher' | 'UserTeacherTimetable' | 'Class' | 'TimetableLesson';
+  name?: string;
+  teacher_code?: string;
+  teacher_name_formal?: string;
+  class_code?: string;
+  department_code?: string;
+  school_name?: string;
+}
+
+export type NodeType = keyof CCNodeTypes | 'User' | 'Calendar' | 'CalendarYear' | 'CalendarMonth' | 'CalendarWeek' | 'CalendarDay' | 'Teacher' | 'UserTeacherTimetable' | 'Student' | 'Class' | 'TimetableLesson';
+
+export function formatEmailForDatabase(email: string): string {
+  // Convert to lowercase and replace special characters
+  const sanitized = email.toLowerCase()
+    .replace('@', 'at')
+    .replace(/\./g, 'dot')
+    .replace(/_/g, 'underscore')
+    .replace(/-/g, 'dash');
+    
+  // Add prefix and ensure no consecutive dashes
+  return `${sanitized}`;
+}
+
+export function generateNodeTitle(nodeData: BaseNodeData): string {
+  try {
+    const calendarData = nodeData as CalendarNodeData;
+    const workerData = nodeData as WorkerNodeData;
+
+    switch (nodeData.__primarylabel__ as NodeType) {
+      // Calendar nodes
+      case 'Calendar':
+        return 'Calendar';
+      case 'CalendarYear':
+        if (!calendarData.date) return 'Unknown Year';
+        return `Year ${new Date(calendarData.date).getFullYear()}`;
+      case 'CalendarMonth':
+        if (!calendarData.date) return 'Unknown Month';
+        return new Date(calendarData.date).toLocaleString('default', { month: 'long' });
+      case 'CalendarWeek':
+        if (!calendarData.date) return 'Unknown Week';
+        return `Week ${new Date(calendarData.date).getDate()}`;
+      case 'CalendarDay':
+        if (!calendarData.date) return 'Unknown Day';
+        return new Date(calendarData.date).toLocaleDateString();
+
+      // Worker/School nodes
+      case 'School':
+        return workerData.school_name || 'School';
+      case 'Department':
+        return workerData.department_code || 'Department';
+      case 'Teacher':
+        return workerData.teacher_name_formal || workerData.teacher_code || 'Teacher';
+      case 'UserTeacherTimetable':
+        return 'Timetable';
+      case 'Class':
+        return workerData.class_code || 'Class';
+      case 'TimetableLesson':
+        return 'Lesson';
+      
+      default:
+        logger.warn('neo4j-service', `⚠️ Unknown node type for title generation: ${nodeData.__primarylabel__}`);
+        return 'Unknown Node';
+    }
+  } catch (error) {
+    logger.error('neo4j-service', '❌ Failed to generate node title', { error, nodeData });
+    return 'Error: Invalid Node Data';
+  }
+}
+
+export function getMonthFromWeek(weekDate: string): string {
+  // Get the month that contains the most days of this week
+  const weekStart = new Date(weekDate);
+  const weekEnd = new Date(weekStart);
+  weekEnd.setDate(weekEnd.getDate() + 6);
+
+  // If week spans two months, use the month that contains more days of the week
+  if (weekStart.getMonth() !== weekEnd.getMonth()) {
+    const daysInFirstMonth = new Date(weekStart.getFullYear(), weekStart.getMonth() + 1, 0).getDate() - weekStart.getDate() + 1;
+    const daysInSecondMonth = 7 - daysInFirstMonth;
+    
+    return daysInFirstMonth >= daysInSecondMonth ? 
+      weekStart.toLocaleString('default', { month: 'long' }) :
+      weekEnd.toLocaleString('default', { month: 'long' });
+  }
+
+  return weekStart.toLocaleString('default', { month: 'long' });
+}
+
+export function getDatabaseName(path: string, defaultSchoolUuid = 'kevlarai'): string {
+  // If the path starts with /node_filesystem/users/, it's in a user database
+  if (path.startsWith('/node_filesystem/users/')) {
+    const parts = path.split('/');
+    // parts[3] should be the database name (e.g., cc.users.surfacedashdev3atkevlaraidotcom)
+    return parts[3];
+  }
+  // For school/worker nodes, extract from the path or use default
+  if (path.includes('/schools/')) {
+    return `cc.institutes.${defaultSchoolUuid}`;
+  }
+  // Default to user database if we can't determine
+  return path.split('/')[3];
+}
\ No newline at end of file
diff --git a/src/services/graph/neoNavigationService.ts b/src/services/graph/neoNavigationService.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/services/graph/neoRegistrationService.ts b/src/services/graph/neoRegistrationService.ts
new file mode 100644
index 0000000..f6c4239
--- /dev/null
+++ b/src/services/graph/neoRegistrationService.ts
@@ -0,0 +1,155 @@
+import { supabase } from '../../supabaseClient';
+import { CCUser } from '../auth/authService';
+import { CCSchoolNodeProps, CCUserNodeProps } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { storageService, StorageKeys } from '../auth/localStorageService';
+import axiosInstance from '../../axiosConfig';
+import { logger } from '../../debugConfig';
+
+// Dev configuration - only hardcoded value we need
+const DEV_SCHOOL_UUID = 'kevlarai';
+
+class NeoRegistrationService {
+    private static instance: NeoRegistrationService;
+
+    private constructor() {}
+
+    static getInstance(): NeoRegistrationService {
+        if (!NeoRegistrationService.instance) {
+            NeoRegistrationService.instance = new NeoRegistrationService();
+        }
+        return NeoRegistrationService.instance;
+    }
+
+    async registerNeo4JUser(
+        user: CCUser, 
+        username: string, 
+        role: string
+    ): Promise<CCUserNodeProps> {
+        try {
+            // For teachers and students, fetch school node first
+            let schoolNode = null;
+            if (role.includes('teacher') || role.includes('student')) {
+                schoolNode = await this.fetchSchoolNode(DEV_SCHOOL_UUID);
+                if (!schoolNode) {
+                    throw new Error('Failed to fetch required school node');
+                }
+            }
+
+            // Create FormData with proper headers
+            const formData = new FormData();
+            
+            // Required fields
+            formData.append('user_id', user.id);
+            formData.append('user_type', role);
+            formData.append('user_name', username);
+            formData.append('user_email', user.email || '');
+
+            // Add school data if we have a school node
+            if (schoolNode) {
+                formData.append('school_uuid', schoolNode.school_uuid);
+                formData.append('school_name', schoolNode.school_name);
+                formData.append('school_website', schoolNode.school_website);
+                formData.append('school_tldraw_snapshot', schoolNode.tldraw_snapshot);
+
+                // Add worker data based on role
+                const workerData = role.includes('teacher') ? {
+                    teacher_code: username,
+                    teacher_name_formal: username,
+                    teacher_email: user.email,
+                } : {
+                    student_code: username,
+                    student_name_formal: username,
+                    student_email: user.email,
+                };
+                
+                formData.append('worker_data', JSON.stringify(workerData));
+            }
+
+            // Debug log the form data
+            logger.debug('neo4j-service', '🔄 Sending form data', {
+                userId: user.id,
+                userType: role,
+                userName: username,
+                userEmail: user.email,
+                schoolNode: schoolNode ? {
+                    uuid: schoolNode.school_uuid,
+                    name: schoolNode.school_name
+                } : null
+            });
+
+            const response = await axiosInstance.post('/database/entity/create-user', formData, {
+                headers: {
+                    'Content-Type': 'multipart/form-data'
+                }
+            });
+
+            if (response.data.status !== 'success') {
+                throw new Error(`Failed to create user: ${JSON.stringify(response.data)}`);
+            }
+
+            const userNode = response.data.data.user_node;
+            const workerNode = response.data.data.worker_node;
+            
+            // Store calendar data if needed
+            if (response.data.data.calendar_nodes) {
+                logger.debug('neo4j-service', '🔄 Storing calendar data', {
+                    calendarNodes: response.data.data.calendar_nodes
+                });
+                storageService.set(StorageKeys.CALENDAR_DATA, response.data.data.calendar_nodes);
+            }
+
+            // Update user node with worker data
+            userNode.worker_node_data = JSON.stringify(workerNode);
+            
+            await this.updateUserNeo4jDetails(user.id, userNode);
+
+            logger.info('neo4j-service', '✅ Neo4j user registration successful', {
+                userId: user.id,
+                nodeId: userNode.unique_id,
+                hasCalendar: !!response.data.data.calendar_nodes
+            });
+
+            return userNode;
+        } catch (error) {
+            logger.error('neo4j-service', '❌ Neo4j user registration failed', error);
+            throw error;
+        }
+    }
+
+    async updateUserNeo4jDetails(userId: string, userNode: CCUserNodeProps) {
+        const { error } = await supabase
+          .from('profiles')
+          .update({ 
+            metadata: {
+                ...userNode
+            },
+            updated_at: new Date().toISOString()
+          })
+          .eq('id', userId);
+      
+        if (error) {
+          logger.error('neo4j-service', '❌ Failed to update Neo4j details:', error);
+          throw error;
+        }
+      }
+    
+    async fetchSchoolNode(schoolUuid: string): Promise<CCSchoolNodeProps> {
+        logger.debug('neo4j-service', '🔄 Fetching school node', { schoolUuid });
+        
+        try {
+        const response = await axiosInstance.get(`/database/tools/get-school-node?school_uuid=${schoolUuid}`);
+        
+        if (response.data?.status === 'success' && response.data.school_node) {
+            logger.info('neo4j-service', '✅ School node fetched successfully');
+            return response.data.school_node;
+        }
+        
+        throw new Error('Failed to fetch school node: ' + JSON.stringify(response.data));
+        } catch (error) {
+        logger.error('neo4j-service', '❌ Failed to fetch school node:', error);
+        throw error;
+        }
+    }
+}
+
+export const neoRegistrationService = NeoRegistrationService.getInstance();
diff --git a/src/services/graph/neoShapeService.ts b/src/services/graph/neoShapeService.ts
new file mode 100644
index 0000000..3777cd5
--- /dev/null
+++ b/src/services/graph/neoShapeService.ts
@@ -0,0 +1,78 @@
+import { NavigationNode } from '../../types/navigation';
+import { getShapeType, CCNodeTypes } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { getThemeFromLabel } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-styles';
+import { logger } from '../../debugConfig';
+import { NodeData } from '../../types/graph-shape';
+
+export class NeoShapeService {
+    private static readonly DATE_TIME_FIELDS = [
+        'merged', 'created', 'start_date', 'end_date', 'start_time', 'end_time'
+    ] as const;
+
+    private static processDateTimeFields(data: Record<string, unknown>): Record<string, unknown> {
+        const processed = { ...data };
+        for (const key of Object.keys(processed)) {
+            if (this.DATE_TIME_FIELDS.includes(key as typeof this.DATE_TIME_FIELDS[number]) && 
+                processed[key] && 
+                typeof processed[key] === 'object') {
+                processed[key] = processed[key].toString();
+            }
+        }
+        return processed;
+    }
+
+    static getShapeConfig(node: NavigationNode, nodeData: NodeData, centerX: number, centerY: number) {
+        try {
+            // Get the shape type based on the node type
+            const shapeType = getShapeType(node.type as keyof CCNodeTypes);
+            
+            // Get theme colors based on the node type
+            const theme = getThemeFromLabel(node.type);
+
+            // Default dimensions
+            const width = 500;
+            const height = 350;
+
+            // Process the node data
+            const processedProps = {
+                ...this.processDateTimeFields(nodeData),
+                title: nodeData.title || node.label,
+                w: width,
+                h: height,
+                state: {
+                    parentId: null,
+                    isPageChild: true,
+                    hasChildren: null,
+                    bindings: null
+                },
+                headerColor: theme.headerColor,
+                backgroundColor: theme.backgroundColor,
+                isLocked: false,
+                __primarylabel__: node.type,
+                unique_id: node.id,
+                tldraw_snapshot: node.tldraw_snapshot
+            };
+
+            logger.debug('neo-shape-service', '📄 Created shape configuration', {
+                nodeId: node.id,
+                shapeType,
+                theme,
+                props: processedProps
+            });
+
+            return {
+                type: shapeType,
+                x: centerX - (width / 2),
+                y: centerY - (height / 2),
+                props: processedProps
+            };
+        } catch (error) {
+            logger.error('neo-shape-service', '❌ Failed to create shape configuration', {
+                nodeId: node.id,
+                error: error instanceof Error ? error.message : 'Unknown error'
+            });
+            throw error;
+        }
+    }
+}
+
diff --git a/src/services/graph/schoolNeoDBService.ts b/src/services/graph/schoolNeoDBService.ts
new file mode 100644
index 0000000..1e30475
--- /dev/null
+++ b/src/services/graph/schoolNeoDBService.ts
@@ -0,0 +1,68 @@
+import axiosInstance from '../../axiosConfig';
+import { CCSchoolNodeProps } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { logger } from '../../debugConfig';
+import { AxiosError } from 'axios';
+
+interface CreateSchoolResponse {
+    status: string;
+    message: string;
+}
+
+export class SchoolNeoDBService {
+    static async createSchools(
+    ): Promise<CreateSchoolResponse> {
+        logger.warn('school-service', '📤 Creating schools using default config.yaml');
+
+        try {
+            const response = await axiosInstance.post(
+                '/database/entity/create-schools',
+                {},
+                {
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                }
+            );
+
+            if (response.data.status === 'success' || response.data.status === 'Accepted') {
+                logger.info('school-service', '✅ Schools successfully');
+                return {
+                    status: 'success',
+                    message: 'Schools created successfully'
+                };
+            }
+
+            throw new Error(response.data.message || 'Creation failed');
+        } catch (err: unknown) {
+            const error = err as AxiosError;
+            logger.error('school-service', '❌ Failed to create school', { 
+                error: error.message,
+                details: error.response?.data
+            });
+            throw error;
+        }
+    }
+
+    static async getSchoolNode(schoolDbName: string): Promise<CCSchoolNodeProps | null> {
+        logger.debug('school-service', '🔄 Fetching school node', { schoolDbName });
+        
+        try {
+            const response = await axiosInstance.get(`/database/tools/get-default-node/school?db_name=${schoolDbName}`);
+            
+            if (response.data?.status === 'success' && response.data.node) {
+                logger.info('school-service', '✅ School node fetched successfully');
+                return response.data.node;
+            }
+            
+            logger.warn('school-service', '⚠️ No school node found');
+            return null;
+        } catch (error) {
+            if (error instanceof AxiosError && error.response?.status === 404) {
+                logger.warn('school-service', '⚠️ School node not found (404)', { schoolDbName });
+                return null;
+            }
+            logger.error('school-service', '❌ Failed to fetch school node:', error);
+            throw error;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/services/graph/timetableNeoDBService.ts b/src/services/graph/timetableNeoDBService.ts
new file mode 100644
index 0000000..c1f5c5a
--- /dev/null
+++ b/src/services/graph/timetableNeoDBService.ts
@@ -0,0 +1,256 @@
+import axios from '../../axiosConfig';
+import { CCTeacherNodeProps, CCUserNodeProps } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { logger } from '../../debugConfig';
+import { AxiosError } from 'axios';
+
+interface UploadTimetableResponse {
+    status: string;
+    message: string;
+}
+
+interface UploadResult {
+    success: boolean;
+    message: string;
+}
+
+export interface TeacherTimetableEvent {
+  id: string;
+  title: string;
+  start: string;
+  end: string;
+  extendedProps: {
+    subjectClass: string;
+    color: string;
+    periodCode: string;
+    tldraw_snapshot?: string;
+  };
+}
+
+export class TimetableNeoDBService {
+    static async uploadWorkerTimetable(
+        file: File, 
+        userNode: CCUserNodeProps,
+        workerNode: CCTeacherNodeProps
+    ): Promise<UploadTimetableResponse> {
+        logger.debug('timetable-service', '📤 Uploading timetable', {
+            fileName: file.name,
+            schoolDbName: workerNode.school_db_name,
+            userDbName: workerNode.user_db_name,
+            teacherCode: workerNode.teacher_code
+        });
+
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('user_node', JSON.stringify({
+            unique_id: userNode.unique_id,
+            user_id: userNode.user_id,
+            user_type: userNode.user_type,
+            user_name: userNode.user_name,
+            user_email: userNode.user_email,
+            tldraw_snapshot: userNode.tldraw_snapshot,
+            worker_node_data: userNode.worker_node_data
+
+        }));
+        formData.append('worker_node', JSON.stringify({
+            unique_id: workerNode.unique_id,
+            teacher_code: workerNode.teacher_code,
+            teacher_name_formal: workerNode.teacher_name_formal,
+            teacher_email: workerNode.teacher_email,
+            tldraw_snapshot: workerNode.tldraw_snapshot,
+            worker_db_name: workerNode.school_db_name,
+            user_db_name: workerNode.user_db_name
+        }));
+
+        try {
+            const response = await axios.post(
+                '/database/timetables/upload-worker-timetable',
+                formData,
+                {
+                    headers: {
+                        'Content-Type': 'multipart/form-data'
+                    }
+                }
+            );
+
+            if (response.data.status === 'success' || response.data.status === 'Accepted') {
+                logger.info('timetable-service', '✅ Timetable upload successful');
+                return {
+                    status: 'success',
+                    message: 'Timetable uploaded successfully'
+                };
+            }
+
+            throw new Error(response.data.message || 'Upload failed');
+        } catch (err: unknown) {
+            const error = err as AxiosError;
+            logger.error('timetable-service', '❌ Failed to upload timetable', { 
+                error: error.message,
+                details: error.response?.data
+            });
+            throw error;
+        }
+    }
+
+    static async fetchTeacherTimetableEvents(
+        unique_id: string,
+        school_db_name: string
+    ): Promise<TeacherTimetableEvent[]> {
+        try {
+            logger.debug('timetable-service', '📤 Fetching timetable events', {
+                unique_id,
+                school_db_name
+            });
+
+            const response = await axios.get('/calendar/get_teacher_timetable_events', {
+                params: {
+                    unique_id,
+                    school_db_name
+                }
+            });
+
+            logger.debug('timetable-service', '📥 Received response', {
+                status: response.status,
+                data: response.data
+            });
+
+            if (response.data.status === "success") {
+                return response.data.events;
+            }
+            throw new Error(response.data.message || 'Failed to fetch events');
+        } catch (error) {
+            if (error instanceof AxiosError) {
+                logger.error('timetable-service', '❌ Failed to fetch timetable events', { 
+                    status: error.response?.status,
+                    data: error.response?.data,
+                    message: error.message
+                });
+            } else {
+                logger.error('timetable-service', '❌ Failed to fetch timetable events', { error });
+            }
+            throw error;
+        }
+    }
+
+    static lightenColor(color: string, amount: number): string {
+        color = color.replace(/^#/, '');
+        const num = parseInt(color, 16);
+        const r = Math.min(255, (num >> 16) + amount);
+        const g = Math.min(255, ((num >> 8) & 0x00FF) + amount);
+        const b = Math.min(255, (num & 0x0000FF) + amount);
+        return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+    }
+
+    static getContrastColor(hexColor: string): string {
+        hexColor = hexColor.replace(/^#/, '');
+        const r = parseInt(hexColor.slice(0, 2), 16);
+        const g = parseInt(hexColor.slice(2, 4), 16);
+        const b = parseInt(hexColor.slice(4, 6), 16);
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        return luminance > 0.7 ? '#000000' : '#FFFFFF';
+    }
+
+    static getEventRange(events: TeacherTimetableEvent[]) {
+        if (events.length === 0) {
+            return { start: null, end: null };
+        }
+
+        let start = new Date(events[0].start);
+        let end = new Date(events[0].end);
+
+        events.forEach(event => {
+            const eventStart = new Date(event.start);
+            const eventEnd = new Date(event.end);
+            if (eventStart < start) {
+              start = eventStart;
+            }
+            if (eventEnd > end) {
+              end = eventEnd;
+            }
+        });
+
+        start.setDate(1);
+        end.setMonth(end.getMonth() + 1, 0);
+
+        return { start, end };
+    }
+
+    static getSubjectClassColor(subjectClass: string): string {
+        let hash = 0;
+        for (let i = 0; i < subjectClass.length; i++) {
+            hash = subjectClass.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return `hsl(${hash % 360}, 70%, 50%)`;
+    }
+
+    static async handleTimetableUpload(
+        file: File | undefined,
+        userNode: CCUserNodeProps | undefined,
+        workerNode: CCTeacherNodeProps | undefined
+    ): Promise<UploadResult> {
+        if (!file) {
+            return {
+                success: false,
+                message: 'No file selected'
+            };
+        }
+
+        if (!file.name.endsWith('.xlsx')) {
+            return {
+                success: false,
+                message: 'Please upload an Excel (.xlsx) file'
+            };
+        }
+
+        if (!userNode) {
+            return {
+                success: false,
+                message: 'User information not found. Please ensure you are logged in as a user.'
+            };
+        }
+
+        if (!workerNode) {
+            return {
+                success: false,
+                message: 'Teacher information not found. Please ensure you are logged in as a teacher.'
+            };
+        }
+
+        // Validate worker node has required fields
+        const requiredWorkerFields = ['unique_id', 'teacher_code', 'teacher_name_formal', 'teacher_email', 'worker_db_name', 'path'];
+        const requiredUserFields = ['unique_id', 'user_id', 'user_type', 'user_name', 'user_email', 'path', 'worker_node_data'];
+        const missingWorkerFields = requiredWorkerFields.filter(field => !(field in workerNode));
+        const missingUserFields = requiredUserFields.filter(field => !(field in userNode));
+
+
+        if (missingWorkerFields.length > 0) {
+            logger.error('timetable-service', '❌ Missing required teacher fields:', { missingWorkerFields });
+            return {
+                success: false,
+                message: `Missing required teacher information: ${missingWorkerFields.join(', ')}`
+            };
+        }
+
+        if (missingUserFields.length > 0) {
+            logger.error('timetable-service', '❌ Missing required user fields:', { missingUserFields });
+            return {
+                success: false,
+                message: `Missing required user information: ${missingUserFields.join(', ')}`
+            };
+        }
+
+        try {
+            const result = await this.uploadWorkerTimetable(file, userNode, workerNode);
+            return {
+                success: true,
+                message: result.message
+            };
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to upload timetable';
+            logger.error('timetable-service', '❌ Timetable upload failed:', error);
+            return {
+                success: false,
+                message: errorMessage
+            };
+        }
+    }
+}
diff --git a/src/services/graph/userNeoDBService.ts b/src/services/graph/userNeoDBService.ts
new file mode 100644
index 0000000..2448ee4
--- /dev/null
+++ b/src/services/graph/userNeoDBService.ts
@@ -0,0 +1,390 @@
+import axiosInstance from '../../axiosConfig';
+import { formatEmailForDatabase } from './neoDBService';
+import { CCUserNodeProps, CCTeacherNodeProps, CCCalendarNodeProps, CCUserTeacherTimetableNodeProps } from '../../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { NavigationNode, NodeContext } from '../../types/navigation';
+import { TLBinding, TLShapeId } from '@tldraw/tldraw';
+import { logger } from '../../debugConfig';
+import { useNavigationStore } from '../../stores/navigationStore';
+import { DatabaseNameService } from './databaseNameService';
+
+// Dev configuration - only hardcoded value we need
+const DEV_SCHOOL_UUID = 'kevlarai';
+
+interface ShapeState {
+    parentId: TLShapeId | null;
+    isPageChild: boolean | null;
+    hasChildren: boolean | null;
+    bindings: TLBinding[] | null;
+}
+
+interface NodeResponse {
+    status: string;
+    nodes: {
+        userNode: CCUserNodeProps;
+        calendarNode: CCCalendarNodeProps;
+        teacherNode: CCTeacherNodeProps;
+        timetableNode: CCUserTeacherTimetableNodeProps;
+    };
+}
+
+interface NodeDataResponse {
+    __primarylabel__: string;
+    unique_id: string;
+    tldraw_snapshot: string;
+    created: string;
+    merged: string;
+    state: ShapeState | null;
+    defaultComponent: boolean | null;
+    user_name?: string;
+    user_email?: string;
+    user_type?: string;
+    user_id?: string;
+    worker_node_data?: string;
+    [key: string]: string | number | boolean | null | ShapeState | undefined;
+}
+
+interface DefaultNodeResponse {
+    status: string;
+    node: {
+    id: string;
+    tldraw_snapshot: string;
+    type: string;
+    label: string;
+        data: NodeDataResponse;
+    };
+}
+
+export interface ProcessedUserNodes {
+    privateUserNode: CCUserNodeProps;
+    connectedNodes: {
+        calendar?: CCCalendarNodeProps;
+        teacher?: CCTeacherNodeProps;
+        timetable?: CCUserTeacherTimetableNodeProps;
+    };
+}
+
+export interface CalendarStructureResponse {
+  status: string;
+  data: {
+    currentDay: string;
+    days: Record<string, {
+      id: string;
+      date: string;
+      title: string;
+    }>;
+    weeks: Record<string, {
+      id: string;
+      title: string;
+      days: { id: string }[];
+      startDate: string;
+      endDate: string;
+    }>;
+    months: Record<string, {
+      id: string;
+      title: string;
+      days: { id: string }[];
+      weeks: { id: string }[];
+      year: string;
+      month: string;
+    }>;
+    years: {
+      id: string;
+      title: string;
+      months: { id: string }[];
+      year: string;
+    }[];
+  };
+}
+
+export interface WorkerStructureResponse {
+  status: string;
+  data: {
+    timetables: Record<string, Array<{
+      id: string;
+      title: string;
+      type: string;
+      startTime: string;
+      endTime: string;
+    }>>;
+    classes: Record<string, Array<{
+      id: string;
+      title: string;
+      type: string;
+    }>>;
+    lessons: Record<string, Array<{
+      id: string;
+      title: string;
+      type: string;
+    }>>;
+    journals: Record<string, Array<{
+      id: string;
+      title: string;
+    }>>;
+    planners: Record<string, Array<{
+      id: string;
+      title: string;
+    }>>;
+  };
+}
+
+export class UserNeoDBService {
+    static async fetchUserNodesData(
+        email: string,
+        userDbName?: string,
+        workerDbName?: string
+    ): Promise<ProcessedUserNodes | null> {
+        try {
+            if (!userDbName) {
+                logger.error('neo4j-service', '❌ Attempted to fetch nodes without database name');
+                return null;
+            }
+
+            const formattedEmail = formatEmailForDatabase(email);
+            const uniqueId = `User_${formattedEmail}`;
+            
+            logger.debug('neo4j-service', '🔄 Fetching user nodes data', { 
+                email,
+                formattedEmail,
+                userDbName,
+                workerDbName,
+                uniqueId 
+            });
+
+            // First get the user node from profile context
+            const userNode = await this.getDefaultNode('profile', userDbName);
+            if (!userNode || !userNode.data) {
+                throw new Error('Failed to fetch user node or node data missing');
+            }
+
+            logger.debug('neo4j-service', '✅ Found user node', {
+                nodeId: userNode.id,
+                type: userNode.type,
+                hasData: !!userNode.data,
+                userDbName,
+                workerDbName
+            });
+
+            // Initialize result structure
+            const processedNodes: ProcessedUserNodes = {
+                privateUserNode: {
+                    ...userNode.data,
+                    __primarylabel__: 'User' as const,
+                    title: userNode.data.user_email || 'User',
+                    w: 200,
+                    h: 200,
+                    headerColor: '#3e6589',
+                    backgroundColor: '#f0f0f0',
+                    isLocked: false
+                } as CCUserNodeProps,
+                connectedNodes: {}
+            };
+
+            try {
+                // Get calendar node from calendar context
+                const calendarNode = await this.getDefaultNode('calendar', userDbName);
+                if (calendarNode?.data) {
+                    processedNodes.connectedNodes.calendar = {
+                        ...calendarNode.data,
+                        __primarylabel__: 'Calendar' as const,
+                        title: calendarNode.data.calendar_name || 'Calendar',
+                        w: 200,
+                        h: 200,
+                        headerColor: '#3e6589',
+                        backgroundColor: '#f0f0f0',
+                        isLocked: false
+                    } as CCCalendarNodeProps;
+                    logger.debug('neo4j-service', '✅ Found calendar node', {
+                        nodeId: calendarNode.id,
+                        tldraw_snapshot: calendarNode.data.tldraw_snapshot
+                    });
+                } else {
+                    logger.debug('neo4j-service', 'ℹ️ No calendar node found');
+                }
+            } catch (error) {
+                logger.warn('neo4j-service', '⚠️ Failed to fetch calendar node:', error);
+                // Continue without calendar node
+            }
+
+            // Get teacher node from teaching context if worker database is available
+            if (workerDbName) {
+                try {
+                    const teacherNode = await this.getDefaultNode('teaching', userDbName);
+                    if (teacherNode?.data) {
+                        processedNodes.connectedNodes.teacher = {
+                            ...teacherNode.data,
+                            __primarylabel__: 'Teacher' as const,
+                            title: teacherNode.data.teacher_name_formal || 'Teacher',
+                            w: 200,
+                            h: 200,
+                            headerColor: '#3e6589',
+                            backgroundColor: '#f0f0f0',
+                            isLocked: false,
+                            user_db_name: userDbName,
+                            school_db_name: workerDbName
+                        } as CCTeacherNodeProps;
+                        logger.debug('neo4j-service', '✅ Found teacher node', {
+                            nodeId: teacherNode.id,
+                            tldraw_snapshot: teacherNode.data.tldraw_snapshot,
+                            userDbName,
+                            workerDbName
+                        });
+                    } else {
+                        logger.debug('neo4j-service', 'ℹ️ No teacher node found');
+                    }
+                } catch (error) {
+                    logger.warn('neo4j-service', '⚠️ Failed to fetch teacher node:', error);
+                    // Continue without teacher node
+                }
+            }
+
+            logger.debug('neo4j-service', '✅ Processed all user nodes', {
+                hasUserNode: !!processedNodes.privateUserNode,
+                hasCalendar: !!processedNodes.connectedNodes.calendar,
+                hasTeacher: !!processedNodes.connectedNodes.teacher,
+                teacherData: processedNodes.connectedNodes.teacher ? {
+                    unique_id: processedNodes.connectedNodes.teacher.unique_id,
+                    school_db_name: processedNodes.connectedNodes.teacher.school_db_name,
+                    tldraw_snapshot: processedNodes.connectedNodes.teacher.tldraw_snapshot
+                } : null
+            });
+
+            return processedNodes;
+        } catch (error: unknown) {
+            if (error instanceof Error) {
+                logger.error('neo4j-service', '❌ Failed to fetch user nodes:', error.message);
+            } else {
+                logger.error('neo4j-service', '❌ Failed to fetch user nodes:', String(error));
+            }
+            throw error;
+        }
+    }
+
+    static getUserDatabaseName(userType: string, username: string): string {
+        return DatabaseNameService.getUserPrivateDB(userType, username);
+    }
+
+    static getSchoolDatabaseName(schoolId: string): string {
+        return DatabaseNameService.getSchoolPrivateDB(schoolId);
+    }
+
+    static getDefaultSchoolDatabaseName(): string {
+        return DatabaseNameService.getDevelopmentSchoolDB();
+    }
+
+    static async fetchNodeData(nodeId: string, dbName: string): Promise<{ node_type: string; node_data: NodeResponse['nodes']['userNode'] } | null> {
+        try {
+            logger.debug('neo4j-service', '🔄 Fetching node data', { nodeId, dbName });
+
+            const response = await axiosInstance.get<{
+                status: string;
+                node: {
+                    node_type: string;
+                    node_data: NodeResponse['nodes']['userNode'];
+                };
+            }>('/database/tools/get-node', {
+                params: { 
+                    unique_id: nodeId,
+                    db_name: dbName
+                }
+            });
+            
+            if (response.data?.status === 'success' && response.data.node) {
+                return response.data.node;
+            }
+            
+            return null;
+        } catch (error) {
+            logger.error('neo4j-service', '❌ Failed to fetch node data:', error);
+            throw error;
+        }
+    }
+
+    static getNodeDatabaseName(node: NavigationNode): string {
+        // If the node path starts with /node_filesystem/users/, it's in a user database
+        if (node.tldraw_snapshot.startsWith('/node_filesystem/users/')) {
+            const parts = node.tldraw_snapshot.split('/');
+            // parts[3] should be the database name (e.g., cc.users.surfacedashdev3atkevlaraidotcom)
+            return parts[3];
+        }
+        // For school/worker nodes, extract from the path or use a default
+        if (node.tldraw_snapshot.includes('/schools/')) {
+            return `cc.institutes.${DEV_SCHOOL_UUID}`;
+        }
+        // Default to user database if we can't determine
+        return node.tldraw_snapshot.split('/')[3];
+    }
+
+    static async getDefaultNode(context: NodeContext, dbName: string): Promise<NavigationNode | null> {
+        try {
+            logger.debug('neo4j-service', '🔄 Fetching default node', { context, dbName });
+            
+            // For overview context, we need to extract the base context from the current navigation state
+            const params: Record<string, string> = { db_name: dbName };
+            if (context === 'overview') {
+                // Get the current base context from the navigation store
+                const navigationStore = useNavigationStore.getState();
+                params.base_context = navigationStore.context.base;
+            }
+            
+            const response = await axiosInstance.get<DefaultNodeResponse>(
+                `/database/tools/get-default-node/${context}`,
+                { params }
+            );
+            
+            if (response.data?.status === 'success' && response.data.node) {
+                return {
+                    id: response.data.node.id,
+                    tldraw_snapshot: response.data.node.tldraw_snapshot,
+                    type: response.data.node.type,
+                    label: response.data.node.label,
+                    data: response.data.node.data
+                };
+            }
+            
+            return null;
+        } catch (error) {
+            logger.error('neo4j-service', '❌ Failed to fetch default node:', error);
+            throw error;
+        }
+    }
+
+    static async fetchCalendarStructure(dbName: string): Promise<CalendarStructureResponse['data']> {
+        try {
+            logger.debug('navigation', '🔄 Fetching calendar structure', { dbName });
+            
+            const response = await axiosInstance.get<CalendarStructureResponse>(
+                `/database/calendar-structure/get-calendar-structure?db_name=${dbName}`
+            );
+
+            if (response.data.status === 'success') {
+                logger.info('navigation', '✅ Calendar structure fetched successfully');
+                return response.data.data;
+            }
+
+            throw new Error('Failed to fetch calendar structure');
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to fetch calendar structure:', error);
+            throw error;
+        }
+    }
+
+    static async fetchWorkerStructure(dbName: string): Promise<WorkerStructureResponse['data']> {
+        try {
+            logger.debug('navigation', '🔄 Fetching worker structure', { dbName });
+            
+            const response = await axiosInstance.get<WorkerStructureResponse>(
+                `/database/worker-structure/get-worker-structure?db_name=${dbName}`
+            );
+
+            if (response.data.status === 'success') {
+                logger.info('navigation', '✅ Worker structure fetched successfully');
+                return response.data.data;
+            }
+
+            throw new Error('Failed to fetch worker structure');
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to fetch worker structure:', error);
+            throw error;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/services/initService.ts b/src/services/initService.ts
new file mode 100644
index 0000000..c3799a8
--- /dev/null
+++ b/src/services/initService.ts
@@ -0,0 +1,25 @@
+import { logger } from '../debugConfig';
+import Modal from 'react-modal';
+
+let isInitialized = false;
+
+export const initializeApp = () => {
+  if (isInitialized) {
+    return;
+  }
+
+  logger.debug('app', '🚀 App initializing', {
+    isDevMode: import.meta.env.VITE_DEV === 'true',
+    environment: import.meta.env.MODE,
+    appName: import.meta.env.VITE_APP_NAME
+  });
+
+  // Set the app element for react-modal
+  Modal.setAppElement('#root');
+
+  isInitialized = true;
+};
+
+export const resetInitialization = () => {
+  isInitialized = false;
+}; 
\ No newline at end of file
diff --git a/src/services/llm/llmService.ts b/src/services/llm/llmService.ts
new file mode 100644
index 0000000..145685c
--- /dev/null
+++ b/src/services/llm/llmService.ts
@@ -0,0 +1,11 @@
+import axios from '../../axiosConfig';
+
+export const sendPrompt = async (data: { model: string, prompt: string }) => {
+  const response = await axios.post('/llm/ollama_text_prompt', data);
+  return response.data;
+};
+
+export const sendVisionPrompt = async (data: { model: string, imagePath: string, prompt: string }) => {
+  const response = await axios.post('/llm/ollama_vision_prompt', data);
+  return response.data;
+};
diff --git a/src/services/themeService.ts b/src/services/themeService.ts
new file mode 100644
index 0000000..098ba4f
--- /dev/null
+++ b/src/services/themeService.ts
@@ -0,0 +1,146 @@
+import { createTheme, ThemeOptions } from '@mui/material/styles';
+
+// Define custom theme options
+const themeOptions: ThemeOptions = {
+  palette: {
+    primary: {
+      main: '#1976d2',
+      light: '#42a5f5',
+      dark: '#1565c0',
+      contrastText: '#ffffff',
+    },
+    secondary: {
+      main: '#dc004e',
+      light: '#ff4081',
+      dark: '#c51162',
+      contrastText: '#ffffff',
+    },
+    error: {
+      main: '#f44336',
+      light: '#e57373',
+      dark: '#d32f2f',
+    },
+    warning: {
+      main: '#ff9800',
+      light: '#ffb74d',
+      dark: '#f57c00',
+    },
+    info: {
+      main: '#2196f3',
+      light: '#64b5f6',
+      dark: '#1976d2',
+    },
+    success: {
+      main: '#4caf50',
+      light: '#81c784',
+      dark: '#388e3c',
+    },
+    background: {
+      default: '#f5f5f5',
+      paper: '#ffffff',
+    },
+    text: {
+      primary: 'rgba(0, 0, 0, 0.87)',
+      secondary: 'rgba(0, 0, 0, 0.6)',
+      disabled: 'rgba(0, 0, 0, 0.38)',
+    },
+  },
+  typography: {
+    fontFamily: [
+      '-apple-system',
+      'BlinkMacSystemFont',
+      '"Segoe UI"',
+      'Roboto',
+      '"Helvetica Neue"',
+      'Arial',
+      'sans-serif',
+    ].join(','),
+    h1: {
+      fontSize: '2.5rem',
+      fontWeight: 500,
+    },
+    h2: {
+      fontSize: '2rem',
+      fontWeight: 500,
+    },
+    h3: {
+      fontSize: '1.75rem',
+      fontWeight: 500,
+    },
+    h4: {
+      fontSize: '1.5rem',
+      fontWeight: 500,
+    },
+    h5: {
+      fontSize: '1.25rem',
+      fontWeight: 500,
+    },
+    h6: {
+      fontSize: '1rem',
+      fontWeight: 500,
+    },
+    body1: {
+      fontSize: '1rem',
+      lineHeight: 1.5,
+    },
+    body2: {
+      fontSize: '0.875rem',
+      lineHeight: 1.43,
+    },
+  },
+  shape: {
+    borderRadius: 4,
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          borderRadius: '4px',
+          padding: '6px 16px',
+        },
+        contained: {
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2)',
+          },
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            borderRadius: '4px',
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: '8px',
+          boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.1)',
+        },
+      },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          boxShadow: '0px 1px 3px rgba(0,0,0,0.12)',
+        },
+      },
+    },
+  },
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+    },
+  },
+};
+
+export const theme = createTheme(themeOptions); 
\ No newline at end of file
diff --git a/src/services/tldraw/localStoreService.ts b/src/services/tldraw/localStoreService.ts
new file mode 100644
index 0000000..c0de072
--- /dev/null
+++ b/src/services/tldraw/localStoreService.ts
@@ -0,0 +1,82 @@
+import { 
+    TLStore, 
+    createTLStore,
+    TLEditorSnapshot,
+    loadSnapshot,
+    TLAnyShapeUtilConstructor,
+    TLAnyBindingUtilConstructor,
+    TLSchema
+} from '@tldraw/tldraw';
+import { LoadingState } from './snapshotService';
+import { allShapeUtils } from '../../utils/tldraw/shapes';
+import { allBindingUtils } from '../../utils/tldraw/bindings';
+import { logger } from '../../debugConfig';
+import { customSchema } from '../../utils/tldraw/schemas';
+
+interface LocalStoreConfig {
+    shapeUtils?: TLAnyShapeUtilConstructor[];
+    bindingUtils?: TLAnyBindingUtilConstructor[];
+    schema?: TLSchema;
+}
+
+class LocalStoreService {
+    private store: TLStore | null = null;
+    private static instance: LocalStoreService;
+
+    public static getInstance(): LocalStoreService {
+        if (!LocalStoreService.instance) {
+            LocalStoreService.instance = new LocalStoreService();
+        }
+        return LocalStoreService.instance;
+    }
+
+    public getStore(config?: LocalStoreConfig): TLStore {
+        if (!this.store) {
+            logger.debug('system', '🔄 Creating new TLStore');
+            this.store = createTLStore({
+                shapeUtils: config?.shapeUtils || allShapeUtils,
+                bindingUtils: config?.bindingUtils || allBindingUtils,
+                schema: config?.schema || customSchema,
+            });
+        }
+        return this.store;
+    }
+
+    public async loadSnapshot(
+        snapshot: Partial<TLEditorSnapshot>, 
+        setLoadingState: (state: LoadingState) => void
+    ): Promise<void> {
+        try {
+            if (!this.store) {
+                throw new Error('Store not initialized');
+            }
+
+            logger.debug('system', '📥 Loading snapshot into store');
+            loadSnapshot(this.store, snapshot);
+            setLoadingState({ status: 'ready', error: '' });
+        } catch (error) {
+            logger.error('system', '❌ Failed to load snapshot:', error);
+            if (this.store) {
+                this.store.clear();
+            }
+            setLoadingState({ 
+                status: 'error', 
+                error: error instanceof Error ? error.message : 'Failed to load snapshot' 
+            });
+        }
+    }
+
+    public clearStore(): void {
+        logger.debug('system', '🧹 Clearing store');
+        if (this.store) {
+            this.store.clear();
+        }
+        this.store = null;
+    }
+
+    public isStoreReady(): boolean {
+        return !!this.store;
+    }
+}
+
+export const localStoreService = LocalStoreService.getInstance();
diff --git a/src/services/tldraw/nodeCanvasService.ts b/src/services/tldraw/nodeCanvasService.ts
new file mode 100644
index 0000000..52adbe5
--- /dev/null
+++ b/src/services/tldraw/nodeCanvasService.ts
@@ -0,0 +1,213 @@
+import { Editor, TLShape, createShapeId } from '@tldraw/tldraw';
+import { logger } from '../../debugConfig';
+import { NavigationNode } from '../../types/navigation';
+import { NeoShapeService } from '../graph/neoShapeService';
+import { NodeData } from '../../types/graph-shape';
+
+export class NodeCanvasService {
+    private static readonly CANVAS_PADDING = 100;
+    private static readonly ANIMATION_DURATION = 500;
+    private static currentAnimation: number | null = null;
+
+    private static findAllNodeShapes(editor: Editor, nodeId: string): TLShape[] {
+        const shapes = editor.getCurrentPageShapes();
+        const exactShapeId = `shape:${nodeId}`;
+        
+        // Filter shapes with exact ID match only
+        return shapes.filter((shape: TLShape) => {
+            const shapeId = shape.id.toString();
+            return shapeId === exactShapeId || shapeId === nodeId;
+        });
+    }
+
+    private static handleMultipleNodeInstances(editor: Editor, nodeId: string, shapes: TLShape[]): TLShape | undefined {
+        if (shapes.length > 1) {
+            logger.warn('node-canvas', '⚠️ Multiple instances of node found', { 
+                nodeId, 
+                count: shapes.length,
+                shapes: shapes.map(s => s.id)
+            });
+            // Return the first instance but log a warning for the user
+            return shapes[0];
+        }
+        return shapes[0];
+    }
+
+    private static cancelCurrentAnimation(): void {
+        if (this.currentAnimation !== null) {
+            cancelAnimationFrame(this.currentAnimation);
+            this.currentAnimation = null;
+        }
+    }
+
+    private static animateViewToShape(editor: Editor, shape: TLShape): void {
+        // Cancel any existing animation
+        this.cancelCurrentAnimation();
+
+        const bounds = editor.getShapePageBounds(shape);
+        if (!bounds) {
+            logger.warn('node-canvas', '⚠️ Could not get shape bounds', { shapeId: shape.id });
+            return;
+        }
+
+        // Get the current viewport and camera state
+        const viewportBounds = editor.getViewportPageBounds();
+        const camera = editor.getCamera();
+        const currentPage = editor.getCurrentPage();
+
+        // Calculate the center point of the shape in page coordinates
+        const shapeCenterX = bounds.x + bounds.w / 2;
+        const shapeCenterY = bounds.y + bounds.h / 2;
+
+        // Calculate where the shape currently appears in the viewport
+        const currentViewportCenterX = viewportBounds.x + viewportBounds.w / 2;
+        const currentViewportCenterY = viewportBounds.y + viewportBounds.h / 2;
+
+        // Check if the shape is already reasonably centered
+        const tolerance = 50; // pixels
+        const isAlreadyCentered = 
+            Math.abs(shapeCenterX - currentViewportCenterX) < tolerance &&
+            Math.abs(shapeCenterY - currentViewportCenterY) < tolerance;
+
+        // Log the current state for debugging
+        logger.debug('node-canvas', '📊 Current canvas state', {
+            page: {
+                id: currentPage.id,
+                name: currentPage.name,
+                shapes: editor.getCurrentPageShapes().length
+            },
+            camera: {
+                current: camera,
+                viewport: viewportBounds
+            },
+            shape: {
+                id: shape.id,
+                bounds,
+                center: { x: shapeCenterX, y: shapeCenterY },
+                currentViewportCenter: { x: currentViewportCenterX, y: currentViewportCenterY },
+                isAlreadyCentered
+            }
+        });
+
+        // If the shape is already centered, don't animate
+        if (isAlreadyCentered) {
+            logger.debug('node-canvas', '✨ Shape is already centered, skipping animation');
+            return;
+        }
+
+        // Calculate the target camera position to center the shape
+        const targetX = camera.x + (currentViewportCenterX - shapeCenterX);
+        const targetY = camera.y + (currentViewportCenterY - shapeCenterY);
+
+        const startX = camera.x;
+        const startY = camera.y;
+
+        // Force the camera to maintain its current zoom level
+        const currentZoom = camera.z;
+
+        // Animate the camera position
+        const startTime = Date.now();
+        const animate = () => {
+            const elapsed = Date.now() - startTime;
+            const progress = Math.min(elapsed / this.ANIMATION_DURATION, 1);
+            
+            // Use easeInOutCubic for smooth animation
+            const eased = progress < 0.5
+                ? 4 * progress * progress * progress
+                : 1 - Math.pow(-2 * progress + 2, 3) / 2;
+
+            const x = startX + (targetX - startX) * eased;
+            const y = startY + (targetY - startY) * eased;
+
+            editor.setCamera({
+                ...camera,
+                x,
+                y,
+                z: currentZoom // Maintain zoom level
+            });
+
+            if (progress < 1) {
+                this.currentAnimation = requestAnimationFrame(animate);
+            } else {
+                this.currentAnimation = null;
+                logger.debug('node-canvas', '✅ Shape centering animation complete', {
+                    finalPosition: { x, y, z: currentZoom },
+                    shapeCenterPoint: { x: shapeCenterX, y: shapeCenterY }
+                });
+            }
+        };
+
+        this.currentAnimation = requestAnimationFrame(animate);
+    }
+
+    static async centerCurrentNode(editor: Editor, node: NavigationNode, nodeData: NodeData): Promise<void> {
+        try {
+            // Cancel any existing animation before starting
+            this.cancelCurrentAnimation();
+
+            const shapes = this.findAllNodeShapes(editor, node.id);
+            
+            if (shapes.length > 0) {
+                const existingShape = this.handleMultipleNodeInstances(editor, node.id, shapes);
+                if (existingShape) {
+                    // Ensure the shape is actually on the canvas
+                    const bounds = editor.getShapePageBounds(existingShape);
+                    if (!bounds) {
+                        logger.warn('node-canvas', '⚠️ Shape exists but has no bounds', { 
+                            nodeId: node.id,
+                            shapeId: existingShape.id
+                        });
+                        return;
+                    }
+
+                    this.animateViewToShape(editor, existingShape);
+                    logger.debug('node-canvas', '🎯 Centered view on existing shape', { 
+                        nodeId: node.id,
+                        shapeBounds: bounds
+                    });
+                }
+            } else {
+                // Create new shape for the node
+                const newShape = await this.createNodeShape(editor, node, nodeData);
+                if (newShape) {
+                    this.animateViewToShape(editor, newShape);
+                    logger.debug('node-canvas', '✨ Created and centered new shape', { nodeId: node.id });
+                } else {
+                    logger.warn('node-canvas', '⚠️ Could not create or center node shape', { nodeId: node.id });
+                }
+            }
+        } catch (error) {
+            this.cancelCurrentAnimation();
+            logger.error('node-canvas', '❌ Failed to center node', { 
+                nodeId: node.id, 
+                error: error instanceof Error ? error.message : 'Unknown error' 
+            });
+        }
+    }
+
+    private static async createNodeShape(editor: Editor, node: NavigationNode, nodeData: NodeData): Promise<TLShape | null> {
+        try {
+            const viewportBounds = editor.getViewportPageBounds();
+            const centerX = viewportBounds.x + viewportBounds.w / 2;
+            const centerY = viewportBounds.y + viewportBounds.h / 2;
+
+            // Get shape configuration from NeoShapeService
+            const shapeConfig = NeoShapeService.getShapeConfig(node, nodeData, centerX, centerY);
+            const shapeId = createShapeId(node.id);
+
+            // Create the shape with the configuration
+            editor.createShape<TLShape>({
+                id: shapeId,
+                ...shapeConfig
+            });
+
+            return editor.getShape(shapeId) || null;
+        } catch (error) {
+            logger.error('node-canvas', '❌ Failed to create node shape', { 
+                nodeId: node.id, 
+                error: error instanceof Error ? error.message : 'Unknown error' 
+            });
+            return null;
+        }
+    }
+} 
\ No newline at end of file
diff --git a/src/services/tldraw/optionsService.ts b/src/services/tldraw/optionsService.ts
new file mode 100644
index 0000000..9eb5951
--- /dev/null
+++ b/src/services/tldraw/optionsService.ts
@@ -0,0 +1,43 @@
+import { TldrawOptions } from "@tldraw/tldraw";
+
+export const multiplayerOptions: Partial<TldrawOptions> = {
+	actionShortcutsLocation: "swap",
+    adjacentShapeMargin: 10,
+    animationMediumMs: 320,
+    cameraMovingTimeoutMs: 64,
+    cameraSlideFriction: 0.09,
+    coarseDragDistanceSquared: 36,
+    coarseHandleRadius: 20,
+    coarsePointerWidth: 12,
+    collaboratorCheckIntervalMs: 1200,
+    collaboratorIdleTimeoutMs: 3000,
+    collaboratorInactiveTimeoutMs: 60000,
+    defaultSvgPadding: 32,
+    doubleClickDurationMs: 450,
+    dragDistanceSquared: 16,
+    edgeScrollDelay: 200,
+    edgeScrollDistance: 8,
+    edgeScrollEaseDuration: 200,
+    edgeScrollSpeed: 25,
+    flattenImageBoundsExpand: 64,
+    flattenImageBoundsPadding: 16,
+    followChaseViewportSnap: 2,
+    gridSteps: [
+        { mid: 0.15, min: -1, step: 64 },
+        { mid: 0.375, min: 0.05, step: 16 },
+        { mid: 1, min: 0.15, step: 4 },
+        { mid: 2.5, min: 0.7, step: 1 }
+    ],
+    handleRadius: 12,
+    hitTestMargin: 8,
+    laserDelayMs: 1200,
+    longPressDurationMs: 500,
+    maxExportDelayMs: 5000,
+    maxFilesAtOnce: 100,
+    maxPages: 1,
+    maxPointsPerDrawShape: 500,
+    maxShapesPerPage: 4000,
+    multiClickDurationMs: 200,
+    temporaryAssetPreviewLifetimeMs: 180000,
+    textShadowLod: 0.35
+}
\ No newline at end of file
diff --git a/src/services/tldraw/presentationService.ts b/src/services/tldraw/presentationService.ts
new file mode 100644
index 0000000..b475c92
--- /dev/null
+++ b/src/services/tldraw/presentationService.ts
@@ -0,0 +1,234 @@
+import { Editor, TLStoreEventInfo, createShapeId, TLShape } from '@tldraw/tldraw'
+import { logger } from '../../debugConfig'
+import { CCSlideShowShape } from '../../utils/tldraw/cc-base/cc-slideshow/CCSlideShowShapeUtil'
+import { CCSlideShape } from '../../utils/tldraw/cc-base/cc-slideshow/CCSlideShapeUtil'
+import { CCSlideLayoutBinding } from '../../utils/tldraw/cc-base/cc-slideshow/CCSlideLayoutBindingUtil'
+
+export class PresentationService {
+    private editor: Editor
+    private initialSlideshow: CCSlideShowShape | null = null
+    private cameraProxyId = createShapeId('camera-proxy')
+    private lastUserInteractionTime = 0
+    private readonly USER_INTERACTION_DEBOUNCE = 1000 // 1 second
+    private zoomLevels = new Map<string, number>() // Track zoom levels by shape dimensions
+    private isMoving = false
+
+    constructor(editor: Editor) {
+        this.editor = editor
+        logger.debug('system', '🎥 PresentationService initialized')
+        
+        // Add style to hide camera proxy frame
+        const style = document.createElement('style')
+        style.setAttribute('data-camera-proxy', this.cameraProxyId)
+        style.textContent = `
+            [data-shape-id="${this.cameraProxyId}"] {
+                opacity: 0 !important;
+                pointer-events: none !important;
+            }
+        `
+        document.head.appendChild(style)
+    }
+
+    private getShapeDimensionKey(width: number, height: number): string {
+        return `${Math.round(width)}_${Math.round(height)}`
+    }
+
+    private async moveToShape(shape: CCSlideShape | CCSlideShowShape): Promise<void> {
+        if (this.isMoving) {
+            logger.debug('presentation', '⏳ Movement in progress, queueing next movement')
+            // Wait for current movement to complete
+            await new Promise(resolve => setTimeout(resolve, 100))
+            return this.moveToShape(shape)
+        }
+
+        this.isMoving = true
+        const bounds = this.editor.getShapePageBounds(shape.id)
+        if (!bounds) {
+            logger.warn('presentation', '⚠️ Could not get bounds for shape')
+            this.isMoving = false
+            return
+        }
+
+        try {
+            // Phase 1: Update proxy shape instantly
+            this.editor.updateShape({
+                id: this.cameraProxyId,
+                type: 'frame',
+                x: bounds.minX,
+                y: bounds.minY,
+                props: {
+                    w: bounds.width,
+                    h: bounds.height,
+                    name: 'camera-proxy'
+                }
+            })
+
+            // Wait for a frame to ensure bounds are updated
+            await new Promise(resolve => requestAnimationFrame(resolve))
+
+            // Phase 2: Calculate and apply camera movement
+            const viewport = this.editor.getViewportPageBounds()
+            const padding = 32
+            const dimensionKey = this.getShapeDimensionKey(bounds.width, bounds.height)
+            
+            // Get existing zoom level for this shape size or calculate new one
+            let targetZoom = this.zoomLevels.get(dimensionKey)
+            if (!targetZoom) {
+                targetZoom = Math.min(
+                    (viewport.width - padding * 2) / bounds.width,
+                    (viewport.height - padding * 2) / bounds.height
+                )
+                this.zoomLevels.set(dimensionKey, targetZoom)
+                logger.debug('presentation', '📏 New zoom level calculated', { 
+                    dimensions: dimensionKey, 
+                    zoom: targetZoom 
+                })
+            }
+
+            // Stop any existing camera movement
+            this.editor.stopCameraAnimation()
+
+            // Move camera to new position
+            this.editor.zoomToBounds(bounds, {
+                animation: {
+                    duration: 500,
+                    easing: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
+                },
+                targetZoom,
+                inset: padding
+            })
+
+            // Wait for animation to complete
+            await new Promise(resolve => setTimeout(resolve, 500))
+
+        } catch (error) {
+            logger.error('presentation', '❌ Error during shape transition', { error })
+        } finally {
+            this.isMoving = false
+        }
+    }
+
+    startPresentationMode() {
+        logger.info('presentation', '🎥 Starting presentation mode')
+        
+        // Reset zoom levels on start
+        this.zoomLevels.clear()
+        
+        // Find initial slideshow to track
+        const slideshows = this.editor.getSortedChildIdsForParent(this.editor.getCurrentPageId())
+            .map(id => this.editor.getShape(id))
+            .filter(shape => shape?.type === 'cc-slideshow')
+
+        if (slideshows.length === 0) {
+            logger.warn('presentation', '⚠️ No slideshows found')
+            return () => {}
+        }
+
+        this.initialSlideshow = slideshows[0] as CCSlideShowShape
+
+        // Create camera proxy shape if it doesn't exist
+        if (!this.editor.getShape(this.cameraProxyId)) {
+            this.editor.createShape({
+                id: this.cameraProxyId,
+                type: 'frame',
+                x: 0,
+                y: 0,
+                props: {
+                    w: 1,
+                    h: 1,
+                    name: 'camera-proxy'
+                }
+            })
+        }
+
+        const handleStoreChange = (event: TLStoreEventInfo) => {
+            // Debounce user interaction logs
+            if (event.source === 'user') {
+                const now = Date.now()
+                if (now - this.lastUserInteractionTime > this.USER_INTERACTION_DEBOUNCE) {
+                    logger.debug('presentation', '📝 User interaction received')
+                    this.lastUserInteractionTime = now
+                }
+            }
+
+            if (!event.changes.updated) return
+
+            // Only process shape updates
+            const shapeUpdates = Object.entries(event.changes.updated)
+                .filter(([, [from, to]]) => 
+                    from.typeName === 'shape' && 
+                    to.typeName === 'shape' &&
+                    (from as TLShape).type === 'cc-slideshow' &&
+                    (to as TLShape).type === 'cc-slideshow'
+                )
+
+            if (shapeUpdates.length === 0) return
+
+            for (const [, [from, to]] of shapeUpdates) {
+                const fromShape = from as TLShape
+                const toShape = to as TLShape
+
+                if (!this.initialSlideshow || fromShape.id !== this.initialSlideshow.id) continue
+
+                const fromShow = fromShape as CCSlideShowShape
+                const toShow = toShape as CCSlideShowShape
+
+                if (fromShow.props.currentSlideIndex === toShow.props.currentSlideIndex) continue
+
+                logger.info('presentation', '🔄 Moving to new slide', {
+                    from: fromShow.props.currentSlideIndex,
+                    to: toShow.props.currentSlideIndex
+                })
+
+                // Get all bindings for this slideshow, sorted by index
+                const bindings = this.editor
+                    .getBindingsFromShape(toShow, 'cc-slide-layout')
+                    .filter((b): b is CCSlideLayoutBinding => b.type === 'cc-slide-layout')
+                    .filter(b => !b.props.placeholder)
+                    .sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
+
+                const currentBinding = bindings[toShow.props.currentSlideIndex]
+                if (!currentBinding) {
+                    logger.warn('presentation', '⚠️ Could not find binding for target slide')
+                    continue
+                }
+
+                const currentSlide = this.editor.getShape(currentBinding.toId) as CCSlideShape
+                if (!currentSlide) {
+                    logger.warn('presentation', '⚠️ Could not find target slide')
+                    continue
+                }
+
+                void this.moveToShape(currentSlide)
+            }
+        }
+
+        // Set up store listener and get cleanup function
+        const storeCleanup = this.editor.store.listen(handleStoreChange)
+
+        // Return cleanup function
+        return () => {
+            logger.info('presentation', '🧹 Running presentation mode cleanup')
+            storeCleanup()
+            this.stopPresentationMode()
+        }
+    }
+
+    stopPresentationMode() {
+        this.zoomLevels.clear()
+        this.isMoving = false
+        if (this.editor.getShape(this.cameraProxyId)) {
+            this.editor.deleteShape(this.cameraProxyId)
+        }
+        // Remove the style element
+        const style = document.querySelector(`style[data-camera-proxy="${this.cameraProxyId}"]`)
+        if (style) {
+            style.remove()
+        }
+    }
+
+    // Public method to move to any shape (slide or slideshow)
+    zoomToShape(shape: CCSlideShape | CCSlideShowShape) {
+        void this.moveToShape(shape)
+    }
+}
diff --git a/src/services/tldraw/searchService.ts b/src/services/tldraw/searchService.ts
new file mode 100644
index 0000000..2b572f7
--- /dev/null
+++ b/src/services/tldraw/searchService.ts
@@ -0,0 +1,52 @@
+interface SearXNGResult {
+  title?: string
+  url?: string
+  content?: string
+}
+
+export interface SearchResult {
+  title: string;
+  url: string;
+  content?: string;
+}
+
+export class SearchService {
+  static async search(query: string): Promise<SearchResult[]> {
+    if (!query.trim()) {
+      return []
+    }
+
+    try {
+      const searchParams = new URLSearchParams({
+        q: query,
+        format: 'json',
+        language: 'en',
+        time_range: 'None',
+        safesearch: '0',
+        engines: 'google,bing,duckduckgo',
+      })
+
+      const url = `${import.meta.env.VITE_FRONTEND_SITE_URL}/searxng-api/search?${searchParams.toString()}`
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+        },
+      })
+
+      if (!response.ok) {
+        throw new Error(`Search failed with status: ${response.status}`)
+      }
+      
+      const data = await response.json()
+      return (data.results || []).map((result: SearXNGResult) => ({
+        title: result.title || '',
+        url: result.url || '',
+        content: result.content || ''
+      }))
+    } catch (error) {
+      console.error('Search error:', error)
+      throw error
+    }
+  }
+} 
\ No newline at end of file
diff --git a/src/services/tldraw/sharedStoreService.ts b/src/services/tldraw/sharedStoreService.ts
new file mode 100644
index 0000000..7e8710f
--- /dev/null
+++ b/src/services/tldraw/sharedStoreService.ts
@@ -0,0 +1,122 @@
+// External imports
+import { TLStore, TLEditorSnapshot, loadSnapshot, getSnapshot } from '@tldraw/tldraw';
+// Local imports
+import { logger } from '../../debugConfig';
+import { LoadingState } from './snapshotService';
+import { storageService, StorageKeys } from '../auth/localStorageService';
+
+interface AutoSaveConfig {
+    checkInterval: number;  // Changed to required
+    saveInterval: number;   // Changed to required
+}
+
+const DEFAULT_CONFIG: AutoSaveConfig = {
+    checkInterval: 5000,
+    saveInterval: 30000
+};
+
+export class SharedStoreService {
+    private lastSaveTime: number = Date.now();
+    private autoSaveInterval: ReturnType<typeof setTimeout> | null = null;
+    private config: AutoSaveConfig;
+
+    constructor(private store: TLStore, config?: Partial<AutoSaveConfig>) {
+        this.config = {
+            ...DEFAULT_CONFIG,
+            ...config
+        };
+        logger.debug('shared-store-service', '🏗️ Initializing SharedStoreService');
+    }
+
+    public startAutoSave(setLoadingState: (state: LoadingState) => void): void {
+        if (this.autoSaveInterval) {
+            this.stopAutoSave();
+        }
+
+        this.autoSaveInterval = setInterval(() => {
+            this.checkAndSave(setLoadingState);
+        }, this.config.checkInterval);
+
+        logger.debug('shared-store-service', '⏰ Auto-save started', {
+            checkInterval: this.config.checkInterval,
+            saveInterval: this.config.saveInterval
+        });
+    }
+
+    public stopAutoSave(): void {
+        if (this.autoSaveInterval) {
+            clearInterval(this.autoSaveInterval);
+            this.autoSaveInterval = null;
+            logger.debug('shared-store-service', '⏹️ Auto-save stopped');
+        }
+    }
+
+    private async checkAndSave(setLoadingState: (state: LoadingState) => void): Promise<void> {
+        const now = Date.now();
+        if (now - this.lastSaveTime >= this.config.saveInterval) {
+            const currentSnapshot = getSnapshot(this.store);
+            const savedSnapshot = storageService.get(StorageKeys.LOCAL_SNAPSHOT);
+
+            if (!savedSnapshot || JSON.stringify(currentSnapshot) !== JSON.stringify(savedSnapshot)) {
+                logger.debug('shared-store-service', '💾 Auto-saving snapshot - changes detected');
+                await this.saveSnapshot(currentSnapshot, setLoadingState);
+                this.lastSaveTime = now;
+            } else {
+                logger.trace('shared-store-service', '📝 No changes detected, skipping auto-save');
+            }
+        }
+    }
+
+    public async saveSnapshot(
+        snapshot: Partial<TLEditorSnapshot>,
+        setLoadingState: (state: LoadingState) => void
+    ): Promise<void> {
+        try {
+            storageService.set(StorageKeys.LOCAL_SNAPSHOT, snapshot);
+            setLoadingState({ status: 'ready', error: '' });
+            logger.debug('shared-store-service', '✅ Snapshot saved successfully');
+        } catch (error) {
+            logger.error('shared-store-service', '❌ Failed to save snapshot:', error);
+            setLoadingState({ 
+                status: 'error', 
+                error: error instanceof Error ? error.message : 'Failed to save snapshot' 
+            });
+        }
+    }
+
+    public async loadSnapshot(
+        snapshot: Partial<TLEditorSnapshot>,
+        setLoadingState: (state: LoadingState) => void
+    ): Promise<void> {
+        try {
+            setLoadingState({ status: 'loading', error: '' });
+            loadSnapshot(this.store, snapshot);
+            setLoadingState({ status: 'ready', error: '' });
+            logger.debug('shared-store-service', '✅ Snapshot loaded successfully');
+        } catch (error) {
+            logger.error('shared-store-service', '❌ Failed to load snapshot:', error);
+            this.store.clear();
+            setLoadingState({ 
+                status: 'error', 
+                error: error instanceof Error ? error.message : 'Failed to load snapshot' 
+            });
+        }
+    }
+
+    public getStore(): TLStore {
+        return this.store;
+    }
+
+    public clear(): void {
+        this.stopAutoSave();
+        this.store.clear();
+        logger.debug('shared-store-service', '🧹 Store cleared');
+    }
+}
+
+export const createSharedStore = (
+    store: TLStore, 
+    config?: Partial<AutoSaveConfig>
+): SharedStoreService => {
+    return new SharedStoreService(store, config);
+}; 
\ No newline at end of file
diff --git a/src/services/tldraw/snapshotService.ts b/src/services/tldraw/snapshotService.ts
new file mode 100644
index 0000000..20d63c5
--- /dev/null
+++ b/src/services/tldraw/snapshotService.ts
@@ -0,0 +1,314 @@
+// External imports
+import { loadSnapshot, TLStore, getSnapshot } from '@tldraw/tldraw';
+import axios from '../../axiosConfig';
+import logger from '../../debugConfig';
+import { SharedStoreService } from './sharedStoreService';
+import { StorageKeys, storageService } from '../auth/localStorageService';
+import { NavigationNode } from '../../types/navigation';
+
+export interface LoadingState {
+    status: 'loading' | 'ready' | 'error';
+    error: string;
+}
+
+const EMPTY_NODE: NavigationNode = {
+    id: '',
+    tldraw_snapshot: '',
+    type: '',
+    label: ''
+};
+
+export class NavigationSnapshotService {
+    private store: TLStore;
+    private currentNodePath: string | null = null;
+    private isAutoSaveEnabled = true;
+    private isSaving = false;
+    private isLoading = false;
+    private pendingOperation: { save?: string; load?: string } | null = null;
+    private debounceTimeout: ReturnType<typeof setTimeout> | null = null;
+
+    constructor(store: TLStore) {
+        this.store = store;
+        logger.debug('snapshot-service', '🔄 Initialized NavigationSnapshotService', {
+            storeId: store.id
+        });
+    }
+
+    private static replaceBackslashes(input: string | undefined): string {
+        return input ? input.replace(/\\/g, '/') : '';
+    }
+
+    static async loadNodeSnapshotFromDatabase(
+        nodePath: string,
+        dbName: string,
+        store: TLStore,
+        setLoadingState: (state: LoadingState) => void,
+        sharedStore?: SharedStoreService
+    ): Promise<void> {
+        try {
+            setLoadingState({ status: 'loading', error: '' });
+
+            logger.info('snapshot-service', '📂 Loading file from path', { 
+                path: nodePath,
+                db_name: dbName
+            });
+
+            const response = await axios.get(
+                '/database/tldraw_fs/get_tldraw_node_file', {
+                    params: {
+                        path: this.replaceBackslashes(nodePath),
+                        db_name: dbName
+                    }
+                }
+            );
+
+            const snapshot = response.data;
+            if (snapshot && snapshot.document && snapshot.session) {
+                logger.debug('snapshot-service', '📥 Snapshot loaded successfully');
+                
+                if (sharedStore) {
+                    await sharedStore.loadSnapshot(snapshot, setLoadingState);
+                } else {
+                    loadSnapshot(store, snapshot);
+                    storageService.set(StorageKeys.NODE_FILE_PATH, nodePath);
+                }
+            } else {
+                logger.error('snapshot-service', '❌ Invalid snapshot format');
+                setLoadingState({ status: 'error', error: 'Invalid snapshot format' });  
+            }
+        } catch (error) {
+            logger.error('snapshot-service', '❌ Failed to fetch snapshot', { 
+                error: error instanceof Error ? error.message : 'Unknown error'
+            });
+            setLoadingState({ 
+                status: 'error', 
+                error: error instanceof Error ? error.message : 'Failed to load file' 
+            });
+        }
+    }
+
+    static async saveNodeSnapshotToDatabase(
+        nodePath: string,
+        dbName: string,
+        store: TLStore
+    ): Promise<void> {
+        try {
+            logger.info('snapshot-service', '💾 Saving snapshot to database', { 
+                path: nodePath,
+                db_name: dbName
+            });
+
+            const snapshot = getSnapshot(store);
+            
+            const response = await axios.post(
+                '/database/tldraw_fs/set_tldraw_node_file', 
+                snapshot,
+                {
+                    params: {
+                        path: this.replaceBackslashes(nodePath),
+                        db_name: dbName
+                    }
+                }
+            );
+
+            if (response.data.status === 'success') {
+                logger.debug('snapshot-service', '✅ Snapshot saved successfully');
+            } else {
+                throw new Error('Failed to save snapshot');
+            }
+        } catch (error) {
+            logger.error('snapshot-service', '❌ Failed to save snapshot', { 
+                error: error instanceof Error ? error.message : 'Unknown error'
+            });
+            throw error;
+        }
+    }
+
+    private async saveCurrentSnapshot(nodePath: string): Promise<void> {
+        if (!this.currentNodePath || this.currentNodePath !== nodePath) {
+            logger.debug('snapshot-service', '⚠️ Skipping save - path mismatch', {
+                currentPath: this.currentNodePath,
+                savePath: nodePath
+            });
+            return;
+        }
+
+        try {
+            this.isSaving = true;
+            const user = storageService.get(StorageKeys.USER);
+            if (!user) {
+                throw new Error('No user found');
+            }
+
+            const dbName = user.user_db_name;
+            
+            logger.debug('snapshot-service', '💾 Saving snapshot', {
+                nodePath,
+                dbName,
+                userType: user.user_type,
+                username: user.username
+            });
+
+            await NavigationSnapshotService.saveNodeSnapshotToDatabase(nodePath, dbName, this.store);
+            
+            logger.debug('snapshot-service', '✅ Saved navigation snapshot', { 
+                nodePath,
+                storeId: this.store.id
+            });
+        } catch (error) {
+            logger.error('snapshot-service', '❌ Failed to save navigation snapshot', {
+                error: error instanceof Error ? error.message : 'Unknown error',
+                nodePath
+            });
+            throw error;
+        } finally {
+            this.isSaving = false;
+        }
+    }
+
+    private async loadSnapshotForNode(node: NavigationNode): Promise<void> {
+        try {
+            this.isLoading = true;
+            const user = storageService.get(StorageKeys.USER);
+            if (!user) {
+                throw new Error('No user found');
+            }
+
+            const dbName = user.user_db_name;
+            
+            logger.debug('snapshot-service', '📥 Loading snapshot', {
+                nodePath: node.tldraw_snapshot,
+                dbName,
+                userType: user.user_type,
+                username: user.username
+            });
+
+            await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
+                node.tldraw_snapshot,
+                dbName,
+                this.store,
+                (state: LoadingState) => {
+                    if (state.status === 'ready') {
+                        this.currentNodePath = node.tldraw_snapshot;
+                        logger.debug('snapshot-service', '✅ Snapshot loaded and path updated', {
+                            nodePath: node.tldraw_snapshot
+                        });
+                    } else if (state.status === 'error') {
+                        logger.error('snapshot-service', '❌ Error in load callback', {
+                            error: state.error,
+                            nodePath: node.tldraw_snapshot
+                        });
+                    }
+                }
+            );
+        } catch (error) {
+            logger.error('snapshot-service', '❌ Failed to load navigation snapshot', {
+                error: error instanceof Error ? error.message : 'Unknown error',
+                nodePath: node.tldraw_snapshot
+            });
+            throw error;
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    async handleNavigationStart(fromNode: NavigationNode | null, toNode: NavigationNode | null): Promise<void> {
+        if (!toNode) {
+            logger.warn('snapshot-service', '⚠️ Cannot navigate to null node');
+            return;
+        }
+
+        // Clear any pending debounce
+        if (this.debounceTimeout) {
+            clearTimeout(this.debounceTimeout);
+        }
+
+        // Debounce the navigation operation
+        return new Promise((resolve) => {
+            this.debounceTimeout = setTimeout(async () => {
+                try {
+                    await this.executeNavigation(fromNode || EMPTY_NODE, toNode);
+                    resolve();
+                } catch (error) {
+                    logger.error('snapshot-service', '❌ Navigation failed', error);
+                    throw error;
+                }
+            }, 100); // 100ms debounce
+        });
+    }
+
+    private async executeNavigation(fromNode: NavigationNode, toNode: NavigationNode): Promise<void> {
+        try {
+            logger.debug('snapshot-service', '🔄 Starting navigation snapshot handling', {
+                from: fromNode.tldraw_snapshot,
+                to: toNode.tldraw_snapshot,
+                currentPath: this.currentNodePath
+            });
+
+            // If we're already in a navigation operation, queue this one
+            if (this.isSaving || this.isLoading) {
+                this.pendingOperation = {
+                    save: fromNode.tldraw_snapshot || undefined,
+                    load: toNode.tldraw_snapshot
+                };
+                logger.debug('snapshot-service', '⏳ Queued navigation operation', this.pendingOperation);
+                return;
+            }
+
+            // Clear the store before loading new snapshot
+            logger.debug('snapshot-service', '🔄 Clearing store');
+            this.currentNodePath = null;
+            logger.debug('snapshot-service', '🧹 Cleared current node path');
+
+            // Load the new node's snapshot
+            if (toNode.tldraw_snapshot) {
+                await this.loadSnapshotForNode(toNode);
+                logger.debug('snapshot-service', '✅ Loaded new node snapshot', {
+                    nodePath: toNode.tldraw_snapshot
+                });
+            }
+
+            // Process any pending operations
+            if (this.pendingOperation) {
+                logger.debug('snapshot-service', '🔄 Processing pending operation', this.pendingOperation);
+                const operation = this.pendingOperation;
+                this.pendingOperation = null;
+                await this.handleNavigationStart(
+                    operation.save ? { ...EMPTY_NODE, tldraw_snapshot: operation.save } : null,
+                    operation.load ? { ...EMPTY_NODE, tldraw_snapshot: operation.load } : null
+                );
+                logger.debug('snapshot-service', '✅ Completed pending operation');
+            }
+        } catch (error) {
+            logger.error('snapshot-service', '❌ Error during navigation snapshot handling', {
+                error: error instanceof Error ? error.message : 'Unknown error',
+                fromPath: fromNode.tldraw_snapshot,
+                toPath: toNode.tldraw_snapshot
+            });
+            throw error;
+        }
+    }
+
+    setAutoSave(enabled: boolean): void {
+        this.isAutoSaveEnabled = enabled;
+        logger.debug('snapshot-service', '🔄 Auto-save setting changed', {
+            enabled
+        });
+    }
+
+    getCurrentNodePath(): string | null {
+        return this.currentNodePath;
+    }
+
+    async forceSaveCurrentNode(): Promise<void> {
+        if (this.currentNodePath) {
+            await this.saveCurrentSnapshot(this.currentNodePath);
+        }
+    }
+
+    clearCurrentNode(): void {
+        this.currentNodePath = null;
+        this.store.clear();
+        logger.debug('snapshot-service', '🧹 Cleared current node and store');
+    }
+}
\ No newline at end of file
diff --git a/src/services/tldraw/syncService.ts b/src/services/tldraw/syncService.ts
new file mode 100644
index 0000000..655cd2b
--- /dev/null
+++ b/src/services/tldraw/syncService.ts
@@ -0,0 +1,117 @@
+// External imports
+import {
+    TLAssetStore,
+    uniqueId,
+    TLAsset,
+    TLBookmarkAsset,
+    AssetRecordType,
+    getHashForString,
+} from '@tldraw/tldraw';
+import { logger } from '../../debugConfig';
+
+export interface SyncConnectionOptions {
+    userId: string;
+    displayName: string;
+    color: string;
+    roomId?: string;
+    baseUrl: string;
+}
+
+export function createSyncConnectionOptions(options: SyncConnectionOptions) {
+    const {
+        userId,
+        displayName,
+        roomId = 'multiplayer',
+        baseUrl
+
+    } = options;
+
+    // Ensure we have valid user info
+    if (!userId || !displayName) {
+        logger.warn('sync-service', 'Missing user information', { userId, displayName });
+    }
+
+    // Create a unique room ID if not provided
+    const effectiveRoomId = roomId || `room-${uniqueId()}`;
+
+    const multiplayerAssets: TLAssetStore = {
+        async upload(_asset: unknown, file: File) {
+            const id = uniqueId();
+            const objectName = `${id}-${file.name}`;
+            const uploadPath = '/uploads';
+            const url = `${baseUrl}${uploadPath}/${encodeURIComponent(objectName)}`;
+
+            try {
+                const response = await fetch(url, {
+                    method: 'PUT',
+                    body: file,
+                    headers: {
+                        'Content-Type': file.type
+                    }
+                });
+
+                if (!response.ok) {
+                    const errorDetail = await response.text();
+                    throw new Error(`Failed to upload asset: ${response.statusText} - Details: ${errorDetail}`);
+                }
+
+                return url;
+            } catch (error) {
+                logger.error('sync-service', 'Error during asset upload: ', error);
+                throw error;
+            }
+        },
+        resolve(asset: TLAsset) {
+            return asset.props.src ?? '';
+        }
+    };
+
+    logger.info('sync-service', '🔄 Creating sync connection', { 
+        userId, 
+        displayName, 
+        roomId: effectiveRoomId 
+    });
+
+    return {
+        uri: `${baseUrl}/connect/${effectiveRoomId}`,
+        assets: multiplayerAssets,
+        roomId: effectiveRoomId
+    };
+}
+
+export async function handleExternalAsset(baseUrl: string, url: string): Promise<TLBookmarkAsset> {
+    const asset: TLBookmarkAsset = {
+        id: AssetRecordType.createId(getHashForString(url)),
+        typeName: 'asset',
+        type: 'bookmark',
+        props: {
+            src: url,
+            description: '',
+            image: '',
+            favicon: '',
+            title: ''
+        },
+        meta: {}
+    };
+
+    try {
+        const response = await fetch(`${baseUrl}/unfurl?url=${encodeURIComponent(url)}`);
+        const data = await response.json();
+
+        asset.props = {
+            ...asset.props,
+            ...data
+        };
+    } catch (error) {
+        logger.error('sync-service', 'Error unfurling URL:', error);
+    }
+
+    return asset;
+}
+
+export function generateSharedRoomId(path: string): string {
+    // Create a deterministic room ID based on the path
+    const sanitizedPath = path.replace(/[^a-zA-Z0-9]/g, '-');
+    return `shared-${sanitizedPath}`;
+}
+
diff --git a/src/services/tldraw/tools/youtubeService.ts b/src/services/tldraw/tools/youtubeService.ts
new file mode 100644
index 0000000..56f8a78
--- /dev/null
+++ b/src/services/tldraw/tools/youtubeService.ts
@@ -0,0 +1,29 @@
+import axios from '../../../axiosConfig';
+
+interface TranscriptLine {
+  start: number;
+  duration: number;
+  text: string;
+}
+
+export async function getYoutubeTranscript(videoUrl: string): Promise<TranscriptLine[]> {
+  try {
+    const videoId = extractVideoId(videoUrl);
+    if (!videoId) {
+      throw new Error('Invalid YouTube URL');
+    }
+
+    const response = await axios.get(`/external/youtube-proxy?videoId=${videoId}`);
+    console.log('Got Youtube video data:', response.data);
+    return response.data.transcript;
+  } catch (error) {
+    console.error('Error fetching YouTube video data:', error);
+    throw error;
+  }
+}
+
+export function extractVideoId(url: string): string | null {
+  const regex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/;
+  const match = url.match(regex);
+  return match ? match[1] : null;
+}
diff --git a/src/setupTests.ts b/src/setupTests.ts
new file mode 100644
index 0000000..72752bc
--- /dev/null
+++ b/src/setupTests.ts
@@ -0,0 +1,3 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import '@testing-library/jest-dom';
+import { expect } from 'vitest';
diff --git a/src/stores/navigationStore.ts b/src/stores/navigationStore.ts
new file mode 100644
index 0000000..44bd83c
--- /dev/null
+++ b/src/stores/navigationStore.ts
@@ -0,0 +1,439 @@
+import { create } from 'zustand';
+import { UserNeoDBService } from '../services/graph/userNeoDBService';
+import { logger } from '../debugConfig';
+import { isValidNodeType } from '../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { 
+    NavigationStore, 
+    NavigationNode,
+    MainContext,
+    BaseContext,
+    NavigationContextState,
+    isProfileContext,
+    isInstituteContext,
+    getContextDatabase,
+    addToHistory,
+    navigateHistory,
+    getCurrentHistoryNode,
+    ExtendedContext,
+    UnifiedContextSwitch,
+    NodeContext
+} from '../types/navigation';
+
+const initialState: NavigationContextState = {
+    main: 'profile',
+    base: 'profile',
+    node: null,
+    history: {
+        nodes: [],
+        currentIndex: -1
+    }
+};
+
+function getDefaultBaseForMain(main: MainContext): BaseContext {
+    return main === 'profile' ? 'profile' : 'school';
+}
+
+function validateContextTransition(
+    current: NavigationContextState,
+    updates: Partial<NavigationContextState>
+): NavigationContextState {
+    const newState = { ...current, ...updates };
+
+    // Validate main context
+    if (updates.main) {
+        newState.base = getDefaultBaseForMain(updates.main);
+    }
+
+    // Validate base context
+    if (updates.base) {
+        // Ensure base context matches main context
+        const isValid = newState.main === 'profile' 
+            ? isProfileContext(updates.base)
+            : isInstituteContext(updates.base);
+
+        if (!isValid) {
+            newState.base = getDefaultBaseForMain(newState.main);
+        }
+    }
+
+    return newState;
+}
+
+export interface NavigationActions {
+  // Context Navigation
+  setMainContext: (context: MainContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
+  setBaseContext: (context: BaseContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
+  setExtendedContext: (context: ExtendedContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
+  
+  // Node Navigation
+  navigate: (nodeId: string, dbName: string) => Promise<void>;
+  navigateToNode: (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => Promise<void>;
+  
+  // History Navigation
+  goBack: () => void;
+  goForward: () => void;
+  
+  // Utility Methods
+  refreshNavigationState: (userDbName: string | null, workerDbName: string | null) => Promise<void>;
+}
+
+export interface NavigationState {
+    context: {
+        main: NodeContext;
+        base: NodeContext;
+        extended?: string;
+        node: NavigationNode;
+        history: {
+            nodes: NavigationNode[];
+            currentIndex: number;
+        };
+    };
+    // ... rest of the state interface ...
+}
+
+export const useNavigationStore = create<NavigationStore>((set, get) => ({
+    context: initialState,
+    isLoading: false,
+    error: null,
+
+    switchContext: async (contextSwitch: UnifiedContextSwitch, userDbName: string | null, workerDbName: string | null) => {
+        try {
+            // Check if we have the necessary database connections
+            if (contextSwitch.main === 'profile' && !userDbName) {
+                logger.error('navigation-context', '❌ User database connection not initialized');
+                set({ 
+                    error: 'User database connection not initialized',
+                    isLoading: false 
+                });
+                return;
+            }
+            if (contextSwitch.main === 'institute' && !workerDbName) {
+                logger.error('navigation-context', '❌ Worker database connection not initialized');
+                set({ 
+                    error: 'Worker database connection not initialized',
+                    isLoading: false 
+                });
+                return;
+            }
+
+            logger.debug('navigation-context', '🔄 Starting context switch', {
+                from: {
+                    main: get().context.main,
+                    base: get().context.base,
+                    extended: contextSwitch.extended,
+                    nodeId: get().context.node?.id
+                },
+                to: {
+                    main: contextSwitch.main,
+                    base: contextSwitch.base,
+                    extended: contextSwitch.extended
+                },
+                skipBaseContextLoad: contextSwitch.skipBaseContextLoad
+            });
+
+            set({ isLoading: true, error: null });
+            
+            const currentState = get().context;
+            
+            // Clear node state immediately
+            const clearedState: NavigationContextState = {
+                ...currentState,
+                node: null
+            };
+            set({
+                context: clearedState,
+                isLoading: true
+            });
+
+            let newState: NavigationContextState = { 
+                ...currentState,
+                node: null
+            };
+
+            // Update main context if provided
+            if (contextSwitch.main) {
+                newState = validateContextTransition(newState, { main: contextSwitch.main });
+                if (!contextSwitch.skipBaseContextLoad) {
+                    newState.base = getDefaultBaseForMain(contextSwitch.main);
+                }
+                logger.debug('navigation-state', '✅ Main context updated', {
+                    previous: currentState.main,
+                    new: newState.main,
+                    defaultBase: newState.base
+                });
+            }
+
+            // Update base context if provided
+            if (contextSwitch.base) {
+                newState = validateContextTransition(newState, { base: contextSwitch.base });
+                logger.debug('navigation-state', '✅ Base context updated', {
+                    previous: currentState.base,
+                    new: newState.base
+                });
+            }
+
+            logger.debug('navigation-state', '✅ Context validation complete', {
+                validatedState: newState,
+                originalState: currentState
+            });
+
+            // Determine which context to use for the node
+            const targetContext = contextSwitch.base || 
+                                contextSwitch.extended || 
+                                (contextSwitch.main ? getDefaultBaseForMain(contextSwitch.main) : 
+                                newState.base);
+
+            // Get database name
+            const dbName = getContextDatabase(newState, userDbName, workerDbName);
+
+            logger.debug('context-switch', '🔍 Fetching default node for context', {
+                targetContext,
+                dbName,
+                currentState: newState
+            });
+
+            // Get default node for the final context
+            const defaultNode = await UserNeoDBService.getDefaultNode(targetContext, dbName);
+            
+            if (!defaultNode) {
+                const errorMsg = `No default node found for context: ${targetContext}`;
+                logger.error('context-switch', '❌ Default node fetch failed', { targetContext });
+                set({ 
+                    error: errorMsg,
+                    isLoading: false 
+                });
+                return;
+            }
+
+            logger.debug('context-switch', '✨ Default node fetched', {
+                nodeId: defaultNode.id,
+                tldraw_snapshot: defaultNode.tldraw_snapshot,
+                type: defaultNode.type
+            });
+
+            // Update history and state
+            const newHistory = addToHistory(currentState.history, defaultNode);
+            logger.debug('history-management', '📚 History updated', {
+                previousState: currentState.history,
+                newState: newHistory,
+                addedNode: defaultNode
+            });
+
+            set({ 
+                context: { 
+                    ...newState, 
+                    node: defaultNode,
+                    history: newHistory
+                },
+                isLoading: false,
+                error: null
+            });
+
+            logger.debug('navigation-context', '✅ Context switch completed', {
+                finalState: {
+                    main: newState.main,
+                    base: newState.base,
+                    nodeId: defaultNode.id
+                }
+            });
+        } catch (error) {
+            logger.error('navigation-context', '❌ Failed to switch context:', error);
+            set({ 
+                error: error instanceof Error ? error.message : 'Failed to switch context',
+                isLoading: false 
+            });
+        }
+    },
+
+    goBack: () => {
+        const currentState = get().context;
+        if (currentState.history.currentIndex > 0) {
+            const newHistory = navigateHistory(currentState.history, currentState.history.currentIndex - 1);
+            const node = getCurrentHistoryNode(newHistory);
+            set({
+                context: {
+                    ...currentState,
+                    node,
+                    history: newHistory
+                }
+            });
+        }
+    },
+
+    goForward: () => {
+        const currentState = get().context;
+        if (currentState.history.currentIndex < currentState.history.nodes.length - 1) {
+            const newHistory = navigateHistory(currentState.history, currentState.history.currentIndex + 1);
+            const node = getCurrentHistoryNode(newHistory);
+            set({
+                context: {
+                    ...currentState,
+                    node,
+                    history: newHistory
+                }
+            });
+        }
+    },
+
+    setMainContext: async (main: MainContext, userDbName: string | null, workerDbName: string | null) => {
+        try {
+            // Use switchContext instead of direct implementation
+            await get().switchContext({ main }, userDbName, workerDbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to set main context:', error);
+            set({ 
+                error: error instanceof Error ? error.message : 'Failed to set main context',
+                isLoading: false 
+            });
+        }
+    },
+
+    setBaseContext: async (base: BaseContext, userDbName: string | null, workerDbName: string | null) => {
+        try {
+            // Use switchContext instead of direct implementation
+            await get().switchContext({ base }, userDbName, workerDbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to set base context:', error);
+            set({ 
+                error: error instanceof Error ? error.message : 'Failed to set base context',
+                isLoading: false 
+            });
+        }
+    },
+
+    setExtendedContext: async (extended: ExtendedContext, userDbName: string | null, workerDbName: string | null) => {
+        try {
+            // Use switchContext instead of direct implementation
+            await get().switchContext({ extended }, userDbName, workerDbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to set extended context:', error);
+            set({ 
+                error: error instanceof Error ? error.message : 'Failed to set extended context',
+                isLoading: false 
+            });
+        }
+    },
+
+    navigate: async (nodeId: string, dbName: string) => {
+        try {
+            set({ isLoading: true, error: null });
+            
+            // Check if we already have this node in history
+            const currentState = get().context;
+            const existingNodeIndex = currentState.history.nodes.findIndex(n => n.id === nodeId);
+            
+            // If node exists in history, just navigate to it
+            if (existingNodeIndex !== -1) {
+                logger.debug('navigation', '📍 Navigating to existing node in history', {
+                    nodeId,
+                    historyIndex: existingNodeIndex,
+                    currentIndex: currentState.history.currentIndex
+                });
+                
+                const newHistory = navigateHistory(currentState.history, existingNodeIndex);
+                const node = getCurrentHistoryNode(newHistory);
+                
+                set({
+                    context: {
+                        ...currentState,
+                        node,
+                        history: newHistory
+                    },
+                    isLoading: false,
+                    error: null
+                });
+                return;
+            }
+
+            // Fetch new node data
+            const nodeData = await UserNeoDBService.fetchNodeData(nodeId, dbName);
+            if (!nodeData) {
+                throw new Error(`Node not found: ${nodeId}`);
+            }
+
+            const node: NavigationNode = {
+                id: nodeId,
+                tldraw_snapshot: nodeData.node_data.tldraw_snapshot || '',
+                label: nodeData.node_data.title || nodeData.node_data.user_name || nodeId,
+                type: nodeData.node_type
+            };
+
+            logger.debug('navigation', '📍 Adding new node to history', {
+                nodeId: node.id,
+                type: node.type,
+                tldraw_snapshot: node.tldraw_snapshot
+            });
+
+            // Add to history and update state
+            const newHistory = addToHistory(currentState.history, node);
+            set({
+                context: {
+                    ...currentState,
+                    node,
+                    history: newHistory
+                },
+                isLoading: false,
+                error: null
+            });
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to navigate:', error);
+            set({
+                error: error instanceof Error ? error.message : 'Failed to navigate',
+                isLoading: false
+            });
+        }
+    },
+
+    navigateToNode: async (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => {
+        try {
+            set({ isLoading: true, error: null });
+            
+            if (!isValidNodeType(node.type)) {
+                throw new Error(`Invalid node type: ${node.type}`);
+            }
+
+            const dbName = getContextDatabase(get().context, userDbName, workerDbName);
+            await get().navigate(node.id, dbName);
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to navigate to node:', error);
+            set({
+                error: error instanceof Error ? error.message : 'Failed to navigate to node',
+                isLoading: false
+            });
+        }
+    },
+
+    refreshNavigationState: async (userDbName: string | null, workerDbName: string | null) => {
+        try {
+            set({ isLoading: true, error: null });
+            const currentState = get().context;
+            
+            if (currentState.node) {
+                const dbName = getContextDatabase(currentState, userDbName, workerDbName);
+                const nodeData = await UserNeoDBService.fetchNodeData(currentState.node.id, dbName);
+                if (nodeData) {
+                    const node: NavigationNode = {
+                        id: currentState.node.id,
+                        tldraw_snapshot: nodeData.node_data.tldraw_snapshot || '',
+                        label: nodeData.node_data.title || nodeData.node_data.user_name || currentState.node.id,
+                        type: nodeData.node_type
+                    };
+                    set({
+                        context: {
+                            ...currentState,
+                            node
+                        }
+                    });
+                }
+            }
+            
+            set({ isLoading: false });
+        } catch (error) {
+            logger.error('navigation', '❌ Failed to refresh navigation state:', error);
+            set({
+                error: error instanceof Error ? error.message : 'Failed to refresh navigation state',
+                isLoading: false
+            });
+        }
+    }
+})); 
\ No newline at end of file
diff --git a/src/supabaseClient.ts b/src/supabaseClient.ts
new file mode 100644
index 0000000..5b2584c
--- /dev/null
+++ b/src/supabaseClient.ts
@@ -0,0 +1,65 @@
+import { createClient, SupabaseClient } from '@supabase/supabase-js';
+import { logger } from './debugConfig';
+
+const appProtocol = import.meta.env.VITE_APP_PROTOCOL;
+const supabaseUrl = `${appProtocol}://${import.meta.env.VITE_SUPABASE_URL}`;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+logger.info('supabase-client', '🔄 Supabase configuration', {
+  url: supabaseUrl,
+  key: supabaseAnonKey,
+});
+
+if (!supabaseUrl || !supabaseAnonKey) {
+  logger.error('supabase-client', '❌ Missing Supabase configuration', {
+    hasUrl: !!supabaseUrl,
+    hasKey: !!supabaseAnonKey,
+  });
+  throw new Error('Missing Supabase configuration');
+}
+
+// Lazy-loaded Supabase client instance for non-auth operations
+let supabaseInstance: SupabaseClient | null = null;
+
+const getSupabaseClient = () => {
+  if (!supabaseInstance) {
+    logger.info('supabase-client', '🔄 Initializing Supabase client');
+    supabaseInstance = createClient(
+      supabaseUrl,
+      supabaseAnonKey,
+      {
+        auth: {
+          flowType: 'pkce',
+          autoRefreshToken: true,
+          persistSession: true,
+          detectSessionInUrl: false,
+          storage: window.localStorage,
+          storageKey: 'supabase.auth.token',
+          debug: true
+        },
+        global: {
+          headers: {
+            'X-Client-Info': 'classroom-copilot',
+          },
+        },
+      }
+    );
+
+    // Log configuration in development
+    logger.info('supabase-client', '🔄 Supabase client configuration loaded', {
+      url: supabaseUrl,
+      hasKey: !!supabaseAnonKey,
+      storageKey: 'supabase.auth.token'
+    });
+  }
+  return supabaseInstance;
+};
+
+// Export a proxy that will lazy load the client when needed
+export const supabase = new Proxy({} as SupabaseClient, {
+  get: (target, prop) => {
+    const client = getSupabaseClient();
+    return client[prop as keyof SupabaseClient];
+  }
+});
+
diff --git a/src/sw.ts b/src/sw.ts
new file mode 100644
index 0000000..6156265
--- /dev/null
+++ b/src/sw.ts
@@ -0,0 +1,286 @@
+/* eslint-env serviceworker */
+/// <reference lib="webworker" />
+/// <reference types="vite/client" />
+import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching'
+import { NavigationRoute, registerRoute } from 'workbox-routing'
+import { NetworkFirst, CacheFirst, StaleWhileRevalidate } from 'workbox-strategies'
+import { CacheableResponsePlugin } from 'workbox-cacheable-response'
+import { ExpirationPlugin } from 'workbox-expiration'
+import { BackgroundSyncPlugin } from 'workbox-background-sync'
+
+declare const self: ServiceWorkerGlobalScope
+// Only apply service worker logic if on the app subdomain
+if (!self.location.hostname.startsWith('app.')) {
+  console.log('Skipping SW install: not on app domain');
+  self.skipWaiting();
+  self.registration?.unregister();
+}
+
+// Define cache names with domain awareness
+const CACHE_NAMES = {
+  static: `static-assets-v1-${self.location.hostname}`,
+  dynamic: `dynamic-content-v1-${self.location.hostname}`,
+  pages: `pages-v1-${self.location.hostname}`,
+  api: `api-v1-${self.location.hostname}`,
+  offline: `offline-v1-${self.location.hostname}`
+}
+
+// Clean up old caches
+cleanupOutdatedCaches()
+
+// Precache production assets only
+// Development resources are excluded by Vite's build configuration
+const manifest = self.__WB_MANIFEST;
+
+// Find the index.html entry from the manifest
+const manifestIndexEntry = manifest.find(entry => {
+  const url = typeof entry === 'string' ? entry : entry.url;
+  return url === 'index.html' || url === '/index.html';
+});
+
+// Create index entries using the revision from manifest if available
+const indexEntries = [
+  { 
+    url: '/index.html', 
+    revision: manifestIndexEntry && typeof manifestIndexEntry !== 'string' ? manifestIndexEntry.revision : null 
+  },
+  { 
+    url: '/', 
+    revision: manifestIndexEntry && typeof manifestIndexEntry !== 'string' ? manifestIndexEntry.revision : null 
+  }
+];
+
+// Filter out index.html from manifest and add absolute paths
+const manifestWithoutIndex = manifest.filter(entry => {
+  const url = typeof entry === 'string' ? entry : entry.url;
+  return url !== 'index.html' && url !== '/index.html';
+});
+
+// Combine entries and ensure absolute paths
+const manifestWithIndex = [
+  ...indexEntries,
+  ...manifestWithoutIndex.map(entry => {
+    if (typeof entry === 'string') {
+      return { url: entry.startsWith('/') ? entry : `/${entry}`, revision: null };
+    }
+    return {
+      ...entry,
+      url: entry.url.startsWith('/') ? entry.url : `/${entry.url}`
+    };
+  })
+];
+
+// Precache all assets
+precacheAndRoute(manifestWithIndex);
+
+// Create a background sync queue for failed requests
+const bgSyncPlugin = new BackgroundSyncPlugin('failedRequests', {
+  maxRetentionTime: 24 * 60 // Retry for up to 24 hours (specified in minutes)
+})
+
+// Navigation handler for offline usage
+const navigationHandler = async ({ request }: { request: Request }): Promise<Response> => {
+  try {
+    // Try network first
+    const response = await fetch(request);
+    if (response.ok) {
+      return response;
+    }
+  } catch (error) {
+    console.log('Navigation fetch failed:', error);
+  }
+
+  // If network fails, try cache
+  const cache = await caches.open(CACHE_NAMES.pages);
+  
+  // Try both root and /index.html paths
+  const cachedResponse = await cache.match(request) ||
+                        await cache.match('/') ||
+                        await cache.match('/index.html');
+                        
+  if (cachedResponse) {
+    return cachedResponse;
+  }
+
+  // If cache fails, try to fetch index.html directly
+  try {
+    const indexResponse = await fetch('/index.html');
+    if (indexResponse.ok) {
+      await cache.put('/index.html', indexResponse.clone());
+      return indexResponse;
+    }
+  } catch (error) {
+    console.error('Failed to fetch index.html:', error);
+  }
+
+  // If all else fails, return a basic offline page
+  return new Response(
+    '<html><body><h1>Offline</h1><p>Please check your internet connection.</p></body></html>',
+    {
+      headers: { 'Content-Type': 'text/html' }
+    }
+  );
+};
+
+// Register navigation route
+const navigationRoute = new NavigationRoute(navigationHandler, {
+  denylist: [
+    /^\/(auth|rest|api|whisperlive|tldraw|searxng-api)/,
+    /^\/@.*/,  // Block all /@vite/, /@react-refresh/, etc.
+    /^\/src\/.*/  // Block all /src/ paths
+  ]
+});
+registerRoute(navigationRoute);
+
+// Cache page navigations (html) with a Network First strategy
+registerRoute(
+  // Check to see if the request is a navigation to a new page
+  ({ request }) => request.mode === 'navigate',
+  new NetworkFirst({
+    // Put all cached files in a cache named 'pages'
+    cacheName: CACHE_NAMES.pages,
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200]
+      })
+    ],
+    networkTimeoutSeconds: 3
+  })
+)
+
+// Cache manifest and icons with a Stale While Revalidate strategy
+registerRoute(
+  ({ request }) => 
+    request.destination === 'manifest' || 
+    request.url.includes('/icons/'),
+  new StaleWhileRevalidate({
+    cacheName: 'manifest-and-icons',
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [200]
+      })
+    ]
+  })
+)
+
+// Cache other static assets with a Cache First strategy
+registerRoute(
+  ({ request }) => {
+    const destination = request.destination;
+    return destination === 'style' || 
+           destination === 'script' || 
+           destination === 'image' ||
+           destination === 'font'
+  },
+  new CacheFirst({
+    cacheName: CACHE_NAMES.static,
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [200]
+      }),
+      new ExpirationPlugin({
+        maxEntries: 60,
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+        purgeOnQuotaError: true
+      })
+    ]
+  })
+)
+
+// Cache API responses with a Network First strategy
+// TODO: This is a temporary solution to cache API responses. We should move to a more efficient strategy in the future using our new domain names search.classroomcopilot.ai and api.classroomcopilot.ai
+registerRoute(
+  ({ url }) => url.pathname.startsWith('/api/'),
+  new NetworkFirst({
+    cacheName: CACHE_NAMES.api,
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [200]
+      }),
+      new ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 5 * 60 // 5 minutes
+      }),
+      bgSyncPlugin
+    ]
+  })
+)
+
+// Cache SearXNG API with Network First strategy
+registerRoute(
+  ({ url }) => url.pathname.startsWith('/searxng-api'),
+  new NetworkFirst({
+    cacheName: CACHE_NAMES.api,
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [200]
+      }),
+      new ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 60 * 60 // 1 hour
+      }),
+      bgSyncPlugin
+    ]
+  })
+)
+
+// Cache SearXNG static assets
+registerRoute(
+  ({ url }) => url.pathname.startsWith('/searxng-api/static'),
+  new CacheFirst({
+    cacheName: CACHE_NAMES.static,
+    plugins: [
+      new CacheableResponsePlugin({
+        statuses: [200]
+      }),
+      new ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 30 * 24 * 60 * 60 // 30 days
+      })
+    ]
+  })
+)
+
+// This allows the web app to trigger skipWaiting via
+// registration.waiting.postMessage({type: 'SKIP_WAITING'})
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting()
+  }
+})
+
+// Handle offline fallback
+self.addEventListener('install', () => {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    Promise.all([
+      // Enable navigation preload if available
+      self.registration.navigationPreload?.enable(),
+      // Delete old caches
+      caches.keys().then((cacheNames) => {
+        return Promise.all(
+          cacheNames
+            .filter((cacheName) => !Object.values(CACHE_NAMES).includes(cacheName))
+            .map((cacheName) => caches.delete(cacheName))
+        )
+      }),
+      // Tell the active service worker to take control of the page immediately
+      self.clients.claim()
+    ])
+  )
+})
+
+// Handle errors
+self.addEventListener('error', (event) => {
+  console.error('[Service Worker] Error:', event.error)
+  // You could send this to your error tracking service
+})
+
+self.addEventListener('unhandledrejection', (event) => {
+  console.error('[Service Worker] Unhandled rejection:', event.reason)
+  // You could send this to your error tracking service
+}) 
\ No newline at end of file
diff --git a/src/types/api.ts b/src/types/api.ts
new file mode 100644
index 0000000..31ec8d5
--- /dev/null
+++ b/src/types/api.ts
@@ -0,0 +1,38 @@
+import { CCNodeTypes } from '../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+
+export interface NodeResponse {
+    node_data: {
+        __primarylabel__: keyof CCNodeTypes;
+        unique_id: string;
+        title?: string;
+        name?: string;
+        tldraw_snapshot: string;
+        created: string;
+        merged: string;
+        [key: string]: unknown;
+    };
+}
+
+
+export interface ConnectedNodeResponse {
+    id: string;
+    tldraw_snapshot: string;
+    label: string;
+    type: string;
+}
+
+export interface RelationshipData {
+    start_node: NodeResponse['node_data'];
+    end_node: NodeResponse['node_data'];
+    relationship_type: string;
+    relationship_properties: {
+        [key: string]: unknown;
+    };
+}
+
+export interface ConnectedNodesResponse {
+    status: string;
+    main_node: NodeResponse;
+    connected_nodes: ConnectedNodeResponse[];
+    relationships: RelationshipData[];
+} 
\ No newline at end of file
diff --git a/src/types/graph-shape.ts b/src/types/graph-shape.ts
new file mode 100644
index 0000000..467b8ec
--- /dev/null
+++ b/src/types/graph-shape.ts
@@ -0,0 +1,22 @@
+import { TLShapeId } from '@tldraw/tldraw';
+
+export type ShapeState = {
+    parentId: TLShapeId | null;
+    isPageChild: boolean;
+    hasChildren: boolean | null;
+    bindings: Record<string, unknown> | null;
+};
+
+export type NodeData = {
+    title: string;
+    w: number;
+    h: number;
+    state: ShapeState | null;
+    headerColor: string;
+    backgroundColor: string;
+    isLocked: boolean;
+    __primarylabel__: string;
+    unique_id: string;
+    tldraw_snapshot: string;
+    [key: string]: string | number | boolean | null | ShapeState | Record<string, unknown> | undefined;
+} 
\ No newline at end of file
diff --git a/src/types/navigation.ts b/src/types/navigation.ts
new file mode 100644
index 0000000..a9b7717
--- /dev/null
+++ b/src/types/navigation.ts
@@ -0,0 +1,343 @@
+import { CalendarNode, WorkerNode } from '../contexts/NeoUserContext';
+import { logger } from '../debugConfig';
+
+// Main Context Types
+export type MainContext = 'profile' | 'institute';
+
+// Profile Context Types
+export type ProfileContext = 'profile' | 'calendar' | 'teaching';
+
+// Extended Context Types
+export type UserExtendedContext = 'overview' | 'settings' | 'history' | 'journal' | 'planner';
+export type CalendarExtendedContext = 'overview' | 'day' | 'week' | 'month' | 'year';
+export type TeacherExtendedContext = 
+  | 'overview' 
+  | 'timetable' 
+  | 'classes' 
+  | 'lessons' 
+  | 'journal' 
+  | 'planner';
+export type SchoolExtendedContext = 'overview' | 'departments' | 'staff';
+export type DepartmentExtendedContext = 'overview' | 'teachers' | 'subjects';
+export type ClassExtendedContext = 'overview' | 'students' | 'timetable';
+
+// Combined Extended Context Type
+export type ExtendedContext = 
+  | UserExtendedContext 
+  | CalendarExtendedContext 
+  | TeacherExtendedContext 
+  | SchoolExtendedContext 
+  | DepartmentExtendedContext 
+  | ClassExtendedContext;
+
+// View Definition
+export interface ViewDefinition {
+  id: ExtendedContext;
+  icon: string;
+  label: string;
+  description: string;
+}
+
+// Institute Context Types
+export type InstituteContext = 'school' | 'department' | 'class';
+
+// View Context Types
+export type ViewContext = 
+  | 'overview' 
+  | 'settings' 
+  | 'history' 
+  | 'journal' 
+  | 'planner'
+  | 'day' 
+  | 'week' 
+  | 'month' 
+  | 'year' 
+  | 'timetable' 
+  | 'classes' 
+  | 'lessons'
+  | 'departments' 
+  | 'staff'
+  | 'teachers' 
+  | 'subjects'
+  | 'students';
+
+// Combined Context Type
+export type BaseContext = ProfileContext | InstituteContext;
+
+// Combined Node Context Type
+export type NodeContext = BaseContext | ExtendedContext;
+
+// Navigation History
+export interface NavigationHistory {
+  nodes: NavigationNode[];
+  currentIndex: number;
+}
+
+// Helper function to get current node from history
+export const getCurrentHistoryNode = (history: NavigationHistory): NavigationNode | null => {
+    const node = history.currentIndex === -1 || !history.nodes.length ? null : history.nodes[history.currentIndex];
+    logger.debug('history-management', '📍 Getting current history node', {
+        currentIndex: history.currentIndex,
+        totalNodes: history.nodes.length,
+        node
+    });
+    return node;
+};
+
+// Helper function to add node to history
+export const addToHistory = (
+    history: NavigationHistory, 
+    node: NavigationNode
+): NavigationHistory => {
+    logger.debug('history-management', '➕ Adding node to history', {
+        currentIndex: history.currentIndex,
+        newNode: node,
+        existingNodes: history.nodes.length
+    });
+    
+    const newNodes = [...history.nodes.slice(0, history.currentIndex + 1), node];
+    const newHistory = {
+        nodes: newNodes,
+        currentIndex: newNodes.length - 1
+    };
+    
+    logger.debug('history-management', '✅ History updated', {
+        previousState: history,
+        newState: newHistory
+    });
+    
+    return newHistory;
+};
+
+// Helper function to navigate history
+export const navigateHistory = (
+    history: NavigationHistory,
+    index: number
+): NavigationHistory => {
+    logger.debug('history-management', '🔄 Navigating history', {
+        currentIndex: history.currentIndex,
+        targetIndex: index,
+        totalNodes: history.nodes.length
+    });
+
+    if (index < 0 || index >= history.nodes.length) {
+        logger.warn('history-management', '⚠️ Invalid history navigation index', {
+            requestedIndex: index,
+            historyLength: history.nodes.length
+        });
+        return history;
+    }
+
+    const newHistory = {
+        nodes: history.nodes,
+        currentIndex: index
+    };
+
+    logger.debug('history-management', '✅ History navigation complete', {
+        from: history.currentIndex,
+        to: index,
+        node: history.nodes[index]
+    });
+
+    return newHistory;
+};
+
+// Context State Interface
+export interface NavigationContextState {
+  main: MainContext;
+  base: BaseContext;
+  node: NavigationNode | null;
+  history: NavigationHistory;
+}
+
+// Type Guards
+export const isProfileContext = (context: BaseContext): context is ProfileContext => {
+  return ['profile', 'calendar', 'teaching'].includes(context);
+};
+
+export const isInstituteContext = (context: BaseContext): context is InstituteContext => {
+  return ['school', 'department', 'class'].includes(context);
+};
+
+// Database selector
+export const getContextDatabase = (context: NavigationContextState, userDbName: string | null, workerDbName: string | null): string => {
+    logger.debug('navigation-context', '🔄 Getting context database', {
+        mainContext: context.main,
+        baseContext: context.base,
+        userDbName,
+        workerDbName
+    });
+
+    if (context.main === 'profile') {
+        if (!userDbName) {
+            logger.error('navigation-context', '❌ Missing user database name for profile context');
+            throw new Error('User database name is required for profile context');
+        }
+        logger.debug('navigation-context', '✅ Using user database', { dbName: userDbName });
+        return userDbName;
+    } else {
+        if (!workerDbName) {
+            logger.error('navigation-context', '❌ Missing worker database name for institute context');
+            throw new Error('Worker database name is required for institute context');
+        }
+        logger.debug('navigation-context', '✅ Using worker database', { dbName: workerDbName });
+        return workerDbName;
+    }
+};
+
+// Context Definition Types
+export interface ContextDefinition {
+  id: BaseContext;
+  icon: string;
+  label: string;
+  description: string;
+  defaultNodeId: string;
+  views: ViewDefinition[];
+}
+
+// Navigation Node Types
+export interface NavigationNode {
+  id: string;
+  tldraw_snapshot: string;
+  label: string;
+  type: string;
+  context?: NavigationContextState;
+  data?: {
+    unique_id: string;
+    tldraw_snapshot: string;
+    title?: string;
+    name?: string;
+    [key: string]: unknown;
+  };
+}
+
+// Navigation State Interface
+export interface NavigationState {
+  context: NavigationContextState;
+  isLoading: boolean;
+  error: string | null;
+}
+
+// Add UnifiedContextSwitch interface
+export interface UnifiedContextSwitch {
+    main?: MainContext;
+    base?: BaseContext;
+    extended?: ExtendedContext;
+    skipBaseContextLoad?: boolean;
+}
+
+// Navigation Actions Interface
+export interface NavigationActions {
+    // Unified Context Switch
+    switchContext: (contextSwitch: UnifiedContextSwitch, userDbName: string | null, workerDbName: string | null) => Promise<void>;
+    
+    // Context Navigation
+    setMainContext: (context: MainContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
+    setBaseContext: (context: BaseContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
+    setExtendedContext: (context: ExtendedContext, userDbName: string | null, workerDbName: string | null) => Promise<void>;
+    
+    // Node Navigation
+    navigate: (nodeId: string, dbName: string) => Promise<void>;
+    navigateToNode: (node: NavigationNode, userDbName: string | null, workerDbName: string | null) => Promise<void>;
+    
+    // History Navigation
+    goBack: () => void;
+    goForward: () => void;
+    
+    // Utility Methods
+    refreshNavigationState: (userDbName: string | null, workerDbName: string | null) => Promise<void>;
+}
+
+export type NavigationStore = NavigationState & NavigationActions;
+
+// Context Props Interfaces
+export interface CalendarContextProps {
+  navigateToDay: (id: string) => Promise<void>;
+  navigateToWeek: (id: string) => Promise<void>;
+  navigateToMonth: (id: string) => Promise<void>;
+  navigateToYear: (id: string) => Promise<void>;
+  currentCalendarNode: CalendarNode | null;
+}
+
+export interface WorkerContextProps {
+  navigateToTimetable: (id: string) => Promise<void>;
+  navigateToClass: (id: string) => Promise<void>;
+  navigateToLesson: (id: string) => Promise<void>;
+  navigateToJournal: (id: string) => Promise<void>;
+  navigateToPlanner: (id: string) => Promise<void>;
+  currentWorkerNode: WorkerNode | null;
+}
+
+export interface StaticNavigationNode extends NavigationNode {
+  isStatic: true;
+  order: number;
+  section: string;
+}
+
+// Calendar Structure Types
+export interface CalendarDay {
+  id: string;
+  date: string;
+  title: string;
+}
+
+export interface CalendarWeek {
+  id: string;
+  title: string;
+  days: { id: string }[];
+  startDate: string;
+  endDate: string;
+}
+
+export interface CalendarMonth {
+  id: string;
+  title: string;
+  days: { id: string }[];
+  weeks: { id: string }[];
+  year: string;
+  month: string;
+}
+
+export interface CalendarYear {
+  id: string;
+  title: string;
+  months: { id: string }[];
+  year: string;
+}
+
+export interface CalendarStructure {
+  currentDay: string;
+  days: Record<string, CalendarDay>;
+  weeks: Record<string, CalendarWeek>;
+  months: Record<string, CalendarMonth>;
+  years: CalendarYear[];
+}
+
+// Worker Structure Types
+export interface TimetableEntry {
+  id: string;
+  title: string;
+  type: string;
+  startTime: string;
+  endTime: string;
+}
+
+export interface ClassEntry {
+  id: string;
+  title: string;
+  type: string;
+}
+
+export interface LessonEntry {
+  id: string;
+  title: string;
+  type: string;
+}
+
+export interface WorkerStructure {
+  timetables: Record<string, TimetableEntry[]>;
+  classes: Record<string, ClassEntry[]>;
+  lessons: Record<string, LessonEntry[]>;
+  journals: Record<string, { id: string; title: string }[]>;
+  planners: Record<string, { id: string; title: string }[]>;
+} 
\ No newline at end of file
diff --git a/src/types/nodes.ts b/src/types/nodes.ts
new file mode 100644
index 0000000..976c388
--- /dev/null
+++ b/src/types/nodes.ts
@@ -0,0 +1,63 @@
+import { CCNodeTypes } from '../utils/tldraw/cc-base/cc-graph/cc-graph-types';
+import { NavigationNode } from './navigation';
+
+// Node Type Groups
+export type CalendarNodeType = 
+  | 'Calendar'
+  | 'CalendarYear'
+  | 'CalendarMonth'
+  | 'CalendarWeek'
+  | 'CalendarDay';
+
+export type WorkerNodeType = 
+  | 'Teacher'
+  | 'UserTeacherTimetable'
+  | 'UserTimetableLesson';
+
+// Node Types
+export type CalendarNode = NavigationNode & {
+  type: CalendarNodeType;
+  data: CCNodeTypes[CalendarNodeType]['props'];
+};
+
+export type WorkerNode = NavigationNode & {
+  type: WorkerNodeType;
+  data: CCNodeTypes[WorkerNodeType]['props'];
+};
+
+// Type Guards
+export const isCalendarNodeType = (type: string): type is CalendarNodeType => {
+  return [
+    'Calendar',
+    'CalendarYear',
+    'CalendarMonth',
+    'CalendarWeek',
+    'CalendarDay'
+  ].includes(type);
+};
+
+export const isWorkerNodeType = (type: string): type is WorkerNodeType => {
+  return [
+    'Teacher',
+    'UserTeacherTimetable',
+    'UserTimetableLesson'
+  ].includes(type);
+};
+
+export const isCalendarNode = (node: NavigationNode): node is CalendarNode => {
+  return isCalendarNodeType(node.type);
+};
+
+export const isWorkerNode = (node: NavigationNode): node is WorkerNode => {
+  return isWorkerNodeType(node.type);
+};
+
+// Backend Response Types
+export interface ConnectedNodesResponse {
+  calendar?: CCNodeTypes['Calendar']['props'];
+  teacher?: CCNodeTypes['Teacher']['props'];
+}
+
+export interface UserNodesResponse {
+  connectedNodes: ConnectedNodesResponse;
+} 
\ No newline at end of file
diff --git a/src/utils/.DS_Store b/src/utils/.DS_Store
new file mode 100644
index 0000000..f05d069
Binary files /dev/null and b/src/utils/.DS_Store differ
diff --git a/src/utils/flow/graph/NodeTypes.tsx b/src/utils/flow/graph/NodeTypes.tsx
new file mode 100644
index 0000000..4f8239f
--- /dev/null
+++ b/src/utils/flow/graph/NodeTypes.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { Handle, Position, NodeProps } from '@xyflow/react';
+
+interface ExtendedNodeProps extends NodeProps {
+  layoutDirection: 'TB' | 'LR';
+}
+
+const DefaultNode: React.FC<ExtendedNodeProps> = ({ data, layoutDirection }) => {
+  const isHorizontal = layoutDirection === 'LR';
+  return (
+    <div style={{ padding: 10, border: '1px solid #ddd', borderRadius: 5, backgroundColor: '#f0f0f0', minWidth: 150 }}>
+      <div style={{ fontWeight: 'bold', marginBottom: 5 }}>{data.label as string}</div>
+      {data && Object.entries(data).map(([key, value]) => (
+        key !== 'label' && <div key={key}><strong>{key}:</strong> {value as string}</div>
+      ))}
+      <Handle type="source" position={isHorizontal ? Position.Right : Position.Bottom} style={{ background: '#555' }} />
+      <Handle type="target" position={isHorizontal ? Position.Left : Position.Top} style={{ background: '#555' }} />
+    </div>
+  );
+};
+
+const UserNode: React.FC<ExtendedNodeProps> = ({ data, layoutDirection }) => (
+  <DefaultNode
+    data={{
+      label: data.user_name as string,
+      'User ID': data.user_id as string,
+      'User Email': data.user_email as string,
+      'User Type': data.user_type as string,
+      'User DB ID': data.worker_db_name as string,
+    }}
+    id={data.user_id as string}
+    type='userNode'
+    dragging={false}
+    zIndex={1}
+    layoutDirection={layoutDirection}
+    isConnectable={false}
+    positionAbsoluteX={0}
+    positionAbsoluteY={0}
+    draggable={true}
+    selected={false}
+    selectable={true}
+    deletable={true}
+  />
+);
+
+const TeacherNode: React.FC<ExtendedNodeProps> = ({ data, layoutDirection }) => (
+  <DefaultNode
+    data={{
+      label: data.teacher_name_formal,
+      'Teacher ID': data.teacher_code,
+      'Teacher Email': data.teacher_email,
+    }}
+    id={data.unique_id as string}
+    type='userNode'
+    dragging={false}
+    zIndex={1}
+    layoutDirection={layoutDirection}
+    isConnectable={false}
+    positionAbsoluteX={0}
+    positionAbsoluteY={0}
+    draggable={true}
+    selected={false}
+    selectable={true}
+    deletable={true}
+  />
+);
+
+const TeacherTimetableNode: React.FC<ExtendedNodeProps> = ({ data, layoutDirection }) => (
+  <DefaultNode
+    data={{
+      label: data.label,
+    }}
+    id={data.unique_id as string}
+    type='userNode'
+    dragging={false}
+    zIndex={1}
+    layoutDirection={layoutDirection}
+    isConnectable={false}
+    positionAbsoluteX={0}
+    positionAbsoluteY={0}
+    draggable={true}
+    selected={false}
+    selectable={true}
+    deletable={true}
+  />
+);
+
+const SubjectClassNode: React.FC<ExtendedNodeProps> = ({ data, layoutDirection }) => (
+  <DefaultNode
+    data={{
+      label: data.subject_class_code,
+      'Year Group': data.year_group,
+      'Subject': data.subject,
+      'Subject Code': data.subject_code,
+    }}
+    id={data.unique_id as string}
+    type='userNode'
+    dragging={false}
+    zIndex={1}
+    layoutDirection={layoutDirection}
+    isConnectable={false}
+    positionAbsoluteX={0}
+    positionAbsoluteY={0}
+    draggable={true}
+    selected={false}
+    selectable={true}
+    deletable={true}
+  />
+);
+
+export const nodeTypes = {
+  default: DefaultNode,
+  userNode: UserNode,
+  teacherNode: TeacherNode,
+  teacherTimetableNode: TeacherTimetableNode,
+  subjectClassNode: SubjectClassNode,
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/assets.ts b/src/utils/tldraw/assets.ts
new file mode 100644
index 0000000..e558392
--- /dev/null
+++ b/src/utils/tldraw/assets.ts
@@ -0,0 +1,126 @@
+import { TLUiAssetUrlOverrides } from '@tldraw/tldraw';
+
+// Custom asset URLs
+export const customAssets: TLUiAssetUrlOverrides = {
+    icons: {
+        'sticker-icon': '/icons/sticker-tool.svg'
+    }
+};
+
+// Blank canvas snapshot template
+export const blankCanvasSnapshot = {
+    store: {
+        "document:document": {
+            gridSize: 10,
+            name: "",
+            meta: {},
+            id: "document:document",
+            typeName: "document"
+        },
+        "page:page": {
+            meta: {},
+            id: "page:page",
+            name: "Page 1",
+            index: "a1",
+            typeName: "page"
+        }
+    },
+    schema: {
+        schemaVersion: 2 as const,
+        storeVersion: 4,
+        sequences: {
+            "com.tldraw.store":4,
+            "com.tldraw.asset":1,
+            "com.tldraw.camera":1,
+            "com.tldraw.document":2,
+            "com.tldraw.instance":25,
+            "com.tldraw.instance_page_state":5,
+            "com.tldraw.page":1,
+            "com.tldraw.instance_presence":5,
+            "com.tldraw.pointer":1,
+            "com.tldraw.shape":4,
+            "com.tldraw.asset.bookmark":2,
+            "com.tldraw.asset.image":5,
+            "com.tldraw.asset.video":5,
+            "com.tldraw.shape.arrow":5,
+            "com.tldraw.shape.bookmark":2,
+            "com.tldraw.shape.draw":2,
+            "com.tldraw.shape.embed":4,
+            "com.tldraw.shape.frame":0,
+            "com.tldraw.shape.geo":9,
+            "com.tldraw.shape.group":0,
+            "com.tldraw.shape.highlight":1,
+            "com.tldraw.shape.image":4,
+            "com.tldraw.shape.line":5,
+            "com.tldraw.shape.note":8,
+            "com.tldraw.shape.text":2,
+            "com.tldraw.shape.video":2,
+            "com.tldraw.shape.youtube-embed":0,
+            "com.tldraw.shape.calendar":0,
+            "com.tldraw.shape.microphone":1,
+            "com.tldraw.shape.transcriptionText":0,
+            "com.tldraw.shape.slide":0,"com.tldraw.shape.slideshow":0,
+            "com.tldraw.shape.user_node":1,
+            "com.tldraw.shape.developer_node":1,
+            "com.tldraw.shape.student_node":1,
+            "com.tldraw.shape.teacher_node":1,
+            "com.tldraw.shape.calendar_node":1,
+            "com.tldraw.shape.calendar_year_node":1,
+            "com.tldraw.shape.calendar_month_node":1,
+            "com.tldraw.shape.calendar_week_node":1,
+            "com.tldraw.shape.calendar_day_node":1,
+            "com.tldraw.shape.calendar_time_chunk_node":1,
+            "com.tldraw.shape.teacher_timetable_node":1,
+            "com.tldraw.shape.timetable_lesson_node":1,
+            "com.tldraw.shape.planned_lesson_node":1,
+            "com.tldraw.shape.pastoral_structure_node":1,
+            "com.tldraw.shape.year_group_node":1,
+            "com.tldraw.shape.curriculum_structure_node":1,
+            "com.tldraw.shape.key_stage_node":1,
+            "com.tldraw.shape.key_stage_syllabus_node":1,
+            "com.tldraw.shape.year_group_syllabus_node":1,
+            "com.tldraw.shape.subject_node":1,
+            "com.tldraw.shape.topic_node":1,
+            "com.tldraw.shape.topic_lesson_node":1,
+            "com.tldraw.shape.learning_statement_node":1,
+            "com.tldraw.shape.science_lab_node":1,
+            "com.tldraw.shape.school_timetable_node":1,
+            "com.tldraw.shape.academic_year_node":1,
+            "com.tldraw.shape.academic_term_node":1,
+            "com.tldraw.shape.academic_week_node":1,
+            "com.tldraw.shape.academic_day_node":1,
+            "com.tldraw.shape.academic_period_node":1,
+            "com.tldraw.shape.registration_period_node":1,
+            "com.tldraw.shape.school_node":1,
+            "com.tldraw.shape.department_node":1,
+            "com.tldraw.shape.room_node":1,
+            "com.tldraw.shape.subject_class_node":1,
+            "com.tldraw.shape.general_relationship":1,
+            "com.tldraw.binding.arrow":0,
+            "com.tldraw.binding.slide-layout":0
+        },
+        recordVersions: {
+            asset: { version: 1, subTypeKey: "type", subTypeVersions: {} },
+            camera: { version: 1 },
+            document: { version: 2 },
+            instance: { version: 21 },
+            instance_page_state: { version: 5 },
+            page: { version: 1 },
+            shape: { version: 3, subTypeKey: "type", subTypeVersions: {} },
+            instance_presence: { version: 5 },
+            pointer: { version: 1 }
+        }
+    },
+    rootShapeIds: [],
+    bindings: {},
+    assets: {},
+    session: {
+        version: 0,
+        currentPageId: "page:page",
+        pageStates: [{
+            pageId: "page:page",
+            camera: { x: 0, y: 0, z: 1 },
+            selectedShapeIds: []
+        }]
+    }
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/bindings.ts b/src/utils/tldraw/bindings.ts
new file mode 100644
index 0000000..60be741
--- /dev/null
+++ b/src/utils/tldraw/bindings.ts
@@ -0,0 +1,14 @@
+// TLDraw bindings
+import { TLAnyBindingUtilConstructor } from '@tldraw/tldraw'
+import { CCSlideLayoutBindingUtil } from './cc-base/cc-slideshow/CCSlideLayoutBindingUtil'
+import { ccBindingProps } from './cc-base/cc-props'
+
+// Export CC bindings
+export { ccBindingProps }
+
+// Define all binding utils in a single object for easy maintenance
+export const BindingUtils = {
+	CCSlideLayout: CCSlideLayoutBindingUtil,
+}
+
+export const allBindingUtils: TLAnyBindingUtilConstructor[] = Object.values(BindingUtils)
diff --git a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
new file mode 100644
index 0000000..24a2e03
--- /dev/null
+++ b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
@@ -0,0 +1,138 @@
+import React from 'react'
+import { BaseBoxShapeUtil, HTMLContainer, toDomPrecision } from '@tldraw/tldraw'
+import { CCBaseShape } from './cc-types'
+import { CC_BASE_STYLE_CONSTANTS } from './cc-styles'
+import { logger } from '../../../debugConfig'
+
+export interface ToolbarItem {
+  id: string
+  icon: string | React.ReactNode
+  label: string
+  onClick: (e: React.MouseEvent, shape: CCBaseShape) => void
+  isActive?: boolean
+}
+
+export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShapeUtil<T> {
+  abstract renderContent: (shape: T) => React.ReactElement
+
+  indicator(shape: T) {
+    return (
+      <rect
+        width={shape.props.w}
+        height={shape.props.h}
+        fill="none"
+        rx={CC_BASE_STYLE_CONSTANTS.CONTAINER.borderRadius}
+        stroke={CC_BASE_STYLE_CONSTANTS.COLORS.border}
+        strokeWidth={CC_BASE_STYLE_CONSTANTS.CONTAINER.borderWidth}
+      />
+    )
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getToolbarItems(shape: T): ToolbarItem[] {
+    return []
+  }
+
+  onAfterCreate(shape: T) {
+    logger.info('cc-base-shape-util', 'onAfterCreate', shape)
+    return shape
+  }
+
+  component(shape: T) {
+    const {
+      props: { w, h, isLocked },
+    } = shape
+    const toolbarItems = this.getToolbarItems(shape)
+    
+    return (
+      <HTMLContainer
+        id={shape.id}
+        style={{
+          width: toDomPrecision(w),
+          height: toDomPrecision(h),
+          backgroundColor: shape.props.headerColor,
+          borderRadius: CC_BASE_STYLE_CONSTANTS.CONTAINER.borderRadius,
+          boxShadow: CC_BASE_STYLE_CONSTANTS.CONTAINER.boxShadow,
+          overflow: 'hidden',
+          position: 'relative',
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            backgroundColor: shape.props.headerColor,
+            padding: CC_BASE_STYLE_CONSTANTS.HEADER.padding,
+            height: CC_BASE_STYLE_CONSTANTS.HEADER.height,
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            cursor: isLocked ? 'not-allowed' : 'move',
+            pointerEvents: 'all',
+            position: 'relative',
+            zIndex: 1,
+          }}
+        >
+          <span style={{ color: 'white', fontWeight: 'bold' }}>{shape.props.title}</span>
+          <div style={{ display: 'flex', gap: '4px', alignItems: 'center', pointerEvents: 'all' }}>
+            {toolbarItems.map((item) => (
+              <button
+                key={item.id}
+                title={item.label}
+                onClick={(e) => {
+                  logger.info('cc-base-shape-util', 'toolbar item clicked', item.id)
+                  e.preventDefault()
+                  e.stopPropagation()
+                  item.onClick(e, shape)
+                }}
+                onPointerDown={(e) => {
+                  logger.info('cc-base-shape-util', 'toolbar item pointer down', item.id)
+                  e.preventDefault()
+                  e.stopPropagation()
+                }}
+                style={{
+                  background: 'transparent',
+                  border: 'none',
+                  padding: '4px',
+                  cursor: 'pointer',
+                  color: 'white',
+                  opacity: item.isActive ? 1 : 0.7,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  pointerEvents: 'all',
+                  fontSize: '16px',
+                  width: '24px',
+                  height: '24px',
+                  zIndex: 100,
+                  userSelect: 'none',
+                  position: 'relative',
+                  touchAction: 'none',
+                }}
+              >
+                <div style={{ pointerEvents: 'none' }}>
+                  {item.icon}
+                </div>
+              </button>
+            ))}
+            {isLocked && <span style={{ color: 'white' }}>🔒</span>}
+          </div>
+        </div>
+        {/* Content */}
+        <div 
+          style={{
+            position: 'absolute',
+            top: CC_BASE_STYLE_CONSTANTS.HEADER.height,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            overflow: 'auto',
+            padding: CC_BASE_STYLE_CONSTANTS.CONTENT.padding,
+            backgroundColor: shape.props.backgroundColor,
+          }}
+        >
+          {this.renderContent(shape)}
+        </div>
+      </HTMLContainer>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-calendar/CCCalendarShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-calendar/CCCalendarShapeUtil.tsx
new file mode 100644
index 0000000..550c948
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-calendar/CCCalendarShapeUtil.tsx
@@ -0,0 +1,78 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { ccShapeProps, getDefaultCCCalendarProps } from '../cc-props'
+import { ccShapeMigrations } from '../cc-migrations'
+import { Rectangle2d } from 'tldraw'
+import { CalendarComponent, CalendarViewType } from './CalendarComponent'
+import { TeacherTimetableEvent } from '../../../../services/graph/timetableNeoDBService'
+
+export interface CCCalendarShape extends CCBaseShape {
+  type: 'cc-calendar'
+  props: CCBaseShape['props'] & {
+    date: string
+    selectedDate: string
+    view: CalendarViewType
+    events: TeacherTimetableEvent[]
+  }
+}
+
+export class CCCalendarShapeUtil extends CCBaseShapeUtil<CCCalendarShape> {
+  static override type = 'cc-calendar' as const;
+  static override props = ccShapeProps.calendar;
+  static override migrations = ccShapeMigrations.calendar;
+
+  override getDefaultProps(): CCCalendarShape['props'] {
+    return getDefaultCCCalendarProps() as CCCalendarShape['props'];
+  }
+
+  override isAspectRatioLocked = () => true
+  override canResize = () => true
+  override canBind = () => false
+
+  onCreate = (shape: CCCalendarShape) => {
+    // Force a resize after creation to ensure calendar renders correctly
+    setTimeout(() => {
+      const element = document.getElementById(shape.id)
+      if (element) {
+        const calendar = element.querySelector('.fc') as HTMLElement
+        if (calendar) {
+          calendar.style.height = `${shape.props.h}px`
+        }
+      }
+    }, 0)
+    
+    return {
+      ...shape,
+      props: this.getDefaultProps(),
+    }
+  }
+
+  override renderContent = (shape: CCCalendarShape) => {
+    return <CalendarComponent shape={shape} />
+  }
+
+  override getGeometry(shape: CCCalendarShape) {
+    return new Rectangle2d({
+      width: shape.props.w,
+      height: shape.props.h,
+      isFilled: true,
+    })
+  }
+
+  override onResize = (
+    shape: CCCalendarShape,
+    info: { initialShape: CCCalendarShape; scaleX: number; scaleY: number }
+  ) => {
+    const { initialShape, scaleX, scaleY } = info
+    const newW = Math.max(300, Math.round(initialShape.props.w * scaleX))
+    const newH = Math.max(200, Math.round(initialShape.props.h * scaleY))
+
+    return {
+      props: {
+        ...shape.props,
+        w: newW,
+        h: newH,
+      },
+    }
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-calendar/CalendarComponent.tsx b/src/utils/tldraw/cc-base/cc-calendar/CalendarComponent.tsx
new file mode 100644
index 0000000..b7953b8
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-calendar/CalendarComponent.tsx
@@ -0,0 +1,274 @@
+import React, { useCallback, useEffect, useState, useRef } from 'react'
+import { HTMLContainer, useEditor, useDialogs } from '@tldraw/tldraw'
+import FullCalendar from '@fullcalendar/react'
+import { DateSelectArg, ViewMountArg } from '@fullcalendar/core'
+import { useNeoUser } from '../../../../contexts/NeoUserContext'
+import { LoadingState } from '../../../../services/tldraw/snapshotService'
+import { TimetableNeoDBService, TeacherTimetableEvent } from '../../../../services/graph/timetableNeoDBService'
+import { useCalendarOptions } from './useCalendarOptions'
+import { openTldrawFile } from './utils'
+import { CC_BASE_STYLE_CONSTANTS } from '../cc-styles'
+import { CCCalendarShape } from './CCCalendarShapeUtil'
+import { ClassFilterDialog, ViewMenuDialog, EventDetailsDialog } from './CalendarDialogs'
+
+export type CalendarViewType = 'dayGridMonth' | 'timeGridWeek' | 'timeGridDay' | 'listYear' | 'listMonth' | 'listWeek' | 'listDay' | 'timeGridYear' | 'timeGridMonth'
+
+interface CalendarComponentProps {
+  shape: CCCalendarShape
+}
+
+export const CalendarComponent: React.FC<CalendarComponentProps> = ({ shape }) => {
+  const editor = useEditor()
+  const { addDialog } = useDialogs()
+  const { workerNode, isLoading, error, workerDbName } = useNeoUser()
+  const [events, setEvents] = useState<TeacherTimetableEvent[]>(shape.props.events)
+  const calendarRef = useRef<FullCalendar>(null)
+  const lastFetchRef = useRef<number>(0)
+  const timeoutIdRef = useRef<ReturnType<typeof setTimeout>>()
+  const [selectedClasses, setSelectedClasses] = useState<string[]>([])
+  const [subjectClasses, setSubjectClasses] = useState<string[]>([])
+  const [fileLoadingState, setFileLoadingState] = useState<LoadingState>({
+    status: 'ready',
+    error: ''
+  })
+
+  const debouncedUpdateSize = useCallback(() => {
+    clearTimeout(timeoutIdRef.current);
+    timeoutIdRef.current = setTimeout(() => {
+      if (calendarRef.current) {
+        calendarRef.current.getApi().updateSize();
+      }
+    }, 200);
+  }, [calendarRef]);
+
+  const loadEvents = useCallback(async () => {
+    const now = Date.now()
+    if (now - lastFetchRef.current < 60000) {
+      return;
+    }
+    lastFetchRef.current = now
+
+    if ((events && events.length > 0) || isLoading || error || !workerNode?.nodeData) {
+      if (isLoading || error || !workerNode?.nodeData) {
+        console.error('Unable to fetch events: NeoUser context not ready');
+      }
+      return;
+    }
+
+    try {
+      const fetchedEvents = await TimetableNeoDBService.fetchTeacherTimetableEvents(
+        workerNode.nodeData.unique_id,
+        workerDbName || ''
+      );
+
+      setEvents(fetchedEvents);
+      
+      const range = TimetableNeoDBService.getEventRange(fetchedEvents);
+      if (calendarRef.current) {
+        const api = calendarRef.current.getApi();
+        if (range.start && range.end) {
+          api.setOption('validRange', {
+            start: range.start,
+            end: range.end
+          });
+        } else {
+          api.setOption('validRange', undefined);
+        }
+      }
+
+      editor.updateShape({
+        id: shape.id,
+        type: 'cc-calendar',
+        props: { ...shape.props, events: fetchedEvents }
+      })
+    } catch (error) {
+      console.error('Error fetching calendar events:', error)
+    }
+  }, [editor, workerNode, workerDbName, isLoading, error, events, shape.id, shape.props])
+
+  useEffect(() => {
+    debouncedUpdateSize();
+  }, [debouncedUpdateSize]);
+
+  useEffect(() => {
+    loadEvents();
+  }, [loadEvents]);
+
+  const handleDateSelect = useCallback((arg: DateSelectArg) => {
+    editor.updateShape<CCCalendarShape>({
+      id: shape.id,
+      type: 'cc-calendar',
+      props: { ...shape.props, selectedDate: arg.start.toISOString() }
+    })
+  }, [editor, shape.id, shape.props])
+
+  const handleViewChange = useCallback((mountArg: ViewMountArg) => {
+    const newView = mountArg.view.type as CCCalendarShape['props']['view']
+    editor.updateShape<CCCalendarShape>({
+      id: shape.id,
+      type: 'cc-calendar',
+      props: { ...shape.props, view: newView }
+    })
+  }, [editor, shape.id, shape.props])
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    e.stopPropagation()
+  }, [])
+
+  const handlePointerUp = useCallback((e: React.PointerEvent) => {
+    e.stopPropagation()
+  }, [])
+
+  const handlePointerMove = useCallback((e: React.PointerEvent) => {
+    e.stopPropagation()
+  }, [])
+
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.stopPropagation()
+  }, [])
+
+  const handleClassToggle = (subjectClass: string) => {
+    setSelectedClasses(prev => 
+      prev.includes(subjectClass)
+        ? prev.filter(c => c !== subjectClass)
+        : [...prev, subjectClass]
+    );
+  };
+
+  useEffect(() => {
+    const classes = Array.from(new Set(events.map(event => event.extendedProps?.subjectClass || '')));
+    setSubjectClasses(classes);
+    setSelectedClasses(classes);
+  }, [events]);
+
+  const filteredEvents = events.filter(event => 
+    selectedClasses.includes(event.extendedProps?.subjectClass || '')
+  );
+
+  // Calculate available height for calendar
+  const getAvailableHeight = useCallback(() => {
+    const totalPadding = CC_BASE_STYLE_CONSTANTS.CONTENT.padding * 2
+    const availableHeight = shape.props.h - CC_BASE_STYLE_CONSTANTS.HEADER.height - totalPadding
+    return Math.max(availableHeight, CC_BASE_STYLE_CONSTANTS.MIN_DIMENSIONS.height)
+  }, [shape.props.h])
+
+  // Calculate available width for calendar
+  const getAvailableWidth = useCallback(() => {
+    const totalPadding = CC_BASE_STYLE_CONSTANTS.CONTENT.padding * 2
+    const availableWidth = shape.props.w - totalPadding
+    return Math.max(availableWidth, CC_BASE_STYLE_CONSTANTS.MIN_DIMENSIONS.width)
+  }, [shape.props.w])
+
+  const showClassFilterDialog = useCallback(() => {
+    addDialog({
+      component: ({ onClose }) => (
+        <ClassFilterDialog
+          onClose={onClose}
+          subjectClasses={subjectClasses}
+          selectedClasses={selectedClasses}
+          onClassToggle={handleClassToggle}
+          events={events}
+        />
+      ),
+      onClose: () => {
+        // Optional cleanup
+      },
+    })
+  }, [addDialog, subjectClasses, selectedClasses, events, handleClassToggle])
+
+  const showViewMenuDialog = useCallback(() => {
+    addDialog({
+      component: ({ onClose }) => (
+        <ViewMenuDialog
+          onSelect={(view) => {
+            calendarRef.current?.getApi().changeView(view)
+            onClose()
+          }}
+          onClose={onClose}
+        />
+      ),
+      onClose: () => {
+        // Optional cleanup
+      },
+    })
+  }, [addDialog, calendarRef])
+
+  const showEventDetailsDialog = useCallback((event: TeacherTimetableEvent) => {
+    addDialog({
+      component: ({ onClose }) => (
+        <EventDetailsDialog
+          onClose={onClose}
+          selectedEvent={event}
+          fileLoadingState={fileLoadingState}
+          editor={editor}
+          workerDbName={workerDbName || ''}
+          onOpenFile={openTldrawFile}
+          setFileLoadingState={setFileLoadingState}
+        />
+      ),
+      onClose: () => {
+        // Optional cleanup
+      },
+    })
+  }, [addDialog, fileLoadingState, editor, workerDbName])
+
+  const calendarOptions = useCalendarOptions({
+    shape: {
+      ...shape,
+      props: {
+        ...shape.props,
+        h: getAvailableHeight(),
+      }
+    },
+    filteredEvents,
+    handleDateSelect,
+    handleViewChange,
+    toggleClassFilterModal: showClassFilterDialog,
+    setIsViewMenuOpen: () => showViewMenuDialog(),
+    setSelectedEvent: (event: TeacherTimetableEvent | null) => {
+      if (event) showEventDetailsDialog(event)
+    },
+    setIsEventModalOpen: () => {}, // No longer needed
+  });
+
+  // Update calendar size when shape dimensions change
+  useEffect(() => {
+    if (calendarRef.current) {
+      const calendar = calendarRef.current.getApi();
+      calendar.updateSize();
+    }
+  }, [shape.props.w, shape.props.h]);
+
+  return (
+    <HTMLContainer
+      id={shape.id}
+      style={{
+        width: getAvailableWidth(),
+        height: getAvailableHeight(),
+        position: 'relative',
+        overflow: 'hidden',
+        backgroundColor: CC_BASE_STYLE_CONSTANTS.CONTENT.backgroundColor,
+        padding: CC_BASE_STYLE_CONSTANTS.CONTENT.padding,
+        color: 'black',
+        pointerEvents: 'all',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+      onPointerDown={handlePointerDown}
+      onPointerUp={handlePointerUp}
+      onPointerMove={handlePointerMove}
+      onWheel={handleWheel}
+    >
+      <div style={{ 
+        width: '100%', 
+        height: '100%',
+        overflow: 'hidden'
+      }}>
+        <FullCalendar 
+          ref={calendarRef} 
+          {...calendarOptions}
+        />
+      </div>
+    </HTMLContainer>
+  )
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-calendar/CalendarDialogs.tsx b/src/utils/tldraw/cc-base/cc-calendar/CalendarDialogs.tsx
new file mode 100644
index 0000000..aef2467
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-calendar/CalendarDialogs.tsx
@@ -0,0 +1,184 @@
+import {
+  TldrawUiButton,
+  TldrawUiButtonLabel,
+  TldrawUiDialogBody,
+  TldrawUiDialogCloseButton,
+  TldrawUiDialogFooter,
+  TldrawUiDialogHeader,
+  TldrawUiDialogTitle,
+  Editor
+} from '@tldraw/tldraw'
+import { FaCheck, FaExternalLinkAlt } from 'react-icons/fa'
+import { TeacherTimetableEvent } from '../../../../services/graph/timetableNeoDBService'
+import { LoadingState } from '../../../../services/tldraw/snapshotService'
+
+// View Menu Dialog Component
+interface ViewMenuDialogProps {
+  onSelect: (view: string) => void
+  onClose: () => void
+}
+
+export const ViewMenuDialog = ({ onSelect, onClose }: ViewMenuDialogProps) => {
+  const views = [
+    { name: 'Day', view: 'timeGridDay' },
+    { name: 'Week', view: 'timeGridWeek' },
+    { name: 'Month', view: 'dayGridMonth' },
+    { name: 'Year', view: 'dayGridYear' },
+    { name: 'List Day', view: 'listDay' },
+    { name: 'List Week', view: 'listWeek' },
+    { name: 'List Month', view: 'listMonth' },
+    { name: 'List Year', view: 'listYear' },
+  ]
+
+  return (
+    <>
+      <TldrawUiDialogHeader>
+        <TldrawUiDialogTitle>Select Calendar View</TldrawUiDialogTitle>
+        <TldrawUiDialogCloseButton />
+      </TldrawUiDialogHeader>
+      <TldrawUiDialogBody style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        {views.map(({name, view}) => (
+          <TldrawUiButton key={view} type="normal" onClick={() => onSelect(view)}>
+            <TldrawUiButtonLabel>{name}</TldrawUiButtonLabel>
+          </TldrawUiButton>
+        ))}
+      </TldrawUiDialogBody>
+      <TldrawUiDialogFooter>
+        <TldrawUiButton type="normal" onClick={onClose}>
+          <TldrawUiButtonLabel>Close</TldrawUiButtonLabel>
+        </TldrawUiButton>
+      </TldrawUiDialogFooter>
+    </>
+  )
+}
+
+// Class Filter Dialog
+interface ClassFilterDialogProps {
+  onClose: () => void
+  subjectClasses: string[]
+  selectedClasses: string[]
+  onClassToggle: (subjectClass: string) => void
+  events: TeacherTimetableEvent[]
+}
+
+export const ClassFilterDialog = ({
+  onClose,
+  subjectClasses,
+  selectedClasses,
+  onClassToggle,
+  events
+}: ClassFilterDialogProps) => {
+  const renderClassFilterButton = (subjectClass: string) => {
+    const isSelected = selectedClasses.includes(subjectClass)
+    const color = events.find(e => e.extendedProps?.subjectClass === subjectClass)?.extendedProps?.color || '#000000'
+    
+    return (
+      <TldrawUiButton
+        key={subjectClass}
+        type="normal"
+        onClick={() => onClassToggle(subjectClass)}
+        style={{
+          backgroundColor: isSelected ? color : '#ffffff',
+          color: isSelected ? '#ffffff' : '#000000',
+          border: `2px solid ${color}`,
+        }}
+      >
+        <TldrawUiButtonLabel>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <div style={{ marginRight: '8px' }}>
+              {isSelected && <FaCheck />}
+            </div>
+            <span>{subjectClass}</span>
+          </div>
+        </TldrawUiButtonLabel>
+      </TldrawUiButton>
+    )
+  }
+
+  return (
+    <>
+      <TldrawUiDialogHeader>
+        <TldrawUiDialogTitle>Filter Classes</TldrawUiDialogTitle>
+        <TldrawUiDialogCloseButton />
+      </TldrawUiDialogHeader>
+      <TldrawUiDialogBody style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+        {subjectClasses.map(renderClassFilterButton)}
+      </TldrawUiDialogBody>
+      <TldrawUiDialogFooter>
+        <TldrawUiButton type="normal" onClick={onClose}>
+          <TldrawUiButtonLabel>Close</TldrawUiButtonLabel>
+        </TldrawUiButton>
+      </TldrawUiDialogFooter>
+    </>
+  )
+}
+
+// Event Details Dialog
+interface EventDetailsDialogProps {
+  onClose: () => void
+  selectedEvent: TeacherTimetableEvent | null
+  fileLoadingState: LoadingState
+  editor: Editor
+  workerDbName: string | undefined
+  onOpenFile: (path: string, dbName: string, editor: Editor, setFileLoadingState: (state: LoadingState) => void) => void
+  setFileLoadingState: (state: LoadingState) => void
+}
+
+export const EventDetailsDialog = ({
+  onClose,
+  selectedEvent,
+  fileLoadingState,
+  editor,
+  workerDbName,
+  onOpenFile,
+  setFileLoadingState
+}: EventDetailsDialogProps) => {
+  const handleOpenFile = () => {
+    if (!selectedEvent?.extendedProps?.tldraw_snapshot || !workerDbName) {
+      console.error('❌ Failed to open tldraw file - missing snapshot or db name')
+      return
+    }
+
+    onOpenFile(
+      selectedEvent.extendedProps.tldraw_snapshot,
+      workerDbName,
+      editor,
+      setFileLoadingState
+    )
+  }
+
+  if (!selectedEvent) return null
+
+  return (
+    <>
+      <TldrawUiDialogHeader>
+        <TldrawUiDialogTitle>{selectedEvent.title}</TldrawUiDialogTitle>
+        <TldrawUiDialogCloseButton />
+      </TldrawUiDialogHeader>
+      <TldrawUiDialogBody>
+        <p><strong>Start Time:</strong> {new Date(selectedEvent.start).toLocaleString()}</p>
+        <p><strong>End Time:</strong> {new Date(selectedEvent.end).toLocaleString()}</p>
+        <p><strong>Class:</strong> {selectedEvent.extendedProps?.subjectClass}</p>
+        <p><strong>Period:</strong> {selectedEvent.extendedProps?.periodCode}</p>
+        
+        {fileLoadingState.status === 'loading' && <p>Loading file...</p>}
+        {fileLoadingState.status === 'error' && (
+          <p style={{color: 'red'}}>Error: {fileLoadingState.error}</p>
+        )}
+        
+        {selectedEvent.extendedProps?.tldraw_snapshot && fileLoadingState.status !== 'loading' && (
+          <TldrawUiButton type="normal" onClick={handleOpenFile}>
+            <TldrawUiButtonLabel>
+              Open Tldraw File <FaExternalLinkAlt style={{ marginLeft: '8px' }} />
+            </TldrawUiButtonLabel>
+          </TldrawUiButton>
+        )}
+      </TldrawUiDialogBody>
+      <TldrawUiDialogFooter>
+        <TldrawUiButton type="normal" onClick={onClose}>
+          <TldrawUiButtonLabel>Close</TldrawUiButtonLabel>
+        </TldrawUiButton>
+      </TldrawUiDialogFooter>
+    </>
+  )
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-calendar/calendarOptions.ts b/src/utils/tldraw/cc-base/cc-calendar/calendarOptions.ts
new file mode 100644
index 0000000..f355b8d
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-calendar/calendarOptions.ts
@@ -0,0 +1,131 @@
+import { CalendarOptions, EventContentArg, formatDate, DateSelectArg, ViewMountArg } from '@fullcalendar/core'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import listPlugin from '@fullcalendar/list'
+import interactionPlugin from '@fullcalendar/interaction'
+import { TimetableNeoDBService } from '../../../../services/graph/timetableNeoDBService'
+import { CC_CALENDAR_STYLE_CONSTANTS } from '../cc-styles'
+
+// Calendar layout constants
+export const CALENDAR_LAYOUT = {
+  TOOLBAR_HEIGHT: 5,
+  HEADER_PADDING: 5,
+  CONTENT_PADDING: 5,
+  FOOTER_HEIGHT: 0,
+  // Function to calculate available content height
+  getAvailableHeight: (totalHeight: number) => {
+    return totalHeight - (
+      CALENDAR_LAYOUT.TOOLBAR_HEIGHT +
+      CALENDAR_LAYOUT.HEADER_PADDING * 2 +
+      CALENDAR_LAYOUT.CONTENT_PADDING * 2 +
+      CALENDAR_LAYOUT.FOOTER_HEIGHT
+    );
+  }
+} as const;
+
+// Re-export types that other files might need
+export type { CalendarOptions, EventContentArg, DateSelectArg, ViewMountArg }
+
+// Export plugins
+export const getCalendarPlugins = () => [
+  dayGridPlugin,
+  timeGridPlugin,
+  listPlugin,
+  interactionPlugin,
+]
+
+// Export event content renderer
+export const renderEventContent = (arg: EventContentArg) => {
+  const backgroundColor = TimetableNeoDBService.lightenColor(arg.event.extendedProps?.color || '#000000', 100);
+  const textColor = TimetableNeoDBService.getContrastColor(backgroundColor);
+
+  const formatEventTime = (date: Date | null) => {
+    if (!date) {
+      return '';
+    }
+    return formatDate(date, {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true,
+      timeZone: 'local'
+    });
+  };
+
+  const formattedStartTime = formatEventTime(arg.event.start);  //DO NOT REMOVE THIS COMMENT
+  const formattedEndTime = formatEventTime(arg.event.end);  //DO NOT REMOVE THIS COMMENT
+  const timeAndPeriodCodeString = `${arg.event.extendedProps?.periodCode || ''}`; //DO NOT REMOVE THIS COMMENT
+
+  return {
+    html: `
+      <div class="fc-event-main-frame" style="background-color: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.mainFrame.backgroundColor}; color: ${textColor}; display: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.mainFrame.display}; align-items: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.mainFrame.alignItems}; justify-content: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.mainFrame.justifyContent}; min-height: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.mainFrame.minHeight}; padding: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.mainFrame.padding}; border-radius: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.mainFrame.borderRadius};">
+        <div class="fc-event-title fc-sticky" style="color: ${textColor}; font-size: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.fontSize}; font-weight: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.fontWeight}; text-align: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.textAlign}; overflow: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.overflow}; text-overflow: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.textOverflow}; white-space: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.whiteSpace}; opacity: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.opacity}; padding: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.padding}; width: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.width}; letter-spacing: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.letterSpacing}; margin: ${CC_CALENDAR_STYLE_CONSTANTS.EVENT.title.margin};">${arg.event.title}</div>
+      </div>
+    `
+  };
+}
+
+// Export base calendar options
+export const getBaseCalendarOptions = (): Partial<CalendarOptions> => ({
+  aspectRatio: undefined,
+  expandRows: true,
+  stickyHeaderDates: true,
+  stickyFooterScrollbar: false,
+  dayHeaders: true,
+  dayHeaderFormat(arg) {
+    return formatDate(arg.date.marker, { weekday: 'long' });
+  },
+  titleFormat: (arg) => {
+    return formatDate(arg.date.marker, { weekday: 'long' });
+  },
+  dayMaxEvents: 10,
+  selectable: true,
+  eventMinHeight: 10,
+  navLinks: true,
+  hiddenDays: [1],
+  weekends: false,
+  slotMinTime: '08:00:00',
+  slotMaxTime: '16:00:00',
+  slotDuration: '00:30:00',
+  slotLabelInterval: '01:00',
+  allDaySlot: false,
+  slotEventOverlap: true,
+  dayMaxEventRows: 1,
+  eventMaxStack: 1,
+  slotLabelFormat: [
+    {
+      formatMatcher: 'best fit',
+      hour: 'numeric',
+      minute: '2-digit',
+      omitZeroMinute: true,
+      meridiem: 'narrow',
+      hour12: false,
+    }
+  ],
+  buttonText: {
+    today: 'Today',
+    month: 'Month',
+    week: 'Week',
+    day: 'Day',
+    list: 'List',
+  },
+  buttonIcons: {
+    prev: 'chevron-left',
+    next: 'chevron-right',
+    prevYear: 'chevrons-left',
+    nextYear: 'chevrons-right',
+  },
+  themeSystem: 'standard',
+  eventContent: renderEventContent,
+  eventClassNames: (arg: { event: { extendedProps?: { subjectClass?: string; color?: string } } }) => {
+    return [arg.event.extendedProps?.subjectClass || ''];
+  },
+  eventDidMount: (arg: { event: { extendedProps?: { color?: string }; id: string }; el: HTMLElement }) => {
+    if (arg.event.extendedProps?.color) {
+      const originalColor = arg.event.extendedProps.color;
+      const lightenedColor = TimetableNeoDBService.lightenColor(originalColor, 100);
+      arg.el.style.backgroundColor = lightenedColor;
+      arg.el.style.borderColor = originalColor;
+      arg.el.style.color = TimetableNeoDBService.getContrastColor(lightenedColor);
+    }
+  },
+}) 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-calendar/useCalendarOptions.ts b/src/utils/tldraw/cc-base/cc-calendar/useCalendarOptions.ts
new file mode 100644
index 0000000..7e771f3
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-calendar/useCalendarOptions.ts
@@ -0,0 +1,62 @@
+import { TeacherTimetableEvent } from '../../../../services/graph/timetableNeoDBService'
+import { getBaseCalendarOptions, getCalendarPlugins, CalendarOptions, DateSelectArg, ViewMountArg, CALENDAR_LAYOUT } from './calendarOptions'
+
+interface UseCalendarOptionsProps {
+  shape: {
+    props: {
+      view: string
+      h: number
+    }
+  }
+  filteredEvents: TeacherTimetableEvent[]
+  handleDateSelect: (arg: DateSelectArg) => void
+  handleViewChange: (arg: ViewMountArg) => void
+  toggleClassFilterModal: () => void
+  setIsViewMenuOpen: (isOpen: boolean) => void
+  setSelectedEvent: (event: TeacherTimetableEvent | null) => void
+  setIsEventModalOpen: (isOpen: boolean) => void
+}
+
+export const useCalendarOptions = ({
+  shape,
+  filteredEvents,
+  handleDateSelect,
+  handleViewChange,
+  toggleClassFilterModal,
+  setIsViewMenuOpen,
+  setSelectedEvent,
+  setIsEventModalOpen,
+}: UseCalendarOptionsProps): CalendarOptions => {
+  const availableHeight = CALENDAR_LAYOUT.getAvailableHeight(shape.props.h);
+
+  return {
+    ...getBaseCalendarOptions(),
+    plugins: getCalendarPlugins(),
+    initialView: shape.props.view,
+    events: filteredEvents,
+    select: handleDateSelect,
+    viewDidMount: handleViewChange,
+    height: availableHeight,
+    contentHeight: availableHeight,
+    headerToolbar: {
+      left: 'prev,next today viewToggle',
+      center: 'title',
+      right: 'filterClasses'
+    },
+    customButtons: {
+      filterClasses: {
+        text: 'Classes',
+        click: toggleClassFilterModal,
+      },
+      viewToggle: {
+        text: 'View',
+        click: () => setIsViewMenuOpen(true),
+      },
+    },
+    eventClick: (arg) => {
+      const eventData = arg.event.toPlainObject();
+      setSelectedEvent(eventData as unknown as TeacherTimetableEvent);
+      setIsEventModalOpen(true);
+    },
+  };
+}; 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-calendar/utils.ts b/src/utils/tldraw/cc-base/cc-calendar/utils.ts
new file mode 100644
index 0000000..902c53b
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-calendar/utils.ts
@@ -0,0 +1,28 @@
+import { Editor } from '@tldraw/tldraw'
+import { LoadingState, NavigationSnapshotService } from '../../../../services/tldraw/snapshotService'
+import logger from '../../../../debugConfig'
+
+export const openTldrawFile = async (
+  path: string, 
+  dbName: string,
+  editor: Editor,
+  setFileLoadingState: (state: LoadingState) => void
+) => {
+  logger.info('calendar-shape', '📂 Opening tldraw file', { 
+    path,
+    db_name: dbName
+  });
+
+  try {
+    await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
+      path,
+      dbName,
+      editor.store,
+      setFileLoadingState
+    );
+  } catch (error) {
+    logger.error('calendar-shape', '❌ Failed to open tldraw file', {
+      error: error instanceof Error ? error.message : 'Unknown error'
+    });
+  }
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-configs.ts b/src/utils/tldraw/cc-base/cc-configs.ts
new file mode 100644
index 0000000..f28730b
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-configs.ts
@@ -0,0 +1,108 @@
+import { CC_BASE_STYLE_CONSTANTS, CC_SLIDESHOW_STYLE_CONSTANTS } from './cc-styles'
+import { TLShapeId } from '@tldraw/tldraw'
+
+export interface CCShapeConfig {
+  width: number
+  height: number
+  xOffset: number
+  yOffset: number
+  defaultProps: {
+    title: string
+    headerColor: string
+    backgroundColor: string
+    isLocked: boolean
+    [key: string]: string | number | boolean | Date | TLShapeId[] | undefined | null
+  }
+}
+
+export const CC_SHAPE_CONFIGS: Record<string, CCShapeConfig> = {
+  'cc-calendar': {
+    width: 400,
+    height: 600,
+    xOffset: 0,
+    yOffset: 0,
+    defaultProps: {
+      title: 'Calendar',
+      headerColor: CC_BASE_STYLE_CONSTANTS.COLORS.primary,
+      backgroundColor: CC_BASE_STYLE_CONSTANTS.CONTENT.backgroundColor,
+      isLocked: false,
+      date: new Date().toISOString(),
+      events: [],
+      view: 'timeGridWeek',
+    }
+  },
+  'cc-settings': {
+    width: 400,
+    height: 500,
+    xOffset: 0,
+    yOffset: 0,
+    defaultProps: {
+      title: 'User Settings',
+      headerColor: CC_BASE_STYLE_CONSTANTS.COLORS.primary,
+      backgroundColor: CC_BASE_STYLE_CONSTANTS.CONTENT.backgroundColor,
+      isLocked: false,
+    }
+  },
+  'cc-live-transcription': {
+    width: 300,
+    height: 400,
+    xOffset: 0,
+    yOffset: 0,
+    defaultProps: {
+      title: 'Live Transcription',
+      headerColor: CC_BASE_STYLE_CONSTANTS.COLORS.primary,
+      backgroundColor: CC_BASE_STYLE_CONSTANTS.CONTENT.backgroundColor,
+      isLocked: false,
+      isRecording: false,
+      segments: [],
+      currentSegment: undefined,
+      lastProcessedSegment: undefined,
+    }
+  },
+  'cc-slideshow': {
+    width: CC_SLIDESHOW_STYLE_CONSTANTS.DEFAULT_SLIDE_WIDTH * 3 + CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING * 4,
+    height: CC_SLIDESHOW_STYLE_CONSTANTS.DEFAULT_SLIDE_HEIGHT + 
+      CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT +
+      CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING * 2 +
+      CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_CONTENT_PADDING * 2,
+    xOffset: 0,
+    yOffset: 0,
+    defaultProps: {
+      title: 'Slideshow',
+      headerColor: CC_BASE_STYLE_CONSTANTS.COLORS.primary,
+      backgroundColor: CC_BASE_STYLE_CONSTANTS.CONTENT.backgroundColor,
+      isLocked: false,
+      currentSlideIndex: 0,
+      slidePattern: 'horizontal',
+      numSlides: 3,
+    }
+  },
+  'cc-slide': {
+    width: CC_SLIDESHOW_STYLE_CONSTANTS.DEFAULT_SLIDE_WIDTH,
+    height: CC_SLIDESHOW_STYLE_CONSTANTS.DEFAULT_SLIDE_HEIGHT,
+    xOffset: 0,
+    yOffset: 0,
+    defaultProps: {
+      title: 'Slide',
+      headerColor: CC_BASE_STYLE_CONSTANTS.COLORS.primary,
+      backgroundColor: CC_BASE_STYLE_CONSTANTS.CONTENT.backgroundColor,
+      isLocked: false,
+      imageData: '',
+    }
+  },
+  'cc-youtube-embed': {
+    width: 800,
+    height: 450 + CC_BASE_STYLE_CONSTANTS.HEADER.height + (CC_BASE_STYLE_CONSTANTS.CONTENT.padding * 2),
+    xOffset: 0,
+    yOffset: 0,
+    defaultProps: {
+      title: 'YouTube Video',
+      headerColor: CC_BASE_STYLE_CONSTANTS.COLORS.primary,
+      backgroundColor: CC_BASE_STYLE_CONSTANTS.CONTENT.backgroundColor,
+      isLocked: false,
+      video_url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+      transcript: [],
+      transcriptVisible: false,
+    }
+  }
+}
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCAcademicDayNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCAcademicDayNodeShapeUtil.tsx
new file mode 100644
index 0000000..ae5dd8c
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCAcademicDayNodeShapeUtil.tsx
@@ -0,0 +1,62 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { ccGraphShapeProps, getDefaultCCAcademicDayNodeProps } from './cc-graph-props'
+import { CCAcademicDayNodeProps } from './cc-graph-types'
+import { NodeProperty } from './cc-graph-shared'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCBaseShape } from '../cc-types'
+
+export interface CCAcademicDayNodeShape extends CCBaseShape {
+  type: 'cc-academic-day-node'
+  props: CCAcademicDayNodeProps
+}
+
+export class CCAcademicDayNodeShapeUtil extends CCBaseShapeUtil<CCAcademicDayNodeShape> {
+  static type = 'cc-academic-day-node' as const
+  static props = ccGraphShapeProps['cc-academic-day-node']
+
+  getDefaultProps(): CCAcademicDayNodeShape['props'] {
+    const defaultProps = getDefaultCCAcademicDayNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCAcademicDayNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCAcademicDayNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Academic Day"
+          value={shape.props.academic_day}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Date"
+          value={shape.props.date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Day of Week"
+          value={shape.props.day_of_week}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Day Type"
+          value={shape.props.day_type}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCAcademicPeriodNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCAcademicPeriodNodeShapeUtil.tsx
new file mode 100644
index 0000000..aa04654
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCAcademicPeriodNodeShapeUtil.tsx
@@ -0,0 +1,68 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCAcademicPeriodNodeProps } from './cc-graph-props'
+import { CCAcademicPeriodNodeProps } from './cc-graph-types'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+
+export interface CCAcademicPeriodNodeShape extends CCBaseShape {
+  type: 'cc-academic-period-node'
+  props: CCAcademicPeriodNodeProps
+}
+
+export class CCAcademicPeriodNodeShapeUtil extends CCBaseShapeUtil<CCAcademicPeriodNodeShape> {
+  static type = 'cc-academic-period-node' as const
+  static props = ccGraphShapeProps['cc-academic-period-node']
+
+  getDefaultProps(): CCAcademicPeriodNodeShape['props'] {
+    const defaultProps = getDefaultCCAcademicPeriodNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCAcademicPeriodNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCAcademicPeriodNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Name"
+          value={shape.props.name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Date"
+          value={shape.props.date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Start Time"
+          value={shape.props.start_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Time"
+          value={shape.props.end_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Period Code"
+          value={shape.props.period_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCAcademicTermNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCAcademicTermNodeShapeUtil.tsx
new file mode 100644
index 0000000..12d404d
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCAcademicTermNodeShapeUtil.tsx
@@ -0,0 +1,62 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCAcademicTermNodeProps } from './cc-graph-props'
+import { CCAcademicTermNodeProps } from './cc-graph-types'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+
+export interface CCAcademicTermNodeShape extends CCBaseShape {
+  type: 'cc-academic-term-node'
+  props: CCAcademicTermNodeProps
+}
+
+export class CCAcademicTermNodeShapeUtil extends CCBaseShapeUtil<CCAcademicTermNodeShape> {
+  static type = 'cc-academic-term-node' as const
+  static props = ccGraphShapeProps['cc-academic-term-node']
+
+  getDefaultProps(): CCAcademicTermNodeShape['props'] {
+    const defaultProps = getDefaultCCAcademicTermNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCAcademicTermNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCAcademicTermNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Term Name"
+          value={shape.props.term_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Term Number"
+          value={shape.props.term_number}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Start Date"
+          value={shape.props.start_date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Date"
+          value={shape.props.end_date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCAcademicWeekNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCAcademicWeekNodeShapeUtil.tsx
new file mode 100644
index 0000000..770003c
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCAcademicWeekNodeShapeUtil.tsx
@@ -0,0 +1,56 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCAcademicWeekNodeProps } from './cc-graph-props'
+import { CCAcademicWeekNodeProps } from './cc-graph-types'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+
+export interface CCAcademicWeekNodeShape extends CCBaseShape {
+  type: 'cc-academic-week-node'
+  props: CCAcademicWeekNodeProps
+}
+
+export class CCAcademicWeekNodeShapeUtil extends CCBaseShapeUtil<CCAcademicWeekNodeShape> {
+  static type = 'cc-academic-week-node' as const
+  static props = ccGraphShapeProps['cc-academic-week-node']
+
+  getDefaultProps(): CCAcademicWeekNodeShape['props'] {
+    const defaultProps = getDefaultCCAcademicWeekNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCAcademicWeekNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCAcademicWeekNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Academic Week Number"
+          value={shape.props.academic_week_number}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Start Date"
+          value={shape.props.start_date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Week Type"
+          value={shape.props.week_type}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCAcademicYearNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCAcademicYearNodeShapeUtil.tsx
new file mode 100644
index 0000000..0720a72
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCAcademicYearNodeShapeUtil.tsx
@@ -0,0 +1,44 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCAcademicYearNodeProps } from './cc-graph-props'
+import { CCAcademicYearNodeProps } from './cc-graph-types'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+
+export interface CCAcademicYearNodeShape extends CCBaseShape {
+  type: 'cc-academic-year-node'
+  props: CCAcademicYearNodeProps
+}
+
+export class CCAcademicYearNodeShapeUtil extends CCBaseShapeUtil<CCAcademicYearNodeShape> {
+  static type = 'cc-academic-year-node' as const
+  static props = ccGraphShapeProps['cc-academic-year-node']
+
+  getDefaultProps(): CCAcademicYearNodeShape['props'] {
+    const defaultProps = getDefaultCCAcademicYearNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCAcademicYearNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCAcademicYearNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Academic Year"
+          value={shape.props.year}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCCalendarDayNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCCalendarDayNodeShapeUtil.tsx
new file mode 100644
index 0000000..1b22696
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCCalendarDayNodeShapeUtil.tsx
@@ -0,0 +1,56 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty, formatDate } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCCalendarDayNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCCalendarDayNodeProps } from './cc-graph-types'
+
+export interface CCCalendarDayNodeShape extends CCBaseShape {
+  type: 'cc-calendar-day-node'
+  props: CCCalendarDayNodeProps
+}
+
+export class CCCalendarDayNodeShapeUtil extends CCBaseShapeUtil<CCCalendarDayNodeShape> {
+  static type = 'cc-calendar-day-node' as const
+  static props = ccGraphShapeProps['cc-calendar-day-node']
+
+  getDefaultProps(): CCCalendarDayNodeShape['props'] {
+    const defaultProps = getDefaultCCCalendarDayNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCCalendarDayNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCCalendarDayNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Date"
+          value={formatDate(shape.props.date)}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Day of Week"
+          value={shape.props.day_of_week}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="ISO Day"
+          value={shape.props.iso_day}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCCalendarMonthNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCCalendarMonthNodeShapeUtil.tsx
new file mode 100644
index 0000000..68dd0a8
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCCalendarMonthNodeShapeUtil.tsx
@@ -0,0 +1,56 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCCalendarMonthNodeProps } from './cc-graph-props'
+import { CCCalendarMonthNodeProps } from './cc-graph-types'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+
+export interface CCCalendarMonthNodeShape extends CCBaseShape {
+  type: 'cc-calendar-month-node'
+  props: CCCalendarMonthNodeProps
+}
+
+export class CCCalendarMonthNodeShapeUtil extends CCBaseShapeUtil<CCCalendarMonthNodeShape> {
+  static type = 'cc-calendar-month-node' as const
+  static props = ccGraphShapeProps['cc-calendar-month-node']
+
+  getDefaultProps(): CCCalendarMonthNodeShape['props'] {
+    const defaultProps = getDefaultCCCalendarMonthNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCCalendarMonthNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCCalendarMonthNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Year"
+          value={shape.props.year}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Month"
+          value={shape.props.month}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Month Name"
+          value={shape.props.month_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCCalendarNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCCalendarNodeShapeUtil.tsx
new file mode 100644
index 0000000..e5400bc
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCCalendarNodeShapeUtil.tsx
@@ -0,0 +1,62 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty, formatDate } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCCalendarNodeProps } from './cc-graph-props'
+import { CCCalendarNodeProps } from './cc-graph-types'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+
+export interface CCCalendarNodeShape extends CCBaseShape {
+  type: 'cc-calendar-node'
+  props: CCCalendarNodeProps
+}
+
+export class CCCalendarNodeShapeUtil extends CCBaseShapeUtil<CCCalendarNodeShape> {
+  static type = 'cc-calendar-node' as const
+  static props = ccGraphShapeProps['cc-calendar-node']
+
+  getDefaultProps(): CCCalendarNodeShape['props'] {
+    const defaultProps = getDefaultCCCalendarNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCCalendarNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCCalendarNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Calendar Name"
+          value={shape.props.calendar_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Calendar Type"
+          value={shape.props.calendar_type}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Start Date"
+          value={formatDate(shape.props.start_date)}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Date"
+          value={formatDate(shape.props.end_date)}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCCalendarTimeChunkNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCCalendarTimeChunkNodeShapeUtil.tsx
new file mode 100644
index 0000000..ff21d29
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCCalendarTimeChunkNodeShapeUtil.tsx
@@ -0,0 +1,50 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCCalendarTimeChunkNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCCalendarTimeChunkNodeProps } from './cc-graph-types'
+
+export interface CCCalendarTimeChunkNodeShape extends CCBaseShape {
+  type: 'cc-calendar-time-chunk-node'
+  props: CCCalendarTimeChunkNodeProps
+}
+
+export class CCCalendarTimeChunkNodeShapeUtil extends CCBaseShapeUtil<CCCalendarTimeChunkNodeShape> {
+  static type = 'cc-calendar-time-chunk-node' as const
+  static props = ccGraphShapeProps['cc-calendar-time-chunk-node']
+
+  getDefaultProps(): CCCalendarTimeChunkNodeShape['props'] {
+    const defaultProps = getDefaultCCCalendarTimeChunkNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCCalendarTimeChunkNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCCalendarTimeChunkNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Start Time"
+          value={shape.props.start_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Time"
+          value={shape.props.end_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCCalendarWeekNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCCalendarWeekNodeShapeUtil.tsx
new file mode 100644
index 0000000..31698c6
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCCalendarWeekNodeShapeUtil.tsx
@@ -0,0 +1,56 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty, formatDate, DateValue } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCCalendarWeekNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCCalendarWeekNodeProps } from './cc-graph-types'
+
+export interface CCCalendarWeekNodeShape extends CCBaseShape {
+  type: 'cc-calendar-week-node'
+  props: CCCalendarWeekNodeProps
+}
+
+export class CCCalendarWeekNodeShapeUtil extends CCBaseShapeUtil<CCCalendarWeekNodeShape> {
+  static type = 'cc-calendar-week-node' as const
+  static props = ccGraphShapeProps['cc-calendar-week-node']
+
+  getDefaultProps(): CCCalendarWeekNodeShape['props'] {
+    const defaultProps = getDefaultCCCalendarWeekNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCCalendarWeekNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCCalendarWeekNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Start Date"
+          value={formatDate(shape.props.start_date as DateValue)}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Week Number"
+          value={shape.props.week_number}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="ISO Week"
+          value={shape.props.iso_week}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCCalendarYearNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCCalendarYearNodeShapeUtil.tsx
new file mode 100644
index 0000000..ee864ed
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCCalendarYearNodeShapeUtil.tsx
@@ -0,0 +1,44 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCCalendarYearNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCCalendarYearNodeProps } from './cc-graph-types'
+
+export interface CCCalendarYearNodeShape extends CCBaseShape {
+  type: 'cc-calendar-year-node'
+  props: CCCalendarYearNodeProps
+}
+
+export class CCCalendarYearNodeShapeUtil extends CCBaseShapeUtil<CCCalendarYearNodeShape> {
+  static type = 'cc-calendar-year-node' as const
+  static props = ccGraphShapeProps['cc-calendar-year-node']
+
+  getDefaultProps(): CCCalendarYearNodeShape['props'] {
+    const defaultProps = getDefaultCCCalendarYearNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCCalendarYearNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCCalendarYearNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Year"
+          value={shape.props.year}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCCurriculumStructureNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCCurriculumStructureNodeShapeUtil.tsx
new file mode 100644
index 0000000..515bd8e
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCCurriculumStructureNodeShapeUtil.tsx
@@ -0,0 +1,44 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCCurriculumStructureNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCCurriculumStructureNodeProps } from './cc-graph-types'
+
+export interface CCCurriculumStructureNodeShape extends CCBaseShape {
+  type: 'cc-curriculum-structure-node'
+  props: CCCurriculumStructureNodeProps
+}
+
+export class CCCurriculumStructureNodeShapeUtil extends CCBaseShapeUtil<CCCurriculumStructureNodeShape> {
+  static type = 'cc-curriculum-structure-node' as const
+  static props = ccGraphShapeProps['cc-curriculum-structure-node']
+
+  getDefaultProps(): CCCurriculumStructureNodeShape['props'] {
+    const defaultProps = getDefaultCCCurriculumStructureNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCCurriculumStructureNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCCurriculumStructureNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Structure Type"
+          value="Curriculum"
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCDepartmentNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCDepartmentNodeShapeUtil.tsx
new file mode 100644
index 0000000..4ae0e8e
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCDepartmentNodeShapeUtil.tsx
@@ -0,0 +1,44 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCDepartmentNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCDepartmentNodeProps } from './cc-graph-types'
+
+export interface CCDepartmentNodeShape extends CCBaseShape {
+  type: 'cc-department-node'
+  props: CCDepartmentNodeProps
+}
+
+export class CCDepartmentNodeShapeUtil extends CCBaseShapeUtil<CCDepartmentNodeShape> {
+  static type = 'cc-department-node' as const
+  static props = ccGraphShapeProps['cc-department-node']
+
+  getDefaultProps(): CCDepartmentNodeShape['props'] {
+    const defaultProps = getDefaultCCDepartmentNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCDepartmentNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCDepartmentNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Department Name"
+          value={shape.props.department_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCDepartmentStructureNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCDepartmentStructureNodeShapeUtil.tsx
new file mode 100644
index 0000000..cf34215
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCDepartmentStructureNodeShapeUtil.tsx
@@ -0,0 +1,44 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCDepartmentStructureNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCDepartmentStructureNodeProps } from './cc-graph-types'
+
+export interface CCDepartmentStructureNodeShape extends CCBaseShape {
+  type: 'cc-department-structure-node'
+  props: CCDepartmentStructureNodeProps
+}
+
+export class CCDepartmentStructureNodeShapeUtil extends CCBaseShapeUtil<CCDepartmentStructureNodeShape> {
+  static type = 'cc-department-structure-node' as const
+  static props = ccGraphShapeProps['cc-department-structure-node']
+
+  getDefaultProps(): CCDepartmentStructureNodeShape['props'] {
+    const defaultProps = getDefaultCCDepartmentStructureNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCDepartmentStructureNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCDepartmentStructureNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Structure Type"
+          value={shape.props.department_structure_type || "Department"}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCKeyStageNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCKeyStageNodeShapeUtil.tsx
new file mode 100644
index 0000000..02f4a4a
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCKeyStageNodeShapeUtil.tsx
@@ -0,0 +1,50 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCKeyStageNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCKeyStageNodeProps } from './cc-graph-types'
+
+export interface CCKeyStageNodeShape extends CCBaseShape {
+  type: 'cc-key-stage-node'
+  props: CCKeyStageNodeProps
+}
+
+export class CCKeyStageNodeShapeUtil extends CCBaseShapeUtil<CCKeyStageNodeShape> {
+  static type = 'cc-key-stage-node' as const
+  static props = ccGraphShapeProps['cc-key-stage-node']
+
+  getDefaultProps(): CCKeyStageNodeShape['props'] {
+    const defaultProps = getDefaultCCKeyStageNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCKeyStageNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCKeyStageNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Key Stage"
+          value={shape.props.key_stage}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Name"
+          value={shape.props.key_stage_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCKeyStageSyllabusNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCKeyStageSyllabusNodeShapeUtil.tsx
new file mode 100644
index 0000000..9976f09
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCKeyStageSyllabusNodeShapeUtil.tsx
@@ -0,0 +1,62 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCKeyStageSyllabusNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCKeyStageSyllabusNodeProps } from './cc-graph-types'
+
+export interface CCKeyStageSyllabusNodeShape extends CCBaseShape {
+  type: 'cc-key-stage-syllabus-node'
+  props: CCKeyStageSyllabusNodeProps
+}
+
+export class CCKeyStageSyllabusNodeShapeUtil extends CCBaseShapeUtil<CCKeyStageSyllabusNodeShape> {
+  static type = 'cc-key-stage-syllabus-node' as const
+  static props = ccGraphShapeProps['cc-key-stage-syllabus-node']
+
+  getDefaultProps(): CCKeyStageSyllabusNodeShape['props'] {
+    const defaultProps = getDefaultCCKeyStageSyllabusNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCKeyStageSyllabusNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCKeyStageSyllabusNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Syllabus Name"
+          value={shape.props.ks_syllabus_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Key Stage"
+          value={shape.props.ks_syllabus_key_stage}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Subject"
+          value={shape.props.ks_syllabus_subject}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Subject Code"
+          value={shape.props.ks_syllabus_subject_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCLearningStatementNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCLearningStatementNodeShapeUtil.tsx
new file mode 100644
index 0000000..bb9c311
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCLearningStatementNodeShapeUtil.tsx
@@ -0,0 +1,56 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCLearningStatementNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCLearningStatementNodeProps } from './cc-graph-types'
+
+export interface CCLearningStatementNodeShape extends CCBaseShape {
+  type: 'cc-learning-statement-node'
+  props: CCLearningStatementNodeProps
+}
+
+export class CCLearningStatementNodeShapeUtil extends CCBaseShapeUtil<CCLearningStatementNodeShape> {
+  static type = 'cc-learning-statement-node' as const
+  static props = ccGraphShapeProps['cc-learning-statement-node']
+
+  getDefaultProps(): CCLearningStatementNodeShape['props'] {
+    const defaultProps = getDefaultCCLearningStatementNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCLearningStatementNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCLearningStatementNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Learning Statement"
+          value={shape.props.lesson_learning_statement}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Statement Type"
+          value={shape.props.lesson_learning_statement_type}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Statement ID"
+          value={shape.props.lesson_learning_statement_id}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCPastoralStructureNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCPastoralStructureNodeShapeUtil.tsx
new file mode 100644
index 0000000..fec87a5
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCPastoralStructureNodeShapeUtil.tsx
@@ -0,0 +1,45 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCPastoralStructureNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCPastoralStructureNodeProps } from './cc-graph-types'
+
+
+export interface CCPastoralStructureNodeShape extends CCBaseShape {
+  type: 'cc-pastoral-structure-node'
+  props: CCPastoralStructureNodeProps
+}
+
+export class CCPastoralStructureNodeShapeUtil extends CCBaseShapeUtil<CCPastoralStructureNodeShape> {
+  static type = 'cc-pastoral-structure-node' as const
+  static props = ccGraphShapeProps['cc-pastoral-structure-node']
+
+  getDefaultProps(): CCPastoralStructureNodeShape['props'] {
+    const defaultProps = getDefaultCCPastoralStructureNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCPastoralStructureNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCPastoralStructureNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Structure Type"
+          value="Pastoral"
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCPlannedLessonNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCPlannedLessonNodeShapeUtil.tsx
new file mode 100644
index 0000000..4bfc6e0
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCPlannedLessonNodeShapeUtil.tsx
@@ -0,0 +1,140 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCPlannedLessonNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCPlannedLessonNodeProps } from './cc-graph-types'
+
+export interface CCPlannedLessonNodeShape extends CCBaseShape {
+  type: 'cc-planned-lesson-node'
+  props: CCPlannedLessonNodeProps
+}
+
+export class CCPlannedLessonNodeShapeUtil extends CCBaseShapeUtil<CCPlannedLessonNodeShape> {
+  static type = 'cc-planned-lesson-node' as const
+  static props = ccGraphShapeProps['cc-planned-lesson-node']
+
+  getDefaultProps(): CCPlannedLessonNodeShape['props'] {
+    const defaultProps = getDefaultCCPlannedLessonNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCPlannedLessonNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCPlannedLessonNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Subject Class"
+          value={shape.props.subject_class}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Date"
+          value={shape.props.date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Start Time"
+          value={shape.props.start_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Time"
+          value={shape.props.end_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Period Code"
+          value={shape.props.period_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Year Group"
+          value={shape.props.year_group}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Subject"
+          value={shape.props.subject}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Teacher Code"
+          value={shape.props.teacher_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Planning Status"
+          value={shape.props.planning_status}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Topic Code"
+          value={shape.props.topic_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Topic Name"
+          value={shape.props.topic_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Lesson Code"
+          value={shape.props.lesson_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Lesson Name"
+          value={shape.props.lesson_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Learning Statement Codes"
+          value={shape.props.learning_statement_codes}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Learning Statements"
+          value={shape.props.learning_statements}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Learning Resource Codes"
+          value={shape.props.learning_resource_codes}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Learning Resources"
+          value={shape.props.learning_resources}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCRegistrationPeriodNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCRegistrationPeriodNodeShapeUtil.tsx
new file mode 100644
index 0000000..44ec5a9
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCRegistrationPeriodNodeShapeUtil.tsx
@@ -0,0 +1,68 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCRegistrationPeriodNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCRegistrationPeriodNodeProps } from './cc-graph-types'
+
+export interface CCRegistrationPeriodNodeShape extends CCBaseShape {
+  type: 'cc-registration-period-node'
+  props: CCRegistrationPeriodNodeProps
+}
+
+export class CCRegistrationPeriodNodeShapeUtil extends CCBaseShapeUtil<CCRegistrationPeriodNodeShape> {
+  static type = 'cc-registration-period-node' as const
+  static props = ccGraphShapeProps['cc-registration-period-node']
+
+  getDefaultProps(): CCRegistrationPeriodNodeShape['props'] {
+    const defaultProps = getDefaultCCRegistrationPeriodNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCRegistrationPeriodNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCRegistrationPeriodNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Name"
+          value={shape.props.name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Date"
+          value={shape.props.date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Start Time"
+          value={shape.props.start_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Time"
+          value={shape.props.end_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Period Code"
+          value={shape.props.period_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCRoomNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCRoomNodeShapeUtil.tsx
new file mode 100644
index 0000000..b051f73
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCRoomNodeShapeUtil.tsx
@@ -0,0 +1,50 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCRoomNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCRoomNodeProps } from './cc-graph-types'
+
+export interface CCRoomNodeShape extends CCBaseShape {
+  type: 'cc-room-node'
+  props: CCRoomNodeProps
+}
+
+export class CCRoomNodeShapeUtil extends CCBaseShapeUtil<CCRoomNodeShape> {
+  static type = 'cc-room-node' as const
+  static props = ccGraphShapeProps['cc-room-node']
+
+  getDefaultProps(): CCRoomNodeShape['props'] {
+    const defaultProps = getDefaultCCRoomNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCRoomNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCRoomNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Room Name"
+          value={shape.props.room_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Room Code"
+          value={shape.props.room_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+}
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCSchoolNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCSchoolNodeShapeUtil.tsx
new file mode 100644
index 0000000..9b08319
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCSchoolNodeShapeUtil.tsx
@@ -0,0 +1,54 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil';
+import { CCBaseShape } from '../cc-types';
+import { NodeProperty } from './cc-graph-shared';
+import { ccGraphShapeProps, getDefaultCCSchoolNodeProps } from './cc-graph-props';
+import { getNodeStyles } from './cc-graph-styles';
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles';
+import { CCSchoolNodeProps } from './cc-graph-types';
+
+export interface CCSchoolNodeShape extends CCBaseShape {
+  type: 'cc-school-node';
+  props: CCSchoolNodeProps;
+}
+
+export class CCSchoolNodeShapeUtil extends CCBaseShapeUtil<CCSchoolNodeShape> {
+  static type = 'cc-school-node' as const;
+  static props = ccGraphShapeProps['cc-school-node'];
+
+  getDefaultProps(): CCSchoolNodeShape['props'] {
+    const defaultProps = getDefaultCCSchoolNodeProps();
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCSchoolNodeShapeUtil.type]];
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    };
+  }
+
+  DefaultComponent = () => null;
+
+  renderContent = (shape: CCSchoolNodeShape) => {
+    const styles = getNodeStyles(shape.type);
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="School Name"
+          value={shape.props.school_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="School Website"
+          value={shape.props.school_website}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="School UUID"
+          value={shape.props.school_uuid}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    );
+  };
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCSchoolTimetableNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCSchoolTimetableNodeShapeUtil.tsx
new file mode 100644
index 0000000..1f50eda
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCSchoolTimetableNodeShapeUtil.tsx
@@ -0,0 +1,50 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCSchoolTimetableNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCSchoolTimetableNodeProps } from './cc-graph-types'
+
+export interface CCSchoolTimetableNodeShape extends CCBaseShape {
+  type: 'cc-school-timetable-node'
+  props: CCSchoolTimetableNodeProps
+}
+
+export class CCSchoolTimetableNodeShapeUtil extends CCBaseShapeUtil<CCSchoolTimetableNodeShape> {
+  static type = 'cc-school-timetable-node' as const
+  static props = ccGraphShapeProps['cc-school-timetable-node']
+
+  getDefaultProps(): CCSchoolTimetableNodeShape['props'] {
+    const defaultProps = getDefaultCCSchoolTimetableNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCSchoolTimetableNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCSchoolTimetableNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Start Date"
+          value={shape.props.start_date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Date"
+          value={shape.props.end_date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCScienceLabNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCScienceLabNodeShapeUtil.tsx
new file mode 100644
index 0000000..8df6263
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCScienceLabNodeShapeUtil.tsx
@@ -0,0 +1,80 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCScienceLabNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCScienceLabNodeProps } from './cc-graph-types'
+
+export interface CCScienceLabNodeShape extends CCBaseShape {
+  type: 'cc-science-lab-node'
+  props: CCScienceLabNodeProps
+}
+
+export class CCScienceLabNodeShapeUtil extends CCBaseShapeUtil<CCScienceLabNodeShape> {
+  static type = 'cc-science-lab-node' as const
+  static props = ccGraphShapeProps['cc-science-lab-node']
+
+  getDefaultProps(): CCScienceLabNodeShape['props'] {
+    const defaultProps = getDefaultCCScienceLabNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCScienceLabNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCScienceLabNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Lab Title"
+          value={shape.props.science_lab_title}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Summary"
+          value={shape.props.science_lab_summary}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Requirements"
+          value={shape.props.science_lab_requirements}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Procedure"
+          value={shape.props.science_lab_procedure}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Safety"
+          value={shape.props.science_lab_safety}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Web Links"
+          value={shape.props.science_lab_weblinks}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Lab ID"
+          value={shape.props.science_lab_id}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCStudentNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCStudentNodeShapeUtil.tsx
new file mode 100644
index 0000000..4fb2c62
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCStudentNodeShapeUtil.tsx
@@ -0,0 +1,56 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil';
+import { CCBaseShape } from '../cc-types';
+import { NodeProperty } from './cc-graph-shared';
+import { ccGraphShapeProps, getDefaultCCStudentNodeProps } from './cc-graph-props';
+import { getNodeStyles } from './cc-graph-styles';
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles';
+import { CCStudentNodeProps } from './cc-graph-types';
+
+export interface CCStudentNodeShape extends CCBaseShape {
+  type: 'cc-student-node';
+  props: CCStudentNodeProps;
+}
+
+export class CCStudentNodeShapeUtil extends CCBaseShapeUtil<CCStudentNodeShape> {
+  static type = 'cc-student-node' as const;
+  static props = ccGraphShapeProps['cc-student-node'];
+
+  getDefaultProps(): CCStudentNodeShape['props'] {
+    const defaultProps = getDefaultCCStudentNodeProps();
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCStudentNodeShapeUtil.type]];
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    };
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null;
+
+  renderContent = (shape: CCStudentNodeShape) => {
+    const styles = getNodeStyles(shape.type);
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Student Name"
+          value={shape.props.student_name_formal}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Student Code"
+          value={shape.props.student_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Email"
+          value={shape.props.student_email}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    );
+  };
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCSubjectClassNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCSubjectClassNodeShapeUtil.tsx
new file mode 100644
index 0000000..a76b95b
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCSubjectClassNodeShapeUtil.tsx
@@ -0,0 +1,62 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCSubjectClassNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCSubjectClassNodeProps } from './cc-graph-types'
+
+export interface CCSubjectClassNodeShape extends CCBaseShape {
+  type: 'cc-subject-class-node'
+  props: CCSubjectClassNodeProps
+}
+
+export class CCSubjectClassNodeShapeUtil extends CCBaseShapeUtil<CCSubjectClassNodeShape> {
+  static type = 'cc-subject-class-node' as const
+  static props = ccGraphShapeProps['cc-subject-class-node']
+
+  getDefaultProps(): CCSubjectClassNodeShape['props'] {
+    const defaultProps = getDefaultCCSubjectClassNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCSubjectClassNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCSubjectClassNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Class Code"
+          value={shape.props.subject_class_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Year Group"
+          value={shape.props.year_group}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Subject"
+          value={shape.props.subject}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Subject Code"
+          value={shape.props.subject_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCSubjectNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCSubjectNodeShapeUtil.tsx
new file mode 100644
index 0000000..ade06ad
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCSubjectNodeShapeUtil.tsx
@@ -0,0 +1,50 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCSubjectNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCSubjectNodeProps } from './cc-graph-types'
+
+export interface CCSubjectNodeShape extends CCBaseShape {
+  type: 'cc-subject-node'
+  props: CCSubjectNodeProps
+}
+
+export class CCSubjectNodeShapeUtil extends CCBaseShapeUtil<CCSubjectNodeShape> {
+  static type = 'cc-subject-node' as const
+  static props = ccGraphShapeProps['cc-subject-node']
+
+  getDefaultProps(): CCSubjectNodeShape['props'] {
+    const defaultProps = getDefaultCCSubjectNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCSubjectNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCSubjectNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Subject Name"
+          value={shape.props.subject_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Subject Code"
+          value={shape.props.subject_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCTeacherNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCTeacherNodeShapeUtil.tsx
new file mode 100644
index 0000000..241caf4
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCTeacherNodeShapeUtil.tsx
@@ -0,0 +1,80 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { 
+  DefaultNodeComponent,
+  NodeErrorDisplay,
+  checkShapeState,
+  checkDefaultComponent 
+} from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCTeacherNodeProps } from './cc-graph-props'
+import { getNodeStyles, NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCTeacherNodeProps } from './cc-graph-types'
+
+export interface CCTeacherNodeShape extends CCBaseShape {
+  type: 'cc-teacher-node'
+  props: CCTeacherNodeProps
+}
+
+export class CCTeacherNodeShapeUtil extends CCBaseShapeUtil<CCTeacherNodeShape> {
+  static type = 'cc-teacher-node' as const
+  static props = ccGraphShapeProps['cc-teacher-node']
+
+  getDefaultProps(): CCTeacherNodeShape['props'] {
+    const defaultProps = getDefaultCCTeacherNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCTeacherNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor
+    }
+  }
+
+  renderContent = (shape: CCTeacherNodeShape) => {
+    const { props } = shape
+    const { state, defaultComponent } = props
+    const styles = getNodeStyles(shape.type)
+    const isPageChild = state?.isPageChild ?? true
+
+    // Check state and default component
+    const stateError = checkShapeState(state)
+    if (stateError.hasError) {
+      return <NodeErrorDisplay message={stateError.error.message} details={stateError.error.details} />
+    }
+
+    const defaultComponentError = checkDefaultComponent(defaultComponent)
+    if (defaultComponentError.hasError) {
+      return <NodeErrorDisplay message={defaultComponentError.error.message} details={defaultComponentError.error.details} />
+    }
+
+    if (isPageChild) {
+      // Define properties to show for page-level view
+      const properties = [
+        { label: 'Teacher Name', value: props.teacher_name_formal },
+        { label: 'Teacher Code', value: props.teacher_code },
+        { label: 'Email', value: props.teacher_email },
+        { label: 'Node Snapshot', value: props.tldraw_snapshot }
+      ]
+
+      return (
+        <div style={styles.container}>
+          {defaultComponent && <DefaultNodeComponent tldraw_snapshot={props.tldraw_snapshot} />}
+          {properties.map((prop, index) => (
+            <div key={index} style={styles.property.wrapper}>
+              <span style={styles.property.label}>{prop.label}:</span>
+              <span style={styles.property.value}>{prop.value}</span>
+            </div>
+          ))}
+        </div>
+      )
+    }
+
+    // Simplified view when child of another shape
+    return (
+      <div style={styles.container}>
+        <div style={styles.property.wrapper}>
+          <span style={styles.property.label}>Code:</span>
+          <span style={styles.property.value}>{props.teacher_code}</span>
+        </div>
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCTeacherTimetableNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCTeacherTimetableNodeShapeUtil.tsx
new file mode 100644
index 0000000..00bc571
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCTeacherTimetableNodeShapeUtil.tsx
@@ -0,0 +1,55 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCTeacherTimetableNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCTeacherTimetableNodeProps } from './cc-graph-types'
+export interface CCTeacherTimetableNodeShape extends CCBaseShape {
+  type: 'cc-teacher-timetable-node'
+  props: CCTeacherTimetableNodeProps
+}
+
+export class CCTeacherTimetableNodeShapeUtil extends CCBaseShapeUtil<CCTeacherTimetableNodeShape> {
+  static type = 'cc-teacher-timetable-node' as const
+  static props = ccGraphShapeProps['cc-teacher-timetable-node']
+
+  getDefaultProps(): CCTeacherTimetableNodeShape['props'] {
+    const defaultProps = getDefaultCCTeacherTimetableNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCTeacherTimetableNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCTeacherTimetableNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Teacher ID"
+          value={shape.props.teacher_id}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Start Date"
+          value={shape.props.start_date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Date"
+          value={shape.props.end_date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCTimetableLessonNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCTimetableLessonNodeShapeUtil.tsx
new file mode 100644
index 0000000..11eefbb
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCTimetableLessonNodeShapeUtil.tsx
@@ -0,0 +1,68 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCTimetableLessonNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCTimetableLessonNodeProps } from './cc-graph-types'
+
+export interface CCTimetableLessonNodeShape extends CCBaseShape {
+  type: 'cc-timetable-lesson-node'
+  props: CCTimetableLessonNodeProps
+}
+
+export class CCTimetableLessonNodeShapeUtil extends CCBaseShapeUtil<CCTimetableLessonNodeShape> {
+  static type = 'cc-timetable-lesson-node' as const
+  static props = ccGraphShapeProps['cc-timetable-lesson-node']
+
+  getDefaultProps(): CCTimetableLessonNodeShape['props'] {
+    const defaultProps = getDefaultCCTimetableLessonNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCTimetableLessonNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCTimetableLessonNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Subject Class"
+          value={shape.props.subject_class}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Date"
+          value={shape.props.date}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Start Time"
+          value={shape.props.start_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Time"
+          value={shape.props.end_time}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Period Code"
+          value={shape.props.period_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCTopicLessonNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCTopicLessonNodeShapeUtil.tsx
new file mode 100644
index 0000000..56d4924
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCTopicLessonNodeShapeUtil.tsx
@@ -0,0 +1,80 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCTopicLessonNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCTopicLessonNodeProps } from './cc-graph-types'
+
+export interface CCTopicLessonNodeShape extends CCBaseShape {
+  type: 'cc-topic-lesson-node'
+  props: CCTopicLessonNodeProps
+}
+
+export class CCTopicLessonNodeShapeUtil extends CCBaseShapeUtil<CCTopicLessonNodeShape> {
+  static type = 'cc-topic-lesson-node' as const
+  static props = ccGraphShapeProps['cc-topic-lesson-node']
+
+  getDefaultProps(): CCTopicLessonNodeShape['props'] {
+    const defaultProps = getDefaultCCTopicLessonNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCTopicLessonNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCTopicLessonNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Lesson Title"
+          value={shape.props.topic_lesson_title}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Lesson Type"
+          value={shape.props.topic_lesson_type}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Length"
+          value={shape.props.topic_lesson_length}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Skills Learned"
+          value={shape.props.topic_lesson_skills_learned}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Suggested Activities"
+          value={shape.props.topic_lesson_suggested_activities}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Web Links"
+          value={shape.props.topic_lesson_weblinks}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Lesson ID"
+          value={shape.props.topic_lesson_id}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCTopicNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCTopicNodeShapeUtil.tsx
new file mode 100644
index 0000000..d57e871
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCTopicNodeShapeUtil.tsx
@@ -0,0 +1,68 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCTopicNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCTopicNodeProps } from './cc-graph-types'
+
+export interface CCTopicNodeShape extends CCBaseShape {
+  type: 'cc-topic-node'
+  props: CCTopicNodeProps
+}
+
+export class CCTopicNodeShapeUtil extends CCBaseShapeUtil<CCTopicNodeShape> {
+  static type = 'cc-topic-node' as const
+  static props = ccGraphShapeProps['cc-topic-node']
+
+  getDefaultProps(): CCTopicNodeShape['props'] {
+    const defaultProps = getDefaultCCTopicNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCTopicNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCTopicNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Topic Title"
+          value={shape.props.topic_title}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Total Lessons"
+          value={shape.props.total_number_of_lessons_for_topic}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Topic Type"
+          value={shape.props.topic_type}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Assessment Type"
+          value={shape.props.topic_assessment_type}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Topic ID"
+          value={shape.props.topic_id}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCUserNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCUserNodeShapeUtil.tsx
new file mode 100644
index 0000000..f4b7770
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCUserNodeShapeUtil.tsx
@@ -0,0 +1,73 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { 
+  DefaultNodeComponent, 
+  NodeErrorDisplay,
+  checkShapeState,
+  checkDefaultComponent
+} from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCUserNodeProps } from './cc-graph-props'
+import { CCUserNodeProps } from './cc-graph-types'
+import { getNodeStyles, NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+
+export interface CCUserNodeShape extends CCBaseShape {
+  type: 'cc-user-node'
+  props: CCUserNodeProps
+}
+
+export class CCUserNodeShapeUtil extends CCBaseShapeUtil<CCUserNodeShape> {
+  static type = 'cc-user-node' as const
+  static props = ccGraphShapeProps['cc-user-node']
+
+  getDefaultProps(): CCUserNodeProps {
+    const defaultProps = getDefaultCCUserNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCUserNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+      backgroundColor: theme.backgroundColor,
+    }
+  }
+
+  renderContent = (shape: CCUserNodeShape) => {
+    const { props } = shape
+    const { state, defaultComponent } = props
+    const styles = getNodeStyles(shape.type)
+
+    // Check state and default component
+    const stateError = checkShapeState(state)
+    if (stateError.hasError) {
+      return <NodeErrorDisplay message={stateError.error.message} details={stateError.error.details} />
+    }
+
+    const defaultComponentError = checkDefaultComponent(defaultComponent)
+    if (defaultComponentError.hasError) {
+      return <NodeErrorDisplay message={defaultComponentError.error.message} details={defaultComponentError.error.details} />
+    }
+
+    // Define properties to show based on view type
+    const properties = defaultComponent ? [
+      { label: 'User Name', value: props.user_name },
+      { label: 'User Email', value: props.user_email },
+      { label: 'User Type', value: props.user_type },
+      { label: 'User ID', value: props.user_id },
+      { label: 'Node Snapshot', value: props.tldraw_snapshot },
+      { label: 'Worker Node Data', value: props.worker_node_data }
+    ] : [
+      { label: 'User Name', value: props.user_name },
+      { label: 'User Email', value: props.user_email }
+    ]
+
+    return (
+      <div style={styles.container}>
+        {defaultComponent && <DefaultNodeComponent tldraw_snapshot={props.tldraw_snapshot} />}
+        {properties.map((prop, index) => (
+          <div key={index} style={styles.property.wrapper}>
+            <span style={styles.property.label}>{prop.label}:</span>
+            <span style={styles.property.value}>{prop.value}</span>
+          </div>
+        ))}
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCUserTeacherTimetableNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCUserTeacherTimetableNodeShapeUtil.tsx
new file mode 100644
index 0000000..7b00a4e
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCUserTeacherTimetableNodeShapeUtil.tsx
@@ -0,0 +1,50 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCUserTeacherTimetableNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCUserTeacherTimetableNodeProps } from './cc-graph-types'
+
+export interface CCUserTeacherTimetableNodeShape extends CCBaseShape {
+  type: 'cc-user-teacher-timetable-node'
+  props: CCUserTeacherTimetableNodeProps
+}
+
+export class CCUserTeacherTimetableNodeShapeUtil extends CCBaseShapeUtil<CCUserTeacherTimetableNodeShape> {
+  static type = 'cc-user-teacher-timetable-node' as const
+  static props = ccGraphShapeProps['cc-user-teacher-timetable-node']
+
+  getDefaultProps(): CCUserTeacherTimetableNodeShape['props'] {
+    const defaultProps = getDefaultCCUserTeacherTimetableNodeProps() as CCUserTeacherTimetableNodeShape['props']
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCUserTeacherTimetableNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCUserTeacherTimetableNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="School DB"
+          value={shape.props.school_db_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="School Timetable ID"
+          value={shape.props.school_timetable_id}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCUserTimetableLessonNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCUserTimetableLessonNodeShapeUtil.tsx
new file mode 100644
index 0000000..e9ffcfd
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCUserTimetableLessonNodeShapeUtil.tsx
@@ -0,0 +1,80 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty, formatDate } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCUserTimetableLessonNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCUserTimetableLessonNodeProps } from './cc-graph-types'
+
+export interface CCUserTimetableLessonNodeShape extends CCBaseShape {
+  type: 'cc-user-timetable-lesson-node'
+  props: CCUserTimetableLessonNodeProps
+}
+
+export class CCUserTimetableLessonNodeShapeUtil extends CCBaseShapeUtil<CCUserTimetableLessonNodeShape> {
+  static type = 'cc-user-timetable-lesson-node' as const
+  static props = ccGraphShapeProps['cc-user-timetable-lesson-node']
+
+  getDefaultProps(): CCUserTimetableLessonNodeShape['props'] {
+    const defaultProps = getDefaultCCUserTimetableLessonNodeProps() as CCUserTimetableLessonNodeShape['props']
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCUserTimetableLessonNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCUserTimetableLessonNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Subject Class"
+          value={shape.props.subject_class}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Date"
+          value={formatDate(shape.props.date)}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Start Time"
+          value={formatDate(shape.props.start_time)}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="End Time"
+          value={formatDate(shape.props.end_time)}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Period Code"
+          value={shape.props.period_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="School DB"
+          value={shape.props.school_db_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="School Period ID"
+          value={shape.props.school_period_id}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCYearGroupNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCYearGroupNodeShapeUtil.tsx
new file mode 100644
index 0000000..48a1c44
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCYearGroupNodeShapeUtil.tsx
@@ -0,0 +1,50 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCYearGroupNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCYearGroupNodeProps } from './cc-graph-types'
+
+export interface CCYearGroupNodeShape extends CCBaseShape {
+  type: 'cc-year-group-node'
+  props: CCYearGroupNodeProps
+}
+
+export class CCYearGroupNodeShapeUtil extends CCBaseShapeUtil<CCYearGroupNodeShape> {
+  static type = 'cc-year-group-node' as const
+  static props = ccGraphShapeProps['cc-year-group-node']
+
+  getDefaultProps(): CCYearGroupNodeShape['props'] {
+    const defaultProps = getDefaultCCYearGroupNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCYearGroupNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCYearGroupNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Year Group"
+          value={shape.props.year_group}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Year Group Name"
+          value={shape.props.year_group_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/CCYearGroupSyllabusNodeShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/CCYearGroupSyllabusNodeShapeUtil.tsx
new file mode 100644
index 0000000..469dae2
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/CCYearGroupSyllabusNodeShapeUtil.tsx
@@ -0,0 +1,68 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { NodeProperty } from './cc-graph-shared'
+import { ccGraphShapeProps, getDefaultCCYearGroupSyllabusNodeProps } from './cc-graph-props'
+import { getNodeStyles } from './cc-graph-styles'
+import { NODE_THEMES, NODE_TYPE_THEMES } from './cc-graph-styles'
+import { CCYearGroupSyllabusNodeProps } from './cc-graph-types'
+
+export interface CCYearGroupSyllabusNodeShape extends CCBaseShape {
+  type: 'cc-year-group-syllabus-node'
+  props: CCYearGroupSyllabusNodeProps
+}
+
+export class CCYearGroupSyllabusNodeShapeUtil extends CCBaseShapeUtil<CCYearGroupSyllabusNodeShape> {
+  static type = 'cc-year-group-syllabus-node' as const
+  static props = ccGraphShapeProps['cc-year-group-syllabus-node']
+
+  getDefaultProps(): CCYearGroupSyllabusNodeShape['props'] {
+    const defaultProps = getDefaultCCYearGroupSyllabusNodeProps()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES[CCYearGroupSyllabusNodeShapeUtil.type]]
+    return {
+      ...defaultProps,
+      headerColor: theme.headerColor,
+    }
+  }
+
+  // Override to nullify the default node component
+  DefaultComponent = () => null
+
+  renderContent = (shape: CCYearGroupSyllabusNodeShape) => {
+    const styles = getNodeStyles(shape.type)
+    
+    return (
+      <div style={styles.container}>
+        <NodeProperty 
+          label="Syllabus Name"
+          value={shape.props.yr_syllabus_name}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Year Group"
+          value={shape.props.yr_syllabus_year_group}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Subject"
+          value={shape.props.yr_syllabus_subject}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Subject Code"
+          value={shape.props.yr_syllabus_subject_code}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+        <NodeProperty 
+          label="Syllabus ID"
+          value={shape.props.yr_syllabus_id}
+          labelStyle={styles.property.label}
+          valueStyle={styles.property.value}
+        />
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/cc-graph-migrations.ts b/src/utils/tldraw/cc-base/cc-graph/cc-graph-migrations.ts
new file mode 100644
index 0000000..f53e5fd
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/cc-graph-migrations.ts
@@ -0,0 +1,32 @@
+import { ccGraphShapeProps } from './cc-graph-props'
+import { createShapePropsMigrationIds, createShapePropsMigrationSequence } from '@tldraw/tldraw'
+import { CCGraphShape, GraphShapeType } from './cc-graph-types'
+
+// Helper function to create version IDs for a shape type
+const createVersions = (shapeType: GraphShapeType) => {
+  return createShapePropsMigrationIds(shapeType, {
+    Initial: 1  // All shapes start at version 1 as required by TLDraw
+  })
+}
+
+// Helper function to create a migration sequence for a shape
+const createMigrationSequence = (shapeType: GraphShapeType) => {
+  const versions = createVersions(shapeType)
+  return createShapePropsMigrationSequence({
+    sequence: [
+      {
+        id: versions.Initial,
+        up: (props: CCGraphShape['props']) => {
+          // Initial version - no changes needed
+          return props
+        },
+      },
+    ],
+  })
+}
+
+// Create migrations for all graph shapes
+export const ccGraphMigrations = Object.keys(ccGraphShapeProps).reduce((acc, shapeType) => ({
+  ...acc,
+  [shapeType]: createMigrationSequence(shapeType as GraphShapeType)
+}), {} as Record<GraphShapeType, ReturnType<typeof createShapePropsMigrationSequence>>)
diff --git a/src/utils/tldraw/cc-base/cc-graph/cc-graph-props.ts b/src/utils/tldraw/cc-base/cc-graph/cc-graph-props.ts
new file mode 100644
index 0000000..61b6b70
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/cc-graph-props.ts
@@ -0,0 +1,657 @@
+import { T, TLBinding, TLShapeId } from '@tldraw/tldraw'
+import { baseShapeProps } from '../cc-props'
+import { ShapeState } from './cc-graph-types'
+
+// State props validation
+const stateProps = T.object({
+  parentId: T.optional(T.string.nullable()),
+  isPageChild: T.optional(T.boolean.nullable()),
+  hasChildren: T.optional(T.boolean.nullable()),
+  bindings: T.optional(T.arrayOf(T.object({})).nullable())
+})
+
+// Base props for all nodes
+const graphBaseProps = {
+  ...baseShapeProps,
+  __primarylabel__: T.string,
+  unique_id: T.string,
+  tldraw_snapshot: T.string,
+  created: T.string,
+  merged: T.string,
+  state: T.optional(stateProps.nullable()),
+  defaultComponent: T.optional(T.boolean.nullable())
+}
+
+// Props for specific node types
+export const ccGraphShapeProps = {
+  'cc-user-node': {
+    ...graphBaseProps,
+    user_name: T.string,
+    user_email: T.string,
+    user_type: T.string,
+    user_id: T.string,
+    worker_node_data: T.string,
+  },
+  'cc-teacher-node': {
+    ...graphBaseProps,
+    teacher_code: T.string,
+    teacher_name_formal: T.string,
+    teacher_email: T.string,
+    user_db_name: T.string,
+    worker_db_name: T.string,
+  },
+  'cc-student-node': {
+    ...graphBaseProps,
+    student_code: T.string,
+    student_name_formal: T.string,
+    student_email: T.string,
+    worker_db_name: T.string,
+  },
+  'cc-calendar-node': {
+    ...graphBaseProps,
+    name: T.string,
+    calendar_type: T.string,
+    calendar_name: T.string,
+    start_date: T.string,
+    end_date: T.string,
+  },
+  'cc-calendar-year-node': {
+    ...graphBaseProps,
+    year: T.string,
+  },
+  'cc-calendar-month-node': {
+    ...graphBaseProps,
+    year: T.string,
+    month: T.string,
+    month_name: T.string,
+  },
+  'cc-calendar-week-node': {
+    ...graphBaseProps,
+    start_date: T.string,
+    week_number: T.string,
+    iso_week: T.string,
+  },
+  'cc-calendar-day-node': {
+    ...graphBaseProps,
+    date: T.string,
+    day_of_week: T.string,
+    iso_day: T.string,
+  },
+  'cc-calendar-time-chunk-node': {
+    ...graphBaseProps,
+    start_time: T.string,
+    end_time: T.string,
+  },
+  'cc-school-node': {
+    ...graphBaseProps,
+    school_uuid: T.string,
+    school_name: T.string,
+    school_website: T.string,
+  },
+  'cc-department-node': {
+    ...graphBaseProps,
+    department_name: T.string,
+  },
+  'cc-room-node': {
+    ...graphBaseProps,
+    room_code: T.string,
+    room_name: T.string,
+  },
+  'cc-subject-class-node': {
+    ...graphBaseProps,
+    subject_class_code: T.string,
+    year_group: T.string,
+    subject: T.string,
+    subject_code: T.string,
+  },
+  'cc-pastoral-structure-node': {
+    ...graphBaseProps,
+  },
+  'cc-year-group-node': {
+    ...graphBaseProps,
+    year_group: T.string,
+    year_group_name: T.string,
+  },
+  'cc-curriculum-structure-node': {
+    ...graphBaseProps,
+  },
+  'cc-key-stage-node': {
+    ...graphBaseProps,
+    key_stage_name: T.string,
+    key_stage: T.string,
+  },
+  'cc-key-stage-syllabus-node': {
+    ...graphBaseProps,
+    ks_syllabus_id: T.string,
+    ks_syllabus_name: T.string,
+    ks_syllabus_key_stage: T.string,
+    ks_syllabus_subject: T.string,
+    ks_syllabus_subject_code: T.string,
+  },
+  'cc-year-group-syllabus-node': {
+    ...graphBaseProps,
+    yr_syllabus_id: T.string,
+    yr_syllabus_name: T.string,
+    yr_syllabus_year_group: T.string,
+    yr_syllabus_subject: T.string,
+    yr_syllabus_subject_code: T.string,
+  },
+  'cc-subject-node': {
+    ...graphBaseProps,
+    subject_code: T.string,
+    subject_name: T.string,
+  },
+  'cc-topic-node': {
+    ...graphBaseProps,
+    topic_id: T.string,
+    topic_title: T.string,
+    total_number_of_lessons_for_topic: T.string,
+    topic_type: T.string,
+    topic_assessment_type: T.string,
+  },
+  'cc-topic-lesson-node': {
+    ...graphBaseProps,
+    topic_lesson_id: T.string,
+    topic_lesson_title: T.string,
+    topic_lesson_type: T.string,
+    topic_lesson_length: T.string,
+    topic_lesson_skills_learned: T.string,
+    topic_lesson_suggested_activities: T.string,
+    topic_lesson_weblinks: T.string,
+  },
+  'cc-learning-statement-node': {
+    ...graphBaseProps,
+    lesson_learning_statement_id: T.string,
+    lesson_learning_statement: T.string,
+    lesson_learning_statement_type: T.string,
+  },
+  'cc-science-lab-node': {
+    ...graphBaseProps,
+    science_lab_id: T.string,
+    science_lab_title: T.string,
+    science_lab_summary: T.string,
+    science_lab_requirements: T.string,
+    science_lab_procedure: T.string,
+    science_lab_safety: T.string,
+    science_lab_weblinks: T.string,
+  },
+  'cc-teacher-timetable-node': {
+    ...graphBaseProps,
+    teacher_id: T.string,
+    start_date: T.string,
+    end_date: T.string,
+  },
+  'cc-timetable-lesson-node': {
+    ...graphBaseProps,
+    subject_class: T.string,
+    date: T.string,
+    start_time: T.string,
+    end_time: T.string,
+    period_code: T.string,
+  },
+  'cc-planned-lesson-node': {
+    ...graphBaseProps,
+    date: T.string,
+    start_time: T.string,
+    end_time: T.string,
+    period_code: T.string,
+    subject_class: T.string,
+    year_group: T.string,
+    subject: T.string,
+    teacher_code: T.string,
+    planning_status: T.string,
+    topic_code: T.string,
+    topic_name: T.string,
+    lesson_code: T.string,
+    lesson_name: T.string,
+    learning_statement_codes: T.string,
+    learning_statements: T.string,
+    learning_resource_codes: T.string,
+    learning_resources: T.string,
+  },
+  'cc-school-timetable-node': {
+    ...graphBaseProps,
+    start_date: T.string,
+    end_date: T.string,
+  },
+  'cc-academic-year-node': {
+    ...graphBaseProps,
+    year: T.string,
+  },
+  'cc-academic-term-node': {
+    ...graphBaseProps,
+    term_name: T.string,
+    term_number: T.string,
+    start_date: T.string,
+    end_date: T.string,
+  },
+  'cc-academic-week-node': {
+    ...graphBaseProps,
+    academic_week_number: T.string,
+    start_date: T.string,
+    week_type: T.string,
+  },
+  'cc-academic-day-node': {
+    ...graphBaseProps,
+    academic_day: T.string,
+    date: T.string,
+    day_of_week: T.string,
+    day_type: T.string,
+  },
+  'cc-academic-period-node': {
+    ...graphBaseProps,
+    name: T.string,
+    date: T.string,
+    start_time: T.string,
+    end_time: T.string,
+    period_code: T.string,
+  },
+  'cc-registration-period-node': {
+    ...graphBaseProps,
+    name: T.string,
+    date: T.string,
+    start_time: T.string,
+    end_time: T.string,
+    period_code: T.string,
+  },
+  'cc-department-structure-node': {
+    ...graphBaseProps,
+    department_structure_type: T.string,
+  },
+  'cc-user-teacher-timetable-node': {
+    ...graphBaseProps,
+    school_db_name: T.string,
+    school_timetable_id: T.string,
+  },
+  'cc-user-timetable-lesson-node': {
+    ...graphBaseProps,
+    subject_class: T.string,
+    date: T.string,
+    start_time: T.string,
+    end_time: T.string,
+    period_code: T.string,
+    school_db_name: T.string,
+    school_period_id: T.string,
+  },
+} as const
+
+// Default props getters
+export const getDefaultBaseProps = () => ({
+  w: 200 as number,
+  h: 200 as number,
+  headerColor: '#3e6589' as string,
+  backgroundColor: '#f0f0f0' as string,
+  title: 'Untitled' as string,
+  isLocked: false as boolean,
+  unique_id: '' as string,
+  tldraw_snapshot: '' as string,
+  created: '' as string,
+  merged: '' as string,
+  state: {
+    parentId: null as TLShapeId | null,
+    isPageChild: true as boolean | null,
+    hasChildren: null as boolean | null,
+    bindings: null as TLBinding[] | null
+  } as ShapeState | null,
+  defaultComponent: true as boolean | null
+})
+
+export const getDefaultCCUserNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  __primarylabel__: 'User',
+  user_name: '',
+  user_email: '',
+  user_type: '',
+  user_id: '',
+  worker_node_data: ''
+})
+
+export const getDefaultCCTeacherNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  __primarylabel__: 'Teacher',
+  teacher_code: '',
+  teacher_name_formal: '',
+  teacher_email: '',
+  user_db_name: '',
+  school_db_name: '',
+})
+
+export const getDefaultCCStudentNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  __primarylabel__: 'Student',
+  student_code: '',
+  student_name_formal: '',
+  student_email: '',
+  school_db_name: '',
+  user_db_name: '',
+})
+
+export const getDefaultCCCalendarNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Calendar',
+  __primarylabel__: 'Calendar',
+  name: '',
+  calendar_type: '',
+  calendar_name: '',
+  start_date: '',
+  end_date: '',
+})
+
+export const getDefaultCCCalendarYearNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Calendar Year',
+  __primarylabel__: 'Calendar Year',
+  year: '',
+})
+
+export const getDefaultCCCalendarMonthNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Calendar Month',
+  __primarylabel__: 'Calendar Month',
+  year: '',
+  month: '',
+  month_name: '',
+})
+
+export const getDefaultCCCalendarWeekNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Calendar Week',
+  __primarylabel__: 'Calendar Week',
+  start_date: '',
+  week_number: '',
+  iso_week: '',
+})
+
+export const getDefaultCCCalendarDayNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Calendar Day',
+  __primarylabel__: 'Calendar Day',
+  date: '',
+  day_of_week: '',
+  iso_day: '',
+})
+
+export const getDefaultCCCalendarTimeChunkNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Calendar Time Chunk',
+  __primarylabel__: 'Calendar Time Chunk',
+  start_time: '',
+  end_time: '',
+})
+
+export const getDefaultCCSchoolNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'School',
+  __primarylabel__: 'School',
+  school_uuid: '',
+  school_name: '',
+  school_website: '',
+})
+
+export const getDefaultCCDepartmentNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Department',
+  __primarylabel__: 'Department',
+  department_name: '',
+})
+
+export const getDefaultCCRoomNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Room',
+  __primarylabel__: 'Room',
+  room_code: '',
+  room_name: '',
+})
+
+export const getDefaultCCSubjectClassNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Subject Class',
+  __primarylabel__: 'Subject Class',
+  subject_class_code: '',
+  year_group: '',
+  subject: '',
+  subject_code: '',
+})
+
+export const getDefaultCCPastoralStructureNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Pastoral Structure',
+  __primarylabel__: 'Pastoral Structure',
+  pastoral_structure_type: '',
+})
+
+export const getDefaultCCYearGroupNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Year Group',
+  __primarylabel__: 'Year Group',
+  year_group: '',
+  year_group_name: '',
+})
+
+export const getDefaultCCCurriculumStructureNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Curriculum Structure',
+  __primarylabel__: 'Curriculum Structure',
+  curriculum_structure_type: '',
+})
+
+export const getDefaultCCKeyStageNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Key Stage',
+  __primarylabel__: 'Key Stage',
+  key_stage_name: '',
+  key_stage: '',
+})
+
+export const getDefaultCCKeyStageSyllabusNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Key Stage Syllabus',
+  __primarylabel__: 'Key Stage Syllabus',
+  ks_syllabus_id: '',
+  ks_syllabus_name: '',
+  ks_syllabus_key_stage: '',
+  ks_syllabus_subject: '',
+  ks_syllabus_subject_code: '',
+})
+
+export const getDefaultCCYearGroupSyllabusNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Year Group Syllabus',
+  __primarylabel__: 'Year Group Syllabus',
+  yr_syllabus_id: '',
+  yr_syllabus_name: '',
+  yr_syllabus_year_group: '',
+  yr_syllabus_subject: '',
+  yr_syllabus_subject_code: '',
+})
+
+export const getDefaultCCSubjectNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Subject',
+  __primarylabel__: 'Subject',
+  subject_code: '',
+  subject_name: '',
+})
+
+export const getDefaultCCTopicNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Topic',
+  __primarylabel__: 'Topic',
+  topic_id: '',
+  topic_title: '',
+  total_number_of_lessons_for_topic: '',
+  topic_type: '',
+  topic_assessment_type: '',
+})
+
+export const getDefaultCCTopicLessonNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Topic Lesson',
+  __primarylabel__: 'Topic Lesson',
+  topic_lesson_id: '',
+  topic_lesson_title: '',
+  topic_lesson_type: '',
+  topic_lesson_length: '',
+  topic_lesson_skills_learned: '',
+  topic_lesson_suggested_activities: '',
+  topic_lesson_weblinks: '',
+})
+
+export const getDefaultCCLearningStatementNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Learning Statement',
+  __primarylabel__: 'Learning Statement',
+  lesson_learning_statement_id: '',
+  lesson_learning_statement: '',
+  lesson_learning_statement_type: '',
+})
+
+export const getDefaultCCScienceLabNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Science Lab',
+  __primarylabel__: 'Science Lab',
+  science_lab_id: '',
+  science_lab_title: '',
+  science_lab_summary: '',
+  science_lab_requirements: '',
+  science_lab_procedure: '',
+  science_lab_safety: '',
+  science_lab_weblinks: '',
+})
+
+export const getDefaultCCTeacherTimetableNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Teacher Timetable',
+  __primarylabel__: 'Teacher Timetable',
+  teacher_id: '',
+  start_date: '',
+  end_date: '',
+})
+
+export const getDefaultCCTimetableLessonNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Timetable Lesson',
+  __primarylabel__: 'Timetable Lesson',
+  subject_class: '',
+  date: '',
+  start_time: '',
+  end_time: '',
+  period_code: '',
+})
+
+export const getDefaultCCPlannedLessonNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Planned Lesson',
+  __primarylabel__: 'Planned Lesson',
+  date: '',
+  start_time: '',
+  end_time: '',
+  period_code: '',
+  subject_class: '',
+  year_group: '',
+  subject: '',
+  teacher_code: '',
+  planning_status: '',
+  topic_code: '',
+  topic_name: '',
+  lesson_code: '',
+  lesson_name: '',
+  learning_statement_codes: '',
+  learning_statements: '',
+  learning_resource_codes: '',
+  learning_resources: '',
+})
+
+export const getDefaultCCSchoolTimetableNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'School Timetable',
+  __primarylabel__: 'School Timetable',
+  start_date: '',
+  end_date: '',
+})
+
+export const getDefaultCCAcademicYearNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Academic Year',
+  __primarylabel__: 'Academic Year',
+  year: '',
+})
+
+export const getDefaultCCAcademicTermNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Academic Term',
+  __primarylabel__: 'Academic Term',
+  term_name: '',
+  term_number: '',
+  start_date: '',
+  end_date: '',
+})
+
+export const getDefaultCCAcademicWeekNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Academic Week',
+  __primarylabel__: 'Academic Week',
+  academic_week_number: '',
+  start_date: '',
+  week_type: '',
+})
+
+export const getDefaultCCAcademicDayNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Academic Day',
+  __primarylabel__: 'Academic Day',
+  academic_day: '',
+  date: '',
+  day_of_week: '',
+  day_type: '',
+})
+
+export const getDefaultCCAcademicPeriodNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Academic Period',
+  __primarylabel__: 'Academic Period',
+  name: '',
+  date: '',
+  start_time: '',
+  end_time: '',
+  period_code: '',
+})
+
+export const getDefaultCCRegistrationPeriodNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Registration Period',
+  __primarylabel__: 'Registration Period',
+  name: '',
+  date: '',
+  start_time: '',
+  end_time: '',
+  period_code: '',
+})
+
+export const getDefaultCCDepartmentStructureNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'Department Structure',
+  __primarylabel__: 'DepartmentStructure',
+  department_structure_type: '',
+})
+
+export const getDefaultCCUserTeacherTimetableNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'User Teacher Timetable',
+  __primarylabel__: 'UserTeacherTimetable',
+  school_db_name: '',
+  school_timetable_id: '',
+})
+
+export const getDefaultCCUserTimetableLessonNodeProps = () => ({
+  ...getDefaultBaseProps(),
+  title: 'User Timetable Lesson',
+  __primarylabel__: 'UserTimetableLesson',
+  subject_class: '',
+  date: '',
+  start_time: '',
+  end_time: '',
+  period_code: '',
+  school_db_name: '',
+  school_period_id: '',
+})
diff --git a/src/utils/tldraw/cc-base/cc-graph/cc-graph-shapes.ts b/src/utils/tldraw/cc-base/cc-graph/cc-graph-shapes.ts
new file mode 100644
index 0000000..15bacc0
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/cc-graph-shapes.ts
@@ -0,0 +1,175 @@
+import { TLShape } from '@tldraw/tldraw'
+import { CCUserNodeShape, CCUserNodeShapeUtil } from './CCUserNodeShapeUtil'
+import { CCTeacherNodeShape, CCTeacherNodeShapeUtil } from './CCTeacherNodeShapeUtil'
+import { CCStudentNodeShape, CCStudentNodeShapeUtil } from './CCStudentNodeShapeUtil'
+import { CCCalendarNodeShape, CCCalendarNodeShapeUtil } from './CCCalendarNodeShapeUtil'
+import { CCCalendarYearNodeShape, CCCalendarYearNodeShapeUtil } from './CCCalendarYearNodeShapeUtil'
+import { CCCalendarMonthNodeShape, CCCalendarMonthNodeShapeUtil } from './CCCalendarMonthNodeShapeUtil'
+import { CCCalendarWeekNodeShape, CCCalendarWeekNodeShapeUtil } from './CCCalendarWeekNodeShapeUtil'
+import { CCCalendarDayNodeShape, CCCalendarDayNodeShapeUtil } from './CCCalendarDayNodeShapeUtil'
+import { CCCalendarTimeChunkNodeShape, CCCalendarTimeChunkNodeShapeUtil } from './CCCalendarTimeChunkNodeShapeUtil'
+import { CCSchoolNodeShape, CCSchoolNodeShapeUtil } from './CCSchoolNodeShapeUtil'
+import { CCDepartmentNodeShape, CCDepartmentNodeShapeUtil } from './CCDepartmentNodeShapeUtil'
+import { CCRoomNodeShape, CCRoomNodeShapeUtil } from './CCRoomNodeShapeUtil'
+import { CCSubjectClassNodeShape, CCSubjectClassNodeShapeUtil } from './CCSubjectClassNodeShapeUtil'
+import { CCPastoralStructureNodeShape, CCPastoralStructureNodeShapeUtil } from './CCPastoralStructureNodeShapeUtil'
+import { CCYearGroupNodeShape, CCYearGroupNodeShapeUtil } from './CCYearGroupNodeShapeUtil'
+import { CCCurriculumStructureNodeShape, CCCurriculumStructureNodeShapeUtil } from './CCCurriculumStructureNodeShapeUtil'
+import { CCKeyStageNodeShape, CCKeyStageNodeShapeUtil } from './CCKeyStageNodeShapeUtil'
+import { CCKeyStageSyllabusNodeShape, CCKeyStageSyllabusNodeShapeUtil } from './CCKeyStageSyllabusNodeShapeUtil'
+import { CCYearGroupSyllabusNodeShape, CCYearGroupSyllabusNodeShapeUtil } from './CCYearGroupSyllabusNodeShapeUtil'
+import { CCSubjectNodeShape, CCSubjectNodeShapeUtil } from './CCSubjectNodeShapeUtil'
+import { CCTopicNodeShape, CCTopicNodeShapeUtil } from './CCTopicNodeShapeUtil'
+import { CCTopicLessonNodeShape, CCTopicLessonNodeShapeUtil } from './CCTopicLessonNodeShapeUtil'
+import { CCLearningStatementNodeShape, CCLearningStatementNodeShapeUtil } from './CCLearningStatementNodeShapeUtil'
+import { CCScienceLabNodeShape, CCScienceLabNodeShapeUtil } from './CCScienceLabNodeShapeUtil'
+import { CCSchoolTimetableNodeShape, CCSchoolTimetableNodeShapeUtil } from './CCSchoolTimetableNodeShapeUtil'
+import { CCAcademicYearNodeShape, CCAcademicYearNodeShapeUtil } from './CCAcademicYearNodeShapeUtil'
+import { CCAcademicTermNodeShape, CCAcademicTermNodeShapeUtil } from './CCAcademicTermNodeShapeUtil'
+import { CCAcademicWeekNodeShape, CCAcademicWeekNodeShapeUtil } from './CCAcademicWeekNodeShapeUtil'
+import { CCAcademicDayNodeShape, CCAcademicDayNodeShapeUtil } from './CCAcademicDayNodeShapeUtil'
+import { CCAcademicPeriodNodeShape, CCAcademicPeriodNodeShapeUtil } from './CCAcademicPeriodNodeShapeUtil'
+import { CCRegistrationPeriodNodeShape, CCRegistrationPeriodNodeShapeUtil } from './CCRegistrationPeriodNodeShapeUtil'
+import { CCTeacherTimetableNodeShape, CCTeacherTimetableNodeShapeUtil } from './CCTeacherTimetableNodeShapeUtil'
+import { CCTimetableLessonNodeShape, CCTimetableLessonNodeShapeUtil } from './CCTimetableLessonNodeShapeUtil'
+import { CCPlannedLessonNodeShape, CCPlannedLessonNodeShapeUtil } from './CCPlannedLessonNodeShapeUtil'
+import { CCDepartmentStructureNodeShape, CCDepartmentStructureNodeShapeUtil } from './CCDepartmentStructureNodeShapeUtil'
+import { CCUserTeacherTimetableNodeShape, CCUserTeacherTimetableNodeShapeUtil } from './CCUserTeacherTimetableNodeShapeUtil'
+import { CCUserTimetableLessonNodeShape, CCUserTimetableLessonNodeShapeUtil } from './CCUserTimetableLessonNodeShapeUtil'
+
+// Create a const object with all node types
+export const NODE_SHAPE_TYPES = {
+    USER: CCUserNodeShapeUtil.type,
+    TEACHER: CCTeacherNodeShapeUtil.type,
+    STUDENT: CCStudentNodeShapeUtil.type,
+    CALENDAR: CCCalendarNodeShapeUtil.type,
+    CALENDAR_YEAR: CCCalendarYearNodeShapeUtil.type,
+    CALENDAR_MONTH: CCCalendarMonthNodeShapeUtil.type,
+    CALENDAR_WEEK: CCCalendarWeekNodeShapeUtil.type,
+    CALENDAR_DAY: CCCalendarDayNodeShapeUtil.type,
+    CALENDAR_TIME_CHUNK: CCCalendarTimeChunkNodeShapeUtil.type,
+    SCHOOL: CCSchoolNodeShapeUtil.type,
+    DEPARTMENT: CCDepartmentNodeShapeUtil.type,
+    ROOM: CCRoomNodeShapeUtil.type,
+    SUBJECT_CLASS: CCSubjectClassNodeShapeUtil.type,
+    PASTORAL_STRUCTURE: CCPastoralStructureNodeShapeUtil.type,
+    YEAR_GROUP: CCYearGroupNodeShapeUtil.type,
+    CURRICULUM_STRUCTURE: CCCurriculumStructureNodeShapeUtil.type,
+    KEY_STAGE: CCKeyStageNodeShapeUtil.type,
+    KEY_STAGE_SYLLABUS: CCKeyStageSyllabusNodeShapeUtil.type,
+    YEAR_GROUP_SYLLABUS: CCYearGroupSyllabusNodeShapeUtil.type,
+    SUBJECT: CCSubjectNodeShapeUtil.type,
+    TOPIC: CCTopicNodeShapeUtil.type,
+    TOPIC_LESSON: CCTopicLessonNodeShapeUtil.type,
+    LEARNING_STATEMENT: CCLearningStatementNodeShapeUtil.type,
+    SCIENCE_LAB: CCScienceLabNodeShapeUtil.type,
+    SCHOOL_TIMETABLE: CCSchoolTimetableNodeShapeUtil.type,
+    ACADEMIC_YEAR: CCAcademicYearNodeShapeUtil.type,
+    ACADEMIC_TERM: CCAcademicTermNodeShapeUtil.type,
+    ACADEMIC_WEEK: CCAcademicWeekNodeShapeUtil.type,
+    ACADEMIC_DAY: CCAcademicDayNodeShapeUtil.type,
+    ACADEMIC_PERIOD: CCAcademicPeriodNodeShapeUtil.type,
+    REGISTRATION_PERIOD: CCRegistrationPeriodNodeShapeUtil.type,
+    TEACHER_TIMETABLE: CCTeacherTimetableNodeShapeUtil.type,
+    TIMETABLE_LESSON: CCTimetableLessonNodeShapeUtil.type,
+    PLANNED_LESSON: CCPlannedLessonNodeShapeUtil.type,
+    DEPARTMENT_STRUCTURE: CCDepartmentStructureNodeShapeUtil.type,
+    USER_TEACHER_TIMETABLE: CCUserTeacherTimetableNodeShapeUtil.type,
+    USER_TIMETABLE_LESSON: CCUserTimetableLessonNodeShapeUtil.type,
+} as const;
+
+// Create the type from the const object's values
+export type NodeShapeType = typeof NODE_SHAPE_TYPES[keyof typeof NODE_SHAPE_TYPES];
+
+// Define AllNodeShapes as a union type of all shape types
+export type AllNodeShapes = 
+    | CCUserNodeShape
+    | CCTeacherNodeShape
+    | CCStudentNodeShape
+    | CCCalendarNodeShape
+    | CCCalendarYearNodeShape
+    | CCCalendarMonthNodeShape
+    | CCCalendarWeekNodeShape
+    | CCCalendarDayNodeShape
+    | CCCalendarTimeChunkNodeShape
+    | CCSchoolNodeShape
+    | CCDepartmentNodeShape
+    | CCRoomNodeShape
+    | CCSubjectClassNodeShape
+    | CCPastoralStructureNodeShape
+    | CCYearGroupNodeShape
+    | CCCurriculumStructureNodeShape
+    | CCKeyStageNodeShape
+    | CCKeyStageSyllabusNodeShape
+    | CCYearGroupSyllabusNodeShape
+    | CCSubjectNodeShape
+    | CCTopicNodeShape
+    | CCTopicLessonNodeShape
+    | CCLearningStatementNodeShape
+    | CCScienceLabNodeShape
+    | CCSchoolTimetableNodeShape
+    | CCAcademicYearNodeShape
+    | CCAcademicTermNodeShape
+    | CCAcademicWeekNodeShape
+    | CCAcademicDayNodeShape
+    | CCAcademicPeriodNodeShape
+    | CCRegistrationPeriodNodeShape
+    | CCTeacherTimetableNodeShape
+    | CCTimetableLessonNodeShape
+    | CCPlannedLessonNodeShape
+    | CCDepartmentStructureNodeShape
+    | CCUserTeacherTimetableNodeShape
+    | CCUserTimetableLessonNodeShape;
+
+// Export all shape utils in an object for easy access
+export const ShapeUtils = {
+    [CCUserNodeShapeUtil.type]: CCUserNodeShapeUtil,
+    [CCTeacherNodeShapeUtil.type]: CCTeacherNodeShapeUtil,
+    [CCStudentNodeShapeUtil.type]: CCStudentNodeShapeUtil,
+    [CCCalendarNodeShapeUtil.type]: CCCalendarNodeShapeUtil,
+    [CCCalendarYearNodeShapeUtil.type]: CCCalendarYearNodeShapeUtil,
+    [CCCalendarMonthNodeShapeUtil.type]: CCCalendarMonthNodeShapeUtil,
+    [CCCalendarWeekNodeShapeUtil.type]: CCCalendarWeekNodeShapeUtil,
+    [CCCalendarDayNodeShapeUtil.type]: CCCalendarDayNodeShapeUtil,
+    [CCCalendarTimeChunkNodeShapeUtil.type]: CCCalendarTimeChunkNodeShapeUtil,
+    [CCSchoolNodeShapeUtil.type]: CCSchoolNodeShapeUtil,
+    [CCDepartmentNodeShapeUtil.type]: CCDepartmentNodeShapeUtil,
+    [CCRoomNodeShapeUtil.type]: CCRoomNodeShapeUtil,
+    [CCSubjectClassNodeShapeUtil.type]: CCSubjectClassNodeShapeUtil,
+    [CCPastoralStructureNodeShapeUtil.type]: CCPastoralStructureNodeShapeUtil,
+    [CCYearGroupNodeShapeUtil.type]: CCYearGroupNodeShapeUtil,
+    [CCCurriculumStructureNodeShapeUtil.type]: CCCurriculumStructureNodeShapeUtil,
+    [CCKeyStageNodeShapeUtil.type]: CCKeyStageNodeShapeUtil,
+    [CCKeyStageSyllabusNodeShapeUtil.type]: CCKeyStageSyllabusNodeShapeUtil,
+    [CCYearGroupSyllabusNodeShapeUtil.type]: CCYearGroupSyllabusNodeShapeUtil,
+    [CCSubjectNodeShapeUtil.type]: CCSubjectNodeShapeUtil,
+    [CCTopicNodeShapeUtil.type]: CCTopicNodeShapeUtil,
+    [CCTopicLessonNodeShapeUtil.type]: CCTopicLessonNodeShapeUtil,
+    [CCLearningStatementNodeShapeUtil.type]: CCLearningStatementNodeShapeUtil,
+    [CCScienceLabNodeShapeUtil.type]: CCScienceLabNodeShapeUtil,
+    [CCSchoolTimetableNodeShapeUtil.type]: CCSchoolTimetableNodeShapeUtil,
+    [CCAcademicYearNodeShapeUtil.type]: CCAcademicYearNodeShapeUtil,
+    [CCAcademicTermNodeShapeUtil.type]: CCAcademicTermNodeShapeUtil,
+    [CCAcademicWeekNodeShapeUtil.type]: CCAcademicWeekNodeShapeUtil,
+    [CCAcademicDayNodeShapeUtil.type]: CCAcademicDayNodeShapeUtil,
+    [CCAcademicPeriodNodeShapeUtil.type]: CCAcademicPeriodNodeShapeUtil,
+    [CCRegistrationPeriodNodeShapeUtil.type]: CCRegistrationPeriodNodeShapeUtil,
+    [CCTeacherTimetableNodeShapeUtil.type]: CCTeacherTimetableNodeShapeUtil,
+    [CCTimetableLessonNodeShapeUtil.type]: CCTimetableLessonNodeShapeUtil,
+    [CCPlannedLessonNodeShapeUtil.type]: CCPlannedLessonNodeShapeUtil,
+    [CCDepartmentStructureNodeShapeUtil.type]: CCDepartmentStructureNodeShapeUtil,
+    [CCUserTeacherTimetableNodeShapeUtil.type]: CCUserTeacherTimetableNodeShapeUtil,
+    [CCUserTimetableLessonNodeShapeUtil.type]: CCUserTimetableLessonNodeShapeUtil,
+} as const;
+
+// Add a type guard to check if a shape is a valid node shape
+export const isValidNodeShape = (shape: TLShape): shape is AllNodeShapes => {
+    return shape && 
+           typeof shape.type === 'string' && 
+           Object.values(NODE_SHAPE_TYPES).includes(shape.type as NodeShapeType);
+};
+
+// Add a type guard to check if a type string is a valid node type
+export const isValidNodeType = (type: string): type is NodeShapeType => {
+    return Object.values(NODE_SHAPE_TYPES).includes(type as NodeShapeType);
+}; 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/cc-graph-shared.tsx b/src/utils/tldraw/cc-base/cc-graph/cc-graph-shared.tsx
new file mode 100644
index 0000000..f7e9dc3
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/cc-graph-shared.tsx
@@ -0,0 +1,236 @@
+import React, { CSSProperties } from 'react';
+import { ShapeState } from './cc-graph-types'
+import { SHARED_NODE_STYLES } from './cc-graph-styles'
+import { logger } from '../../../../debugConfig'
+
+interface Neo4jDate {
+  _Date__year: number;
+  _Date__month: number;
+  _Date__day: number;
+  _Date__ordinal?: number;
+}
+
+interface Neo4jTime {
+  _Time__hour: number;
+  _Time__minute: number;
+  _Time__second: number;
+  _Time__nanosecond: number;
+  _Time__ticks: number;
+  _Time__tzinfo: null;
+}
+
+interface Neo4jDateTime {
+  _DateTime__date: Neo4jDate;
+  _DateTime__time: Neo4jTime;
+}
+
+export type DateValue = string | Date | Neo4jDate | Neo4jDateTime | null | undefined;
+
+const isValidDate = (year: number | undefined, month: number | undefined, day: number | undefined): boolean => {
+  if (typeof year !== 'number' || typeof month !== 'number' || typeof day !== 'number') return false;
+  if (month < 1 || month > 12 || day < -31 || day > 31) return false;
+  // Handle special case for end of month markers
+  if (day < 0) return true;
+  const date = new Date(year, month - 1, day);
+  return date.getMonth() === month - 1 && date.getDate() === day;
+};
+
+// Date formatting utility for Neo4j date objects and other formats
+export const formatDate = (dateValue: DateValue): string => {
+  if (!dateValue) return '';
+  
+  // Handle string dates
+  if (typeof dateValue === 'string') return dateValue;
+  
+  // Handle standard Date objects
+  if (dateValue instanceof Date) {
+    return dateValue.toISOString().split('T')[0];
+  }
+
+  // Handle Neo4j DateTime objects
+  if (typeof dateValue === 'object' && '_DateTime__date' in dateValue) {
+    const nestedDate = dateValue._DateTime__date as Neo4jDate;
+    return formatDate(nestedDate);
+  }
+
+  // Handle Neo4j Date objects and raw date objects
+  if (typeof dateValue === 'object' && '_Date__year' in dateValue) {
+    const year = dateValue._Date__year;
+    const month = dateValue._Date__month;
+    const day = dateValue._Date__day;
+    
+    if (isValidDate(year, month, day)) {
+      try {
+        // Handle negative days (end of month markers)
+        if (typeof day === 'number' && day < 0 && typeof year === 'number' && typeof month === 'number') {
+          const nextMonth = new Date(year, month, 1);
+          nextMonth.setDate(nextMonth.getDate() - 1);
+          return nextMonth.toISOString().split('T')[0];
+        }
+        if (typeof year === 'number' && typeof month === 'number' && typeof day === 'number') {
+          const date = new Date(year, month - 1, day);
+          return date.toISOString().split('T')[0];
+        }
+      } catch {
+        logger.warn('graph-shape-shared', '⚠️ Failed to format Neo4j date', { dateValue });
+      }
+    }
+    return 'Invalid Date';
+  }
+
+  // For any other object, try to convert it
+  try {
+    const date = new Date(String(dateValue));
+    if (!isNaN(date.getTime())) {
+      return date.toISOString().split('T')[0];
+    }
+  } catch {
+    logger.warn('graph-shape-shared', '⚠️ Failed to format unknown date type', { dateValue });
+  }
+
+  return 'Invalid Date';
+}
+
+// Error display component for nodes
+interface NodeErrorDisplayProps {
+  message: string;
+  details?: string;
+  style?: CSSProperties;
+}
+
+interface ErrorResult {
+  hasError: true;
+  error: {
+    message: string;
+    details: string;
+  };
+}
+
+interface SuccessResult {
+  hasError: false;
+}
+
+type ValidationResult = ErrorResult | SuccessResult;
+
+export const NodeErrorDisplay: React.FC<NodeErrorDisplayProps> = ({
+  message,
+  details,
+  style
+}) => (
+  <div style={{ ...SHARED_NODE_STYLES.error.container, ...style }}>
+    <div style={SHARED_NODE_STYLES.error.message}>{message}</div>
+    {details && <div style={SHARED_NODE_STYLES.error.details}>{details}</div>}
+  </div>
+);
+
+// Error checking utilities
+export const checkShapeState = (state: ShapeState | undefined | null): ValidationResult => {
+  if (!state) {
+    logger.warn('graph-shape-shared', '⚠️ Missing shape state', { state })
+    return {
+      hasError: true,
+      error: {
+        message: "Invalid Shape State",
+        details: "Shape state is missing or undefined"
+      }
+    }
+  }
+  
+  if (state.isPageChild === null) {
+    logger.warn('graph-shape-shared', '⚠️ Invalid page child state', { state })
+    return {
+      hasError: true,
+      error: {
+        message: "Invalid Page State",
+        details: "Unable to determine if node is a page child"
+      }
+    }
+  }
+
+  if (state.isPageChild === false && state.parentId === null) {
+    logger.warn('graph-shape-shared', '⚠️ Shape child with no parent', { state })
+    return {
+      hasError: true,
+      error: {
+        message: "Invalid Shape Child State",
+        details: "Shape child with no parent"
+      }
+    }
+  }
+
+  return { hasError: false }
+}
+
+export const checkDefaultComponent = (defaultComponent: boolean | { action: { label: string; handler: () => void } } | undefined | null): ValidationResult => {
+  if (defaultComponent === null) {
+    logger.warn('graph-shape-shared', '⚠️ Invalid default component', { defaultComponent })
+    return {
+      hasError: true,
+      error: {
+        message: "Invalid Default Component",
+        details: "Default component is not set"
+      }
+    }
+  }
+  return { hasError: false }
+}
+
+// Base component for all graph nodes
+interface DefaultNodeComponentProps {
+  tldraw_snapshot: string
+  onInspect?: (tldraw_snapshot: string) => void
+  customAction?: {
+    label: string
+    handler: () => void
+  }
+}
+
+export const DefaultNodeComponent: React.FC<DefaultNodeComponentProps> = ({
+  tldraw_snapshot,
+  onInspect = () => console.log(`Inspecting node at path: ${tldraw_snapshot}`),
+  customAction
+}) => {
+  return (
+    <div style={SHARED_NODE_STYLES.defaultComponent.container}>
+      <button style={SHARED_NODE_STYLES.defaultComponent.button} onClick={() => onInspect(tldraw_snapshot)}>
+        Inspect
+      </button>
+      {customAction && (
+        <button style={SHARED_NODE_STYLES.defaultComponent.button} onClick={customAction.handler}>
+          {customAction.label}
+        </button>
+      )}
+    </div>
+  )
+}
+
+// Helper function to create a node content wrapper
+export const NodeContentWrapper = ({ 
+  children, 
+  style 
+}: { 
+  children: React.ReactNode;
+  style: CSSProperties;
+}) => (
+  <div style={{ ...SHARED_NODE_STYLES.container, ...style }}>
+    {children}
+  </div>
+);
+
+// Helper function to create a node property display
+export const NodeProperty = ({ 
+  label, 
+  value,
+  labelStyle,
+  valueStyle 
+}: { 
+  label: string;
+  value: string;
+  labelStyle: CSSProperties;
+  valueStyle: CSSProperties;
+}) => (
+  <div style={SHARED_NODE_STYLES.property.wrapper}>
+    <span style={{ ...SHARED_NODE_STYLES.property.label, ...labelStyle }}>{label}:</span>
+    <span style={{ ...SHARED_NODE_STYLES.property.value, ...valueStyle }}>{value}</span>
+  </div>
+);
diff --git a/src/utils/tldraw/cc-base/cc-graph/cc-graph-styles.ts b/src/utils/tldraw/cc-base/cc-graph/cc-graph-styles.ts
new file mode 100644
index 0000000..7244fd8
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/cc-graph-styles.ts
@@ -0,0 +1,176 @@
+// Shared styles for all nodes
+export const SHARED_NODE_STYLES = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    padding: '8px',
+    gap: '4px',
+    backgroundColor: 'var(--color-muted)',
+    color: 'var(--color-text)',
+    borderRadius: '4px',
+    minWidth: '150px',
+  },
+  header: {
+    fontSize: '14px',
+    fontWeight: 'bold' as const,
+    marginBottom: '4px',
+    color: 'var(--color-text)',
+  },
+  property: {
+    label: {
+      fontSize: '12px',
+      color: 'var(--color-text-2)',
+      marginRight: '4px',
+      fontWeight: '500' as const,
+    },
+    value: {
+      fontSize: '12px',
+      color: 'var(--color-text)',
+      fontWeight: '200' as const,
+    },
+    wrapper: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px',
+    },
+  },
+  error: {
+    container: {
+      padding: '8px',
+      backgroundColor: 'var(--color-error)',
+      color: 'white',
+      borderRadius: '4px',
+      fontSize: '12px',
+    },
+    message: {
+      fontWeight: 'bold' as const,
+    },
+    details: {
+      marginTop: '4px',
+      opacity: 0.8,
+    }
+  },
+  defaultComponent: {
+    container: {
+      display: 'flex',
+      gap: '8px',
+      marginBottom: '8px',
+    },
+    button: {
+      padding: '4px 8px',
+      fontSize: '12px',
+      borderRadius: '4px',
+      backgroundColor: 'var(--color-muted-2)',
+      color: 'var(--color-text)',
+      border: 'none',
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: 'var(--color-muted-3)',
+      }
+    }
+  }
+} as const
+
+// Color themes for different node types
+export const NODE_THEMES = {
+  calendar: {
+    headerColor: '#0066cc',
+    backgroundColor: '#e6f0ff',
+  },
+  academic: {
+    headerColor: '#008000',
+    backgroundColor: '#e6ffe6',
+  },
+  curriculum: {
+    headerColor: '#ff8c00',
+    backgroundColor: '#fff3e6',
+  },
+  pastoral: {
+    headerColor: '#8a2be2',
+    backgroundColor: '#f5e6ff',
+  },
+  people: {
+    headerColor: '#cc0000',
+    backgroundColor: '#ffe6e6',
+  },
+  resource: {
+    headerColor: '#cccc00',
+    backgroundColor: '#fffff0',
+  },
+} as const
+
+// Node type to theme mapping
+export const NODE_TYPE_THEMES: Record<string, keyof typeof NODE_THEMES> = {
+  // Calendar nodes
+  'cc-calendar-node': 'calendar',
+  'cc-calendar-year-node': 'calendar',
+  'cc-calendar-month-node': 'calendar',
+  'cc-calendar-week-node': 'calendar',
+  'cc-calendar-day-node': 'calendar',
+  'cc-calendar-time-chunk-node': 'calendar',
+  
+  // Academic nodes
+  'cc-academic-year-node': 'academic',
+  'cc-academic-term-node': 'academic',
+  'cc-academic-week-node': 'academic',
+  'cc-academic-day-node': 'academic',
+  'cc-academic-period-node': 'academic',
+  'cc-registration-period-node': 'academic',
+  'cc-timetable-lesson-node': 'academic',
+  'cc-planned-lesson-node': 'academic',
+  'cc-school-timetable-node': 'academic',
+  'cc-user-teacher-timetable-node': 'academic',
+  'cc-user-timetable-lesson-node': 'academic',
+  
+  // Curriculum nodes
+  'cc-curriculum-structure-node': 'curriculum',
+  'cc-key-stage-node': 'curriculum',
+  'cc-key-stage-syllabus-node': 'curriculum',
+
+  'cc-year-group-syllabus-node': 'curriculum',
+  'cc-subject-node': 'curriculum',
+  'cc-topic-node': 'curriculum',
+  'cc-topic-lesson-node': 'curriculum',
+  'cc-learning-statement-node': 'curriculum',
+  'cc-science-lab-node': 'curriculum',
+  
+  // Pastoral nodes
+  'cc-pastoral-structure-node': 'pastoral',
+  'cc-year-group-node': 'pastoral',
+  
+  // People nodes
+  'cc-user-node': 'people',
+  'cc-teacher-node': 'people',
+  'cc-student-node': 'people',
+  
+  // Resource nodes
+  'cc-school-node': 'resource',
+  'cc-department-node': 'resource',
+  'cc-room-node': 'resource',
+  'cc-subject-class-node': 'resource',
+} as const
+
+// Helper function to get theme for a node type
+export const getNodeTheme = (nodeType: string) => {
+  const themeKey = NODE_TYPE_THEMES[nodeType]
+  return themeKey ? NODE_THEMES[themeKey] : NODE_THEMES.resource // Default to resource theme
+}
+
+// Helper function to get theme from primary label
+export const getThemeFromLabel = (primaryLabel: string) => {
+  // Convert primary label to node type format (e.g., 'User' -> 'cc-user-node')
+  const nodeType = `cc-${primaryLabel.toLowerCase()}-node`;
+  return getNodeTheme(nodeType);
+}
+
+// Helper function to get styles for a specific node type
+export const getNodeStyles = (nodeType: string) => {
+  const theme = getNodeTheme(nodeType)
+  return {
+    ...SHARED_NODE_STYLES,
+    container: {
+      ...SHARED_NODE_STYLES.container,
+      backgroundColor: theme.backgroundColor,
+    },
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/cc-graph-types.ts b/src/utils/tldraw/cc-base/cc-graph/cc-graph-types.ts
new file mode 100644
index 0000000..81396ee
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/cc-graph-types.ts
@@ -0,0 +1,389 @@
+import { TLBinding, TLBaseShape, TLShapeId } from '@tldraw/tldraw'
+import { CCBaseShape } from '../cc-types'
+import { CCBaseProps } from '../cc-props'
+import { ccGraphShapeProps } from './cc-graph-props'
+
+// Export type for graph shape types
+export type GraphShapeType = keyof typeof ccGraphShapeProps
+
+export interface ShapeState {
+    parentId: TLShapeId | null
+    isPageChild: boolean | null
+    hasChildren: boolean | null
+    bindings: TLBinding[] | null
+}
+
+export type CCGraphShapeProps = CCBaseProps & {
+    __primarylabel__: string
+    unique_id: string
+    tldraw_snapshot: string
+    created: string
+    merged: string
+    state: ShapeState | null | undefined
+    defaultComponent: boolean | null
+}
+
+// Define the base shape type for graph shapes
+export type CCGraphShape = CCBaseShape & TLBaseShape<GraphShapeType, {
+  __primarylabel__: CCGraphShapeProps['__primarylabel__']
+  unique_id: CCGraphShapeProps['unique_id']
+  tldraw_snapshot: CCGraphShapeProps['tldraw_snapshot']
+  created: CCGraphShapeProps['created']
+  merged: CCGraphShapeProps['merged']
+  state: CCGraphShapeProps['state']
+  defaultComponent: CCGraphShapeProps['defaultComponent']
+}>
+
+export type CCUserNodeProps = CCGraphShapeProps & {
+    user_name: string
+    user_email: string
+    user_type: string
+    user_id: string
+    worker_node_data: string
+}
+
+export type CCTeacherNodeProps = CCGraphShapeProps & {
+    teacher_code: string
+    teacher_name_formal: string
+    teacher_email: string
+    user_db_name: string
+    school_db_name: string
+}
+
+export type CCStudentNodeProps = CCGraphShapeProps & {
+    student_name_formal: string
+    student_code: string
+    student_email: string
+    user_db_name: string
+    school_db_name: string
+}
+
+export type CCCalendarNodeProps = CCGraphShapeProps & {
+    title: string
+    name: string
+    calendar_type: string
+    calendar_name: string
+    start_date: string
+    end_date: string
+}
+
+export type CCCalendarYearNodeProps = CCGraphShapeProps & {
+    year: string
+}
+
+export type CCCalendarMonthNodeProps = CCGraphShapeProps & {
+    year: string
+    month: string
+    month_name: string
+}
+
+export type CCCalendarWeekNodeProps = CCGraphShapeProps & {
+    start_date: string
+    week_number: string
+    iso_week: string
+}
+
+export type CCCalendarDayNodeProps = CCGraphShapeProps & {
+    date: string
+    day_of_week: string
+    iso_day: string
+}
+
+export type CCCalendarTimeChunkNodeProps = CCGraphShapeProps & {
+    start_time: string
+    end_time: string
+}
+
+export type CCSchoolNodeProps = CCGraphShapeProps & {
+    school_uuid: string
+    school_name: string
+    school_website: string
+}
+
+export type CCDepartmentNodeProps = CCGraphShapeProps & {
+    department_name: string
+}
+
+export type CCRoomNodeProps = CCGraphShapeProps & {
+    room_code: string
+    room_name: string
+}
+
+export type CCSubjectClassNodeProps = CCGraphShapeProps & {
+    subject_class_code: string
+    year_group: string
+    subject: string
+    subject_code: string
+}
+
+export type CCPastoralStructureNodeProps = CCGraphShapeProps & {
+    pastoral_structure_type: string
+}
+
+export type CCYearGroupNodeProps = CCGraphShapeProps & {
+    year_group: string
+    year_group_name: string
+}
+
+export type CCCurriculumStructureNodeProps = CCGraphShapeProps & {
+    curriculum_structure_type: string
+}
+
+export type CCKeyStageNodeProps = CCGraphShapeProps & {
+    key_stage_name: string
+    key_stage: string
+}
+
+export type CCKeyStageSyllabusNodeProps = CCGraphShapeProps & {
+    ks_syllabus_id: string
+    ks_syllabus_name: string
+    ks_syllabus_key_stage: string
+    ks_syllabus_subject: string
+    ks_syllabus_subject_code: string
+}
+
+export type CCYearGroupSyllabusNodeProps = CCGraphShapeProps & {
+    yr_syllabus_id: string
+    yr_syllabus_name: string
+    yr_syllabus_year_group: string
+    yr_syllabus_subject: string
+    yr_syllabus_subject_code: string
+}
+
+export type CCSubjectNodeProps = CCGraphShapeProps & {
+    subject_code: string
+    subject_name: string
+}
+
+export type CCTopicNodeProps = CCGraphShapeProps & {
+    topic_id: string
+    topic_title: string
+    total_number_of_lessons_for_topic: string
+    topic_type: string
+    topic_assessment_type: string
+}
+
+export type CCTopicLessonNodeProps = CCGraphShapeProps & {
+    topic_lesson_id: string
+    topic_lesson_title: string
+    topic_lesson_type: string
+    topic_lesson_length: string
+    topic_lesson_skills_learned: string
+    topic_lesson_suggested_activities: string
+    topic_lesson_weblinks: string
+}
+
+export type CCLearningStatementNodeProps = CCGraphShapeProps & {
+    lesson_learning_statement_id: string
+    lesson_learning_statement: string
+    lesson_learning_statement_type: string
+}
+
+export type CCScienceLabNodeProps = CCGraphShapeProps & {
+    science_lab_id: string
+    science_lab_title: string
+    science_lab_summary: string
+    science_lab_requirements: string
+    science_lab_procedure: string
+    science_lab_safety: string
+    science_lab_weblinks: string
+}
+
+export type CCTeacherTimetableNodeProps = CCGraphShapeProps & {
+    teacher_id: string
+    start_date: string
+    end_date: string
+}
+
+export type CCTimetableLessonNodeProps = CCGraphShapeProps & {
+    subject_class: string
+    date: string
+    start_time: string
+    end_time: string
+    period_code: string
+}
+
+export type CCPlannedLessonNodeProps = CCGraphShapeProps & {
+    date: string
+    start_time: string
+    end_time: string
+    period_code: string
+    subject_class: string
+    year_group: string
+    subject: string
+    teacher_code: string
+    planning_status: string
+    topic_code: string
+    topic_name: string
+    lesson_code: string
+    lesson_name: string
+    learning_statement_codes: string
+    learning_statements: string
+    learning_resource_codes: string
+    learning_resources: string
+}
+
+export type CCSchoolTimetableNodeProps = CCGraphShapeProps & {
+    start_date: string
+    end_date: string
+}
+
+export type CCAcademicYearNodeProps = CCGraphShapeProps & {
+    year: string
+}
+
+export type CCAcademicTermNodeProps = CCGraphShapeProps & {
+    term_name: string
+    term_number: string
+    start_date: string
+    end_date: string
+}
+
+export type CCAcademicWeekNodeProps = CCGraphShapeProps & {
+    academic_week_number: string
+    start_date: string
+    week_type: string
+}
+
+export type CCAcademicDayNodeProps = CCGraphShapeProps & {
+    academic_day: string
+    date: string
+    day_of_week: string
+    day_type: string
+}
+
+export type CCAcademicPeriodNodeProps = CCGraphShapeProps & {
+    name: string
+    date: string
+    start_time: string
+    end_time: string
+    period_code: string
+}
+
+export type CCRegistrationPeriodNodeProps = CCGraphShapeProps & {
+    name: string
+    date: string
+    start_time: string
+    end_time: string
+    period_code: string
+}
+
+export type CCDepartmentStructureNodeProps = CCGraphShapeProps & {
+    department_structure_type: string
+}
+
+export type CCUserTeacherTimetableNodeProps = CCGraphShapeProps & {
+  school_db_name: string
+  school_timetable_id: string
+}
+
+export type CCUserTimetableLessonNodeProps = CCGraphShapeProps & {
+  subject_class: string
+  date: string
+  start_time: string
+  end_time: string
+  period_code: string
+  school_db_name: string
+  school_period_id: string
+}
+
+// Define a type-safe mapping of node types to their configurations
+export type CCNodeTypes = {
+  User: { props: CCUserNodeProps }
+  Developer: { props: CCUserNodeProps }
+  Teacher: { props: CCTeacherNodeProps }
+  Student: { props: CCStudentNodeProps }
+  Calendar: { props: CCCalendarNodeProps }
+  TeacherTimetable: { props: CCTeacherTimetableNodeProps }
+  TimetableLesson: { props: CCTimetableLessonNodeProps }
+  PlannedLesson: { props: CCPlannedLessonNodeProps }
+  School: { props: CCSchoolNodeProps }
+  CalendarYear: { props: CCCalendarYearNodeProps }
+  CalendarMonth: { props: CCCalendarMonthNodeProps }
+  CalendarWeek: { props: CCCalendarWeekNodeProps }
+  CalendarDay: { props: CCCalendarDayNodeProps }
+  CalendarTimeChunk: { props: CCCalendarTimeChunkNodeProps }
+  ScienceLab: { props: CCScienceLabNodeProps }
+  KeyStageSyllabus: { props: CCKeyStageSyllabusNodeProps }
+  YearGroupSyllabus: { props: CCYearGroupSyllabusNodeProps }
+  CurriculumStructure: { props: CCCurriculumStructureNodeProps }
+  Topic: { props: CCTopicNodeProps }
+  TopicLesson: { props: CCTopicLessonNodeProps }
+  LearningStatement: { props: CCLearningStatementNodeProps }
+  SchoolTimetable: { props: CCSchoolTimetableNodeProps }
+  AcademicYear: { props: CCAcademicYearNodeProps }
+  AcademicTerm: { props: CCAcademicTermNodeProps }
+  AcademicWeek: { props: CCAcademicWeekNodeProps }
+  AcademicDay: { props: CCAcademicDayNodeProps }
+  AcademicPeriod: { props: CCAcademicPeriodNodeProps }
+  RegistrationPeriod: { props: CCRegistrationPeriodNodeProps }
+  PastoralStructure: { props: CCPastoralStructureNodeProps }
+  KeyStage: { props: CCKeyStageNodeProps }
+  Department: { props: CCDepartmentNodeProps }
+  Room: { props: CCRoomNodeProps }
+  SubjectClass: { props: CCSubjectClassNodeProps }
+  DepartmentStructure: { props: CCDepartmentStructureNodeProps }
+  UserTeacherTimetable: { props: CCUserTeacherTimetableNodeProps }
+  UserTimetableLesson: { props: CCUserTimetableLessonNodeProps }
+}
+
+// Helper function to get shape type from node type
+export const getShapeType = (nodeType: keyof CCNodeTypes): string => {
+  return `cc-${nodeType.replace(/([A-Z])/g, '-$1').toLowerCase().substring(1)}-node`;
+}
+
+// Helper function to get allowed props from node type
+export const getAllowedProps = (): string[] => {
+  return ['__primarylabel__', 'unique_id'];
+}
+
+// Helper function to get node configuration
+export const getNodeConfig = <T extends keyof CCNodeTypes>(nodeType: T) => {
+  const shapeType = getShapeType(nodeType);
+  return {
+    shapeType,
+    allowedProps: getAllowedProps()
+  };
+}
+
+// Helper function to check if a string is a valid node type
+export const isValidNodeType = (type: string): type is keyof CCNodeTypes => {
+  return type in {
+    User: true,
+    Developer: true,
+    Teacher: true,
+    Student: true,
+    Calendar: true,
+    TeacherTimetable: true,
+    TimetableLesson: true,
+    PlannedLesson: true,
+    School: true,
+    CalendarYear: true,
+    CalendarMonth: true,
+    CalendarWeek: true,
+    CalendarDay: true,
+    CalendarTimeChunk: true,
+    ScienceLab: true,
+    KeyStageSyllabus: true,
+    YearGroupSyllabus: true,
+    CurriculumStructure: true,
+    Topic: true,
+    TopicLesson: true,
+    LearningStatement: true,
+    SchoolTimetable: true,
+    AcademicYear: true,
+    AcademicTerm: true,
+    AcademicWeek: true,
+    AcademicDay: true,
+    AcademicPeriod: true,
+    RegistrationPeriod: true,
+    PastoralStructure: true,
+    KeyStage: true,
+    Department: true,
+    Room: true,
+    SubjectClass: true,
+    DepartmentStructure: true,
+    UserTeacherTimetable: true,
+    UserTimetableLesson: true,
+  };
+}
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-graph/graphStateUtil.tsx b/src/utils/tldraw/cc-base/cc-graph/graphStateUtil.tsx
new file mode 100644
index 0000000..0c76bbe
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-graph/graphStateUtil.tsx
@@ -0,0 +1,218 @@
+import { Editor, createShapeId } from '@tldraw/tldraw';
+import { getShapeType, isValidNodeType } from './cc-graph-types';
+import { AllNodeShapes, NodeShapeType } from './cc-graph-shapes';
+import { logger } from '../../../../debugConfig';
+
+export const GRID_CELL_SIZE = 250;
+export const GRID_PADDING = 50;
+export const GRID_MAX_COLUMNS = 8;
+
+export const graphState = {
+    nodeData: new Map<string, AllNodeShapes>(),
+    shapeIds: new Set<string>(),
+    editor: null as Editor | null,
+
+    arrangeNodesInGrid: () => {
+        if (!graphState.editor) {
+            logger.error('graphStateUtil', '❌ Editor not initialized');
+            return;
+        }
+
+        const nodes = Array.from(graphState.nodeData.values());
+        if (nodes.length === 0) return;
+
+        logger.debug('graphStateUtil', '📊 Arranging nodes in grid', { 
+            nodeCount: nodes.length,
+            currentNodes: nodes 
+        });
+
+        // Get viewport bounds
+        const viewportBounds = graphState.editor.getViewportPageBounds();
+        
+        // Calculate available space
+        const availableWidth = viewportBounds.width;
+        
+        // Calculate number of columns based on available space
+        const columnsFromSpace = Math.floor(availableWidth / (GRID_CELL_SIZE + GRID_PADDING));
+        const gridColumns = Math.min(
+            Math.max(1, Math.min(columnsFromSpace, GRID_MAX_COLUMNS)),
+            Math.ceil(Math.sqrt(nodes.length * 2)) // Allow grid to grow with more nodes
+        );
+
+        // Calculate total grid dimensions
+        const rowCount = Math.ceil(nodes.length / gridColumns);
+        const totalWidth = gridColumns * (GRID_CELL_SIZE + GRID_PADDING);
+        const totalHeight = rowCount * (GRID_CELL_SIZE + GRID_PADDING);
+
+        // Calculate starting position to center the grid
+        const startX = viewportBounds.minX + (viewportBounds.width - totalWidth) / 2;
+        const startY = viewportBounds.minY + (viewportBounds.height - totalHeight) / 2;
+
+        // Track created/updated shapes for viewport adjustment
+        const updatedShapeIds: string[] = [];
+
+        nodes.forEach((node, index) => {
+            if (!node.props?.unique_id) return;
+
+            const row = Math.floor(index / gridColumns);
+            const col = index % gridColumns;
+            
+            const x = startX + (col * (GRID_CELL_SIZE + GRID_PADDING));
+            const y = startY + (row * (GRID_CELL_SIZE + GRID_PADDING));
+            
+            const shapeId = createShapeId(node.props.unique_id);
+            updatedShapeIds.push(shapeId.toString());
+
+            // Update both our internal state and the editor
+            node.x = x;
+            node.y = y;
+            graphState.nodeData.set(node.props.unique_id, node);
+
+            // Only create if the shape doesn't exist in our tracking
+            if (!graphState.shapeIds.has(shapeId.toString())) {
+                graphState.editor!.createShape({
+                    id: shapeId,
+                    type: node.type,
+                    x: x,
+                    y: y,
+                    props: node.props
+                });
+                graphState.shapeIds.add(shapeId.toString());
+                
+                logger.debug('graphStateUtil', '➕ Created new shape', { 
+                    id: shapeId.toString(),
+                    position: { x, y } 
+                });
+            } else {
+                graphState.editor!.updateShape({
+                    id: shapeId,
+                    type: node.type,
+                    x: x,
+                    y: y,
+                });
+                
+                logger.debug('graphStateUtil', '🔄 Updated existing shape', { 
+                    id: shapeId.toString(),
+                    position: { x, y } 
+                });
+            }
+        });
+
+        // Only attempt to adjust view if we have shapes
+        if (updatedShapeIds.length > 0) {
+            const shapeIds = updatedShapeIds.map(id => createShapeId(id));
+            graphState.editor.select(...shapeIds);
+            graphState.editor.zoomToSelection();
+            graphState.editor.deselect();
+            
+            logger.debug('graphStateUtil', '🔍 Adjusted viewport for shapes', { 
+                shapeCount: updatedShapeIds.length 
+            });
+        }
+    },
+
+    updateShapesWithDagre: () => {
+        if (!graphState.editor) {
+            logger.error('graphStateUtil', '❌ Editor not initialized');
+            return;
+        }
+
+        graphState.arrangeNodesInGrid();
+    },
+
+    addNode: (shape: AllNodeShapes) => {
+        logger.debug('graphStateUtil', '🔍 Adding shape to graphState:', { shape });
+        
+        if (!shape.props?.unique_id || !shape.type) {
+            logger.error('graphStateUtil', '❌ Invalid shape data', { shape });
+            return;
+        }
+
+        const id = shape.props.unique_id;
+        const shapeId = createShapeId(id).toString();
+        
+        // Track the shape ID
+        graphState.shapeIds.add(shapeId);
+        
+        const nodeType = shape.props.__primarylabel__;
+        if (!isValidNodeType(nodeType)) {
+            logger.error('graphStateUtil', '❌ Unknown node type', { 
+                type: nodeType, 
+                shape 
+            });
+            return;
+        }
+
+        const shapeType = getShapeType(nodeType) as NodeShapeType;
+        graphState.nodeData.set(id, {
+            ...shape,
+            type: shapeType
+        } as AllNodeShapes);
+
+        // Only rearrange if we have an editor
+        if (graphState.editor) {
+            graphState.arrangeNodesInGrid();
+        }
+    },
+
+    getNode: (id: string) => {
+        return graphState.nodeData.get(id);
+    },
+
+    getAllNodes: () => {
+        return Array.from(graphState.nodeData.values()).filter(item => {
+            // Check if the item has a type property and it's not an edge type
+            logger.debug('graphStateUtil', '🔍 Checking if item has a type property and it\'s not an edge type:', { item });
+            return item.type && !item.type.includes('relationship');
+        });
+    },
+
+    setEditor: (editor: Editor) => {
+        graphState.editor = editor;
+        graphState.shapeIds.clear();
+    },
+
+    updateNodePosition: (nodeId: string, newPos: { x: number, y: number }) => {
+        const node = graphState.nodeData.get(nodeId);
+        if (node) {
+            node.x = newPos.x;
+            node.y = newPos.y;
+            graphState.nodeData.set(nodeId, node);
+
+            // If we have an editor reference, update the shape
+            if (graphState.editor) {
+                const shapeId = createShapeId(nodeId);
+                logger.debug('graphStateUtil', '🎯 Updating shape position', {
+                    id: shapeId,
+                    position: { x: newPos.x, y: newPos.y }
+                });
+                graphState.editor.updateShape({
+                    id: shapeId,
+                    type: node.type,
+                    x: newPos.x,
+                    y: newPos.y,
+                });
+            }
+
+            logger.debug('graphStateUtil', '📍 Updated node position', {
+                nodeId,
+                newPos,
+                node
+            });
+        }
+    },
+
+    hasNode: (uniqueId: string): boolean => {
+        return graphState.nodeData.has(uniqueId);
+    },
+
+    getShapeByUniqueId: (uniqueId: string) => {
+        return Array.from(graphState.nodeData.values()).find(
+            shape => shape.props?.unique_id === uniqueId
+        );
+    },
+
+    hasShape: (shapeId: string): boolean => {
+        return graphState.shapeIds.has(shapeId);
+    },
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-migrations.ts b/src/utils/tldraw/cc-base/cc-migrations.ts
new file mode 100644
index 0000000..84911c6
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-migrations.ts
@@ -0,0 +1,246 @@
+import { TLRecord, TLShape } from '@tldraw/tldraw'
+import { getDefaultCCBaseProps, getDefaultCCCalendarProps, getDefaultCCLiveTranscriptionProps, getDefaultCCSettingsProps, getDefaultCCSlideProps, getDefaultCCSlideShowProps, getDefaultCCSlideLayoutBindingProps, getDefaultCCYoutubeEmbedProps, getDefaultCCSearchProps, getDefaultCCWebBrowserProps } from './cc-props'
+
+// Export both shape and binding migrations
+export const ccBindingMigrations = {
+  'cc-slide-layout': {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'binding') return record
+          if (record.type !== 'cc-slide-layout') return record
+          return {
+            ...record,
+            props: {
+              ...getDefaultCCSlideLayoutBindingProps(),
+              ...record.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+}
+
+export const ccShapeMigrations = {
+  base: {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'shape') return record
+          const shape = record as TLShape
+          if (shape.type !== 'cc-base') return record
+          return {
+            ...shape,
+            props: {
+              ...getDefaultCCBaseProps(),
+              ...shape.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+
+  calendar: {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'shape') return record
+          const shape = record as TLShape
+          if (shape.type !== 'cc-calendar') return record
+          return {
+            ...shape,
+            props: {
+              ...getDefaultCCCalendarProps(),
+              ...shape.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+
+  liveTranscription: {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'shape') return record
+          const shape = record as TLShape
+          if (shape.type !== 'cc-live-transcription') return record
+          return {
+            ...shape,
+            props: {
+              ...getDefaultCCLiveTranscriptionProps(),
+              ...shape.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+
+  settings: {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'shape') return record
+          const shape = record as TLShape
+          if (shape.type !== 'cc-settings') return record
+          return {
+            ...shape,
+            props: {
+              ...getDefaultCCSettingsProps(),
+              ...shape.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+
+  slideshow: {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'shape') return record
+          const shape = record as TLShape
+          if (shape.type !== 'cc-slideshow') return record
+          return {
+            ...shape,
+            props: {
+              ...getDefaultCCSlideShowProps(),
+              ...shape.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+
+  slide: {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'shape') return record
+          const shape = record as TLShape
+          if (shape.type !== 'cc-slide') return record
+          return {
+            ...shape,
+            props: {
+              ...getDefaultCCSlideProps(),
+              ...shape.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+
+  'cc-youtube-embed': {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'shape') return record
+          const shape = record as TLShape
+          if (shape.type !== 'cc-youtube-embed') return record
+          return {
+            ...shape,
+            props: {
+              ...getDefaultCCYoutubeEmbedProps(),
+              ...shape.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+
+  search: {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'shape') return record
+          const shape = record as TLShape
+          if (shape.type !== 'cc-search') return record
+          return {
+            ...shape,
+            props: {
+              ...getDefaultCCSearchProps(),
+              ...shape.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+
+  webBrowser: {
+    firstVersion: 1,
+    currentVersion: 1,
+    migrators: {
+      1: {
+        up: (record: TLRecord) => {
+          if (record.typeName !== 'shape') return record
+          const shape = record as TLShape
+          if (shape.type !== 'cc-web-browser') return record
+          return {
+            ...shape,
+            props: {
+              ...getDefaultCCWebBrowserProps(),
+              ...shape.props,
+            },
+          }
+        },
+        down: (record: TLRecord) => {
+          return record
+        },
+      },
+    },
+  },
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-props.ts b/src/utils/tldraw/cc-base/cc-props.ts
new file mode 100644
index 0000000..43e1587
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-props.ts
@@ -0,0 +1,262 @@
+import { T } from 'tldraw'
+import { CC_BASE_STYLE_CONSTANTS, CC_SLIDESHOW_STYLE_CONSTANTS } from './cc-styles'
+
+export interface CCBaseProps {
+  title: string
+  w: number
+  h: number
+  headerColor: string
+  backgroundColor: string
+  isLocked: boolean
+}
+
+// Create a constant for the base props validation
+export const baseShapeProps = {
+  title: T.string,
+  w: T.number,
+  h: T.number,
+  headerColor: T.string,
+  backgroundColor: T.string,
+  isLocked: T.boolean,
+}
+
+export const ccShapeProps = {
+  base: baseShapeProps,
+
+  calendar: {
+    ...baseShapeProps,
+    date: T.string,
+    selectedDate: T.string,
+    view: T.string,
+    events: T.arrayOf(T.object({
+      id: T.string,
+      title: T.string,
+      start: T.string,
+      end: T.string,
+      groupId: T.string.optional(),
+      extendedProps: T.object({
+        subjectClass: T.string,
+        color: T.string,
+        periodCode: T.string,
+        tldraw_snapshot: T.string.optional()
+      })
+    })),
+  },
+
+  liveTranscription: {
+    ...baseShapeProps,
+    isRecording: T.boolean,
+    segments: T.arrayOf(T.object({
+      id: T.string,
+      text: T.string,
+      completed: T.boolean,
+      start: T.string,
+      end: T.string,
+    })),
+    currentSegment: T.object({
+      id: T.string,
+      text: T.string,
+      completed: T.boolean,
+      start: T.string,
+      end: T.string,
+    }).optional(),
+    lastProcessedSegment: T.string.optional(),
+  },
+
+  settings: {
+    ...baseShapeProps,
+    userEmail: T.string,
+    user_role: T.string,
+    isTeacher: T.boolean,
+  },
+
+  slideshow: {
+    ...baseShapeProps,
+    currentSlideIndex: T.number,
+    slidePattern: T.string,
+    numSlides: T.number,
+    slides: T.arrayOf(T.object({
+      imageData: T.string,
+      meta: T.object({
+        text: T.string,
+        format: T.string,
+      }),
+    })).optional(),
+  },
+
+  slide: {
+    ...baseShapeProps,
+    imageData: T.string,
+    meta: T.object({
+      text: T.string,
+      format: T.string,
+    }),
+  },
+
+  'cc-youtube-embed': {
+    ...baseShapeProps,
+    video_url: T.string,
+    transcript: T.arrayOf(T.object({
+      start: T.number,
+      duration: T.number,
+      text: T.string,
+    })),
+    transcriptVisible: T.boolean,
+  },
+
+  search: {
+    ...baseShapeProps,
+    query: T.string,
+    results: T.arrayOf(T.object({
+      title: T.string,
+      url: T.string,
+      content: T.string,
+    })),
+    isSearching: T.boolean,
+  },
+
+  webBrowser: {
+    ...baseShapeProps,
+    url: T.string,
+    history: T.arrayOf(T.string),
+    currentHistoryIndex: T.number,
+    isLoading: T.boolean,
+  },
+}
+
+export const ccBindingProps = {
+  'cc-slide-layout': {
+    isMovingWithParent: T.boolean.optional(),
+    placeholder: T.boolean.optional(),
+    index: T.string
+  },
+}
+
+export const getDefaultCCBaseProps = () => ({
+  title: 'Base Shape',
+  w: 100,
+  h: 100,
+  headerColor: '#3e6589',
+  backgroundColor: '#ffffff',
+  isLocked: false,
+})
+
+export const getDefaultCCCalendarProps = () => ({
+  ...getDefaultCCBaseProps(),
+  date: new Date().toISOString(),
+  selectedDate: new Date().toISOString(),
+  view: 'timeGridWeek',
+  events: [],
+})
+
+export const getDefaultCCLiveTranscriptionProps = () => ({
+  ...getDefaultCCBaseProps(),
+  isRecording: false,
+  segments: [],
+  currentSegment: undefined,
+  lastProcessedSegment: undefined,
+})
+
+export const getDefaultCCSettingsProps = () => ({
+  ...getDefaultCCBaseProps(),
+  userEmail: '',
+  user_role: '',
+  isTeacher: false,
+})
+
+export function getDefaultCCSlideShowProps() {
+  // Base 16:9 ratio dimensions
+  const baseWidth = 1280
+  const baseHeight = 720
+  // Add header height and spacing
+  const totalHeight = baseHeight + 
+  CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT + // Slideshow's own header
+  CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING * 2 + // Top and bottom spacing
+  CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_CONTENT_PADDING // Extra padding for content
+  
+  return {
+    title: 'Slideshow',
+    w: baseWidth,
+    h: totalHeight,
+    headerColor: '#3e6589',
+    backgroundColor: '#0f0f0f',
+    isLocked: false,
+    currentSlideIndex: 0,
+    slidePattern: 'horizontal',
+    numSlides: 3,
+    slides: [],
+  }
+}
+
+export function getDefaultCCSlideProps() {
+  // Base 16:9 ratio dimensions
+  const baseWidth = 1280
+  const baseHeight = 720
+  // Add header height
+  const totalHeight = baseHeight + CC_BASE_STYLE_CONSTANTS.HEADER.height
+  
+  return {
+    title: 'Slide',
+    w: baseWidth,
+    h: totalHeight,
+    headerColor: '#3e6589',
+    backgroundColor: '#0f0f0f',
+    isLocked: false,
+    imageData: '',
+    meta: {
+      text: '',
+      format: 'markdown'
+    }
+  }
+}
+
+export function getDefaultCCSlideLayoutBindingProps() {
+  return {
+    isMovingWithParent: false,
+    placeholder: false,
+    index: '0',
+  }
+}
+
+export function getDefaultCCYoutubeEmbedProps() {
+  const videoHeight = 450
+  const totalHeight = videoHeight + CC_BASE_STYLE_CONSTANTS.HEADER.height + (CC_BASE_STYLE_CONSTANTS.CONTENT.padding * 2)
+  
+  return {
+    ...getDefaultCCBaseProps(),
+    title: 'YouTube Video',
+    w: 800,
+    h: totalHeight,
+    headerColor: '#ff0000',
+    backgroundColor: '#0f0f0f',
+    isLocked: false,
+    video_url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    transcript: [],
+    transcriptVisible: false,
+  }
+}
+
+export const getDefaultCCSearchProps = () => ({
+  ...getDefaultCCBaseProps(),
+  w: 400,
+  h: 500,
+  title: 'Search',
+  headerColor: '#1a73e8',
+  backgroundColor: '#ffffff',
+  query: '',
+  results: [],
+  isSearching: false,
+})
+
+export const getDefaultCCWebBrowserProps = () => ({
+  ...getDefaultCCBaseProps(),
+  title: 'Web Browser',
+  w: 800,
+  h: 600,
+  headerColor: '#1a73e8',
+  backgroundColor: '#ffffff',
+  url: '',
+  history: [],
+  currentHistoryIndex: -1,
+  isLoading: false,
+})
diff --git a/src/utils/tldraw/cc-base/cc-search/CCSearchShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-search/CCSearchShapeUtil.tsx
new file mode 100644
index 0000000..a1bca27
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-search/CCSearchShapeUtil.tsx
@@ -0,0 +1,85 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { ccShapeProps, getDefaultCCSearchProps } from '../cc-props'
+import { ccShapeMigrations } from '../cc-migrations'
+import { Rectangle2d, Vec } from 'tldraw'
+import { SearchComponent } from './SearchComponent'
+import { SearchResult } from '../../../../services/tldraw/searchService'
+export interface CCSearchShape extends CCBaseShape {
+  type: 'cc-search'
+  props: CCBaseShape['props'] & {
+    query: string
+    results: SearchResult[]
+    isSearching: boolean
+  }
+}
+
+export class CCSearchShapeUtil extends CCBaseShapeUtil<CCSearchShape> {
+  static override type = 'cc-search' as const;
+  static override props = ccShapeProps.search;
+  static override migrations = ccShapeMigrations.search;
+
+  override getDefaultProps(): CCSearchShape['props'] {
+    return getDefaultCCSearchProps() as CCSearchShape['props'];
+  }
+
+  override isAspectRatioLocked = () => false
+  override canResize = () => true
+  override canBind = () => false
+  override hideResizeHandles = () => false
+  override hideRotateHandle = () => false
+  override canEdit = () => false
+
+  override renderContent = (shape: CCSearchShape) => {
+    return (
+      <div style={{ width: '100%', height: '100%', pointerEvents: 'all' }}>
+        <SearchComponent shape={shape} />
+      </div>
+    )
+  }
+
+  override getGeometry(shape: CCSearchShape) {
+    return new Rectangle2d({
+      width: shape.props.w,
+      height: shape.props.h,
+      isFilled: true,
+    })
+  }
+
+  override onResize = (
+    shape: CCSearchShape,
+    info: { initialShape: CCSearchShape; scaleX: number; scaleY: number }
+  ) => {
+    const { initialShape, scaleX, scaleY } = info
+    const newW = Math.max(300, Math.round(initialShape.props.w * scaleX))
+    const newH = Math.max(200, Math.round(initialShape.props.h * scaleY))
+
+    return {
+      props: {
+        ...shape.props,
+        w: newW,
+        h: newH,
+      },
+    }
+  }
+
+  hitTestPoint = (shape: CCSearchShape, point: Vec) => {
+    const geometry = this.getGeometry(shape)
+    return geometry.hitTestPoint(point)
+  }
+
+  hitTestLineSegment = (shape: CCSearchShape, start: Vec, end: Vec) => {
+    const geometry = this.getGeometry(shape)
+    return geometry.hitTestLineSegment(start, end)
+  }
+
+  shouldRender = (prev: CCSearchShape, next: CCSearchShape) => {
+    return (
+      prev.props.w !== next.props.w ||
+      prev.props.h !== next.props.h ||
+      prev.props.query !== next.props.query ||
+      prev.props.results !== next.props.results ||
+      prev.props.isSearching !== next.props.isSearching
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-search/SearchComponent.tsx b/src/utils/tldraw/cc-base/cc-search/SearchComponent.tsx
new file mode 100644
index 0000000..34cf963
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-search/SearchComponent.tsx
@@ -0,0 +1,383 @@
+import React, { useState, useCallback } from 'react'
+import { useEditor } from '@tldraw/tldraw'
+import { 
+  TextField, 
+  IconButton, 
+  CircularProgress, 
+  List, 
+  ListItem, 
+  ListItemText, 
+  Paper,
+  Button,
+  ButtonGroup,
+  Menu,
+  MenuItem,
+  Tooltip,
+  IconButton as MuiIconButton
+} from '@mui/material'
+import SearchIcon from '@mui/icons-material/Search'
+import GridViewIcon from '@mui/icons-material/GridView'
+import ViewStreamIcon from '@mui/icons-material/ViewStream'
+import ViewWeekIcon from '@mui/icons-material/ViewWeek'
+import FilterNoneIcon from '@mui/icons-material/FilterNone'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+import { CCSearchShape } from './CCSearchShapeUtil'
+import { SearchService, SearchResult } from '../../../../services/tldraw/searchService'
+import { logger } from '../../../../debugConfig'
+import { createWebBrowserShape, createMultipleWebBrowsers } from '../shape-helpers/web-browser-helpers'
+
+interface SearchComponentProps {
+  shape: CCSearchShape
+}
+
+type LayoutType = 'grid' | 'cascade' | 'horizontal' | 'vertical'
+
+export const SearchComponent: React.FC<SearchComponentProps> = ({ shape }) => {
+  const editor = useEditor()
+  const [query, setQuery] = useState(shape.props.query || '')
+  const [isSearching, setIsSearching] = useState(false)
+  const [selectedResults, setSelectedResults] = useState<SearchResult[]>([])
+  const [layoutAnchorEl, setLayoutAnchorEl] = useState<null | HTMLElement>(null)
+  const [currentLayout, setCurrentLayout] = useState<LayoutType>('grid')
+
+  const handleSearch = useCallback(async () => {
+    if (!query.trim()) return
+
+    logger.debug('cc-search', '🔍 Starting search', { query })
+    setIsSearching(true)
+    try {
+      const results = await SearchService.search(query)
+      logger.debug('cc-search', '✅ Search completed', { 
+        query, 
+        resultCount: results.length 
+      })
+      
+      // Update the shape's properties
+      editor.updateShape({
+        id: shape.id,
+        type: 'cc-search',
+        props: {
+          ...shape.props,
+          query,
+          results,
+          isSearching: false,
+        },
+      })
+    } catch (error) {
+      logger.error('cc-search', '❌ Search failed', { error })
+      // Clear results on error
+      editor.updateShape({
+        id: shape.id,
+        type: 'cc-search',
+        props: {
+          ...shape.props,
+          query,
+          results: [],
+          isSearching: false,
+        },
+      })
+    } finally {
+      setIsSearching(false)
+      setSelectedResults([])
+    }
+  }, [query, editor, shape])
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSearch()
+    }
+  }
+
+  const handleResultClick = useCallback((result: SearchResult) => {
+    logger.debug('cc-search', '🖱️ Search result clicked', { 
+      resultTitle: result.title,
+      resultUrl: result.url 
+    })
+
+    try {
+      logger.debug('cc-web-browser', '🌐 Creating web browser shape', {
+        url: result.url,
+        position: { x: shape.x + shape.props.w + 20, y: shape.y }
+      })
+
+      // Create a single browser shape for direct click
+      createWebBrowserShape(editor, {
+        url: result.url,
+        title: result.title,
+        x: shape.x + shape.props.w + 20,
+        y: shape.y
+      })
+
+    } catch (error) {
+      logger.error('cc-web-browser', '❌ Failed to create web browser shape', { error })
+    }
+  }, [editor, shape])
+
+  const handleResultSelect = (result: SearchResult, event: React.MouseEvent) => {
+    // If shift key is pressed, handle multi-select
+    if (event.shiftKey) {
+      setSelectedResults(prev => {
+        const isSelected = prev.some(r => r.url === result.url)
+        if (isSelected) {
+          return prev.filter(r => r.url !== result.url)
+        } else {
+          return [...prev, result]
+        }
+      })
+    }
+  }
+
+  const handleLayoutMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setLayoutAnchorEl(event.currentTarget)
+  }
+
+  const handleLayoutMenuClose = () => {
+    setLayoutAnchorEl(null)
+  }
+
+  const handleLayoutSelect = (layout: LayoutType) => {
+    setCurrentLayout(layout)
+    handleLayoutMenuClose()
+  }
+
+  const openSelectedResults = () => {
+    if (selectedResults.length === 0) return
+
+    logger.debug('cc-web-browser', '🌐 Creating web browser shapes', {
+      count: selectedResults.length,
+      layout: currentLayout
+    })
+
+    const browsers = selectedResults.map(result => ({
+      url: result.url,
+      title: result.title
+    }))
+
+    // Calculate starting position relative to the search shape
+    const startX = shape.x + shape.props.w + 20
+    const startY = shape.y
+
+    createMultipleWebBrowsers(editor, {
+      browsers,
+      layout: currentLayout,
+      startX,
+      startY,
+      spacing: 30
+    })
+
+    // Clear selection after opening
+    setSelectedResults([])
+  }
+
+  const getLayoutIcon = (layout: LayoutType) => {
+    switch (layout) {
+      case 'grid':
+        return <GridViewIcon />
+      case 'horizontal':
+        return <ViewStreamIcon />
+      case 'vertical':
+        return <ViewWeekIcon />
+      case 'cascade':
+        return <FilterNoneIcon />
+    }
+  }
+
+  return (
+    <div 
+      style={{ 
+        height: '100%', 
+        display: 'flex', 
+        flexDirection: 'column', 
+        gap: '8px',
+        pointerEvents: 'all',  // Ensure we get pointer events
+        position: 'relative',  // Create a new stacking context
+        zIndex: 1  // Ensure our content is above TLDraw's canvas
+      }}
+      onPointerDown={(e) => {
+        // Prevent TLDraw from handling our pointer events
+        e.stopPropagation()
+      }}
+    >
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <TextField
+          fullWidth
+          variant="outlined"
+          size="small"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onKeyPress={handleKeyPress}
+          placeholder="Search..."
+          disabled={isSearching}
+        />
+        <IconButton 
+          onClick={handleSearch}
+          disabled={isSearching || !query.trim()}
+          color="primary"
+        >
+          {isSearching ? <CircularProgress size={24} /> : <SearchIcon />}
+        </IconButton>
+      </div>
+
+      {shape.props.results.length > 0 && (
+        <div 
+          style={{ display: 'flex', gap: '8px', alignItems: 'center' }}
+          onPointerDown={(e) => e.stopPropagation()}
+        >
+          <ButtonGroup variant="outlined" size="small">
+            <Tooltip title="Open selected results">
+              <span>
+                <Button
+                  onClick={openSelectedResults}
+                  disabled={selectedResults.length === 0}
+                  startIcon={getLayoutIcon(currentLayout)}
+                >
+                  Open ({selectedResults.length})
+                </Button>
+              </span>
+            </Tooltip>
+            <Tooltip title="Choose layout">
+              <span>
+                <Button
+                  size="small"
+                  onClick={handleLayoutMenuOpen}
+                  disabled={selectedResults.length === 0}
+                >
+                  ▼
+                </Button>
+              </span>
+            </Tooltip>
+          </ButtonGroup>
+          <Menu
+            anchorEl={layoutAnchorEl}
+            open={Boolean(layoutAnchorEl)}
+            onClose={handleLayoutMenuClose}
+          >
+            <MenuItem onClick={() => handleLayoutSelect('grid')}>
+              <GridViewIcon sx={{ mr: 1 }} /> Grid
+            </MenuItem>
+            <MenuItem onClick={() => handleLayoutSelect('horizontal')}>
+              <ViewStreamIcon sx={{ mr: 1 }} /> Horizontal
+            </MenuItem>
+            <MenuItem onClick={() => handleLayoutSelect('vertical')}>
+              <ViewWeekIcon sx={{ mr: 1 }} /> Vertical
+            </MenuItem>
+            <MenuItem onClick={() => handleLayoutSelect('cascade')}>
+              <FilterNoneIcon sx={{ mr: 1 }} /> Cascade
+            </MenuItem>
+          </Menu>
+        </div>
+      )}
+
+      <Paper 
+        style={{ 
+          flex: 1, 
+          overflow: 'auto',
+          backgroundColor: 'rgba(255, 255, 255, 0.8)',
+          position: 'relative',  // Create a new stacking context
+          zIndex: 1  // Ensure our content is above TLDraw's canvas
+        }}
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        <List>
+          {shape.props.results.map((result, index) => (
+            <ListItem 
+              key={index}
+              onClick={(e) => handleResultSelect(result, e)}
+              selected={selectedResults.some(r => r.url === result.url)}
+              sx={{
+                cursor: 'pointer',
+                position: 'relative',
+                '&:hover': {
+                  backgroundColor: 'rgba(25, 118, 210, 0.08)',
+                },
+                '&.Mui-selected': {
+                  backgroundColor: 'rgba(25, 118, 210, 0.12)',
+                  '&:hover': {
+                    backgroundColor: 'rgba(25, 118, 210, 0.16)',
+                  },
+                  '&::before': {
+                    content: '""',
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: '4px',
+                    backgroundColor: '#1a73e8',
+                    borderRadius: '0 2px 2px 0'
+                  }
+                },
+                transition: 'all 0.2s ease'
+              }}
+              onPointerDown={(e) => {
+                // Prevent TLDraw from handling our pointer events
+                e.stopPropagation()
+              }}
+            >
+              <div style={{ 
+                display: 'flex', 
+                flexDirection: 'column', 
+                flex: 1,
+                gap: '4px'
+              }}>
+                <ListItemText
+                  primary={result.title}
+                  secondary={result.content}
+                  primaryTypographyProps={{
+                    style: { 
+                      fontWeight: selectedResults.some(r => r.url === result.url) ? 'bold' : 'normal',
+                      fontSize: '0.9rem',
+                      color: '#1a73e8'
+                    }
+                  }}
+                  secondaryTypographyProps={{
+                    style: { 
+                      fontSize: '0.8rem',
+                      display: '-webkit-box',
+                      WebkitLineClamp: 2,
+                      WebkitBoxOrient: 'vertical',
+                      overflow: 'hidden'
+                    }
+                  }}
+                />
+                <div style={{ 
+                  display: 'flex', 
+                  gap: '8px',
+                  alignItems: 'center'
+                }}>
+                  <span style={{ 
+                    fontSize: '0.8rem', 
+                    color: '#006621',
+                    maxWidth: '200px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap'
+                  }}>
+                    {result.url}
+                  </span>
+                  <Tooltip title="Open in new browser">
+                    <MuiIconButton
+                      size="small"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleResultClick(result)
+                      }}
+                      sx={{
+                        marginLeft: 'auto',
+                        color: '#1a73e8',
+                        '&:hover': {
+                          backgroundColor: 'rgba(26, 115, 232, 0.08)'
+                        }
+                      }}
+                    >
+                      <OpenInNewIcon fontSize="small" />
+                    </MuiIconButton>
+                  </Tooltip>
+                </div>
+              </div>
+            </ListItem>
+          ))}
+        </List>
+      </Paper>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-settings/CCSettingsShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-settings/CCSettingsShapeUtil.tsx
new file mode 100644
index 0000000..3c099a3
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-settings/CCSettingsShapeUtil.tsx
@@ -0,0 +1,40 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { ccShapeProps, getDefaultCCSettingsProps } from '../cc-props'
+import { ccShapeMigrations } from '../cc-migrations'
+import { SettingsComponent } from './SettingsComponent'
+
+export interface CCSettingsShape extends CCBaseShape {
+  type: 'cc-settings'
+  props: {
+    title: string
+    w: number
+    h: number
+    headerColor: string
+    backgroundColor: string
+    isLocked: boolean
+    userEmail: string
+    user_role: string
+    isTeacher: boolean
+  }
+}
+
+export class CCSettingsShapeUtil extends CCBaseShapeUtil<CCSettingsShape> {
+  static override type = 'cc-settings' as const
+  static override props = ccShapeProps.settings
+  static override migrations = ccShapeMigrations.settings
+
+  override getDefaultProps(): CCSettingsShape['props'] {
+    return getDefaultCCSettingsProps() as CCSettingsShape['props']
+  }
+
+  override canResize = () => false
+  override isAspectRatioLocked = () => false
+  override hideResizeHandles = () => true
+  override hideRotateHandle = () => false
+  override canEdit = () => false
+
+  override renderContent = () => {
+    return <SettingsComponent />
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-settings/SettingsComponent.tsx b/src/utils/tldraw/cc-base/cc-settings/SettingsComponent.tsx
new file mode 100644
index 0000000..a205bc7
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-settings/SettingsComponent.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { Container, Typography, Paper, Box, Button } from '@mui/material'
+import { useAuth } from '../../../../contexts/AuthContext'
+
+export const SettingsComponent: React.FC = () => {
+  // Use AuthContext to show real-time user data
+  const { user, user_role: currentRole } = useAuth()
+  const currentEmail = user?.email || ''
+  const currentUserRole = currentRole || ''
+  const isCurrentTeacher = currentRole?.includes('teacher') || false
+
+  return (
+    <Container>
+      {/* User Info Section */}
+      <Paper sx={{ p: 2, mb: 2 }}>
+        <Typography variant="h6" gutterBottom>
+          User Information
+        </Typography>
+        <Box sx={{ mb: 2 }}>
+          <Typography variant="body1">
+            Email: {currentEmail || 'Not set'}
+          </Typography>
+          <Typography variant="body1">
+            Role: {currentUserRole || 'Not set'}
+          </Typography>
+        </Box>
+      </Paper>
+
+      {/* Timetable Upload Section - Only visible for teachers */}
+      {isCurrentTeacher && (
+        <Paper sx={{ p: 2, mb: 2 }}>
+          <Typography variant="h6" gutterBottom>
+            Timetable Management
+          </Typography>
+          <Box sx={{ mt: 2 }}>
+            <Button
+              variant="contained"
+              component="label"
+              color="secondary"
+              fullWidth
+            >
+              Upload Timetable
+              <input
+                type="file"
+                hidden
+                accept=".xlsx"
+              />
+            </Button>
+            <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+              Upload your timetable in Excel (.xlsx) format
+            </Typography>
+          </Box>
+        </Paper>
+      )}
+    </Container>
+  )
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-slideshow/CCSlideLayoutBindingUtil.tsx b/src/utils/tldraw/cc-base/cc-slideshow/CCSlideLayoutBindingUtil.tsx
new file mode 100644
index 0000000..63a41ea
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-slideshow/CCSlideLayoutBindingUtil.tsx
@@ -0,0 +1,453 @@
+import { BindingUtil, TLBaseBinding, IndexKey, Vec, TLShapeId } from '@tldraw/tldraw'
+import { CCSlideShowShape } from './CCSlideShowShapeUtil'
+import { CCSlideShape } from './CCSlideShapeUtil'
+import { CC_SLIDESHOW_STYLE_CONSTANTS } from '../cc-styles'
+import { logger } from '../../../../debugConfig'
+
+export interface CCSlideLayoutBinding extends TLBaseBinding<'cc-slide-layout', {
+  index: IndexKey
+  isMovingWithParent: boolean
+  placeholder: boolean
+}> {}
+
+export class CCSlideLayoutBindingUtil extends BindingUtil<CCSlideLayoutBinding> {
+  static type = 'cc-slide-layout' as const
+
+  getDefaultProps(): CCSlideLayoutBinding['props'] {
+    return {
+      index: 'a1' as IndexKey,
+      isMovingWithParent: false,
+      placeholder: false
+    }
+  }
+
+  private updateSlidePosition(binding: CCSlideLayoutBinding) {
+    const { fromId: slideshowId, toId: slideId } = binding
+    const slideshow = this.editor.getShape<CCSlideShowShape>(slideshowId)
+    const slide = this.editor.getShape<CCSlideShape>(slideId)
+    
+    if (!slideshow || !slide) return
+
+    // Get all bindings from the slideshow, sorted by index
+    const bindings = this.editor
+      .getBindingsFromShape<CCSlideLayoutBinding>(slideshow, 'cc-slide-layout')
+      .sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
+
+    // Find position in sorted bindings array
+    const index = bindings.findIndex(b => b.id === binding.id)
+    if (index === -1) return
+
+    // Get all slides and their dimensions up to the current index
+    const slidesBeforeCurrent = bindings
+      .slice(0, index)
+      .map(b => {
+        const s = this.editor.getShape<CCSlideShape>(b.toId)
+        return s ? { width: s.props.w, height: s.props.h } : null
+      })
+      .filter(s => s !== null) as { width: number, height: number }[]
+
+    const spacing = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING
+    const headerHeight = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT
+    const contentPadding = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_CONTENT_PADDING
+
+    // Calculate new position based on pattern
+    let offset: Vec = new Vec(0, 0)
+    if (slideshow.props.slidePattern === 'horizontal') {
+      // Sum widths of all previous slides plus spacing
+      const totalWidthBefore = slidesBeforeCurrent.reduce((sum, s) => sum + s.width + spacing, 0)
+      offset = new Vec(
+        spacing + totalWidthBefore,
+        headerHeight + contentPadding + spacing
+      )
+    } else if (slideshow.props.slidePattern === 'vertical') {
+      // Sum heights of all previous slides plus spacing
+      const totalHeightBefore = slidesBeforeCurrent.reduce((sum, s) => sum + s.height + spacing, 0)
+      offset = new Vec(
+        spacing,
+        headerHeight + contentPadding + spacing + totalHeightBefore
+      )
+    } else if (slideshow.props.slidePattern === 'grid') {
+      const cols = Math.ceil(Math.sqrt(bindings.length))
+      const row = Math.floor(index / cols)
+      const col = index % cols
+
+      // Get maximum dimensions for each column and row up to current position
+      const colWidths = new Array(cols).fill(0)
+      const rowHeights = new Array(Math.ceil(bindings.length / cols)).fill(0)
+
+      bindings.forEach((b, i) => {
+        const s = this.editor.getShape<CCSlideShape>(b.toId)
+        if (!s) return
+        const r = Math.floor(i / cols)
+        const c = i % cols
+        colWidths[c] = Math.max(colWidths[c], s.props.w)
+        rowHeights[r] = Math.max(rowHeights[r], s.props.h)
+      })
+
+      // Calculate position based on accumulated column widths and row heights
+      const xPos = spacing + colWidths.slice(0, col).reduce((sum, w) => sum + w + spacing, 0)
+      const yPos = headerHeight + contentPadding + spacing + 
+                  rowHeights.slice(0, row).reduce((sum, h) => sum + h + spacing, 0)
+
+      offset = new Vec(xPos, yPos)
+    } else if (slideshow.props.slidePattern === 'radial') {
+      // For radial pattern, calculate position based on index and total slides
+      const totalSlides = bindings.length
+      const angle = (2 * Math.PI * index) / totalSlides
+      
+      // Find the largest slide dimension to determine radius
+      const maxDimension = Math.max(
+        ...bindings.map(b => {
+          const s = this.editor.getShape<CCSlideShape>(b.toId)
+          return s ? Math.max(s.props.w, s.props.h) : 0
+        })
+      )
+      
+      const radius = maxDimension * 0.75  // Adjust radius based on largest slide
+      
+      // Calculate position on the circle
+      const x = spacing + radius + (radius * Math.cos(angle))
+      const y = headerHeight + contentPadding + spacing + radius + (radius * Math.sin(angle))
+      
+      offset = new Vec(x, y)
+    }
+
+    const point = this.editor.getPointInParentSpace(
+      slide,
+      this.editor.getShapePageTransform(slideshow)!.applyToPoint(offset)
+    )
+
+    if (slide.x !== point.x || slide.y !== point.y) {
+      this.editor.updateShape<CCSlideShape>({
+        id: slideId,
+        type: 'cc-slide',
+        x: point.x,
+        y: point.y,
+      })
+    }
+  }
+
+  private updateSlideshowSize(slideshowId: TLShapeId) {
+    const slideshow = this.editor.getShape<CCSlideShowShape>(slideshowId)
+    if (!slideshow) return
+
+    // Get all bindings, including placeholders
+    const bindings = this.editor
+      .getBindingsFromShape<CCSlideLayoutBinding>(slideshow, 'cc-slide-layout')
+      .sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
+
+    const spacing = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING
+    const headerHeight = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT
+    const contentPadding = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_CONTENT_PADDING
+
+    // Default dimensions for empty slideshow
+    const defaultWidth = CC_SLIDESHOW_STYLE_CONSTANTS.DEFAULT_SLIDE_WIDTH + (spacing * 2)
+    const defaultHeight = CC_SLIDESHOW_STYLE_CONSTANTS.DEFAULT_SLIDE_HEIGHT + 
+                         headerHeight + (contentPadding * 2) + (spacing * 2)
+
+    // If no bindings, set to default size
+    if (bindings.length === 0) {
+      if (slideshow.props.w !== defaultWidth || slideshow.props.h !== defaultHeight) {
+        this.editor.updateShape<CCSlideShowShape>({
+          id: slideshow.id,
+          type: 'cc-slideshow',
+          props: { 
+            ...slideshow.props,
+            w: defaultWidth,
+            h: defaultHeight
+          }
+        })
+      }
+      return
+    }
+
+    // Get all slides and their dimensions
+    const slides = bindings.map(binding => {
+      const slide = this.editor.getShape<CCSlideShape>(binding.toId)
+      if (!slide) return null
+      return {
+        width: slide.props.w,
+        height: slide.props.h
+      }
+    }).filter(slide => slide !== null) as { width: number, height: number }[]
+
+    if (slides.length === 0) return
+
+    // Calculate dimensions based on pattern
+    let width = defaultWidth
+    let height = defaultHeight
+
+    if (slideshow.props.slidePattern === 'horizontal') {
+      // Sum of all widths plus spacing between them
+      width = Math.max(
+        spacing + (slides.reduce((sum, slide) => sum + slide.width, 0) + 
+        ((slides.length - 1) * spacing)) + spacing,
+        slides[0].width + (spacing * 2)  // Minimum width is first slide plus spacing
+      )
+      // Maximum height of slides plus header and spacing
+      height = headerHeight + contentPadding * 2 + spacing * 2 + 
+               Math.max(...slides.map(slide => slide.height))
+    } else if (slideshow.props.slidePattern === 'vertical') {
+      // Maximum width of slides plus spacing
+      width = Math.max(...slides.map(slide => slide.width)) + (spacing * 2)
+      // Sum of all heights plus spacing between them
+      height = Math.max(
+        headerHeight + contentPadding * 2 + spacing + 
+        (slides.reduce((sum, slide) => sum + slide.height, 0) + 
+        ((slides.length - 1) * spacing)) + spacing,
+        headerHeight + contentPadding * 2 + spacing * 2 + slides[0].height
+      )
+    } else if (slideshow.props.slidePattern === 'grid') {
+      const cols = Math.ceil(Math.sqrt(slides.length))
+      const rows = Math.ceil(slides.length / cols)
+      
+      // Find maximum width and height for grid cells
+      const maxCellWidth = Math.max(...slides.map(slide => slide.width))
+      const maxCellHeight = Math.max(...slides.map(slide => slide.height))
+      
+      width = Math.max(
+        spacing + (cols * maxCellWidth + (cols - 1) * spacing) + spacing,
+        maxCellWidth + (spacing * 2)
+      )
+      height = Math.max(
+        headerHeight + contentPadding * 2 + spacing +
+        (rows * maxCellHeight + (rows - 1) * spacing) + spacing,
+        headerHeight + contentPadding * 2 + spacing * 2 + maxCellHeight
+      )
+    } else if (slideshow.props.slidePattern === 'radial') {
+      // For radial pattern, use the largest slide dimensions to ensure proper spacing
+      const maxSlideWidth = Math.max(...slides.map(slide => slide.width))
+      const maxSlideHeight = Math.max(...slides.map(slide => slide.height))
+      
+      // Calculate dimensions to fit all slides in a circle
+      const radius = Math.max(maxSlideWidth, maxSlideHeight) * 1.5  // 1.5x for spacing
+      width = radius * 2 + (spacing * 2)
+      height = headerHeight + contentPadding * 2 + radius * 2 + (spacing * 2)
+    }
+
+    if (width !== slideshow.props.w || height !== slideshow.props.h) {
+      this.editor.updateShape<CCSlideShowShape>({
+        id: slideshow.id,
+        type: 'cc-slideshow',
+        props: { 
+          ...slideshow.props,
+          w: width,
+          h: height
+        }
+      })
+    }
+
+    // Update positions for all bindings
+    bindings.forEach(binding => this.updateSlidePosition(binding))
+  }
+
+  private getDistance(a: Vec, b: Vec): number {
+    const dx = a.x - b.x
+    const dy = a.y - b.y
+    return Math.sqrt(dx * dx + dy * dy)
+  }
+
+  private getInsertPosition(
+    slideshow: CCSlideShowShape,
+    draggedSlide: CCSlideShape,
+    point: Vec
+  ): { index: number; offset: Vec } {
+    const bindings = this.editor
+      .getBindingsFromShape<CCSlideLayoutBinding>(slideshow, 'cc-slide-layout')
+      .sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
+
+    const spacing = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING
+    const headerHeight = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT
+    const contentPadding = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_CONTENT_PADDING
+
+    // Get all existing slides with their dimensions
+    const existingSlides = bindings.map(b => {
+      const slide = this.editor.getShape<CCSlideShape>(b.toId)
+      return slide ? {
+        width: slide.props.w,
+        height: slide.props.h,
+        binding: b
+      } : null
+    }).filter(s => s !== null) as { width: number; height: number; binding: CCSlideLayoutBinding }[]
+
+    if (slideshow.props.slidePattern === 'horizontal') {
+      let currentX = spacing
+      let insertIndex = 0
+
+      // Calculate trigger points based on slide widths and the dragged slide
+      for (const slide of existingSlides) {
+        // Calculate the gap between slides based on the larger width
+        const gapWidth = Math.max(slide.width, draggedSlide.props.w)
+        const triggerPoint = currentX + (gapWidth / 2)
+        if (point.x < triggerPoint) break
+        currentX += slide.width + spacing
+        insertIndex++
+      }
+
+      return {
+        index: insertIndex,
+        offset: new Vec(currentX, headerHeight + contentPadding + spacing)
+      }
+
+    } else if (slideshow.props.slidePattern === 'vertical') {
+      let currentY = headerHeight + contentPadding + spacing
+      let insertIndex = 0
+
+      // Calculate trigger points based on slide heights and the dragged slide
+      for (const slide of existingSlides) {
+        // Calculate the gap between slides based on the larger height
+        const gapHeight = Math.max(slide.height, draggedSlide.props.h)
+        const triggerPoint = currentY + (gapHeight / 2)
+        if (point.y < triggerPoint) break
+        currentY += slide.height + spacing
+        insertIndex++
+      }
+
+      return {
+        index: insertIndex,
+        offset: new Vec(spacing, currentY)
+      }
+
+    } else if (slideshow.props.slidePattern === 'grid') {
+      const cols = Math.ceil(Math.sqrt(existingSlides.length + 1))  // +1 for the dragged slide
+      const colWidths = new Array(cols).fill(draggedSlide.props.w)  // Initialize with dragged slide width
+      const rowHeights = new Array(Math.ceil((existingSlides.length + 1) / cols)).fill(draggedSlide.props.h)  // Initialize with dragged slide height
+
+      // Calculate maximum dimensions for each column and row, including dragged slide dimensions
+      existingSlides.forEach((slide, i) => {
+        const row = Math.floor(i / cols)
+        const col = i % cols
+        colWidths[col] = Math.max(colWidths[col], slide.width)
+        rowHeights[row] = Math.max(rowHeights[row], slide.height)
+      })
+
+      // Calculate grid cell positions with dynamic cell sizes
+      let bestDistance = Infinity
+      let bestIndex = 0
+      let bestOffset = new Vec(0, 0)
+
+      for (let i = 0; i <= existingSlides.length; i++) {
+        const row = Math.floor(i / cols)
+        const col = i % cols
+
+        // Calculate cell position based on accumulated widths and heights
+        const cellX = spacing + colWidths.slice(0, col).reduce((sum, w) => sum + w + spacing, 0)
+        const cellY = headerHeight + contentPadding + spacing + 
+                     rowHeights.slice(0, row).reduce((sum, h) => sum + h + spacing, 0)
+
+        // Calculate distance to cell center
+        const cellCenterX = cellX + (colWidths[col] / 2)
+        const cellCenterY = cellY + (rowHeights[row] / 2)
+        const dx = point.x - cellCenterX
+        const dy = point.y - cellCenterY
+        const distance = Math.sqrt(dx * dx + dy * dy)
+
+        if (distance < bestDistance) {
+          bestDistance = distance
+          bestIndex = i
+          bestOffset = new Vec(cellX, cellY)
+        }
+      }
+
+      return {
+        index: bestIndex,
+        offset: bestOffset
+      }
+
+    } else if (slideshow.props.slidePattern === 'radial') {
+      // Find the largest slide dimension including the dragged slide
+      const maxDimension = Math.max(
+        draggedSlide.props.w,
+        draggedSlide.props.h,
+        ...existingSlides.map(s => Math.max(s.width, s.height))
+      )
+      
+      const radius = maxDimension * 0.75
+      const center = new Vec(
+        spacing + radius,
+        headerHeight + contentPadding + spacing + radius
+      )
+
+      // Calculate angle from center to drag point using manual vector calculation
+      const dx = point.x - center.x
+      const dy = point.y - center.y
+      const angleToPoint = Math.atan2(dy, dx)
+
+      // Normalize angle to 0-2π range
+      const normalizedAngle = angleToPoint < 0 ? angleToPoint + 2 * Math.PI : angleToPoint
+      
+      // Calculate insert index based on angle
+      const totalPositions = existingSlides.length + 1
+      const insertIndex = Math.floor((normalizedAngle * totalPositions) / (2 * Math.PI))
+
+      // Calculate position on circle for this index
+      const angle = (2 * Math.PI * insertIndex) / totalPositions
+      const x = center.x + (radius * Math.cos(angle))
+      const y = center.y + (radius * Math.sin(angle))
+
+      return {
+        index: insertIndex,
+        offset: new Vec(x, y)
+      }
+    }
+
+    // Default to end of slideshow if pattern not recognized
+    return {
+      index: existingSlides.length,
+      offset: new Vec(spacing, headerHeight + contentPadding + spacing)
+    }
+  }
+
+  onTranslateBinding(binding: CCSlideLayoutBinding, draggedShape: CCSlideShape, point: Vec): boolean {
+    const slideshow = this.editor.getShape<CCSlideShowShape>(binding.fromId)
+    if (!slideshow) return false
+
+    const { index } = this.getInsertPosition(slideshow, draggedShape, point)
+    const newIndex = `a${String(index + 1).padStart(3, '0')}` as IndexKey
+
+    this.editor.updateBinding({
+      id: binding.id,
+      type: 'cc-slide-layout',
+      fromId: binding.fromId,
+      toId: binding.toId,
+      props: { index: newIndex }
+    })
+
+    return true
+  }
+
+  override onAfterCreate({ binding }: { binding: CCSlideLayoutBinding }): void {
+    logger.debug('binding', '✅ onAfterCreate', { binding })
+    this.updateSlidePosition(binding)
+    this.updateSlideshowSize(binding.fromId)
+  }
+
+  override onAfterChange({ bindingAfter }: { bindingAfter: CCSlideLayoutBinding }): void {
+    logger.debug('binding', '✅ onAfterChange', { bindingAfter })
+    // Check if the slideshow still exists
+    const slideshow = this.editor.getShape<CCSlideShowShape>(bindingAfter.fromId)
+    if (!slideshow) return
+
+    this.updateSlidePosition(bindingAfter)
+    this.updateSlideshowSize(bindingAfter.fromId)
+  }
+
+  override onAfterChangeFromShape({ binding }: { binding: CCSlideLayoutBinding }): void {
+    logger.debug('binding', '✅ onAfterChangeFromShape', { binding })
+    // Check if the slideshow still exists
+    const slideshow = this.editor.getShape<CCSlideShowShape>(binding.fromId)
+    if (!slideshow) return
+
+    this.updateSlidePosition(binding)
+    this.updateSlideshowSize(binding.fromId)
+  }
+
+  override onAfterDelete({ binding }: { binding: CCSlideLayoutBinding }): void {
+    logger.debug('binding', '✅ onAfterDelete', { binding })
+    // Check if the slideshow still exists
+    const slideshow = this.editor.getShape<CCSlideShowShape>(binding.fromId)
+    if (!slideshow) return
+
+    this.updateSlideshowSize(binding.fromId)
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-slideshow/CCSlideShapeTool.tsx b/src/utils/tldraw/cc-base/cc-slideshow/CCSlideShapeTool.tsx
new file mode 100644
index 0000000..7e58530
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-slideshow/CCSlideShapeTool.tsx
@@ -0,0 +1,43 @@
+import { BaseBoxShapeTool, StateNode } from '@tldraw/tldraw'
+
+export class CCSlideShowShapeTool extends BaseBoxShapeTool {
+  static override id = 'cc-slideshow'
+  static override initial = 'idle'
+  override shapeType = 'cc-slideshow'
+
+  override onPointerDown = () => {
+    return this.transition('pointing')
+  }
+
+  override onPointerUp: StateNode['onPointerUp'] = () => {
+    const shape = this.editor.getSelectedShapes()[0]
+    if (shape?.type === 'cc-slideshow') {
+      // Switch to select tool after creating slideshow
+      this.editor.setCurrentTool('select')
+    }
+    return this.transition('idle')
+  }
+}
+
+export class CCSlideShapeTool extends BaseBoxShapeTool {
+  static override id = 'cc-slide'
+  static override initial = 'idle'
+  override shapeType = 'cc-slide'
+
+  override onPointerDown = () => {
+    // Check if there's a selected slideshow before allowing slide creation
+    const selectedShapes = this.editor.getSelectedShapes()
+    const slideshow = selectedShapes.find((s) => s.type === 'cc-slideshow')
+    
+    if (!slideshow) {
+      this.editor.setCurrentTool('select')
+      return this.transition('idle')
+    }
+
+    return this.transition('pointing')
+  }
+
+  override onPointerUp: StateNode['onPointerUp'] = () => {
+    return this.transition('idle')
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-slideshow/CCSlideShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-slideshow/CCSlideShapeUtil.tsx
new file mode 100644
index 0000000..8f31320
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-slideshow/CCSlideShapeUtil.tsx
@@ -0,0 +1,338 @@
+import { DefaultColorStyle, DefaultDashStyle, DefaultSizeStyle, Vec, getIndexBetween, clamp } from '@tldraw/tldraw'
+import { ccShapeProps, getDefaultCCSlideProps, CCBaseProps } from '../cc-props'
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCSlideShowShape } from './CCSlideShowShapeUtil'
+import { CCSlideLayoutBinding } from './CCSlideLayoutBindingUtil'
+import { CC_BASE_STYLE_CONSTANTS, CC_SLIDESHOW_STYLE_CONSTANTS } from '../cc-styles'
+import { ccShapeMigrations } from '../cc-migrations'
+import { logger } from '../../../../debugConfig'
+import { CCBaseShape } from '../cc-types'
+
+type CCSlideProps = CCBaseProps & {
+  imageData?: string
+  meta: {
+    text: string
+    format: string
+  }
+}
+
+export interface CCSlideShape extends CCBaseShape {
+  type: 'cc-slide'
+  props: CCSlideProps
+}
+
+export class CCSlideShapeUtil extends CCBaseShapeUtil<CCSlideShape> {
+  static override type = 'cc-slide' as const
+  static override props = ccShapeProps.slide
+  static override migrations = ccShapeMigrations.slide
+
+  static styles = {
+    color: DefaultColorStyle,
+    dash: DefaultDashStyle,
+    size: DefaultSizeStyle,
+  }
+
+  override getDefaultProps(): CCSlideShape['props'] {
+    return getDefaultCCSlideProps() as CCSlideShape['props']
+  }
+
+  override canResize = () => false
+  override isAspectRatioLocked = () => true
+  override hideResizeHandles = () => true
+  override hideRotateHandle = () => true
+  override canEdit = () => false
+
+  override canBind(args: { fromShapeType: string; toShapeType: string; bindingType: string }): boolean {
+    return args.fromShapeType === 'cc-slideshow' && args.toShapeType === 'cc-slide' && args.bindingType === 'cc-slide-layout'
+  }
+
+  private getTargetSlideshow(shape: CCSlideShape, pageAnchor: Vec) {
+    return this.editor.getShapeAtPoint(pageAnchor, {
+      hitInside: true,
+      filter: (otherShape) =>
+        this.editor.canBindShapes({ fromShape: otherShape, toShape: shape, binding: 'cc-slide-layout' }),
+    }) as CCSlideShowShape | undefined
+  }
+
+  getBindingIndexForPosition(shape: CCSlideShape, slideshow: CCSlideShowShape, pageAnchor: Vec) {
+    // Get all non-placeholder bindings, sorted by index
+    const allBindings = this.editor
+      .getBindingsFromShape<CCSlideLayoutBinding>(slideshow, 'cc-slide-layout')
+      .filter(b => !b.props.placeholder || b.toId === shape.id)  // Include our binding if it's placeholder
+      .sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
+
+    const spacing = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING
+    const headerHeight = CC_BASE_STYLE_CONSTANTS.HEADER.height
+    const contentPadding = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_CONTENT_PADDING
+
+    // Calculate target order based on position
+    let order: number
+    if (slideshow.props.slidePattern === 'horizontal') {
+      order = clamp(
+        Math.round((pageAnchor.x - slideshow.x - spacing) / (shape.props.w + spacing)),
+        0,
+        allBindings.length
+      )
+    } else if (slideshow.props.slidePattern === 'vertical') {
+      order = clamp(
+        Math.round((pageAnchor.y - slideshow.y - headerHeight - contentPadding - spacing) / (shape.props.h + spacing)),
+        0,
+        allBindings.length
+      )
+    } else if (slideshow.props.slidePattern === 'grid') {
+      const cols = Math.ceil(Math.sqrt(allBindings.length))
+      const col = clamp(
+        Math.round((pageAnchor.x - slideshow.x - spacing) / (shape.props.w + spacing)),
+        0,
+        cols
+      )
+      const row = clamp(
+        Math.round((pageAnchor.y - slideshow.y - headerHeight - contentPadding - spacing) / (shape.props.h + spacing)),
+        0,
+        Math.ceil(allBindings.length / cols)
+      )
+      order = clamp(row * cols + col, 0, allBindings.length)
+    } else {
+      order = 0
+    }
+
+    // Get the bindings before and after our target position
+    const belowSib = allBindings[order - 1]
+    const aboveSib = allBindings[order]
+
+    // If we're already at this position, keep our current index
+    if (belowSib?.toId === shape.id) {
+      return belowSib.props.index
+    } else if (aboveSib?.toId === shape.id) {
+      return aboveSib.props.index
+    }
+
+    // Otherwise, get an index between the two siblings
+    return getIndexBetween(belowSib?.props.index, aboveSib?.props.index)
+  }
+
+  override onTranslateStart = (shape: CCSlideShape) => {
+    const bindings = this.editor.getBindingsToShape<CCSlideLayoutBinding>(shape.id, 'cc-slide-layout')
+    logger.debug('shape', '✅ onTranslateStart', { 
+      shape,
+      bindings,
+      hasBindings: bindings.length > 0,
+      bindingTypes: bindings.map(b => ({
+        id: b.id,
+        fromId: b.fromId,
+        placeholder: b.props.placeholder,
+        isMovingWithParent: b.props.isMovingWithParent
+      }))
+    })
+
+    this.editor.updateBindings(
+      bindings.map((binding) => ({
+        ...binding,
+        props: { ...binding.props, placeholder: true },
+      }))
+    )
+  }
+
+  override onTranslate = (initial: CCSlideShape, current: CCSlideShape) => {
+    const pageAnchor = this.editor.getShapePageTransform(current).applyToPoint({ x: current.props.w / 2, y: current.props.h / 2 })
+    const targetSlideshow = this.getTargetSlideshow(current, pageAnchor)
+
+    // Get current binding if any
+    const currentBindings = this.editor.getBindingsToShape<CCSlideLayoutBinding>(current.id, 'cc-slide-layout')
+    const currentBinding = currentBindings[0]
+    const currentSlideshow = currentBinding ? this.editor.getShape<CCSlideShowShape>(currentBinding.fromId) : undefined
+
+    logger.debug('shape', '✅ onTranslate', {
+      initial,
+      current,
+      hasTargetSlideshow: !!targetSlideshow,
+      targetSlideshowId: targetSlideshow?.id,
+      currentBindings: currentBindings.map(b => ({
+        id: b.id,
+        fromId: b.fromId,
+        placeholder: b.props.placeholder,
+        isMovingWithParent: b.props.isMovingWithParent
+      })),
+      isInSlideshow: targetSlideshow ? this.isSlideInSlideshow(current, targetSlideshow) : false
+    })
+
+    // If we're moving out of a slideshow
+    if (currentBinding && currentSlideshow && !this.isSlideInSlideshow(current, currentSlideshow)) {
+      logger.debug('shape', '✅ onTranslate: Moving out of slideshow', {
+        slideId: current.id,
+        slideshowId: currentSlideshow.id
+      })
+      // Delete all bindings
+      this.editor.deleteBindings(currentBindings)
+      return current
+    }
+
+    // If we have no target slideshow, return
+    if (!targetSlideshow) {
+      return current
+    }
+
+    // Calculate new index
+    const index = this.getBindingIndexForPosition(current, targetSlideshow, pageAnchor)
+    
+    // If we have a current binding and it's for this slideshow
+    if (currentBinding && currentBinding.fromId === targetSlideshow.id) {
+      // Only update if index changed
+      if (currentBinding.props.index !== index) {
+        logger.debug('shape', '✅ onTranslate: Updating binding index', {
+          slideId: current.id,
+          slideshowId: targetSlideshow.id,
+          oldIndex: currentBinding.props.index,
+          newIndex: index
+        })
+        this.editor.updateBinding<CCSlideLayoutBinding>({
+          id: currentBinding.id,
+          type: currentBinding.type,
+          fromId: currentBinding.fromId,
+          toId: currentBinding.toId,
+          props: {
+            ...currentBinding.props,
+            index,
+            isMovingWithParent: true,
+          },
+        })
+      }
+    } else if (this.isSlideInSlideshow(current, targetSlideshow)) {
+      logger.debug('shape', '✅ onTranslate: Creating new placeholder binding', {
+        slideId: current.id,
+        slideshowId: targetSlideshow.id,
+        index
+      })
+      // Create new placeholder binding if we're inside the slideshow
+      this.editor.createBinding<CCSlideLayoutBinding>({
+        type: 'cc-slide-layout',
+        fromId: targetSlideshow.id,
+        toId: current.id,
+        props: {
+          index,
+          isMovingWithParent: true,
+          placeholder: true,
+        },
+      })
+    }
+
+    return current
+  }
+
+  private isSlideInSlideshow(slide: CCSlideShape, slideshow: CCSlideShowShape): boolean {
+    const slideCenter = this.editor.getShapePageTransform(slide).applyToPoint({
+      x: slide.props.w / 2,
+      y: slide.props.h / 2
+    })
+    const slideshowBounds = this.editor.getShapeGeometry(slideshow).bounds
+    
+    // Use smaller padding to be more lenient
+    const padding = CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING / 4
+    return (
+      slideCenter.x >= slideshow.x + padding &&
+      slideCenter.x <= slideshow.x + slideshowBounds.width - padding &&
+      slideCenter.y >= slideshow.y + padding &&
+      slideCenter.y <= slideshow.y + slideshowBounds.height - padding
+    )
+  }
+
+  override onTranslateEnd = (shape: CCSlideShape) => {
+    const pageAnchor = this.editor.getShapePageTransform(shape).applyToPoint({ x: shape.props.w / 2, y: shape.props.h / 2 })
+    const targetSlideshow = this.getTargetSlideshow(shape, pageAnchor)
+    const bindings = this.editor.getBindingsToShape<CCSlideLayoutBinding>(shape.id, 'cc-slide-layout')
+    
+    logger.debug('shape', '✅ onTranslateEnd', {
+      shape,
+      hasTargetSlideshow: !!targetSlideshow,
+      targetSlideshowId: targetSlideshow?.id,
+      bindings: bindings.map(b => ({
+        id: b.id,
+        fromId: b.fromId,
+        placeholder: b.props.placeholder,
+        isMovingWithParent: b.props.isMovingWithParent
+      })),
+      isInSlideshow: targetSlideshow ? this.isSlideInSlideshow(shape, targetSlideshow) : false
+    })
+
+    // If we have a target slideshow and the slide is inside it
+    if (targetSlideshow && this.isSlideInSlideshow(shape, targetSlideshow)) {
+      const index = this.getBindingIndexForPosition(shape, targetSlideshow, pageAnchor)
+      
+      // Instead of deleting and recreating, update existing binding if it exists
+      const existingBinding = bindings[0]
+      if (existingBinding && existingBinding.fromId === targetSlideshow.id) {
+        logger.debug('shape', '✅ onTranslateEnd: Updating existing binding', {
+          slideId: shape.id,
+          slideshowId: targetSlideshow.id,
+          bindingId: existingBinding.id,
+          index
+        })
+        this.editor.updateBinding<CCSlideLayoutBinding>({
+          id: existingBinding.id,
+          type: existingBinding.type,
+          fromId: existingBinding.fromId,
+          toId: existingBinding.toId,
+          props: {
+            index,
+            isMovingWithParent: true,
+            placeholder: false,
+          },
+        })
+      } else {
+        logger.debug('shape', '✅ onTranslateEnd: Creating new binding', {
+          slideId: shape.id,
+          slideshowId: targetSlideshow.id,
+          index
+        })
+        // If no existing binding or from different slideshow, delete and create new
+        this.editor.deleteBindings(bindings)
+        this.editor.createBinding<CCSlideLayoutBinding>({
+          type: 'cc-slide-layout',
+          fromId: targetSlideshow.id,
+          toId: shape.id,
+          props: {
+            index,
+            isMovingWithParent: true,
+            placeholder: false,
+          },
+        })
+      }
+    } else {
+      logger.debug('shape', '✅ onTranslateEnd: Removing bindings', {
+        slideId: shape.id,
+        bindings: bindings.map(b => b.id)
+      })
+      // Just delete bindings if we're not in a slideshow
+      this.editor.deleteBindings(bindings)
+    }
+  }
+
+  override renderContent = (shape: CCSlideShape) => {
+    
+    return (
+      <div style={{ 
+        width: '100%', 
+        height: '100%', 
+        position: 'relative',
+        backgroundColor: 'white',
+        borderRadius: '4px',
+        overflow: 'hidden'
+      }}>
+        {shape.props.imageData && (
+          <img 
+            src={shape.props.imageData} 
+            alt={shape.props.title}
+            style={{
+              width: '100%',
+              height: `100%`,
+              objectFit: 'contain',
+              position: 'absolute',
+              top: 0,
+              left: 0,
+            }}
+          />
+        )}
+      </div>
+    )
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-slideshow/CCSlideShowShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-slideshow/CCSlideShowShapeUtil.tsx
new file mode 100644
index 0000000..86066fd
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-slideshow/CCSlideShowShapeUtil.tsx
@@ -0,0 +1,51 @@
+import { DefaultColorStyle, DefaultDashStyle, DefaultSizeStyle } from '@tldraw/tldraw'
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { ccShapeProps, getDefaultCCSlideShowProps, CCBaseProps } from '../cc-props'
+import { ccShapeMigrations } from '../cc-migrations'
+import { CCBaseShape } from '../cc-types'
+
+type CCSlideshowProps = CCBaseProps & {
+  currentSlideIndex: number
+  slidePattern: string
+  numSlides: number
+  slides: string[]
+}
+
+export interface CCSlideShowShape extends CCBaseShape {
+  type: 'cc-slideshow'
+  props: CCSlideshowProps
+}
+
+export class CCSlideShowShapeUtil extends CCBaseShapeUtil<CCSlideShowShape> {
+  static override type = 'cc-slideshow' as const
+  static override props = ccShapeProps.slideshow
+  static override migrations = ccShapeMigrations.slideshow
+
+  static styles = {
+    color: DefaultColorStyle,
+    dash: DefaultDashStyle,
+    size: DefaultSizeStyle,
+  }
+
+  getDefaultProps(): CCSlideShowShape['props'] {
+    return getDefaultCCSlideShowProps() as CCSlideShowShape['props']
+  }
+
+  override canResize = () => false
+  override isAspectRatioLocked = () => true
+  override hideResizeHandles = () => false
+  override hideRotateHandle = () => false
+  override canEdit = () => false
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  override canBind(args: { fromShapeType: string; toShapeType: string; bindingType: string }): boolean {
+    return true
+  }
+
+  onBeforeCreate(shape: CCSlideShowShape): CCSlideShowShape {
+    return shape
+  }
+
+  override renderContent = () => {
+    return <div />
+  }
+}
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-slideshow/useSlideShow.tsx b/src/utils/tldraw/cc-base/cc-slideshow/useSlideShow.tsx
new file mode 100644
index 0000000..039019c
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-slideshow/useSlideShow.tsx
@@ -0,0 +1,165 @@
+import { Editor, atom, useEditor, useValue } from '@tldraw/tldraw'
+import { CCSlideShowShape } from './CCSlideShowShapeUtil'
+import { CCSlideShape } from './CCSlideShapeUtil'
+import { logger } from '../../../../debugConfig'
+import { CCSlideLayoutBinding } from './CCSlideLayoutBindingUtil'
+
+// Atoms for tracking current slideshow and slide
+export const $currentSlideShow = atom<CCSlideShowShape | null>('current slideshow', null)
+export const $currentSlide = atom<CCSlideShape | null>('current slide', null)
+
+// Helper functions for getting slides and slideshows
+export function getSlidesFromPage(editor: Editor) {
+  return editor
+    .getSortedChildIdsForParent(editor.getCurrentPageId())
+    .map((id) => editor.getShape(id))
+    .filter((s): s is CCSlideShape => s?.type === 'cc-slide')
+}
+
+export function getSlideShowsFromPage(editor: Editor) {
+  return editor
+    .getSortedChildIdsForParent(editor.getCurrentPageId())
+    .map((id) => editor.getShape(id))
+    .filter((s): s is CCSlideShowShape => s?.type === 'cc-slideshow')
+}
+
+// Hooks for accessing slides and slideshows
+export function useSlideShows() {
+  const editor = useEditor()
+  return useValue<CCSlideShowShape[]>('slideshow shapes', () => getSlideShowsFromPage(editor), [editor])
+}
+
+export function useSlides() {
+  const editor = useEditor()
+  return useValue<CCSlideShape[]>('slide shapes', () => getSlidesFromPage(editor), [editor])
+}
+
+export function useCurrentSlide() {
+  return useValue($currentSlide)
+}
+
+export function useCurrentSlideShow() {
+  return useValue($currentSlideShow)
+}
+
+// Navigation functions
+export function moveToSlide(editor: Editor, slide: CCSlideShape, isPresentation: boolean = false) {
+  logger.info('navigation', '🎯 Moving to slide', {
+    slideId: slide.id,
+    currentProps: slide.props,
+    isPresentation,
+    timestamp: new Date().toISOString()
+  })
+
+  // Find the parent slideshow through bindings
+  const binding = editor.getBindingsToShape(slide.id, 'cc-slide-layout')[0]
+  if (!binding) {
+    logger.warn('navigation', '⚠️ No binding found for slide', { slideId: slide.id })
+    return
+  }
+
+  const parentSlideshow = editor.getShape(binding.fromId) as CCSlideShowShape
+  if (!parentSlideshow) {
+    logger.warn('navigation', '⚠️ No parent slideshow found for slide', { slideId: slide.id })
+    return
+  }
+
+  // Get all bindings for this slideshow, sorted by index
+  const bindings = editor
+    .getBindingsFromShape(parentSlideshow, 'cc-slide-layout')
+    .filter((b): b is CCSlideLayoutBinding => b.type === 'cc-slide-layout')
+    .filter(b => !b.props.placeholder)
+    .sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
+
+  // Find the index of this slide's binding
+  const slideIndex = bindings.findIndex(b => b.toId === slide.id)
+  logger.debug('selection', '📍 Current slide position', {
+    slideId: slide.id,
+    slideIndex,
+    slideshowId: parentSlideshow.id,
+    totalSlides: bindings.length
+  })
+  
+  editor.batch(() => {
+    logger.debug('navigation', '🔄 Starting slide transition', {
+      from: parentSlideshow.props.currentSlideIndex,
+      to: slideIndex
+    })
+
+    // Update the slideshow's currentSlideIndex and slides array
+    editor.updateShape<CCSlideShowShape>({
+      id: parentSlideshow.id,
+      type: 'cc-slideshow',
+      props: {
+        ...parentSlideshow.props,
+        currentSlideIndex: slideIndex,
+        slides: bindings.map(b => b.toId),
+        numSlides: bindings.length
+      }
+    })
+
+    // Update UI atoms for state tracking
+    $currentSlide.set(slide)
+    $currentSlideShow.set(parentSlideshow)
+  })
+
+  logger.info('navigation', '✅ Slide transition complete', {
+    slideId: slide.id,
+    slideIndex,
+    slideshowId: parentSlideshow.id
+  })
+}
+
+export function moveToSlideShow(editor: Editor, slideshow: CCSlideShowShape, isPresentation: boolean = false) {
+  logger.info('navigation', '🎯 Moving to slideshow', {
+    slideshowId: slideshow.id,
+    currentIndex: slideshow.props.currentSlideIndex,
+    isPresentation,
+    timestamp: new Date().toISOString()
+  })
+
+  // Update current slideshow state
+  $currentSlideShow.set(slideshow)
+  
+  // Get all bindings for this slideshow, sorted by index
+  const bindings = editor
+    .getBindingsFromShape(slideshow, 'cc-slide-layout')
+    .filter((b): b is CCSlideLayoutBinding => b.type === 'cc-slide-layout')
+    .filter(b => !b.props.placeholder)
+    .sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
+
+  // Get the current slide based on currentSlideIndex
+  const currentBinding = bindings[slideshow.props.currentSlideIndex]
+  if (currentBinding) {
+    const currentSlide = editor.getShape(currentBinding.toId) as CCSlideShape
+    if (currentSlide) {
+      moveToSlide(editor, currentSlide, isPresentation)
+    } else {
+      logger.warn('navigation', '⚠️ Could not find current slide in slideshow', {
+        slideshowId: slideshow.id,
+        currentSlideId: currentBinding.toId,
+        currentIndex: slideshow.props.currentSlideIndex
+      })
+    }
+  }
+}
+
+// Helper functions for labels
+export function getSlideLabel(slide: CCSlideShape, index: number) {
+  return `Slide ${index + 1} (${slide.id})`
+}
+
+export function getSlideShowLabel(slideshow: CCSlideShowShape, index: number) {
+  return `Slideshow ${index + 1} (${slideshow.id})`
+}
+
+// Current ID getters
+export function getCurrentSlideId(): string | undefined {
+  const currentSlide = $currentSlide.get()
+  return currentSlide?.id
+}
+
+export function getCurrentSlideShowId(): string | undefined {
+  const currentSlideShow = $currentSlideShow.get()
+  return currentSlideShow?.id
+}
diff --git a/src/utils/tldraw/cc-base/cc-styles.ts b/src/utils/tldraw/cc-base/cc-styles.ts
new file mode 100644
index 0000000..5d111aa
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-styles.ts
@@ -0,0 +1,118 @@
+// Style constants used by all CC shapes
+export const CC_BASE_STYLE_CONSTANTS = {
+  FONT_FAMILY: 'Inter, sans-serif',
+  FONT_SIZES: {
+    small: 12,
+    medium: 14,
+    large: 16,
+  },
+  // Container styles
+  CONTAINER: {
+    borderRadius: '4px',
+    borderWidth: '2px',
+    borderColor: '#e2e8f0',
+    boxShadow: '0 2px 4px var(--color-muted-1)',
+  },
+  HEADER: {
+    height: 32,
+    padding: 8,
+    borderRadius: 4,
+  },
+  CONTENT: {
+    padding: 8,
+    borderRadius: 8,
+    borderWidth: 2,
+    backgroundColor: 'white',
+  },
+  HANDLE: {
+    width: 8,
+  },
+  COLORS: {
+    primary: '#3e6589',
+    primary_dark: '#2e4a69',
+    secondary: '#718096',
+    secondary_dark: '#5a687a',
+    background: '#ffffff',
+    border: '#e2e8f0',
+    text: '#1a202c',
+    textLight: '#718096',
+  },
+  // Minimum dimensions
+  MIN_DIMENSIONS: {
+    width: 100,
+    height: 100,
+  },
+} as const 
+
+// Calendar specific styles
+export const CC_CALENDAR_STYLE_CONSTANTS = {
+  // Common button styles
+  COMMON_BUTTON: {
+    border: 'none',
+    borderRadius: '5px',
+    padding: '0.4em 1em',
+    fontSize: '0.95em',
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    cursor: 'pointer',
+    transition: 'background-color 0.3s ease',
+    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+  },
+
+  // Application button styles
+  APPLICATION_BUTTON: {
+    backgroundColor: '#4f80ff',
+    color: '#fff',
+  },
+
+  // Option button styles
+  OPTION_BUTTON: {
+    backgroundColor: '#f0f4f9',
+    color: '#2c3e50',
+    border: '1px solid #ddd',
+  },
+
+  // Calendar event styles
+  EVENT: {
+    mainFrame: {
+      backgroundColor: 'transparent',
+      padding: '0px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '100%',
+      borderRadius: '4px',
+    },
+    title: {
+      fontSize: '1.1em',
+      fontWeight: 'normal',
+      textAlign: 'center',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      opacity: 1,
+      padding: '0px 0px',
+      width: '100%',
+      letterSpacing: '0.02em',
+      margin: '0px 0px',
+    }
+  }
+} as const 
+
+// Slideshow specific styles
+export const CC_SLIDESHOW_STYLE_CONSTANTS = {
+  DEFAULT_SLIDE_WIDTH: 1280,
+  DEFAULT_SLIDE_HEIGHT: 720,
+  SLIDE_HEADER_HEIGHT: 32,
+  SLIDE_HEADER_PADDING: 8,
+  SLIDE_CONTENT_PADDING: 0,
+  SLIDE_BORDER_RADIUS: 4,
+  SLIDE_BORDER_WIDTH: 1,
+  SLIDE_SPACING: 16,
+  SLIDE_COLORS: {
+    background: '#ffffff',
+    border: '#e2e8f0',
+    text: '#ffffff',
+    secondary: '#718096',
+  },
+} as const 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx
new file mode 100644
index 0000000..cdc2509
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx
@@ -0,0 +1,342 @@
+import React from 'react';
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil';
+import { TLShapeId } from '@tldraw/tldraw';
+import { CCBaseShape } from '../cc-types';
+import { TranscriptionManager } from '../cc-transcription/TranscriptionManager';
+import { ccShapeProps, getDefaultCCLiveTranscriptionProps } from '../cc-props';
+import { ccShapeMigrations } from '../cc-migrations';
+import { CC_BASE_STYLE_CONSTANTS } from '../cc-styles';
+
+export interface TranscriptionSegment {
+  id: string
+  text: string
+  completed: boolean
+  start: string
+  end: string
+}
+
+export interface CCLiveTranscriptionShape extends CCBaseShape {
+  type: 'cc-live-transcription'
+  props: {
+    title: string
+    w: number
+    h: number
+    headerColor: string
+    backgroundColor: string
+    isLocked: boolean
+    isRecording: boolean
+    segments: TranscriptionSegment[]
+    currentSegment?: TranscriptionSegment
+    lastProcessedSegment?: string // Track last processed segment to avoid duplicates
+  }
+}
+
+export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscriptionShape> {
+  static override type = 'cc-live-transcription' as const;
+  static override props = ccShapeProps.liveTranscription;
+  static override migrations = ccShapeMigrations.liveTranscription;
+
+  override getDefaultProps(): CCLiveTranscriptionShape['props'] {
+    return getDefaultCCLiveTranscriptionProps() as unknown as CCLiveTranscriptionShape['props'];
+  }
+
+  override renderContent = (shape: CCLiveTranscriptionShape) => {
+    return this.renderShapeContent(shape)
+  }
+
+  renderShapeContent = (shape: CCLiveTranscriptionShape) => {
+    const { isRecording, segments, currentSegment } = shape.props;
+    const contentHeight = shape.props.h - CC_BASE_STYLE_CONSTANTS.HEADER.height - 2 * CC_BASE_STYLE_CONSTANTS.CONTENT.padding;
+    const controlsHeight = 80;
+    const transcriptHeight = contentHeight - controlsHeight;
+
+    return (
+      <div style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        pointerEvents: 'all'
+      }}>
+        {/* Microphone Controls */}
+        <div style={{
+          height: controlsHeight,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '16px',
+          borderBottom: '1px solid #e0e0e0',
+          padding: '8px'
+        }}>
+          <div
+            role="button"
+            tabIndex={0}
+            onPointerDown={(e) => {
+              e.stopPropagation();
+            }}
+            onClick={(e) => {
+              e.stopPropagation();
+              this.toggleRecording(shape);
+            }}
+            style={{
+              width: '48px',
+              height: '48px',
+              borderRadius: '50%',
+              border: 'none',
+              backgroundColor: isRecording ? '#f44336' : '#4CAF50',
+              color: 'white',
+              fontSize: '24px',
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+              transition: 'all 0.3s ease',
+              userSelect: 'none',
+            }}
+          >
+            {isRecording ? '⏹' : '🎤'}
+          </div>
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start'
+          }}>
+            <div style={{ 
+              fontSize: '16px', 
+              fontWeight: 'bold',
+              color: isRecording ? '#f44336' : '#4CAF50'
+            }}>
+              {isRecording ? 'Recording...' : 'Ready'}
+            </div>
+            <div style={{ fontSize: '12px', color: '#666' }}>
+              {isRecording ? 'Click to stop' : 'Click to start recording'}
+            </div>
+          </div>
+        </div>
+
+        {/* Transcription Content */}
+        <AutoScrollContainer height={transcriptHeight}>
+          {/* Completed Segments */}
+          {segments.map((segment) => (
+            <div
+              key={segment.id}
+              style={{
+                padding: '8px',
+                backgroundColor: '#FFF',
+                borderRadius: '8px',
+                fontSize: '14px',
+                lineHeight: '1.4',
+                color: '#000000',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+                width: '100%',
+                transition: 'color 0.3s ease',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2px'
+              }}
+            >
+              <div style={{ 
+                fontSize: '11px', 
+                color: '#888',
+                fontFamily: 'monospace'
+              }}>
+                {segment.start}s - {segment.end}s
+              </div>
+              <div>
+                {segment.text}
+              </div>
+            </div>
+          ))}
+          
+          {/* Current Segment */}
+          {currentSegment && (
+            <div
+              style={{
+                padding: '8px',
+                backgroundColor: '#f5f5f5',
+                borderRadius: '8px',
+                fontSize: '14px',
+                lineHeight: '1.4',
+                color: '#666666',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+                width: '100%',
+                transition: 'color 0.3s ease',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '2px'
+              }}
+            >
+              <div style={{ 
+                fontSize: '11px', 
+                color: '#888',
+                fontFamily: 'monospace'
+              }}>
+                {currentSegment.start}s - {currentSegment.end}s
+              </div>
+              <div>
+                {currentSegment.text}
+              </div>
+            </div>
+          )}
+          
+          {/* Initial State */}
+          {!isRecording && segments.length === 0 && !currentSegment && (
+            <div
+              style={{
+                padding: '8px',
+                backgroundColor: '#FFF',
+                borderRadius: '8px',
+                fontSize: '18px',
+                lineHeight: '1.5',
+                color: '#666666',
+                whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word',
+                width: '100%',
+                textAlign: 'center'
+              }}
+            >
+              Click the microphone to start
+            </div>
+          )}
+        </AutoScrollContainer>
+      </div>
+    )
+  }
+
+  private toggleRecording(shape: CCLiveTranscriptionShape) {
+    console.log('🎤 Toggle recording clicked');
+    const { id } = shape;
+    const { isRecording } = shape.props;
+
+    console.log('Current state:', { id, isRecording });
+
+    // When starting new recording, preserve existing props but reset segments
+    const newProps = !isRecording ? {
+      ...shape.props,
+      isRecording: true,
+      segments: [],
+      currentSegment: undefined,
+      lastProcessedSegment: undefined,
+    } : {
+      ...shape.props,
+      isRecording: false,
+    };
+
+    this.editor.updateShape<CCLiveTranscriptionShape>({
+      id,
+      type: 'cc-live-transcription',
+      props: newProps,
+    });
+
+    const manager = TranscriptionManager.getManager(this.editor);
+    console.log('Got transcription manager');
+
+    if (!isRecording) {
+      console.log('Starting transcription...');
+      manager.startTranscription(id);
+    } else {
+      console.log('Stopping transcription...');
+      manager.stopTranscription();
+    }
+  }
+
+  updateText(
+    id: TLShapeId, 
+    text: string, 
+    isConfirmed: boolean,
+    metadata?: { start: string | number, end: string | number }
+  ) {
+    console.log('📝 Updating text:', { id, text, isConfirmed, metadata });
+    const shape = this.editor.getShape<CCLiveTranscriptionShape>(id);
+    if (!shape) {
+      console.warn('❌ Shape not found for updating text:', id);
+      return;
+    }
+
+    // Format timestamps consistently
+    const start = typeof metadata?.start === 'number' ? metadata.start.toFixed(3) : metadata?.start;
+    const end = typeof metadata?.end === 'number' ? metadata.end.toFixed(3) : metadata?.end;
+
+    const segmentId = isConfirmed ? crypto.randomUUID() : 'current';
+    const newSegment: TranscriptionSegment = {
+      id: segmentId,
+      text,
+      completed: isConfirmed,
+      start: start || '0.000',
+      end: end || '0.000'
+    };
+
+    // Handle current (incomplete) segment
+    if (!isConfirmed) {
+      // Only update if text has changed
+      if (shape.props.currentSegment?.text !== text) {
+        this.editor.updateShape<CCLiveTranscriptionShape>({
+          id,
+          type: 'cc-live-transcription',
+          props: { 
+            ...shape.props,
+            currentSegment: newSegment
+          },
+        });
+      }
+      return;
+    }
+
+    // Handle completed segment
+    let segments = [...shape.props.segments];
+    
+    // Check if this segment is different from the last processed one
+    // and not already in our segments list
+    const isDuplicate = segments.some(s => s.text === text);
+    if (shape.props.lastProcessedSegment !== text && !isDuplicate) {
+      // Add new completed segment
+      segments.push(newSegment);
+
+      this.editor.updateShape<CCLiveTranscriptionShape>({
+        id,
+        type: 'cc-live-transcription',
+        props: { 
+          ...shape.props,
+          segments,
+          lastProcessedSegment: text,
+          // Clear current segment if it matches the completed one
+          currentSegment: shape.props.currentSegment?.text === text ? undefined : shape.props.currentSegment
+        },
+      });
+    }
+
+    console.log('✅ Text updated');
+  }
+}
+
+// Auto-scrolling container component
+function AutoScrollContainer({ children, height }: { children: React.ReactNode, height: number }) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [children]);
+
+  return (
+    <div 
+      ref={containerRef}
+      style={{
+        height,
+        padding: '16px',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        gap: '8px',
+        overflow: 'auto',
+        scrollBehavior: 'smooth'
+      }}
+    >
+      {children}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-transcription/Transcription.stories.tsx b/src/utils/tldraw/cc-base/cc-transcription/Transcription.stories.tsx
new file mode 100644
index 0000000..a8fac7c
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-transcription/Transcription.stories.tsx
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CCLiveTranscriptionShapeUtil } from './CCLiveTranscriptionShapeUtil';
+import { TranscriptionService } from './transcriptionService';
+import { getDefaultCCLiveTranscriptionProps } from '../cc-props';
+import { CCLiveTranscriptionShape } from './CCLiveTranscriptionShapeUtil';
+import { TLShapeId, IndexKey, TLParentId } from '@tldraw/tldraw';
+import { Editor } from '@tldraw/editor';
+
+const meta: Meta = {
+  title: 'Components/Transcription',
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock editor
+const mockEditor = {
+  updateShape: () => {},
+} as unknown as Editor;
+
+// Mock shape data
+const mockShape: CCLiveTranscriptionShape = {
+  id: 'shape:1' as TLShapeId,
+  type: 'cc-live-transcription',
+  x: 0,
+  y: 0,
+  rotation: 0,
+  index: 'a1' as IndexKey,
+  parentId: 'page:page' as TLParentId,
+  isLocked: false,
+  opacity: 1,
+  meta: {},
+  typeName: 'shape',
+  props: getDefaultCCLiveTranscriptionProps(),
+};
+
+// Basic story showing the transcription component
+export const Default: Story = {
+  args: {},
+  render: () => {
+    const shapeUtil = new CCLiveTranscriptionShapeUtil(mockEditor);
+    return (
+      <div style={{ width: '800px', height: '600px', border: '1px solid #ccc' }}>
+        {shapeUtil.renderShapeContent(mockShape)}
+      </div>
+    );
+  },
+};
+
+// Story showing the transcription service in action
+export const WithService: Story = {
+  args: {},
+  render: () => {
+    const service = new TranscriptionService('default');
+    const shapeUtil = new CCLiveTranscriptionShapeUtil(mockEditor);
+    
+    return (
+      <div style={{ width: '800px', height: '600px', border: '1px solid #ccc' }}>
+        <div style={{ padding: '20px' }}>
+          <h3>Transcription Service Demo</h3>
+          <button 
+            onClick={() => service.startTranscription()}
+            style={{ marginRight: '10px', padding: '10px' }}
+          >
+            Start Transcription
+          </button>
+          <button 
+            onClick={() => service.stopTranscription()}
+            style={{ padding: '10px' }}
+          >
+            Stop Transcription
+          </button>
+        </div>
+        <div style={{ marginTop: '20px' }}>
+          {shapeUtil.renderShapeContent(mockShape)}
+        </div>
+      </div>
+    );
+  },
+}; 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-transcription/TranscriptionManager.ts b/src/utils/tldraw/cc-base/cc-transcription/TranscriptionManager.ts
new file mode 100644
index 0000000..4753097
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-transcription/TranscriptionManager.ts
@@ -0,0 +1,73 @@
+import { Editor, TLShapeId } from '@tldraw/tldraw';
+import { TranscriptionService } from './transcriptionService';
+import { CCLiveTranscriptionShapeUtil } from './CCLiveTranscriptionShapeUtil';
+
+export class TranscriptionManager {
+  private static instances = new WeakMap<Editor, TranscriptionManager>();
+  private transcriptionService?: TranscriptionService;
+  private currentShapeId?: TLShapeId;
+  private sameOutputCount = 0;
+  private lastText = '';
+  private readonly SAME_OUTPUT_THRESHOLD = 10;
+
+  constructor(private editor: Editor) {}
+
+  static getManager(editor: Editor): TranscriptionManager {
+    let manager = TranscriptionManager.instances.get(editor);
+    if (!manager) {
+      manager = new TranscriptionManager(editor);
+      TranscriptionManager.instances.set(editor, manager);
+    }
+    return manager;
+  }
+
+  startTranscription(shapeId: TLShapeId) {
+    console.log('Starting transcription...');
+    this.currentShapeId = shapeId;
+    this.transcriptionService = new TranscriptionService();
+
+    // Set up callback for transcription updates
+    this.transcriptionService.setTranscriptionCallback((text: string, isFinal: boolean, metadata: { start: number, end: number }) => {
+      console.log('📝 Transcription update received:', { text, metadata });
+      const util = this.editor.getShapeUtil<CCLiveTranscriptionShapeUtil>('cc-live-transcription');
+      if (!util) {
+        console.warn('❌ Shape util not found');
+        return;
+      }
+      console.log('Found transcription util:', !!util);
+
+      // Check if text is stable (same output multiple times)
+      const isStable = text === this.lastText;
+      if (isStable) {
+        this.sameOutputCount++;
+      } else {
+        this.sameOutputCount = 0;
+        this.lastText = text;
+      }
+
+      // Mark as completed if we've seen the same output multiple times or if marked as final
+      const isCompleted = isFinal || this.sameOutputCount >= this.SAME_OUTPUT_THRESHOLD;
+
+      util.updateText(
+        this.currentShapeId!,
+        text,
+        isCompleted,
+        metadata
+      );
+    });
+
+    // Start the transcription service
+    this.transcriptionService.startTranscription();
+  }
+
+  stopTranscription() {
+    console.log('Stopping transcription...');
+    if (this.transcriptionService) {
+      this.transcriptionService.stopTranscription();
+      this.transcriptionService = undefined;
+    }
+    this.currentShapeId = undefined;
+    this.sameOutputCount = 0;
+    this.lastText = '';
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-transcription/transcriptionService.tsx b/src/utils/tldraw/cc-base/cc-transcription/transcriptionService.tsx
new file mode 100644
index 0000000..31a0403
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-transcription/transcriptionService.tsx
@@ -0,0 +1,227 @@
+import logger from '../../../../debugConfig';
+
+export interface TranscriptionConfig {
+  language?: string;
+  task?: string;
+  modelSize?: string;
+  useVad?: boolean;
+}
+
+export class TranscriptionService {
+  private socket: WebSocket | null = null;
+  private stream: MediaStream | null = null;
+  private audioContext: AudioContext | null = null;
+  private mediaStreamSource: MediaStreamAudioSourceNode | null = null;
+  private workletNode: AudioWorkletNode | null = null;
+  private selectedDeviceId: string = '';
+  private onTranscriptionUpdate: ((text: string, isFinal: boolean, metadata: { start: number, end: number }) => void) | null = null;
+
+  constructor(deviceId: string = '') {
+    this.selectedDeviceId = deviceId;
+  }
+
+  setTranscriptionCallback(callback: (text: string, isFinal: boolean, metadata: { start: number, end: number }) => void) {
+    this.onTranscriptionUpdate = callback;
+  }
+
+  async startTranscription(config: TranscriptionConfig = {}) {
+    console.log('🎙️ Starting transcription service...');
+    
+    try {
+      // Get default audio device if none selected
+      if (!this.selectedDeviceId) {
+        console.log('No device selected, getting default device...');
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const audioDevice = devices.find(device => device.kind === 'audioinput');
+        if (audioDevice) {
+          this.selectedDeviceId = audioDevice.deviceId;
+          console.log('Found default audio device:', audioDevice.label);
+        }
+      }
+
+      if (!this.selectedDeviceId) {
+        logger.error('transcription-service', '⚠️ No audio device available');
+        return;
+      }
+
+      logger.info('transcription-service', '🔊 Accessing user media...');
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        audio: { deviceId: this.selectedDeviceId },
+      });
+      console.log('Got audio stream');
+
+      const uuid = crypto.randomUUID();
+      const wsUrl = import.meta.env.VITE_WHISPERLIVE_URL;
+      console.log('Connecting to WebSocket:', wsUrl);
+
+      const ws = new WebSocket(wsUrl);
+      this.socket = ws;
+
+      const connectionTimeout = setTimeout(() => {
+        if (ws.readyState !== WebSocket.OPEN) {
+          logger.error('transcription-service', '⏰ WebSocket connection timed out');
+          ws.close();
+        }
+      }, 20000);
+
+      ws.onopen = () => {
+        clearTimeout(connectionTimeout);
+        logger.info('transcription-service', '✅ WebSocket connected');
+        
+        // Send initial configuration message
+        const message = JSON.stringify({
+          uid: uuid,
+          language: config.language || 'en',
+          task: config.task || 'transcribe',
+          model: config.modelSize || 'small',
+          use_vad: config.useVad ?? true,
+        });
+        
+        ws.send(message);
+        this.setupAudioProcessing();
+      };
+
+      ws.onerror = (error) => {
+        logger.error('transcription-service', '❌ WebSocket error:', error);
+      };
+
+      ws.onclose = () => {
+        logger.info('transcription-service', '🔌 WebSocket closed');
+        this.cleanup();
+      };
+
+      ws.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        if (data.uid !== uuid) {
+          return;
+        }
+
+        if (data.status === 'WAIT') {
+          logger.info('transcription-service', `⏳ Wait time: ${Math.round(data.message)} minutes`);
+          this.cleanup();
+          return;
+        }
+
+        if (data.message === 'DISCONNECT') {
+          logger.info('transcription-service', '🔕 Server requested disconnection');
+          this.cleanup();
+          return;
+        }
+
+        if (this.onTranscriptionUpdate && data.segments) {
+          // Get the last segment which is the current one being updated
+          const lastSegment = data.segments[data.segments.length - 1];
+          
+          // Process completed segments
+          let lastCompletedText = '';
+          for (let i = 0; i < data.segments.length - 1; i++) {
+            const segment = data.segments[i];
+            // Only send update if this segment is different from the last one
+            if (segment.text.trim() !== lastCompletedText.trim()) {
+              this.onTranscriptionUpdate(
+                segment.text,
+                segment.completed ?? true, // Server marks completed segments
+                {
+                  start: parseFloat(segment.start),
+                  end: parseFloat(segment.end)
+                }
+              );
+              lastCompletedText = segment.text;
+            }
+          }
+
+          // Update the current (incomplete) segment only if it's different from the last completed one
+          if (lastSegment && lastSegment.text.trim() !== lastCompletedText.trim()) {
+            this.onTranscriptionUpdate(
+              lastSegment.text,
+              lastSegment.completed ?? false, // Last segment is typically incomplete unless marked otherwise
+              {
+                start: parseFloat(lastSegment.start),
+                end: parseFloat(lastSegment.end)
+              }
+            );
+          }
+        }
+      };
+    } catch (error) {
+      logger.error('transcription-service', '❌ Error starting transcription:', error);
+      this.cleanup();
+    }
+  }
+
+  private async setupAudioProcessing() {
+    if (!this.stream || !this.socket) {
+      return;
+    }
+
+    try {
+      this.audioContext = new AudioContext();
+      
+      // Load and register the audio worklet
+      await this.audioContext.audioWorklet.addModule('/audioWorklet.js');
+      
+      this.mediaStreamSource = this.audioContext.createMediaStreamSource(this.stream);
+      this.workletNode = new AudioWorkletNode(this.audioContext, 'audio-processor');
+
+      // Handle audio data from the worklet
+      this.workletNode.port.onmessage = (event) => {
+        if (this.socket?.readyState === WebSocket.OPEN) {
+          const resampledData = this.resampleTo16kHZ(event.data, this.audioContext!.sampleRate);
+          this.socket.send(resampledData);
+        }
+      };
+
+      this.mediaStreamSource.connect(this.workletNode);
+      this.workletNode.connect(this.audioContext.destination);
+    } catch (error) {
+      console.error('Error setting up audio processing:', error);
+    }
+  }
+
+  private resampleTo16kHZ(audioData: Float32Array, origSampleRate: number): Float32Array {
+    const ratio = origSampleRate / 16000;
+    const newLength = Math.round(audioData.length / ratio);
+    const result = new Float32Array(newLength);
+    
+    for (let i = 0; i < newLength; i++) {
+      const pos = i * ratio;
+      const leftPos = Math.floor(pos);
+      const rightPos = Math.ceil(pos);
+      const weight = pos - leftPos;
+      result[i] = audioData[leftPos] * (1 - weight) + (audioData[rightPos] || 0) * weight;
+    }
+    
+    return result;
+  }
+
+  stopTranscription() {
+    this.cleanup();
+  }
+
+  private cleanup() {
+    if (this.workletNode) {
+      this.workletNode.disconnect();
+      this.workletNode = null;
+    }
+
+    if (this.mediaStreamSource) {
+      this.mediaStreamSource.disconnect();
+      this.mediaStreamSource = null;
+    }
+
+    if (this.audioContext) {
+      this.audioContext.close();
+      this.audioContext = null;
+    }
+
+    if (this.stream) {
+      this.stream.getTracks().forEach(track => track.stop());
+      this.stream = null;
+    }
+
+    if (this.socket) {
+      this.socket.close();
+      this.socket = null;
+    }
+  }
+}
diff --git a/src/utils/tldraw/cc-base/cc-types.ts b/src/utils/tldraw/cc-base/cc-types.ts
new file mode 100644
index 0000000..80c28bd
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-types.ts
@@ -0,0 +1,4 @@
+import { TLBaseShape } from '@tldraw/tldraw'
+import { CCBaseProps } from './cc-props'
+
+export interface CCBaseShape extends TLBaseShape<string, CCBaseProps> {}
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-web-browser/CCWebBrowserUtil.tsx b/src/utils/tldraw/cc-base/cc-web-browser/CCWebBrowserUtil.tsx
new file mode 100644
index 0000000..4acceba
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-web-browser/CCWebBrowserUtil.tsx
@@ -0,0 +1,98 @@
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { ccShapeProps, getDefaultCCWebBrowserProps } from '../cc-props'
+import { ccShapeMigrations } from '../cc-migrations'
+import { Rectangle2d } from 'tldraw'
+import { WebBrowserComponent } from './WebBrowserComponent'
+import { customEmbeds } from '../../embeds'
+
+export interface CCWebBrowserShape extends CCBaseShape {
+  type: 'cc-web-browser'
+  props: CCBaseShape['props'] & {
+    url: string
+    history: string[]
+    currentHistoryIndex: number
+    isLoading: boolean
+  }
+}
+
+export class CCWebBrowserShapeUtil extends CCBaseShapeUtil<CCWebBrowserShape> {
+  static override type = 'cc-web-browser' as const;
+  static override props = ccShapeProps.webBrowser;
+  static override migrations = ccShapeMigrations.webBrowser;
+
+  override getDefaultProps(): CCWebBrowserShape['props'] {
+    return getDefaultCCWebBrowserProps() as CCWebBrowserShape['props'];
+  }
+
+  override isAspectRatioLocked = () => false
+  override canResize = () => true
+  override canBind = () => false
+  override hideResizeHandles = () => false
+  override hideRotateHandle = () => false
+  override canEdit = () => false
+
+  override renderContent = (shape: CCWebBrowserShape) => {
+    return (
+      <div style={{ width: '100%', height: '100%', pointerEvents: 'all' }}>
+        <WebBrowserComponent shape={shape} />
+      </div>
+    )
+  }
+
+  override getGeometry(shape: CCWebBrowserShape) {
+    return new Rectangle2d({
+      width: shape.props.w,
+      height: shape.props.h,
+      isFilled: true,
+    })
+  }
+
+  override onResize = (
+    shape: CCWebBrowserShape,
+    info: { initialShape: CCWebBrowserShape; scaleX: number; scaleY: number }
+  ) => {
+    const { initialShape, scaleX, scaleY } = info
+    const newW = Math.max(400, Math.round(initialShape.props.w * scaleX))
+    const newH = Math.max(300, Math.round(initialShape.props.h * scaleY))
+
+    return {
+      props: {
+        ...shape.props,
+        w: newW,
+        h: newH,
+      },
+    }
+  }
+
+  shouldRender = (prev: CCWebBrowserShape, next: CCWebBrowserShape) => {
+    return (
+      prev.props.w !== next.props.w ||
+      prev.props.h !== next.props.h ||
+      prev.props.url !== next.props.url ||
+      prev.props.isLoading !== next.props.isLoading ||
+      prev.props.currentHistoryIndex !== next.props.currentHistoryIndex ||
+      prev.props.history.length !== next.props.history.length
+    )
+  }
+
+  static isEmbeddableUrl(url: string): { isEmbeddable: boolean; embedType?: string } {
+    try {
+      const urlObj = new URL(url);
+      
+      // Check against our custom embeds
+      for (const embed of customEmbeds) {
+        if (embed.hostnames.some(hostname => 
+          urlObj.hostname === hostname || 
+          urlObj.hostname.endsWith(`.${hostname}`)
+        )) {
+          return { isEmbeddable: true, embedType: embed.type };
+        }
+      }
+      
+      return { isEmbeddable: false };
+    } catch (e) {
+      return { isEmbeddable: false };
+    }
+  }
+}
diff --git a/src/utils/tldraw/cc-base/cc-web-browser/WebBrowserComponent.tsx b/src/utils/tldraw/cc-base/cc-web-browser/WebBrowserComponent.tsx
new file mode 100644
index 0000000..1c8eff6
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-web-browser/WebBrowserComponent.tsx
@@ -0,0 +1,200 @@
+import React, { useState } from 'react'
+import { useEditor } from '@tldraw/tldraw'
+import { IconButton, TextField, CircularProgress } from '@mui/material'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
+import RefreshIcon from '@mui/icons-material/Refresh'
+import { CCWebBrowserShape } from './CCWebBrowserUtil'
+
+interface WebBrowserComponentProps {
+  shape: CCWebBrowserShape
+}
+
+export const WebBrowserComponent: React.FC<WebBrowserComponentProps> = ({ shape }) => {
+  const editor = useEditor()
+  const [urlInput, setUrlInput] = useState(shape.props.url)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleUrlSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    setError(null)
+    const newUrl = urlInput.startsWith('http') ? urlInput : `https://${urlInput}`
+    
+    editor.updateShape({
+      id: shape.id,
+      type: 'cc-web-browser',
+      props: {
+        ...shape.props,
+        url: newUrl,
+        history: [...shape.props.history.slice(0, shape.props.currentHistoryIndex + 1), newUrl],
+        currentHistoryIndex: shape.props.currentHistoryIndex + 1,
+        isLoading: true,
+      },
+    })
+  }
+
+  const handleBack = () => {
+    if (shape.props.currentHistoryIndex > 0) {
+      setError(null)
+      const newIndex = shape.props.currentHistoryIndex - 1
+      editor.updateShape({
+        id: shape.id,
+        type: 'cc-web-browser',
+        props: {
+          ...shape.props,
+          url: shape.props.history[newIndex],
+          currentHistoryIndex: newIndex,
+          isLoading: true,
+        },
+      })
+    }
+  }
+
+  const handleForward = () => {
+    if (shape.props.currentHistoryIndex < shape.props.history.length - 1) {
+      setError(null)
+      const newIndex = shape.props.currentHistoryIndex + 1
+      editor.updateShape({
+        id: shape.id,
+        type: 'cc-web-browser',
+        props: {
+          ...shape.props,
+          url: shape.props.history[newIndex],
+          currentHistoryIndex: newIndex,
+          isLoading: true,
+        },
+      })
+    }
+  }
+
+  const handleRefresh = () => {
+    setError(null)
+    editor.updateShape({
+      id: shape.id,
+      type: 'cc-web-browser',
+      props: {
+        ...shape.props,
+        isLoading: true,
+      },
+    })
+  }
+
+  const handleIframeLoad = () => {
+    editor.updateShape({
+      id: shape.id,
+      type: 'cc-web-browser',
+      props: {
+        ...shape.props,
+        isLoading: false,
+      },
+    })
+  }
+
+  const handleIframeError = () => {
+    setError('Failed to load the webpage. This might be due to security restrictions or the website not allowing embedding.')
+    editor.updateShape({
+      id: shape.id,
+      type: 'cc-web-browser',
+      props: {
+        ...shape.props,
+        isLoading: false,
+      },
+    })
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div style={{ 
+        display: 'flex', 
+        gap: '8px', 
+        padding: '8px',
+        alignItems: 'center',
+        backgroundColor: '#f5f5f5',
+        borderBottom: '1px solid #ddd'
+      }}>
+        <IconButton 
+          size="small"
+          onClick={handleBack}
+          disabled={shape.props.currentHistoryIndex <= 0}
+        >
+          <ArrowBackIcon />
+        </IconButton>
+        <IconButton 
+          size="small"
+          onClick={handleForward}
+          disabled={shape.props.currentHistoryIndex >= shape.props.history.length - 1}
+        >
+          <ArrowForwardIcon />
+        </IconButton>
+        <IconButton 
+          size="small"
+          onClick={handleRefresh}
+        >
+          <RefreshIcon />
+        </IconButton>
+        <form onSubmit={handleUrlSubmit} style={{ flex: 1 }}>
+          <TextField
+            fullWidth
+            size="small"
+            value={urlInput}
+            onChange={(e) => setUrlInput(e.target.value)}
+            placeholder="Enter URL or search..."
+            error={!!error}
+            helperText={error}
+          />
+        </form>
+      </div>
+      <div style={{ 
+        position: 'relative',
+        flex: 1,
+        backgroundColor: '#fff'
+      }}>
+        {shape.props.isLoading && (
+          <div style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.8)',
+            zIndex: 1
+          }}>
+            <CircularProgress />
+          </div>
+        )}
+        {shape.props.url && (
+          <iframe
+            src={shape.props.url}
+            style={{
+              width: '100%',
+              height: '100%',
+              border: 'none'
+            }}
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+            referrerPolicy="no-referrer"
+            loading="lazy"
+            onLoad={handleIframeLoad}
+            onError={handleIframeError}
+            title="Web Browser"
+          />
+        )}
+        {error && !shape.props.isLoading && (
+          <div style={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            textAlign: 'center',
+            color: '#d32f2f',
+            padding: '16px'
+          }}>
+            {error}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-youtube-embed/CCYoutubeEmbedShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-youtube-embed/CCYoutubeEmbedShapeUtil.tsx
new file mode 100644
index 0000000..1af35fa
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-youtube-embed/CCYoutubeEmbedShapeUtil.tsx
@@ -0,0 +1,247 @@
+import React, { useEffect, useRef, useState, memo } from 'react'
+import { CCBaseShapeUtil } from '../CCBaseShapeUtil'
+import { CCBaseShape } from '../cc-types'
+import { CC_YOUTUBE_EMBED_STYLE_CONSTANTS } from './cc-youtube-embed-styles'
+import { getYoutubeTranscript, extractVideoId } from './youtubeService'
+import { formatTime, Player, OnStateChangeEvent, PlayerState } from './cc-youtube-embed-helpers'
+import { ccShapeProps } from '../cc-props'
+import { getDefaultCCYoutubeEmbedProps } from '../cc-props'
+
+// Add YouTube types to the global Window interface
+declare global {
+  interface Window {
+    YT: {
+      Player: new (
+        elementId: string,
+        config: {
+          events?: {
+            onReady?: () => void
+            onStateChange?: (event: OnStateChangeEvent) => void
+          }
+        }
+      ) => Player
+      PlayerState: PlayerState
+    }
+    onYouTubeIframeAPIReady: () => void
+  }
+}
+
+interface TranscriptLine {
+  start: number
+  duration: number
+  text: string
+}
+
+export interface CCYoutubeEmbedShape extends CCBaseShape {
+  type: 'cc-youtube-embed'
+  props: {
+    title: string
+    w: number
+    h: number
+    headerColor: string
+    backgroundColor: string
+    isLocked: boolean
+    video_url: string
+    transcript: TranscriptLine[]
+    transcriptVisible: boolean
+  }
+}
+
+const YoutubeEmbed = memo(({ shape }: { shape: CCYoutubeEmbedShape }) => {
+  const [transcript, setTranscript] = useState<TranscriptLine[]>(shape.props.transcript)
+  const [currentTime, setCurrentTime] = useState<number>(0)
+  const [currentLineIndex, setCurrentLineIndex] = useState<number | null>(null)
+  const transcriptRef = useRef<HTMLDivElement | null>(null)
+  const hasFetchedTranscript = useRef<boolean>(false)
+  const playerRef = useRef<Player | null>(null)
+  const timeUpdateIntervalRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    const fetchTranscript = async () => {
+      if (hasFetchedTranscript.current) return
+      
+      try {
+        const transcriptData = await getYoutubeTranscript(shape.props.video_url)
+        hasFetchedTranscript.current = true
+        setTranscript(transcriptData)
+      } catch (error) {
+        console.error('Error fetching transcript:', error)
+      }
+    }
+
+    fetchTranscript()
+
+    return () => {
+      hasFetchedTranscript.current = false
+    }
+  }, [shape.props.video_url])
+
+  useEffect(() => {
+    const onYouTubeIframeAPIReady = () => {
+      if (playerRef.current) return
+      
+      playerRef.current = new window.YT.Player('youtube-player', {
+        events: {
+          'onReady': () => console.log('YouTube player is ready'),
+          'onStateChange': (event: OnStateChangeEvent) => {
+            if (event.data === window.YT.PlayerState.PLAYING) {
+              startTimeUpdates()
+            } else {
+              stopTimeUpdates()
+            }
+          }
+        }
+      })
+    }
+
+    const startTimeUpdates = () => {
+      timeUpdateIntervalRef.current = setInterval(() => {
+        if (playerRef.current?.getCurrentTime) {
+          const time = playerRef.current.getCurrentTime()
+          setCurrentTime(time)
+        }
+      }, 100)
+    }
+
+    const stopTimeUpdates = () => {
+      if (timeUpdateIntervalRef.current) {
+        clearInterval(timeUpdateIntervalRef.current)
+        timeUpdateIntervalRef.current = null
+      }
+    }
+
+    // Load YouTube iframe API
+    if (!document.querySelector('script[src="https://www.youtube.com/iframe_api"]')) {
+      const tag = document.createElement('script')
+      tag.src = "https://www.youtube.com/iframe_api"
+      const firstScriptTag = document.getElementsByTagName('script')[0]
+      firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag)
+    }
+
+    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady
+
+    return () => {
+      stopTimeUpdates()
+      if (playerRef.current?.destroy) {
+        playerRef.current.destroy()
+      }
+      playerRef.current = null
+    }
+  }, [shape.props.video_url])
+
+  useEffect(() => {
+    const newCurrentLineIndex = transcript.findIndex(
+      (line) => {
+        const lineEndTime = line.start + line.duration;
+        return currentTime >= line.start && currentTime <= lineEndTime;
+      }
+    )
+    
+    if (newCurrentLineIndex !== -1 && newCurrentLineIndex !== currentLineIndex) {
+      setCurrentLineIndex(newCurrentLineIndex)
+      
+      // Scroll the active line into view
+      if (transcriptRef.current) {
+        const transcriptContainer = transcriptRef.current
+        const lineElement = transcriptContainer.children[newCurrentLineIndex] as HTMLElement
+        if (lineElement) {
+          lineElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }
+      }
+    }
+  }, [currentTime, transcript, currentLineIndex])
+
+  return (
+    <div style={{ display: 'flex', width: '100%', height: '100%' }}>
+      <div style={CC_YOUTUBE_EMBED_STYLE_CONSTANTS.VIDEO.container}>
+        <iframe 
+          id="youtube-player"
+          style={{
+            ...CC_YOUTUBE_EMBED_STYLE_CONSTANTS.VIDEO.iframe,
+            pointerEvents: 'all'
+          }}
+          src={`https://www.youtube.com/embed/${extractVideoId(shape.props.video_url)}?enablejsapi=1`}
+          allowFullScreen
+        />
+      </div>
+      {shape.props.transcriptVisible && (
+        <div 
+          ref={transcriptRef}
+          style={{
+            ...CC_YOUTUBE_EMBED_STYLE_CONSTANTS.TRANSCRIPT.container,
+            pointerEvents: 'all'
+          }}
+        >
+          <h3 style={CC_YOUTUBE_EMBED_STYLE_CONSTANTS.TRANSCRIPT.title}>Transcript</h3>
+          {transcript.length > 0 ? (
+            transcript.map((line, index) => (
+              <div 
+                key={index} 
+                style={{
+                  ...CC_YOUTUBE_EMBED_STYLE_CONSTANTS.TRANSCRIPT.line,
+                  ...(index === currentLineIndex ? CC_YOUTUBE_EMBED_STYLE_CONSTANTS.TRANSCRIPT.activeLine : {})
+                }}
+              >
+                <span style={CC_YOUTUBE_EMBED_STYLE_CONSTANTS.TRANSCRIPT.timestamp}>
+                  {formatTime(line.start)}:
+                </span> 
+                {line.text}
+              </div>
+            ))
+          ) : (
+            <p style={CC_YOUTUBE_EMBED_STYLE_CONSTANTS.TRANSCRIPT.loading}>Loading transcript...</p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+})
+
+export class CCYoutubeEmbedShapeUtil extends CCBaseShapeUtil<CCYoutubeEmbedShape> {
+  static override type = 'cc-youtube-embed'
+  static override props = ccShapeProps['cc-youtube-embed']
+
+  override getDefaultProps(): CCYoutubeEmbedShape['props'] {
+    return getDefaultCCYoutubeEmbedProps()
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  override isAspectRatioLocked(shape: CCYoutubeEmbedShape) {
+    return true
+  }
+
+  override getToolbarItems(shape: CCYoutubeEmbedShape) {
+    return [
+      {
+        id: 'toggle-transcript',
+        icon: shape.props.transcriptVisible ? '📖' : '📕',
+        label: shape.props.transcriptVisible ? 'Hide Transcript' : 'Show Transcript',
+        onClick: (e: React.MouseEvent, baseShape: CCBaseShape) => {
+          console.log('Toggle transcript clicked')
+          e.preventDefault()
+          e.stopPropagation()
+          
+          const youtubeShape = baseShape as CCYoutubeEmbedShape
+          console.log('Current visibility:', youtubeShape.props.transcriptVisible)
+          
+          const newProps = {
+            ...youtubeShape.props,
+            transcriptVisible: !youtubeShape.props.transcriptVisible
+          }
+          
+          console.log('New visibility:', newProps.transcriptVisible)
+          this.editor.updateShape({
+            id: youtubeShape.id,
+            type: 'cc-youtube-embed',
+            props: newProps
+          })
+        },
+        isActive: shape.props.transcriptVisible,
+      }
+    ]
+  }
+
+  override renderContent = (shape: CCYoutubeEmbedShape) => {
+    return <YoutubeEmbed shape={shape} />
+  }
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-helpers.ts b/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-helpers.ts
new file mode 100644
index 0000000..879e24c
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-helpers.ts
@@ -0,0 +1,20 @@
+export interface Player {
+  getCurrentTime(): number;
+  destroy(): void;
+}
+
+export interface OnStateChangeEvent {
+  data: number;
+}
+
+export interface PlayerState {
+  PLAYING: number;
+  PAUSED: number;
+  ENDED: number;
+}
+
+export function formatTime(seconds: number): string {
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = Math.floor(seconds % 60)
+  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-styles.ts b/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-styles.ts
new file mode 100644
index 0000000..e9d27ae
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-youtube-embed/cc-youtube-embed-styles.ts
@@ -0,0 +1,78 @@
+export const CC_YOUTUBE_EMBED_STYLE_CONSTANTS = {
+  VIDEO: {
+    container: {
+      flex: 2,
+      padding: '10px',
+      minWidth: '300px',
+    },
+    iframe: {
+      width: '100%',
+      height: '100%',
+      border: 'none',
+    },
+  },
+  TRANSCRIPT: {
+    container: {
+      flex: 1,
+      padding: '10px',
+      overflowY: 'auto',
+      maxHeight: '100%',
+      minWidth: '200px',
+      backgroundColor: '#f5f5f5',
+      borderLeft: '1px solid #ddd',
+    },
+    title: {
+      margin: '0 0 10px 0',
+      fontSize: '16px',
+      fontWeight: 'bold',
+      color: '#333',
+    },
+    line: {
+      padding: '5px',
+      marginBottom: '5px',
+      borderRadius: '4px',
+      fontSize: '14px',
+      color: '#333',
+      backgroundColor: '#fff',
+      border: '1px solid #eee',
+    },
+    activeLine: {
+      backgroundColor: '#e3f2fd',
+      border: '1px solid #2196f3',
+      color: '#1565c0',
+      fontWeight: 'bold',
+      boxShadow: '0 1px 3px rgba(0,0,0,0.12)',
+      transform: 'scale(1.02)',
+      transition: 'all 0.2s ease-in-out',
+    },
+    timestamp: {
+      color: '#666',
+      marginRight: '8px',
+      fontWeight: 'bold',
+    },
+    loading: {
+      color: '#666',
+      fontStyle: 'italic',
+    },
+  },
+  TOOLS: {
+    container: {
+      padding: '10px',
+      display: 'flex',
+      flexDirection: 'column' as const,
+      gap: '10px',
+    },
+    button: {
+      padding: '8px 12px',
+      backgroundColor: '#f0f0f0',
+      border: '1px solid #ddd',
+      borderRadius: '4px',
+      cursor: 'pointer',
+      color: '#333',
+      fontSize: '14px',
+      '&:hover': {
+        backgroundColor: '#e0e0e0',
+      },
+    },
+  },
+} as const 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/cc-youtube-embed/youtubeService.ts b/src/utils/tldraw/cc-base/cc-youtube-embed/youtubeService.ts
new file mode 100644
index 0000000..09572c8
--- /dev/null
+++ b/src/utils/tldraw/cc-base/cc-youtube-embed/youtubeService.ts
@@ -0,0 +1,29 @@
+import axios from './../../../../axiosConfig';
+
+export interface TranscriptLine {
+  start: number
+  duration: number
+  text: string
+}
+
+export async function getYoutubeTranscript(videoUrl: string): Promise<TranscriptLine[]> {
+  try {
+    const videoId = extractVideoId(videoUrl)
+    if (!videoId) {
+      throw new Error('Invalid YouTube URL')
+    }
+
+    const response = await axios.get(`/external/youtube-proxy?videoId=${videoId}`)
+    console.log('Got Youtube video data:', response.data)
+    return response.data.transcript
+  } catch (error) {
+    console.error('Error fetching YouTube video data:', error)
+    throw error
+  }
+}
+
+export function extractVideoId(url: string): string | null {
+  const regex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/
+  const match = url.match(regex)
+  return match ? match[1] : null
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/shape-helpers/calendar-helpers.ts b/src/utils/tldraw/cc-base/shape-helpers/calendar-helpers.ts
new file mode 100644
index 0000000..27e2be3
--- /dev/null
+++ b/src/utils/tldraw/cc-base/shape-helpers/calendar-helpers.ts
@@ -0,0 +1,41 @@
+import { Editor, TLShapeId, createShapeId } from '@tldraw/tldraw'
+import { CC_SHAPE_CONFIGS } from '../cc-configs'
+
+export const createCalendarShape = (
+  editor: Editor,
+  baseProps: {
+    id: TLShapeId
+    x: number
+    y: number
+    rotation: number
+    isLocked: boolean
+  }
+) => {
+  const config = CC_SHAPE_CONFIGS['cc-calendar']
+  
+  editor.createShape({
+    ...baseProps,
+    type: 'cc-calendar',
+    props: {
+      ...config.defaultProps,
+      w: config.width,
+      h: config.height,
+    },
+  })
+}
+
+export const createCalendarShapeAtCenter = (editor: Editor) => {
+  if (!editor) return;
+
+  const { x, y } = editor.getViewportScreenCenter();
+  const config = CC_SHAPE_CONFIGS['cc-calendar'];
+  const shapeId = createShapeId();
+
+  createCalendarShape(editor, {
+    id: shapeId,
+    x: x - config.xOffset,
+    y: y - config.yOffset,
+    rotation: 0,
+    isLocked: false,
+  });
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/shape-helpers/graph-helpers.ts b/src/utils/tldraw/cc-base/shape-helpers/graph-helpers.ts
new file mode 100644
index 0000000..139ff62
--- /dev/null
+++ b/src/utils/tldraw/cc-base/shape-helpers/graph-helpers.ts
@@ -0,0 +1,81 @@
+import { Editor, createShapeId, TLShapeId, IndexKey } from '@tldraw/tldraw'
+import { ccGraphShapeProps, getDefaultCCUserNodeProps } from '../cc-graph/cc-graph-props'
+import { NODE_THEMES, NODE_TYPE_THEMES } from '../cc-graph/cc-graph-styles'
+import { GraphShapeType, CCUserNodeProps } from '../cc-graph/cc-graph-types'
+import { logger } from '../../../../debugConfig'
+
+// Create a graph shape on the canvas
+export const createGraphShape = (
+  editor: Editor,
+  shapeType: GraphShapeType,
+  point = { x: 0, y: 0 }
+) => {
+  if (!ccGraphShapeProps || !ccGraphShapeProps[shapeType]) {
+    console.warn(`Invalid shape type: ${shapeType}`);
+    return;
+  }
+
+  editor.createShape({
+    id: createShapeId(),
+    type: shapeType,
+    x: point.x,
+    y: point.y,
+  });
+}
+
+export const createUserNodeFromProfile = (
+  editor: Editor,
+  userNode: CCUserNodeProps,
+  x: number = 0,
+  y: number = 0
+): TLShapeId | null => {
+  try {
+    if (!userNode) {
+      logger.error('graph-shape-user', '❌ Cannot create user node - no user data')
+      return null
+    }
+
+    const id = createShapeId()
+    const theme = NODE_THEMES[NODE_TYPE_THEMES['cc-user-node']]
+    editor.createShape({
+      id,
+      type: 'cc-user-node' as const,
+      x,
+      y,
+      rotation: 0,
+      index: 'a1' as IndexKey,
+      isLocked: false,
+      opacity: 1,
+      props: {
+        ...getDefaultCCUserNodeProps(),
+        headerColor: theme.headerColor,
+        title: userNode.user_email,
+        unique_id: userNode.unique_id,
+        user_name: userNode.user_name,
+        user_email: userNode.user_email,
+        user_type: userNode.user_type,
+        user_id: userNode.user_id,
+        path: userNode.tldraw_snapshot,
+        worker_node_data: userNode.worker_node_data,
+        state: {
+          parentId: null,
+          isPageChild: true,
+          hasChildren: null,
+          bindings: null
+        },
+        defaultComponent: true
+      }
+    })
+    
+    logger.debug('graph-shape-user', '🔄 Creating user node', {
+      userId: userNode.user_id,
+      email: userNode.user_email,
+      type: userNode.user_type
+    })
+
+    return id
+  } catch (error) {
+    logger.error('graph-shape-user', '❌ Failed to create user node', error)
+    return null
+  }
+}
diff --git a/src/utils/tldraw/cc-base/shape-helpers/search-helpers.ts b/src/utils/tldraw/cc-base/shape-helpers/search-helpers.ts
new file mode 100644
index 0000000..7d5f286
--- /dev/null
+++ b/src/utils/tldraw/cc-base/shape-helpers/search-helpers.ts
@@ -0,0 +1,35 @@
+import { Editor } from '@tldraw/tldraw'
+import { CCSearchShape } from '../cc-search/CCSearchShapeUtil'
+import { SearchService } from '../../../../services/tldraw/searchService'
+
+export const createSearchShape = async (
+  editor: Editor,
+  options?: {
+    x?: number
+    y?: number
+    query?: string
+  }
+) => {
+  const { width, height } = editor.getViewportPageBounds()
+  const x = options?.x ?? width / 2 - 200
+  const y = options?.y ?? height / 2 - 250
+
+  const results = options?.query ? await SearchService.search(options.query).catch(() => []) : []
+
+  return editor.createShape<CCSearchShape>({
+    type: 'cc-search',
+    x,
+    y,
+    props: {
+      w: 400,
+      h: 500,
+      title: 'Search',
+      headerColor: '#1a73e8',
+      backgroundColor: '#ffffff',
+      isLocked: false,
+      query: options?.query ?? '',
+      results,
+      isSearching: false,
+    },
+  })
+}
diff --git a/src/utils/tldraw/cc-base/shape-helpers/settings-helpers.ts b/src/utils/tldraw/cc-base/shape-helpers/settings-helpers.ts
new file mode 100644
index 0000000..6f94cf7
--- /dev/null
+++ b/src/utils/tldraw/cc-base/shape-helpers/settings-helpers.ts
@@ -0,0 +1,41 @@
+import { Editor, TLShapeId, createShapeId } from '@tldraw/tldraw'
+import { CC_SHAPE_CONFIGS } from '../cc-configs'
+
+const type = 'cc-settings'
+const config = CC_SHAPE_CONFIGS[type]
+
+export const createSettingsShape = (
+  editor: Editor,
+  baseProps: {
+    id: TLShapeId
+    x: number
+    y: number
+    rotation: number
+    isLocked: boolean
+  }
+) => {
+  editor.createShape({
+    ...baseProps,
+    type,
+    props: {
+      ...config.defaultProps,
+      w: config.width,
+      h: config.height,
+    },
+  })
+}
+
+export const createSettingsShapeAtCenter = (editor: Editor) => {
+  if (!editor) return;
+
+  const { x, y } = editor.getViewportScreenCenter();
+  const shapeId = createShapeId();
+
+  createSettingsShape(editor, {
+    id: shapeId,
+    x: x - config.xOffset,
+    y: y - config.yOffset,
+    rotation: 0,
+    isLocked: false,
+  });
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/shape-helpers/slideshow-helpers.ts b/src/utils/tldraw/cc-base/shape-helpers/slideshow-helpers.ts
new file mode 100644
index 0000000..77c2ee2
--- /dev/null
+++ b/src/utils/tldraw/cc-base/shape-helpers/slideshow-helpers.ts
@@ -0,0 +1,540 @@
+import { Editor, TLShapeId, createShapeId, createBindingId } from '@tldraw/tldraw'
+import { CC_SHAPE_CONFIGS } from '../cc-configs'
+import { CC_BASE_STYLE_CONSTANTS, CC_SLIDESHOW_STYLE_CONSTANTS } from '../cc-styles'
+import { CCSlideShowShape } from '../cc-slideshow/CCSlideShowShapeUtil'
+import { CCSlideShape } from '../cc-slideshow/CCSlideShapeUtil'
+import axios, { isAxiosError } from '../../../../axiosConfig'
+import { logger } from '../../../../debugConfig'
+
+export const createSlideshow = (
+  editor: Editor,
+  baseProps: {
+    id: TLShapeId
+    x: number
+    y: number
+    rotation: number
+    isLocked: boolean
+  },
+  slidePattern = 'horizontal',
+  numSlides = 3
+) => {
+  const config = CC_SHAPE_CONFIGS['cc-slideshow']
+  
+  // Create slideshow shape
+  editor.createShape<CCSlideShowShape>({
+    ...baseProps,
+    type: 'cc-slideshow',
+    props: {
+      ...config.defaultProps,
+      w: config.width,
+      h: config.height,
+      slidePattern,
+      currentSlideIndex: 0,
+    },
+  })
+
+  // Create slides
+  for (let i = 0; i < numSlides; i++) {
+    const slideId = createShapeId()
+    editor.createShape<CCSlideShape>({
+      id: slideId,
+      type: 'cc-slide',
+      x: baseProps.x + CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING,
+      y: baseProps.y + CC_BASE_STYLE_CONSTANTS.HEADER.height + CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING * 2,
+      rotation: 0,
+      isLocked: false,
+      props: {
+        ...CC_SHAPE_CONFIGS['cc-slide'].defaultProps,
+        w: CC_SHAPE_CONFIGS['cc-slide'].width,
+        h: CC_SHAPE_CONFIGS['cc-slide'].height,
+        title: `Slide ${i + 1}`,
+      },
+    })
+
+    // Create binding between slideshow and slide
+    editor.createBinding({
+      id: createBindingId(),
+      type: 'cc-slide-layout',
+      fromId: baseProps.id,
+      toId: slideId,
+      props: {
+        index: `a${i + 1}`,
+        isMovingWithParent: true,
+        placeholder: false,
+      },
+    })
+  }
+}
+
+export const createSlideshowAtCenter = (
+  editor: Editor,
+  slidePattern = 'horizontal',
+  numSlides = 3
+) => {
+  if (!editor) return;
+
+  const { x, y } = editor.getViewportScreenCenter();
+  const config = CC_SHAPE_CONFIGS['cc-slideshow'];
+  const shapeId = createShapeId();
+
+  editor.run(() => {
+    createSlideshow(editor, {
+      id: shapeId,
+      x: x - config.xOffset,
+      y: y - config.yOffset,
+      rotation: 0,
+      isLocked: false,
+    }, slidePattern, numSlides);
+  });
+}
+
+export const createPowerPointSlideshow = async (
+  editor: Editor,
+  file: File,
+  x: number,
+  y: number
+) => {
+  try {
+    // Create form data for file upload
+    const formData = new FormData()
+    formData.append('file', file, file.name)
+    
+    logger.debug('slideshow-helpers', 'Uploading PowerPoint file.', {
+      name: file.name,
+      size: file.size,
+    })
+
+    const response = await axios.post('/assets/powerpoint/convert', formData)
+
+    logger.debug('slideshow-helpers', 'Response received.', {
+      status: response.status,
+      data: response.data,
+    })
+
+    const { data } = response
+    
+    if (!data || typeof data !== 'object') {
+      throw new Error('Invalid response format from server')
+    }
+
+    if (data.status !== 'success') {
+      throw new Error(data.message || 'Failed to process PowerPoint')
+    }
+
+    if (!data.slides || !Array.isArray(data.slides) || data.slides.length === 0) {
+      throw new Error('No slides found in PowerPoint file')
+    }
+
+    // Create slideshow with the slides from PowerPoint
+    const slideshowId = createShapeId()
+    const baseProps = {
+      id: slideshowId,
+      x,
+      y,
+      rotation: 0,
+      isLocked: false,
+    }
+
+    // Create slideshow in a batch operation
+    editor.batch(() => {
+      const config = CC_SHAPE_CONFIGS['cc-slideshow']
+      
+      // Create slideshow shape
+      editor.createShape<CCSlideShowShape>({
+        ...baseProps,
+        type: 'cc-slideshow',
+        props: {
+          ...config.defaultProps,
+          w: config.width,
+          h: CC_SLIDESHOW_STYLE_CONSTANTS.DEFAULT_SLIDE_HEIGHT + 
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT +
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING * 2 +
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_CONTENT_PADDING,
+          slidePattern: 'horizontal',
+          title: file.name.replace('.pptx', ''),
+          currentSlideIndex: 0,
+        },
+      })
+
+      // Create slides with images and meta text
+      data.slides.forEach((slide: { 
+        index: number, 
+        data: string,
+        meta?: {
+          text: string,
+          format: string
+        }
+      }, i: number) => {
+        const slideId = createShapeId()
+        editor.createShape<CCSlideShape>({
+          id: slideId,
+          type: 'cc-slide',
+          x: x + CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING,
+          y: y + CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT + 
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING,
+          rotation: 0,
+          isLocked: false,
+          props: {
+            ...CC_SHAPE_CONFIGS['cc-slide'].defaultProps,
+            w: CC_SHAPE_CONFIGS['cc-slide'].width,
+            h: CC_SHAPE_CONFIGS['cc-slide'].height,
+            title: `Slide ${i + 1}`,
+            imageData: slide.data,
+            meta: slide.meta || { text: '', format: 'markdown' }
+          },
+        })
+
+        editor.createBinding({
+          id: createBindingId(),
+          type: 'cc-slide-layout',
+          fromId: slideshowId,
+          toId: slideId,
+          props: {
+            index: `a${String(i + 1).padStart(3, '0')}`,
+            isMovingWithParent: true,
+            placeholder: false,
+          },
+        })
+      })
+    })
+
+    return true
+  } catch (error) {
+    if (isAxiosError(error)) {
+      if (!error.response) {
+        logger.error('slideshow-helpers', 'Network error - Failed to reach the server', { error })
+        throw new Error('Network error - Failed to reach the server. Please check your connection.')
+      }
+      
+      const {status} = error.response
+      const errorMessage = error.response.data?.message || error.message
+      
+      if (status === 404) {
+        logger.error('slideshow-helpers', 'PowerPoint conversion endpoint not found', { error })
+        throw new Error('PowerPoint conversion service is not available. Please check if the backend service is running.')
+      }
+      
+      if (status === 413) {
+        logger.error('slideshow-helpers', 'File too large', { error })
+        throw new Error('The PowerPoint file is too large to process.')
+      }
+      
+      logger.error('slideshow-helpers', `Server error (${status})`, { error: errorMessage })
+      throw new Error(`Server error (${status}): ${errorMessage}`)
+    }
+    
+    // Handle non-Axios errors
+    logger.error('slideshow-helpers', 'Unexpected error creating PowerPoint slideshow', { error })
+    throw new Error('An unexpected error occurred while processing the PowerPoint file.')
+  }
+}
+
+export const createWordSlideshow = async (
+  editor: Editor,
+  file: File,
+  x: number,
+  y: number
+) => {
+  try {
+    // Create form data for file upload
+    const formData = new FormData()
+    formData.append('file', file, file.name)
+    
+    logger.debug('slideshow-helpers', 'Uploading Word file.', {
+      name: file.name,
+      size: file.size,
+    })
+
+    const response = await axios.post('/assets/word/convert', formData)
+
+    logger.debug('slideshow-helpers', 'Response received.', {
+      status: response.status,
+      data: response.data,
+    })
+
+    const { data } = response
+    
+    if (!data || typeof data !== 'object') {
+      throw new Error('Invalid response format from server')
+    }
+
+    if (data.status !== 'success') {
+      throw new Error(data.message || 'Failed to process Word document')
+    }
+
+    if (!data.slides || !Array.isArray(data.slides) || data.slides.length === 0) {
+      throw new Error('No pages found in Word document')
+    }
+
+    // Create slideshow with the pages from Word
+    const slideshowId = createShapeId()
+    const baseProps = {
+      id: slideshowId,
+      x,
+      y,
+      rotation: 0,
+      isLocked: false,
+    }
+
+    // Create slideshow in a batch operation
+    editor.batch(() => {
+      const config = CC_SHAPE_CONFIGS['cc-slideshow']
+      
+      // Create slideshow shape
+      editor.createShape<CCSlideShowShape>({
+        ...baseProps,
+        type: 'cc-slideshow',
+        props: {
+          ...config.defaultProps,
+          w: config.width,
+          h: CC_SLIDESHOW_STYLE_CONSTANTS.DEFAULT_SLIDE_HEIGHT + 
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT +
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING * 2 +
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_CONTENT_PADDING,
+          slidePattern: 'horizontal',
+          title: file.name.replace('.docx', ''),
+          currentSlideIndex: 0,
+        },
+      })
+
+      // Create slides with images and meta text
+      data.slides.forEach((slide: { 
+        index: number, 
+        data: string, 
+        dimensions?: { width: number, height: number },
+        meta?: {
+          text: string,
+          format: string
+        }
+      }, i: number) => {
+        const slideId = createShapeId()
+        editor.createShape<CCSlideShape>({
+          id: slideId,
+          type: 'cc-slide',
+          x: x + CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING,
+          y: y + CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT + 
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING,
+          rotation: 0,
+          isLocked: false,
+          props: {
+            ...CC_SHAPE_CONFIGS['cc-slide'].defaultProps,
+            w: slide.dimensions?.width ?? CC_SHAPE_CONFIGS['cc-slide'].width,
+            h: slide.dimensions?.height ?? CC_SHAPE_CONFIGS['cc-slide'].height,
+            title: `Page ${i + 1}`,
+            imageData: slide.data,
+            meta: slide.meta || { text: '', format: 'markdown' }
+          },
+        })
+
+        editor.createBinding({
+          id: createBindingId(),
+          type: 'cc-slide-layout',
+          fromId: slideshowId,
+          toId: slideId,
+          props: {
+            index: `a${String(i + 1).padStart(3, '0')}`,
+            isMovingWithParent: true,
+            placeholder: false,
+          },
+        })
+      })
+    })
+
+    return true
+  } catch (error) {
+    if (isAxiosError(error)) {
+      if (!error.response) {
+        logger.error('slideshow-helpers', 'Network error - Failed to reach the server', { error })
+        throw new Error('Network error - Failed to reach the server. Please check your connection.')
+      }
+      
+      const {status} = error.response
+      const errorMessage = error.response.data?.message || error.message
+      
+      if (status === 404) {
+        logger.error('slideshow-helpers', 'Word conversion endpoint not found', { error })
+        throw new Error('Word conversion service is not available. Please check if the backend service is running.')
+      }
+      
+      if (status === 413) {
+        logger.error('slideshow-helpers', 'File too large', { error })
+        throw new Error('The Word file is too large to process.')
+      }
+      
+      logger.error('slideshow-helpers', `Server error (${status})`, { error: errorMessage })
+      throw new Error(`Server error (${status}): ${errorMessage}`)
+    }
+    
+    // Handle non-Axios errors
+    logger.error('slideshow-helpers', 'Unexpected error creating Word slideshow', { error })
+    throw new Error('An unexpected error occurred while processing the Word file.')
+  }
+}
+
+export const createPDFSlideshow = async (
+  editor: Editor,
+  file: File,
+  x: number,
+  y: number
+) => {
+  try {
+    // Create form data for file upload
+    const formData = new FormData()
+    formData.append('file', file, file.name)
+    
+    logger.debug('slideshow-helpers', 'Uploading PDF file.', {
+      name: file.name,
+      size: file.size,
+    })
+
+    const response = await axios.post('/assets/pdf/convert', formData)
+
+    logger.debug('slideshow-helpers', 'Response received.', {
+      status: response.status,
+      data: response.data,
+    })
+
+    const { data } = response
+    
+    if (!data || typeof data !== 'object') {
+      throw new Error('Invalid response format from server')
+    }
+
+    if (data.status !== 'success') {
+      throw new Error(data.message || 'Failed to process PDF document')
+    }
+
+    if (!data.slides || !Array.isArray(data.slides) || data.slides.length === 0) {
+      throw new Error('No pages found in PDF document')
+    }
+
+    // Create slideshow with the pages from PDF
+    const slideshowId = createShapeId()
+    const baseProps = {
+      id: slideshowId,
+      x,
+      y,
+      rotation: 0,
+      isLocked: false,
+    }
+
+    // Create slideshow in a batch operation
+    editor.batch(() => {
+      const config = CC_SHAPE_CONFIGS['cc-slideshow']
+      
+      // Create slideshow shape
+      editor.createShape<CCSlideShowShape>({
+        ...baseProps,
+        type: 'cc-slideshow',
+        props: {
+          ...config.defaultProps,
+          w: config.width,
+          h: CC_SLIDESHOW_STYLE_CONSTANTS.DEFAULT_SLIDE_HEIGHT + 
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT +
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING * 2 +
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_CONTENT_PADDING,
+          slidePattern: 'horizontal',
+          title: file.name.replace('.pdf', ''),
+          currentSlideIndex: 0,
+        },
+      })
+
+      // Create slides with images and meta text
+      data.slides.forEach((slide: { 
+        index: number, 
+        data: string, 
+        dimensions?: { width: number, height: number },
+        meta?: {
+          text: string,
+          format: string
+        }
+      }, i: number) => {
+        const slideId = createShapeId()
+        editor.createShape<CCSlideShape>({
+          id: slideId,
+          type: 'cc-slide',
+          x: x + CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING,
+          y: y + CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_HEADER_HEIGHT + 
+             CC_SLIDESHOW_STYLE_CONSTANTS.SLIDE_SPACING,
+          rotation: 0,
+          isLocked: false,
+          props: {
+            ...CC_SHAPE_CONFIGS['cc-slide'].defaultProps,
+            w: slide.dimensions?.width ?? CC_SHAPE_CONFIGS['cc-slide'].width,
+            h: slide.dimensions?.height ?? CC_SHAPE_CONFIGS['cc-slide'].height,
+            title: `Page ${i + 1}`,
+            imageData: slide.data,
+            meta: slide.meta || { text: '', format: 'markdown' }
+          },
+        })
+
+        editor.createBinding({
+          id: createBindingId(),
+          type: 'cc-slide-layout',
+          fromId: slideshowId,
+          toId: slideId,
+          props: {
+            index: `a${String(i + 1).padStart(3, '0')}`,
+            isMovingWithParent: true,
+            placeholder: false,
+          },
+        })
+      })
+    })
+
+    return true
+  } catch (error) {
+    if (isAxiosError(error)) {
+      if (!error.response) {
+        logger.error('slideshow-helpers', 'Network error - Failed to reach the server', { error })
+        throw new Error('Network error - Failed to reach the server. Please check your connection.')
+      }
+      
+      const {status} = error.response
+      const errorMessage = error.response.data?.message || error.message
+      
+      if (status === 404) {
+        logger.error('slideshow-helpers', 'PDF conversion endpoint not found', { error })
+        throw new Error('PDF conversion service is not available. Please check if the backend service is running.')
+      }
+      
+      if (status === 413) {
+        logger.error('slideshow-helpers', 'File too large', { error })
+        throw new Error('The PDF file is too large to process.')
+      }
+      
+      logger.error('slideshow-helpers', `Server error (${status})`, { error: errorMessage })
+      throw new Error(`Server error (${status}): ${errorMessage}`)
+    }
+    
+    // Handle non-Axios errors
+    logger.error('slideshow-helpers', 'Unexpected error creating PDF slideshow', { error })
+    throw new Error('An unexpected error occurred while processing the PDF file.')
+  }
+}
+
+export const handleSlideshowFileUpload = async (
+  editor: Editor,
+  file: File,
+  onComplete?: () => void
+) => {
+  if (!editor) return;
+
+  const { x, y } = editor.getViewportScreenCenter();
+
+  try {
+    if (file.name.endsWith('.pptx')) {
+      await createPowerPointSlideshow(editor, file, x, y);
+    } else if (file.name.endsWith('.docx')) {
+      await createWordSlideshow(editor, file, x, y);
+    } else if (file.name.endsWith('.pdf')) {
+      await createPDFSlideshow(editor, file, x, y);
+    } else {
+      throw new Error('Please select a PowerPoint (.pptx), Word (.docx), or PDF (.pdf) file');
+    }
+
+    onComplete?.();
+  } catch (error) {
+    throw error instanceof Error ? error : new Error('An unknown error occurred');
+  }
+}; 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/shape-helpers/transcription-helpers.ts b/src/utils/tldraw/cc-base/shape-helpers/transcription-helpers.ts
new file mode 100644
index 0000000..fb10c2c
--- /dev/null
+++ b/src/utils/tldraw/cc-base/shape-helpers/transcription-helpers.ts
@@ -0,0 +1,41 @@
+import { Editor, TLShapeId, createShapeId } from '@tldraw/tldraw'
+import { CC_SHAPE_CONFIGS } from '../cc-configs'
+
+export const createLiveTranscriptionShape = (
+  editor: Editor,
+  baseProps: {
+    id: TLShapeId
+    x: number
+    y: number
+    rotation: number
+    isLocked: boolean
+  }
+) => {
+  const config = CC_SHAPE_CONFIGS['cc-live-transcription']
+  
+  editor.createShape({
+    ...baseProps,
+    type: 'cc-live-transcription',
+    props: {
+      ...config.defaultProps,
+      w: config.width,
+      h: config.height,
+    },
+  })
+}
+
+export const createLiveTranscriptionShapeAtCenter = (editor: Editor) => {
+  if (!editor) return;
+
+  const { x, y } = editor.getViewportScreenCenter();
+  const config = CC_SHAPE_CONFIGS['cc-live-transcription'];
+  const shapeId = createShapeId();
+
+  createLiveTranscriptionShape(editor, {
+    id: shapeId,
+    x: x - config.xOffset,
+    y: y - config.yOffset,
+    rotation: 0,
+    isLocked: false,
+  });
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/shape-helpers/web-browser-helpers.ts b/src/utils/tldraw/cc-base/shape-helpers/web-browser-helpers.ts
new file mode 100644
index 0000000..eaf43e6
--- /dev/null
+++ b/src/utils/tldraw/cc-base/shape-helpers/web-browser-helpers.ts
@@ -0,0 +1,161 @@
+import { Editor, createShapeId, TLShapeId, IndexKey, TLParentId } from '@tldraw/tldraw'
+import { CCWebBrowserShape } from '../cc-web-browser/CCWebBrowserUtil'
+
+interface WebBrowserShapeOptions {
+  url: string
+  x?: number
+  y?: number
+  w?: number
+  h?: number
+  title?: string
+  isLoading?: boolean
+}
+
+interface WebBrowserShapeResult {
+  id: TLShapeId
+  url: string
+  x: number
+  y: number
+}
+
+export function createWebBrowserShapeInfo(options: WebBrowserShapeOptions): CCWebBrowserShape {
+  const shapeId = createShapeId()
+  return {
+    id: shapeId,
+    type: 'cc-web-browser',
+    typeName: 'shape',
+    x: options.x ?? 0,
+    y: options.y ?? 0,
+    rotation: 0,
+    index: 'a1' as IndexKey,
+    parentId: 'page:page' as TLParentId,
+    isLocked: false,
+    opacity: 1,
+    meta: {},
+    props: {
+      w: options.w ?? 800,
+      h: options.h ?? 600,
+      title: options.title ?? 'Web Browser',
+      headerColor: '#1a73e8',
+      backgroundColor: '#ffffff',
+      isLocked: false,
+      url: options.url,
+      history: [options.url],
+      currentHistoryIndex: 0,
+      isLoading: options.isLoading ?? true,
+    },
+  }
+}
+
+export function createWebBrowserShape(editor: Editor, options: WebBrowserShapeOptions): WebBrowserShapeResult {
+  const shape = createWebBrowserShapeInfo(options)
+  editor.createShape(shape)
+  
+  return {
+    id: shape.id,
+    url: options.url,
+    x: shape.x,
+    y: shape.y
+  }
+}
+
+interface MultipleWebBrowserOptions {
+  browsers: WebBrowserShapeOptions[]
+  layout?: 'grid' | 'cascade' | 'horizontal' | 'vertical'
+  spacing?: number
+  startX?: number
+  startY?: number
+}
+
+export function createMultipleWebBrowsers(
+  editor: Editor,
+  { browsers, layout = 'cascade', spacing = 20, startX = 0, startY = 0 }: MultipleWebBrowserOptions
+): WebBrowserShapeResult[] {
+  const results: WebBrowserShapeResult[] = []
+  const baseWidth = 800
+  const baseHeight = 600
+
+  editor.batch(() => {
+    browsers.forEach((browser, index) => {
+      let x = startX
+      let y = startY
+
+      switch (layout) {
+        case 'grid': {
+          const cols = Math.ceil(Math.sqrt(browsers.length))
+          x += (index % cols) * (baseWidth + spacing)
+          y += Math.floor(index / cols) * (baseHeight + spacing)
+          break
+        }
+        case 'cascade':
+          x += index * spacing
+          y += index * spacing
+          break
+        case 'horizontal':
+          x += index * (baseWidth + spacing)
+          break
+        case 'vertical':
+          y += index * (baseHeight + spacing)
+          break
+      }
+
+      const result = createWebBrowserShape(editor, {
+        ...browser,
+        x,
+        y,
+        w: baseWidth,
+        h: baseHeight
+      })
+      results.push(result)
+    })
+  })
+
+  return results
+}
+
+// Helper function to arrange browser shapes in a specific layout
+export function arrangeBrowserShapes(
+  editor: Editor,
+  shapeIds: TLShapeId[],
+  layout: 'grid' | 'cascade' | 'horizontal' | 'vertical',
+  options?: { spacing?: number; startX?: number; startY?: number }
+) {
+  const spacing = options?.spacing ?? 20
+  const startX = options?.startX ?? 0
+  const startY = options?.startY ?? 0
+  const baseWidth = 800
+  const baseHeight = 600
+
+  editor.batch(() => {
+    shapeIds.forEach((id, index) => {
+      let x = startX
+      let y = startY
+
+      switch (layout) {
+        case 'grid': {
+          const cols = Math.ceil(Math.sqrt(shapeIds.length))
+          x += (index % cols) * (baseWidth + spacing)
+          y += Math.floor(index / cols) * (baseHeight + spacing)
+          break
+        }
+        case 'cascade':
+          x += index * spacing
+          y += index * spacing
+          break
+        case 'horizontal':
+          x += index * (baseWidth + spacing)
+          break
+        case 'vertical':
+          y += index * (baseHeight + spacing)
+          break
+      }
+
+      editor.updateShape({
+        id,
+        type: 'cc-web-browser',
+        x,
+        y,
+      })
+    })
+  })
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/cc-base/shape-helpers/youtube-helpers.ts b/src/utils/tldraw/cc-base/shape-helpers/youtube-helpers.ts
new file mode 100644
index 0000000..8f645ee
--- /dev/null
+++ b/src/utils/tldraw/cc-base/shape-helpers/youtube-helpers.ts
@@ -0,0 +1,43 @@
+import { Editor, TLShapeId, createShapeId } from '@tldraw/tldraw'
+import { CC_SHAPE_CONFIGS } from '../cc-configs'
+
+export const createYoutubeShape = (
+  editor: Editor,
+  baseProps: {
+    id: TLShapeId
+    x: number
+    y: number
+    rotation: number
+    isLocked: boolean
+  },
+  videoUrl: string
+) => {
+  const config = CC_SHAPE_CONFIGS['cc-youtube-embed']
+  
+  editor.createShape({
+    ...baseProps,
+    type: 'cc-youtube-embed',
+    props: {
+      ...config.defaultProps,
+      w: config.width,
+      h: config.height,
+      video_url: videoUrl,
+    },
+  })
+}
+
+export const createYoutubeShapeAtCenter = (editor: Editor, videoUrl: string) => {
+  if (!editor) return;
+
+  const { x, y } = editor.getViewportScreenCenter();
+  const config = CC_SHAPE_CONFIGS['cc-youtube-embed'];
+  const shapeId = createShapeId();
+
+  createYoutubeShape(editor, {
+    id: shapeId,
+    x: x - config.xOffset,
+    y: y - config.yOffset,
+    rotation: 0,
+    isLocked: false,
+  }, videoUrl);
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/embeds.ts b/src/utils/tldraw/embeds.ts
new file mode 100644
index 0000000..8ebcb91
--- /dev/null
+++ b/src/utils/tldraw/embeds.ts
@@ -0,0 +1,100 @@
+import {
+    DefaultEmbedDefinitionType,
+    CustomEmbedDefinition,
+    DEFAULT_EMBED_DEFINITIONS,
+    TLEmbedDefinition,
+} from '@tldraw/tldraw';
+
+// Define which default embeds we want to keep
+const defaultEmbedTypesToKeep: DefaultEmbedDefinitionType[] = [
+    'tldraw',
+    'google_slides',
+];
+
+// Filter default embeds to keep only the ones we want
+export const defaultEmbedsToKeep = DEFAULT_EMBED_DEFINITIONS.filter((embed) =>
+    defaultEmbedTypesToKeep.includes(embed.type as DefaultEmbedDefinitionType)
+) as TLEmbedDefinition[];
+
+// Helper to create custom embeds
+const createCustomEmbed = (
+    type: string,
+    title: string,
+    hostnames: string[],
+    icon: string,
+    minWidth = 300,
+    minHeight = 300,
+    width = 720,
+    height = 500
+): CustomEmbedDefinition => ({
+    type,
+    title,
+    hostnames,
+    minWidth,
+    minHeight,
+    width,
+    height,
+    doesResize: true,
+    toEmbedUrl: (url) => {
+        const urlObj = new URL(url);
+        return `${urlObj.origin}/embed${urlObj.pathname}`;
+    },
+    fromEmbedUrl: (url) => {
+        return url.replace('/embed', '');
+    },
+    icon,
+});
+
+// Define custom embeds
+export const pptEmbed = createCustomEmbed(
+    'ppt',
+    'PowerPoint',
+    ['office.live.com'],
+    'https://c1-odc-15.cdn.office.net/start/resources/images/favicon_powerpointcom.ico'
+);
+
+export const ccYoutubeEmbed: CustomEmbedDefinition = {
+    type: 'cc-youtube-embed',
+    title: 'YouTube Video',
+    hostnames: ['youtube.com', 'youtu.be'],
+    width: 800,
+    height: 450,
+    doesResize: true,
+    minWidth: 200,
+    minHeight: 113,
+    toEmbedUrl: (url) => {
+        const videoId = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/)?.[1];
+        return `https://www.youtube.com/embed/${videoId}`;
+    },
+    fromEmbedUrl: (url) => {
+        const videoId = url.split('/').pop();
+        return `https://www.youtube.com/watch?v=${videoId}`;
+    },
+    icon: 'https://www.youtube.com/favicon.ico',
+};
+
+export const customEmbeds: TLEmbedDefinition[] = [
+    pptEmbed,
+    ccYoutubeEmbed,
+];
+
+// Export specific embed sets for different modes
+export const multiplayerEmbeds: TLEmbedDefinition[] = [
+    ...defaultEmbedsToKeep,
+    ...customEmbeds,
+];
+
+export const singlePlayerEmbeds: TLEmbedDefinition[] = [
+    ...defaultEmbedsToKeep,
+    ...customEmbeds,
+];
+
+export const devEmbeds: TLEmbedDefinition[] = [
+    ...defaultEmbedsToKeep,
+    ...customEmbeds,
+];
+
+// Helper function to create custom embed sets
+export const createCustomEmbedSet = (...embedSets: TLEmbedDefinition[][]): TLEmbedDefinition[] => {
+    return [...new Set(embedSets.flat())];
+};
diff --git a/src/utils/tldraw/schemas.ts b/src/utils/tldraw/schemas.ts
new file mode 100644
index 0000000..9c7a587
--- /dev/null
+++ b/src/utils/tldraw/schemas.ts
@@ -0,0 +1,53 @@
+import { createTLSchema, defaultShapeSchemas, defaultBindingSchemas } from '@tldraw/tlschema';
+import { createTLSchemaFromUtils, defaultBindingUtils, defaultShapeUtils } from '@tldraw/tldraw';
+import { ShapeUtils } from './shapes';
+import { allBindingUtils } from './bindings';
+import { ccGraphShapeProps } from './cc-base/cc-graph/cc-graph-props';
+import { ccGraphMigrations } from './cc-base/cc-graph/cc-graph-migrations';
+import { GraphShapeType } from './cc-base/cc-graph/cc-graph-types';
+
+// Create schema with shape definitions
+export const customSchema = createTLSchema({
+    shapes: {
+        ...defaultShapeSchemas,
+        // Dynamically generate shape schemas from ShapeUtils
+        ...Object.values(ShapeUtils).reduce((acc, util) => ({
+            ...acc,
+            [util.type]: {
+                props: util.props,
+                migrations: util.migrations,
+            }
+        }), {}),
+        // Add graph shapes
+        ...(ccGraphShapeProps ? Object.entries(ccGraphShapeProps).reduce((acc, [type, props]) => ({
+            ...acc,
+            [type]: {
+                props,
+                migrations: ccGraphMigrations[type as GraphShapeType],
+            }
+        }), {}) : {})
+    },
+    bindings: {
+        ...defaultBindingSchemas,
+        // Add binding schemas from our custom binding utils
+        ...allBindingUtils.reduce((acc, util) => ({
+            ...acc,
+            [util.type]: {
+                props: util.props,
+                migrations: util.migrations,
+            }
+        }), {})
+    },
+});
+
+// Create schema from utils (alternative approach)
+export const schemaFromUtils = createTLSchemaFromUtils({
+    shapeUtils: [
+        ...defaultShapeUtils,
+        ...Object.values(ShapeUtils)
+    ],
+    bindingUtils: [
+        ...defaultBindingUtils,
+        ...allBindingUtils
+    ],
+});
\ No newline at end of file
diff --git a/src/utils/tldraw/shapes.ts b/src/utils/tldraw/shapes.ts
new file mode 100644
index 0000000..240c444
--- /dev/null
+++ b/src/utils/tldraw/shapes.ts
@@ -0,0 +1,96 @@
+// Custom tldraw utils
+import { CCSlideShowShapeUtil } from './cc-base/cc-slideshow/CCSlideShowShapeUtil'
+import { CCSlideShapeUtil } from './cc-base/cc-slideshow/CCSlideShapeUtil'
+import { CCCalendarShapeUtil } from './cc-base/cc-calendar/CCCalendarShapeUtil'
+import { CCSettingsShapeUtil } from './cc-base/cc-settings/CCSettingsShapeUtil'
+import { CCLiveTranscriptionShapeUtil } from './cc-base/cc-transcription/CCLiveTranscriptionShapeUtil'
+import { CCYoutubeEmbedShapeUtil } from './cc-base/cc-youtube-embed/CCYoutubeEmbedShapeUtil'
+import { CCUserNodeShapeUtil } from './cc-base/cc-graph/CCUserNodeShapeUtil'
+import { CCTeacherNodeShapeUtil } from './cc-base/cc-graph/CCTeacherNodeShapeUtil'
+import { CCStudentNodeShapeUtil } from './cc-base/cc-graph/CCStudentNodeShapeUtil'
+import { CCCalendarNodeShapeUtil } from './cc-base/cc-graph/CCCalendarNodeShapeUtil'
+import { CCCalendarYearNodeShapeUtil } from './cc-base/cc-graph/CCCalendarYearNodeShapeUtil'
+import { CCCalendarMonthNodeShapeUtil } from './cc-base/cc-graph/CCCalendarMonthNodeShapeUtil'
+import { CCCalendarWeekNodeShapeUtil } from './cc-base/cc-graph/CCCalendarWeekNodeShapeUtil'
+import { CCCalendarDayNodeShapeUtil } from './cc-base/cc-graph/CCCalendarDayNodeShapeUtil'
+import { CCCalendarTimeChunkNodeShapeUtil } from './cc-base/cc-graph/CCCalendarTimeChunkNodeShapeUtil'
+import { CCSchoolNodeShapeUtil } from './cc-base/cc-graph/CCSchoolNodeShapeUtil'
+import { CCDepartmentNodeShapeUtil } from './cc-base/cc-graph/CCDepartmentNodeShapeUtil'
+import { CCRoomNodeShapeUtil } from './cc-base/cc-graph/CCRoomNodeShapeUtil'
+import { CCSubjectClassNodeShapeUtil } from './cc-base/cc-graph/CCSubjectClassNodeShapeUtil'
+import { CCPastoralStructureNodeShapeUtil } from './cc-base/cc-graph/CCPastoralStructureNodeShapeUtil'
+import { CCYearGroupNodeShapeUtil } from './cc-base/cc-graph/CCYearGroupNodeShapeUtil'
+import { CCCurriculumStructureNodeShapeUtil } from './cc-base/cc-graph/CCCurriculumStructureNodeShapeUtil'
+import { CCKeyStageNodeShapeUtil } from './cc-base/cc-graph/CCKeyStageNodeShapeUtil'
+import { CCKeyStageSyllabusNodeShapeUtil } from './cc-base/cc-graph/CCKeyStageSyllabusNodeShapeUtil'
+import { CCYearGroupSyllabusNodeShapeUtil } from './cc-base/cc-graph/CCYearGroupSyllabusNodeShapeUtil'
+import { CCSubjectNodeShapeUtil } from './cc-base/cc-graph/CCSubjectNodeShapeUtil'
+import { CCTopicNodeShapeUtil } from './cc-base/cc-graph/CCTopicNodeShapeUtil'
+import { CCTopicLessonNodeShapeUtil } from './cc-base/cc-graph/CCTopicLessonNodeShapeUtil'
+import { CCLearningStatementNodeShapeUtil } from './cc-base/cc-graph/CCLearningStatementNodeShapeUtil'
+import { CCScienceLabNodeShapeUtil } from './cc-base/cc-graph/CCScienceLabNodeShapeUtil'
+import { CCTeacherTimetableNodeShapeUtil } from './cc-base/cc-graph/CCTeacherTimetableNodeShapeUtil'
+import { CCTimetableLessonNodeShapeUtil } from './cc-base/cc-graph/CCTimetableLessonNodeShapeUtil'
+import { CCPlannedLessonNodeShapeUtil } from './cc-base/cc-graph/CCPlannedLessonNodeShapeUtil'
+import { CCSchoolTimetableNodeShapeUtil } from './cc-base/cc-graph/CCSchoolTimetableNodeShapeUtil'
+import { CCAcademicYearNodeShapeUtil } from './cc-base/cc-graph/CCAcademicYearNodeShapeUtil'
+import { CCAcademicTermNodeShapeUtil } from './cc-base/cc-graph/CCAcademicTermNodeShapeUtil'
+import { CCAcademicWeekNodeShapeUtil } from './cc-base/cc-graph/CCAcademicWeekNodeShapeUtil'
+import { CCAcademicDayNodeShapeUtil } from './cc-base/cc-graph/CCAcademicDayNodeShapeUtil'
+import { CCAcademicPeriodNodeShapeUtil } from './cc-base/cc-graph/CCAcademicPeriodNodeShapeUtil'
+import { CCRegistrationPeriodNodeShapeUtil } from './cc-base/cc-graph/CCRegistrationPeriodNodeShapeUtil'
+import { CCDepartmentStructureNodeShapeUtil } from './cc-base/cc-graph/CCDepartmentStructureNodeShapeUtil'
+import { CCUserTeacherTimetableNodeShapeUtil } from './cc-base/cc-graph/CCUserTeacherTimetableNodeShapeUtil'
+import { CCUserTimetableLessonNodeShapeUtil } from './cc-base/cc-graph/CCUserTimetableLessonNodeShapeUtil'
+import { CCSearchShapeUtil } from './cc-base/cc-search/CCSearchShapeUtil'
+import { CCWebBrowserShapeUtil } from './cc-base/cc-web-browser/CCWebBrowserUtil'
+// Define all shape utils in a single object for easy maintenance
+export const ShapeUtils = {
+  CCSlideShow: CCSlideShowShapeUtil,
+  CCSlide: CCSlideShapeUtil,
+  CCCalendar: CCCalendarShapeUtil,
+  CCSettings: CCSettingsShapeUtil,
+  CCLiveTranscription: CCLiveTranscriptionShapeUtil,
+  CCYoutubeEmbed: CCYoutubeEmbedShapeUtil,
+  CCUserNode: CCUserNodeShapeUtil,
+  CCTeacherNode: CCTeacherNodeShapeUtil,
+  CCStudentNode: CCStudentNodeShapeUtil,
+  CCCalendarNode: CCCalendarNodeShapeUtil,
+  CCCalendarYearNode: CCCalendarYearNodeShapeUtil,
+  CCCalendarMonthNode: CCCalendarMonthNodeShapeUtil,
+  CCCalendarWeekNode: CCCalendarWeekNodeShapeUtil,
+  CCCalendarDayNode: CCCalendarDayNodeShapeUtil,
+  CCCalendarTimeChunkNode: CCCalendarTimeChunkNodeShapeUtil,
+  CCSchoolNode: CCSchoolNodeShapeUtil,
+  CCDepartmentNode: CCDepartmentNodeShapeUtil,
+  CCRoomNode: CCRoomNodeShapeUtil,
+  CCSubjectClassNode: CCSubjectClassNodeShapeUtil,
+  CCPastoralStructureNode: CCPastoralStructureNodeShapeUtil,
+  CCYearGroupNode: CCYearGroupNodeShapeUtil,
+  CCCurriculumStructureNode: CCCurriculumStructureNodeShapeUtil,
+  CCKeyStageNode: CCKeyStageNodeShapeUtil,
+  CCKeyStageSyllabusNode: CCKeyStageSyllabusNodeShapeUtil,
+  CCYearGroupSyllabusNode: CCYearGroupSyllabusNodeShapeUtil,
+  CCSubjectNode: CCSubjectNodeShapeUtil,
+  CCTopicNode: CCTopicNodeShapeUtil,
+  CCTopicLessonNode: CCTopicLessonNodeShapeUtil,
+  CCLearningStatementNode: CCLearningStatementNodeShapeUtil,
+  CCScienceLabNode: CCScienceLabNodeShapeUtil,
+  CCTeacherTimetableNode: CCTeacherTimetableNodeShapeUtil,
+  CCTimetableLessonNode: CCTimetableLessonNodeShapeUtil,
+  CCPlannedLessonNode: CCPlannedLessonNodeShapeUtil,
+  CCSchoolTimetableNode: CCSchoolTimetableNodeShapeUtil,
+  CCAcademicYearNode: CCAcademicYearNodeShapeUtil,
+  CCAcademicTermNode: CCAcademicTermNodeShapeUtil,
+  CCAcademicWeekNode: CCAcademicWeekNodeShapeUtil,
+  CCAcademicDayNode: CCAcademicDayNodeShapeUtil,
+  CCAcademicPeriodNode: CCAcademicPeriodNodeShapeUtil,
+  CCRegistrationPeriodNode: CCRegistrationPeriodNodeShapeUtil,
+  CCDepartmentStructureNode: CCDepartmentStructureNodeShapeUtil,
+  CCUserTeacherTimetableNode: CCUserTeacherTimetableNodeShapeUtil,
+  CCUserTimetableLessonNode: CCUserTimetableLessonNodeShapeUtil,
+  CCSearch: CCSearchShapeUtil,
+  CCWebBrowser: CCWebBrowserShapeUtil,
+}
+
+export const allShapeUtils = Object.values(ShapeUtils)
\ No newline at end of file
diff --git a/src/utils/tldraw/tldraw.css b/src/utils/tldraw/tldraw.css
new file mode 100644
index 0000000..dc70105
--- /dev/null
+++ b/src/utils/tldraw/tldraw.css
@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap");
+@import url("@tldraw/tldraw/tldraw.css");
diff --git a/src/utils/tldraw/tools.ts b/src/utils/tldraw/tools.ts
new file mode 100644
index 0000000..84cc9aa
--- /dev/null
+++ b/src/utils/tldraw/tools.ts
@@ -0,0 +1,31 @@
+import { CCSlideShowShapeTool, CCSlideShapeTool } from './cc-base/cc-slideshow/CCSlideShapeTool';
+import { HeartStickerTool, SmileyStickerTool, StarStickerTool } from './tools/sticker-tool';
+
+// Base tools that are common across all modes
+export const baseTools = [
+    CCSlideShowShapeTool,
+    CCSlideShapeTool,
+] as const;
+
+// Sticker tools that can be added to any mode
+export const stickerTools = [
+    HeartStickerTool,
+    SmileyStickerTool,
+    StarStickerTool,
+] as const;
+
+// Specific tool sets for different modes
+export const multiplayerTools = [
+    ...baseTools,
+    ...stickerTools,
+] as const;
+
+export const singlePlayerTools = [
+    ...baseTools,
+    ...stickerTools,
+] as const;
+
+export const devTools = [
+    ...baseTools,
+    ...stickerTools,
+] as const;
\ No newline at end of file
diff --git a/src/utils/tldraw/tools/sticker-tool.tsx b/src/utils/tldraw/tools/sticker-tool.tsx
new file mode 100644
index 0000000..d592cdf
--- /dev/null
+++ b/src/utils/tldraw/tools/sticker-tool.tsx
@@ -0,0 +1,75 @@
+import { StateNode, TLPointerEventInfo } from '@tldraw/tldraw'
+
+const OFFSET = 12
+const STICKER_INTERVAL = 20 // Adjust this value to change the spacing between stickers
+
+class BaseStickerTool extends StateNode {
+    isPointerDown = false
+    lastStickerPosition = { x: 0, y: 0 }
+
+    override onEnter() {
+        this.editor.setCursor({ type: 'cross', rotation: 0 })
+    }
+
+    override onPointerDown(info: TLPointerEventInfo) {
+        this.isPointerDown = true
+        this.createSticker(info)
+    }
+
+    override onPointerMove(info: TLPointerEventInfo) {
+        if (this.isPointerDown) {
+            const { x, y } = info.point
+            const dx = x - this.lastStickerPosition.x
+            const dy = y - this.lastStickerPosition.y
+            if (Math.sqrt(dx * dx + dy * dy) >= STICKER_INTERVAL) {
+                this.createSticker(info)
+            }
+        }
+    }
+
+    override onPointerUp() {
+        this.isPointerDown = false
+    }
+
+    createSticker(info: TLPointerEventInfo) {
+        const { x, y } = info.point
+        this.editor.createShape({
+            type: 'text',
+            x: x - OFFSET,
+            y: y - OFFSET,
+            props: { text: this.getStickerEmoji() },
+        })
+        this.lastStickerPosition = { x, y }
+    }
+
+    getStickerEmoji(): string {
+        throw new Error('getStickerEmoji must be implemented in subclasses')
+    }
+}
+
+export class HeartStickerTool extends BaseStickerTool {
+    static override id = 'heartSticker'
+    static override name = 'Heart Sticker'
+
+    getStickerEmoji() {
+        return '❤️'
+    }
+}
+
+export class StarStickerTool extends BaseStickerTool {
+    static override id = 'starSticker'
+    static override name = 'Star Sticker'
+
+    getStickerEmoji() {
+        return '⭐'
+    }
+}
+
+export class SmileyStickerTool extends BaseStickerTool {
+    static override id = 'smileySticker'
+    static override name = 'Smiley Sticker'
+
+    getStickerEmoji() {
+        return '😊'
+    }
+}
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides.tsx b/src/utils/tldraw/ui-overrides.tsx
new file mode 100644
index 0000000..f76fd0f
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides.tsx
@@ -0,0 +1,93 @@
+import {
+    TLComponents,
+    TLUiOverrides,
+    TldrawUiToastsProvider,
+    TLUiToast,
+    TLUiToastsContextType,
+    Atom,
+    atom
+} from '@tldraw/tldraw';
+import { ReactNode } from 'react';
+
+import { regularComponentsIndex, presentationComponentsIndex } from './ui-overrides/components';
+import { presentationUiOverridesIndex, regularUiOverridesIndex } from './ui-overrides/overrides';
+
+// Toast Wrapper Component
+const ToastWrapper = ({ children }: { children: ReactNode }) => {
+    // Create custom toast overrides
+    const toastOverrides = (): TLUiToastsContextType => {
+        const toasts: Atom<TLUiToast[]> = atom('toasts', []);
+
+        return {
+            addToast: (toast) => {
+                const id = toast.id || Math.random().toString();
+                const newToast: TLUiToast = { ...toast, id };
+                toasts.set([...toasts.get(), newToast]);
+                return id;
+            },
+            removeToast: (id) => {
+                toasts.set(toasts.get().filter((t: TLUiToast) => t.id !== id));
+                return id;
+            },
+            clearToasts: () => {
+                toasts.set([]);
+            },
+            toasts
+        };
+    };
+
+    return (
+        <TldrawUiToastsProvider overrides={toastOverrides}>
+            {children}
+        </TldrawUiToastsProvider>
+    );
+};
+
+// Function to get the appropriate UI overrides
+export const getUiOverrides = (presentationMode: boolean): TLUiOverrides => {
+    return presentationMode ? presentationUiOverridesIndex : regularUiOverridesIndex;
+};
+
+// Function to get the appropriate UI configuration
+export const getUiComponents = (presentationMode: boolean): TLComponents => {
+    return presentationMode ? presentationComponents : regularComponents;
+};
+
+// Regular components configuration
+const regularComponents: TLComponents = {
+    Toolbar: regularComponentsIndex.Toolbar,
+    InFrontOfTheCanvas: regularComponentsIndex.InFrontOfTheCanvas,
+    KeyboardShortcutsDialog: regularComponentsIndex.KeyboardShortcutsDialog,
+    HelperButtons: regularComponentsIndex.HelperButtons,
+    ActionsMenu: regularComponentsIndex.ActionsMenu,
+    ContextMenu: regularComponentsIndex.ContextMenu,
+    DebugMenu: regularComponentsIndex.DebugMenu,
+    HelpMenu: regularComponentsIndex.HelpMenu,
+    MainMenu: regularComponentsIndex.MainMenu,
+    NavigationPanel: regularComponentsIndex.NavigationPanel,
+    PageMenu: regularComponentsIndex.PageMenu,
+    QuickActions: regularComponentsIndex.QuickActions,
+    StylePanel: regularComponentsIndex.StylePanel,
+    ZoomMenu: regularComponentsIndex.ZoomMenu
+};
+
+// Presentation components configuration
+const presentationComponents: TLComponents = {
+    Toolbar: presentationComponentsIndex.Toolbar,
+    InFrontOfTheCanvas: presentationComponentsIndex.InFrontOfTheCanvas,
+    KeyboardShortcutsDialog: presentationComponentsIndex.KeyboardShortcutsDialog,
+    HelperButtons: presentationComponentsIndex.HelperButtons,
+    ActionsMenu: presentationComponentsIndex.ActionsMenu,
+    ContextMenu: presentationComponentsIndex.ContextMenu,
+    DebugMenu: presentationComponentsIndex.DebugMenu,
+    HelpMenu: presentationComponentsIndex.HelpMenu,
+    MainMenu: presentationComponentsIndex.MainMenu,
+    NavigationPanel: presentationComponentsIndex.NavigationPanel,
+    PageMenu: presentationComponentsIndex.PageMenu,
+    QuickActions: presentationComponentsIndex.QuickActions,
+    StylePanel: presentationComponentsIndex.StylePanel,
+    ZoomMenu: presentationComponentsIndex.ZoomMenu
+};
+
+export { ToastWrapper };
+
diff --git a/src/utils/tldraw/ui-overrides/StickerDropdown.tsx b/src/utils/tldraw/ui-overrides/StickerDropdown.tsx
new file mode 100644
index 0000000..af8add6
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/StickerDropdown.tsx
@@ -0,0 +1,29 @@
+import { useEditor, TldrawUiButton } from '@tldraw/tldraw';
+
+export function StickerDropdown() {
+    const editor = useEditor()
+
+    const handleToolSelect = (toolId: string) => {
+        editor.setCurrentTool(toolId)
+    }
+
+    return (
+        <div style={{
+            position: 'absolute',
+            bottom: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            backgroundColor: 'white',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+            padding: '8px',
+            zIndex: 1000,
+            display: 'flex',
+            gap: '8px',
+        }}>
+            <TldrawUiButton type="tool" onClick={() => handleToolSelect('heartSticker')} style={{ fontSize: '1.5rem' }}>❤️</TldrawUiButton>
+            <TldrawUiButton type="tool" onClick={() => handleToolSelect('starSticker')} style={{ fontSize: '1.5rem' }}>⭐</TldrawUiButton>
+            <TldrawUiButton type="tool" onClick={() => handleToolSelect('smileySticker')} style={{ fontSize: '1.5rem' }}>😊</TldrawUiButton>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/CCPanel.tsx b/src/utils/tldraw/ui-overrides/components/CCPanel.tsx
new file mode 100644
index 0000000..f59ad9b
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/CCPanel.tsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { BasePanel } from './shared/BasePanel';
+import { CCExamMarkerPanel } from './shared/CCExamMarkerPanel';
+import { BaseContext, ViewContext } from '../../../../types/navigation';
+
+interface CCPanelProps {
+  examMarkerProps?: React.ComponentProps<typeof CCExamMarkerPanel>;
+  isExpanded?: boolean;
+  isPinned?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  onPinnedChange?: (pinned: boolean) => void;
+}
+
+export const CCPanel: React.FC<CCPanelProps> = ({ 
+  examMarkerProps,
+  isExpanded,
+  isPinned,
+  onExpandedChange,
+  onPinnedChange,
+}) => {
+  const [currentContext, setCurrentContext] = useState<BaseContext>('profile');
+  const [currentExtendedContext, setCurrentExtendedContext] = useState<ViewContext>('overview');
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  // Reset menu state when panel is closed
+  const handleExpandedChange = (expanded: boolean) => {
+    if (!expanded) {
+      setIsMenuOpen(false);
+    }
+    onExpandedChange?.(expanded);
+  };
+
+  return (
+    <BasePanel 
+      examMarkerProps={examMarkerProps}
+      isExpanded={isExpanded}
+      isPinned={isPinned}
+      onExpandedChange={handleExpandedChange}
+      onPinnedChange={onPinnedChange}
+      currentContext={currentContext}
+      onContextChange={setCurrentContext}
+      currentExtendedContext={currentExtendedContext}
+      onExtendedContextChange={setCurrentExtendedContext}
+      isMenuOpen={isMenuOpen}
+      onMenuOpenChange={setIsMenuOpen}
+    />
+  );
+}; 
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/index.ts b/src/utils/tldraw/ui-overrides/components/index.ts
new file mode 100644
index 0000000..94fa433
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/index.ts
@@ -0,0 +1,65 @@
+import { TLComponents } from '@tldraw/tldraw';
+
+import { RegularToolbar } from './regular/toolbar';
+import { RegularHelperButtons } from './regular/helperButton';
+// import { RegularHelpMenu } from './regular/helpMenu';
+// import { RegularMainMenu } from './regular/mainMenu';
+import { RegularNavigationPanel } from './regular/navigationPanel';
+// import { RegularPageMenu } from './regular/pageMenu';
+// import { RegularQuickActions } from './regular/quickActions';
+import { RegularStylePanel } from './regular/stylePanel';
+import { RegularZoomMenu } from './regular/zoomMenu';
+import { RegularKeyboardShortcutsDialog } from './regular/keyboardShortcutsDialog';
+// import { RegularActionsMenu } from './regular/actionsMenu';
+import { RegularContextMenu } from './regular/contextMenu';
+import { RegularDebugMenu } from './regular/debugMenu';
+
+import { PresentationToolbar } from './presentation/toolbar';
+import { PresentationHelperButtons } from './presentation/helperButton';
+// import { PresentationHelpMenu } from './presentation/helpMenu';
+// import { PresentationMainMenu } from './presentation/mainMenu';
+import { PresentationNavigationPanel } from './presentation/navigationPanel';
+// import { PresentationPageMenu } from './presentation/pageMenu';
+import { PresentationQuickActions } from './presentation/quickActions';
+import { PresentationStylePanel } from './presentation/stylePanel';
+import { PresentationZoomMenu } from './presentation/zoomMenu';
+import { PresentationKeyboardShortcutsDialog } from './presentation/keyboardShortcutsDialog';
+import { PresentationActionsMenu } from './presentation/actionsMenu';
+import { PresentationContextMenu } from './presentation/contextMenu';
+import { PresentationDebugMenu } from './presentation/debugMenu';
+import { CCPanel } from './CCPanel';
+
+export const regularComponentsIndex: TLComponents = {
+    Toolbar: RegularToolbar,
+    InFrontOfTheCanvas: CCPanel,
+    HelperButtons: RegularHelperButtons,
+    // HelpMenu: RegularHelpMenu,
+    // MainMenu: RegularMainMenu,
+    NavigationPanel: RegularNavigationPanel,
+    // PageMenu: RegularPageMenu,
+    // QuickActions: RegularQuickActions,
+    StylePanel: RegularStylePanel,
+    ZoomMenu: RegularZoomMenu,
+    KeyboardShortcutsDialog: RegularKeyboardShortcutsDialog,
+    // ActionsMenu: RegularActionsMenu,
+    ContextMenu: RegularContextMenu,
+    DebugMenu: RegularDebugMenu,
+};
+
+export const presentationComponentsIndex: TLComponents = {
+    Toolbar: PresentationToolbar,
+    InFrontOfTheCanvas: CCPanel,
+    HelperButtons: PresentationHelperButtons,
+    // HelpMenu: PresentationHelpMenu,
+    // MainMenu: PresentationMainMenu,
+    NavigationPanel: PresentationNavigationPanel,
+    // PageMenu: PresentationPageMenu,
+    QuickActions: PresentationQuickActions,
+    StylePanel: PresentationStylePanel,
+    ZoomMenu: PresentationZoomMenu,
+    KeyboardShortcutsDialog: PresentationKeyboardShortcutsDialog,
+    ActionsMenu: PresentationActionsMenu,
+    ContextMenu: PresentationContextMenu,
+    DebugMenu: PresentationDebugMenu,
+};
+
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/actionsMenu.tsx b/src/utils/tldraw/ui-overrides/components/presentation/actionsMenu.tsx
new file mode 100644
index 0000000..8196385
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/actionsMenu.tsx
@@ -0,0 +1,12 @@
+import {
+    DefaultActionsMenu,
+    DefaultActionsMenuContent,
+} from '@tldraw/tldraw';
+
+export const PresentationActionsMenu = () => {
+    return (
+        <DefaultActionsMenu>
+            <DefaultActionsMenuContent />
+        </DefaultActionsMenu>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/contextMenu.tsx b/src/utils/tldraw/ui-overrides/components/presentation/contextMenu.tsx
new file mode 100644
index 0000000..cf57db6
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/contextMenu.tsx
@@ -0,0 +1,15 @@
+import {
+    DefaultContextMenu,
+    DefaultContextMenuContent,
+    TLUiContextMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationContextMenu = (props: TLUiContextMenuProps) => {
+    return (
+        <div>
+            <DefaultContextMenu {...props}>
+                <DefaultContextMenuContent />
+            </DefaultContextMenu>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/debugMenu.tsx b/src/utils/tldraw/ui-overrides/components/presentation/debugMenu.tsx
new file mode 100644
index 0000000..49e2bd3
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/debugMenu.tsx
@@ -0,0 +1,15 @@
+import {
+    DefaultDebugMenu,
+    DefaultDebugMenuContent,
+    TLUiDebugMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationDebugMenu = (props: TLUiDebugMenuProps) => {
+    return (
+        <div>
+            <DefaultDebugMenu {...props}>
+                <DefaultDebugMenuContent />
+            </DefaultDebugMenu>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/helpMenu.tsx b/src/utils/tldraw/ui-overrides/components/presentation/helpMenu.tsx
new file mode 100644
index 0000000..91f4da3
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/helpMenu.tsx
@@ -0,0 +1,15 @@
+import {
+    DefaultHelpMenu,
+    DefaultHelpMenuContent,
+    TLUiHelpMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationHelpMenu = (props: TLUiHelpMenuProps) => {
+    return (
+        <div>
+            <DefaultHelpMenu {...props}>
+                <DefaultHelpMenuContent />
+            </DefaultHelpMenu>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/helperButton.tsx b/src/utils/tldraw/ui-overrides/components/presentation/helperButton.tsx
new file mode 100644
index 0000000..81fde68
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/helperButton.tsx
@@ -0,0 +1,15 @@
+import {
+    DefaultHelperButtons,
+    DefaultHelperButtonsContent,
+    TLUiHelperButtonsProps,
+} from '@tldraw/tldraw';
+
+export const PresentationHelperButtons = (props: TLUiHelperButtonsProps) => {
+    return (
+        <div>
+            <DefaultHelperButtons {...props}>
+                <DefaultHelperButtonsContent />
+            </DefaultHelperButtons>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/keyboardShortcutsDialog.tsx b/src/utils/tldraw/ui-overrides/components/presentation/keyboardShortcutsDialog.tsx
new file mode 100644
index 0000000..1134016
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/keyboardShortcutsDialog.tsx
@@ -0,0 +1,21 @@
+import {
+    DefaultKeyboardShortcutsDialog,
+    DefaultKeyboardShortcutsDialogContent,
+    TldrawUiMenuItem,
+    useTools,
+} from '@tldraw/tldraw';
+
+export const PresentationKeyboardShortcutsDialog = () => {
+    const tools = useTools();
+    
+    return (
+        <DefaultKeyboardShortcutsDialog onClose={() => {}}>
+            <div style={{ backgroundColor: 'white' }}>
+                <TldrawUiMenuItem {...tools['microphone']} />
+                <TldrawUiMenuItem {...tools['cc-slide']} />
+                <TldrawUiMenuItem {...tools['sticker']} />
+            </div>
+            <DefaultKeyboardShortcutsDialogContent />
+        </DefaultKeyboardShortcutsDialog>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/mainMenu.tsx b/src/utils/tldraw/ui-overrides/components/presentation/mainMenu.tsx
new file mode 100644
index 0000000..ddc567b
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/mainMenu.tsx
@@ -0,0 +1,15 @@
+import {
+    DefaultMainMenu,
+    DefaultMainMenuContent,
+    TLUiMainMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationMainMenu = (props: TLUiMainMenuProps) => {
+    return (
+        <div>
+            {/* <DefaultMainMenu {...props}>
+                <DefaultMainMenuContent />
+            </DefaultMainMenu> */}
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/navigationPanel.tsx b/src/utils/tldraw/ui-overrides/components/presentation/navigationPanel.tsx
new file mode 100644
index 0000000..f0d1698
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/navigationPanel.tsx
@@ -0,0 +1,11 @@
+import {
+    DefaultNavigationPanel,
+} from '@tldraw/tldraw';
+
+export const PresentationNavigationPanel = () => {
+    return (
+        <div>
+            {/* <DefaultNavigationPanel/> */}
+        </div>
+    )
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/pageMenu.tsx b/src/utils/tldraw/ui-overrides/components/presentation/pageMenu.tsx
new file mode 100644
index 0000000..b1e08a9
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/pageMenu.tsx
@@ -0,0 +1,11 @@
+import {
+    DefaultPageMenu,
+} from '@tldraw/tldraw';
+
+export const PresentationPageMenu = () => {
+    return (
+        <div>
+            {/* <DefaultPageMenu/> */}
+        </div>
+    )
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/quickActions.tsx b/src/utils/tldraw/ui-overrides/components/presentation/quickActions.tsx
new file mode 100644
index 0000000..37db447
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/quickActions.tsx
@@ -0,0 +1,15 @@
+import {
+    DefaultQuickActions,
+    DefaultQuickActionsContent,
+    TLUiQuickActionsProps,
+} from '@tldraw/tldraw';
+
+export const PresentationQuickActions = (props: TLUiQuickActionsProps) => {
+    return (
+        <div>
+            {/* <DefaultQuickActions {...props}>
+                <DefaultQuickActionsContent />
+            </DefaultQuickActions> */}
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/stylePanel.tsx b/src/utils/tldraw/ui-overrides/components/presentation/stylePanel.tsx
new file mode 100644
index 0000000..5d662ac
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/stylePanel.tsx
@@ -0,0 +1,80 @@
+import {
+    DefaultStylePanel,
+    TLUiStylePanelProps,
+    TldrawUiButton
+} from '@tldraw/tldraw';
+
+import { SnapshotToolbar } from '../../toolbars/snapshotToolbar';
+import { UserToolbar } from '../../toolbars/userToolbar';
+import { ToolsToolbar } from '../../toolbars/toolsToolbar';
+
+export const PresentationStylePanel = (props: TLUiStylePanelProps) => {
+    const emojiButtonStyle = {
+        fontSize: '22px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '40px',
+        height: '40px',
+    };
+
+    const toolbarStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: '100%',
+        padding: '0 8px',
+    };
+
+    return (
+        <DefaultStylePanel {...props}>
+            <div style={{ 
+                display: 'flex', 
+                flexDirection: 'column', 
+                gap: '0px', 
+                padding: '0px',
+                position: 'relative',
+                top: '0px',
+                left: '0',
+                zIndex: 1000,
+                background: 'var(--color-panel)',
+                borderRadius: 'var(--radius-2)',
+                boxShadow: 'var(--shadow-2)',
+                width: '100%',
+            }}>
+                <UserToolbar>
+                    {({ handleLogout, handleNavUserHome }) => (
+                        <div style={toolbarStyle}>
+                            <TldrawUiButton type="icon" title="Logout" onClick={handleLogout} style={emojiButtonStyle}>
+                                🚪
+                            </TldrawUiButton>
+                            <TldrawUiButton type="icon" title="Home" onClick={handleNavUserHome} style={emojiButtonStyle}>
+                                🏠
+                            </TldrawUiButton>
+                        </div>
+                    )}
+                </UserToolbar>
+                <SnapshotToolbar>
+                    {({ resetToBlankCanvas }) => (
+                        <div style={toolbarStyle}>
+                            <TldrawUiButton type="icon" title="Reset Canvas" onClick={resetToBlankCanvas} style={emojiButtonStyle}>
+                                🔄
+                            </TldrawUiButton>
+                        </div>
+                    )}
+                </SnapshotToolbar>
+                <ToolsToolbar>
+                    {({ handlePutUserNode, handleAddCalendar: toolbarHandleAddCalendar }) => (
+                        <div style={toolbarStyle}>
+                            <TldrawUiButton type="icon" title="Add User Node" onClick={handlePutUserNode} style={emojiButtonStyle}>
+                                👤
+                            </TldrawUiButton>
+                            <TldrawUiButton type="icon" title="Add Calendar" onClick={toolbarHandleAddCalendar} style={emojiButtonStyle}>
+                                📅
+                            </TldrawUiButton>
+                        </div>
+                    )}
+                </ToolsToolbar>
+            </div>
+        </DefaultStylePanel>
+    )
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/toolbar.tsx b/src/utils/tldraw/ui-overrides/components/presentation/toolbar.tsx
new file mode 100644
index 0000000..c85b07f
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/toolbar.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import {
+    DefaultToolbar,
+    TldrawUiMenuItem,
+} from '@tldraw/tldraw';
+import { StickerDropdown } from '../../StickerDropdown';
+
+export const PresentationToolbar = () => {
+    const [isStickerSelected, setIsStickerSelected] = useState(false);
+    
+    const handleStickerSelect = () => {
+        setIsStickerSelected(!isStickerSelected);
+    };
+
+    return (
+        <div>
+            <DefaultToolbar>
+                <div style={{ position: 'relative' }}>
+                    <TldrawUiMenuItem
+                        id="sticker"
+                        label="Sticker"
+                        icon="sticker-icon"
+                        onSelect={handleStickerSelect}
+                        isSelected={isStickerSelected}
+                    />
+                    {isStickerSelected && <StickerDropdown />}
+                </div>
+            </DefaultToolbar>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/presentation/zoomMenu.tsx b/src/utils/tldraw/ui-overrides/components/presentation/zoomMenu.tsx
new file mode 100644
index 0000000..5863c71
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/presentation/zoomMenu.tsx
@@ -0,0 +1,15 @@
+import {
+    DefaultZoomMenu,
+    DefaultZoomMenuContent,
+    TLUiZoomMenuProps,
+} from '@tldraw/tldraw';
+
+export const PresentationZoomMenu = (props: TLUiZoomMenuProps) => {
+    return (
+        <div>
+            {/* <DefaultZoomMenu {...props}>
+                <DefaultZoomMenuContent />
+            </DefaultZoomMenu> */}
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/actionsMenu.tsx b/src/utils/tldraw/ui-overrides/components/regular/actionsMenu.tsx
new file mode 100644
index 0000000..19a8c9a
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/actionsMenu.tsx
@@ -0,0 +1,12 @@
+import {
+    DefaultActionsMenu,
+    DefaultActionsMenuContent,
+} from '@tldraw/tldraw';
+
+export const RegularActionsMenu = () => {
+    return (
+        <DefaultActionsMenu>
+            <DefaultActionsMenuContent />
+        </DefaultActionsMenu>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/contextMenu.tsx b/src/utils/tldraw/ui-overrides/components/regular/contextMenu.tsx
new file mode 100644
index 0000000..260e6b0
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/contextMenu.tsx
@@ -0,0 +1,13 @@
+import {
+    DefaultContextMenu,
+    DefaultContextMenuContent,
+    TLUiContextMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularContextMenu = (props: TLUiContextMenuProps) => {
+    return (
+        <DefaultContextMenu {...props}>
+            <DefaultContextMenuContent />
+        </DefaultContextMenu>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/debugMenu.tsx b/src/utils/tldraw/ui-overrides/components/regular/debugMenu.tsx
new file mode 100644
index 0000000..220639d
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/debugMenu.tsx
@@ -0,0 +1,13 @@
+import {
+    DefaultDebugMenu,
+    DefaultDebugMenuContent,
+    TLUiDebugMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularDebugMenu = (props: TLUiDebugMenuProps) => {
+    return (
+        <DefaultDebugMenu {...props}>
+            <DefaultDebugMenuContent />
+        </DefaultDebugMenu>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/helpMenu.tsx b/src/utils/tldraw/ui-overrides/components/regular/helpMenu.tsx
new file mode 100644
index 0000000..6ea315a
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/helpMenu.tsx
@@ -0,0 +1,13 @@
+import {
+    DefaultHelpMenu,
+    DefaultHelpMenuContent,
+    TLUiHelpMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularHelpMenu = (props: TLUiHelpMenuProps) => {
+    return (
+        <DefaultHelpMenu {...props}>
+            <DefaultHelpMenuContent />
+        </DefaultHelpMenu>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/helperButton.tsx b/src/utils/tldraw/ui-overrides/components/regular/helperButton.tsx
new file mode 100644
index 0000000..769255e
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/helperButton.tsx
@@ -0,0 +1,28 @@
+import {
+    DefaultHelperButtons,
+    DefaultHelperButtonsContent,
+    TLUiHelperButtonsProps,
+} from '@tldraw/tldraw';
+import { Box } from '@mui/material';
+
+export const RegularHelperButtons = (props: TLUiHelperButtonsProps) => {
+    return (
+        <Box
+            sx={{
+                position: 'fixed',
+                top: '80px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                zIndex: 200,
+                pointerEvents: 'none',
+                '& > *': {
+                    pointerEvents: 'all'
+                }
+            }}
+        >
+            <DefaultHelperButtons {...props}>
+                <DefaultHelperButtonsContent />
+            </DefaultHelperButtons>
+        </Box>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/keyboardShortcutsDialog.tsx b/src/utils/tldraw/ui-overrides/components/regular/keyboardShortcutsDialog.tsx
new file mode 100644
index 0000000..d10d40a
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/keyboardShortcutsDialog.tsx
@@ -0,0 +1,20 @@
+import {
+    DefaultKeyboardShortcutsDialog,
+    DefaultKeyboardShortcutsDialogContent,
+    TldrawUiMenuItem,
+    useTools,
+} from '@tldraw/tldraw';
+
+export const RegularKeyboardShortcutsDialog = () => {
+    const tools = useTools();
+    return (
+        <DefaultKeyboardShortcutsDialog onClose={() => {}}>
+            <div style={{ backgroundColor: 'thistle' }}>
+                <TldrawUiMenuItem {...tools['microphone']} />
+                <TldrawUiMenuItem {...tools['cc-slide']} />
+                <TldrawUiMenuItem {...tools['sticker']} />
+            </div>
+            <DefaultKeyboardShortcutsDialogContent />
+        </DefaultKeyboardShortcutsDialog>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/mainMenu.tsx b/src/utils/tldraw/ui-overrides/components/regular/mainMenu.tsx
new file mode 100644
index 0000000..f6ea6e5
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/mainMenu.tsx
@@ -0,0 +1,13 @@
+import {
+    DefaultMainMenu,
+    DefaultMainMenuContent,
+    TLUiMainMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularMainMenu = (props: TLUiMainMenuProps) => {
+    return (
+        <DefaultMainMenu {...props}>
+            <DefaultMainMenuContent />
+        </DefaultMainMenu>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/navigationPanel.tsx b/src/utils/tldraw/ui-overrides/components/regular/navigationPanel.tsx
new file mode 100644
index 0000000..4f777f4
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/navigationPanel.tsx
@@ -0,0 +1,9 @@
+import {
+    DefaultNavigationPanel,
+} from '@tldraw/tldraw';
+
+export const RegularNavigationPanel = () => {
+    return (
+        <DefaultNavigationPanel/>
+    )
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/pageMenu.tsx b/src/utils/tldraw/ui-overrides/components/regular/pageMenu.tsx
new file mode 100644
index 0000000..5d60377
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/pageMenu.tsx
@@ -0,0 +1,9 @@
+import {
+    DefaultPageMenu,
+} from '@tldraw/tldraw';
+
+export const RegularPageMenu = () => {
+    return (
+        <DefaultPageMenu/>
+    )
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/quickActions.tsx b/src/utils/tldraw/ui-overrides/components/regular/quickActions.tsx
new file mode 100644
index 0000000..1644cc1
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/quickActions.tsx
@@ -0,0 +1,13 @@
+import {
+    DefaultQuickActions,
+    DefaultQuickActionsContent,
+    TLUiQuickActionsProps,
+} from '@tldraw/tldraw';
+
+export const RegularQuickActions = (props: TLUiQuickActionsProps) => {
+    return (
+        <DefaultQuickActions {...props}>
+            <DefaultQuickActionsContent />
+        </DefaultQuickActions>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/stylePanel.tsx b/src/utils/tldraw/ui-overrides/components/regular/stylePanel.tsx
new file mode 100644
index 0000000..eab92a0
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/stylePanel.tsx
@@ -0,0 +1,14 @@
+import {
+    DefaultStylePanel,
+    DefaultStylePanelContent,
+    TLUiStylePanelProps,
+    useRelevantStyles
+} from '@tldraw/tldraw';
+
+export const RegularStylePanel = (props: TLUiStylePanelProps) => {
+    return (
+        <DefaultStylePanel {...props}>
+            <DefaultStylePanelContent styles={useRelevantStyles()} />
+        </DefaultStylePanel>
+    )
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/toolbar.tsx b/src/utils/tldraw/ui-overrides/components/regular/toolbar.tsx
new file mode 100644
index 0000000..12b4e12
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/toolbar.tsx
@@ -0,0 +1,30 @@
+import { useState } from 'react';
+import {
+    DefaultToolbar,
+    TldrawUiMenuItem,
+    DefaultToolbarContent
+} from '@tldraw/tldraw';
+import { StickerDropdown } from '../../StickerDropdown';
+
+export const RegularToolbar = () => {
+    const [isStickerSelected, setIsStickerSelected] = useState(false)
+    const handleStickerSelect = () => {
+        setIsStickerSelected(!isStickerSelected)
+    }
+
+    return (
+        <DefaultToolbar>
+            <div style={{ position: 'relative' }}>
+                <TldrawUiMenuItem
+                    id="sticker"
+                    label="Sticker"
+                    icon="sticker-icon"
+                    onSelect={handleStickerSelect}
+                    isSelected={isStickerSelected}
+                />
+                {isStickerSelected && <StickerDropdown />}
+            </div>
+            <DefaultToolbarContent />
+        </DefaultToolbar>
+    )
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/regular/zoomMenu.tsx b/src/utils/tldraw/ui-overrides/components/regular/zoomMenu.tsx
new file mode 100644
index 0000000..d7005ca
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/regular/zoomMenu.tsx
@@ -0,0 +1,13 @@
+import {
+    DefaultZoomMenu,
+    DefaultZoomMenuContent,
+    TLUiZoomMenuProps,
+} from '@tldraw/tldraw';
+
+export const RegularZoomMenu = (props: TLUiZoomMenuProps) => {
+    return (
+        <DefaultZoomMenu {...props}>
+            <DefaultZoomMenuContent />
+        </DefaultZoomMenu>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/shared/BasePanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/BasePanel.tsx
new file mode 100644
index 0000000..d8cb0d4
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/BasePanel.tsx
@@ -0,0 +1,375 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { TldrawUiButton } from '@tldraw/tldraw';
+import { 
+  Button,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  styled,
+  ThemeProvider,
+  createTheme,
+  useMediaQuery
+} from '@mui/material';
+import {
+  PushPin as PushPinIcon,
+  PushPinOutlined as PushPinOutlinedIcon,
+  ExpandMore as ExpandMoreIcon,
+  Category as ShapesIcon,
+  Slideshow as SlidesIcon,
+  YouTube as YouTubeIcon,
+  AccountTree as GraphIcon,
+  Search as SearchIcon,
+  Navigation as NavigationIcon,
+  Save as NodeIcon,
+  Assignment as ExamIcon
+} from '@mui/icons-material';
+import { CCShapesPanel } from './CCShapesPanel';
+import { CCSlidesPanel } from './CCSlidesPanel';
+import { CCYoutubePanel } from './CCYoutubePanel';
+import { CCGraphPanel } from './CCGraphPanel';
+import { CCExamMarkerPanel } from './CCExamMarkerPanel';
+import { CCSearchPanel } from './CCSearchPanel'
+import { PANEL_DIMENSIONS, Z_INDICES } from './panel-styles';
+import './panel.css';
+// import { CCNavigationPanel } from './navigation/CCNavigationPanel';
+import { BaseContext, ViewContext } from '../../../../../types/navigation';
+// import { CCNodeSnapshotPanel } from './navigation/CCNodeSnapshotPanel';
+import { useTLDraw } from '../../../../../contexts/TLDrawContext';
+
+export const PANEL_TYPES = {
+  default: [
+    { id: 'navigation', label: 'Navigation', order: 10 },
+    { id: 'node-snapshot', label: 'Node', order: 20 },
+    { id: 'cc-shapes', label: 'Shapes', order: 30 },
+    { id: 'slides', label: 'Slides', order: 40 },
+    { id: 'youtube', label: 'YouTube', order: 50 },
+    { id: 'graph', label: 'Graph', order: 60 },
+    { id: 'search', label: 'Search', order: 70 },
+  ],
+  examMarker: [
+    { id: 'exam-marker', label: 'Exam Marker', order: 10 },
+  ],
+} as const;
+
+export type PanelType = typeof PANEL_TYPES.default[number]['id'] | typeof PANEL_TYPES.examMarker[number]['id'];
+
+interface BasePanelProps {
+  initialPanelType?: PanelType;
+  examMarkerProps?: React.ComponentProps<typeof CCExamMarkerPanel>;
+  isExpanded?: boolean;
+  isPinned?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  onPinnedChange?: (pinned: boolean) => void;
+  currentContext?: BaseContext;
+  onContextChange?: (context: BaseContext) => void;
+  currentExtendedContext?: ViewContext;
+  onExtendedContextChange?: (context: ViewContext) => void;
+  isMenuOpen?: boolean;
+  onMenuOpenChange?: (open: boolean) => void;
+}
+
+const PanelTypeButton = styled(Button)(() => ({
+  textTransform: 'none',
+  padding: '6px 12px',
+  gap: '8px',
+  backgroundColor: 'var(--color-panel)',
+  color: 'var(--color-text)',
+  border: '1px solid transparent',
+  transition: 'border-color 200ms ease',
+  justifyContent: 'space-between',
+  minWidth: '200px',
+  '&:hover': {
+    backgroundColor: 'var(--color-panel)',
+    borderColor: 'var(--color-text)',
+  },
+  '& .MuiSvgIcon-root': {
+    fontSize: '1.25rem',
+    color: 'inherit',
+  }
+}));
+
+const StyledMenuItem = styled(MenuItem)(() => ({
+  gap: '8px',
+  padding: '8px 16px',
+  transition: 'background-color 200ms ease',
+  '&:hover': {
+    backgroundColor: 'var(--color-hover)',
+    '& .MuiListItemIcon-root': {
+      color: 'var(--color-selected)',
+    }
+  },
+  '& .MuiListItemIcon-root': {
+    color: 'var(--color-text)',
+    minWidth: '32px',
+    transition: 'color 200ms ease',
+    '& .MuiSvgIcon-root': {
+      fontSize: '1.25rem',
+    }
+  }
+}));
+
+export const BasePanel: React.FC<BasePanelProps> = ({
+  initialPanelType = 'cc-shapes',
+  examMarkerProps,
+  isExpanded: controlledIsExpanded,
+  isPinned: controlledIsPinned,
+  onExpandedChange,
+  onPinnedChange,
+  isMenuOpen = false,
+  onMenuOpenChange = () => {},
+}) => {
+  const location = useLocation();
+  const { tldrawPreferences } = useTLDraw();
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
+  
+  // Create a dynamic theme based on TLDraw preferences
+  const theme = useMemo(() => {
+    let mode: 'light' | 'dark';
+    
+    if (tldrawPreferences?.colorScheme === 'system') {
+      mode = prefersDarkMode ? 'dark' : 'light';
+    } else {
+      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
+    }
+
+    return createTheme({
+      palette: {
+        mode,
+        divider: 'var(--color-divider)',
+      },
+    });
+  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
+
+  const isExamMarkerRoute = location.pathname === '/exam-marker';
+  const availablePanels = isExamMarkerRoute ? PANEL_TYPES.examMarker : PANEL_TYPES.default;
+  
+  const [currentPanelType, setCurrentPanelType] = React.useState<PanelType>(
+    isExamMarkerRoute ? 'exam-marker' : initialPanelType
+  );
+  
+  // Use controlled state if provided, otherwise use internal state
+  const [internalIsExpanded, setInternalIsExpanded] = React.useState(false);
+  const [internalIsPinned, setInternalIsPinned] = React.useState(false);
+  
+  const isExpanded = controlledIsExpanded ?? internalIsExpanded;
+  const isPinned = controlledIsPinned ?? internalIsPinned;
+  
+  const handleExpandedChange = (expanded: boolean) => {
+    setInternalIsExpanded(expanded);
+    onExpandedChange?.(expanded);
+  };
+  
+  const handlePinToggle = () => {
+    const newPinned = !isPinned;
+    setInternalIsPinned(newPinned);
+    onPinnedChange?.(newPinned);
+  };
+
+  const panelRef = useRef<HTMLDivElement>(null);
+  const dimensions = PANEL_DIMENSIONS[currentPanelType as keyof typeof PANEL_DIMENSIONS];
+
+  // Handle click outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      // Don't close if pinned
+      if (isPinned) return;
+
+      // Check if click is outside panel
+      const isClickOutside = panelRef.current && !panelRef.current.contains(event.target as Node);
+      
+      // Check if click is not on a panel-related element
+      const target = event.target as HTMLElement;
+      const isPanelElement = target.closest('.panel-root, .panel-handle, .tlui-button');
+
+      if (isClickOutside && !isPanelElement) {
+        handleExpandedChange(false);
+      }
+    };
+
+    if (isExpanded) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isExpanded, isPinned]);
+
+  const getIconForPanel = (panelId: PanelType) => {
+    switch (panelId) {
+      case 'cc-shapes':
+        return <ShapesIcon />;
+      case 'slides':
+        return <SlidesIcon />;
+      case 'youtube':
+        return <YouTubeIcon />;
+      case 'graph':
+        return <GraphIcon />;
+      case 'search':
+        return <SearchIcon />;
+      case 'navigation':
+        return <NavigationIcon />;
+      case 'node-snapshot':
+        return <NodeIcon />;
+      case 'exam-marker':
+        return <ExamIcon />;
+      default:
+        return <ShapesIcon />;
+    }
+  };
+
+  const getDescriptionForPanel = (panelId: PanelType) => {
+    switch (panelId) {
+      case 'cc-shapes':
+        return 'Add shapes and elements to your canvas';
+      case 'slides':
+        return 'Manage presentation slides';
+      case 'youtube':
+        return 'Embed YouTube videos';
+      case 'graph':
+        return 'View and manage graph connections';
+      case 'search':
+        return 'Search through your content';
+      case 'navigation':
+        return 'Navigate through different contexts';
+      case 'node-snapshot':
+        return 'Manage node snapshots';
+      case 'exam-marker':
+        return 'Mark and grade exams';
+      default:
+        return '';
+    }
+  };
+
+  const renderCurrentPanel = () => {
+    if (isExamMarkerRoute && currentPanelType === 'exam-marker') {
+      return examMarkerProps ? <CCExamMarkerPanel {...examMarkerProps} /> : null;
+    }
+
+    switch (currentPanelType) {
+      case 'cc-shapes':
+        return <CCShapesPanel />;
+      case 'slides':
+        return <CCSlidesPanel />;
+      case 'youtube':
+        return <CCYoutubePanel />;
+      case 'graph':
+        return <CCGraphPanel />;
+      case 'search':
+        return <CCSearchPanel />;
+      default:
+        return null;
+    }
+  };
+
+  // Handle menu button click
+  const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    setMenuAnchorEl(event.currentTarget);
+    onMenuOpenChange(true);
+  };
+
+  // Handle menu close
+  const handleMenuClose = () => {
+    setMenuAnchorEl(null);
+    onMenuOpenChange(false);
+  };
+
+  return (
+    <>
+      {!isExpanded && (
+        <div 
+          className="panel-handle"
+          onClick={() => handleExpandedChange(true)}
+          onTouchEnd={(e) => {
+            e.stopPropagation();
+            handleExpandedChange(true);
+          }}
+        >
+          ›
+        </div>
+      )}
+
+      {isExpanded && (
+        <div 
+          ref={panelRef}
+          className="panel-root"
+          style={{
+            top: dimensions.topOffset,
+            height: `calc(100% - ${dimensions.bottomOffset})`,
+            width: dimensions.width,
+            zIndex: Z_INDICES.PANEL,
+          }}
+        >
+          <div className="panel-header">
+            <ThemeProvider theme={theme}>
+              <PanelTypeButton
+                onClick={handleMenuClick}
+                endIcon={<ExpandMoreIcon />}
+                startIcon={getIconForPanel(currentPanelType)}
+              >
+                {availablePanels.find(p => p.id === currentPanelType)?.label}
+              </PanelTypeButton>
+
+              <Menu
+                anchorEl={menuAnchorEl}
+                open={isMenuOpen}
+                onClose={handleMenuClose}
+                PaperProps={{
+                  elevation: 8,
+                  sx: {
+                    border: '1px solid var(--color-divider)',
+                    boxShadow: 'var(--shadow-popup)',
+                  }
+                }}
+              >
+                {[...availablePanels]
+                  .sort((a, b) => a.order - b.order)
+                  .map(type => (
+                  <StyledMenuItem
+                    key={type.id}
+                    onClick={() => {
+                      setCurrentPanelType(type.id as PanelType);
+                      handleMenuClose();
+                    }}
+                    selected={currentPanelType === type.id}
+                  >
+                    <ListItemIcon>
+                      {getIconForPanel(type.id as PanelType)}
+                    </ListItemIcon>
+                    <ListItemText 
+                      primary={type.label}
+                      secondary={getDescriptionForPanel(type.id as PanelType)}
+                      primaryTypographyProps={{
+                        sx: { color: 'var(--color-text)' }
+                      }}
+                      secondaryTypographyProps={{
+                        sx: { color: 'var(--color-text-secondary)' }
+                      }}
+                    />
+                  </StyledMenuItem>
+                ))}
+              </Menu>
+            </ThemeProvider>
+
+            <div className="panel-header-actions">
+              <TldrawUiButton
+                type="icon"
+                onClick={handlePinToggle}
+                className="pin-button"
+              >
+                {isPinned ? <PushPinIcon /> : <PushPinOutlinedIcon />}
+              </TldrawUiButton>
+            </div>
+          </div>
+
+          <div className="panel-content">
+            {renderCurrentPanel()}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/shared/CCExamMarkerPanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/CCExamMarkerPanel.tsx
new file mode 100644
index 0000000..7e47b0d
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/CCExamMarkerPanel.tsx
@@ -0,0 +1,495 @@
+import React, { useState } from 'react';
+import { Box, Button, Typography, Divider, Stack } from '@mui/material';
+import { Editor, exportToBlob, TLPageId, Box as TLBox } from '@tldraw/tldraw';
+import { PDFDocument } from 'pdf-lib';
+import { Pdf } from '../../../../../pages/tldraw/CCExamMarker/types';
+import { logger } from '../../../../../debugConfig';
+
+interface CCExamMarkerPanelProps {
+  editor: Editor | null;
+  currentView: 'exam-and-markscheme' | 'student-responses';
+  onViewChange: (view: 'exam-and-markscheme' | 'student-responses') => void;
+  currentStudentIndex: number;
+  totalStudents: number;
+  onPreviousStudent: () => void;
+  onNextStudent: () => void;
+  getCurrentPdf: () => Pdf | null;
+}
+
+export const CCExamMarkerPanel: React.FC<CCExamMarkerPanelProps> = ({
+  editor,
+  currentView,
+  onViewChange,
+  currentStudentIndex,
+  totalStudents,
+  onPreviousStudent,
+  onNextStudent,
+  getCurrentPdf,
+}) => {
+  const [exportProgress, setExportProgress] = useState<number | null>(null);
+
+  const exportPdf = async (
+    editor: Editor,
+    { name, source, pages }: Pdf,
+    onProgress: (progress: number) => void,
+    startPage?: number,
+    endPage?: number,
+    studentIndex?: number
+  ) => {
+    logger.debug('cc-exam-marker', '📤 Starting PDF export', {
+      name,
+      startPage,
+      endPage,
+      studentIndex,
+      currentView,
+      totalPages: pages.length
+    });
+
+    const pdfPages = pages.slice(startPage, endPage);
+    logger.debug('cc-exam-marker', '📄 Selected pages for export', {
+      pdfPages: pdfPages.length,
+      pageIndices: pdfPages.map((_, i) => (startPage || 0) + i)
+    });
+
+    const totalThings = pdfPages.length * 2 + 2;
+    let progressCount = 0;
+    const tickProgress = () => {
+      progressCount++;
+      onProgress(progressCount / totalThings);
+    };
+
+    const sourcePdf = await PDFDocument.load(source);
+    tickProgress();
+
+    // Create a new PDF document for the selected pages
+    const newPdf = await PDFDocument.create();
+    
+    // Copy pages from source PDF
+    const pageIndices = pdfPages.map((_, i) => (startPage || 0) + i);
+    const copiedPages = await newPdf.copyPages(sourcePdf, pageIndices);
+    copiedPages.forEach(page => newPdf.addPage(page));
+    tickProgress();
+
+    // Store current page to restore later
+    const currentPageId = editor.getCurrentPageId();
+    logger.debug('cc-exam-marker', '📍 Current page before export', { currentPageId });
+
+    // Switch to the correct page based on context
+    const targetPageId = (studentIndex !== undefined 
+      ? `page:student-response-${studentIndex}` 
+      : currentView === 'exam-and-markscheme' 
+        ? 'page:exam-page'
+        : 'page:mark-scheme-page') as TLPageId;
+    
+    logger.debug('cc-exam-marker', '🎯 Switching to target page', { targetPageId });
+    editor.setCurrentPage(targetPageId);
+
+    // Get all shape IDs that are not page shapes (i.e., annotations)
+    const pageShapeIds = new Set(pages.map(page => page.shapeId));
+    const allShapeIds = Array.from(editor.getCurrentPageShapeIds()).filter(id => !pageShapeIds.has(id));
+    
+    logger.debug('cc-exam-marker', '📝 Found shapes on current page', {
+      totalShapes: editor.getCurrentPageShapeIds().size,
+      pageShapes: pageShapeIds.size,
+      annotationShapes: allShapeIds.length
+    });
+
+    // For each page, draw annotations on top
+    for (let i = 0; i < pdfPages.length; i++) {
+      const page = pdfPages[i];
+      const pdfPage = newPdf.getPages()[i];
+      const {bounds} = page;
+
+      logger.debug('cc-exam-marker', `📄 Processing page ${i + 1}/${pdfPages.length}`, {
+        bounds,
+        pageIndex: i,
+        globalPageIndex: (startPage || 0) + i
+      });
+
+      // Get shapes that intersect with this page using editor's bounds checking
+      const shapesInBounds = allShapeIds.filter((id) => {
+        const shape = editor.getShape(id);
+        if (!shape || shape.isLocked) return false;
+
+        // @ts-expect-error - annotationManager is added to editor in CCPdfEditor
+        const annotationManager = editor.annotationManager;
+        const annotationData = annotationManager.getAnnotationData(id);
+        if (!annotationData) return false;
+
+        // Filter by student index if provided
+        if (studentIndex !== undefined && annotationData.studentIndex !== studentIndex) {
+          return false;
+        }
+
+        // For exam/markscheme view, only include those annotations
+        if (studentIndex === undefined && annotationData.studentIndex !== undefined) {
+          return false;
+        }
+
+        // For individual student exports, use the annotation's original page index
+        // For full exports, use the stored page index
+        const adjustedPageIndex = annotationData.pageIndex;
+
+        // Check if this shape belongs to this page index
+        if (adjustedPageIndex !== i) {
+          return false;
+        }
+
+        logger.debug('cc-exam-marker', `🔍 Found matching annotation`, {
+          shapeId: id,
+          annotationData,
+          adjustedPageIndex,
+          currentPageIndex: i,
+          bounds: editor.getShapePageBounds(id)
+        });
+
+        return true;
+      });
+
+      logger.debug('cc-exam-marker', `✨ Found shapes for page ${i + 1}`, {
+        shapesInBounds: shapesInBounds.length,
+        pageIndex: i,
+        globalPageIndex: (startPage || 0) + i
+      });
+
+      if (shapesInBounds.length === 0) {
+        tickProgress();
+        tickProgress();
+        continue;
+      }
+
+      // Export the annotations as PNG
+      const exportedPng = await exportToBlob({
+        editor,
+        ids: shapesInBounds,
+        format: 'png',
+        opts: { 
+          background: false,
+          // Create a new bounds that's relative to the current page
+          bounds: new TLBox(
+            bounds.x,
+            0,  // Reset to 0 since we want annotations relative to current page
+            bounds.width,
+            bounds.height
+          ),
+          padding: 0,
+          scale: 1
+        },
+      });
+
+      tickProgress();
+
+      // Draw the annotations on the PDF page
+      const pngImage = await newPdf.embedPng(await exportedPng.arrayBuffer());
+      const pdfWidth = pdfPage.getWidth();
+      const pdfHeight = pdfPage.getHeight();
+      
+      pdfPage.drawImage(pngImage, {
+        x: 0,
+        y: 0,
+        width: pdfWidth,
+        height: pdfHeight,
+      });
+
+      tickProgress();
+    }
+
+    // Restore original page
+    logger.debug('cc-exam-marker', '🔄 Restoring original page', { currentPageId });
+    editor.setCurrentPage(currentPageId);
+
+    const pdfBytes = await newPdf.save();
+    const url = URL.createObjectURL(
+      new Blob([pdfBytes], { type: 'application/pdf' })
+    );
+    tickProgress();
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+    a.click();
+    URL.revokeObjectURL(url);
+    
+    logger.debug('cc-exam-marker', '✅ PDF export completed', { name });
+  };
+
+  const handleExportCurrentView = async () => {
+    if (!editor) return;
+    const currentPdf = getCurrentPdf();
+    if (!currentPdf) return;
+
+    setExportProgress(0);
+    try {
+      if (currentView === 'student-responses') {
+        // For student responses, we need to handle each student's annotations separately
+        const pagesPerStudent = currentPdf.pages.length / totalStudents;
+        let currentProgress = 0;
+
+        // Create a new PDF with all pages
+        const sourcePdf = await PDFDocument.load(currentPdf.source);
+        const newPdf = await PDFDocument.create();
+        const copiedPages = await newPdf.copyPages(sourcePdf, Array.from({ length: currentPdf.pages.length }, (_, i) => i));
+        copiedPages.forEach(page => newPdf.addPage(page));
+
+        // For each student, export their annotations onto their pages
+        for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
+          const startPage = studentIndex * pagesPerStudent;
+
+          // Switch to the student's page to get their annotations
+          const targetPageId = `page:student-response-${studentIndex}` as TLPageId;
+          editor.setCurrentPage(targetPageId);
+
+          // Get all annotations for this student
+          const pageShapeIds = new Set(currentPdf.pages.map(page => page.shapeId));
+          const allShapeIds = Array.from(editor.getCurrentPageShapeIds()).filter(id => !pageShapeIds.has(id));
+
+          // Process each page for this student
+          for (let i = 0; i < pagesPerStudent; i++) {
+            const pageIndex = startPage + i;
+            const page = currentPdf.pages[pageIndex];
+            const pdfPage = newPdf.getPages()[pageIndex];
+
+            // Get shapes for this page
+            const shapesInBounds = allShapeIds.filter((id) => {
+              const shape = editor.getShape(id);
+              if (!shape || shape.isLocked) return false;
+
+              // @ts-expect-error - annotationManager is added to editor in CCPdfEditor
+              const annotationManager = editor.annotationManager;
+              const annotationData = annotationManager.getAnnotationData(id);
+              if (!annotationData) return false;
+
+              return annotationData.studentIndex === studentIndex && annotationData.pageIndex === i;
+            });
+
+            if (shapesInBounds.length > 0) {
+              // Export and draw annotations
+              const exportedPng = await exportToBlob({
+                editor,
+                ids: shapesInBounds,
+                format: 'png',
+                opts: { 
+                  background: false,
+                  bounds: new TLBox(
+                    page.bounds.x,
+                    0,
+                    page.bounds.width,
+                    page.bounds.height
+                  ),
+                  padding: 0,
+                  scale: 1
+                },
+              });
+
+              const pngImage = await newPdf.embedPng(await exportedPng.arrayBuffer());
+              pdfPage.drawImage(pngImage, {
+                x: 0,
+                y: 0,
+                width: pdfPage.getWidth(),
+                height: pdfPage.getHeight(),
+              });
+            }
+
+            currentProgress++;
+            setExportProgress(currentProgress / (totalStudents * pagesPerStudent));
+          }
+        }
+
+        // Save the combined PDF
+        const pdfBytes = await newPdf.save();
+        const url = URL.createObjectURL(new Blob([pdfBytes], { type: 'application/pdf' }));
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = currentPdf.name;
+        a.click();
+        URL.revokeObjectURL(url);
+      } else {
+        // For exam/mark scheme view, use the original export logic
+        await exportPdf(editor, currentPdf, setExportProgress);
+      }
+    } finally {
+      setExportProgress(null);
+    }
+  };
+
+  const handleExportCurrentStudent = async () => {
+    if (!editor || currentView !== 'student-responses') return;
+    const currentPdf = getCurrentPdf();
+    if (!currentPdf) return;
+
+    const pagesPerStudent = currentPdf.pages.length / totalStudents;
+    const startPage = currentStudentIndex * pagesPerStudent;
+    const endPage = startPage + pagesPerStudent;
+
+    setExportProgress(0);
+    try {
+      await exportPdf(
+        editor,
+        {
+          ...currentPdf,
+          name: `Student_${currentStudentIndex + 1}_Response.pdf`,
+        },
+        setExportProgress,
+        Math.floor(startPage),
+        Math.floor(endPage),
+        currentStudentIndex
+      );
+    } finally {
+      setExportProgress(null);
+    }
+  };
+
+  const handleBatchExport = async () => {
+    if (!editor || currentView !== 'student-responses') return;
+    const currentPdf = getCurrentPdf();
+    if (!currentPdf) return;
+
+    setExportProgress(0);
+    try {
+      const pagesPerStudent = currentPdf.pages.length / totalStudents;
+      let currentProgress = 0;
+
+      for (let studentIndex = 0; studentIndex < totalStudents; studentIndex++) {
+        const startPage = studentIndex * pagesPerStudent;
+        const endPage = startPage + pagesPerStudent;
+
+        await exportPdf(
+          editor,
+          {
+            ...currentPdf,
+            name: `Student_${studentIndex + 1}_Response.pdf`,
+          },
+          setExportProgress,
+          Math.floor(startPage),
+          Math.floor(endPage),
+          studentIndex
+        );
+
+        currentProgress++;
+        setExportProgress(currentProgress / totalStudents);
+      }
+    } finally {
+      setExportProgress(null);
+    }
+  };
+
+  return (
+    <Box sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Exam Marker
+      </Typography>
+
+      <Box>
+        <Typography variant="subtitle2" sx={{ mb: 1 }}>
+          View Mode
+        </Typography>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <Button
+            fullWidth
+            variant={currentView === 'exam-and-markscheme' ? 'contained' : 'outlined'}
+            onClick={() => onViewChange('exam-and-markscheme')}
+          >
+            Exam & Mark Scheme
+          </Button>
+          <Button
+            fullWidth
+            variant={currentView === 'student-responses' ? 'contained' : 'outlined'}
+            onClick={() => onViewChange('student-responses')}
+          >
+            Student Responses
+          </Button>
+        </Box>
+      </Box>
+
+      {currentView === 'student-responses' && (
+        <>
+          <Divider />
+          <Box>
+            <Typography variant="subtitle2" sx={{ mb: 1 }}>
+              Student Navigation
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={onPreviousStudent}
+                disabled={currentStudentIndex === 0}
+              >
+                Previous Student
+              </Button>
+              <Typography variant="body2" align="center">
+                Student {currentStudentIndex + 1} of {totalStudents}
+              </Typography>
+              <Button
+                fullWidth
+                variant="outlined"
+                onClick={onNextStudent}
+                disabled={currentStudentIndex === totalStudents - 1}
+              >
+                Next Student
+              </Button>
+            </Box>
+          </Box>
+        </>
+      )}
+
+      <Divider />
+      
+      <Box>
+        <Typography variant="subtitle2" sx={{ mb: 1 }}>
+          Actions
+        </Typography>
+        <Stack spacing={1}>
+          <Button
+            fullWidth
+            variant="contained"
+            color="primary"
+            disabled={!editor || !getCurrentPdf() || exportProgress !== null}
+            onClick={handleExportCurrentView}
+          >
+            {exportProgress !== null
+              ? `Exporting... ${Math.round(exportProgress * 100)}%`
+              : `Export ${currentView === 'exam-and-markscheme' ? 'All' : 'Combined Responses'}`}
+          </Button>
+          
+          {currentView === 'student-responses' && (
+            <>
+              <Button
+                fullWidth
+                variant="outlined"
+                color="primary"
+                disabled={!editor || !getCurrentPdf() || exportProgress !== null}
+                onClick={handleExportCurrentStudent}
+              >
+                {exportProgress !== null
+                  ? `Exporting... ${Math.round(exportProgress * 100)}%`
+                  : 'Export Current Student'}
+              </Button>
+              
+              <Button
+                fullWidth
+                variant="outlined"
+                color="primary"
+                disabled={!editor || !getCurrentPdf() || exportProgress !== null}
+                onClick={handleBatchExport}
+              >
+                {exportProgress !== null
+                  ? `Exporting... ${Math.round(exportProgress * 100)}%`
+                  : 'Export All as Separate Files'}
+              </Button>
+            </>
+          )}
+        </Stack>
+      </Box>
+
+      <Box sx={{ mt: 'auto' }}>
+        <Typography variant="subtitle2" sx={{ mb: 1 }}>
+          Statistics
+        </Typography>
+        <Typography variant="body2">
+          Total Pages: {getCurrentPdf()?.pages.length || 0}
+        </Typography>
+      </Box>
+    </Box>
+  );
+}; 
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/shared/CCGraphPanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/CCGraphPanel.tsx
new file mode 100644
index 0000000..967a09a
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/CCGraphPanel.tsx
@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { useEditor } from '@tldraw/tldraw';
+import { createGraphShape, createUserNodeFromProfile } from '../../../cc-base/shape-helpers/graph-helpers';
+import { ccGraphShapeProps, getDefaultCCUserNodeProps } from '../../../cc-base/cc-graph/cc-graph-props';
+import { useNeoUser } from '../../../../../contexts/NeoUserContext';
+import { logger } from '../../../../../debugConfig';
+import './panel.css';
+import { GraphShapeType } from '../../../cc-base/cc-graph/cc-graph-types';
+
+export const CCGraphPanel = () => {
+  const editor = useEditor();
+  const { userNode } = useNeoUser();
+  const [isOpen, setIsOpen] = useState(false);
+  const graphShapeTypes = Object.keys(ccGraphShapeProps);
+
+  const handleShapeSelect = (shapeType: GraphShapeType) => {
+    if (shapeType === 'cc-user-node') {
+      if (!userNode) {
+        logger.warn('graph-panel', '⚠️ Cannot create user node - no user data available')
+        return;
+      }
+      const defaultProps = getDefaultCCUserNodeProps();
+      createUserNodeFromProfile(editor, { 
+        ...defaultProps, 
+        ...userNode
+      });
+    } else {
+      createGraphShape(editor, shapeType);
+    }
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="panel-container">
+      <div className="panel-section">
+        <button
+          className="shape-button"
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          Add Graph Node
+        </button>
+
+        {isOpen && (
+          <div className="panel-dropdown">
+            {graphShapeTypes.map((shapeType) => (
+              <button
+                key={shapeType}
+                className="shape-button"
+                onClick={() => handleShapeSelect(shapeType as GraphShapeType)}
+              >
+                {shapeType.replace('cc-', '').replace('-node', '')}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/utils/tldraw/ui-overrides/components/shared/CCSearchPanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/CCSearchPanel.tsx
new file mode 100644
index 0000000..0d580f2
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/CCSearchPanel.tsx
@@ -0,0 +1,300 @@
+import React, { useState, useCallback, useMemo } from 'react'
+import { useEditor } from '@tldraw/tldraw'
+import { 
+  TextField, 
+  IconButton, 
+  List, 
+  ListItem, 
+  ListItemText, 
+  Paper, 
+  Button, 
+  Tabs, 
+  Tab,
+  ThemeProvider,
+  createTheme,
+  useMediaQuery,
+  styled
+} from '@mui/material'
+import SearchIcon from '@mui/icons-material/Search'
+import AddBoxIcon from '@mui/icons-material/AddBox'
+import LanguageIcon from '@mui/icons-material/Language'
+import { SearchResult } from '../../../../../services/tldraw/searchService'
+import { createSearchShape } from '../../../cc-base/shape-helpers/search-helpers'
+import { createWebBrowserShape } from '../../../cc-base/shape-helpers/web-browser-helpers'
+import { SearchService } from '../../../../../services/tldraw/searchService'
+import { CCWebBrowserShapeUtil } from '../../../cc-base/cc-web-browser/CCWebBrowserUtil'
+import { useTLDraw } from '../../../../../contexts/TLDrawContext'
+
+const StyledTextField = styled(TextField)(() => ({
+  '& .MuiInputBase-root': {
+    backgroundColor: 'var(--color-panel)',
+    color: 'var(--color-text)',
+    '& fieldset': {
+      borderColor: 'var(--color-divider)',
+    },
+    '&:hover fieldset': {
+      borderColor: 'var(--color-text)',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: 'var(--color-selected)',
+    },
+  },
+  '& .MuiInputBase-input': {
+    '&::placeholder': {
+      color: 'var(--color-text-secondary)',
+      opacity: 1,
+    },
+  },
+}));
+
+const StyledButton = styled(Button)(() => ({
+  textTransform: 'none',
+  backgroundColor: 'var(--color-panel)',
+  color: 'var(--color-text)',
+  border: '1px solid var(--color-divider)',
+  '&:hover': {
+    backgroundColor: 'var(--color-hover)',
+    borderColor: 'var(--color-text)',
+  },
+  '&.Mui-disabled': {
+    backgroundColor: 'var(--color-muted)',
+    color: 'var(--color-text-disabled)',
+    borderColor: 'var(--color-divider)',
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(() => ({
+  color: 'var(--color-text)',
+  '&:hover': {
+    backgroundColor: 'var(--color-hover)',
+  },
+  '&.Mui-disabled': {
+    color: 'var(--color-text-disabled)',
+  },
+}));
+
+const StyledPaper = styled(Paper)(() => ({
+  backgroundColor: 'var(--color-panel)',
+  border: '1px solid var(--color-divider)',
+  '& .MuiListItem-root': {
+    borderBottom: '1px solid var(--color-divider)',
+    '&:last-child': {
+      borderBottom: 'none',
+    },
+  },
+}));
+
+const StyledTabs = styled(Tabs)(() => ({
+  '& .MuiTab-root': {
+    color: 'var(--color-text-secondary)',
+    textTransform: 'none',
+    '&.Mui-selected': {
+      color: 'var(--color-selected)',
+    },
+  },
+  '& .MuiTabs-indicator': {
+    backgroundColor: 'var(--color-selected)',
+  },
+}));
+
+export const CCSearchPanel: React.FC = () => {
+  const editor = useEditor()
+  const { tldrawPreferences } = useTLDraw()
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
+  const [query, setQuery] = useState('')
+  const [url, setUrl] = useState('')
+  const [isSearching, setIsSearching] = useState(false)
+  const [results, setResults] = useState<SearchResult[]>([])
+  const [activeTab, setActiveTab] = useState(0)
+
+  const theme = useMemo(() => {
+    let mode: 'light' | 'dark';
+    
+    if (tldrawPreferences?.colorScheme === 'system') {
+      mode = prefersDarkMode ? 'dark' : 'light';
+    } else {
+      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
+    }
+
+    return createTheme({
+      palette: {
+        mode,
+        divider: 'var(--color-divider)',
+      },
+    });
+  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
+
+  const handleSearch = useCallback(async () => {
+    if (!query.trim()) return
+
+    setIsSearching(true)
+    try {
+      const searchResults = await SearchService.search(query)
+      setResults(searchResults)
+    } catch (error) {
+      console.error('Search error:', error)
+      setResults([])
+    } finally {
+      setIsSearching(false)
+    }
+  }, [query])
+
+  const handleCreateSearchShape = useCallback(() => {
+    createSearchShape(editor, { query })
+  }, [editor, query])
+
+  const handleCreateBrowserShape = useCallback(() => {
+    const processedUrl = url.startsWith('http') ? url : `https://${url}`
+    const { isEmbeddable } = CCWebBrowserShapeUtil.isEmbeddableUrl(processedUrl)
+    
+    if (isEmbeddable) {
+      editor.createShape({
+        type: 'embed',
+        props: { url: processedUrl },
+      })
+    } else {
+      createWebBrowserShape(editor, { url: processedUrl })
+    }
+  }, [editor, url])
+
+  const handleCreateFromResult = useCallback((result: SearchResult) => {
+    const { isEmbeddable } = CCWebBrowserShapeUtil.isEmbeddableUrl(result.url)
+    
+    if (isEmbeddable) {
+      editor.createShape({
+        type: 'embed',
+        props: { url: result.url },
+      })
+    } else {
+      createWebBrowserShape(editor, { url: result.url })
+    }
+  }, [editor])
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      if (activeTab === 0) {
+        handleSearch()
+      } else {
+        handleCreateBrowserShape()
+      }
+    }
+  }
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div style={{ display: 'flex', flexDirection: 'column', height: '100%', padding: '8px', gap: '8px' }}>
+        <StyledTabs 
+          value={activeTab} 
+          onChange={(_, newValue) => setActiveTab(newValue)}
+        >
+          <Tab label="Search" />
+          <Tab label="Browser" />
+        </StyledTabs>
+
+        {activeTab === 0 ? (
+          <>
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <StyledTextField
+                fullWidth
+                size="small"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                onKeyPress={handleKeyPress}
+                placeholder="Search..."
+                disabled={isSearching}
+              />
+              <StyledIconButton 
+                onClick={handleSearch}
+                disabled={isSearching || !query.trim()}
+              >
+                <SearchIcon />
+              </StyledIconButton>
+            </div>
+
+            <StyledButton
+              startIcon={<AddBoxIcon />}
+              onClick={handleCreateSearchShape}
+              fullWidth
+            >
+              Add Search Box
+            </StyledButton>
+
+            <StyledPaper sx={{ flex: 1, overflow: 'auto' }}>
+              <List>
+                {results.map((result, index) => (
+                  <ListItem 
+                    key={index}
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'stretch',
+                      gap: 1,
+                      padding: '12px',
+                    }}
+                  >
+                    <ListItemText
+                      primary={result.title}
+                      secondary={result.content}
+                      primaryTypographyProps={{
+                        sx: { 
+                          fontWeight: 'bold',
+                          fontSize: '0.9rem',
+                          color: 'var(--color-selected)',
+                          mb: 0.5
+                        }
+                      }}
+                      secondaryTypographyProps={{
+                        sx: { 
+                          fontSize: '0.8rem',
+                          color: 'var(--color-text)',
+                          display: '-webkit-box',
+                          WebkitLineClamp: 2,
+                          WebkitBoxOrient: 'vertical',
+                          overflow: 'hidden'
+                        }
+                      }}
+                    />
+                    <StyledButton
+                      size="small"
+                      onClick={() => handleCreateFromResult(result)}
+                      fullWidth
+                    >
+                      Open in Browser
+                    </StyledButton>
+                  </ListItem>
+                ))}
+              </List>
+            </StyledPaper>
+          </>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <StyledTextField
+                fullWidth
+                size="small"
+                value={url}
+                onChange={(e) => setUrl(e.target.value)}
+                onKeyPress={handleKeyPress}
+                placeholder="Enter URL..."
+              />
+              <StyledIconButton 
+                onClick={handleCreateBrowserShape}
+                disabled={!url.trim()}
+              >
+                <LanguageIcon />
+              </StyledIconButton>
+            </div>
+            <StyledButton
+              startIcon={<AddBoxIcon />}
+              onClick={handleCreateBrowserShape}
+              disabled={!url.trim()}
+              fullWidth
+            >
+              Add Web Browser
+            </StyledButton>
+          </div>
+        )}
+      </div>
+    </ThemeProvider>
+  )
+}
diff --git a/src/utils/tldraw/ui-overrides/components/shared/CCShapesPanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/CCShapesPanel.tsx
new file mode 100644
index 0000000..e1425ca
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/CCShapesPanel.tsx
@@ -0,0 +1,98 @@
+import React, { useRef } from 'react';
+import { useEditor } from '@tldraw/tldraw';
+import { CC_SHAPE_CONFIGS } from '../../../cc-base/cc-configs';
+import { createSlideshowAtCenter, handleSlideshowFileUpload } from '../../../cc-base/shape-helpers/slideshow-helpers';
+import { createCalendarShapeAtCenter } from '../../../cc-base/shape-helpers/calendar-helpers';
+import { createSettingsShapeAtCenter } from '../../../cc-base/shape-helpers/settings-helpers';
+import { createLiveTranscriptionShapeAtCenter } from '../../../cc-base/shape-helpers/transcription-helpers';
+import './panel.css';
+
+export const CCShapesPanel: React.FC = () => {
+  const editor = useEditor();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleCreateShape = (shapeType: keyof typeof CC_SHAPE_CONFIGS, slidePattern?: string, numSlides?: number) => {
+    if (!editor) return;
+
+    switch (shapeType) {
+      case 'cc-calendar':
+        createCalendarShapeAtCenter(editor);
+        break;
+      case 'cc-settings':
+        createSettingsShapeAtCenter(editor);
+        break;
+      case 'cc-live-transcription':
+        createLiveTranscriptionShapeAtCenter(editor);
+        break;
+      case 'cc-slideshow':
+        createSlideshowAtCenter(editor, slidePattern, numSlides);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!editor || !event.target.files || event.target.files.length === 0) return;
+
+    try {
+      await handleSlideshowFileUpload(editor, event.target.files[0], () => {
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      });
+    } catch (error) {
+      alert(error instanceof Error ? error.message : 'An unknown error occurred');
+    }
+  };
+
+  return (
+    <div className="panel-container">
+      <div className="panel-section">
+        <button className="shape-button" onClick={() => handleCreateShape('cc-calendar')}>
+          Calendar Shape
+        </button>
+        <button className="shape-button" onClick={() => handleCreateShape('cc-settings')}>
+          Settings Shape
+        </button>
+        <button className="shape-button" onClick={() => handleCreateShape('cc-live-transcription')}>
+          Live Transcription
+        </button>
+      </div>
+
+      <div className="panel-divider" />
+      
+      <div className="panel-section">
+        <div className="panel-section-title">Slideshow Patterns</div>
+        <button className="shape-button" onClick={() => handleCreateShape('cc-slideshow', 'horizontal', Number(CC_SHAPE_CONFIGS['cc-slideshow'].defaultProps.numSlides ?? 3))}>
+          Horizontal Slideshow
+        </button>
+        <button className="shape-button" onClick={() => handleCreateShape('cc-slideshow', 'vertical', Number(CC_SHAPE_CONFIGS['cc-slideshow'].defaultProps.numSlides ?? 3))}>
+          Vertical Slideshow
+        </button>
+        <button className="shape-button" onClick={() => handleCreateShape('cc-slideshow', 'grid', Number(CC_SHAPE_CONFIGS['cc-slideshow'].defaultProps.numSlides ?? 3))}>
+          Grid Slideshow
+        </button>
+        <button className="shape-button" onClick={() => handleCreateShape('cc-slideshow', 'radial')}>
+          Radial Slideshow
+        </button>
+      </div>
+
+      <div className="panel-divider" />
+      
+      <div className="panel-section">
+        <div className="panel-section-title">Import Office Documents</div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".pptx,.docx,.pdf"
+          onChange={handleFileUpload}
+          style={{ display: 'none' }}
+        />
+        <button className="shape-button" onClick={() => fileInputRef.current?.click()}>
+          Upload Document
+        </button>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/shared/CCSlidesPanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/CCSlidesPanel.tsx
new file mode 100644
index 0000000..96a767f
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/CCSlidesPanel.tsx
@@ -0,0 +1,116 @@
+import React from 'react'
+import { useEditor, TldrawUiButton } from '@tldraw/tldraw'
+import { 
+  useSlideShows, 
+  useCurrentSlide, 
+  moveToSlide, 
+  getSlideLabel 
+} from '../../../cc-base/cc-slideshow/useSlideShow'
+import { CCSlideShape } from '../../../cc-base/cc-slideshow/CCSlideShapeUtil'
+import { CCSlideShowShape } from '../../../cc-base/cc-slideshow/CCSlideShowShapeUtil'
+import { useTLDraw } from '../../../../../contexts/TLDrawContext'
+import { logger } from '../../../../../debugConfig'
+import { CCSlideLayoutBinding } from '../../../cc-base/cc-slideshow/CCSlideLayoutBindingUtil'
+import './panel.css'
+
+export const CCSlidesPanel: React.FC = () => {
+  const editor = useEditor()
+  const slideshows = useSlideShows()
+  const currentSlide = useCurrentSlide()
+  const { presentationMode, togglePresentationMode, presentationService } = useTLDraw()
+
+  const handleSlideClick = (slide: CCSlideShape) => {
+    logger.info('selection', '🖱️ Slide clicked in panel', {
+      slideId: slide.id,
+      timestamp: new Date().toISOString()
+    })
+    moveToSlide(editor, slide, presentationMode)
+  }
+
+  const handleTogglePresentation = () => {
+    logger.info('presentation', '🔄 Toggling presentation mode from slides panel')
+    togglePresentationMode(editor)
+  }
+
+  const handleZoomToSlideshow = (slideshow: CCSlideShowShape) => {
+    if (presentationMode && presentationService) {
+      presentationService.zoomToShape(slideshow)
+    }
+  }
+
+  const renderSlideshow = (slideshow: CCSlideShowShape) => {
+    const bindings = editor
+      .getBindingsFromShape<CCSlideLayoutBinding>(slideshow, 'cc-slide-layout')
+      .filter(b => !b.props.placeholder)
+      .sort((a, b) => (a.props.index > b.props.index ? 1 : -1))
+    
+    return (
+      <div key={slideshow.id} className="slideshow-container">
+        <div className="slideshow-header">
+          <div className="slideshow-title">
+            <h3>{slideshow.props.title || 'Untitled Slideshow'}</h3>
+            <span className="slide-count">
+              {bindings.length} slides
+            </span>
+          </div>
+          {presentationMode && (
+            <TldrawUiButton
+              type="icon"
+              className="zoom-button"
+              data-testid="zoom-to-slideshow"
+              onClick={() => handleZoomToSlideshow(slideshow)}
+              title="Zoom to slideshow"
+            >
+              🔍
+            </TldrawUiButton>
+          )}
+        </div>
+        <div className="slides-list">
+          {bindings.map((binding, index) => {
+            const slide = editor.getShape(binding.toId) as CCSlideShape
+            if (!slide) return null
+
+            const isCurrentSlide = currentSlide?.id === slide.id
+            return (
+              <div
+                key={slide.id}
+                className={`slide-item ${isCurrentSlide ? 'selected' : ''}`}
+                onClick={() => handleSlideClick(slide)}
+              >
+                <span className="slide-number">{index + 1}</span>
+                <span className="slide-title">
+                  {getSlideLabel(slide, index)}
+                </span>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="panel-container">
+      <div className="slides-panel-tools">
+        <TldrawUiButton 
+          type="normal"
+          className="shape-button"
+          data-active={presentationMode}
+          data-testid="toggle-presentation"
+          onClick={handleTogglePresentation}
+        >
+          {presentationMode ? 'Exit Presentation' : 'Present'}
+        </TldrawUiButton>
+      </div>
+
+      {slideshows.length === 0 ? (
+        <div className="panel-empty-state">
+          <p>No slideshows yet</p>
+          <p>Create a slideshow to get started</p>
+        </div>
+      ) : (
+        slideshows.map(renderSlideshow)
+      )}
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/shared/CCYoutubePanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/CCYoutubePanel.tsx
new file mode 100644
index 0000000..9d6cc75
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/CCYoutubePanel.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useEditor } from '@tldraw/tldraw';
+import { CC_SHAPE_CONFIGS } from '../../../cc-base/cc-configs';
+import { createYoutubeShapeAtCenter } from '../../../cc-base/shape-helpers/youtube-helpers';
+import './panel.css';
+
+export const CCYoutubePanel: React.FC = () => {
+  const editor = useEditor();
+  const [videoUrl, setVideoUrl] = React.useState<string>(CC_SHAPE_CONFIGS['cc-youtube-embed'].defaultProps.video_url as string);
+
+  return (
+    <div className="panel-container">
+      <div className="panel-section">
+        <input
+          type="text"
+          value={videoUrl}
+          onChange={(e) => setVideoUrl(e.target.value)}
+          onPaste={(e) => {
+            e.preventDefault();
+            const pastedText = e.clipboardData.getData('text');
+            setVideoUrl(pastedText);
+          }}
+          placeholder="Enter YouTube URL"
+          className="panel-input"
+        />
+        <button 
+          onClick={() => editor && createYoutubeShapeAtCenter(editor, videoUrl)}
+          className="shape-button"
+        >
+          Add YouTube Video
+        </button>
+      </div>
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/shared/components/pageComponent.tsx b/src/utils/tldraw/ui-overrides/components/shared/components/pageComponent.tsx
new file mode 100644
index 0000000..1b8553b
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/components/pageComponent.tsx
@@ -0,0 +1,264 @@
+import React, { useCallback, useMemo } from 'react';
+import { useEditor, TLPageId, useValue } from '@tldraw/tldraw';
+import { 
+  Box, 
+  Typography, 
+  List, 
+  ListItem, 
+  ListItemText, 
+  ListItemIcon, 
+  IconButton,
+  Menu,
+  MenuItem,
+  styled,
+  ThemeProvider,
+  createTheme,
+  useMediaQuery
+} from '@mui/material';
+import { useTLDraw } from '../../../../../../contexts/TLDrawContext';
+import {
+  FileCopy as PageIcon,
+  Add as AddIcon,
+  MoreVert as MoreVertIcon,
+  Delete as DeleteIcon,
+  Edit as EditIcon,
+  FileCopy as FileCopyIcon
+} from '@mui/icons-material';
+
+const PageSection = styled(Box)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+  color: 'var(--color-text)',
+}));
+
+const PageListItem = styled(ListItem, {
+  shouldForwardProp: (prop) => prop !== 'isSelected',
+})<{ isSelected?: boolean }>(({ isSelected }) => ({
+  borderRadius: '4px',
+  backgroundColor: isSelected ? 'var(--color-selected-background)' : 'transparent',
+  transition: 'background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease',
+  '&:hover': {
+    backgroundColor: isSelected ? 'var(--color-selected-hover)' : 'var(--color-hover)',
+    transform: 'translateX(4px)',
+    '& .MuiListItemIcon-root': {
+      color: 'var(--color-selected)',
+      transform: 'scale(1.1)',
+    },
+    '& .MuiIconButton-root': {
+      opacity: 1,
+      transform: 'scale(1)',
+    },
+  },
+  cursor: 'pointer',
+  '& .MuiListItemIcon-root': {
+    color: isSelected ? 'var(--color-selected)' : 'var(--color-text)',
+    transition: 'color 200ms ease, transform 200ms ease',
+    '& .MuiSvgIcon-root': {
+      fontSize: '1.25rem',
+    },
+  },
+  '& .MuiIconButton-root': {
+    opacity: 0,
+    transform: 'scale(0.8)',
+    transition: 'opacity 200ms ease, transform 200ms ease, background-color 200ms ease',
+    '&:hover': {
+      backgroundColor: 'var(--color-hover)',
+      transform: 'scale(1.1)',
+    },
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(() => ({
+  color: 'var(--color-text)',
+  transition: 'background-color 200ms ease, transform 200ms ease, color 200ms ease',
+  '&:hover': {
+    color: 'var(--color-selected)',
+    backgroundColor: 'var(--color-hover)',
+    transform: 'scale(1.1)',
+  },
+  '& .MuiSvgIcon-root': {
+    fontSize: '1.25rem',
+  },
+}));
+
+const StyledMenuItem = styled(MenuItem)(() => ({
+  gap: '8px',
+  transition: 'background-color 200ms ease, color 200ms ease',
+  '&:hover': {
+    backgroundColor: 'var(--color-hover)',
+    '& .MuiListItemIcon-root': {
+      color: 'var(--color-selected)',
+      transform: 'scale(1.1)',
+    },
+  },
+  '& .MuiListItemIcon-root': {
+    color: 'var(--color-text)',
+    minWidth: '32px',
+    transition: 'color 200ms ease, transform 200ms ease',
+    '& .MuiSvgIcon-root': {
+      fontSize: '1.25rem',
+    },
+  },
+  '&.Mui-disabled': {
+    '& .MuiListItemIcon-root': {
+      color: 'var(--color-text-disabled)',
+    },
+  },
+}));
+
+export const PageComponent = () => {
+  const editor = useEditor();
+  const { tldrawPreferences } = useTLDraw();
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [menuAnchor, setMenuAnchor] = React.useState<null | { element: HTMLElement; pageId: TLPageId }>(null);
+
+  // Create a dynamic theme based on TLDraw preferences
+  const theme = useMemo(() => {
+    let mode: 'light' | 'dark';
+    
+    // Determine mode based on TLDraw preferences
+    if (tldrawPreferences?.colorScheme === 'system') {
+      mode = prefersDarkMode ? 'dark' : 'light';
+    } else {
+      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
+    }
+
+    return createTheme({
+      palette: {
+        mode,
+        divider: 'var(--color-divider)',
+      },
+    });
+  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
+
+  // Subscribe to page changes using useValue
+  const pages = useValue('pages', () => editor.getPages(), [editor]);
+  const currentPageId = useValue('currentPageId', () => editor.getCurrentPageId(), [editor]);
+
+  const handlePageSelect = useCallback((pageId: TLPageId) => {
+    editor.setCurrentPage(pageId);
+  }, [editor]);
+
+  const handleCreatePage = useCallback(() => {
+    editor.createPage({
+      name: `Page ${editor.getPages().length + 1}`
+    });
+  }, [editor]);
+
+  const handlePageMenuOpen = useCallback((event: React.MouseEvent<HTMLElement>, pageId: TLPageId) => {
+    event.stopPropagation();
+    setMenuAnchor({ element: event.currentTarget, pageId });
+  }, []);
+
+  const handlePageMenuClose = useCallback(() => {
+    setMenuAnchor(null);
+  }, []);
+
+  const handleRenamePage = useCallback(() => {
+    if (!menuAnchor) return;
+    
+    const page = editor.getPage(menuAnchor.pageId);
+    if (!page) return;
+
+    const newName = window.prompt('Enter new page name:', page.name);
+    if (newName) {
+      editor.renamePage(menuAnchor.pageId, newName);
+    }
+    handlePageMenuClose();
+  }, [editor, menuAnchor]);
+
+  const handleDuplicatePage = useCallback(() => {
+    if (!menuAnchor) return;
+    editor.duplicatePage(menuAnchor.pageId);
+    handlePageMenuClose();
+  }, [editor, menuAnchor]);
+
+  const handleDeletePage = useCallback(() => {
+    if (!menuAnchor) return;
+    
+    if (pages.length <= 1) {
+      alert('Cannot delete the last page');
+      return;
+    }
+
+    editor.deletePage(menuAnchor.pageId);
+    handlePageMenuClose();
+  }, [editor, menuAnchor, pages.length]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <PageSection>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Typography variant="subtitle2" sx={{ color: 'var(--color-text-secondary)' }}>Pages</Typography>
+          <StyledIconButton size="small" onClick={handleCreatePage}>
+            <AddIcon fontSize="small" />
+          </StyledIconButton>
+        </Box>
+
+        <List dense>
+          {pages.map((page) => (
+            <PageListItem
+              key={page.id}
+              isSelected={page.id === currentPageId}
+              onClick={() => handlePageSelect(page.id)}
+            >
+              <ListItemIcon>
+                <PageIcon fontSize="small" />
+              </ListItemIcon>
+              <ListItemText 
+                primary={page.name}
+                primaryTypographyProps={{
+                  variant: 'body2',
+                  noWrap: true,
+                  sx: { color: 'var(--color-text)' }
+                }}
+              />
+              <StyledIconButton 
+                size="small" 
+                onClick={(e) => handlePageMenuOpen(e, page.id)}
+              >
+                <MoreVertIcon fontSize="small" />
+              </StyledIconButton>
+            </PageListItem>
+          ))}
+        </List>
+
+        <Menu
+          anchorEl={menuAnchor?.element}
+          open={Boolean(menuAnchor)}
+          onClose={handlePageMenuClose}
+          PaperProps={{
+            elevation: 8,
+            sx: {
+              border: '1px solid var(--color-divider)',
+              boxShadow: 'var(--shadow-popup)',
+            },
+          }}
+        >
+          <StyledMenuItem onClick={handleRenamePage}>
+            <ListItemIcon>
+              <EditIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Rename</ListItemText>
+          </StyledMenuItem>
+          <StyledMenuItem onClick={handleDuplicatePage}>
+            <ListItemIcon>
+              <FileCopyIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Duplicate</ListItemText>
+          </StyledMenuItem>
+          <StyledMenuItem 
+            onClick={handleDeletePage}
+            disabled={pages.length <= 1}
+          >
+            <ListItemIcon>
+              <DeleteIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText>Delete</ListItemText>
+          </StyledMenuItem>
+        </Menu>
+      </PageSection>
+    </ThemeProvider>
+  );
+};
diff --git a/src/utils/tldraw/ui-overrides/components/shared/navigation/CCNavigationPanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/navigation/CCNavigationPanel.tsx
new file mode 100644
index 0000000..33dae76
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/navigation/CCNavigationPanel.tsx
@@ -0,0 +1,430 @@
+import React, { useEffect, useMemo } from 'react';
+import { Box, Typography, ListItemText, ListItemIcon, styled, Select, MenuItem, FormControl, InputLabel, ThemeProvider, createTheme, useMediaQuery } from '@mui/material';
+import {
+  AccountCircle as AccountCircleIcon,
+  CalendarToday as CalendarIcon,
+  School as TeachingIcon,
+  Business as BusinessIcon,
+  AccountTree as DepartmentIcon,
+  Class as ClassIcon,
+  Dashboard as DashboardIcon,
+  Settings as SettingsIcon,
+  History as HistoryIcon,
+  Book as JournalIcon,
+  Event as PlannerIcon,
+  ViewDay as DayIcon,
+  ViewWeek as WeekIcon,
+  ViewModule as MonthIcon,
+  ViewAgenda as YearIcon,
+  Schedule as TimetableIcon,
+  Group as StaffIcon,
+  School as TeachersIcon,
+  MenuBook as SubjectsIcon,
+} from '@mui/icons-material';
+import {
+  BaseContext,
+  ExtendedContext,
+  ViewContext,
+  ViewDefinition,
+  CalendarExtendedContext,
+  TeacherExtendedContext
+} from '../../../../../../types/navigation';
+import { NAVIGATION_CONTEXTS } from '../../../../../../config/navigationContexts';
+import { useNavigationStore } from '../../../../../../stores/navigationStore';
+import { useNeoUser } from '../../../../../../contexts/NeoUserContext';
+import { CalendarNavigation } from '../../../../../../components/navigation/extended/CalendarNavigation';
+import { TeacherNavigation } from '../../../../../../components/navigation/extended/TeacherNavigation';
+import { useTLDraw } from '../../../../../../contexts/TLDrawContext';
+import { logger } from '../../../../../../debugConfig';
+
+const PanelContainer = styled(Box)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  padding: '16px',
+  gap: '16px',
+  overflow: 'auto',
+  color: 'var(--color-text)',
+}));
+
+const menuProps = {
+  PaperProps: {
+    elevation: 8,
+    sx: {
+      border: '1px solid var(--color-divider)',
+      boxShadow: 'var(--shadow-popup)',
+    },
+  },
+};
+
+interface CCNavigationPanelProps {
+  currentContext: BaseContext;
+  onContextChange: (context: BaseContext) => void;
+  currentExtendedContext?: ViewContext;
+  onExtendedContextChange?: (context: ViewContext) => void;
+}
+
+export const CCNavigationPanel: React.FC<CCNavigationPanelProps> = ({
+  currentContext,
+  onContextChange,
+  currentExtendedContext,
+  onExtendedContextChange,
+}) => {
+  const {
+    context: navigationContext,
+    setBaseContext,
+    setExtendedContext,
+    isLoading,
+    error,
+  } = useNavigationStore();
+
+  const { userDbName, workerDbName } = useNeoUser();
+  const { tldrawPreferences } = useTLDraw();
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  
+  // Create a dynamic theme based on TLDraw preferences
+  const theme = useMemo(() => {
+    let mode: 'light' | 'dark';
+    
+    // Determine mode based on TLDraw preferences
+    if (tldrawPreferences?.colorScheme === 'system') {
+      mode = prefersDarkMode ? 'dark' : 'light';
+    } else {
+      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
+    }
+
+    return createTheme({
+      palette: {
+        mode,
+        divider: 'var(--color-divider)',
+      },
+    });
+  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
+
+  const getDefaultViewForContext = (context: BaseContext): ViewContext => {
+    switch (context) {
+      case 'calendar':
+        return 'overview';
+      case 'teaching':
+        return 'overview';
+      case 'school':
+        return 'overview';
+      case 'department':
+        return 'overview';
+      case 'class':
+        return 'overview';
+      default:
+        return 'overview';
+    }
+  };
+
+  const isValidExtendedContextForBase = (extendedContext: ExtendedContext, baseContext: BaseContext): boolean => {
+    const contextDef = NAVIGATION_CONTEXTS[baseContext];
+    return contextDef?.views?.some(view => view.id === extendedContext) ?? false;
+  };
+
+  // Sync with navigation store's main context
+  useEffect(() => {
+    if (navigationContext.main !== 'profile' && navigationContext.main !== 'institute') {
+      return;
+    }
+    
+    const contextDef = NAVIGATION_CONTEXTS[navigationContext.base];
+    if (!contextDef) return;
+
+    // Update local state to match navigation store
+    if (navigationContext.base !== currentContext) {
+      onContextChange(navigationContext.base);
+      
+      // When base context changes, set appropriate default view
+      const defaultView = getDefaultViewForContext(navigationContext.base);
+      if (isValidViewContext(defaultView)) {
+        onExtendedContextChange?.(defaultView);
+      }
+    }
+
+    // If current extended context is not valid for this base context, reset to default
+    if (currentExtendedContext && !isValidExtendedContextForBase(currentExtendedContext, navigationContext.base)) {
+      const defaultView = getDefaultViewForContext(navigationContext.base);
+      if (isValidViewContext(defaultView)) {
+        onExtendedContextChange?.(defaultView);
+      }
+    }
+  }, [navigationContext.main, navigationContext.base, currentContext, currentExtendedContext, onContextChange, onExtendedContextChange]);
+
+  const handleContextChange = async (newContext: BaseContext) => {
+    logger.debug('navigation-panel', '🔄 Starting context change', {
+      from: currentContext,
+      to: newContext
+    });
+
+    try {
+      // Get default view for new context
+      const defaultView = getDefaultViewForContext(newContext);
+      logger.debug('navigation-panel', '📍 Determined default view', {
+        context: newContext,
+        defaultView
+      });
+
+      // Use unified context switch with both base and extended contexts
+      const contextUpdate = {
+        base: newContext,
+        extended: isValidViewContext(defaultView) ? defaultView : undefined
+      };
+      
+      logger.debug('navigation-panel', '🚀 Initiating context switch', contextUpdate);
+      
+      await setBaseContext(newContext, userDbName, workerDbName);
+      
+      logger.debug('navigation-panel', '✅ Context switch successful', {
+        context: newContext,
+        view: defaultView
+      });
+
+      // Update local state
+      onContextChange(newContext);
+      if (isValidViewContext(defaultView)) {
+        await setExtendedContext(defaultView, userDbName, workerDbName);
+        onExtendedContextChange?.(defaultView);
+      }
+    } catch (error) {
+      logger.error('navigation-panel', '❌ Failed to change context', {
+        error,
+        attemptedContext: newContext
+      });
+      console.error('Failed to change context:', error);
+    }
+  };
+
+  const handleExtendedContextChange = async (newContext: ViewContext) => {
+    logger.debug('navigation-panel', '🔄 Starting extended context change', {
+      from: currentExtendedContext,
+      to: newContext
+    });
+
+    try {
+      // Validate that the new context is valid for current base context
+      if (!isValidExtendedContextForBase(newContext, currentContext)) {
+        logger.warn('navigation-panel', '⚠️ Invalid extended context combination', {
+          baseContext: currentContext,
+          attemptedExtendedContext: newContext
+        });
+        return;
+      }
+
+      const contextUpdate = { extended: newContext };
+      logger.debug('navigation-panel', '🚀 Initiating extended context switch', contextUpdate);
+
+      // Use unified context switch for extended context only
+      await setExtendedContext(newContext, userDbName, workerDbName);
+      
+      logger.debug('navigation-panel', '✅ Extended context switch successful', {
+        newView: newContext
+      });
+
+      // Update local state
+      onExtendedContextChange?.(newContext);
+    } catch (error) {
+      logger.error('navigation-panel', '❌ Failed to change extended context', {
+        error,
+        attemptedContext: newContext
+      });
+      console.error('Failed to change extended context:', error);
+    }
+  };
+
+  // Add helper function to validate ViewContext
+  const isValidViewContext = (context: ExtendedContext): context is ViewContext => {
+    const validViewContexts: ViewContext[] = [
+      // Common views
+      'overview',
+      // User views
+      'settings', 'history', 'journal', 'planner',
+      // Calendar views
+      'day', 'week', 'month', 'year',
+      // Teaching views
+      'timetable', 'classes', 'lessons',
+      // School views
+      'departments', 'staff',
+      // Department views
+      'teachers', 'subjects',
+      // Class views
+      'students'
+    ];
+    return validViewContexts.includes(context as ViewContext);
+  };
+
+  const getContextIcon = (contextType: string) => {
+    const iconProps = { 
+      sx: { 
+        color: 'var(--color-text)',
+      } 
+    };
+    
+    switch (contextType) {
+      case 'profile':
+        return <AccountCircleIcon {...iconProps} />;
+      case 'calendar':
+        return <CalendarIcon {...iconProps} />;
+      case 'teaching':
+        return <TeachingIcon {...iconProps} />;
+      case 'school':
+        return <BusinessIcon {...iconProps} />;
+      case 'department':
+        return <DepartmentIcon {...iconProps} />;
+      case 'class':
+        return <ClassIcon {...iconProps} />;
+      case 'overview':
+        return <DashboardIcon {...iconProps} />;
+      case 'settings':
+        return <SettingsIcon {...iconProps} />;
+      case 'history':
+        return <HistoryIcon {...iconProps} />;
+      case 'journal':
+        return <JournalIcon {...iconProps} />;
+      case 'planner':
+        return <PlannerIcon {...iconProps} />;
+      case 'day':
+        return <DayIcon {...iconProps} />;
+      case 'week':
+        return <WeekIcon {...iconProps} />;
+      case 'month':
+        return <MonthIcon {...iconProps} />;
+      case 'year':
+        return <YearIcon {...iconProps} />;
+      case 'timetable':
+        return <TimetableIcon {...iconProps} />;
+      case 'staff':
+        return <StaffIcon {...iconProps} />;
+      case 'teachers':
+        return <TeachersIcon {...iconProps} />;
+      case 'subjects':
+        return <SubjectsIcon {...iconProps} />;
+      default:
+        return <AccountCircleIcon {...iconProps} />;
+    }
+  };
+
+  const renderContextDropdown = () => {
+    const items = navigationContext.main === 'profile' ? [
+      { id: 'profile', label: 'Profile' },
+      { id: 'calendar', label: 'Calendar' },
+      { id: 'teaching', label: 'Teaching' }
+    ] : [
+      { id: 'school', label: 'School' },
+      { id: 'department', label: 'Department' },
+      { id: 'class', label: 'Class' }
+    ];
+
+    return (
+      <ThemeProvider theme={theme}>
+        <FormControl fullWidth variant="outlined" size="small">
+          <InputLabel>Context</InputLabel>
+          <Select
+            value={currentContext}
+            onChange={(e) => handleContextChange(e.target.value as BaseContext)}
+            label="Context"
+            MenuProps={menuProps}
+          >
+            {items.map(item => (
+              <MenuItem key={item.id} value={item.id}>
+                <ListItemIcon>
+                  {getContextIcon(item.id)}
+                </ListItemIcon>
+                <ListItemText primary={item.label} />
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </ThemeProvider>
+    );
+  };
+
+  const renderExtendedContextDropdown = () => {
+    const contextDef = NAVIGATION_CONTEXTS[currentContext];
+    if (!contextDef?.views?.length) return null;
+
+    return (
+      <ThemeProvider theme={theme}>
+        <FormControl fullWidth variant="outlined" size="small">
+          <InputLabel>View</InputLabel>
+          <Select
+            value={currentExtendedContext || contextDef.views[0].id}
+            onChange={(e) => handleExtendedContextChange(e.target.value as ViewContext)}
+            label="View"
+            MenuProps={menuProps}
+          >
+            {contextDef.views.map((view: ViewDefinition) => (
+              <MenuItem key={view.id} value={view.id}>
+                <ListItemIcon>
+                  {getContextIcon(view.id)}
+                </ListItemIcon>
+                <ListItemText 
+                  primary={view.label}
+                  secondary={view.description}
+                />
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      </ThemeProvider>
+    );
+  };
+
+  const renderContextSpecificNavigation = () => {
+    if (!currentExtendedContext) return null;
+
+    switch (currentContext) {
+      case 'calendar':
+        return (
+          <CalendarNavigation
+            activeView={currentExtendedContext as CalendarExtendedContext}
+            onViewChange={(view) => handleExtendedContextChange(view)}
+          />
+        );
+      case 'teaching':
+        return (
+          <TeacherNavigation
+            activeView={currentExtendedContext as TeacherExtendedContext}
+            onViewChange={(view) => handleExtendedContextChange(view)}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <PanelContainer>
+        {renderContextDropdown()}
+        {renderExtendedContextDropdown()}
+        {renderContextSpecificNavigation()}
+        
+        {error && (
+          <Typography 
+            variant="body2" 
+            sx={{ 
+              mt: 2,
+              color: 'var(--color-error)'
+            }}
+          >
+            {error}
+          </Typography>
+        )}
+        
+        {isLoading && (
+          <Typography 
+            variant="body2" 
+            sx={{ 
+              mt: 2,
+              color: 'var(--color-text-secondary)'
+            }}
+          >
+            Loading...
+          </Typography>
+        )}
+      </PanelContainer>
+    </ThemeProvider>
+  );
+};
diff --git a/src/utils/tldraw/ui-overrides/components/shared/navigation/CCNodeSnapshotPanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/navigation/CCNodeSnapshotPanel.tsx
new file mode 100644
index 0000000..601e15d
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/navigation/CCNodeSnapshotPanel.tsx
@@ -0,0 +1,230 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { Box, Typography, styled, Button, ThemeProvider, createTheme, useMediaQuery } from '@mui/material';
+import { Save as SaveIcon, RestartAlt as ResetIcon } from '@mui/icons-material';
+import { useEditor, useToasts, loadSnapshot } from '@tldraw/tldraw';
+import { useNavigationStore } from '../../../../../../stores/navigationStore';
+import { UserNeoDBService } from '../../../../../../services/graph/userNeoDBService';
+import { PageComponent } from '../components/pageComponent';
+import { logger } from '../../../../../../debugConfig';
+import { useTLDraw } from '../../../../../../contexts/TLDrawContext';
+import { NavigationSnapshotService } from '../../../../../../services/tldraw/snapshotService';
+import { blankCanvasSnapshot } from '../../../../../tldraw/assets';
+
+const CurrentNodeSection = styled(Box)(() => ({
+  padding: '8px',
+  backgroundColor: 'var(--color-panel)',
+  borderRadius: '4px',
+  marginBottom: '8px',
+  '&:hover': {
+    backgroundColor: 'var(--color-hover)',
+  }
+}));
+
+const NodeInfoContainer = styled(Box)(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '4px',
+  marginBottom: '12px'
+}));
+
+const ActionButton = styled(Button)(() => ({
+  textTransform: 'none',
+  padding: '6px 16px',
+  gap: '8px',
+  backgroundColor: 'var(--color-panel)',
+  color: 'var(--color-text)',
+  border: '1px solid transparent',
+  transition: 'border-color 200ms ease',
+  '&:hover': {
+    backgroundColor: 'var(--color-panel)',
+    borderColor: 'var(--color-text)',
+  },
+  '&:active': {
+    backgroundColor: 'var(--color-panel)',
+  },
+  '& .MuiSvgIcon-root': {
+    fontSize: '1.25rem',
+    color: 'inherit',
+    transition: 'transform 200ms ease',
+  },
+  '&:hover .MuiSvgIcon-root': {
+    transform: 'scale(1.1) rotate(-10deg)',
+  },
+  '&.Mui-disabled': {
+    backgroundColor: 'var(--color-muted)',
+    color: 'var(--color-text-disabled)',
+    borderColor: 'transparent',
+  }
+}));
+
+const ButtonContainer = styled(Box)(() => ({
+  display: 'flex',
+  gap: '8px',
+  width: '100%'
+}));
+
+export const CCNodeSnapshotPanel: React.FC = () => {
+  const editor = useEditor();
+  const { addToast } = useToasts();
+  const { context: navigationContext, isLoading, error } = useNavigationStore();
+  const { tldrawPreferences } = useTLDraw();
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const [isSaving, setIsSaving] = useState(false);
+
+  // Create a dynamic theme based on TLDraw preferences
+  const theme = useMemo(() => {
+    let mode: 'light' | 'dark';
+    
+    // Determine mode based on TLDraw preferences
+    if (tldrawPreferences?.colorScheme === 'system') {
+      mode = prefersDarkMode ? 'dark' : 'light';
+    } else {
+      mode = tldrawPreferences?.colorScheme === 'dark' ? 'dark' : 'light';
+    }
+
+    return createTheme({
+      palette: {
+        mode,
+        divider: 'var(--color-divider)',
+      },
+    });
+  }, [tldrawPreferences?.colorScheme, prefersDarkMode]);
+
+  const handleResetCanvas = useCallback(() => {
+    try {
+      loadSnapshot(editor.store, blankCanvasSnapshot);
+      addToast({
+        title: 'Canvas reset',
+        description: 'The canvas has been reset to blank.',
+        icon: 'reset-zoom',
+      });
+    } catch (error) {
+      logger.error('cc-node-snapshot-panel', '❌ Failed to reset canvas', {
+        error: error instanceof Error ? error.message : 'Unknown error'
+      });
+      addToast({
+        title: 'Error',
+        description: 'Failed to reset canvas',
+        icon: 'warning-triangle',
+      });
+    }
+  }, [editor.store, addToast]);
+
+  const handleSaveSnapshot = useCallback(async () => {
+    if (isSaving) return;
+    
+    try {
+      setIsSaving(true);
+      if (!navigationContext.node?.id) {
+        logger.error('cc-node-snapshot-panel', '❌ No current node available for saving');
+        addToast({
+          title: 'Error',
+          description: 'No current node available for saving',
+          icon: 'warning-triangle',
+        });
+        return;
+      }
+
+      logger.info('cc-node-snapshot-panel', '💾 Saving snapshot', {
+        id: navigationContext.node.id,
+        type: navigationContext.node.type
+      });
+
+      const dbName = UserNeoDBService.getNodeDatabaseName(navigationContext.node);
+      await NavigationSnapshotService.saveNodeSnapshotToDatabase(navigationContext.node.id, dbName, editor.store);
+
+      addToast({
+        title: 'Snapshot saved',
+        description: 'Your snapshot has been saved successfully.',
+        icon: 'check',
+      });
+    } catch (error) {
+      logger.error('cc-node-snapshot-panel', '❌ Failed to save snapshot', {
+        error: error instanceof Error ? error.message : 'Unknown error'
+      });
+      
+      addToast({
+        title: 'Error',
+        description: error instanceof Error ? error.message : 'Failed to save snapshot',
+        icon: 'warning-triangle',
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  }, [editor, navigationContext.node, addToast, isSaving]);
+
+  const renderCurrentNode = () => {
+    if (!navigationContext.node) return null;
+
+    return (
+      <CurrentNodeSection>
+        <NodeInfoContainer>
+          <Typography variant="subtitle2" sx={{ color: 'var(--color-text-secondary)' }}>
+            Current Node
+          </Typography>
+          <Typography variant="body1" sx={{ color: 'var(--color-text)' }}>
+            {navigationContext.node.label || navigationContext.node.id}
+          </Typography>
+          <Typography variant="caption" sx={{ color: 'var(--color-text-secondary)' }}>
+            {navigationContext.node.type}
+          </Typography>
+        </NodeInfoContainer>
+        <ButtonContainer>
+          <ActionButton
+            variant="contained"
+            size="small"
+            startIcon={<SaveIcon />}
+            onClick={handleSaveSnapshot}
+            disabled={isLoading}
+            sx={{ flex: 1 }}
+          >
+            Save Snapshot
+          </ActionButton>
+          <ActionButton
+            variant="contained"
+            size="small"
+            startIcon={<ResetIcon />}
+            onClick={handleResetCanvas}
+            disabled={isLoading}
+            sx={{ flex: 1 }}
+          >
+            Reset Canvas
+          </ActionButton>
+        </ButtonContainer>
+      </CurrentNodeSection>
+    );
+  };
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {renderCurrentNode()}
+        <PageComponent />
+        
+        {error && (
+          <Typography 
+            variant="body2" 
+            sx={{ 
+              mt: 2,
+              color: 'var(--color-error)'
+            }}
+          >
+            {error}
+          </Typography>
+        )}
+        
+        {isLoading && (
+          <Typography 
+            variant="body2" 
+            sx={{ 
+              mt: 2,
+              color: 'var(--color-text-secondary)'
+            }}
+          >
+            Loading...
+          </Typography>
+        )}
+      </Box>
+    </ThemeProvider>
+  );
+};
diff --git a/src/utils/tldraw/ui-overrides/components/shared/panel-styles.ts b/src/utils/tldraw/ui-overrides/components/shared/panel-styles.ts
new file mode 100644
index 0000000..fb15ad2
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/panel-styles.ts
@@ -0,0 +1,48 @@
+export const PANEL_DIMENSIONS = {
+  'navigation': {
+    width: '300px',
+    topOffset: `0px`,
+    bottomOffset: '0px',
+  },
+  'node-snapshot': {
+    width: '300px',
+    topOffset: `0px`,
+    bottomOffset: '0px',
+  },
+  'cc-shapes': {
+    width: '300px',
+    topOffset: `0px`,
+    bottomOffset: '0px',
+  },
+  'slides': {
+    width: '300px',
+    topOffset: `0px`,
+    bottomOffset: '0px',
+  },
+  'youtube': {
+    width: '300px',
+    topOffset: `0px`,
+    bottomOffset: '0px',
+  },
+  'graph': {
+    width: '300px',
+    topOffset: `0px`,
+    bottomOffset: '0px',
+  },
+  'exam-marker': {
+    width: '300px',
+    topOffset: `0px`,
+    bottomOffset: '0px',
+  },
+  'search': {
+    width: '300px',
+    topOffset: `0px`,
+    bottomOffset: '0px',
+  },
+} as const;
+
+// Z-index constants for panel layering
+export const Z_INDICES = {
+  HANDLE: 999,
+  PANEL: 1000,
+} as const;
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/shared/panel.css b/src/utils/tldraw/ui-overrides/components/shared/panel.css
new file mode 100644
index 0000000..920ae0e
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/panel.css
@@ -0,0 +1,271 @@
+/* Base Panel Layout */
+.panel-root {
+  position: absolute;
+  left: 0;
+  background: var(--color-panel);
+  border-right: 1px solid var(--color-divider);
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-1);
+}
+
+.panel-handle {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 48px;
+  background: var(--color-panel);
+  border: 1px solid var(--color-divider);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 20px;
+  color: var(--color-text);
+  z-index: var(--layer-panels);
+  box-shadow: var(--shadow-1);
+}
+
+.panel-handle:hover {
+  background: var(--color-hover);
+}
+
+.panel-header {
+  padding: 8px;
+  border-bottom: 1px solid var(--color-divider);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.panel-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+.panel-type-select {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background: var(--color-background);
+  border: 1px solid var(--color-divider);
+  color: var(--color-text);
+  font: inherit;
+}
+
+.panel-content {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+  padding: 8px;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.panel-content::-webkit-scrollbar {
+  display: none;
+}
+
+.pin-button {
+  color: var(--color-text-2);
+}
+
+.pin-button:hover {
+  color: var(--color-text);
+}
+
+.pin-button.pinned {
+  color: var(--color-primary);
+}
+
+/* Common Panel Styles */
+.panel-container {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  height: 100%;
+  overflow-y: auto;
+  -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
+  scrollbar-width: none;     /* Hide scrollbar for Firefox */
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.panel-container::-webkit-scrollbar {
+  display: none;
+}
+
+/* Input Styles */
+.panel-input {
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid var(--color-muted-1);
+  font-size: 14px;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  width: 100%;
+  transition: border-color 0.2s ease;
+}
+
+.panel-input:focus {
+  outline: none;
+  border-color: var(--color-selected);
+}
+
+.panel-input::placeholder {
+  color: var(--color-text-2);
+}
+
+/* Button Styles */
+.shape-button {
+  padding: 8px 12px;
+  width: 100%;
+  text-align: left;
+  background-color: var(--color-panel);
+  border: 1px solid var(--color-divider);
+  border-radius: 4px;
+  color: var(--color-text);
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 0.2s ease;
+}
+
+.shape-button:hover {
+  background-color: var(--color-hover);
+}
+
+/* Section Styles */
+.panel-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.panel-section-title {
+  font-size: 14px;
+  color: var(--color-text);
+  margin-bottom: 4px;
+}
+
+.panel-divider {
+  border-top: 1px solid var(--color-divider);
+  margin: 8px 0;
+}
+
+/* Dropdown/Flyout Menu */
+.panel-dropdown {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  background-color: var(--color-panel);
+  border: 1px solid var(--color-divider);
+  border-radius: 4px;
+  padding: 4px;
+  z-index: 1000;
+  max-height: 400px;
+  overflow-y: auto;
+  width: 200px;
+}
+
+/* Slides Panel Specific */
+.slides-panel-tools {
+  flex-shrink: 0;  /* Prevent tools from shrinking */
+  display: flex;
+  justify-content: flex-start;
+  padding: 0 0 8px 0;
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.slideshow-container {
+  border: 1px solid var(--color-divider);
+  border-radius: 4px;
+  overflow: visible;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;  /* Prevent container from shrinking */
+}
+
+.slideshow-header {
+  background: var(--color-muted);
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-divider);
+}
+
+.slideshow-title {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.slideshow-title h3 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.slide-count {
+  font-size: 12px;
+  color: var(--color-text-2);
+}
+
+.slides-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.slide-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--color-divider);
+  transition: background-color 0.2s;
+  min-height: 36px;
+}
+
+.slide-item:last-child {
+  border-bottom: none;
+}
+
+.slide-number {
+  min-width: 20px;
+  font-size: 12px;
+  color: var(--color-text-2);
+}
+
+.slide-title {
+  flex: 1;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.slide-item:hover {
+  background-color: var(--color-hover);
+}
+
+.slide-item.selected {
+  background-color: var(--color-selected);
+  color: var(--color-selected-contrast);
+}
+
+/* Empty State */
+.panel-empty-state {
+  text-align: center;
+  color: var(--color-text-2);
+  padding: 16px;
+}
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/components/shared/panels/BasePanel.tsx b/src/utils/tldraw/ui-overrides/components/shared/panels/BasePanel.tsx
new file mode 100644
index 0000000..e4584c4
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/components/shared/panels/BasePanel.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Select, MenuItem, SelectChangeEvent } from '@mui/material';
+import { ViewColumn, ViewList, ViewModule, ViewQuilt, ViewStream } from '@mui/icons-material';
+import '../panel.css';  // Import the CSS file from parent directory
+
+// Add panel type icons mapping
+const PANEL_TYPE_ICONS = {
+    'default': <ViewQuilt />,
+    'list': <ViewList />,
+    'grid': <ViewModule />,
+    'column': <ViewColumn />,
+    'stream': <ViewStream />
+};
+
+interface BasePanelProps {
+    title?: string;
+    showTypeSelector?: boolean;
+    type?: keyof typeof PANEL_TYPE_ICONS;
+    handleTypeChange?: (event: SelectChangeEvent) => void;
+    children?: React.ReactNode;
+}
+
+export const BasePanel: React.FC<BasePanelProps> = ({
+    title,
+    showTypeSelector = false,
+    type = 'default',
+    handleTypeChange,
+    children
+}) => {
+    return (
+        <div className="panel-root">
+            <div className="panel-header">
+                {title && <div className="panel-section-title">{title}</div>}
+                <div className="panel-header-actions">
+                    {showTypeSelector && (
+                        <Select
+                            value={type}
+                            onChange={handleTypeChange}
+                            size="small"
+                            className="panel-type-select"
+                            sx={{
+                                '.MuiSelect-select': {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '8px',
+                                    padding: '4px 8px',
+                                },
+                                '.MuiOutlinedInput-notchedOutline': {
+                                    border: 'none'
+                                },
+                                '&:hover .MuiOutlinedInput-notchedOutline': {
+                                    border: 'none'
+                                },
+                                '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                                    border: 'none'
+                                }
+                            }}
+                        >
+                            {Object.entries(PANEL_TYPE_ICONS).map(([value, icon]) => (
+                                <MenuItem 
+                                    key={value} 
+                                    value={value}
+                                    sx={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '8px'
+                                    }}
+                                >
+                                    {icon}
+                                    {value.charAt(0).toUpperCase() + value.slice(1)}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    )}
+                </div>
+            </div>
+            <div className="panel-content">
+                {children}
+            </div>
+        </div>
+    );
+}; 
+// ... existing code ... 
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/overrides/index.ts b/src/utils/tldraw/ui-overrides/overrides/index.ts
new file mode 100644
index 0000000..7381d5f
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/overrides/index.ts
@@ -0,0 +1,15 @@
+import { TLUiOverrides } from '@tldraw/tldraw';
+import { toolsPresentationUiOverrides } from './presentation/tools';
+import { actionsPresentationUiOverrides } from './presentation/actions';
+import { toolsRegularUiOverrides } from './regular/tools';
+import { actionsRegularUiOverrides } from './regular/actions';
+
+export const regularUiOverridesIndex: TLUiOverrides = {
+    ...actionsRegularUiOverrides,
+    ...toolsRegularUiOverrides,
+};
+
+export const presentationUiOverridesIndex: TLUiOverrides = {
+    ...actionsPresentationUiOverrides,
+    ...toolsPresentationUiOverrides,
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/overrides/presentation/actions.ts b/src/utils/tldraw/ui-overrides/overrides/presentation/actions.ts
new file mode 100644
index 0000000..4b0ab89
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/overrides/presentation/actions.ts
@@ -0,0 +1,117 @@
+import { TLUiOverrides, computed, TLParentId } from '@tldraw/tldraw'
+import { 
+    moveToSlide, 
+    $currentSlideShow, 
+    getSlideShowsFromPage, 
+    moveToSlideShow 
+} from '../../../cc-base/cc-slideshow/useSlideShow'
+import { CCSlideShape } from '../../../cc-base/cc-slideshow/CCSlideShapeUtil'
+import { logger } from '../../../../../debugConfig'
+
+export const actionsPresentationUiOverrides: TLUiOverrides = {
+    actions(editor, actions) {
+        // Add debug mode toggle
+        actions['toggle-debug-mode'] = {
+            id: 'toggle-debug-mode',
+            label: 'Toggle Debug Mode',
+            kbd: 'ctrl+shift+d',
+            readonlyOk: true,
+            onSelect() {
+                editor.updateInstanceState({ isDebugMode: !editor.getInstanceState().isDebugMode })
+            },
+        }
+
+        // Navigation actions
+        actions['next-slide'] = {
+            id: 'next-slide',
+            label: 'Next slide',
+            kbd: 'right',
+            onSelect() {
+                const currentShow = $currentSlideShow.get()
+                if (!currentShow) {
+                    logger.warn('navigation', '⚠️ No current slideshow found for next-slide action')
+                    return
+                }
+
+                const nextIndex = (currentShow.props.currentSlideIndex + 1) % currentShow.props.slides.length
+                const nextSlide = editor.getShape(currentShow.props.slides[nextIndex] as TLParentId) as CCSlideShape
+                
+                if (nextSlide) {
+                    logger.info('navigation', '⌨️ Next slide shortcut (presentation)', {
+                        fromIndex: currentShow.props.currentSlideIndex,
+                        toIndex: nextIndex,
+                        slideId: nextSlide.id,
+                        slideshowId: currentShow.id,
+                        timestamp: new Date().toISOString()
+                    })
+                    // Always pass true in presentation mode
+                    moveToSlide(editor, nextSlide, true)
+                }
+            },
+        };
+
+        actions['previous-slide'] = {
+            id: 'previous-slide',
+            label: 'Previous slide',
+            kbd: 'left',
+            onSelect() {
+                const currentShow = $currentSlideShow.get()
+                if (!currentShow) {
+                    logger.warn('navigation', '⚠️ No current slideshow found for previous-slide action')
+                    return
+                }
+
+                const prevIndex = (currentShow.props.currentSlideIndex - 1 + currentShow.props.slides.length) % currentShow.props.slides.length
+                const prevSlide = editor.getShape(currentShow.props.slides[prevIndex] as TLParentId) as CCSlideShape
+                
+                if (prevSlide) {
+                    logger.info('navigation', '⌨️ Previous slide shortcut (presentation)', {
+                        fromIndex: currentShow.props.currentSlideIndex,
+                        toIndex: prevIndex,
+                        slideId: prevSlide.id,
+                        slideshowId: currentShow.id,
+                        timestamp: new Date().toISOString()
+                    })
+                    // Always pass true in presentation mode
+                    moveToSlide(editor, prevSlide, true)
+                }
+            },
+        };
+
+        const $slideshows = computed('slideshows', () => getSlideShowsFromPage(editor));
+        
+        actions['next-slideshow'] = {
+            id: 'next-slideshow',
+            label: 'Next slideshow',
+            kbd: 'ctrl+right',
+            onSelect() {
+                const slideshows = $slideshows.get();
+                const currentSlideshow = $currentSlideShow.get();
+                const index = slideshows.findIndex((show) => show.id === currentSlideshow?.id);
+                const nextSlideshow = slideshows[index + 1] ?? currentSlideshow ?? slideshows[0];
+                if (nextSlideshow) {
+                    editor.stopCameraAnimation();
+                    moveToSlideShow(editor, nextSlideshow, true);
+                }
+            },
+        };
+
+        actions['previous-slideshow'] = {
+            id: 'previous-slideshow',
+            label: 'Previous slideshow',
+            kbd: 'ctrl+left',
+            onSelect() {
+                const slideshows = $slideshows.get();
+                const currentSlideshow = $currentSlideShow.get();
+                const index = slideshows.findIndex((show) => show.id === currentSlideshow?.id);
+                const previousSlideshow = slideshows[index - 1] ?? currentSlideshow ?? slideshows[slideshows.length - 1];
+                if (previousSlideshow) {
+                    editor.stopCameraAnimation();
+                    moveToSlideShow(editor, previousSlideshow, true);
+                }
+            },
+        };
+
+        return actions;
+    }
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/overrides/presentation/tools.ts b/src/utils/tldraw/ui-overrides/overrides/presentation/tools.ts
new file mode 100644
index 0000000..0d1c358
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/overrides/presentation/tools.ts
@@ -0,0 +1,53 @@
+import { TLUiOverrides } from '@tldraw/tldraw'
+
+export const toolsPresentationUiOverrides: TLUiOverrides = {
+tools(editor, tools) {
+    const commonTools = {
+        microphone: {
+        id: 'microphone',
+        icon: 'microphone',
+        label: 'Microphone',
+        kbd: 'm',
+        onSelect: () => editor.setCurrentTool('microphone'),
+        },
+        slide: {
+        id: 'cc-slide',
+        icon: 'group',
+        label: 'Slide',
+        kbd: 's',
+        onSelect: () => editor.setCurrentTool('cc-slide'),
+        },
+    }
+
+    const stickerTools = {
+        heartSticker: {
+        id: 'heartSticker',
+        icon: '❤️',
+        label: 'Heart Sticker',
+        kbd: 'h',
+        onSelect: () => editor.setCurrentTool('heartSticker'),
+        },
+        starSticker: {
+        id: 'starSticker',
+        icon: '⭐',
+        label: 'Star Sticker',
+        kbd: 't',
+        onSelect: () => editor.setCurrentTool('starSticker'),
+        },
+        smileySticker: {
+        id: 'smileySticker',
+        icon: '😊',
+        label: 'Smiley Sticker',
+        kbd: 'y',
+        onSelect: () => editor.setCurrentTool('smileySticker'),
+        },
+    }
+
+    return {
+        ...tools,
+        ...commonTools,
+        ...stickerTools,
+    }
+    },
+}
+
diff --git a/src/utils/tldraw/ui-overrides/overrides/regular/actions.ts b/src/utils/tldraw/ui-overrides/overrides/regular/actions.ts
new file mode 100644
index 0000000..c58d898
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/overrides/regular/actions.ts
@@ -0,0 +1,115 @@
+import { TLUiOverrides, computed, TLParentId } from '@tldraw/tldraw'
+import { 
+    moveToSlide, 
+    $currentSlideShow, 
+    getSlideShowsFromPage, 
+    moveToSlideShow 
+} from '../../../cc-base/cc-slideshow/useSlideShow'
+import { CCSlideShape } from '../../../cc-base/cc-slideshow/CCSlideShapeUtil'
+import { logger } from '../../../../../debugConfig'
+
+export const actionsRegularUiOverrides: TLUiOverrides = {
+    actions(editor, actions) {
+        // Add debug mode toggle
+        actions['toggle-debug-mode'] = {
+            id: 'toggle-debug-mode',
+            label: 'Toggle Debug Mode',
+            kbd: 'ctrl+shift+d',
+            readonlyOk: true,
+            onSelect() {
+                editor.updateInstanceState({ isDebugMode: !editor.getInstanceState().isDebugMode })
+            },
+        }
+
+        // Navigation actions
+        actions['next-slide'] = {
+            id: 'next-slide',
+            label: 'Next slide',
+            kbd: 'right',
+            onSelect() {
+                const currentShow = $currentSlideShow.get()
+                if (!currentShow) {
+                    logger.warn('navigation', '⚠️ No current slideshow found for next-slide action')
+                    return
+                }
+
+                const nextIndex = (currentShow.props.currentSlideIndex + 1) % currentShow.props.slides.length
+                const nextSlide = editor.getShape(currentShow.props.slides[nextIndex] as TLParentId) as CCSlideShape
+                
+                if (nextSlide) {
+                    logger.info('navigation', '⌨️ Next slide shortcut (regular)', {
+                        fromIndex: currentShow.props.currentSlideIndex,
+                        toIndex: nextIndex,
+                        slideId: nextSlide.id,
+                        slideshowId: currentShow.id,
+                        timestamp: new Date().toISOString()
+                    })
+                    moveToSlide(editor, nextSlide, false)
+                }
+            },
+        };
+
+        actions['previous-slide'] = {
+            id: 'previous-slide',
+            label: 'Previous slide',
+            kbd: 'left',
+            onSelect() {
+                const currentShow = $currentSlideShow.get()
+                if (!currentShow) {
+                    logger.warn('navigation', '⚠️ No current slideshow found for previous-slide action')
+                    return
+                }
+
+                const prevIndex = (currentShow.props.currentSlideIndex - 1 + currentShow.props.slides.length) % currentShow.props.slides.length
+                const prevSlide = editor.getShape(currentShow.props.slides[prevIndex] as TLParentId) as CCSlideShape
+                
+                if (prevSlide) {
+                    logger.info('navigation', '⌨️ Previous slide shortcut (regular)', {
+                        fromIndex: currentShow.props.currentSlideIndex,
+                        toIndex: prevIndex,
+                        slideId: prevSlide.id,
+                        slideshowId: currentShow.id,
+                        timestamp: new Date().toISOString()
+                    })
+                    moveToSlide(editor, prevSlide, false)
+                }
+            },
+        };
+
+        const $slideshows = computed('slideshows', () => getSlideShowsFromPage(editor));
+        
+        actions['next-slideshow'] = {
+            id: 'next-slideshow',
+            label: 'Next slideshow',
+            kbd: 'ctrl+right',
+            onSelect() {
+                const slideshows = $slideshows.get();
+                const currentSlideshow = $currentSlideShow.get();
+                const index = slideshows.findIndex((show) => show.id === currentSlideshow?.id);
+                const nextSlideshow = slideshows[index + 1] ?? currentSlideshow ?? slideshows[0];
+                if (nextSlideshow) {
+                    editor.stopCameraAnimation();
+                    moveToSlideShow(editor, nextSlideshow, false);
+                }
+            },
+        };
+
+        actions['previous-slideshow'] = {
+            id: 'previous-slideshow',
+            label: 'Previous slideshow',
+            kbd: 'ctrl+left',
+            onSelect() {
+                const slideshows = $slideshows.get();
+                const currentSlideshow = $currentSlideShow.get();
+                const index = slideshows.findIndex((show) => show.id === currentSlideshow?.id);
+                const previousSlideshow = slideshows[index - 1] ?? currentSlideshow ?? slideshows[slideshows.length - 1];
+                if (previousSlideshow) {
+                    editor.stopCameraAnimation();
+                    moveToSlideShow(editor, previousSlideshow, false);
+                }
+            },
+        };
+
+        return actions;
+    }
+};
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/overrides/regular/tools.ts b/src/utils/tldraw/ui-overrides/overrides/regular/tools.ts
new file mode 100644
index 0000000..dcb95ed
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/overrides/regular/tools.ts
@@ -0,0 +1,52 @@
+import { TLUiOverrides } from '@tldraw/tldraw'
+
+export const toolsRegularUiOverrides: TLUiOverrides = {
+  tools(editor, tools) {
+    const commonTools = {
+      microphone: {
+        id: 'microphone',
+        icon: 'microphone',
+        label: 'Microphone',
+        kbd: 'm',
+        onSelect: () => editor.setCurrentTool('microphone'),
+      },
+      slide: {
+        id: 'cc-slide',
+        icon: 'group',
+        label: 'Slide',
+        kbd: 's',
+        onSelect: () => editor.setCurrentTool('cc-slide'),
+      },
+    }
+
+    const stickerTools = {
+      heartSticker: {
+        id: 'heartSticker',
+        icon: '❤️',
+        label: 'Heart Sticker',
+        kbd: 'h',
+        onSelect: () => editor.setCurrentTool('heartSticker'),
+      },
+      starSticker: {
+        id: 'starSticker',
+        icon: '⭐',
+        label: 'Star Sticker',
+        kbd: 't',
+        onSelect: () => editor.setCurrentTool('starSticker'),
+      },
+      smileySticker: {
+        id: 'smileySticker',
+        icon: '😊',
+        label: 'Smiley Sticker',
+        kbd: 'y',
+        onSelect: () => editor.setCurrentTool('smileySticker'),
+      },
+    }
+
+    return {
+      ...tools,
+      ...commonTools,
+      ...stickerTools,
+    }
+  },
+}
\ No newline at end of file
diff --git a/src/utils/tldraw/ui-overrides/toolbars/snapshotToolbar.tsx b/src/utils/tldraw/ui-overrides/toolbars/snapshotToolbar.tsx
new file mode 100644
index 0000000..9e9c8c7
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/toolbars/snapshotToolbar.tsx
@@ -0,0 +1,27 @@
+import { useCallback, ReactNode } from 'react';
+import { useEditor, loadSnapshot, useToasts } from '@tldraw/tldraw';
+import { blankCanvasSnapshot } from '../../../tldraw/assets';
+
+export function SnapshotToolbar({ 
+    children
+}: { 
+    children: (props: { resetToBlankCanvas: () => void }) => ReactNode
+}) {
+    const editor = useEditor();
+    const { addToast } = useToasts();
+
+    const resetToBlankCanvas = useCallback(() => {
+        loadSnapshot(editor.store, blankCanvasSnapshot);
+        addToast({
+            title: 'Canvas reset',
+            description: 'The canvas has been reset to blank.',
+            icon: 'reset-zoom',
+        });
+    }, [editor, addToast]);
+
+    return (
+        <div style={{ display: 'flex', gap: '8px' }}>
+            {children({ resetToBlankCanvas })}
+        </div>
+    );
+}
diff --git a/src/utils/tldraw/ui-overrides/toolbars/toolsToolbar.tsx b/src/utils/tldraw/ui-overrides/toolbars/toolsToolbar.tsx
new file mode 100644
index 0000000..5a06975
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/toolbars/toolsToolbar.tsx
@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+import { useEditor } from '@tldraw/tldraw'
+import { useNeoUser } from '../../../../contexts/NeoUserContext'
+import { graphState } from '../../../../utils/tldraw/cc-base/cc-graph/graphStateUtil';
+import { AllNodeShapes } from '../../../../utils/tldraw/cc-base/cc-graph/cc-graph-shapes';
+import { createUserNodeFromProfile } from '../../../../utils/tldraw/cc-base/shape-helpers/graph-helpers';
+
+export function ToolsToolbar({ children }: { children: (props: { 
+  handlePutUserNode: () => void,
+  handleAddCalendar: () => void
+}) => ReactNode }) {
+    const editor = useEditor();
+    const { userNode } = useNeoUser()
+
+    const handlePutUserNode = () => {
+        if (!userNode) {
+            console.error("User node is not available");
+            return;
+        }
+        const existingNode = graphState.getNode(userNode.unique_id);
+        if (!existingNode) {
+            console.log("Adding user node to graphState:", userNode);
+            const centerX = editor.getViewportScreenCenter().x
+            const centerY = editor.getViewportScreenCenter().y
+
+            // Create the user node using the helper function
+            const newShapeId = createUserNodeFromProfile(
+                editor,
+                userNode,
+                centerX,
+                centerY
+            );
+
+            if (newShapeId) {
+                // Get the shape's bounds
+                const {bounds} = editor.getShapeGeometry(newShapeId);
+                console.log("Getting bounds for user shape:", newShapeId);
+                console.log("Updating shape with width:", bounds.w, "and height:", bounds.h);
+
+                // Get the created shape
+                const shape = editor.getShape(newShapeId);
+                if (shape) {
+                    // Add to graphState with the correct dimensions
+                    graphState.addNode({
+                        ...shape,
+                        props: {
+                            ...shape.props,
+                            w: bounds.w,
+                            h: bounds.h
+                        }
+                    } as AllNodeShapes);
+                    graphState.setEditor(editor);
+                    graphState.updateShapesWithDagre();
+                }
+            }
+        } else {
+            console.log(`Node with id ${userNode.unique_id} already exists on the canvas.`);
+        }
+    };
+
+    const handleAddCalendar = () => {
+        editor.setCurrentTool('calendar');
+    };
+
+    return (
+        <div style={{ display: 'flex', gap: '8px' }}>
+            {children({ handlePutUserNode, handleAddCalendar })}
+        </div>
+    );
+}
diff --git a/src/utils/tldraw/ui-overrides/toolbars/userToolbar.tsx b/src/utils/tldraw/ui-overrides/toolbars/userToolbar.tsx
new file mode 100644
index 0000000..1c1370d
--- /dev/null
+++ b/src/utils/tldraw/ui-overrides/toolbars/userToolbar.tsx
@@ -0,0 +1,30 @@
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../../../contexts/AuthContext';
+import { ReactNode } from 'react';
+import { logger } from '../../../../debugConfig';
+
+export function UserToolbar({ children }: { children: (props: { handleLogout: () => Promise<void>, handleNavUserHome: () => void }) => ReactNode }) {
+    const { signOut } = useAuth();
+    const navigate = useNavigate();
+
+    const handleLogout = async () => {
+        try {
+            await signOut();
+            logger.info('user-toolbar', '🚪 User logged out, navigating to home');
+            navigate('/');
+        } catch (error) {
+            logger.error('user-toolbar', '❌ Logout failed:', error);
+        }
+    };
+
+    const handleNavUserHome = () => {
+        logger.info('user-toolbar', '🏠 Navigating to single player page');
+        navigate('/single-player');
+    }
+
+    return (
+        <div style={{ display: 'flex', gap: '8px' }}>
+            {children({ handleLogout, handleNavUserHome })}
+        </div>
+    );
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..df32e38
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,42 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  // App Information
+  readonly VITE_APP_NAME: string
+  readonly VITE_APP_VERSION: string
+  readonly VITE_APP_DESCRIPTION: string
+  readonly VITE_APP_AUTHOR: string
+
+  // Super Admin Email
+  readonly VITE_SUPER_ADMIN_EMAIL: string
+
+  // Supabase
+  readonly VITE_SUPABASE_PUBLIC_URL: string
+  readonly VITE_SUPABASE_URL: string
+  readonly VITE_SUPABASE_REDIRECT_URL: string
+  readonly VITE_SUPABASE_ANON_KEY: string
+
+  // Site URL
+  readonly VITE_FRONTEND_SITE_URL: string
+
+  // Firebase Settings
+  readonly VITE_REACT_APP_API_KEY: string
+  readonly VITE_REACT_APP_AUTH_DOMAIN: string
+  readonly VITE_REACT_APP_PROJECT_ID: string
+  readonly VITE_REACT_APP_STORAGE_BUCKET: string
+  readonly VITE_REACT_APP_MESSAGING_SENDER_ID: string
+  readonly VITE_REACT_APP_APP_ID: string
+
+  // Supabase Settings
+
+  // Microsoft API Settings
+  readonly VITE_MICROSOFT_CLIENT_ID: string
+  readonly VITE_MICROSOFT_CLIENT_SECRET_DESC: string
+  readonly VITE_MICROSOFT_CLIENT_SECRET_ID: string
+  readonly VITE_MICROSOFT_CLIENT_SECRET: string
+  readonly VITE_MICROSOFT_TENANT_ID: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..b778c3c
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+	],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a482c51
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable", "WebWorker"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "typeRoots": ["./node_modules/@types"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "ts-node": {
+    "esm": true,
+    "experimentalSpecifierResolution": "node"
+  },
+  "include": [
+    "src",
+    ".eslintrc.cjs",
+    "./src/setupTests.ts",
+    "eslint.config.js",
+    "src/debugConfig.ts",
+    "../.backup/EmailLoginForm.tsx",
+    "../.backup/EmailSignupForm.tsx"
+  ],
+  "exclude": ["node_modules"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
+
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..99a8e45
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "node"],
+    "esModuleInterop": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..aba7125
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,176 @@
+/// <reference types="vitest" />
+/// <reference types="vite/client" />
+
+import { defineConfig, loadEnv, UserConfig, ConfigEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import process from 'node:process';
+import { VitePWA } from 'vite-plugin-pwa';
+
+export default defineConfig(async ({ mode }: ConfigEnv): Promise<UserConfig> => {
+  // Load env file based on mode in correct order
+  const env = loadEnv(mode, process.cwd(), 'VITE_');
+  
+  // Determine base URL from hostname
+  const base = '/';  // Always use root path, let nginx handle the routing
+  
+  // Determine if we're in production based on mode and VITE_DEV flag
+  const isProd = mode === 'production' && env.VITE_DEV !== 'true';
+
+  return {
+    plugins: [
+      react(),
+      VitePWA({
+        strategies: 'injectManifest',
+        srcDir: 'src',
+        filename: 'sw.ts',
+        registerType: 'prompt',
+        injectRegister: 'auto',
+        devOptions: {
+          enabled: false,
+          type: 'module'
+        },
+        manifest: {
+          name: 'ClassroomCopilot',
+          short_name: 'CC',
+          start_url: base,
+          scope: base,
+          display: 'fullscreen',
+          background_color: '#ffffff',
+          theme_color: '#000000',
+          icons: [
+            {
+              src: '/icons/icon-192x192.png',
+              sizes: '192x192',
+              type: 'image/png',
+              purpose: 'any'
+            },
+            {
+              src: '/icons/icon-512x512.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'any'
+            },
+            {
+              src: '/icons/icon-192x192-maskable.png',
+              sizes: '192x192',
+              type: 'image/png',
+              purpose: 'maskable'
+            },
+            {
+              src: '/icons/icon-512x512-maskable.png',
+              sizes: '512x512',
+              type: 'image/png',
+              purpose: 'maskable'
+            }
+          ]
+        },
+        includeAssets: ['favicon.ico', 'icons/*.png'],
+        injectManifest: {
+          globPatterns: [
+            'index.html',
+            '**/*.{js,css,html,ico,png,svg,json}',
+            'manifest.webmanifest'
+          ],
+          maximumFileSizeToCacheInBytes: 8 * 1024 * 1024, // 8MB
+          dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
+          // Exclude development resources and source files
+          globIgnores: [
+            '**/node_modules/**/*',
+            'sw.js',
+            'workbox-*.js',
+            '**/*.map',
+            '**/vite/**/*',
+            '**/@vite/**/*',
+            '**/@react-refresh/**/*'
+          ],
+          // Ensure service worker has correct scope
+          swDest: 'dist/sw.js',
+          manifestTransforms: [
+            // Transform manifest entries to ensure proper caching
+            (entries) => ({
+              manifest: entries.map(entry => ({
+                ...entry,
+                url: entry.url.startsWith(base) ? entry.url : `${base}${entry.url.startsWith('/') ? entry.url.slice(1) : entry.url}`
+              }))
+            })
+          ]
+        }
+      })
+    ],
+    define: {
+      // Make env variables available globally
+      'process.env': env,
+      // Ensure import.meta.env has our variables
+      'import.meta.env.VITE_APP_NAME': JSON.stringify(env.VITE_APP_NAME),
+      'import.meta.env.VITE_FRONTEND_SITE_URL': JSON.stringify(env.VITE_FRONTEND_SITE_URL),
+      'import.meta.env.VITE_SUPABASE_URL': JSON.stringify(env.VITE_SUPABASE_URL),
+      'import.meta.env.VITE_SUPABASE_ANON_KEY': JSON.stringify(env.VITE_SUPABASE_ANON_KEY),
+      'import.meta.env.VITE_SUPER_ADMIN_EMAIL': JSON.stringify(env.VITE_SUPER_ADMIN_EMAIL),
+      'import.meta.env.VITE_DEV': env.VITE_DEV === 'true',
+      'import.meta.env.VITE_STRICT_MODE': env.VITE_STRICT_MODE === 'true',
+    },
+    envPrefix: 'VITE_',
+    base,
+    server: {
+      host: '0.0.0.0',
+      port: parseInt(env.PORT_FRONTEND || '3000'),
+      watch: {
+        usePolling: env.VITE_DEV === 'true',
+        ignored: ['**/node_modules/**', '**/dist/**']
+      },
+      allowedHosts: [
+        `app.${env.APP_URL}`,
+      ],
+      hmr: isProd ? false : {
+        protocol: env.APP_PROTOCOL === 'https' ? 'wss' : 'ws',
+        host: env.APP_URL,
+        port: parseInt(env.PORT_FRONTEND || '3000'),
+        clientPort: parseInt(env.PORT_FRONTEND || '3000'),
+        overlay: false
+      }
+    },
+    clearScreen: false,
+    optimizeDeps: {
+      force: true,
+      include: ['react', 'react-dom', '@mui/material', '@tldraw/tldraw']
+    },
+    build: {
+      sourcemap: !isProd,
+      manifest: true,
+      minify: isProd ? 'terser' : false,
+      terserOptions: isProd ? {
+        compress: {
+          drop_debugger: true
+        }
+      } : undefined,
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+            'vendor-mui': ['@mui/material', '@mui/icons-material'],
+            'vendor-tldraw': ['@tldraw/tldraw', '@tldraw/store', '@tldraw/tlschema'],
+            'vendor-utils': ['axios', 'zustand', '@supabase/supabase-js']
+          },
+          // Ensure chunk filenames include content hash
+          chunkFileNames: isProd ? 'assets/[name].[hash].js' : 'assets/[name].js',
+          assetFileNames: isProd ? 'assets/[name].[hash][extname]' : 'assets/[name][extname]'
+        },
+        // Externalize dependencies that shouldn't be bundled
+        external: isProd ? [] : [/^@vite/, /^@react-refresh/]
+      },
+      chunkSizeWarningLimit: 2000,
+      // Enable module concatenation for better minification
+      target: 'esnext',
+      cssCodeSplit: true,
+      assetsInlineLimit: 4096, // 4kb
+      modulePreload: true,
+      reportCompressedSize: !isProd
+    },
+    // Add esbuild optimization
+    esbuild: {
+      drop: isProd ? ['debugger'] : [],
+      legalComments: 'none',
+      target: ['esnext']
+    }
+  };
+});