diff --git a/apps/Finger drawing/app.js b/apps/Finger drawing/app.js
index 34063ab..32281ac 100644
--- a/apps/Finger drawing/app.js	
+++ b/apps/Finger drawing/app.js	
@@ -4,8 +4,21 @@ let currentColor = 'black'; // Default color
 
 async function setupWebcam() {
     try {
-        const constraints = { video: { width: 640, height: 480 } };
-        video.srcObject = await navigator.mediaDevices.getUserMedia(constraints);
+        // First list available devices to help with debugging
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoDevices = devices.filter(device => device.kind === 'videoinput');
+        console.log('Available video devices:', videoDevices);
+
+        const constraints = {
+            video: {
+                width: 640,
+                height: 480
+            }
+        };
+
+        const stream = await navigator.mediaDevices.getUserMedia(constraints);
+        video.srcObject = stream;
+        
         return new Promise((resolve) => {
             video.onloadedmetadata = () => {
                 video.play();
@@ -13,7 +26,22 @@ async function setupWebcam() {
             };
         });
     } catch (err) {
-        console.error(err);
+        console.error('Webcam setup error:', err.name, err.message);
+        // Handle specific errors
+        switch (err.name) {
+            case 'NotAllowedError':
+                alert('Camera access was denied. Please check your browser permissions.');
+                break;
+            case 'NotFoundError':
+                alert('No camera device was found. Please check your camera connection.');
+                break;
+            case 'NotReadableError':
+                alert('Camera is in use by another application.');
+                break;
+            default:
+                alert('Error accessing camera: ' + err.message);
+        }
+        throw err;
     }
 }
 
diff --git a/apps/finger-draw.html b/apps/finger-draw.html
new file mode 100644
index 0000000..82513a1
--- /dev/null
+++ b/apps/finger-draw.html
@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- Previous head section and style remains exactly the same -->
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Finger Drawing App</title>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core@3.18.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter@3.18.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl@3.18.0"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose@0.0.7"></script>
+    <style>
+        /* Previous styles remain exactly the same */
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background: #f0f0f0;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+
+        #app-container {
+            position: relative;
+            margin: 20px;
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+
+        #overlay {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background: rgba(0,0,0,0.7);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            font-size: 14px;
+            z-index: 1000;
+        }
+
+        #webcam {
+            position: absolute;
+            transform: scaleX(-1);
+        }
+
+        #canvas {
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            position: absolute;
+            transform: scaleX(-1);
+        }
+
+        #instructions {
+            margin: 20px;
+            margin-top: 540px;
+            padding: 20px;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            max-width: 600px;
+        }
+
+        #status {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(0,0,0,0.8);
+            color: white;
+            padding: 10px;
+            border-radius: 5px;
+            z-index: 2000;
+        }
+
+        h2 {
+            color: #333;
+            margin-top: 0;
+        }
+
+        ol {
+            padding-left: 20px;
+            line-height: 1.6;
+        }
+
+        #loading {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0,0,0,0.8);
+            color: white;
+            padding: 20px;
+            border-radius: 10px;
+            z-index: 2000;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="status">Status: Initializing...</div>
+    <div id="loading">Loading HandPose model...</div>
+    
+    <div id="app-container">
+        <div id="overlay">
+            <span id="last-spoken">Last spoken: </span>
+            <br>
+            <span id="current-color">Current color: black</span>
+        </div>
+        <video id="webcam" width="640" height="480" playsinline autoplay></video>
+        <canvas id="canvas" width="640" height="480"></canvas>
+    </div>
+
+    <div id="instructions">
+        <h2>Instructions</h2>
+        <ol>
+            <li>Allow access to your webcam when prompted</li>
+            <li>Point your index finger upwards to start drawing on the canvas</li>
+            <li>Speak a color (red, green, blue, yellow, orange, purple, black, white) to change the drawing color</li>
+        </ol>
+    </div>
+
+    <script>
+        let videoStream = null;
+        const video = document.getElementById('webcam');
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const loadingElement = document.getElementById('loading');
+        const statusElement = document.getElementById('status');
+        let currentColor = 'black';
+        let drawing = false;
+
+        function updateStatus(message) {
+            statusElement.textContent = 'Status: ' + message;
+            console.log('Status:', message);
+        }
+
+        async function init() {
+            try {
+                updateStatus('Initializing TensorFlow.js...');
+                await tf.setBackend('webgl');
+                await tf.ready();
+                console.log('TensorFlow.js backend initialized:', tf.getBackend());
+                updateStatus('TensorFlow.js initialized');
+            } catch (err) {
+                updateStatus('Failed to initialize TensorFlow.js');
+                console.error('Error initializing TensorFlow.js backend:', err);
+                throw err;
+            }
+        }
+
+        async function setupWebcam() {
+            if (videoStream) {
+                return Promise.resolve(videoStream);
+            }
+
+            try {
+                updateStatus('Requesting camera access...');
+                const constraints = { 
+                    video: { 
+                        width: 640, 
+                        height: 480,
+                        facingMode: 'user'
+                    } 
+                };
+                videoStream = await navigator.mediaDevices.getUserMedia(constraints);
+                video.srcObject = videoStream;
+                
+                return new Promise((resolve) => {
+                    video.onloadedmetadata = () => {
+                        updateStatus('Camera ready');
+                        video.play();
+                        resolve(videoStream);
+                    };
+                });
+            } catch (err) {
+                updateStatus('Camera access failed');
+                console.error('Webcam setup error:', err);
+                throw err;
+            }
+        }
+
+        async function loadHandposeModel() {
+            try {
+                updateStatus('Loading HandPose model...');
+                loadingElement.style.display = 'block';
+                const model = await handpose.load();
+                loadingElement.style.display = 'none';
+                updateStatus('HandPose model loaded');
+                return model;
+            } catch (err) {
+                loadingElement.style.display = 'none';
+                updateStatus('Failed to load HandPose model');
+                console.error('Error loading handpose model:', err);
+                throw err;
+            }
+        }
+
+        async function detectFingerDirection(predictions) {
+            if (predictions.length > 0) {
+                const keypoints = predictions[0].landmarks;
+                const indexFingerTip = keypoints[8];
+                const indexFingerBase = keypoints[5];
+
+                const directionVector = {
+                    x: indexFingerTip[0] - indexFingerBase[0],
+                    y: indexFingerTip[1] - indexFingerBase[1],
+                };
+
+                return directionVector;
+            }
+            return null;
+        }
+
+        function draw(x, y, color) {
+            if (!drawing) return;
+
+            ctx.lineWidth = 5;
+            ctx.lineCap = 'round';
+            ctx.strokeStyle = color;
+
+            ctx.lineTo(x, y);
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+        }
+
+        function setupSpeechRecognition() {
+            const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+            if (!SpeechRecognition) {
+                console.error('Speech recognition not supported in this browser.');
+                return null;
+            }
+
+            const recognition = new SpeechRecognition();
+            recognition.continuous = true;
+            recognition.interimResults = true;
+            recognition.lang = 'en-US';
+
+            return recognition;
+        }
+
+        function extractColor(transcript) {
+            const colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple', 'black', 'white'];
+            const words = transcript.toLowerCase().split(' ');
+            for (const word of words) {
+                if (colors.includes(word)) {
+                    return word;
+                }
+            }
+            return null;
+        }
+
+        async function mainLoop(model) {
+            if (!video.srcObject) {
+                console.error('Video stream not available');
+                updateStatus('Video stream lost');
+                return;
+            }
+
+            try {
+                const predictions = await model.estimateHands(video);
+                const directionVector = await detectFingerDirection(predictions);
+
+                if (directionVector && predictions.length > 0) {
+                    const indexFingerTip = predictions[0].landmarks[8];
+                    const x = indexFingerTip[0];
+                    const y = indexFingerTip[1];
+
+                    if (directionVector.y < 0) {
+                        drawing = true;
+                        draw(x, y, currentColor);
+                    } else {
+                        drawing = false;
+                        ctx.beginPath();
+                    }
+                }
+
+                requestAnimationFrame(() => mainLoop(model));
+            } catch (error) {
+                console.error('Error in main loop:', error);
+                updateStatus('Error in hand detection');
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', async () => {
+            try {
+                await init();
+                await setupWebcam();
+                const model = await loadHandposeModel();
+                
+                const recognition = setupSpeechRecognition();
+                if (recognition) {
+                    recognition.onresult = (event) => {
+                        const transcript = event.results[event.results.length - 1][0].transcript;
+                        const extractedColor = extractColor(transcript);
+                    
+                        if (extractedColor) {
+                            currentColor = extractedColor;
+                        }
+                    
+                        document.getElementById('last-spoken').textContent = `Last spoken: ${transcript}`;
+                        document.getElementById('current-color').textContent = `Current color: ${currentColor}`;
+                    };
+                    recognition.start();
+                    updateStatus('Speech recognition ready');
+                }
+                
+                updateStatus('Running hand detection');
+                mainLoop(model);
+            } catch (error) {
+                console.error('Setup failed:', error);
+                updateStatus('Setup failed: ' + error.message);
+                alert('Failed to initialize the application. Please make sure you\'re using a modern browser with webcam access.');
+            }
+        });
+
+        window.addEventListener('beforeunload', () => {
+            if (videoStream) {
+                videoStream.getTracks().forEach(track => track.stop());
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/apps/learn-javascript.html b/apps/learn-javascript.html
index 94bb748..af23b18 100644
--- a/apps/learn-javascript.html
+++ b/apps/learn-javascript.html
@@ -2,54 +2,101 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>Turtle Graphics for 8th Graders</title>
+  <title>Learning JavaScript</title>
   <style>
     body {
       font-family: Arial, sans-serif;
-      margin: 20px;
+      margin: 20px auto;
+      width: 520px;
+      text-align: center;
     }
     #editor {
       width: 100%;
       height: 200px;
+      font-size: 16px;
+      padding: 10px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
     }
-    #runButton {
+    #run-button {
       margin-top: 10px;
       padding: 10px 20px;
+      font-size: 16px;
+      background-color: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
     }
-    #errorContainer {
+    #run-button:hover {
+      background-color: #45a049;
+    }
+    #error-container {
       margin-top: 20px;
