diff --git a/interactive.js b/interactive1.js
similarity index 95%
rename from interactive.js
rename to interactive1.js
index e2b01b9..e3c5a48 100644
--- a/interactive.js
+++ b/interactive1.js
@@ -21,16 +21,16 @@ function creatingGrid() {
 creatingGrid();
 
 let img0 = document.getElementById("img0");
-img0.src = "puzzle1/Picture1.png"; //adding the source for the img elements created above.
+img0.src = "puzzle1/piece1.png"; //adding the source for the img elements created above.
 
 let img1 = document.getElementById("img1");
-img1.src = "puzzle1/Picture2.png"; 
+img1.src = "puzzle1/piece2.png"; 
 
 let img2 = document.getElementById("img2");
-img2.src = "puzzle1/Picture3.png"; 
+img2.src = "puzzle1/piece3.png"; 
 
 let img3 = document.getElementById("img3");
-img3.src = "puzzle1/Picture4.png"; 
+img3.src = "puzzle1/piece4.png"; 
 
 //II. Adding event listeners to start and reset buttons
 let pieceContainer = document.getElementById("piece-container");
@@ -114,6 +114,7 @@ let originalPlace = document.getElementsByClassName("piece");
 var globalDraggedItemId = null; // set data and get data are methods that do not exist for touch events. Creating global variable to maintain state.
 
 function handleStart(e) {
+    e.stopPropagation();
     if (e.type === 'dragstart') {
         console.log(e);
         e.dataTransfer.setData('text/plain', e.currentTarget.id); //Seeting the data to add id to my target element that is my div and retriving it in drop- source: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData
@@ -126,10 +127,12 @@ function handleStart(e) {
 
 function handleOverMove(e){ 
     e.preventDefault();
+    e.stopPropagation();
 }
 
 function handleDropEnd(e) { //modify this function with some sort of if statement so that no bug with touch event. (what is hapenign is that the img are otherwise already nested in a drop and cant be moved to drop zones)
     e.preventDefault();
+    e.stopPropagation();
     let draggedItem;
     if (e.type === 'drop') {
         let data = e.dataTransfer.getData("text/plain"); //retrieving id and moving it the div to target. 
@@ -158,8 +161,8 @@ Array.from(dropZone).forEach(function(zone){
     zone.addEventListener('touchend', handleDropEnd);
 });
 
-/* This works for drag but for touch, I need to do some sort of if else statement so the browser detects the correct dropzones/original.
-Array.from(originalPlace).forEach(function(place){ 
+ /*This works for drag but for touch, I need to do some sort of if else statement so the browser detects the correct dropzones/original.
+ Array.from(originalPlace).forEach(function(place){ 
     place.addEventListener('dragover', handleOverMove);
     place.addEventListener('touchmove', handleOverMove);
     place.addEventListener('drop', handleDropEnd);
diff --git a/interactive2.js b/interactive2.js
new file mode 100644
index 0000000..e61dea4
--- /dev/null
+++ b/interactive2.js
@@ -0,0 +1,212 @@
+let puzzleContainer = document.getElementById("puzzle-container");
+
+function creatingGrid() {
+    let rows = 3;
+    let columns = 3;
+
+    for(let i=0; i<rows*columns; i++){
+        let pieceDiv = document.createElement('div')
+        pieceDiv.className = "piece2";
+        puzzleContainer.appendChild(pieceDiv);
+        let img = document.createElement("img");
+        img.className = "images";
+        img.id = `image${i}`;
+        img.setAttribute("draggable", "true"); 
+        pieceDiv.appendChild(img);
+    }
+}
+creatingGrid();
+
+let img0 = document.getElementById("image0");
+img0.src = "puzzle2/Piece1.png"; 
+
+let img1 = document.getElementById("image1");
+img1.src = "puzzle2/Piece2.png"; 
+
+let img2 = document.getElementById("image2");
+img2.src = "puzzle2/Piece3.png"; 
+
+let img3 = document.getElementById("image3");
+img3.src = "puzzle2/Piece4.png"; 
+
+let img4 = document.getElementById("image4");
+img4.src = "puzzle2/Piece5.png"; 
+
+let img5 = document.getElementById("image5");
+img5.src = "puzzle2/Piece6.png"; 
+
+let img6 = document.getElementById("image6");
+img6.src = "puzzle2/Piece7.png"; 
+
+let img7 = document.getElementById("image7");
+img7.src = "puzzle2/Piece8.png"; 
+
+let img8 = document.getElementById("image8");
+img8.src = "puzzle2/Piece9.png"; 
+
+function creatingDropZones() { 
+    let rows = 3;
+    let columns = 3;
+
+    for(let i=0; i<rows*columns; i++){
+        let dropZone = document.createElement('div')
+        dropZone.className = "drop-zone2";
+        puzzleContainer.appendChild(dropZone);
+    }
+}
+creatingDropZones();
+
+let dropZone = document.getElementsByClassName("drop-zone2");
+
+Array.from(dropZone).forEach(function(dropZone, i){
+    dropZone.id = `droping-${i}`; 
+});
+
+let pieceDiv = document.getElementsByClassName("piece2");
+
+Array.from(pieceDiv).forEach(function(pieceDiv, i){
+    pieceDiv.id = `dragging-${i}`;
+});
+
+let pieceContainer = document.getElementById("piece-container");
+
+document.addEventListener('DOMContentLoaded', function () {
+    let startButton = document.getElementById('start');
+    let resetButton = document.getElementById('reset');
+
+    let drop0 = document.getElementById("droping-0");
+    let drop2 = document.getElementById("droping-2");
+    let drop4 = document.getElementById("droping-4");
+    let drop6 = document.getElementById("droping-6");
+    let drop8 = document.getElementById("droping-8");
+
+    startButton.addEventListener('click', function(e){
+        startButton.style.display = 'none';
+        resetButton.style.display = 'flex'; 
+        drop0.style.borderBottom = "1px solid black"; 
+        drop0.style.borderRight = "1px solid black";
+        drop2.style.borderBottom = "1px solid black";
+        drop2.style.borderLeft = "1px solid black";
+        drop4.style.border = "1px solid black";
+        drop6.style.borderTop = "1px solid black";
+        drop6.style.borderRight = "1px solid black";
+        drop8.style.borderTop = "1px solid black";
+        drop8.style.borderLeft = "1px solid black";
+        let pieces = document.getElementsByClassName("piece2");
+        let element = e.target; 
+        e.preventDefault();
+        Array.from(pieces).forEach(function(piece){ 
+            let leftPosition = Math.floor(Math.random()*60);
+            let topPosition = Math.floor(Math.random()*60);
+            piece.style.position = "absolute";
+            piece.style.left = `${leftPosition}%`;
+            piece.style.top = `${topPosition}%`
+            pieceContainer.appendChild(piece);
+        });
+    });
+
+    resetButton.addEventListener('click', function(e) {
+        resetButton.style.display = 'none';
+        startButton.style.display = 'flex';
+        let element = e.target;
+        window.location.reload(); 
+    });
+});
+
+
+
+let draggableImages = document.getElementsByClassName("images");
+//let originalPlace = document.getElementsByClassName("piece2");
+var globalDraggedItemId = null; // set data and get data are methods that do not exist for touch events. Creating global variable to maintain state.
+
+function handleStart(e) {
+    e.stopPropagation();
+    if (e.type === 'dragstart') {
+        console.log(e);
+        e.dataTransfer.setData('text/plain', e.currentTarget.id); //Seeting the data to add id to my target element that is my div and retriving it in drop- source: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setData
+    } 
+    if (e.type === 'touchstart') { 
+        e.preventDefault();
+    }
+    globalDraggedItemId = e.currentTarget.id; // setting data
+}
+
+function handleOverMove(e){ 
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+function handleDropEnd(e) { //modify this function with some sort of if statement so that no bug with touch event. (what is hapenign is that the img are otherwise already nested in a drop and cant be moved to drop zones)
+    e.preventDefault();
+    e.stopPropagation();
+    let draggedItem;
+    if (e.type === 'drop') {
+        let data = e.dataTransfer.getData("text/plain"); //retrieving id and moving it the div to target. 
+        draggedItem = document.getElementById(data); 
+    } else if (e.type === 'touchend') {
+        draggedItem = document.getElementById(globalDraggedItemId); 
+    }
+    if (draggedItem) {
+        e.currentTarget.appendChild(draggedItem);
+        globalDraggedItemId = null; // Reset the global variable
+    }
+
+    checkPosition(); //calling function for alert messages below
+}
+
+Array.from(draggableImages).forEach(function(image){ //Iterating through each element and assigning touch and mouse event to each.
+    image.addEventListener('dragstart', handleStart);
+    image.addEventListener('touchstart', handleStart);
+});
+
+Array.from(dropZone).forEach(function(zone){ 
+    zone.addEventListener('dragover', handleOverMove);
+    zone.addEventListener('touchmove', handleOverMove);
+    zone.addEventListener('drop', handleDropEnd);
+    zone.addEventListener('touchend', handleDropEnd);
+});
+
+
+let correctPosition = { // creating an object using individual ids created earlier.
+    image0: "droping-0",
+    image1: "droping-1",
+    image2: "droping-2",
+    image3: "droping-3",
+    image4: "droping-4",
+    image5: "droping-5",
+    image6: "droping-6",
+    image7: "droping-7",
+    image8: "droping-8",
+};
+
+function checkPosition() {
+    let allPlaced = true;
+    let allCorrect = true;
+
+    for (let [imgId, dropId] of Object.entries(correctPosition)) { //iterating through my object that contains the correct positions of each piece.
+        let image = document.getElementById(imgId);
+        let currentDrop = image.parentElement.id;
+
+       // Checking if piece are placed or not in the drop zone divs
+       if (!image.parentElement || !image.parentElement.classList.contains('drop-zone2')) {
+        allPlaced = false;
+        }
+
+        // Checking if the images' parents' id are that of the dropzone id = aka they are they correctly placed
+        if (currentDrop !== dropId) {
+        allCorrect = false;
+        }
+    }
+
+    if (allPlaced && !allCorrect) {// All pieces are placed, but some are wrong
+        setTimeout(() => {
+            alert("You are almost there! But some pieces are in the wrong place.");
+        }, 500); // Delay to allow for the puzzle to be visually completed before showing the message
+    } else if (allPlaced && allCorrect) { // All pieces are placed correctly
+        setTimeout(() => {
+            alert("Congratulations! You completed the puzzle.");
+        }, 500);
+    }
+
+    return true;
+}
diff --git a/puzzle1.html b/puzzle1.html
index 0d75a85..dc1cc93 100644
--- a/puzzle1.html
+++ b/puzzle1.html
@@ -6,7 +6,7 @@
         <title>Jigsaw Puzzle</title>
         <link rel="stylesheet" href="style.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script src="interactive.js" defer> </script> <!--Specify defer or async?-->
+        <script src="interactive1.js" defer> </script> <!--Specify defer or async?-->
     </head>
 
     <body>
diff --git a/puzzle1/piece1.png b/puzzle1/piece1.png
new file mode 100644
index 0000000..334c712
Binary files /dev/null and b/puzzle1/piece1.png differ
diff --git a/puzzle1/piece2.png b/puzzle1/piece2.png
new file mode 100644
index 0000000..6d21caa
Binary files /dev/null and b/puzzle1/piece2.png differ
diff --git a/puzzle1/piece3.png b/puzzle1/piece3.png
new file mode 100644
index 0000000..359cefa
Binary files /dev/null and b/puzzle1/piece3.png differ
diff --git a/puzzle1/piece4.png b/puzzle1/piece4.png
new file mode 100644
index 0000000..b083d5e
Binary files /dev/null and b/puzzle1/piece4.png differ
diff --git a/puzzle2.html b/puzzle2.html
index d5a16ae..488246b 100644
--- a/puzzle2.html
+++ b/puzzle2.html
@@ -6,6 +6,7 @@
         <title>Jigsaw Puzzle</title>
         <link rel="stylesheet" href="style.css">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <script src="interactive2.js" defer> </script> <!--Specify defer or async?-->
     </head>
 
     <body>
diff --git a/puzzle2/IMG_0529.jpg b/puzzle2/IMG_0529.jpg
new file mode 100644
index 0000000..d703b82
Binary files /dev/null and b/puzzle2/IMG_0529.jpg differ
diff --git a/puzzle2/IMG_0529.jpg:Zone.Identifier b/puzzle2/IMG_0529.jpg:Zone.Identifier
new file mode 100644
index 0000000..6703eae
--- /dev/null
+++ b/puzzle2/IMG_0529.jpg:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://mail.google.com/
+HostUrl=https://mail-attachment.googleusercontent.com/attachment/u/1/?ui=2&ik=08aadfbd9b&attid=0.3&permmsgid=msg-f:1795877045770611679&th=18ec3ca87d6f6bdf&view=att&disp=safe&saddbat=ANGjdJ_tMuaSwu-6ndqFDZy7itx7pc-t4n67bVwOIwhD3i7EgIZPCNVqxX53eHAkjwpQZSVOUqdqDvY9yCecIwb5yOk-HrPOJ_WWD8ZIxjJUc9GYsnAibPJexkX3Cr9EMkWEVyqXjEwwWyfl4FgyIudB59xhxuTLAj2wh4LlXe-oiHvz4ppmqDtCPyy1QWVzgkhtQvlxyg7qQhp56N26McF-KOxvtbim61awIDX9trMv8JCkueC5IBO0GKd5fnPl6LTVpvDQKrISMdSBcPeZZYrxfk56NBuroCKY1fF0R3LF6iG0WgnXBbzht1b8hfCehcoepW-ZXWPYpRp08xNBOOY3QFChEMPQAhdNnT0YGa4ZTcPW19jyJljzQ2Wi8KfhOOuXWzpAF_5WmAPKbpWrK2hXXx21_zzp0eOGj1-ThxCTTDqtep34Q4LDkmA14yYX-8bo7wV_czRaW1eCAUnOixLbILNQBz2LuBt7oztzuW3ijuCenglxTHPULXLt24zQu-MPV6k9bDjI9cOvWZKWqhD8OQFejlNki5Y-qEim6XzfuqoNXgTEdPHPj1OP0ZFqCiKX4wNDvVZvieoOZjFmJMqfePy7dsK71TqCaQ8MVSnybh1LXEKz8j7ZqBMIDHgfH8mUlOYk-tb6C99U57OqdyzCfEOmfQS9RsSTMpsc0asRQ7OWlOhBO94PVkVO0h4T3-xrMryo3lhbzq35IFhwjKCWkWi_HXpvXaAsAj27CC-us1A3yfSg_hw0ABWauGJ1YJuy1rrF5Zfa4F4YR8xXfKuBq1a0Mxk-hIiniaPSCTtU6rZkEa9xkW_r4FRSqagcZF2QsbDtp57S_XBmSHs0RekRCv5-lI4F1Kh_5RNyF-Tg1rO6_jBiAJWeGhWVmGLKy8wD7eEgt6raKfVxuQnHQFAV3vltwMvRhkGv9Z2SH2A3jJMs1XZMkPoSXvOvQFj0LYMsM9dEDdjlyqhdAh3rYA9GTGXsvSn0EzW3BBMDcBqZM5-xTwP0Hh0QlNGpmk-OWozFp5_XM0HjZ4xLe20WQNZ1jlG2esseLSYG46O7Qw
diff --git a/puzzle2/Picture14.png b/puzzle2/Picture14.png
deleted file mode 100644
index b0b4870..0000000
Binary files a/puzzle2/Picture14.png and /dev/null differ
diff --git a/puzzle2/Picture15.png b/puzzle2/Picture15.png
deleted file mode 100644
index 05c6019..0000000
Binary files a/puzzle2/Picture15.png and /dev/null differ
diff --git a/puzzle2/Picture16.png b/puzzle2/Picture16.png
deleted file mode 100644
index fedf3b7..0000000
Binary files a/puzzle2/Picture16.png and /dev/null differ
diff --git a/puzzle2/Picture17.png b/puzzle2/Picture17.png
deleted file mode 100644
index cc25fdd..0000000
Binary files a/puzzle2/Picture17.png and /dev/null differ
diff --git a/puzzle2/Picture18.png b/puzzle2/Picture18.png
deleted file mode 100644
index 82ac0c7..0000000
Binary files a/puzzle2/Picture18.png and /dev/null differ
diff --git a/puzzle2/Picture19.png b/puzzle2/Picture19.png
deleted file mode 100644
index e045e17..0000000
Binary files a/puzzle2/Picture19.png and /dev/null differ
diff --git a/puzzle2/Picture20.png b/puzzle2/Picture20.png
deleted file mode 100644
index 8037298..0000000
Binary files a/puzzle2/Picture20.png and /dev/null differ
diff --git a/puzzle2/Picture21.png b/puzzle2/Picture21.png
deleted file mode 100644
index 4888bc5..0000000
Binary files a/puzzle2/Picture21.png and /dev/null differ
diff --git a/puzzle2/Picture22.png b/puzzle2/Picture22.png
deleted file mode 100644
index 1908600..0000000
Binary files a/puzzle2/Picture22.png and /dev/null differ
diff --git a/puzzle2/Picture23.png b/puzzle2/Picture23.png
deleted file mode 100644
index 7fa295c..0000000
Binary files a/puzzle2/Picture23.png and /dev/null differ
diff --git a/puzzle2/Picture24.png b/puzzle2/Picture24.png
deleted file mode 100644
index f10709c..0000000
Binary files a/puzzle2/Picture24.png and /dev/null differ
diff --git a/puzzle2/Picture25.png b/puzzle2/Picture25.png
deleted file mode 100644
index 7fca136..0000000
Binary files a/puzzle2/Picture25.png and /dev/null differ
diff --git a/puzzle2/Piece1.png b/puzzle2/Piece1.png
new file mode 100644
index 0000000..b12690a
Binary files /dev/null and b/puzzle2/Piece1.png differ
diff --git a/puzzle2/Piece2.png b/puzzle2/Piece2.png
new file mode 100644
index 0000000..bc1e05b
Binary files /dev/null and b/puzzle2/Piece2.png differ
diff --git a/puzzle2/Piece3.png b/puzzle2/Piece3.png
new file mode 100644
index 0000000..905b54f
Binary files /dev/null and b/puzzle2/Piece3.png differ
diff --git a/puzzle2/Piece4.png b/puzzle2/Piece4.png
new file mode 100644
index 0000000..3413509
Binary files /dev/null and b/puzzle2/Piece4.png differ
diff --git a/puzzle2/Piece5.png b/puzzle2/Piece5.png
new file mode 100644
index 0000000..8b944d8
Binary files /dev/null and b/puzzle2/Piece5.png differ
diff --git a/puzzle2/Piece6.png b/puzzle2/Piece6.png
new file mode 100644
index 0000000..c82ce16
Binary files /dev/null and b/puzzle2/Piece6.png differ
diff --git a/puzzle2/Piece7.png b/puzzle2/Piece7.png
new file mode 100644
index 0000000..78ae3a5
Binary files /dev/null and b/puzzle2/Piece7.png differ
diff --git a/puzzle2/Piece8.png b/puzzle2/Piece8.png
new file mode 100644
index 0000000..8bf5674
Binary files /dev/null and b/puzzle2/Piece8.png differ
diff --git a/puzzle2/Piece9.png b/puzzle2/Piece9.png
new file mode 100644
index 0000000..8b7a2ef
Binary files /dev/null and b/puzzle2/Piece9.png differ
diff --git a/style.css b/style.css
index 02e3931..0046353 100644
--- a/style.css
+++ b/style.css
@@ -126,22 +126,37 @@ h1 {
     height: 50%;
 }
 
+.piece2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
+}
+
 .drop-zone{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
-    aspect-ratio: 1;
+}
+
+.drop-zone2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
 }
 
 #img0{
     position: relative;
-    z-index: 0;
     width: 100%;
     height: 120%; 
 }
 
+
 #img1{
     position: relative;
     width: 117%;
@@ -151,20 +166,85 @@ h1 {
 
 #img2{
     position: relative;
-    z-index: 2;
     width: 116.5%;
     height: 100%
 }
 
 #img3{
     position: relative;
-    z-index: 1;
     top: -16%;
     width: 101%;
     height: 116%;
     left: -1%;
 }
 
+#image0 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+}
+
+#image1 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -4%;
+}
+
+#image2{
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -13%;
+}
+
+#image3{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+}
+
+#image4{
+    position: relative;
+    width: 110%;
+    height: 110%;
+    bottom: 2.4%;
+    left: -4%;
+}
+
+
+#image5{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    left: -13%;
+}
+
+#image6{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 9%;
+}
+
+#image7{
+    position: relative;
+    width: 110%;
+    height: 109%;
+    bottom: 8%;
+    left: -3%;
+}
+
+#image8{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    left: -13%;
+    bottom: 9%;
+}
+
 }
 
 @media (max-width: 767px) and (orientation: landscape){
@@ -209,18 +289,32 @@ h1 {
     height: 50%;
 }
 
+.piece2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
+}
+
 .drop-zone{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
-    aspect-ratio: 1;
+}
+
+.drop-zone2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
 }
 
 #img0{
     position: relative;
-    z-index: 0;
     width: 100%;
     height: 120%; 
 }
@@ -234,20 +328,85 @@ h1 {
 
 #img2{
     position: relative;
-    z-index: 2;
     width: 116.5%;
     height: 100%
 }
 
 #img3{
     position: relative;
-    z-index: 1;
     top: -16%;
     width: 101%;
     height: 116%;
     left: -1%;
 }
 
+#image0 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+}
+
+#image1 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -4%;
+}
+
+#image2{
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -13%;
+}
+
+#image3{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+}
+
+#image4{
+    position: relative;
+    width: 110%;
+    height: 110%;
+    bottom: 2.4%;
+    left: -4%;
+}
+
+
+#image5{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    left: -13%;
+}
+
+#image6{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 9%;
+}
+
+#image7{
+    position: relative;
+    width: 110%;
+    height: 109%;
+    bottom: 8%;
+    left: -3%;
+}
+
+#image8{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    left: -13%;
+    bottom: 9%;
+}
+
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
@@ -292,18 +451,32 @@ h1 {
     height: 50%;
 }
 
+.piece2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
+}
+
 .drop-zone{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
-    aspect-ratio: 1;
+}
+
+.drop-zone2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
 }
 
 #img0{
     position: relative;
-    z-index: 0;
     width: 100%;
     height: 120%; /* Increased height to overlap */
 }
@@ -317,20 +490,85 @@ h1 {
 
 #img2{
     position: relative;
-    z-index: 2;
     width: 116.5%;
     height: 100%
 }
 
 #img3{
     position: relative;
-    z-index: 1;
     top: -16%;
     width: 101%;
     height: 116%;
     left: -1%;
 }
 
+#image0 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+}
+
+#image1 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -4%;
+}
+
+#image2{
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -13%;
+}
+
+#image3{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+}
+
+#image4{
+    position: relative;
+    width: 110%;
+    height: 110%;
+    bottom: 2.4%;
+    left: -4%;
+}
+
+
+#image5{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    left: -13%;
+}
+
+#image6{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 9%;
+}
+
+#image7{
+    position: relative;
+    width: 110%;
+    height: 108%;
+    bottom: 7%;
+    left: -3%;
+}
+
+#image8{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    left: -13%;
+    bottom: 9%;
+}
+
 }
 
 @media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
