diff --git a/public/assets/svg/button-icon.svg b/public/assets/svg/button-icon.svg
new file mode 100644
index 0000000..bb03853
--- /dev/null
+++ b/public/assets/svg/button-icon.svg
@@ -0,0 +1 @@
+<svg fill="#0000FF" width="40px" height="40px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg"><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="M790.706 338.824v112.94H395.412c-31.06 0-56.47 25.3-56.47 56.471v744.509c17.73-6.325 36.592-10.391 56.47-10.391h1129.412c19.877 0 38.738 4.066 56.47 10.39V508.236c0-31.171-25.412-56.47-56.47-56.47h-395.295V338.824h395.295c93.402 0 169.411 76.009 169.411 169.411v1242.353c0 93.403-76.01 169.412-169.411 169.412H395.412C302.009 1920 226 1843.99 226 1750.588V508.235c0-93.402 76.01-169.411 169.412-169.411h395.294Zm734.118 1016.47H395.412c-31.06 0-56.47 25.299-56.47 56.47v338.824c0 31.172 25.41 56.47 56.47 56.47h1129.412c31.058 0 56.47-25.298 56.47-56.47v-338.823c0-31.172-25.412-56.47-56.47-56.47ZM1016.622-.023v880.151l246.212-246.325 79.85 79.85-382.532 382.644-382.645-382.644 79.85-79.85L903.68 880.128V-.022h112.941ZM564.824 1468.235c-62.344 0-112.942 50.71-112.942 112.941s50.598 112.942 112.942 112.942c62.343 0 112.94-50.71 112.94-112.942 0-62.23-50.597-112.94-112.94-112.94Z" fill-rule="evenodd"></path> </g></svg>
\ No newline at end of file
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 5804975..3a82966 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -18,6 +18,7 @@ import Layout from '../../layouts/Layout.astro';
         height: window.innerHeight / 2,
     };
     var assetsList = {}
+    var snapshotButton;
 
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
@@ -59,6 +60,7 @@ import Layout from '../../layouts/Layout.astro';
     function preload() {
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
     }
 
     function create() {
@@ -339,53 +341,78 @@ import Layout from '../../layouts/Layout.astro';
                         graphics.strokePath();
                     }
                 };
-        }
+                // Add a "Save Snapshot" button
+                snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, 'buttonIcons');
+                // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
+                snapshotButton.setInteractive();
+                snapshotButton.on('pointerdown', () => {
+                    captureSnapshot(this);
+                });
+    }
+    function captureSnapshot(game) {
+        game.renderer.snapshot((image) => {
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
 
-        function startDrawing(x, y) {
-            if (!isErasing) {
-                graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
-            } else {
-                graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
-            }
-            graphics.beginPath();
-            graphics.moveTo(x, y);
-            
-        }
+            // Download the snapshot as an image
+            const link = document.createElement('a');
+            link.href = image.src;
+            link.download = 'snapshot.png';
+            link.click();
+            document.body.removeChild(image);
 
-        function continueDrawing(x, y) {
-            if (!isErasing) {
-                graphics.lineTo(x, y); // Drawing
-            } else {
-                graphics.lineTo(x, y); // Erasing by drawing with a white line
-            }
-            graphics.strokePath();
-        }
+            // Clear the drawing
+            // graphics.clear();
+        });
+    }
 