-      color: red;
+      color: #D8000C;
+      background-color: #FFBABA;
+      padding: 10px;
+      border-radius: 4px;
+      font-size: 16px;
+    }
+    #copy-button {
+      margin-top: 10px;
+      padding: 8px 16px;
+      font-size: 14px;
+      background-color: #008CBA;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
     }
-    #copyButton {
-      margin-left: 10px;
-      padding: 5px 10px;
+    #copy-button:hover {
+      background-color: #007B9E;
+    }
+    #canvas-container {
+      position: relative;
+      margin-top: 20px;
     }
     #canvas {
       border: 1px solid #000;
-      margin-top: 20px;
+      background-color: #f9f9f9;
+    }
+    #turtle-svg {
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      transform-origin: 50% 75%; /* Rotate around the center of the base of the triangle */
+      transition: transform 0.2s linear;
     }
   </style>
 </head>
 <body>
 
-  <h1>Welcome to Turtle Graphics Programming!</h1>
-  <p>What shape would you like to program today?</p>
+  <h1>A JavaScript Playground</h1>
+  
+  <textarea id="editor" placeholder="Enter your JavaScript code here..." spellcheck="false"></textarea><br>
+  <button id="run-button">Run Code</button>
 
-  <textarea id="editor" placeholder="Enter your JavaScript code here..."></textarea><br>
-  <button id="runButton">Run Code</button>
+  <div id="error-container"></div>
 