@@ -375,18 +613,32 @@ h1 {
     height: 50%;
 }
 
+.piece2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
+}
+
 .drop-zone{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
-    aspect-ratio: 1;
+}
+
+.drop-zone2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
 }
 
 #img0{
     position: relative;
-    z-index: 0;
     width: 100%;
     height: 120%;
 }
@@ -400,20 +652,86 @@ h1 {
 
 #img2{
     position: relative;
-    z-index: 2;
     width: 116.5%;
     height: 100%
 }
 
 #img3{
     position: relative;
-    z-index: 1;
     top: -16%;
     width: 101%;
     height: 116%;
     left: -1%;
 }
 
+
+#image0 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+}
+
+#image1 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -4%;
+}
+
+#image2{
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -13%;
+}
+
+#image3{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+}
+
+#image4{
+    position: relative;
+    width: 110%;
+    height: 110%;
+    bottom: 2.4%;
+    left: -4%;
+}
+
+
+#image5{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    left: -13%;
+}
+
+#image6{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 9%;
+}
+
+#image7{
+    position: relative;
+    width: 110%;
+    height: 108%;
+    bottom: 7%;
+    left: -1%;
+}
+
+#image8{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    left: -13%;
+    bottom: 9%;
+}
+
 }
 
 @media only screen and (min-width: 1024px) and (orientation: portrait){
@@ -458,18 +776,32 @@ h1 {
     height: 50%;
 }
 
+.piece2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
+}
+
 .drop-zone{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
-    aspect-ratio: 1;
+}
+
+.drop-zone2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
 }
 
 #img0{
     position: relative;
