diff --git a/build_files/JavaScript/Engine/Simple function handlers/changeSpriteValues.js b/build_files/JavaScript/Engine/Simple function handlers/changeSpriteValues.js
index 550cb8b..10a201c 100644
--- a/build_files/JavaScript/Engine/Simple function handlers/changeSpriteValues.js	
+++ b/build_files/JavaScript/Engine/Simple function handlers/changeSpriteValues.js	
@@ -1,166 +1,2 @@
-// Attach input event listeners
-document.getElementById('spriteXInput').addEventListener('input', updateSpriteX);
-document.getElementById('spriteYInput').addEventListener('input', updateSpriteY);
-document.getElementById('spriteWidthInput').addEventListener('input', updateSpriteWidth);
-document.getElementById('spriteHeightInput').addEventListener('input', updateSpriteHeight);
-
-function updateSpriteX() {
-    if (selectedId) {
-        const sprite = stage.findOne(`#${selectedId}`);
-        if (sprite) {
-            const newX = parseFloat(document.getElementById('spriteXInput').value);
-            sprite.x(newX);
-            sprite.getLayer().draw();
-        }
-    }
-}
-
-function updateSpriteY() {
-    if (selectedId) {
-        const sprite = stage.findOne(`#${selectedId}`);
-        if (sprite) {
-            const newY = parseFloat(document.getElementById('spriteYInput').value);
-            sprite.y(newY);
-            sprite.getLayer().draw();
-        }
-    }
-}
-
-function updateSpriteWidth() {
-    if (selectedId) {
-        const sprite = stage.findOne(`#${selectedId}`);
-        if (sprite) {
-            const newWidth = parseFloat(document.getElementById('spriteWidthInput').value);
-            sprite.width(newWidth);
-            sprite.offsetX(newWidth / 2); 
-            sprite.getLayer().batchDraw();
-        }
-    }
-}
-
-function updateSpriteHeight() {
-    if (selectedId) {
-        const sprite = stage.findOne(`#${selectedId}`);
-        if (sprite) {
-            const newHeight = parseFloat(document.getElementById('spriteHeightInput').value);
-            sprite.height(newHeight);
-            sprite.offsetY(newHeight / 2);
-            sprite.getLayer().batchDraw();
-        }
-    }
-}
-
-function moveSpriteUp() {
-    if (selectedId) {
-        const sprite = stage.findOne(`#${selectedId}`);
-        if (sprite) {
-            const layer = sprite.getLayer();
-            if (layer) {
-                const children = layer.getChildren();
-                const currentZIndex = sprite.zIndex();
-                if (currentZIndex < children.length - 1) {
-                    sprite.zIndex(currentZIndex + 1); // Move up
-                    layer.batchDraw(); // Redraw the layer
-                }
-            }
-        }
-    }
-}
-
-function moveSpriteDown() {
-    if (selectedId) {
-        const sprite = stage.findOne(`#${selectedId}`);
-        if (sprite) {
-            const layer = sprite.getLayer();
-            if (layer) {
-                const currentZIndex = sprite.zIndex();
-                if (currentZIndex > 0) {
-                    sprite.zIndex(currentZIndex - 1); // Move down
-                    layer.batchDraw(); // Redraw the layer
-                }
-            }
-        }
-    }
-}
-
-document.getElementById('moveSpriteUp').addEventListener('click', moveSpriteUp);
-document.getElementById('moveSpriteDown').addEventListener('click', moveSpriteDown);
-
-// Function to change X value input to sprite's X position
-function changeXvalueInputToSprite() {
-    if (selectedId) {
-        const sprite = stage.findOne(`#${selectedId}`);
-        if (sprite) {
-            document.getElementById('spriteXInput').value = sprite.x();
-        }
-    }
-}
-
-// Function to change Y value input to sprite's Y position
-function changeYvalueInputToSprite() {
-    if (selectedId) {
-        const sprite = stage.findOne(`#${selectedId}`);
-        if (sprite) {
-            document.getElementById('spriteYInput').value = sprite.y();
-        }
-    }
-}
-
-// Function to change width and height inputs to sprite's current width and height
-function changeSizeInputsToSprite() {
-    if (selectedId) {
-        const sprite = stage.findOne(`#${selectedId}`);
-        if (sprite) {
-            document.getElementById('spriteWidthInput').value = sprite.width();
-            document.getElementById('spriteHeightInput').value = sprite.height();
-        }
-    }
-}
-
-// Update all input values to reflect current sprite properties
-function updateAllValues() {
-    if (selectedId !== null) {
-        changeSelectedObjectText();
-        changeXvalueInputToSprite();
-        changeYvalueInputToSprite();
-        changeSizeInputsToSprite(); // Include size updates
-    } else {
-        // If no sprite is selected, set all inputs to 0
-        document.getElementById('spriteXInput').value = 0;
-        document.getElementById('spriteYInput').value = 0;
-        document.getElementById('spriteWidthInput').value = 0;
-        document.getElementById('spriteHeightInput').value = 0;
-
-        changeSelectedObjectText(); // Update the text for no selection case
-    }
-}
-
-// Function to change selected object text
-function changeSelectedObjectText() {
-    const selectedImageShowerText = document.getElementById('selectedSpriteShower');
-    if (selectedId !== null) {
-        selectedImageShowerText.style.color = 'green';
-        selectedImageShowerText.textContent = 'An Object Selected!';
-    } else {
-        selectedImageShowerText.style.color = 'red';
-        selectedImageShowerText.textContent = 'No Object Selected!';
-    }
-}
-
-// Initialization
-document.addEventListener('DOMContentLoaded', () => {
-    changeSelectedObjectText();
-    initializeKonva(); // Assume this initializes your Konva stage and layers
-
-    // Add a click listener to the stage to handle clicks on empty space
-    const canvas = document.querySelector('.gameCanvas');
-    stage = canvas.__konvaStage; // Ensure 'stage' is properly assigned
-    if (stage) {
-        stage.on('click', function(e) {
-            // Deselect if the click was on empty space
-            if (e.target === stage) {
-                deselectImage();
-            }
-        });
-    }
-});
\ No newline at end of file
+function updateSpriteX(){if(selectedId){let e=stage.findOne(`#${selectedId}`);if(e){let t=parseFloat(document.getElementById("spriteXInput").value);e.x(t),e.getLayer().draw()}}}function updateSpriteY(){if(selectedId){let e=stage.findOne(`#${selectedId}`);if(e){let t=parseFloat(document.getElementById("spriteYInput").value);e.y(t),e.getLayer().draw()}}}function updateSpriteWidth(){if(selectedId){let e=stage.findOne(`#${selectedId}`);if(e){let t=parseFloat(document.getElementById("spriteWidthInput").value);e.width(t),e.offsetX(t/2),e.getLayer().batchDraw()}}}function updateSpriteHeight(){if(selectedId){let e=stage.findOne(`#${selectedId}`);if(e){let t=parseFloat(document.getElementById("spriteHeightInput").value);e.height(t),e.offsetY(t/2),e.getLayer().batchDraw()}}}function moveSpriteUp(){if(selectedId){let e=stage.findOne(`#${selectedId}`);if(e){let t=e.getLayer();if(t){let n=t.getChildren(),i=e.zIndex();i<n.length-1&&(e.zIndex(i+1),t.batchDraw())}}}}function moveSpriteDown(){if(selectedId){let e=stage.findOne(`#${selectedId}`);if(e){let t=e.getLayer();if(t){let n=e.zIndex();n>0&&(e.zIndex(n-1),t.batchDraw())}}}}function changeXvalueInputToSprite(){if(selectedId){let e=stage.findOne(`#${selectedId}`);e&&(document.getElementById("spriteXInput").value=e.x())}}function changeYvalueInputToSprite(){if(selectedId){let e=stage.findOne(`#${selectedId}`);e&&(document.getElementById("spriteYInput").value=e.y())}}function changeSizeInputsToSprite(){if(selectedId){let e=stage.findOne(`#${selectedId}`);e&&(document.getElementById("spriteWidthInput").value=e.width(),document.getElementById("spriteHeightInput").value=e.height())}}function updateAllValues(){null!==selectedId?(changeSelectedObjectText(),changeXvalueInputToSprite(),changeYvalueInputToSprite(),changeSizeInputsToSprite()):(document.getElementById("spriteXInput").value=0,document.getElementById("spriteYInput").value=0,document.getElementById("spriteWidthInput").value=0,document.getElementById("spriteHeightInput").value=0,changeSelectedObjectText())}function changeSelectedObjectText(){let e=document.getElementById("selectedSpriteShower");null!==selectedId?(e.style.color="green",e.textContent="An Object Selected!"):(e.style.color="red",e.textContent="No Object Selected!")}document.getElementById("spriteXInput").addEventListener("input",updateSpriteX),document.getElementById("spriteYInput").addEventListener("input",updateSpriteY),document.getElementById("spriteWidthInput").addEventListener("input",updateSpriteWidth),document.getElementById("spriteHeightInput").addEventListener("input",updateSpriteHeight),document.getElementById("moveSpriteUp").addEventListener("click",moveSpriteUp),document.getElementById("moveSpriteDown").addEventListener("click",moveSpriteDown),document.addEventListener("DOMContentLoaded",()=>{changeSelectedObjectText(),initializeKonva();let e=document.querySelector(".gameCanvas");(stage=e.__konvaStage)&&stage.on("click",function(e){e.target===stage&&deselectImage()})});
+// minified to keep lightweighed
\ No newline at end of file
diff --git a/build_files/JavaScript/Engine/engineFunction.js b/build_files/JavaScript/Engine/engineFunction.js
index 3815b30..d4b020f 100644
--- a/build_files/JavaScript/Engine/engineFunction.js
+++ b/build_files/JavaScript/Engine/engineFunction.js
@@ -290,4 +290,4 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         });
     }
