diff --git a/AdminOfWaves24.php b/AdminOfWaves24.php
index 6041ac9..33a5bfb 100644
--- a/AdminOfWaves24.php
+++ b/AdminOfWaves24.php
@@ -189,7 +189,7 @@
 
                                                         if ($data == 0) {
                                                         ?>
-                                                            <a href=<?php echo '/allotment/ungroped.php?eventName=' . urlencode($event['event_name']) ?> class="btn confer-btn"> Slot <i class="zmdi zmdi-long-arrow-right"></i></a>
+                                                            <a href=<?php echo '/allotment/ungrouped.php?eventName=' . urlencode($event['event_name']) ?> class="btn confer-btn"> Slot <i class="zmdi zmdi-long-arrow-right"></i></a>
                                                         <?php
                                                         }else{
                                                             ?>
@@ -246,7 +246,7 @@
 
                                                         if ($data == 0) {
                                                         ?>
-                                                            <a href=<?php echo '/allotment/ungroped.php?eventName=' . urlencode($event['event_name']) ?> class="btn confer-btn"> Slot <i class="zmdi zmdi-long-arrow-right"></i></a>
+                                                            <a href=<?php echo '/allotment/ungrouped.php?eventName=' . urlencode($event['event_name']) ?> class="btn confer-btn"> Slot <i class="zmdi zmdi-long-arrow-right"></i></a>
                                                         <?php
                                                         }else{
                                                             ?>
@@ -302,7 +302,7 @@
                                                             
                                                         if ($data == 0) {
                                                         ?>
-                                                            <a href=<?php echo '/allotment/ungroped.php?eventName=' . urlencode($event['event_name']) ?> class="btn confer-btn"> Slot <i class="zmdi zmdi-long-arrow-right"></i></a>
+                                                            <a href=<?php echo '/allotment/ungrouped.php?eventName=' . urlencode($event['event_name']) ?> class="btn confer-btn"> Slot <i class="zmdi zmdi-long-arrow-right"></i></a>
                                                         <?php
                                                         }else{
                                                             ?>
@@ -360,7 +360,7 @@
 
                                                         if ($data == 0) {
                                                         ?>
-                                                            <a href=<?php echo '/allotment/ungroped.php?eventName=' . urlencode($event['event_name']) ?> class="btn confer-btn"> Slot <i class="zmdi zmdi-long-arrow-right"></i></a>
+                                                            <a href=<?php echo '/allotment/ungrouped.php?eventName=' . urlencode($event['event_name']) ?> class="btn confer-btn"> Slot <i class="zmdi zmdi-long-arrow-right"></i></a>
                                                         <?php
                                                         }else{
                                                             ?>
diff --git a/allotment/groped.php b/allotment/groped.php
index a7be2e6..e6010fb 100644
--- a/allotment/groped.php
+++ b/allotment/groped.php
@@ -36,7 +36,7 @@
                                 <span></span>
                             </div>
                             <ul>
-                                <li><a href="../AdminOfWaves23.php"><button type="button" class="btn btn-login btn-primary" data-toggle="modal" data-target="#loginModal">BACK</button></a> </li>
+                                <li><a href="../AdminOfWaves24.php"><button type="button" class="btn btn-login btn-primary" data-toggle="modal" data-target="#loginModal">BACK</button></a> </li>
                             </ul>
                         </nav>
                     </div>
diff --git a/allotment/team/boys.php b/allotment/team/boys.php
index 76b25c0..a64f5f5 100644
--- a/allotment/team/boys.php
+++ b/allotment/team/boys.php
@@ -42,7 +42,7 @@
                                 <span></span>
                             </div>
                             <ul>
-                                <li><a href="../../AdminOfWaves23.php"><button type="button" class="btn btn-login btn-primary" data-toggle="modal" data-target="#loginModal">BACK</button></a> </li>
+                                <li><a href="../../AdminOfWaves24.php"><button type="button" class="btn btn-login btn-primary" data-toggle="modal" data-target="#loginModal">BACK</button></a> </li>
                             </ul>
                         </nav>
                     </div>
diff --git a/allotment/team/girls.php b/allotment/team/girls.php
index 638ef04..d58bc22 100644
--- a/allotment/team/girls.php
+++ b/allotment/team/girls.php
@@ -42,7 +42,7 @@
                                 <span></span>
                             </div>
                             <ul>
-                                <li><a href="../../AdminOfWaves23.php"><button type="button" class="btn btn-login btn-primary" data-toggle="modal" data-target="#loginModal">BACK</button></a> </li>
+                                <li><a href="../../AdminOfWaves24.php"><button type="button" class="btn btn-login btn-primary" data-toggle="modal" data-target="#loginModal">BACK</button></a> </li>
                             </ul>
                         </nav>
                     </div>
diff --git a/allotment/ungroped.js b/allotment/ungroped.js
deleted file mode 100644
index 3c9bf5e..0000000
--- a/allotment/ungroped.js
+++ /dev/null
@@ -1,111 +0,0 @@
-(function () {
-  "use strict";
-
-  var items = [
-    "1",
-    "2",
-    "3",
-    "4"
-  ];
-  var slot = [];
-  let temp;
-  document.querySelector(".info").textContent = items.join(" ");
-
-  const doors = document.querySelectorAll(".door");
-  document.querySelector("#spinner").addEventListener("click", spin);
-  document.querySelector("#reseter").addEventListener("click", init);
-
-  async function spin() {
-    init(false, 1, 2);
-    for (const door of doors) {
-      const boxes = door.querySelector(".boxes");
-      const duration = parseInt(boxes.style.transitionDuration);
-      boxes.style.transform = "translateY(0)";
-      await new Promise((resolve) => setTimeout(resolve, duration * 200));
-    }
-  }
-
-  function init(firstInit = true, groups = 1, duration = 1) {
-    for (const door of doors) {
-      if (firstInit) {
-        door.dataset.spinned = "0";
-      } else if (door.dataset.spinned === "1") {
-        return;
-      }
-
-      const boxes = door.querySelector(".boxes");
-      const boxesClone = boxes.cloneNode(false);
-
-      const pool = ["?"];
-      if (!firstInit) {
-        const arr = [];
-        for (let n = 0; n < (groups > 0 ? groups : 1); n++) {
-          arr.push(...items);
-        }
-        pool.push(...shuffle(arr));
-
-        boxesClone.addEventListener(
-          "transitionstart",
-          function () {
-            door.dataset.spinned = "1";
-            this.querySelectorAll(".box").forEach((box) => {
-              box.style.filter = "blur(1px)";
-            });
-          },
-          { once: true }
-        );
-
-        boxesClone.addEventListener(
-          "transitionend",
-          function () {
-            this.querySelectorAll(".box").forEach((box, index) => {
-              box.style.filter = "blur(0)";
-              if (index > 0) {
-                this.removeChild(box);
-              }
-            });
-          },
-          { once: true }
-        );
-      }
-      // console.log(pool);
-
-      for (let i = pool.length - 1; i >= 0; i--) {
-        const box = document.createElement("div");
-        box.classList.add("box");
-        box.style.color = 'black';
-        // box.style.width = door.clientWidth + "px";
-        box.style.height = door.clientHeight + "px";
-        box.textContent = pool[i];
-        boxesClone.appendChild(box);
-      }
-      boxesClone.style.transitionDuration = `${duration > 0 ? duration : 1}s`;
-      boxesClone.style.transform = `translateY(-${
-        door.clientHeight * (pool.length - 1)
-      }px)`;
-      door.replaceChild(boxesClone, boxes);
-      // console.log(door);
-      pool.forEach((element) => {
-        temp = element;
-      });
-      // items.remove(temp);
-      var pos = items.findIndex((val) => val == temp);
-      if (pos != -1) {
-        items.splice(pos, 1);
-        slot.push(temp);
-      }
-    }
-    document.getElementById("slot").value = slot; 
-  }
-
-  function shuffle([...arr]) {
-    let m = arr.length;
-    while (m) {
-      const i = Math.floor(Math.random() * m--);
-      [arr[m], arr[i]] = [arr[i], arr[m]];
-    }
-    return arr;
-  }
-
-  init();
-})();
diff --git a/allotment/ungroped.php b/allotment/ungroped.php
deleted file mode 100644
index fb5bbbd..0000000
--- a/allotment/ungroped.php
+++ /dev/null
@@ -1,270 +0,0 @@
-<?php
-include('../routes/connect.php');
-?>
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Allotment</title>
-
-    <link rel="stylesheet" href="allotment.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-    <link rel="stylesheet" href="../public/css/style.css">
-    <script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script>
-</head>
-
-<body>
-<header class="site-header">
-        <div class="header-bar">
-            <div class="container-fluid">
-                <div class="row align-items-center">
-                    <div class="col-10 col-lg-4">
-                        <h1 class="site-branding flex">
-                            <img src="../public/images/logos/waves-logo.png" alt="" class="" width="120">
-
-                            <!-- <a href="#">Waves'23</a> -->
-                        </h1>
-                    </div>
-                    <div class="col-2 col-lg-8">
-                        <nav class="site-navigation">
-                            <div class="hamburger-menu d-lg-none" style="position: fixed;">
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                            </div>
-                            <ul>
-                                <li><a href="../AdminOfWaves23.php"><button type="button" class="btn btn-login btn-primary" data-toggle="modal" data-target="#loginModal">BACK</button></a> </li>
-                            </ul>
-                        </nav>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </header>
-    <div id="app">
-    
-        <h1 style="color: black;">Solo Event Allotment</h1>
-
-        <div class="doors" style="flex-wrap: wrap;">
-            <div class="col-md-2" style="align-self: center;text-align:center;color: black;font-size:20px"></div>
-
-            <div class="col-md-2 boys-logo">
-                <div class="boxes">
-                    <div class="box">
-                        <img src="../public/images/house/DINO_THUNDERS.png" width="210px" alt="">
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-2 boys-logo">
-                <div class="boxes">
-                    <div class="box">
-                        <img src="../public/images/house/DRAGON_WARRIORS.png" width="210px" alt="">
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-2 boys-logo">
-                <div class="boxes">
-                    <div class="box">
-                        <img src="../public/images/house/PHOENIX_BLASTERS.png" width="210px" alt="">
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-2 boys-logo">
-                <div class="boxes">
-                    <div class="box">
-                        <img src="../public/images/house/TIGER_THRASHERS.png" width="210px" alt="">
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-2 girls-logo">
-                <div class="boxes">
-                    <div class="box">
-                        <img src="../public/images/house/BLUE_BLASTERS.png" width="210px" alt="">
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-2 girls-logo">
-                <div class="boxes">
-                    <div class="box">
-                        <img src="../public/images/house/GALACTIC_STARS.png" width="210px" alt="">
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-2 girls-logo">
-                <div class="boxes">
-                    <div class="box">
-                        <img src="../public/images/house/ROSY_RIDERS.png" width="210px" alt="">
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-2 girls-logo">
-                <div class="boxes">
-                    <div class="box">
-                        <img src="../public/images/house/VIOLET_VIPERS.png" width="210px" alt="">
-                    </div>
-                </div>
-            </div>
-
-            <div class="col-md-2" style="align-self: center;text-align:center;color: black;font-size:20px"></div>
-
-            <div class="col-md-2" style="align-self: center;text-align:center;color: black;font-size:20px"></div>
-
-
-            <div class="col-md-2 door">
-                <div class="boxes">
-                    <!-- <div class="box">?</div> -->
-                </div>
-            </div>
-
-            <div class="col-md-2 door">
-                <div class="boxes">
-                    <!-- <div class="box">?</div> -->
-                </div>
-            </div>
-
-            <div class="col-md-2 door">
-                <div class="boxes">
-                    <!-- <div class="box">?</div> -->
-                </div>
-            </div>
-
-            <div class="col-md-2 door">
-                <div class="boxes">
-                    <!-- <div class="box">?</div> -->
-                </div>
-            </div>
-        </div>
-
-        <div class="buttons">
-            <button onclick="confetiiShow()" style="PADDING: 10PX 29PX;border: none;FONT-SIZE: 25PX; border-radius: 4px;" class="btn-primary" id="spinner">SPIN</button>
-            <a class="btn" id="reseter" href=" ">Reset</a>
-        </div>
-
-        <form class="buttons row" action="../routes/admin/assignSlot.php" method="post">
-            <input type="text" id="slot" name="slot_array" style="display: none;">
-            <select class="form-control" name="gender" id="gender" onchange="genderChange()" >
-                <option value="" hidden>Select Gender</option>
-                <option value="BOYS">BOYS</option>
-                <option value="GIRLS">GIRLS</option>
-            </select>
-
-            <div class="form-group col-8" id='login-event-name'>
-                <input type="text" list="listName" name="event_name" readonly value="<?php echo $_GET['eventName']?>" class="form-control">
-                <datalist id="listName">
-                    <?php
-                    $events = mysqli_query($conn, "SELECT * FROM `eventdb` WHERE `is_group`='1' && `gender`!='GIRLS'");
-                    while ($event = mysqli_fetch_array($events)) {
-                    ?>
-                        <option value="<?php echo $event['event_name'] ?>">
-                            <?php echo $event['event_name'] ?>
-                        </option>
-
-                    <?php
-                    }
-                    ?>
-                </datalist>
-            </div>
-
-            <button type="submit" name='submit' class="btn-primary col-4" style="height: 40px; border-radius: 4px;" id="spinner">Submit</button>
-            <!-- <a class="btn" id="reseter" href=" ">Reset</a> -->
-        </form>
-
-        <p class="info" style="visibility: hidden;"></p>
-    </div>
-    
-    <script src="./groped.js"></script>
-</body>
-
-<script>
-    function genderChange() {
-        value = document.getElementById("gender").value
-        if (value == 'BOYS') {
-            const boys = document.querySelectorAll('.boys-logo');
-            boys.forEach(box => {
-                box.style.display = 'block';
-            });
-            const girls = document.querySelectorAll('.girls-logo');
-            girls.forEach(box => {
-                box.style.display = 'none';
-            });
-        }
-        if (value == 'GIRLS') {
-            const girls = document.querySelectorAll('.girls-logo');
-            girls.forEach(box => {
-                box.style.display = 'block';
-            });
-            const boys = document.querySelectorAll('.boys-logo');
-            boys.forEach(box => {
-                box.style.display = 'none';
-            });
-        }
-    }
-
-    const boys = document.querySelectorAll('.boys-logo');
-    boys.forEach(box => {
-        box.style.display = 'none';
-    });
-    const girls = document.querySelectorAll('.girls-logo');
-    girls.forEach(box => {
-        box.style.display = 'none';
-    });
-</script>
-
-<script>
-    const duration = 10 * 1200,
-        animationEnd = Date.now() + duration,
-        defaults = {
-            startVelocity: 30,
-            spread: 360,
-            ticks: 60,
-            zIndex: 0
-        };
-
-    function randomInRange(min, max) {
-        return Math.random() * (max - min) + min;
-    }
-
-    function confetiiShow() {
-        const interval = setInterval(function() {
-            const timeLeft = animationEnd - Date.now();
-
-            if (timeLeft <= 0) {
-                return clearInterval(interval);
-            }
-
-            const particleCount = 20 * (timeLeft / duration);
-
-            // since particles fall down, start a bit higher than random
-            confetti(
-                Object.assign({}, defaults, {
-                    particleCount,
-                    origin: {
-                        x: randomInRange(0.1, 0.3),
-                        y: Math.random() - 0.2
-                    },
-                })
-            );
-            confetti(
-                Object.assign({}, defaults, {
-                    particleCount,
-                    origin: {
-                        x: randomInRange(0.7, 0.9),
-                        y: Math.random() - 0.2
-                    },
-                })
-            );
-        }, 300);
-    }
-</script>
-
-</html>
\ No newline at end of file
diff --git a/allotment/ungrouped.php b/allotment/ungrouped.php
new file mode 100644
index 0000000..5dd4395
--- /dev/null
+++ b/allotment/ungrouped.php
@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NSCET WAVES SLOT</title>
+    <link rel="icon" href="../public/images/logos/waves-logo.png" type="image/icon type">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+
+        body {
+            margin: 0;
+            overflow: hidden;
+            flex-direction: column;
+            min-height: 100vh;
+            background-color: #281f1f;
+            position: relative;
+        }
+
+        canvas {
+            position: absolute;
+            top: 0%;
+            right: 10%;
+            left: -0%;
+            display: block;
+        }
+
+        .head {
+            position: absolute;
+            left: 30%;
+            top: 5%;
+            font-size: 40px;
+            font-family: Georgia, 'Times New Roman', Times, serif;
+            color: aqua;
+            z-index: 2;
+        }
+
+        .container {
+            position: relative;
+            width: 500px;
+            height: 500px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 2;
+        }
+
+        .spinBtn {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            left: 124%;
+            background: #fff;
+            border-radius: 50%;
+            z-index: 3;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-transform: uppercase;
+            font-weight: 600;
+            color: #333;
+            letter-spacing: .1em;
+            border: 4px solid rgba(0, 0, 0, 0.75);
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .wheel,
+        .imageWheel {
+            position: absolute;
+            top: 0;
+            left: 80%;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            overflow: hidden;
+            transition: transform 5s ease-in-out;
+        }
+
+        .wheel {
+            background: #333;
+            box-shadow: 0 0 0 5px #333, 0 0 0 15px #fff, 0 0 0 18px #111;
+        }
+
+        .imageWheel {
+            width: 150%;
+            height: 150%;
+            top: -25%;
+            left: 56%;
+            border-radius: 50%;
+            overflow: hidden;
+            transition: transform 5s ease-in-out;
+        }
+
+        .number,
+        .imageSlot {
+            position: absolute;
+            width: 50%;
+            height: 50%;
+            transform-origin: bottom right;
+            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            user-select: none;
+            cursor: pointer;
+        }
+
+        .number {
+            background: var(--clr);
+            transform: rotate(calc(90deg * var(--i)));
+        }
+
+        .imageSlot {
+            transform: rotate(calc(-90deg * var(--i)));
+        }
+
+        .number span {
+            position: relative;
+            transform: rotate(45deg);
+            font-size: 1em;
+            font-weight: 700;
+            color: #fff;
+            text-shadow: 3px 5px 2px rgba(0, 0, 0, 0.15);
+        }
+
+        .imageSlot img {
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            object-fit: cover;
+            transform: rotate(30deg);
+        }
+
+        #teamSelect {
+            font-size: 16px;
+            padding: 10px 15px;
+            border: 2px solid #ccc;
+            border-radius: 4px;
+            background-color: #f9f9f9;
+            color: #333;
+            transition: border-color 0.3s, background-color 0.3s;
+            cursor: pointer;
+        }
+
+        #teamSelect:focus {
+            border-color: #007bff;
+            background-color: #e9f5ff;
+            outline: none;
+        }
+
+        #teamSelect option {
+            padding: 10px;
+        }
+
+        .select-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin: 20px;
+        }
+
+        #teamSelect {
+            margin: 10px;
+        }
+
+        .submitBtn {
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            padding: 15px 32px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 10px 2px;
+            cursor: pointer;
+            border-radius: 8px;
+            transition: background-color 0.3s ease;
+        }
+
+        .submitBtn:hover {
+            background-color: #45a049;
+        }
+
+        .submitBtn:active {
+            background-color: #3e8e41;
+            transform: translateY(2px);
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="backgroundCanvas"></canvas>
+    <canvas id="particleCanvas"></canvas>
+
+    <audio id="spinSound" src="../public/music/spinning-jar-cap.mp3"></audio>
+    <h1 class="head">Solo Event Allotment</h1>
+    <div class="container">
+        <div class="spinBtn">Spin</div>
+        <div class="wheel"></div>
+        <div class="imageWheel"></div>
+    </div>
+
+    <form id="hidden-form" action="../routes/admin/assignSlot.php" method="post" style="display:none;">
+        <input type="hidden" id="gender" name="gender" value="">
+        <input type="hidden" id="slots" name="slot_array" value="">
+        <input type="hidden" name="event_name" value="<?php echo $_GET['eventName'] ?>">
+    </form>
+
+    <select id="teamSelect">
+        <option value="BOYS">Select Gender</option>
+        <option value="GIRLS">Girls</option>
+        <option value="BOYS">Boys</option>
+    </select>
+    <button class="submitBtn">Submit</button>
+
+    <input type="text" id="event_name" name="eventName" readonly value="<?php echo $_GET['eventName'] ?>">
+
+
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const allSlots = {
+                GIRLS: [
+                    { name: 'Slot 1', color: '#db7093', image: 'BLUE_BLASTERS.png' },
+                    { name: 'Slot 2', color: '#20b2aa', image: 'GALACTIC_STARS.png' },
+                    { name: 'Slot 3', color: '#d63e92', image: 'ROSY_RIDERS.png' },
+                    { name: 'Slot 4', color: '#daa520', image: 'VIOLET_VIPERS.png' }
+                ],
+                BOYS: [
+                    { name: 'Slot 1', color: '#ff34f0', image: 'DINO_THUNDERS.png' },
+                    { name: 'Slot 2', color: '#ff7f50', image: 'DRAGON_WARRIORS.png' },
+                    { name: 'Slot 3', color: '#3cb371', image: 'PHOENIX_BLASTERS.png' },
+                    { name: 'Slot 4', color: '#4169e1', image: 'TIGER_THRASHERS.png' }
+                ]
+            }
+
+            let slots = allSlots.BOYS
+
+            const wheel = document.querySelector('.wheel')
+            const imageWheel = document.querySelector('.imageWheel')
+
+            function populateWheel() {
+                wheel.innerHTML = ''
+                imageWheel.innerHTML = ''
+                slots.forEach((slot, index) => {
+                    const numberSlot = document.createElement('div')
+                    numberSlot.classList.add('number')
+                    numberSlot.style.setProperty('--i', index + 1)
+                    numberSlot.style.setProperty('--clr', slot.color)
+                    numberSlot.innerHTML = `<span>${slot.name}</span>`
+                    wheel.appendChild(numberSlot)
+
+                    const imageSlot = document.createElement('div')
+                    imageSlot.classList.add('imageSlot')
+                    imageSlot.style.setProperty('--i', index + 1)
+                    const img = document.createElement('img')
+                    img.src = `../public/images/house/${slot.image}`
+                    img.alt = slot.image.slice(0, slot.image.length - 4)
+                    imageSlot.appendChild(img)
+                    imageWheel.appendChild(imageSlot)
+                })
+            }
+
+            function updateSlots() {
+                const selectedValue = document.getElementById('teamSelect').value
+                slots = allSlots[selectedValue]
+                populateWheel()
+            }
+
+            document.getElementById('teamSelect').addEventListener('change', updateSlots)
+
+            populateWheel()
+            const spinBtn = document.querySelector('.spinBtn')
+            const spinSound = document.getElementById("spinSound")
+
+            let isSpinning = false
+            let spinned = false
+
+            spinBtn.addEventListener('click', () => {
+                if (isSpinning) return
+                isSpinning = true
+                spinned = true
+
+                const randomDegree = Math.floor(Math.random() * 3600)
+                const rotationAmount = randomDegree + 1800
+
+                wheel.style.transition = 'transform 5s ease-in-out'
+                imageWheel.style.transition = 'transform 5s ease-in-out'
+                wheel.style.transform = `rotate(${rotationAmount}deg)`
+                imageWheel.style.transform = `rotate(${-rotationAmount}deg)`
+
+                spinSound.play()
+
+                wheel.addEventListener('transitionend', () => {
+                    isSpinning = false
+                    spinSound.pause()
+                    spinSound.currentTime = 0
+                    trackPositions()
+                }, { once: true })
+            })
+
+            function trackPositions() {
+                const imageSlots = document.querySelectorAll('.imageSlot')
+                const numberSlots = document.querySelectorAll('.number')
+
+                const matchedSlots = []
+
+                imageSlots.forEach((imageSlot, index) => {
+                    const imageRect = imageSlot.getBoundingClientRect()
+                    const imageCenterX = imageRect.left + imageRect.width / 2
+                    const imageCenterY = imageRect.top + imageRect.height / 2
+
+                    let closestSlot = null
+                    let minDistance = Infinity
+
+                    numberSlots.forEach((numberSlot) => {
+                        const numberRect = numberSlot.getBoundingClientRect()
+                        const numberCenterX = numberRect.left + numberRect.width / 2
+                        const numberCenterY = numberRect.top + numberRect.height / 2
+
+                        const distance = Math.sqrt(Math.pow(imageCenterX - numberCenterX, 2) + Math.pow(imageCenterY - numberCenterY, 2));
+
+                        if (distance < minDistance) {
+                            minDistance = distance
+                            closestSlot = numberSlot
+                        }
+                    })
+
+                    if (closestSlot) {
+                        const slotNumber = closestSlot.querySelector('span').innerText
+                        const imageName = imageSlot.querySelector('img').alt
+                        matchedSlots.push({ image: imageName, slot: slotNumber })
+                    }
+                })
+
+                console.log(matchedSlots)
+                return matchedSlots
+            }
+            const submitBtn = document.querySelector('.submitBtn')
+            const eventName = document.getElementById('event_name').value
+            let gender = 'BOYS'
+
+            function updateGender() {
+                gender = document.getElementById('teamSelect').value
+            }
+
+            document.getElementById('teamSelect').addEventListener('change', updateGender)
+
+            submitBtn.addEventListener('click', () => {
+                if (spinned) {
+                    const slotValues = trackPositions()
+
+                    const slotNumbers = slotValues.map(item => {
+                        return parseInt(item.slot.slice(5), 10)
+                    })
+
+                    console.log(eventName, slotNumbers, gender)
+                    document.getElementById('slots').value = JSON.stringify(slotNumbers)
+                    document.getElementById('gender').value = gender
+
+                    document.getElementById('hidden-form').submit()
+                }
+            })
+        })
+
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/pages/houseReport.php b/pages/houseReport.php
index 4693a47..b702871 100644
--- a/pages/houseReport.php
+++ b/pages/houseReport.php
@@ -40,7 +40,7 @@
             <div class="container-fluid">
                 <div class="row align-items-center" style="justify-content: space-around;">
                 <img src="../public/images/logos/clg-logo-min.png" alt="" class="" width="120">