-    z-index: 0;
     width: 100%;
     height: 120%;
 }
@@ -483,20 +815,85 @@ h1 {
 
 #img2{
     position: relative;
-    z-index: 2;
     width: 116.5%;
     height: 100%
 }
 
 #img3{
     position: relative;
-    z-index: 1;
     top: -16%;
     width: 101%;
     height: 116%;
     left: -1%;
 }
 
+#image0 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+}
+
+#image1 {
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -4%;
+}
+
+#image2{
+    position: relative;
+    width: 116%;
+    height: 115%;
+    left: -13%;
+}
+
+#image3{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+}
+
+#image4{
+    position: relative;
+    width: 110%;
+    height: 110%;
+    bottom: 2.4%;
+    left: -4%;
+}
+
+
+#image5{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 2%;
+    left: -13%;
+}
+
+#image6{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    bottom: 9%;
+}
+
+#image7{
+    position: relative;
+    width: 110%;
+    height: 108%;
+    bottom: 7%;
+    left: -1%;
+}
+
+#image8{
+    position: relative;
+    width: 116%;
+    height: 110%;
+    left: -13%;
+    bottom: 9%;
+}
+
 }
 
 @media only screen and (min-width: 1024px) and (orientation: landscape){
@@ -541,18 +938,32 @@ h1 {
     height: 50%;
 }
 
+.piece2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
+}
+
 .drop-zone{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
-    aspect-ratio: 1;
+}
+
+.drop-zone2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
 }
 
 #img0{
     position: relative;