-  <div id="errorContainer"></div>
-
-  <canvas id="canvas" width="500" height="500"></canvas>
+  <div id="canvas-container">
+    <canvas id="canvas" width="500" height="500"></canvas>
+    <!-- Simple Turtle SVG -->
+    <svg id="turtle-svg" viewBox="0 0 100 100">
+      <!-- Triangle pointing upward by default -->
+      <polygon id="turtle-body" points="50,15 85,85 15,85" fill="green" />
+    </svg>
+  </div>
 
   <script>
     // Simple Turtle Graphics Implementation
     const canvas = document.getElementById('canvas');
     const ctx = canvas.getContext('2d');
+    const turtleSVG = document.getElementById('turtle-svg');
+    const turtleBody = document.getElementById('turtle-body'); // Reference to the triangle element
     let turtle = {
       x: canvas.width / 2,
       y: canvas.height / 2,
-      angle: 0,
+      angle: 270,  // Start facing north (upwards)
       penDown: true,
       color: '#000',
       move: function(distance) {
@@ -65,48 +112,64 @@ <h1>Welcome to Turtle Graphics Programming!</h1>
         }
         this.x = newX;
         this.y = newY;
+        updateTurtlePosition();
       },
       turn: function(angle) {
         this.angle = (this.angle + angle) % 360;
+        updateTurtlePosition();
       },
