diff --git a/public/assets/svg/pen.svg b/public/assets/svg/pen.svg
new file mode 100644
index 0000000..f5a336b
--- /dev/null
+++ b/public/assets/svg/pen.svg
@@ -0,0 +1 @@
+<svg width="20px" height="20px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M494.4 273.6L752 531.2c6.4 6.4 17.6 7.2 24 0.8 28.8-26.4 106.4-97.6 216-196.8-33.6-62.4-76.8-120.8-128.8-172.8-52.8-52.8-111.2-96-172.8-128.8-100 109.6-171.2 187.2-196.8 216-7.2 6.4-6.4 16.8 0.8 24z" fill="#938993"></path><path d="M764.8 544.8c-7.2 0-13.6-2.4-18.4-8L488.8 279.2c-10.4-9.6-10.4-25.6-1.6-35.2 26.4-28.8 97.6-106.4 196.8-216 2.4-2.4 6.4-3.2 9.6-1.6 64 34.4 123.2 78.4 174.4 130.4 52 52 96 110.4 130.4 175.2 1.6 3.2 0.8 7.2-1.6 9.6C888 440.8 810.4 512 781.6 538.4c-4.8 4-10.4 6.4-16.8 6.4zM692 43.2C594.4 150.4 524.8 226.4 499.2 254.4c-3.2 4-3.2 9.6 0.8 13.6l257.6 257.6c2.4 2.4 4.8 3.2 7.2 3.2 2.4 0 4-0.8 6.4-2.4 28-25.6 104-95.2 211.2-192.8-33.6-60.8-75.2-116.8-124.8-165.6C808 118.4 752.8 76.8 692 43.2z" fill="#6A576D"></path><path d="M726.4 506.4l-207.2-208-286.4 223.2c-25.6 20-45.6 46.4-56.8 76.8l-143.2 368c-2.4 5.6-1.6 15.2 3.2 19.2l260.8-258.4c-16-20.8-20-55.2-0.8-74.4 20.8-20.8 55.2-20.8 76 0 20.8 20.8 20.8 55.2 0 76-19.2 19.2-54.4 14.4-76-1.6L36 985.6c4.8 4.8 16 5.6 20 4l364-136c31.2-11.2 58.4-31.2 78.4-57.6l228-289.6z" fill="#F1ED7B"></path><path d="M519.2 298.4l-71.2 56 223.2 222.4 55.2-70.4z" fill="#0E1115"></path><path d="M50.4 998.4c-4 0-14.4-0.8-20-7.2-8-7.2-7.2-20.8-4.8-28l143.2-368c12-31.2 32.8-59.2 59.2-80l286.4-223.2c3.2-2.4 8-2.4 10.4 0.8l207.2 207.2c3.2 3.2 3.2 7.2 0.8 10.4l-227.2 290.4c-21.6 27.2-49.6 48-82.4 60l-364 136c-3.2 1.6-6.4 1.6-8.8 1.6z m247.2-260.8L50.4 982.4h3.2l364-136c29.6-11.2 55.2-30.4 75.2-55.2l223.2-284.8-197.6-196.8-280 218.4c-24.8 19.2-43.2 44-54.4 73.6l-143.2 368v0.8l245.6-244c-14.4-23.2-16.8-58.4 4-79.2 12-12 27.2-18.4 44-18.4s32 6.4 44 18.4 18.4 27.2 18.4 44-6.4 32-18.4 44c-9.6 9.6-23.2 15.2-39.2 15.2-14.4-0.8-29.6-4.8-41.6-12.8z m4.8-16c10.4 7.2 24 12 36.8 12 8 0 19.2-1.6 28-10.4s13.6-20 13.6-32.8c0-12-4.8-24-13.6-32.8-8.8-8.8-20-13.6-32.8-13.6-12 0-24 4.8-32.8 13.6-16 16.8-12.8 46.4 0.8 64z" fill="#6A576D"></path></g></svg>
\ No newline at end of file
diff --git a/src/pages/tracing/index.astro b/src/pages/tracing/index.astro
index 0ec3ccd..90b1d78 100644
--- a/src/pages/tracing/index.astro
+++ b/src/pages/tracing/index.astro
@@ -1,89 +1,129 @@
 ---
-import Layout from '../../layouts/Layout.astro';
+import Layout from "../../layouts/Layout.astro";
 ---
-<Layout title='Tracing Game'>
+<Layout title="">
     <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>
+      </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
-  }
-};
+   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+    const drawingZone = {
+        x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+        y: window.innerHeight / 4,
+        width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+        height: window.innerHeight / 2,
+    };
+    var assetsList = {}
 
-var game = new Phaser.Game(config);
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const data =       fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
+    .then(response => response.json())
+    .then(({data}) => {
+    const {letter_img, icon_img} = data;
+    assetsList.letter_img = "https://management.beanstalkedu.com/assets/" + letter_img; // + "?width=450";
+    assetsList.icon_img = "https://management.beanstalkedu.com/assets/" + icon_img; // + "?width=450";
+    const config = {
+        type: Phaser.AUTO,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        backgroundColor: '#05b3a4',
+        scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+        },
+        scene: {
+            preload: preload,
+            create: create,
+            update: update,
+        },
+    };
+      const game = new Phaser.Game(config);    
+    })
+    .catch(error => {
+      console.error('Error fetching initial data:', error);
+    });
+  var graphics;
+  var isDragging = false;
+  var image;
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
 