-    z-index: 0;
     width: 100%;
     height: 120%;
 }
@@ -566,20 +977,85 @@ h1 {
 
 #img2{
     position: relative;
-    z-index: 2;
     width: 116.5%;
     height: 100%
 }
 
 #img3{
     position: relative;
-    z-index: 1;
     top: -16%;
     width: 101%;
     height: 116%;
     left: -1%;
 }
 
+#image0 {
+    position: relative;
+    width: 130%;
+    height: 130%;
+}
+
+#image1 {
+    position: relative;
+    width: 120%;
+    height: 117%;
+    left: 9%;
+}
+
+#image2{
+    position: relative;
+    width: 130%;
+    height: 110%;
+    left: -8%;
+}
+
+#image3{
+    position: relative;
+    width: 120%;
+    height: 115%;
+    bottom: 10%;
+}
+
+#image4{
+    position: relative;
+    width: 105%;
+    height: 115%;
+    bottom: 10%;
+    left: 1%;
+}
+
+
+#image5{
+    position: relative;
+    width: 115%;
+    height: 116%;
+    bottom: 9%;
+    left: -12%;
+}
+
+#image6{
+    position: relative;
+    width: 130%;
+    height: 119%;
+    bottom: 18%;
+}
+
+#image7{
+    position: relative;
+    width: 150%;
+    height: 115%;
+    bottom: 14%;
+    left: 1%;
+}
+
+#image8{
+    position: relative;
+    width: 120%;
+    height: 119%;
+    left: -14%;
+    bottom: 18%;
+}
+
 }
 
 @media only screen and (min-width: 1200px){
@@ -624,18 +1100,32 @@ h1 {
     height: 50%;
 }
 
+.piece2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
+}
+
 .drop-zone{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
-    aspect-ratio: 1;
+}
+
+.drop-zone2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
 }
 
 #img0{
     position: relative;
