diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 579f69e..a433659 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -6,7 +6,9 @@
     <section class="bg-white dark:bg-black">
       <div class="container px-6 py-16 mx-auto text-center">
         <div class="max-w-lg mx-auto">
-          <h1 class="text-3xl font-semibold text-gray-800 dark:text-[#eab308] lg:text-4xl">
+          <h1
+            class="text-3xl font-semibold text-gray-800 dark:text-[#eab308] lg:text-4xl"
+          >
             Welcome to Sundarbans House, IIT Madras!
           </h1>
           <p class="mt-6 text-gray-500 dark:text-gray-300">
@@ -25,13 +27,20 @@
               Participate in {{ upcomingEvents[0].title }}
             </button>
           </router-link>
+          <button
+            v-else
+            class="px-5 py-2 mt-6 text-sm font-medium leading-5 text-center text-white dark:text-black capitalize dark:bg-white bg-black rounded-lg hover:bg-blue-500 lg:mx-0 lg:w-auto focus:outline-none"
+            @click="$router.push('/user')"
+          >
+            Find Your Group
+          </button>
         </div>
 
         <div class="flex justify-center mt-10">
           <img
             class="object-cover w-full h-96 rounded-xl lg:w-4/5"
             src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1632&q=80"
-          >
+          />
         </div>
       </div>
     </section>
@@ -40,7 +49,9 @@
     <section class="bg-white dark:bg-black">
       <div class="container px-6 py-10 mx-auto">
         <div class="text-center">
-          <h1 class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white">
+          <h1
+            class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white"
+          >
             Upcoming Events
           </h1>
           <p class="max-w-lg mx-auto mt-4 text-gray-500">
@@ -49,29 +60,32 @@
         </div>
 
         <div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-2">
-          <div
-            v-for="event in upcomingEvents"
-            :key="event.slug"
-          >
+          <div v-for="event in upcomingEvents" :key="event.slug">
             <img
               class="relative z-10 object-cover w-full rounded-md h-96"
               :src="prependBackendLink(event.image)"
               alt="Event Image"
+            />
+            <div
+              class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black"
             >
-            <div class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black">
               <a
                 :href="event.form_url"
                 class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl"
               >
                 {{ event.title }}
               </a>
-              <p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
+              <p
+                class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm"
+              >
                 {{ truncateDescription(event.desc) }}
               </p>
               <p class="mt-3 text-sm text-[#eab308]">
                 {{ event.timestamp }}
               </p>
-              <p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
+              <p
+                class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm"
+              >
                 Deadline: {{ event.deadline }}
               </p>
             </div>
@@ -84,7 +98,9 @@
     <section class="bg-white py-10 dark:bg-black">
       <div class="container px-6 py-10 mx-auto">
         <div class="text-center">
-          <h1 class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white">
+          <h1
+            class="text-2xl font-semibold text-gray-800 capitalize lg:text-3xl dark:text-white"
+          >
             From Youtube
           </h1>
 
@@ -175,7 +191,9 @@
     <!-- latest events -->
     <section class="bg-white dark:bg-black">
       <div class="container px-6 py-10 mx-auto">
-        <h1 class="text-2xl font-semibold text-center text-gray-800 capitalize lg:text-3xl dark:text-white">
+        <h1
+          class="text-2xl font-semibold text-center text-gray-800 capitalize lg:text-3xl dark:text-white"
+        >
           Latest Events
         </h1>
 
@@ -184,17 +202,18 @@
           latest happenings and exciting activities within our community.
         </p>
 
-        <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3">
-          <div
-            v-for="event in latestEvents"
-            :key="event.slug"
-          >
+        <div
+          class="grid grid-cols-1 gap-8 mt-8 xl:mt-12 xl:gap-12 md:grid-cols-2 xl:grid-cols-3"
+        >
+          <div v-for="event in latestEvents" :key="event.slug">
             <img
               class="relative z-10 object-cover w-full rounded-md h-96"
               :src="prependBackendLink(event.image)"
               alt="Event Image"
+            />
+            <div
+              class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black"
             >
-            <div class="relative z-20 max-w-lg p-6 mx-auto -mt-20 bg-white rounded-md shadow dark:bg-black">
               <a
                 :href="event.form_url"
                 class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl"
@@ -243,7 +262,9 @@ export default {
     },
     async fetchEvents() {
       try {
-        const response = await fetch("https://sundarbans.camlio.shop/events", { mode: "cors" });
+        const response = await fetch("https://sundarbans.camlio.shop/events", {
+          mode: "cors",
+        });
         if (!response.ok) {
           throw new Error(`HTTP error! Status: ${response.status}`);
         }
@@ -271,5 +292,3 @@ export default {
   },
 };
 </script>
-
-