-});
+});
\ No newline at end of file
diff --git a/build_files/html/Engine/BlockyEditor.html b/build_files/html/Engine/BlockyEditor.html
index 9c37c78..b107920 100644
--- a/build_files/html/Engine/BlockyEditor.html
+++ b/build_files/html/Engine/BlockyEditor.html
@@ -1,67 +1 @@
-<!--
-This file uses the library "Blockly" developed by Google
-More detials can be found on "LiteForge-Evo/Third-party libraries/Blocky LICENSE"
--->
-
-<!--
-This file is made to test blocky out (not used in the engine)
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Blockly Visual Editor</title>
-    <script src="../../../libraries/blockly/blockly.min.js"></script>
-    <style>
-        html, body {
-            height: 100%;
-            margin: 0;
-            padding: 0;
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
-            overflow: hidden;
-            box-sizing: border-box;
-        }
-
-        #blocklyDiv {
-            height: 100vh; /* Full viewport height */
-            width: 100vw; /* Full viewport width */
-            border: 2px solid #ddd;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            background-color: #fff;
-            position: absolute; /* Ensure it takes full space */
-            top: 0;
-            left: 0;
-            box-sizing: border-box;
-            line-height: 1.2;
-        }
-    </style>
-</head>
-<body>
-    <div id="blocklyDiv"></div>
-    <script>
-        window.onload = function() {
-            var workspace = Blockly.inject('blocklyDiv', {
-                toolbox: '<xml id="toolbox" style="display: none">' +
-                        '  <block type="controls_if"></block>' +
-                        '  <block type="logic_compare"></block>' +
-                        '  <block type="logic_operation"></block>' +
-                        '  <block type="logic_negate"></block>' +
-                        '  <block type="math_number"></block>' +
-                        '  <block type="math_arithmetic"></block>' +
-                        '</xml>',
-                grid: {
-                    spacing: 20,
-                    length: 3,
-                    colour: '#ccc',
-                    snap: true
-                },
-                scrollbars: true,
-                trashcan: false
-            });
-        };
-    </script>
-</body>
-</html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Blockly Visual Editor</title><link rel="icon" href="../../../icon/LFE_logo.png" type="image/png"><script src="../../../libraries/blockly/blockly.min.js"></script><style>body,html{height:100%;margin:0;padding:0;font-family:Arial,sans-serif;background-color:#f4f4f4;overflow:hidden;box-sizing:border-box}#blocklyDiv{height:100vh;width:100vw;border:2px solid #ddd;box-shadow:0 4px 8px rgba(0,0,0,.1);background-color:#fff;position:absolute;top:0;left:0;box-sizing:border-box;line-height:1.2}</style></head><body><div id="blocklyDiv"></div><script>window.onload=function(){Blockly.inject("blocklyDiv",{toolbox:'<xml id="toolbox" style="display: none">  <block type="controls_if"></block>  <block type="logic_compare"></block>  <block type="logic_operation"></block>  <block type="logic_negate"></block>  <block type="math_number"></block>  <block type="math_arithmetic"></block></xml>',grid:{spacing:20,length:3,colour:"#ccc",snap:!0},scrollbars:!0,trashcan:!1})}</script></body></html>
\ No newline at end of file
diff --git a/build_files/html/Engine/Engine.html b/build_files/html/Engine/Engine.html
index 8279019..e9e3671 100644
--- a/build_files/html/Engine/Engine.html
+++ b/build_files/html/Engine/Engine.html
@@ -9,6 +9,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LiteForge Evo</title>
+    <link rel="icon" href="../../../icon/LFE_logo.png" type="image/png">
     <link rel="stylesheet" href="../../css/styles.css">
     <link rel="stylesheet" href="../../css/EngineUI.css">
 
@@ -20,6 +21,9 @@
 
         // For storing selected sprites
         let selectedId = null;
+
+        // For storing sprite frames
+        let engineState;
     </script>
 
     <!-- CodeMirror CSS -->
diff --git a/build_files/html/Engine/PreviewGame.html b/build_files/html/Engine/PreviewGame.html
index dcbe302..da45854 100644
--- a/build_files/html/Engine/PreviewGame.html
+++ b/build_files/html/Engine/PreviewGame.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="../../css/styles.css">
     <title>Preview Game</title>
+    <link rel="icon" href="../../../icon/LFE_logo.png" type="image/png">
     <script src="../../../libraries/konva/konva.min.js"></script>
     <script src="../../../libraries/Sat/SAT.js"></script> <!-- Include SAT.js -->
     <style>
@@ -172,65 +173,80 @@ <h3>Console</h3>
         }
 
         function loadGameData() {
-            const gameDataJSON = localStorage.getItem('gameData');
-            if (!gameDataJSON) {
-                console.error('No game data found in local storage.');
-                return;
+    const gameDataJSON = localStorage.getItem('gameData');
+    if (!gameDataJSON) {
+        console.error('No game data found in local storage.');
+        return;
+    }
+    try {
+        const gameData = JSON.parse(gameDataJSON);
+        const sprites = gameData.spriteData;
+        const JSCode = gameData.JsCode;
+        const BlocklyCode = gameData.blocklyCode;
+
+        initializeKonva();
+
+        sprites.forEach(sprite => {
+            if (sprite.src) {
+                const img = new Image();
+                img.src = sprite.src;
+
+                img.onload = () => {
+                    const konvaImage = new Konva.Image({
+                        image: img,
+                        id: sprite.id,
+                        x: sprite.left,
+                        y: sprite.top,
+                        width: sprite.width,
+                        height: sprite.height,
+                        offsetX: sprite.width / 2,
+                        offsetY: sprite.height / 2,
+                        draggable: false // Initially not draggable
+                    });
+
+                    layer.add(konvaImage);
+                    layer.draw();
+
+                    updateSATPolygon(sprite.id);
+
+                    // Attach an event listener to update SAT polygon on drag/transform
+                    konvaImage.on('dragmove transform', () => {
+                        updateSATPolygon(sprite.id);
+                    });
+                };
             }
-            try {
-                const gameData = JSON.parse(gameDataJSON);
-                const sprites = gameData.spriteData;
-                const JSCode = gameData.JsCode;
-                const BlocklyCode = gameData.blocklyCode;
-
-                initializeKonva();
-
-                sprites.forEach(sprite => {
-                    if (sprite.src) {
-                        const img = new Image();
-                        img.src = sprite.src;
-
-                        img.onload = () => {
-                            const konvaImage = new Konva.Image({
-                                image: img,
-                                id: sprite.id,
-                                x: sprite.left,
-                                y: sprite.top,
-                                width: sprite.width,
-                                height: sprite.height,
-                                offsetX: sprite.width / 2,
-                                offsetY: sprite.height / 2,
-                            });
-
-                            layer.add(konvaImage);
-                            layer.draw();
-
-                            updateSATPolygon(sprite.id);
-
-                            konvaImage.on('dragmove transform', () => {
-                                updateSATPolygon(sprite.id);
-                            });
-                        };
-                    }
-                });
+        });
 
-                if (typeof JSCode === 'string' && JSCode.trim()) {
-                    eval(JSCode);
-                } else {
-                    console.warn('Invalid or empty JSCode.');
-                }
-
-                if (typeof BlocklyCode === 'string' && BlocklyCode.trim()) {
-                    eval(BlocklyCode);
-                } else {
-                    console.warn('Invalid or empty BlocklyCode.');
-                }
+        // Debugging logs
+        console.log('Evaluating JSCode:', JSCode);
+        if (typeof JSCode === 'string' && JSCode.trim()) {
+            try {
+                eval(JSCode);
+            } catch (e) {
+                console.error('Error evaluating JSCode:', e);
+            }
+        } else {
+            console.warn('Invalid or empty JSCode.');
+        }
 
+        // Debugging logs
+        console.log('Evaluating BlocklyCode:', BlocklyCode);
+        if (typeof BlocklyCode === 'string' && BlocklyCode.trim()) {
+            try {
+                eval(BlocklyCode);
             } catch (e) {
-                console.error('Error loading game data:', e);
+                console.error('Error evaluating BlocklyCode:', e);
             }
+        } else {
+            console.warn('Invalid or empty BlocklyCode.');
         }
 
+    } catch (e) {
+        console.error('Error loading game data:', e);
+    }
+}
+
+
         function convertKonvaToSAT(konvaImage) {
             const vertices = getKonvaVertices(konvaImage);
             return new SAT.Polygon(new SAT.Vector(konvaImage.x(), konvaImage.y()), vertices);
diff --git a/build_files/html/Settings.html b/build_files/html/Settings.html
index 374bb10..827ab63 100644
--- a/build_files/html/Settings.html
+++ b/build_files/html/Settings.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LiteForge Evo Settings</title>
+    <link rel="icon" href="../../icon/LFE_logo.png" type="image/png">
     <link rel="stylesheet" href="../css/styles.css">
     <style>
         body {
diff --git a/build_files/html/Showcase.html b/build_files/html/Showcase.html
new file mode 100644
index 0000000..2d7e925
--- /dev/null
+++ b/build_files/html/Showcase.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="../../icon/LFE_logo.png" type="image/png"><title>Games Showcase</title><style>body{background-color:#272727;color:#fff;font-family:Arial,sans-serif;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:20px}.game-item{background-color:#222;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.5);overflow:hidden;margin:20px;max-width:550px;width:100%;transition:transform .3s ease}.game-item iframe{width:100%;height:550px;border:none}.game-item h4{margin:10px;text-align:center}.back-button{position:fixed;bottom:20px;background-color:#333;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-size:1rem;text-align:center;text-decoration:none;left:calc(50% - 60px)}.back-button:hover{background-color:#555}</style></head><body><div class="game-item" id="gameItem"><iframe src="https://itch.io/embed-upload/11510690?color=333333" allowfullscreen></iframe><h4>DVD Animation - 1st Animation Made</h4></div><a href="mainMenu.html" class="back-button">Back to Engine</a><script>function updateScale() {
+    const gameItem = document.getElementById('gameItem');
+    const screenWidth = window.innerWidth;
+
+    // Define breakpoints and scale factors
+    let scale;
+    if (screenWidth >= 1200) {
+        scale = 0.8; // For large screens
+    } else if (screenWidth >= 768) {
+        scale = 0.6; // For medium screens
+    } else {
+        scale = 0.4; // For small screens
+    }
+
+    // Apply scale transform
+    gameItem.style.transform = `scale(${scale})`;
+}
+
+// Initial scale update
+updateScale();
+
+// Update scale on window resize
+window.addEventListener('resize', updateScale);</script></body></html>
+
+<!-- Minified html -->
\ No newline at end of file
diff --git a/build_files/html/mainMenu.html b/build_files/html/mainMenu.html
index 33c116f..82fa1b4 100644
--- a/build_files/html/mainMenu.html
+++ b/build_files/html/mainMenu.html
@@ -4,9 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LiteForge Evo</title>
+    <link rel="icon" href="../../icon/LFE_logo.png" type="image/png">
     <link rel="stylesheet" href="../css/styles.css">
     <link rel="stylesheet" href="../css/mainMenu.css">
     <style>
+        /* Your existing styles here */
+        body {
+            background-color: #222222;
+        }
+
         #header {
             background-color: #222222;
             width: 100%;
@@ -35,12 +41,12 @@
             border-radius: 5px;
             cursor: pointer;
             position: fixed;
-            top: 140px;
+            top: 180px;
             left: 50%;
             transform: translateX(-50%);
         }
 
-        #layout-1 {
+        #layout-1, #layout-2 {
             display: none;
             background-color: #333; /* Adjust background color */
             padding: 20px;
@@ -94,90 +100,124 @@
             z-index: 1100;
         }
 
-/* Responsive adjustments */
-@media (max-width: 600px) {
-    #header h2 {
-        font-size: 1.5rem;
-    }
-
-    #new-project-button {
-        font-size: 1rem;
-        padding: 8px 20px;
-        top: 140px;
-    }
-
-    .settings-button {
-        all: initial;
-        position: fixed;
-        bottom: 10px; 
-        right: 10px;
-        background-color: rgb(51, 0, 99);
-        color: white;
-        border: none;
-        border-radius: 5px;
-        padding: 8px 8px;
-        font-size: 18px;
-        cursor: pointer;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-        transition: background-color 0.3s, transform 0.3s;
-        z-index: 1000;
-    }
-
-    .settings-button:hover {
-        background-color: rgb(75, 0, 129);
-        transform: scale(1.05);
-    }
-
-    .settings-button:focus {
-        outline: none;
-    }
-
-    .toggle {
-        all: initial;
-        position: fixed; 
-        bottom: 70px;
-        right: 15px;
-        border-radius: 5px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-        z-index: 1001;
-        height: 30px;
-        width: 30px;
-        z-index: 2;
-        cursor: pointer;
-        border-radius: 2px;
-        background-color: #666666;
-        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-    }
-
-    .toggle .common {
-        position: absolute;
-        height: 2px;
-        width: 20px;
-        background-color: #8000ff;
-        border-radius: 50px;
-        transition: 0.3s ease;
-        z-index: 2;
-    }
-
-    .toggle .top_line {
-        left: 2px;
-        top: 14px;
-        width: 25px;
-        transform: rotate(45deg);
-    }
-
-    .toggle .bottom_line {
-        left: 2px;
-        top: 14px;
-        width: 25px;
-        transform: rotate(-45deg);
-    }
-
-    .toggle .middle_line {
-        opacity: 0;
-        transform: translateX(20px);
-    }
-}
+        .container {
+            text-align: center;
+        }
+
+        .check-games-button {
+            background-color: #4caf50;
+            color: white;
+            font-size: 1.2rem; 
+            padding: 8px 30px; 
+            border: none; 
+            border-radius: 10px;
+            cursor: pointer;
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+            transition: background-color 0.3s ease, transform 0.2s ease; 
+            margin: 20px 0; 
+        }
+
+        .check-games-button:hover {
+            background-color: #45a049;
+            transform: scale(1.05);
+        }
+
+        .check-games-button:focus {
+            outline: none; 
+            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5);
+        }
+
+        @media (max-width: 600px) {
+            .check-games-button {
+                font-size: 1rem;
+                padding: 6px 25px; 
+            }
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 600px) {
+            #header h2 {
+                font-size: 1.5rem;
+            }
+
+            #new-project-button {
+                font-size: 1rem;
+                padding: 8px 20px;
+                top: 180px;
+            }
+
+            .settings-button {
+                all: initial;
+                position: fixed;
+                bottom: 10px; 
+                right: 10px;
+                background-color: rgb(51, 0, 99);
+                color: white;
+                border: none;
+                border-radius: 5px;
+                padding: 8px 8px;
+                font-size: 18px;
+                cursor: pointer;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+                transition: background-color 0.3s, transform 0.3s;
+                z-index: 1000;
+            }
+
+            .settings-button:hover {
+                background-color: rgb(75, 0, 129);
+                transform: scale(1.05);
+            }
+
+            .settings-button:focus {
+                outline: none;
+            }
+
+            .toggle {
+                all: initial;
+                position: fixed; 
+                bottom: 70px;
+                right: 15px;
+                border-radius: 5px;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+                z-index: 1001;
+                height: 30px;
+                width: 30px;
+                z-index: 2;
+                cursor: pointer;
+                border-radius: 2px;
+                background-color: #666666;
+                box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+            }
+
+            .toggle .common {
+                position: absolute;
+                height: 2px;
+                width: 20px;
+                background-color: #8000ff;
+                border-radius: 50px;
+                transition: 0.3s ease;
+                z-index: 2;
+            }
+
+            .toggle .top_line {
+                left: 2px;
+                top: 14px;
+                width: 25px;
+                transform: rotate(45deg);
+            }
+
+            .toggle .bottom_line {
+                left: 2px;
+                top: 14px;
+                width: 25px;
+                transform: rotate(-45deg);
+            }
+
+            .toggle .middle_line {
+                opacity: 0;
+                transform: translateX(20px);
+            }
+        }
     </style>
 </head>
 