-        function finishDrawing() {
-            // No need for additional actions here
+    function startDrawing(x, y) {
+        if (!isErasing) {
+            graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
+        } else {
+            graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
         }
+        graphics.beginPath();
+        graphics.moveTo(x, y);
+        
+    }
 
-        function clearDrawing() {
-            graphics.clear();
+    function continueDrawing(x, y) {
+        if (!isErasing) {
+            graphics.lineTo(x, y); // Drawing
+        } else {
+            graphics.lineTo(x, y); // Erasing by drawing with a white line
         }
+        graphics.strokePath();
+    }
 
-        function update() {
-            const slider = document.querySelector('input[type="range"]');
-            if (slider && !isDrawing) {
-                const sliderValue = parseInt(slider.value);
-                const max = parseInt(slider.max);
-                const width = slider.offsetWidth;
-                const offsetX = (sliderValue - 2) / (max - 2) * width;
-                slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
-            };
-            const cursorSize = brushSize * cursorSizeMultiplier;
-            customCursor.clear(); // Clear the previous frame
-            customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
-            customCursor.strokeCircle(0, 0, cursorSize);
-            // Position the cursor at the current mouse pointer coordinates
-            customCursor.x = this.input.x;
-            customCursor.y = this.input.y;
-        }
+    function finishDrawing() {
+        // No need for additional actions here
+    }
+
+    function clearDrawing() {
+        graphics.clear();
+    }
+
+    function update() {
+        const slider = document.querySelector('input[type="range"]');
+        if (slider && !isDrawing) {
+            const sliderValue = parseInt(slider.value);
+            const max = parseInt(slider.max);
+            const width = slider.offsetWidth;
+            const offsetX = (sliderValue - 2) / (max - 2) * width;
+            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+        };
+        const cursorSize = brushSize * cursorSizeMultiplier;
+        customCursor.clear(); // Clear the previous frame
+        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.strokeCircle(0, 0, cursorSize);
+        // Position the cursor at the current mouse pointer coordinates
+        customCursor.x = this.input.x;
+        customCursor.y = this.input.y;
+    }
 
 
 
diff --git a/src/pages/tracing/index.astro b/src/pages/tracing/index.astro
index d332f0d..dc6709c 100644
--- a/src/pages/tracing/index.astro
+++ b/src/pages/tracing/index.astro
@@ -4,184 +4,152 @@ import Layout from "../../layouts/Layout.astro";
 <Layout title="">
     <main>
         <div>
-            <canvas id="myCanvas" width="578" height="200"></canvas>
-            <button id="download">download</button>
         </div>
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-        <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
-
       </main>
 </Layout>
 <script is:inline>
-    var canvas = document.getElementById('myCanvas');
-    var context = canvas.getContext('2d');
+const isMobile = window.innerWidth <= 768;
+const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+};
+var assetsList = {}
+var snapshotButton;
 
-    // draw a blue cloud
-    context.beginPath();
-    context.moveTo(170, 80);
-    context.bezierCurveTo(130, 100, 130, 150, 230, 150);
-    context.bezierCurveTo(250, 180, 320, 180, 340, 150);
-    context.bezierCurveTo(420, 150, 420, 120, 390, 100);
-    context.bezierCurveTo(430, 40, 370, 30, 340, 50);
-    context.bezierCurveTo(320, 5, 250, 20, 250, 50);
-    context.bezierCurveTo(200, 5, 150, 20, 170, 80);
-    context.closePath();
-    context.lineWidth = 5;
-    context.fillStyle = '#8ED6FF';
-    context.fill();
-    context.strokeStyle = '#0000ff';
-    context.stroke();
 
-    download.addEventListener("click", function() {
-    // only jpeg is supported by jsPDF
-    var imgData = canvas.toDataURL("image/jpeg", 1.0);
-    var pdf = new jsPDF();
+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;
+        assetsList.icon_img = "https://management.beanstalkedu.com/assets/" + icon_img;
 
-    pdf.addImage(imgData, 'JPEG', 0, 0);
-    pdf.save("download.pdf");
-    }, false);
-        const isMobile = window.innerWidth <= 768;
-        const drawingZone = {
-            x: isMobile ? 0 : window.innerWidth / 4,
-            y: window.innerHeight / 4,
-            width: isMobile ? window.innerWidth : window.innerWidth / 2,
-            height: window.innerHeight / 2,
+        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,
+            },
         };
-        var assetsList = {}
+        const game = new Phaser.Game(config);
+    })
+    .catch(error => {
+        console.error('Error fetching initial data:', error);
+    });
 