-    z-index: 0;
     width: 100%;
     height: 120%;
 }
@@ -649,20 +1139,85 @@ h1 {
 
 #img2{
     position: relative;
-    z-index: 2;
     width: 116.5%;
     height: 100%
 }
 
 #img3{
     position: relative;
-    z-index: 1;
     top: -16%;
     width: 101%;
     height: 116%;
     left: -1%;
 }
 
+#image0 {
+    position: relative;
+    width: 120%;
+    height: 120%;
+}
+
+#image1 {
+    position: relative;
+    width: 110%;
+    height: 115%;
+    left: 1%;
+}
+
+#image2{
+    position: relative;
+    width: 110%;
+    height: 115%;
+    left: -8%;
+}
+
+#image3{
+    position: relative;
+    width: 120%;
+    height: 110%;
+    bottom: 2%;
+}
+
+#image4{
+    position: relative;
+    width: 110%;
+    height: 110%;
+    bottom: 2%;
+    left: 1%;
+}
+
+
+#image5{
+    position: relative;
+    width: 110%;
+    height: 108%;
+    bottom: 1%;
+    left: -7%;
+}
+
+#image6{
+    position: relative;
+    width: 120%;
+    height: 110%;
+    bottom: 9%;
+}
+
+#image7{
+    position: relative;
+    width: 110%;
+    height: 108%;
+    bottom: 7%;
+    left: 1%;
+}
+
+#image8{
+    position: relative;
+    width: 110%;
+    height: 112%;
+    left: -7%;
+    bottom: 11%;
+}
+
 }
 
 @media only screen and (min-width: 1400px){
@@ -707,18 +1262,32 @@ h1 {
     height: 50%;
 }
 
+.piece2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
+}
+
 .drop-zone{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 50%;
     height: 50%;
-    aspect-ratio: 1;
+}
+
+.drop-zone2{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 33%;
+    height: 33%;
 }
 
 #img0{
     position: relative;