-                <a href="../AdminOfWaves23.php"><img src="../public/images/logos/waves-logo.png" alt="" class="" width="120"></a>
+                <a href="../AdminOfWaves24.php"><img src="../public/images/logos/waves-logo.png" alt="" class="" width="120"></a>
                         <img src="../public/images/logos/ispin-logo.png" alt="" class="" width="80">
 
                 </div>
diff --git a/public/music/spinning-jar-cap.mp3 b/public/music/spinning-jar-cap.mp3
new file mode 100644
index 0000000..8351cc5
Binary files /dev/null and b/public/music/spinning-jar-cap.mp3 differ
diff --git a/routes/admin/assignSlot.php b/routes/admin/assignSlot.php
index 53ba284..2be878d 100644
--- a/routes/admin/assignSlot.php
+++ b/routes/admin/assignSlot.php
@@ -5,13 +5,13 @@
 
 <?php
 
-if (isset($_POST["submit"])) {
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
 
     $slot_array = mysqli_real_escape_string($conn, $_POST["slot_array"]);
     $event_name = mysqli_real_escape_string($conn, $_POST["event_name"]);
     $gender = mysqli_real_escape_string($conn, $_POST["gender"]);
 
-    $slot = explode(",", $slot_array);
+    $slot = json_decode($slot_array, true);
 
     if ($gender == 'GIRLS') {
         $teams = array("BLUE BLASTERS", "GALACTIC STARS", "ROSY RIDERS", "VIOLET VIPERS");
@@ -34,7 +34,7 @@
 
             // echo "Error : " . mysqli_error($conn);
         }
-        header('Location: ../../allotment/ungroped.php?eventName=' . urlencode($_POST["event_name"]));
+        header('Location: ../../allotment/ungrouped.php?eventName=' . urlencode($_POST["event_name"]));
     }
 
 
@@ -54,7 +54,7 @@
                 // echo "Error : " . mysqli_error($conn);
             }
         }
-        header('Location: ../../allotment/ungroped.php?eventName=' . urlencode($_POST["event_name"]));
+        header('Location: ../../allotment/ungrouped.php?eventName=' . urlencode($_POST["event_name"]));
     }
 }
 mysqli_close($conn);
diff --git a/routes/connect.php b/routes/connect.php
index 53a7fe6..88649f4 100644
--- a/routes/connect.php
+++ b/routes/connect.php
@@ -1,6 +1,6 @@
 <?php
 
-$conn = mysqli_connect('localhost', 'root', '', 'nscet_waves_24');        // make sql db connection
+$conn = mysqli_connect('localhost', 'root', '', 'nscet_waves_23');        // make sql db connection
 if (!$conn) {
     echo 'Connection Error  ' . mysqli_connect_error();
 }