-        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;
-                assetsList.icon_img = "https://management.beanstalkedu.com/assets/" + icon_img;
+var graphics;
+var isDragging = false;
+var image;
+var customWidth = window.innerWidth;
+var customHeight = window.innerHeight;
 
-                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,
-                    },
-                };
+function preload() {
+    this.load.image('letter_img', assetsList.letter_img);
+    this.load.image('icon_img', assetsList.icon_img);
+    this.load.image('topLogo', '/assets/top_logo.png');
+}
 
-                const game = new Phaser.Game(config);
-            })
-            .catch(error => {
-                console.error('Error fetching initial data:', error);
-            });
-
-        var graphics;
-        var isDragging = false;
-        var image;
-        var letter_img;
-        const customWidth = window.innerWidth;
-        const customHeight = window.innerHeight;
-
-        function preload() {
-            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 }) => {
-                    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);
-                });
-
-            graphics = this.add.graphics();
+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 }) => {
+            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', fontWeight : 'bold'}).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) {
-                graphics.lineStyle(50, 0x5e17eb);
+                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 {
-                graphics.lineStyle(25, 0x5e17eb);
+                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);
             }
-            this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+        })
+        .catch(error => {
+            console.error('Error fetching initial data:', error);
+        });
 
-            this.input.on('pointerdown', function (pointer) {
-                if (image.getBounds().contains(pointer.x, pointer.y)) {
-                    isDragging = true;
-                    this.children.bringToTop(graphics);
-                    graphics.beginPath();
-                    graphics.moveTo(pointer.x, pointer.y);
-                }
-            }, this);
+    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');
 