-    z-index: 0;
     width: 100%;
     height: 120%; 
 }
@@ -732,18 +1301,83 @@ h1 {
 
 #img2{
     position: relative;
-    z-index: 2;
     width: 116.5%;
     height: 100%
 }
 
 #img3{
     position: relative;
-    z-index: 1;
     top: -16%;
     width: 101%;
     height: 116%;
     left: -1%;
 }
 
+#image0 {
+    position: relative;
+    width: 130%;
+    height: 130%;
+}
+
+#image1 {
+    position: relative;
+    width: 120%;
+    height: 117%;
+    left: 3%;
+}
+
+#image2{
+    position: relative;
+    width: 130%;
+    height: 110%;
+    left: -16%;
+}
+
+#image3{
+    position: relative;
+    width: 120%;
+    height: 115%;
+    bottom: 10%;
+}
+
+#image4{
+    position: relative;
+    width: 105%;
+    height: 115%;
+    bottom: 10%;
+    left: 1%;
+}
+
+
+#image5{
+    position: relative;
+    width: 115%;
+    height: 116%;
+    bottom: 9%;
+    left: -12%;
+}
+
+#image6{
+    position: relative;
+    width: 130%;
+    height: 119%;
+    bottom: 18%;
+}
+
+#image7{
+    position: relative;
+    width: 150%;
+    height: 115%;
+    bottom: 14%;
+    left: 1%;
+}
+
+#image8{
+    position: relative;
+    width: 115%;
+    height: 119%;
+    left: -12%;
+    bottom: 18%;
+}
+
 }
\ No newline at end of file