diff --git a/course.txt b/course.txt
deleted file mode 100644
index ac538e1..0000000
--- a/course.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-Main Headingd;
-*Add "or Pre-Primary school";
-
-Our Courses:
-Computer Course,
-Vocational Course,
-ITI Course,
-Pre-Primary Franchises,
-
-
-Heritage English Medium School
-Mordern Heritage Academy,
-StarLight Academy,
\ No newline at end of file
diff --git a/public/assets/A.png b/public/assets/A.png
new file mode 100755
index 0000000..ab0f262
Binary files /dev/null and b/public/assets/A.png differ
diff --git a/src/pages/drawing-game.astro b/src/pages/drawing-game.astro
deleted file mode 100644
index 73e6c32..0000000
--- a/src/pages/drawing-game.astro
+++ /dev/null
@@ -1,97 +0,0 @@
----
-import Layout from '../layouts/Layout.astro';
----
-<Layout title='Drawing Game'>
-    <main>
-        <div>
-            <p>Drawing Game</p>
-            <div id="game-container"></div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-// Create a new Phaser game
-var config = {
-    type: Phaser.AUTO,
-    width: 800,
-    height: 600,
-    scene: {
-        preload: preload,
-        create: create,
-        update: update
-    }
-};
-var game = new Phaser.Game(config);
-
-// Declare global variables
-var graphics;
-var lastPointer;
-var color = 0xff0000;
-var thickness = 5;
-
-// Load assets
-function preload() {
-    // Preload any assets you need for the game, such as images or sounds
-}
-
-// Create the game world
-function create() {
-    // Create the graphics object
-    graphics = this.add.graphics();
-
-    // Set up the input events for the game
-    this.input.on('pointerdown', function(pointer) {
-        lastPointer = pointer;
-    });
-    this.input.on('pointermove', function(pointer) {
-        if (lastPointer) {
-            graphics.lineStyle(thickness, color);
-            graphics.beginPath();
-            graphics.moveTo(lastPointer.x, lastPointer.y);
-            graphics.lineTo(pointer.x, pointer.y);
-            graphics.strokePath();
-            lastPointer = pointer;
-        }
-    });
-    this.input.on('pointerup', function(pointer) {
-        lastPointer = null;
-    });
-
-    // Set up the UI for the game
-    var colorPicker = this.add.rectangle(50, 50, 40, 40, color);
-    colorPicker.setInteractive();
-    colorPicker.on('pointerdown', function() {
-        // Open a color picker dialog to select a color
-        var input = document.createElement('input');
-        input.type = 'color';
-        input.oninput = function() {
-            color = Phaser.Display.Color.ValueToColor(input.value).color;
-            colorPicker.fillColor = color;
-        };
-        input.click();
-    });
-
-    var thicknessText = this.add.text(150, 50, 'Thickness: ' + thickness, { font: '24px Arial', fill: '#ffffff' });
-    var increaseButton = this.add.text(150, 100, '+', { font: '24px Arial', fill: '#ffffff' });
-    increaseButton.setInteractive();
-    increaseButton.on('pointerdown', function() {
-        thickness++;
-        thicknessText.setText('Thickness: ' + thickness);
-    });
-    var decreaseButton = this.add.text(200, 100, '-', { font: '24px Arial', fill: '#ffffff' });
-    decreaseButton.setInteractive();
-    decreaseButton.on('pointerdown', function() {
-        if (thickness > 1) {
-            thickness--;
-            thicknessText.setText('Thickness: ' + thickness);
-        }
-    });
-}
-
-// Update the game world
-function update() {
-    // Update any game logic or animations here
-}
-
-</script>
\ No newline at end of file
diff --git a/src/pages/drawing/temp.astro b/src/pages/drawing/temp.astro
deleted file mode 100644
index 76fc250..0000000
--- a/src/pages/drawing/temp.astro
+++ /dev/null
@@ -1,82 +0,0 @@
-<script is:inline>
-   function create() {
-    // Adjust the positions and sizes of elements based on screen size
-    const screenWidth = game.scale.width;
-    const screenHeight = game.scale.height;
-
-    if (screenWidth <= 768) {
-        // Adjust elements for mobile screens
-        // You can modify these values as needed
-        // Example: Move a button to the top-right corner
-        button.x = screenWidth - button.width;
-        button.y = 0;
-    } else {
-        // Adjust elements for larger screens
-        // Example: Move a button to the bottom-right corner
-        button.x = screenWidth - button.width;
-        button.y = screenHeight - button.height;
-    }
-
-    // ... other element adjustments ...
-}
-
-
-</script>
-
-
-
-<!-- <script is:inline>
-    const isMobile = window.innerWidth <= 768; // You can adjust the breakpoint as needed
-
-const drawingZone = {
-    x: isMobile ? 0 : window.innerWidth / 4,
-    y: isMobile ? 0 : window.innerHeight / 4,
-    width: isMobile ? window.innerWidth : window.innerWidth / 2,
-    height: isMobile ? window.innerHeight : window.innerHeight / 2,
-};
-
-// ...
-
-function create() {
-    // ...
-
-    // Position UI elements based on screen size
-    const colorPickerX = isMobile ? 10 : 20;
-    const colorPickerY = isMobile ? 10 : '10%';
-    colorPicker.style.position = 'absolute';
-    colorPicker.style.top = colorPickerY;
-    colorPicker.style.left = `${colorPickerX}px`;
-
-    const sliderContainerX = isMobile ? 10 : '5%';
-    const sliderContainerY = isMobile ? 10 : '10%';
-    sliderContainer.style.position = 'absolute';
-    sliderContainer.style.top = sliderContainerY;
-    sliderContainer.style.left = sliderContainerX;
-
-    const clearButtonX = isMobile ? 10 : '5%';
-    const clearButtonY = isMobile ? 20 : '20%';
-    clearButton.style.position = 'absolute';
-    clearButton.style.top = clearButtonY;
-    clearButton.style.left = clearButtonX;
-
-    const eraserButtonX = isMobile ? 10 : '5%';
-    const eraserButtonY = isMobile ? 14 : '14%';
-    eraserButton.style.position = 'absolute';
-    eraserButton.style.top = eraserButtonY;
-    eraserButton.style.left = eraserButtonX;
-
-    // ...
-
-    // Adjust cursor size based on screen size
-    const cursorSizeMultiplier = isMobile ? 0.5 : 1;
-
-    // ...
-
-    // Adjust the borderGraphics position and size
-    borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
-
-    // ...
-}
-
-</script>
- -->
diff --git a/src/pages/tick/temp.astro b/src/pages/tick/temp.astro
deleted file mode 100644
index 7717d49..0000000
--- a/src/pages/tick/temp.astro
+++ /dev/null
@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Checkbox Array</title>
-</head>
-<body>
-    <input type="checkbox" class="myCheckbox" value="Value 1"> Checkbox 1
-    <input type="checkbox" class="myCheckbox" value="Value 2"> Checkbox 2
-    <input type="checkbox" class="myCheckbox" value="Value 3"> Checkbox 3
-    <input type="checkbox" class="myCheckbox" value="Value 4"> Checkbox 4
-    <input type="checkbox" class="myCheckbox" value="Value 5"> Checkbox 5
-    <input type="checkbox" class="myCheckbox" value="Value 6"> Checkbox 6
-    <button id="saveButton">Save</button>
-
-    <script>
-        // Get a reference to the "Save" button
-        const saveButton = document.getElementById('saveButton');
-
-        // Add a click event listener to the "Save" button
-        saveButton.addEventListener('click', function() {
-            // Get all checkboxes with the class "myCheckbox"
-            const checkboxes = document.querySelectorAll('.myCheckbox');
-
-            // Create an array to store the values of checked checkboxes
-            const checkedValues = [];
-
-            // Loop through the checkboxes and check if they are checked
-            checkboxes.forEach(function(checkbox) {
-                if (checkbox.checked) {
-                    // If checked, push the value to the array
-                    checkedValues.push(checkbox.value);
-                }
-            });
-
-            // Log the array of checked values
-            console.log('Checked Values:', checkedValues);
-        });
-    </script>
-</body>
-</html>
diff --git a/src/pages/tracing/index.astro b/src/pages/tracing/index.astro
new file mode 100644
index 0000000..0ec3ccd
--- /dev/null
+++ b/src/pages/tracing/index.astro
@@ -0,0 +1,89 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title='Tracing Game'>
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    </main>
+</Layout>
+<script is:inline>
+var config = {
+  type: Phaser.AUTO,
+  width: window.innerWidth,
+  height: window.innerHeight,
+  backgroundColor: '#ffffff',
+  parent: 'game-container',
+  scene: {
+    preload: preload,
+    create: create
+  }
+};
+
+var game = new Phaser.Game(config);
+
+var letter;
+var lastX;
+var lastY;
+var graphics;
+var isTracing = false;
+
+function preload() {
+  this.load.image('letter', '/assets/A.png');
+}
+
+function create() {
+  // Add letter sprite to game
+  letter = this.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'letter');
+  
+  // Set interactive property of letter sprite to true
+  letter.setInteractive();
+  
+  // Add event listeners for mouse down and up events on letter sprite
+  this.input.on('pointerdown', startTracing);
+  this.input.on('pointerup', endTracing);
+}
+
+function startTracing(pointer) {
+  // Set tracing flag to true
+  isTracing = true;
+  
+  // Set last coordinates to current pointer coordinates
+  lastX = pointer.x;
+  lastY = pointer.y;
+  
+  // Set tint of letter sprite to indicate tracing has started
+  letter.setTint(0xff0000);
+  
+  // Create graphics object and set line style
+  graphics = this.add.graphics();
+  graphics.lineStyle(10, 0xffffff);
+}
+
+function endTracing() {
+  // Set tracing flag to false
+  isTracing = false;
+  
+  // Clear graphics object
+  graphics.clear();
+  
+  // Reset tint of letter sprite to indicate tracing has ended
+  letter.clearTint();
+}
+
+function update() {
+  // If tracing is in progress, draw line from last coordinates to current pointer coordinates
+  if (isTracing) {
+    graphics.beginPath();
+    graphics.moveTo(lastX, lastY);
+    graphics.lineTo(this.input.activePointer.x, this.input.activePointer.y);
+    graphics.strokePath();
+    lastX = this.input.activePointer.x;
+    lastY = this.input.activePointer.y;
+  }
+}
+</script>
+<style>
+</style>
diff --git a/src/pages/tracing/temp.astro b/src/pages/tracing/temp.astro
new file mode 100644
index 0000000..e69de29