-      penUp: function() {
+      penup: function() {
         this.penDown = false;
       },
-      penDownFunc: function() {
+      pendown: function() {
         this.penDown = true;
       },
-      setColor: function(color) {
+      setcolor: function(color) {
         this.color = color;
+        turtleBody.setAttribute("fill", color); // Update the turtle color
       },
       reset: function() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         this.x = canvas.width / 2;
         this.y = canvas.height / 2;
-        this.angle = 0;
+        this.angle = 270;  // Reset to facing north (upwards)
         this.penDown = true;
         this.color = '#000';
+        turtleBody.setAttribute("fill", this.color); // Reset the turtle color
+        updateTurtlePosition();
       }
     };
 
+    // Update turtle SVG position and rotation around its base
+    function updateTurtlePosition() {
+      turtleSVG.style.left = `${turtle.x}px`; // Offset to align the base of the triangle
+      turtleSVG.style.top = `${turtle.y - 15}px`;  // Offset to align the base of the triangle
+      turtleSVG.style.transform = `rotate(${turtle.angle + 90}deg)`; // Offset by 90 degrees to match north orientation
+    }
+
     // Expose turtle functions to the student
     function forward(distance) {
       turtle.move(distance);
     }
 
-    function turn(angle) {
+    function right(angle) {
       turtle.turn(angle);
     }
 
-    function penUp() {
-      turtle.penUp();
+    function left(angle) {
+      turtle.turn(-angle);
+    }
+
+    function penup() {
+      turtle.penup();
     }
 
-    function penDown() {
-      turtle.penDownFunc();
+    function pendown() {
+      turtle.pendown();
     }
 
-    function setColor(color) {
-      turtle.setColor(color);
+    function setcolor(color) {
+      turtle.setcolor(color);
     }
 
     function reset() {
@@ -114,9 +177,9 @@ <h1>Welcome to Turtle Graphics Programming!</h1>
     }
 
     // Handle Run Code Button
-    document.getElementById('runButton').addEventListener('click', () => {
+    document.getElementById('run-button').addEventListener('click', () => {
       // Clear previous errors
-      const errorContainer = document.getElementById('errorContainer');
+      const errorContainer = document.getElementById('error-container');
       errorContainer.innerHTML = '';
       // Reset turtle graphics
       turtle.reset();
@@ -133,27 +196,36 @@ <h1>Welcome to Turtle Graphics Programming!</h1>
 
     // Display Error with Copy Button
     function displayError(message) {
-      const errorContainer = document.getElementById('errorContainer');
+      const errorContainer = document.getElementById('error-container');
+      errorContainer.innerHTML = '';  // Clear previous error message if any
+
       const errorMsg = document.createElement('span');
       errorMsg.textContent = `Error: ${message}`;
+      
       const copyButton = document.createElement('button');
-      copyButton.textContent = 'Paste this error message into the chat for help';
-      copyButton.id = 'copyButton';
+      copyButton.textContent = 'Click this to copy the error message. Then paste it into the chat.';
+      copyButton.id = 'copy-button';
+
+      // Get the current user code to include in the clipboard
+      const userCode = document.getElementById('editor').value;
+      const fullMessage = `Error: ${message}\n\nUser Program:\n${userCode}`;
+
       copyButton.addEventListener('click', () => {
-        navigator.clipboard.writeText(message).then(() => {
-          alert('Error message copied to clipboard!');
+        navigator.clipboard.writeText(fullMessage).then(() => {
+          alert('Error message and code copied to clipboard!');
         }).catch(err => {
           alert('Failed to copy!');
         });
       });
+
       errorContainer.appendChild(errorMsg);
       errorContainer.appendChild(copyButton);
     }
 
-    // Initial Welcome Interaction
-    alert('Welcome! Let\'s start by programming a simple shape. What shape would you like to create?');
+    // Initial position update
+    updateTurtlePosition();
 
   </script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
