diff --git a/package.json b/package.json
index 371914c..1614471 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"deploy": "wrangler pages deploy dist --project-name cffyin",
+		"deploy": "wrangler pages deploy dist --project-name cffyin --branch main --commit-dirty=true",
+		"preview": "wrangler pages deploy dist --project-name cffyin --branch master --commit-dirty=true",
 		"dev": "wrangler pages dev dist",
 		"start": "wrangler pages dev dist",
 		"cf-typegen": "wrangler types",
diff --git a/scripts/build.js b/scripts/build.js
index ca78784..dc00306 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -48,10 +48,61 @@ function processHtml(filePath, outPath) {
         content = NAV_TEMPLATE + content;
     }
 
+    // Inject Apps Grid if placeholder exists
+    if (content.includes('<!-- APPS_GRID -->')) {
+        const appsGridHtml = generateAppsGridHtml();
+        content = content.replace('<!-- APPS_GRID -->', appsGridHtml);
+    }
+
     fs.writeFileSync(outPath, content);
     console.log(`Processed ${filePath} -> ${outPath}`);
 }
 
+function generateAppsGridHtml() {
+    if (!fs.existsSync(APPS_DIR)) return '';
+
+    const apps = fs.readdirSync(APPS_DIR).filter(item => {
+        const itemPath = path.join(APPS_DIR, item);
+        return !item.startsWith('.') && fs.statSync(itemPath).isDirectory();
+    });
+
+    return apps.map(app => {
+        const metadataPath = path.join(APPS_DIR, app, 'metadata.json');
+        let metadata = {
+            title: app,
+            description: 'A cool app.',
+            emoji: '📱',
+            color: 'gray',
+            path: `/${app}/`
+        };
+
+        if (fs.existsSync(metadataPath)) {
+            try {
+                const data = JSON.parse(fs.readFileSync(metadataPath, 'utf-8'));
+                metadata = { ...metadata, ...data };
+            } catch (e) {
+                console.error(`Error reading metadata for ${app}:`, e);
+            }
+        }
+
+        return `
+        <div class="group">
+            <a href="${metadata.path}" class="block bg-${metadata.color}-400 border-4 border-${metadata.color}-600 shadow-lg p-6 space-y-4 transition-all duration-300 transform rotate-1 group-hover:rotate-0 group-hover:scale-105">
+                <div class="text-center">
+                    <div class="text-6xl mb-3">${metadata.emoji}</div>
+                    <h4 class="font-impact text-3xl font-black text-gray-900 mb-2">${metadata.title}</h4>
+                    <p class="text-gray-800 font-bold text-lg">${metadata.description}</p>
+                </div>
+                <div class="flex justify-center">
+                    <div class="px-4 py-2 text-sm font-black border-2 bg-green-400 border-green-700 text-green-900">ONLINE</div>
+                </div>
+            </a>
+        </div>
+        `;
+    }).join('\n');
+}
+
+
 function buildLanding() {
     const landingSrc = path.join(SRC_DIR, 'landing', 'index.html');
     const landingDist = path.join(DIST_DIR, 'index.html');
diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100755
index 0000000..3d8319d
Binary files /dev/null and b/src/.DS_Store differ
diff --git a/src/apps/.gitignore b/src/apps/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/src/apps/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/src/apps/bridge-builder-math/metadata.json b/src/apps/bridge-builder-math/metadata.json
index a563be8..9e3e5a3 100644
--- a/src/apps/bridge-builder-math/metadata.json
+++ b/src/apps/bridge-builder-math/metadata.json
@@ -1,5 +1,7 @@
 {
-  "name": "Bridge Builder Math",
-  "description": "An educational math game where players solve addition and subtraction problems to build a bridge for a character to cross a canyon.",
-  "requestFramePermissions": []
-}
\ No newline at end of file
+  "title": "Bridge Builder",
+  "description": "Construct bridges using the power of math!",
+  "emoji": "🌉",
+  "color": "purple",
+  "path": "/bridge-builder-math/"
+}
diff --git a/src/apps/bridge-builder-math/vite.config.ts b/src/apps/bridge-builder-math/vite.config.ts
index ee5fb8d..950e2e2 100644
--- a/src/apps/bridge-builder-math/vite.config.ts
+++ b/src/apps/bridge-builder-math/vite.config.ts
@@ -5,6 +5,7 @@ import react from '@vitejs/plugin-react';
 export default defineConfig(({ mode }) => {
     const env = loadEnv(mode, '.', '');
     return {
+      base: './',
       server: {
         port: 3000,
         host: '0.0.0.0',
diff --git a/src/apps/components/Button.tsx b/src/apps/components/Button.tsx
deleted file mode 100644
index a31fe38..0000000
--- a/src/apps/components/Button.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'danger';
-  size?: 'sm' | 'md' | 'lg';
-}
-
-export const Button: React.FC<ButtonProps> = ({ 
-  children, 
-  variant = 'primary', 
-  size = 'md', 
-  className = '', 
-  ...props 
-}) => {
-  const baseStyles = "font-bold rounded-xl shadow-[0_4px_0_0_rgba(0,0,0,0.2)] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center";
-  
-  const variants = {
-    primary: "bg-green-500 text-white hover:bg-green-400 border-2 border-green-600",
-    secondary: "bg-sky-500 text-white hover:bg-sky-400 border-2 border-sky-600",
-    danger: "bg-red-500 text-white hover:bg-red-400 border-2 border-red-600",
-  };
-
-  const sizes = {
-    sm: "px-4 py-2 text-sm",
-    md: "px-6 py-3 text-lg",
-    lg: "px-8 py-4 text-xl",
-  };
-
-  return (
-    <button 
-      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-};
diff --git a/src/apps/components/Confetti.tsx b/src/apps/components/Confetti.tsx
deleted file mode 100644
index ee5c160..0000000
--- a/src/apps/components/Confetti.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { COLORS } from '../constants';
-
-export const Confetti: React.FC = () => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    // Set dimensions
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-
-    const particles: any[] = [];
-    // Bright celebratory colors
-    const colors = [COLORS.grass, COLORS.bridge, COLORS.character, '#ef4444', '#3b82f6', '#8b5cf6', '#ec4899'];
-
-    // Create particles
-    for (let i = 0; i < 200; i++) {
-      particles.push({
-        x: canvas.width / 2,
-        y: canvas.height * 0.3,
-        vx: (Math.random() - 0.5) * 25,
-        vy: (Math.random() - 0.5) * 25 - 5,
-        size: Math.random() * 8 + 4,
-        color: colors[Math.floor(Math.random() * colors.length)],
-        rotation: Math.random() * 360,
-        rotationSpeed: (Math.random() - 0.5) * 15,
-        gravity: 0.6,
-        drag: 0.95
-      });
-    }
-
-    let animationId: number;
-    const animate = () => {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      
-      let activeParticles = 0;
-      particles.forEach((p) => {
-        if (p.y < canvas.height + 20) {
-            activeParticles++;
-            p.x += p.vx;
-            p.y += p.vy;
-            p.vy += p.gravity;
-            p.vx *= p.drag;
-            p.y *= 1.0; 
-            p.rotation += p.rotationSpeed;
-
-            ctx.save();
-            ctx.translate(p.x, p.y);
-            ctx.rotate((p.rotation * Math.PI) / 180);
-            ctx.fillStyle = p.color;
-            ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
-            ctx.restore();
-        }
-      });
-
-      if (activeParticles > 0) {
-        animationId = requestAnimationFrame(animate);
-      }
-    };
-
-    animate();
-
-    return () => cancelAnimationFrame(animationId);
-  }, []);
-
-  return <canvas ref={canvasRef} className="fixed inset-0 pointer-events-none z-50" />;
-};
\ No newline at end of file
diff --git a/src/apps/components/ControlPanel.tsx b/src/apps/components/ControlPanel.tsx
deleted file mode 100644
index 732d17d..0000000
--- a/src/apps/components/ControlPanel.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Problem, GameStatus } from '../types';
-import { Delete, ArrowRight } from 'lucide-react';
-
-interface ControlPanelProps {
-  problem: Problem | null;
-  status: GameStatus;
-  onAnswer: (answer: number) => void;
-}
-
-export const ControlPanel: React.FC<ControlPanelProps> = ({ problem, status, onAnswer }) => {
-  const [input, setInput] = useState('');
-
-  // Clear input when problem changes
-  useEffect(() => {
-    setInput('');
-  }, [problem?.id]);
-
-  const handleNumClick = (num: number) => {
-    if (input.length < 3) { // Max 3 digits (answer < 200 usually)
-      setInput(prev => prev + num.toString());
-    }
-  };
-
-  const handleDelete = () => {
-    setInput(prev => prev.slice(0, -1));
-  };
-
-  const handleSubmit = (e?: React.FormEvent) => {
-    e?.preventDefault();
-    if (input === '') return;
-    onAnswer(parseInt(input, 10));
-  };
-
-  if (status !== GameStatus.PLAYING || !problem) {
-    return <div className="h-full bg-slate-100 rounded-t-xl animate-pulse"></div>;
-  }
-
-  // Button style helper
-  const btnClass = "bg-slate-100 hover:bg-slate-200 active:bg-slate-300 text-slate-700 font-bold text-2xl md:text-3xl rounded-lg shadow-sm border-b-4 border-slate-300 active:border-b-0 active:translate-y-1 transition-all h-full flex items-center justify-center touch-manipulation select-none";
-
-  return (
-    <div className="flex flex-col md:flex-row h-full w-full bg-white rounded-t-2xl shadow-2xl p-2 md:p-4 gap-2 md:gap-4">
-      {/* Question Display - Smaller on mobile */}
-      <div className="flex-[0.3] md:flex-1 flex flex-col items-center justify-center bg-amber-50 rounded-xl border-4 border-amber-200 p-2 md:p-4 min-h-[60px]">
-        <div className="text-xs md:text-sm text-amber-800 font-bold uppercase tracking-wider mb-1 hidden md:block">Build Segment</div>
-        <div className="flex items-center gap-2 md:gap-4 text-4xl md:text-6xl font-black text-slate-800">
-          <span>{problem.a}</span>
-          <span className="text-amber-600">{problem.operator}</span>
-          <span>{problem.b}</span>
-          <span>=</span>
-          <span className="text-blue-600 border-b-4 border-dashed border-blue-300 min-w-[1.5em] text-center">
-            {input || '?'}
-          </span>
-        </div>
-      </div>
-
-      {/* Numpad - Takes more space on mobile */}
-      <div className="flex-[0.7] md:flex-1 max-w-md mx-auto w-full h-full">
-        <form onSubmit={handleSubmit} className="grid grid-cols-3 gap-2 h-full">
-          {/* Row 1: 1, 2, 3 */}
-          {[1, 2, 3].map((num) => (
-            <button key={num} type="button" onClick={() => handleNumClick(num)} className={btnClass}>
-              {num}
-            </button>
-          ))}
-          
-          {/* Row 2: 4, 5, 6 */}
-          {[4, 5, 6].map((num) => (
-            <button key={num} type="button" onClick={() => handleNumClick(num)} className={btnClass}>
-              {num}
-            </button>
-          ))}
-
-          {/* Row 3: 7, 8, 9 */}
-          {[7, 8, 9].map((num) => (
-            <button key={num} type="button" onClick={() => handleNumClick(num)} className={btnClass}>
-              {num}
-            </button>
-          ))}
-
-          {/* Row 4: Del, 0, Enter */}
-          <button
-            type="button"
-            onClick={handleDelete}
-            className="bg-red-100 hover:bg-red-200 text-red-600 font-bold rounded-lg shadow-sm border-b-4 border-red-200 active:border-b-0 active:translate-y-1 transition-all h-full flex items-center justify-center touch-manipulation select-none"
-          >
-            <Delete />
-          </button>
-          
-          <button type="button" onClick={() => handleNumClick(0)} className={btnClass}>
-            0
-          </button>
-          
-          <button
-            type="submit"
-            className="bg-green-500 hover:bg-green-400 text-white font-bold rounded-lg shadow-sm border-b-4 border-green-600 active:border-b-0 active:translate-y-1 transition-all h-full flex items-center justify-center touch-manipulation select-none"
-          >
-            <ArrowRight size={32} />
-          </button>
-        </form>
-      </div>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/apps/components/GameScene.tsx b/src/apps/components/GameScene.tsx
deleted file mode 100644
index e509a7a..0000000
--- a/src/apps/components/GameScene.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import React from 'react';
-import { GameState } from '../types';
-import { GAME_CONFIG, COLORS } from '../constants';
-import { HardHat, Mountain } from 'lucide-react';
-
-interface GameSceneProps {
-  gameState: GameState;
-}
-
-export const GameScene: React.FC<GameSceneProps> = ({ gameState }) => {
-  const { characterX, bridgeEndX } = gameState;
-  
-  // Calculate view offset to keep character somewhat centered but moving right
-  // We want the character to be at roughly 30% of the screen width initially
-  // As character moves, we scroll the 'camera'
-  const viewOffset = Math.max(0, characterX - GAME_CONFIG.CANVAS_WIDTH * 0.3);
-
-  return (
-    <div className="w-full h-full relative overflow-hidden bg-sky-200 border-b-8 border-sky-800/20 shadow-inner rounded-xl">
-      {/* Background Decor */}
-      <div className="absolute top-10 left-10 opacity-50 text-white">
-        <Mountain size={64} />
-      </div>
-      <div className="absolute top-20 right-20 opacity-50 text-white">
-        <Mountain size={96} />
-      </div>
-      
-      {/* Game World Container with transform for scrolling */}
-      <div 
-        className="absolute inset-0 will-change-transform"
-        style={{ 
-          transform: `translateX(-${viewOffset}px)`,
-          transition: 'transform 0.1s linear'
-        }}
-      >
-        {/* Ground (Starting Platform) */}
-        <div 
-          className="absolute border-r-4 border-amber-900"
-          style={{
-            left: 0,
-            top: GAME_CONFIG.BRIDGE_Y,
-            width: GAME_CONFIG.GAP_START,
-            height: '200vh', // Extend deep to cover tall screens (foldables)
-            backgroundColor: COLORS.grass,
-            backgroundImage: `linear-gradient(135deg, ${COLORS.grass} 25%, transparent 25%), linear-gradient(225deg, ${COLORS.grass} 25%, transparent 25%), linear-gradient(45deg, ${COLORS.grass} 25%, transparent 25%), linear-gradient(315deg, ${COLORS.grass} 25%, ${COLORS.dirt} 25%)`,
-            backgroundPosition: '10px 0, 10px 0, 0 0, 0 0',
-            backgroundSize: '20px 20px',
-            backgroundRepeat: 'repeat'
-          }}
-        />
-
-        {/* The Abyss (Visual only, behind bridge) */}
-        <div 
-          className="absolute w-[9999px]"
-          style={{
-            left: GAME_CONFIG.GAP_START,
-            top: GAME_CONFIG.BRIDGE_Y,
-            height: '200vh', // Extend deep
-            backgroundColor: 'transparent',
-          }}
-        />
-
-        {/* Bridge Segments */}
-        <div 
-          className="absolute h-4 shadow-lg border-y-2 border-amber-900"
-          style={{
-            left: GAME_CONFIG.GAP_START,
-            top: GAME_CONFIG.BRIDGE_Y,
-            width: Math.max(0, bridgeEndX - GAME_CONFIG.GAP_START),
-            backgroundColor: COLORS.bridge,
-            backgroundImage: `repeating-linear-gradient(90deg, transparent, transparent 18px, ${COLORS.bridgeDark} 18px, ${COLORS.bridgeDark} 20px)`,
-          }}
-        />
-
-        {/* Character */}
-        <div 
-          className="absolute transition-transform duration-75 flex flex-col items-center justify-center"
-          style={{
-            left: characterX,
-            top: GAME_CONFIG.BRIDGE_Y - GAME_CONFIG.CHARACTER_SIZE,
-            width: GAME_CONFIG.CHARACTER_SIZE,
-            height: GAME_CONFIG.CHARACTER_SIZE,
-            transform: `translateY(${gameState.status === 'GAME_OVER' && characterX > bridgeEndX ? '200px' : '0px'}) rotate(${gameState.status === 'GAME_OVER' && characterX > bridgeEndX ? '90deg' : '0deg'})`,
-            transition: 'transform 0.5s ease-in'
-          }}
-        >
-          <HardHat size={32} color={COLORS.character} fill="orange" />
-          <div className="w-4 h-8 bg-blue-600 rounded-b-lg -mt-1"></div>
-          {/* Legs animation simulation */}
-          <div className="flex w-full justify-between px-1">
-             <div className="w-1 h-3 bg-black animate-pulse"></div>
-             <div className="w-1 h-3 bg-black animate-pulse delay-75"></div>
-          </div>
-        </div>
-
-        {/* Next Platform Marker (Visual Goal) */}
-         <div 
-          className="absolute border-l-4 border-amber-900 flex items-center justify-center text-white/50 font-bold text-4xl"
-          style={{
-            left: bridgeEndX + 300, // Always ahead
-            top: GAME_CONFIG.BRIDGE_Y + 50,
-            width: 100,
-            height: '200vh', // Extend deep
-            backgroundColor: COLORS.grass,
-            opacity: 0.5
-          }}
-        >
-          GOAL ->
-        </div>
-      </div>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/apps/components/TutorModal.tsx b/src/apps/components/TutorModal.tsx
deleted file mode 100644
index d47dac5..0000000
--- a/src/apps/components/TutorModal.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Problem, TutorResponse } from '../types';
-import { getTutorExplanation } from '../services/geminiService';
-import { Bot, Loader2, X } from 'lucide-react';
-import { Button } from './Button';
-
-interface TutorModalProps {
-  problem: Problem;
-  onClose: () => void;
-  isOpen: boolean;
-}
-
-export const TutorModal: React.FC<TutorModalProps> = ({ problem, onClose, isOpen }) => {
-  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState<TutorResponse | null>(null);
-
-  useEffect(() => {
-    if (isOpen && problem) {
-      setLoading(true);
-      getTutorExplanation(problem)
-        .then(setData)
-        .finally(() => setLoading(false));
-    }
-  }, [isOpen, problem]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
-      <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden animate-in fade-in zoom-in duration-200">
-        <div className="bg-indigo-600 p-4 flex items-center justify-between text-white">
-          <div className="flex items-center gap-2">
-            <Bot />
-            <span className="font-bold text-lg">Math Coach</span>
-          </div>
-          <button onClick={onClose} className="hover:bg-indigo-500 p-1 rounded">
-            <X size={20} />
-          </button>
-        </div>
-        
-        <div className="p-6">
-          <div className="text-center mb-6">
-            <p className="text-slate-500 text-sm uppercase tracking-wide font-bold mb-1">The problem was</p>
-            <div className="text-4xl font-black text-slate-800">
-              {problem.a} {problem.operator} {problem.b} = <span className="text-red-500">{problem.answer}</span>
-            </div>
-          </div>
-
-          {loading ? (
-            <div className="flex flex-col items-center justify-center py-8 text-indigo-500">
-              <Loader2 className="animate-spin mb-2" size={32} />
-              <p>Thinking...</p>
-            </div>
-          ) : data ? (
-            <div className="space-y-4">
-              <div className="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
-                <p className="text-indigo-900 font-medium leading-relaxed">{data.explanation}</p>
-              </div>
-              <p className="text-center text-slate-500 italic">"{data.encouragement}"</p>
-            </div>
-          ) : (
-             <p className="text-red-500 text-center">Could not load explanation.</p>
-          )}
-
-          <div className="mt-8">
-            <Button onClick={onClose} className="w-full">Got it!</Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/src/apps/german-trainer/metadata.json b/src/apps/german-trainer/metadata.json
new file mode 100644
index 0000000..2cde10b
--- /dev/null
+++ b/src/apps/german-trainer/metadata.json
@@ -0,0 +1,7 @@
+{
+  "title": "Lern mit mir!",
+  "description": "A simple, focused tool for drilling German vocabulary and grammar.",
+  "emoji": "🇩🇪",
+  "color": "cyan",
+  "path": "/german-trainer/"
+}
diff --git a/src/apps/hexarow/metadata.json b/src/apps/hexarow/metadata.json
new file mode 100644
index 0000000..80340b0
--- /dev/null
+++ b/src/apps/hexarow/metadata.json
@@ -0,0 +1,7 @@
+{
+  "title": "6-in-a-Line",
+  "description": "A classic board game to play against a surprisingly clever AI. Good luck.",
+  "emoji": "🎮",
+  "color": "lime",
+  "path": "/hexarow/"
+}
diff --git a/src/apps/services/geminiService.ts b/src/apps/services/geminiService.ts
deleted file mode 100644
index a7f8d68..0000000
--- a/src/apps/services/geminiService.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { GoogleGenAI, Type } from "@google/genai";
-import { Problem, TutorResponse } from "../types";
-
-// Helper to check for API key availability
-export const hasApiKey = (): boolean => {
-  return !!process.env.API_KEY;
-};
-
-export const getTutorExplanation = async (problem: Problem): Promise<TutorResponse> => {
-  if (!process.env.API_KEY) {
-    return {
-      explanation: "Practice makes perfect! Try visualizing the numbers as blocks.",
-      encouragement: "You can do it next time!"
-    };
-  }
-
-  const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
-  
-  const prompt = `
-    Explain how to solve the math problem ${problem.a} ${problem.operator} ${problem.b} to a 7-year-old child.
-    The answer is ${problem.answer}.
-    If it involves regrouping (carrying/borrowing), explicitly explain that step simply.
-    Keep the explanation under 3 sentences.
-    Also provide a short encouraging phrase.
-  `;
-
-  try {
-    const response = await ai.models.generateContent({
-      model: "gemini-2.5-flash",
-      contents: prompt,
-      config: {
-        responseMimeType: "application/json",
-        responseSchema: {
-          type: Type.OBJECT,
-          properties: {
-            explanation: { type: Type.STRING },
-            encouragement: { type: Type.STRING },
-          },
-          required: ["explanation", "encouragement"],
-        },
-      },
-    });
-
-    const text = response.text;
-    if (!text) throw new Error("No response from AI");
-
-    return JSON.parse(text) as TutorResponse;
-  } catch (error) {
-    console.error("Gemini API Error:", error);
-    return {
-      explanation: "Remember to check if you need to carry over a ten or borrow one!",
-      encouragement: "Keep building!"
-    };
-  }
-};
diff --git a/src/apps/services/mathEngine.ts b/src/apps/services/mathEngine.ts
deleted file mode 100644
index 71a8d83..0000000
--- a/src/apps/services/mathEngine.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Problem, Operator } from '../types';
-
-/**
- * Generates a random integer between min and max (inclusive)
- */
-const randomInt = (min: number, max: number): number => {
-  return Math.floor(Math.random() * (max - min + 1)) + min;
-};
-
-/**
- * Checks if an addition problem requires regrouping (carrying).
- * e.g., 18 + 5 (8+5 > 9)
- */
-const isRegroupingAdd = (a: number, b: number): boolean => {
-  return (a % 10) + (b % 10) >= 10;
-};
-
-/**
- * Checks if a subtraction problem requires regrouping (borrowing).
- * e.g., 22 - 5 (2 < 5)
- */
-const isRegroupingSub = (a: number, b: number): boolean => {
-  return (a % 10) < (b % 10);
-};
-
-export const generateProblem = (level: number, forceRegrouping: boolean = false): Problem => {
-  // Level 1: Single digits (0-9). Level 2+: Standard constraints (<100).
-  const operator: Operator = Math.random() > 0.5 ? '+' : '-';
-  
-  let a = 0;
-  let b = 0;
-  let answer = 0;
-  let requiresRegrouping = false;
-  let valid = false;
-
-  // Safety break counter
-  let attempts = 0;
-
-  while (!valid && attempts < 100) {
-    attempts++;
-    
-    if (level === 1) {
-      // Single Digit Mode
-      if (operator === '+') {
-        a = randomInt(0, 9);
-        b = randomInt(0, 9);
-        answer = a + b;
-        requiresRegrouping = isRegroupingAdd(a, b);
-      } else {
-        a = randomInt(0, 9);
-        b = randomInt(0, a); // Result >= 0
-        answer = a - b;
-        requiresRegrouping = isRegroupingSub(a, b);
-      }
-      valid = true;
-    } else {
-      // Standard Mode (Level 2+)
-      // Constraint: Operands >= 0
-      // Constraint: Result < 100 (and >= 0 for sub)
-      
-      if (operator === '+') {
-        // a + b = c, c < 100
-        a = randomInt(0, 89); // leave room for b
-        b = randomInt(1, 99 - a);
-        answer = a + b;
-        requiresRegrouping = isRegroupingAdd(a, b);
-      } else {
-        // a - b = c, a < 100, c >= 0
-        a = randomInt(1, 99);
-        b = randomInt(1, a);
-        answer = a - b;
-        requiresRegrouping = isRegroupingSub(a, b);
-      }
-
-      // Higher levels or 'forceRegrouping' prefer regrouping problems
-      if (forceRegrouping) {
-        if (requiresRegrouping) valid = true;
-      } else {
-          valid = true;
-      }
-    }
-  }
-
-  return {
-    id: Math.random().toString(36).substr(2, 9),
-    a,
-    b,
-    operator,
-    answer,
-    requiresRegrouping,
-  };
-};
\ No newline at end of file
diff --git a/src/apps/snapmark/metadata.json b/src/apps/snapmark/metadata.json
index 9816c6c..8bb0210 100644
--- a/src/apps/snapmark/metadata.json
+++ b/src/apps/snapmark/metadata.json
@@ -1,5 +1,7 @@
 {
-  "name": "SnapMark",
-  "description": "A vector-based image annotation tool. Paste images, add editable highlights, arrows, and text, then export as PNG.",
-  "requestFramePermissions": []
-}
\ No newline at end of file
+  "title": "SnapMark",
+  "description": "Highlight, annotate, and export images in a snap.",
+  "emoji": "🖍️",
+  "color": "pink",
+  "path": "/snapmark/"
+}
diff --git a/src/landing/index.html b/src/landing/index.html
index 4070260..da5f9c9 100644
--- a/src/landing/index.html
+++ b/src/landing/index.html
@@ -1 +1 @@
-<!doctypehtml><html lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>cffyin | cffy.in</title><script src="https://cdn.tailwindcss.com"></script><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><style>.font-impact{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif}.font-comic{font-family:"Comic Sans MS","Comic Sans",cursive}@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin-slow{animation:spin-slow 10s linear infinite}</style><body class="antialiased"><nav class="bg-white/70 backdrop-blur-sm border-b-2 border-amber-800 p-3 sticky top-0 z-20"><div class="max-w-6xl mx-auto flex justify-between items-center font-impact text-amber-900"><a href="index.html"class="text-2xl font-black hover:text-amber-700 transition-colors">cffyin</a><div class="flex gap-6 text-lg items-center"><a href="index.html"class="hover:underline">Home</a> <a href="german.html"class="hover:underline">German Trainer</a> <a href="game.html"class="hover:underline">Hex-a-Row</a> <a href="snapmark/index.html"class="hover:underline">SnapMark</a></div></div></nav><div class="min-h-screen bg-amber-50 relative overflow-hidden"><div style="background-image:radial-gradient(circle,#000 1px,transparent 1px);background-size:20px 20px"class="absolute inset-0 opacity-10"></div><div class="absolute top-20 left-10 text-6xl opacity-20 animate-bounce">☕</div><div class="absolute top-40 right-20 text-4xl opacity-20 animate-pulse">✨</div><div class="absolute bottom-40 left-20 text-5xl opacity-20 animate-bounce">🎨</div><div class="relative z-10"><section class="max-w-6xl mx-auto px-4 py-16"><div class="text-center space-y-8"><div class="space-y-4"><div class="inline-block"><h2 style="text-shadow:4px 4px 0 rgba(251,191,36,.5)"class="font-impact text-7xl md:text-8xl font-black text-amber-900 transform -rotate-2">CFFYIN</h2></div><div class="flex justify-center gap-3 text-5xl"><span class="animate-bounce">☕</span> <span class="animate-pulse">✨</span> <span class="animate-bounce">🎨</span></div></div><div class="max-w-2xl mx-auto space-y-6"><p class="font-comic text-3xl font-bold text-amber-900">Welcome to the Playground<p class="text-xl text-gray-700 leading-relaxed font-medium">A collection of small, delightful web experiments where education meets fun meets art.<br><span class="text-amber-900 font-bold">No ads. No tracking. Just vibes.</span></div></div></section><div class="max-w-6xl mx-auto px-4 py-8"><div class="border-t-4 border-dashed border-amber-900 relative"><div class="absolute left-1/2 top-0 transform -translate-x-1/2 -translate-y-1/2 bg-amber-50 px-4"><span class="text-3xl">☕</span></div></div></div><section class="max-w-6xl mx-auto px-4 py-12"><div class="text-center mb-12"><h3 class="font-impact text-5xl font-black text-amber-900 mb-4 inline-block">→ THE SITES ←</h3><p class="font-comic text-xl text-gray-700 font-bold">Pick your adventure!</div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="group"><a href="german.html"class="block bg-cyan-400 border-4 border-cyan-600 shadow-lg p-6 space-y-4 transition-all duration-300 transform -rotate-1 group-hover:rotate-0 group-hover:scale-105"><div class="text-center"><div class="text-6xl mb-3">🇩🇪</div><h4 class="font-impact text-3xl font-black text-gray-900 mb-2">Lern mit mir!</h4><p class="text-gray-800 font-bold text-lg">A simple, focused tool for drilling German vocabulary and grammar.</div><div class="flex justify-center"><div class="px-4 py-2 text-sm font-black border-2 bg-green-400 border-green-700 text-green-900">ONLINE</div></div></a></div><div class="group"><a href="game.html"class="block bg-lime-400 border-4 border-lime-600 shadow-lg p-6 space-y-4 transition-all duration-300 transform rotate-1 group-hover:rotate-0 group-hover:scale-105"><div class="text-center"><div class="text-6xl mb-3">🎮</div><h4 class="font-impact text-3xl font-black text-gray-900 mb-2">6-in-a-Line</h4><p class="text-gray-800 font-bold text-lg">A classic board game to play against a surprisingly clever AI. Good luck.</div><div class="flex justify-center"><div class="px-4 py-2 text-sm font-black border-2 bg-green-400 border-green-700 text-green-900">ONLINE</div></div></a></div><div class="group"><a href="snapmark/index.html"class="block bg-pink-400 border-4 border-pink-600 shadow-lg p-6 space-y-4 transition-all duration-300 transform -rotate-1 group-hover:rotate-0 group-hover:scale-105"><div class="text-center"><div class="text-6xl mb-3">🖍️</div><h4 class="font-impact text-3xl font-black text-gray-900 mb-2">SnapMark</h4><p class="text-gray-800 font-bold text-lg">Highlight, annotate, and export images in a snap.</p></div><div class="flex justify-center"><div class="px-4 py-2 text-sm font-black border-2 bg-green-400 border-green-700 text-green-900">ONLINE</div></div></a></div></div></section><footer class="bg-gradient-to-r from-amber-900 to-orange-900 border-t-4 border-amber-950 mt-20"><div class="max-w-6xl mx-auto px-4 py-12"><div class="text-center space-y-8"><div class="flex justify-center gap-6 flex-wrap text-6xl"><span class="animate-bounce">☕</span> <span class="animate-pulse">❤️</span> <span class="animate-bounce">✨</span></div><div class="space-y-4"><p class="text-lg text-amber-200 font-bold max-w-2xl mx-auto">Remember when the internet was fun? We do.<br>No tracking, no ads, no BS. Just pure, caffeinated creativity.</div><div class="pt-6 mt-4 border-t-2 border-amber-800"><p class="text-amber-200 text-sm font-mono">© 2025 cffy.in • Best viewed with coffee in hand ☕</div></div></div></footer></div></div>
\ No newline at end of file
+<!doctypehtml><html lang="en"><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1"><title>cffyin | cffy.in</title><script src="https://cdn.tailwindcss.com"></script><link rel="preconnect"href="https://fonts.googleapis.com"><link rel="preconnect"href="https://fonts.gstatic.com"crossorigin><style>.font-impact{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif}.font-comic{font-family:"Comic Sans MS","Comic Sans",cursive}@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin-slow{animation:spin-slow 10s linear infinite}</style><body class="antialiased"><nav class="bg-white/70 backdrop-blur-sm border-b-2 border-amber-800 p-3 sticky top-0 z-20"><div class="max-w-6xl mx-auto flex justify-between items-center font-impact text-amber-900"><a href="index.html"class="text-2xl font-black hover:text-amber-700 transition-colors">cffyin</a><div class="flex gap-6 text-lg items-center"><a href="index.html"class="hover:underline">Home</a> href="/german-trainer/" <a href="/hexarow/"class="hover:underline">Hex-a-Row</a> <a href="/snapmark/"class="hover:underline">SnapMark</a></div></div></nav><div class="min-h-screen bg-amber-50 relative overflow-hidden"><div style="background-image:radial-gradient(circle,#000 1px,transparent 1px);background-size:20px 20px"class="absolute inset-0 opacity-10"></div><div class="absolute top-20 left-10 text-6xl opacity-20 animate-bounce">☕</div><div class="absolute top-40 right-20 text-4xl opacity-20 animate-pulse">✨</div><div class="absolute bottom-40 left-20 text-5xl opacity-20 animate-bounce">🎨</div><div class="relative z-10"><section class="max-w-6xl mx-auto px-4 py-16"><div class="text-center space-y-8"><div class="space-y-4"><div class="inline-block"><h2 style="text-shadow:4px 4px 0 rgba(251,191,36,.5)"class="font-impact text-7xl md:text-8xl font-black text-amber-900 transform -rotate-2">CFFYIN</h2></div><div class="flex justify-center gap-3 text-5xl"><span class="animate-bounce">☕</span> <span class="animate-pulse">✨</span> <span class="animate-bounce">🎨</span></div></div><div class="max-w-2xl mx-auto space-y-6"><p class="font-comic text-3xl font-bold text-amber-900">Welcome to the Playground<p class="text-xl text-gray-700 leading-relaxed font-medium">A collection of small, delightful web experiments where education meets fun meets art.<br><span class="text-amber-900 font-bold">No ads. No tracking. Just vibes.</span></div></div></section><div class="max-w-6xl mx-auto px-4 py-8"><div class="border-t-4 border-dashed border-amber-900 relative"><div class="absolute left-1/2 top-0 transform -translate-x-1/2 -translate-y-1/2 bg-amber-50 px-4"><span class="text-3xl">☕</span></div></div></div><section class="max-w-6xl mx-auto px-4 py-12"><div class="text-center mb-12"><h3 class="font-impact text-5xl font-black text-amber-900 mb-4 inline-block">→ THE SITES ←</h3><p class="font-comic text-xl text-gray-700 font-bold">Pick your adventure!</div><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"><!-- APPS_GRID --></div></section><footer class="bg-gradient-to-r from-amber-900 to-orange-900 border-t-4 border-amber-950 mt-20"><div class="max-w-6xl mx-auto px-4 py-12"><div class="text-center space-y-8"><div class="flex justify-center gap-6 flex-wrap text-6xl"><span class="animate-bounce">☕</span> <span class="animate-pulse">❤️</span> <span class="animate-bounce">✨</span></div><div class="space-y-4"><p class="text-lg text-amber-200 font-bold max-w-2xl mx-auto">Remember when the internet was fun? We do.<br>No tracking, no ads, no BS. Just pure, caffeinated creativity.</div><div class="pt-6 mt-4 border-t-2 border-amber-800"><p class="text-amber-200 text-sm font-mono">© 2025 cffy.in • Best viewed with coffee in hand ☕</div></div></div></footer></div></div>
\ No newline at end of file