-var letter;
-var lastX;
-var lastY;
-var graphics;
-var isTracing = false;
+  function preload() {
+      // Load the image asset
+      this.load.image('letter_img', assetsList.letter_img);
+      this.load.image('icon_img', assetsList.icon_img);
+      this.load.image('topLogo', '/assets/top_logo.png');
+  }   
+  function create() {
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
+        .then(response => response.json())
+        .then(({ data }) => {
+            // console.log({ data })
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            const baseFontSize = 20;
+            const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+            const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
+            this.add.text(customWidth / 10, 20, data.letter_text, textStyle);
+            const textStyle2 = {font: 'bold 40px quicksand', fill: '#5e17eb',};
+            if(!isMobile){
+                    image = this.add.image(customWidth / 4, customHeight / 2, 'letter_img');
+                    image.setInteractive().setDepth(1).setScale(0.6);
+                    letter_img = this.add.image(customWidth / 1.5, customHeight / 2, 'icon_img');
+                    letter_img.setDepth().setScale(0.6);
+                    this.add.text(customWidth / 1.6, customHeight / 1.25, data.icon_name, textStyle2);
+            } else{
+                    image = this.add.image(customWidth / 2.5, customHeight / 2.5, 'letter_img');
+                    image.setInteractive().setDepth(1).setScale(0.3);
+                    letter_img = this.add.image(customWidth / 1.35, customHeight / 2 + 100 , 'icon_img');
+                    letter_img.setDepth().setScale(0.3);
+                    this.add.text(customWidth / 2, customHeight / 1.3, data.icon_name, textStyle2);
+            }
+        })
+        .catch(error => {
+            console.error('Error fetching initial data:', error);
+        });
 
-function preload() {
-  this.load.image('letter', '/assets/A.png');
-}
+      graphics = this.add.graphics();
+      if(!isMobile){
+        graphics.lineStyle(50, 0x5e17eb);
+      } else {
+        graphics.lineStyle(25, 0x5e17eb);
+      }
+      this.add.image(customWidth / 2 * 1.6 - 0.5, 50 , 'topLogo');
 
-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);
-}
+      this.input.on('pointerdown', function (pointer) {
+          if (image.getBounds().contains(pointer.x, pointer.y)) {
+              // Start dragging only if the pointer is over the image
+              isDragging = true;
 
-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);
-}
+              // Bring the graphics to the front
+              this.children.bringToTop(graphics);
 
-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();
-}
+              graphics.beginPath();
+              graphics.moveTo(pointer.x, pointer.y);
+          }
+      }, this);
 
-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>
+      this.input.on('pointermove', function (pointer) {
+          if (isDragging) { 
+              graphics.lineTo(pointer.x, pointer.y);
+              graphics.strokePath();
+          }
+      }, this);
+      this.input.on('pointerup', function () {
+          isDragging = false;
+          graphics.closePath();
+      }, this);   
+  } 
+       
+  function update() {}
+
+</script>
\ No newline at end of file
diff --git a/src/pages/tracing/temp.astro b/src/pages/tracing/temp.astro
index e69de29..7f60552 100644
--- a/src/pages/tracing/temp.astro
+++ b/src/pages/tracing/temp.astro
@@ -0,0 +1,77 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="">
+    <main>
+        <div>
+      
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+      </main>
+</Layout>
+<script is:inline>
+ var config = {
+    type: Phaser.AUTO,
+    width: 800,
+    height: 600,
+    scene: {
+        preload: preload,
+        create: create
+    }
+};
+
+var game = new Phaser.Game(config);
+
+var saveButton;
+
+function preload() {
+    // Preload game assets if needed
+}
+
+function create() {
+    // Create game objects and render your scene
+
+    // Create the "Save" button
+    saveButton = this.add.text(700, 550, 'Save', { fontSize: '24px', fill: '#fff' });
+    saveButton.setInteractive();
+    saveButton.on('pointerdown', captureAndSave);
+}
+
+function captureAndSave() {
+    // Capture the game canvas as an image
+    game.canvas.toBlob(function (blob) {
+        // Convert the captured image to JPG
+        var url = URL.createObjectURL(blob);
+
+        // Create a download link for the JPG image
+        var a = document.createElement("a");
+        a.href = url;
+        a.download = "screenshot.jpg";
+        a.click();
+
+        // Clean up the URL object
+        URL.revokeObjectURL(url);
+    }, "image/jpeg");
+}
+
+
+</script>
+<!-- <script is:inline>
+    // Include the html2canvas library (make sure to include it in your HTML file)
+// You can download it from https://html2canvas.hertzen.com/
+
+// Capture a screenshot of the entire webpage
+html2canvas(document.body).then(function(canvas) {
+    // Convert the canvas to a data URL
+    var screenshotDataUrl = canvas.toDataURL('image/jpeg');
+
+    // Create a link to download the image
+    var a = document.createElement('a');
+    a.href = screenshotDataUrl;
+    a.download = 'screenshot.jpg';
+    
+    // Trigger a click event to download the image
+    a.click();
+});
+
+</script> -->
\ No newline at end of file