@@ -214,6 +254,12 @@ <h1>MENU</h1>
     <div id="layout-1" style="display: none;">
         <h2>LiteForge Evo engine</h2>
         <p>This is the re-make of the "LiteForge GD" engine made with GDevelop from scratch using only pure programming!</p>
+
+        <div class="container">
+            <button class="check-games-button" onclick="window.location.href = 'Showcase.html'">
+                Check out games created with the engine
+            </button>
+        </div>
     </div>
 
     <!-- Layout 2 Content -->
@@ -228,22 +274,16 @@ <h2>Create New Project</h2>
         function createClicked() {
             document.getElementById('layout-1').style.display = 'none';
             document.getElementById('layout-2').style.display = 'block';
-            document.body.classList.remove('layout-1');
-            document.body.classList.add('layout-2');
         }
 
         function infoClicked() {
             document.getElementById('layout-2').style.display = 'none';
             document.getElementById('layout-1').style.display = 'block';
-            document.body.classList.remove('layout-2');
-            document.body.classList.add('layout-1');
         }
 
         document.addEventListener('DOMContentLoaded', function() {
             document.getElementById('layout-1').style.display = 'block';
             document.getElementById('layout-2').style.display = 'none';
-            document.body.classList.remove('layout-2');
-            document.body.classList.add('layout-1');
         });
 
         function newProject() {
@@ -257,15 +297,15 @@ <h2>Create New Project</h2>
 
     <!-- Device width not supported -->
     <script>
-    document.addEventListener("DOMContentLoaded", function() {
-        if (window.innerWidth < 348) {
-            document.querySelector('.deviceNotSupported').style.display = 'block';
-        }
-    });
+        document.addEventListener("DOMContentLoaded", function() {
+            if (window.innerWidth < 348) {
+                document.querySelector('.deviceNotSupported').style.display = 'block';
+            }
+        });
 
-    function ContinuedWithRisks() {
-        document.querySelector('.deviceNotSupported').style.display = 'none';
-    }
+        function ContinuedWithRisks() {
+            document.querySelector('.deviceNotSupported').style.display = 'none';
+        }
     </script>
 </body>
 </html>
diff --git a/icon/LFE_logo.png b/icon/LFE_logo.png
new file mode 100644
index 0000000..7c38c2b
Binary files /dev/null and b/icon/LFE_logo.png differ
diff --git a/index.html b/index.html
index df2fdad..6629bdc 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LiteForge Evo</title>
     <link rel="stylesheet" href="build_files/css/styles.css">
+    <link rel="icon" href="/icon/LFE_logo.png" type="image/png">
     <style>
         body {
             margin: 0;