-            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);
-
-        //     const saveButton = this.add.text(20, 20, 'Save', {
-        //         font: '24px Arial',
-        //         fill: '#ffffff',
-        //         backgroundColor: '#05b3a4',
-        //         padding: {
-        //             x: 10,
-        //             y: 5
-        //         },
-        //         borderRadius: 5
-        //     });
-
-        //     saveButton.setInteractive();
-
-        //     saveButton.on('pointerdown', () => {
-        //         takeSnapshot(this);
-        //     });
-
-        //     function takeSnapshot(scene) {
-        //     const snapshot = scene.sys.canvas.toDataURL('image/png');
-        //     const a = document.createElement('a');
-        //     a.style.display = 'none';
-        //     document.body.appendChild(a);
-        //     a.href = snapshot;
-        //     a.download = 'traced_letter.png';
-        //     a.click();
-        //     document.body.removeChild(a);
-        // }
+    this.input.on('pointerdown', function (pointer) {
+        if (image.getBounds().contains(pointer.x, pointer.y)) {
+            isDragging = true;
+            this.children.bringToTop(graphics);
+            graphics.beginPath();
+            graphics.moveTo(pointer.x, pointer.y);
         }
+    }, this);
+
+    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);
+
+    // Add a "Save Snapshot" button
+    snapshotButton = this.add.text(customWidth - 150, customHeight - 80, 'SAVE', { fill: '#fff', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
+    snapshotButton.setInteractive();
+    snapshotButton.on('pointerdown', () => {
+        captureSnapshot(this);
+    });
+}
+
+function update() {}
+
+function captureSnapshot(game) {
+    game.renderer.snapshot((image) => {
+        image.style.width = '160px';
+        image.style.height = '120px';
+        image.style.paddingLeft = '2px';
+        document.body.appendChild(image);
+
+        // Download the snapshot as an image
+        const link = document.createElement('a');
+        link.href = image.src;
+        link.download = 'snapshot.png';
+        link.click();
+        document.body.removeChild(image);
+
+        // Clear the drawing
+        // graphics.clear();
+    });
+}
 
-        function update() {}
 
 </script>
\ No newline at end of file
diff --git a/src/pages/tracing/snapshot.astro b/src/pages/tracing/snapshot.astro
new file mode 100644
index 0000000..21b6da2
--- /dev/null
+++ b/src/pages/tracing/snapshot.astro
@@ -0,0 +1,136 @@
+---
+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>
+  class Example extends Phaser.Scene {
+    isKeyDown = false;
+    isMouseDown = false;
+    graphicsPath = [];
+    graphics;
+    snapHistory = [];
+    time = 0;
+    div = document.createElement('div');
+
+    preload() {
+        this.load.image('myImage', 'assets/sprites/phaser1.png');
+        this.load.glsl('shader0', 'assets/shaders/shader0.frag');
+    }
+
+    create() {
+        this.div.innerHTML = 'PRESS SPACE TO TAKE SNAPSHOT<br>';
+        document.body.appendChild(this.div);
+
+        for (let i = 0; i < 5; ++i) {
+            const image = this.add.image(Math.random() * 800, Math.random() * 600, 'myImage');
+        }
+
+        this.graphics = this.add.graphics({ x: 0, y: 0 });
+
+        game.canvas.onmousedown = (e) => {
+            this.isMouseDown = true;
+            this.graphics.clear();
+            this.graphicsPath.length = 0;
+        };
+        game.canvas.onmouseup = (e) => {
+            this.isMouseDown = false;
+        };
+        game.canvas.onmousemove = (e) => {
+            const mouseX = e.clientX - game.canvas.offsetLeft;
+            const mouseY = e.clientY - game.canvas.offsetTop;
+            if (this.isMouseDown) {
+                this.graphicsPath.push({ x: mouseX, y: mouseY });
+            }
+        };
+        window.onkeydown = (e) => {
+            if (e.keyCode === 32 && !this.isKeyDown) {
+                game.renderer.snapshot((image) => {
+                    image.style.width = '160px';
+                    image.style.height = '120px';
+                    image.style.paddingLeft = '2px';
+                    this.snapHistory.push(image);
+                    console.log('snap!');
+                    document.body.appendChild(image);
+                });
+                this.isKeyDown = true;
+            }
+        };
+        window.onkeyup = (e) => {
+            if (e.keyCode === 32) {
+                this.isKeyDown = false;
+            }
+        };
+
+        // Create a "Save Now" button
+        const saveButton = this.add.text(650, 10, 'Save Now', { fill: '#05b3a4' });
+        saveButton.setInteractive();
+        saveButton.on('pointerdown', () => {
+            // Hide the "Save Now" text
+            saveButton.visible = false;
+
+            // Trigger the snapshot
+            game.renderer.snapshot((image) => {
+                image.style.width = '160px';
+                image.style.height = '120px';
+                image.style.paddingLeft = '2px';
+                this.snapHistory.push(image);
+                console.log('snap!');
+                document.body.appendChild(image);
+
+                // Download the snapshot as an image
+                const link = document.createElement('a');
+                link.href = image.src;
+                link.download = 'snapshot.png';
+                link.click();
+                document.body.removeChild(image);  // Remove the image after download
+
+                // Disable snapshot preview
+                this.graphics.clear();
+                this.graphicsPath = [];
+
+                // Show the "Save Now" text again
+                saveButton.visible = true;
+            });
+        });
+    }
+
+    update() {
+        const length = this.graphicsPath.length;
+
+        this.graphics.clear();
+        this.graphics.lineStyle(10.0, 0xffff00, 1.0);
+        this.graphics.beginPath();
+        for (let i = 0; i < length; ++i) {
+            const node = this.graphicsPath[i];
+
+            if (i !== 0) {
+                this.graphics.lineTo(node.x, node.y);
+            } else {
+                this.graphics.moveTo(node.x, node.y);
+            }
+        }
+        this.graphics.strokePath();
+        this.graphics.closePath();
+
+        this.time += 0.01;
+    }
+}
+
+const config = {
+    type: Phaser.WEBGL,
+    width: 800,
+    height: 600,
+    backgroundColor: '#2d2d2d',
+    parent: 'phaser-example',
+    scene: Example,
+};
+
+const game = new Phaser.Game(config);
+
+</script>
\ No newline at end of file