diff --git a/script/UpcomingEvent.js b/script/UpcomingEvent.js
index 5c277db..5e4736e 100644
--- a/script/UpcomingEvent.js
+++ b/script/UpcomingEvent.js
@@ -1,13 +1,63 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const bodySection = document.getElementById('body-section');
+    const tbody = document.getElementById('event-container');
+    tbody.innerHTML = showEvent();
+    // bodySection.innerHTML = generateEvent();
+});
 
-function loadUpcomingEvent() {
+// const showEvent = () =>{
+//     return `<div class="w-full px-12 py-4">
+//         <!-- Upcoming Event Heading -->
+//         <div class="text-center mb-6 bg-white p-6 rounded-lg shadow-lg bg-black">
+//             <h1 class="text-3xl lg:text-5xl font-bold">TechFusion</h1>
 
-    fetch('upcomingEvent.html')
-        .then(response => response.text())
-        .then(data => {
-         
-            document.getElementById('event-container').innerHTML = data;
-        })
-        .catch(error => console.error('Error loading the upcoming event:', error));
-}
+//             <div class="flex items-center justify-between">
+//                 <!-- Event Logo -->
+//                 <div class="w-full lg:w-1/3 flex justify-center p-4">
+//                     <div class="p-6">
+//                         <img src="./public/img/TechFusion/TechFusion.jpeg" alt="Event Logo" class="w-full rounded-xl h-auto rounded-sm">
+//                     </div>
+//                 </div>
+//                 <h1 class="text-center font-bold text-9xl md:text-3xl">TechFusion 06.09.2024</h1>
+//                 <!-- Event QR -->
+//                 <div class="w-full lg:w-1/3 p-4">
+//                     <div class="p-6 mx-auto">
+//                         <img src="./public/img/TechFusion/FormQr.png" alt="Event QR" class="size-2/3 h-auto rounded-xl border">
+//                         <h1 class=" my-4 underline "><a class="font-semibold text-3xl" href="https://forms.gle/R2mB7gXWcPTa5Tg3A"> Register Now!</a></h1>
+//                     </div>
+//                 </div>
+//             </div>
+           
+//         </div>
+//     </div>`
+// }
 
-loadUpcomingEvent();
+const showEvent = () =>{
+
+    return `<div class="w-full px-6 py-4">
+    <!-- Upcoming Event Heading -->
+    <div class="bg-white p-6 rounded-lg shadow-lg text-center mb-6 bg-black">
+        <h1 class="text-3xl lg:text-5xl font-bold mb-4">TechFusion</h1>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-center">
+            <!-- Event Logo -->
+            <div class="p-4 flex justify-center">
+                <img src="./public/img/TechFusion/TechFusion.jpeg" alt="Event Logo" class="w-full max-w-xs rounded-xl">
+            </div>
+
+            <!-- Event Date and Title -->
+            <div class="text-center">
+                <h2 class="text-3xl md:text-7xl font-bold text-gray-400 hidden md:block animate-pulse">TechFusion</h2>
+                <p class="text-4xl text-gray-300 md:mt-2 font-medium">06.09.2024</p>
+            </div>
+
+            <!-- Event QR and Register Button -->
+            <div class="p-4 flex flex-col items-center">
+                <img src="./public/img/TechFusion/FormQr.png" alt="Event QR" class="w-2/3 h-auto rounded-xl">
+                <a href="https://forms.gle/R2mB7gXWcPTa5Tg3A" class="mt-4 text-2xl font-light text-slate-500 underline">Register Now !</a>
+            </div>
+        </div>
+    </div>
+</div>`
+
+}
\ No newline at end of file
diff --git a/upcomingEvent.html b/upcomingEvent.html
deleted file mode 100644
index aa3edce..0000000
--- a/upcomingEvent.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Event Layout</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-</head>
-
-<body class="bg-gray-100 items-center justify-center h-screen">
-
-    <div class="w-full max-w-5xl mx-auto p-4">
-        <!-- Upcoming Event Heading -->
-        <div class="text-center mb-6 bg-white p-6 rounded-lg shadow-lg">
-            <h1 class="text-3xl lg:text-5xl font-bold underline ">Upcoming Event</h1>
-
-
-            <div class="flex flex-col lg:flex-row items-center justify-between bg-white ">
-                <!-- Event Logo -->
-                <div class="w-full lg:w-1/3 flex justify-center p-4">
-                    <div class="p-6">
-                        <img src="./public/img/TechFusion/TechFusion.jpeg" alt="Event Logo" class="w-full h-auto rounded-sm">
-                    </div>
-                </div>
-
-                <!-- Event Name -->
-                <div class="w-full lg:w-1/3 flex justify-center p-4">
-                    <div class="p-4 text-center">
-                        <img src="./public/img/TechFusion/TechFusionDetail.jpeg" alt="Event QR" class="w-full h-auto rounded-sm">
-                        
-                        <h1 class="p-4 font-bold text-3xl underline "><a href="https://forms.gle/R2mB7gXWcPTa5Tg3A"> Register Now!</a></h1>
-                    </div>
-                </div>
-
-                <!-- Event QR -->
-                <div class="w-full lg:w-1/3 flex justify-center p-4">
-                    <div class="p-6">
-                        <img src="./public/img/TechFusion/FormQr.png" alt="Event QR" class="w-full h-auto rounded-sm">
-                        
-                    </div>
-                </div>
-            </div>
-           
-        </div>
-    </div>
-
-</body>
-
-</html>
\ No newline at end of file
