From 99f1815dce2da62a27b02ce11daa7b2ff3e67168 Mon Sep 17 00:00:00 2001
From: raunakhajela <raunakhajela@gmail.com>
Date: Tue, 7 Oct 2025 19:13:45 +0530
Subject: [PATCH] remove inline style and fix linting errors

---
 src/components/ChatBot.vue              |  66 +++--
 src/components/ClubPageNoBackend.vue    |  13 +-
 src/components/Council2425.vue          | 115 ++++++---
 src/components/CouncilPage.vue          |  20 +-
 src/components/CouncilPageNoBackend.vue | 133 +++++++---
 src/components/EventSlug.vue            |  48 +++-
 src/components/EventsPage.vue           | 158 +++++++++---
 src/components/EventsPageNoBackend.vue  | 170 ++++++++++---
 src/components/GLDashboard.vue          |  83 +++---
 src/components/GRP.vue                  | 242 +++++++++++++-----
 src/components/GRPAdmin.vue             |  91 ++++---
 src/components/GRPDetails.vue           | 244 +++++++++++-------
 src/components/HomePage.vue             |  49 ++--
 src/components/HomePageNoBackend.vue    |  46 ++--
 src/components/NavBar.vue               |   8 +-
 src/components/NavBarNoBackend.vue      |  17 +-
 src/components/NotFound.vue             |  26 +-
 src/components/NotesPage.vue            |   2 +-
 src/components/PrivacyPolicy.vue        |  14 +-
 src/components/SDSDashboard.vue         | 322 +++++++++++++++---------
 src/components/StudyBuddy.vue           | 179 +++++++++----
 src/components/StudyGroups.vue          |  38 ++-
 src/components/UserPage.vue             | 182 +++++++++-----
 src/components/UserPageNoBackend.vue    | 172 ++++++++++---
 src/components/VideoGallery.vue         |   6 +-
 src/components/WhatsAppLinks.vue        | 108 ++++++--
 src/components/YoutubeVid.vue           |  27 +-
 src/components/newPage.vue              |   4 +-
 28 files changed, 1776 insertions(+), 807 deletions(-)

diff --git a/src/components/ChatBot.vue b/src/components/ChatBot.vue
index e3db684..e53ffd3 100644
--- a/src/components/ChatBot.vue
+++ b/src/components/ChatBot.vue
@@ -1,23 +1,43 @@
 <template>
-    <NavBar></NavBar>
-    <div id="chat-container-wrapper">
-      <h1>Sundarbans AI Chatbot</h1>
-      <div id="chat-container" ref="chatContainer">
-        <div id="output" ref="output"></div>
-      </div>
-      <form @submit.prevent="handleSubmit" id="inputForm">
-        <input
-          type="text"
-          id="textInput"
-          v-model="question"
-          placeholder="Enter your question"
-          required
-        />
-        <button type="submit" id="submitButton">Submit</button>
-        <button type="button" id="stopButton" @click="handleStop">Stop</button>
-      </form>
+  <NavBar />
+  <div id="chat-container-wrapper">
+    <h1>Sundarbans AI Chatbot</h1>
+    <div
+      id="chat-container"
+      ref="chatContainer"
+    >
+      <div
+        id="output"
+        ref="output"
+      />
     </div>
-  </template>
+    <form
+      id="inputForm"
+      @submit.prevent="handleSubmit"
+    >
+      <input
+        id="textInput"
+        v-model="question"
+        type="text"
+        placeholder="Enter your question"
+        required
+      >
+      <button
+        id="submitButton"
+        type="submit"
+      >
+        Submit
+      </button>
+      <button
+        id="stopButton"
+        type="button"
+        @click="handleStop"
+      >
+        Stop
+      </button>
+    </form>
+  </div>
+</template>
   
   <script>
   import { marked } from 'marked';
@@ -25,6 +45,9 @@
   
   export default {
     name: 'ChatBot',
+    components: {
+      NavBar
+    },
     data() {
       return {
         question: '',
@@ -34,8 +57,8 @@
         messageHistory: []
       };
     },
-    components: {
-      NavBar
+    mounted() {
+      // Optional: You can load any external scripts or setup initial states here
     },
     methods: {
       async handleSubmit() {
@@ -108,9 +131,6 @@
         document.getElementById('submitButton').style.display = 'inline'; 
         document.getElementById('stopButton').style.display = 'none'; 
       }
-    },
-    mounted() {
-      // Optional: You can load any external scripts or setup initial states here
     }
   };
   </script>
diff --git a/src/components/ClubPageNoBackend.vue b/src/components/ClubPageNoBackend.vue
index 6d17ba1..5ab7c3a 100644
--- a/src/components/ClubPageNoBackend.vue
+++ b/src/components/ClubPageNoBackend.vue
@@ -17,14 +17,21 @@
               <!-- Friendly placeholder while clubs page is getting a fresh face -->
               <div class="p-12 text-center">
                 <div class="mx-auto max-w-xl">
-                  <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">We're giving this page a glow-up ✨</h1>
-                  <p class="text-gray-700 dark:text-gray-300 mb-6">Club directory is getting a fresh face — sleeker layout, better join flows, and shiny new links. Come back soon to see the new look!</p>
+                  <h1 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-4">
+                    We're giving this page a glow-up ✨
+                  </h1>
+                  <p class="text-gray-700 dark:text-gray-300 mb-6">
+                    Club directory is getting a fresh face — sleeker layout, better join flows, and shiny new links. Come back soon to see the new look!
+                  </p>
                   <div class="inline-flex items-center gap-x-3">
                     <span class="inline-block rounded-full bg-indigo-50 text-indigo-700 px-3 py-1 text-sm font-semibold">Under construction</span>
                     <span class="text-sm text-gray-500 dark:text-gray-400">(We're brewing something awesome)</span>
                   </div>
                   <div class="mt-8">
-                    <a href="/" class="inline-flex items-center gap-x-2 text-indigo-600 hover:text-indigo-500 dark:text-indigo-300">Return home</a>
+                    <a
+                      href="/"
+                      class="inline-flex items-center gap-x-2 text-indigo-600 hover:text-indigo-500 dark:text-indigo-300"
+                    >Return home</a>
                   </div>
                 </div>
               </div>
diff --git a/src/components/Council2425.vue b/src/components/Council2425.vue
index 02892db..07e42fc 100644
--- a/src/components/Council2425.vue
+++ b/src/components/Council2425.vue
@@ -5,13 +5,17 @@
     <!-- Section: Design Block -->
     <section class="mb-20">
       <!-- Jumbotron -->
-      <div class="relative overflow-hidden bg-cover bg-no-repeat" style="
+      <div
+        class="relative overflow-hidden bg-cover bg-no-repeat"
+        style="
           background-position: 50%;
           background-image: url('https://images.unsplash.com/photo-1556484687-30636164638b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
           height: 500px;
-        ">
+        "
+      >
         <div
-          class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-[hsla(0,0%,0%,0.75)] bg-fixed">
+          class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-[hsla(0,0%,0%,0.75)] bg-fixed"
+        >
           <div class="flex h-full items-center justify-center">
             <div class="px-6 text-center text-white md:px-12">
               <h1 class="mt-8 mb-5 text-5xl font-bold tracking-tight md:text-6xl xl:text-7xl">
@@ -36,7 +40,10 @@
       <div class="container px-5 py-10 mx-auto">
         <div class="flex flex-wrap -m-4">
           <div class="container px-5 py-10 mx-auto">
-            <div id="adminsContainer" class="flex flex-wrap -m-4 upperCouncil">
+            <div
+              id="adminsContainer"
+              class="flex flex-wrap -m-4 upperCouncil"
+            >
               <!-- First Admin -->
               <div class="p-4 mx-auto md:w-1/4">
                 <div
@@ -102,10 +109,20 @@
         </h1>
 
         <div class="">
-          <div id="adminsContainer" class="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-4">
-            <div v-for="g_l in group_leaders" :key="g_l.name"
-              class="flex-grow flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
-              <img class="object-cover w-full h-56" :src="prependBackendLink(g_l.image)" alt="avatar">
+          <div
+            id="adminsContainer"
+            class="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-4"
+          >
+            <div
+              v-for="g_l in group_leaders"
+              :key="g_l.name"
+              class="flex-grow flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent"
+            >
+              <img
+                class="object-cover w-full h-56"
+                :src="prependBackendLink(g_l.image)"
+                alt="avatar"
+              >
 
               <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">
                 {{ g_l.name }}
@@ -132,10 +149,16 @@
         </p>
 
         <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-4">
-          <div v-for="wops in webops" :key="wops.name"
-            class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
-            <img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" :src="prependBackendLink(wops.image)"
-              alt="avatar">
+          <div
+            v-for="wops in webops"
+            :key="wops.name"
+            class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent"
+          >
+            <img
+              class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
+              :src="prependBackendLink(wops.image)"
+              alt="avatar"
+            >
 
             <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">
               {{ wops.name }}
@@ -145,7 +168,10 @@
       </div>
     </section>
 
-    <section v-if="graphics" class="bg-white dark:bg-black  mt-10 mb-20 pt-20 pb-20">
+    <section
+      v-if="graphics"
+      class="bg-white dark:bg-black  mt-10 mb-20 pt-20 pb-20"
+    >
       <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">
           Sundarbans Graphics Team
@@ -156,10 +182,16 @@
         </p>
 
         <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-4">
-          <div v-for="designer in graphics" :key="designer.name"
-            class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
-            <img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
-              :src="prependBackendLink(designer.image)" alt="avatar">
+          <div
+            v-for="designer in graphics"
+            :key="designer.name"
+            class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent"
+          >
+            <img
+              class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
+              :src="prependBackendLink(designer.image)"
+              alt="avatar"
+            >
 
             <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">
               {{ designer.name }}
@@ -168,7 +200,10 @@
         </div>
       </div>
     </section>
-    <section v-if="prteam" class="bg-white dark:bg-black mb-20">
+    <section
+      v-if="prteam"
+      class="bg-white dark:bg-black mb-20"
+    >
       <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">
           Sundarbans PR & Marketing Team
@@ -179,10 +214,16 @@
         </p>
 
         <div class="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-4">
-          <div v-for="pr in prteam" :key="pr.name"
-            class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent">
-            <img class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300" :src="prependBackendLink(pr.image)"
-              alt="avatar">
+          <div
+            v-for="pr in prteam"
+            :key="pr.name"
+            class="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-blue-600 dark:border-gray-700 dark:hover:border-transparent"
+          >
+            <img
+              class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
+              :src="prependBackendLink(pr.image)"
+              alt="avatar"
+            >
 
             <h1 class="mt-4 text-2xl font-semibold text-gray-700 capitalize dark:text-white group-hover:text-white">
               {{ pr.name }}
@@ -193,13 +234,6 @@
     </section>
   </body>
 </template>
-<style scoped>
-.upperCouncil {
-  img {
-    border-radius: 0%;
-  }
-}
-</style>
 <script>
 import axios from 'axios';
 import NavBar from './NavBar.vue';
@@ -234,14 +268,6 @@ export default {
       api_url: '',
     };
   },
-  methods: {
-    prependBackendLink(url) {
-      if (url == "/media/profile-icon-design-free-vector.jpg") {
-        return 'https://cdn.pixabay.com/photo/2018/11/13/21/43/avatar-3814049_1280.png'
-      }
-      return this.api_url + url;
-    },
-  },
   async mounted() {
     try {
       this.api_url = this.$globalData.backendUrl;
@@ -275,6 +301,21 @@ export default {
       console.error('Error fetching data:', error);
     }
   },
+  methods: {
+    prependBackendLink(url) {
+      if (url == "/media/profile-icon-design-free-vector.jpg") {
+        return 'https://cdn.pixabay.com/photo/2018/11/13/21/43/avatar-3814049_1280.png'
+      }
+      return this.api_url + url;
+    },
+  },
 
 };
 </script>
+<style scoped>
+.upperCouncil {
+  img {
+    border-radius: 0%;
+  }
+}
+</style>
diff --git a/src/components/CouncilPage.vue b/src/components/CouncilPage.vue
index f060ed0..fd3952a 100644
--- a/src/components/CouncilPage.vue
+++ b/src/components/CouncilPage.vue
@@ -6,12 +6,7 @@
     <section class="mb-20">
       <!-- Jumbotron -->
       <div
-        class="relative overflow-hidden bg-cover bg-no-repeat"
-        style="
-          background-position: 50%;
-          background-image: url('https://images.unsplash.com/photo-1556484687-30636164638b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-          height: 500px;
-        "
+        class="relative overflow-hidden bg-[url('https://images.unsplash.com/photo-1556484687-30636164638b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')] bg-cover bg-no-repeat bg-[50%] h-[500px]"
       >
         <div
           class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden bg-[hsla(0,0%,0%,0.75)] bg-fixed"
@@ -188,8 +183,7 @@
 
     <section
       v-if="graphics"
-      class="bg-white dark:bg-black  mt-10 mb-20 pt-20 pb-20"
-
+      class="bg-white dark:bg-black  mt-10 mb-20 pt-20 pb-20"
     >
       <div class="container px-6 py-10 mx-auto ">
         <h1
@@ -292,11 +286,6 @@ export default {
       api_url : '',
     };
   },
-  methods:{
-    prependBackendLink(url) {
-      return this.api_url + url;
-    },
-  },
   async mounted() {
     try {
       this.api_url = this.$globalData.backendUrl;
@@ -313,6 +302,11 @@ export default {
       console.error('Error fetching data:', error);
     }
   },
+  methods:{
+    prependBackendLink(url) {
+      return this.api_url + url;
+    },
+  },
 };
 </script>
 
diff --git a/src/components/CouncilPageNoBackend.vue b/src/components/CouncilPageNoBackend.vue
index c74e3c1..c16c918 100644
--- a/src/components/CouncilPageNoBackend.vue
+++ b/src/components/CouncilPageNoBackend.vue
@@ -46,14 +46,30 @@
                     <span class="text-sm text-gray-700 dark:text-gray-200">
                       Secretary
                     </span>
-                      <div class="mt-2 text-sm text-gray-600 dark:text-gray-300">
-                        <div v-if="admins[0].email"><a :href="`mailto:${admins[0].email}`">{{ admins[0].email }}</a></div>
-                        <div v-if="admins[0].phone"><a :href="`tel:${admins[0].phone}`">{{ admins[0].phone }}</a></div>
-                        <div class="flex gap-3 justify-center mt-1">
-                          <a v-if="admins[0].linkedin" :href="admins[0].linkedin" target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-400 text-sm">LinkedIn</a>
-                          <a v-if="admins[0].instagram" :href="admins[0].instagram" target="_blank" rel="noopener" class="text-pink-600 dark:text-pink-400 text-sm">Insta</a>
-                        </div>
+                    <div class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                      <div v-if="admins[0].email">
+                        <a :href="`mailto:${admins[0].email}`">{{ admins[0].email }}</a>
                       </div>
+                      <div v-if="admins[0].phone">
+                        <a :href="`tel:${admins[0].phone}`">{{ admins[0].phone }}</a>
+                      </div>
+                      <div class="flex gap-3 justify-center mt-1">
+                        <a
+                          v-if="admins[0].linkedin"
+                          :href="admins[0].linkedin"
+                          target="_blank"
+                          rel="noopener"
+                          class="text-blue-600 dark:text-blue-400 text-sm"
+                        >LinkedIn</a>
+                        <a
+                          v-if="admins[0].instagram"
+                          :href="admins[0].instagram"
+                          target="_blank"
+                          rel="noopener"
+                          class="text-pink-600 dark:text-pink-400 text-sm"
+                        >Insta</a>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -81,14 +97,30 @@
                     <span class="text-sm text-gray-700 dark:text-gray-200">
                       Deputy Secretary
                     </span>
-                      <div class="mt-2 text-sm text-gray-600 dark:text-gray-300">
-                        <div v-if="admins[1].email"><a :href="`mailto:${admins[1].email}`">{{ admins[1].email }}</a></div>
-                        <div v-if="admins[1].phone"><a :href="`tel:${admins[1].phone}`">{{ admins[1].phone }}</a></div>
-                        <div class="flex gap-3 justify-center mt-1">
-                          <a v-if="admins[1].linkedin" :href="admins[1].linkedin" target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-400 text-sm">LinkedIn</a>
-                          <a v-if="admins[1].instagram" :href="admins[1].instagram" target="_blank" rel="noopener" class="text-pink-600 dark:text-pink-400 text-sm">Insta</a>
-                        </div>
+                    <div class="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                      <div v-if="admins[1].email">
+                        <a :href="`mailto:${admins[1].email}`">{{ admins[1].email }}</a>
+                      </div>
+                      <div v-if="admins[1].phone">
+                        <a :href="`tel:${admins[1].phone}`">{{ admins[1].phone }}</a>
                       </div>
+                      <div class="flex gap-3 justify-center mt-1">
+                        <a
+                          v-if="admins[1].linkedin"
+                          :href="admins[1].linkedin"
+                          target="_blank"
+                          rel="noopener"
+                          class="text-blue-600 dark:text-blue-400 text-sm"
+                        >LinkedIn</a>
+                        <a
+                          v-if="admins[1].instagram"
+                          :href="admins[1].instagram"
+                          target="_blank"
+                          rel="noopener"
+                          class="text-pink-600 dark:text-pink-400 text-sm"
+                        >Insta</a>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -133,11 +165,27 @@
               </p>
 
               <div class="mt-3 text-sm text-gray-600 dark:text-gray-300 text-center">
-                <div v-if="g_l.email"><a :href="`mailto:${g_l.email}`">{{ g_l.email }}</a></div>
-                <div v-if="g_l.phone"><a :href="`tel:${g_l.phone}`">{{ g_l.phone }}</a></div>
+                <div v-if="g_l.email">
+                  <a :href="`mailto:${g_l.email}`">{{ g_l.email }}</a>
+                </div>
+                <div v-if="g_l.phone">
+                  <a :href="`tel:${g_l.phone}`">{{ g_l.phone }}</a>
+                </div>
                 <div class="flex gap-3 justify-center mt-1">
-                  <a v-if="g_l.linkedin" :href="normalizeLink(g_l.linkedin)" target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-400 text-sm">LinkedIn</a>
-                  <a v-if="g_l.instagram" :href="normalizeLink(g_l.instagram)" target="_blank" rel="noopener" class="text-pink-600 dark:text-pink-400 text-sm">Insta</a>
+                  <a
+                    v-if="g_l.linkedin"
+                    :href="normalizeLink(g_l.linkedin)"
+                    target="_blank"
+                    rel="noopener"
+                    class="text-blue-600 dark:text-blue-400 text-sm"
+                  >LinkedIn</a>
+                  <a
+                    v-if="g_l.instagram"
+                    :href="normalizeLink(g_l.instagram)"
+                    target="_blank"
+                    rel="noopener"
+                    class="text-pink-600 dark:text-pink-400 text-sm"
+                  >Insta</a>
                 </div>
               </div>
             </div>
@@ -171,8 +219,8 @@
           >
             <img
               class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
-                :src="prependBackendLink(wops.image)"
-                :style="imageStyleFor(wops)"
+              :src="prependBackendLink(wops.image)"
+              :style="imageStyleFor(wops)"
               alt="avatar"
             >
 
@@ -185,11 +233,33 @@
             </p>
 
             <div class="mt-3 text-sm text-gray-600 dark:text-gray-300 text-center w-full max-w-xs">
-              <div v-if="wops.email" class="break-words"><a :href="`mailto:${wops.email}`">{{ wops.email }}</a></div>
-              <div v-if="wops.phone" class="break-words"><a :href="`tel:${wops.phone}`">{{ wops.phone }}</a></div>
+              <div
+                v-if="wops.email"
+                class="break-words"
+              >
+                <a :href="`mailto:${wops.email}`">{{ wops.email }}</a>
+              </div>
+              <div
+                v-if="wops.phone"
+                class="break-words"
+              >
+                <a :href="`tel:${wops.phone}`">{{ wops.phone }}</a>
+              </div>
               <div class="flex gap-3 justify-center mt-1 flex-wrap">
-                <a v-if="wops.linkedin" :href="normalizeLink(wops.linkedin)" target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-400 text-sm break-words">LinkedIn</a>
-                <a v-if="wops.instagram" :href="normalizeLink(wops.instagram)" target="_blank" rel="noopener" class="text-pink-600 dark:text-pink-400 text-sm break-words">Insta</a>
+                <a
+                  v-if="wops.linkedin"
+                  :href="normalizeLink(wops.linkedin)"
+                  target="_blank"
+                  rel="noopener"
+                  class="text-blue-600 dark:text-blue-400 text-sm break-words"
+                >LinkedIn</a>
+                <a
+                  v-if="wops.instagram"
+                  :href="normalizeLink(wops.instagram)"
+                  target="_blank"
+                  rel="noopener"
+                  class="text-pink-600 dark:text-pink-400 text-sm break-words"
+                >Insta</a>
               </div>
             </div>
           </div>
@@ -200,7 +270,6 @@
     <section
       v-if="graphics"
       class="bg-white dark:bg-black  mt-10 mb-20 pt-20 pb-20"
-
     >
       <div class="container px-6 py-10 mx-auto ">
         <h1
@@ -225,8 +294,8 @@
           >
             <img
               class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
-                :src="prependBackendLink(gr.image)"
-                :style="imageStyleFor(gr)"
+              :src="prependBackendLink(gr.image)"
+              :style="imageStyleFor(gr)"
               alt="avatar"
             >
 
@@ -264,8 +333,8 @@
           >
             <img
               class="object-cover w-32 h-32 rounded-full ring-4 ring-gray-300"
-                :src="prependBackendLink(pr.image)"
-                :style="imageStyleFor(pr)"
+              :src="prependBackendLink(pr.image)"
+              :style="imageStyleFor(pr)"
               alt="avatar"
             >
 
@@ -355,6 +424,9 @@ export default {
       prteam: []
     };
   },
+  mounted() {
+    // No API calls in no-backend mode
+  },
   methods: {
     prependBackendLink(url) {
       // In no-backend mode, return placeholder image for missing images
@@ -377,9 +449,6 @@ export default {
       return {};
     },
   },
-  mounted() {
-    // No API calls in no-backend mode
-  },
 };
 </script>
 
diff --git a/src/components/EventSlug.vue b/src/components/EventSlug.vue
index 1b03460..0ba45a4 100644
--- a/src/components/EventSlug.vue
+++ b/src/components/EventSlug.vue
@@ -2,10 +2,16 @@
   <NavBar />
 
   <body class=" dark:bg-black">
-    <section v-if="event" class="mb-10 md:mb-30"
-      :style="{ backgroundImage: 'url(' + `${this.$globalData.backendUrl}` + event.image + ')' }">
+    <section
+      v-if="event"
+      class="mb-10 md:mb-30"
+      :style="{ backgroundImage: 'url(' + `${$globalData.backendUrl}` + event.image + ')' }"
+    >
       <!-- Jumbotron -->
-      <div class="relative overflow-hidden bg-cover bg-no-repeat" style="background-position: 50%; height: 500px;">
+      <div
+        class="relative overflow-hidden bg-cover bg-no-repeat"
+        style="background-position: 50%; height: 500px;"
+      >
         <div class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden  bg-black-10 bg-fixed">
           <div class="flex h-full items-center justify-center">
             <div class="px-6 text-center text-white md:px-12">
@@ -22,13 +28,19 @@
 
 
     <!-- Section: Design Block -->
-    <section v-else class="mb-10 md:mb-30">
+    <section
+      v-else
+      class="mb-10 md:mb-30"
+    >
       <!-- Jumbotron -->
 
-      <div class="relative overflow-hidden bg-cover bg-no-repeat" style="
+      <div
+        class="relative overflow-hidden bg-cover bg-no-repeat"
+        style="
             background-position: 50%;
             background-image: url('https://images.unsplash.com/photo-1679094837433-32484a621c74?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
-            height: 500px;">
+            height: 500px;"
+      >
         <div class="absolute top-0 right-0 bottom-0 left-0 h-full w-full overflow-hidden  bg-black-10 bg-fixed">
           <div class="flex h-full items-center justify-center">
             <div class="px-6 text-center text-white md:px-12">
@@ -47,7 +59,10 @@
 
 
 
-    <section v-if="event" class="bg-white dark:bg-black">
+    <section
+      v-if="event"
+      class="bg-white dark:bg-black"
+    >
       <div class="container flex flex-col items-center px-4 py-12 mx-auto text-center">
         <h2 class="text-2xl font-bold tracking-tight text-gray-800 xl:text-3xl dark:text-white">
           Event title: {{ event.title }}
@@ -64,8 +79,10 @@
         </p>
 
         <div class="mt-6">
-          <a :href="event.form_url"
-            class="inline-flex items-center justify-center w-full px-4 py-2.5 mt-4 overflow-hidden text-sm text-white transition-colors duration-300 bg-blue-600 rounded-lg shadow sm:w-auto sm:mx-2 sm:mt-0 hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80">
+          <a
+            :href="event.form_url"
+            class="inline-flex items-center justify-center w-full px-4 py-2.5 mt-4 overflow-hidden text-sm text-white transition-colors duration-300 bg-blue-600 rounded-lg shadow sm:w-auto sm:mx-2 sm:mt-0 hover:bg-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-80"
+          >
             <span class="mx-2">
               Register Here
             </span>
@@ -75,8 +92,17 @@
     </section>
 
     <!-- check if video exists or not -->
-    <video class="w-full max-w-4xl mx-auto my-10 shadow-lg" autoplay loop controls muted>
-      <source src="https://tecdn.b-cdn.net/img/video/Sail-Away.mp4" type="video/mp4">
+    <video
+      class="w-full max-w-4xl mx-auto my-10 shadow-lg"
+      autoplay
+      loop
+      controls
+      muted
+    >
+      <source
+        src="https://tecdn.b-cdn.net/img/video/Sail-Away.mp4"
+        type="video/mp4"
+      >
     </video>
   </body>
 </template>
diff --git a/src/components/EventsPage.vue b/src/components/EventsPage.vue
index f05eb0a..965e435 100644
--- a/src/components/EventsPage.vue
+++ b/src/components/EventsPage.vue
@@ -3,19 +3,40 @@
 
   <body class="dark:bg-black dark:text-white">
     <!-- caraousal -->
-    <div id="carouselExampleCaptions" class="relative" data-te-carousel-init data-te-ride="carousel">
+    <div
+      id="carouselExampleCaptions"
+      class="relative"
+      data-te-carousel-init
+      data-te-ride="carousel"
+    >
       <!--Carousel indicators-->
-      <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
-        data-te-carousel-indicators>
-        <button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="0" data-te-carousel-active
+      <div
+        class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+        data-te-carousel-indicators
+      >
+        <button
+          type="button"
+          data-te-target="#carouselExampleCaptions"
+          data-te-slide-to="0"
+          data-te-carousel-active
           class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-          aria-current="true" aria-label="Slide 1" />
-        <button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="1"
+          aria-current="true"
+          aria-label="Slide 1"
+        />
+        <button
+          type="button"
+          data-te-target="#carouselExampleCaptions"
+          data-te-slide-to="1"
           class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-          aria-label="Slide 2" />
-        <button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="2"
+          aria-label="Slide 2"
+        />
+        <button
+          type="button"
+          data-te-target="#carouselExampleCaptions"
+          data-te-slide-to="2"
           class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-          aria-label="Slide 3" />
+          aria-label="Slide 3"
+        />
       </div>
 
       <!--Carousel items-->
@@ -23,8 +44,15 @@
         <!--First item-->
         <div
           class="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
-          data-te-carousel-active data-te-carousel-item style="backface-visibility: hidden">
-          <img src="../assets/Paradox.jpg" class="block w-full rounded-none" alt="...">
+          data-te-carousel-active
+          data-te-carousel-item
+          style="backface-visibility: hidden"
+        >
+          <img
+            src="../assets/Paradox.jpg"
+            class="block w-full rounded-none"
+            alt="..."
+          >
           <div class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
             <h5 class="text-xl">
               Experience IITM BS
@@ -37,8 +65,14 @@
         <!--Second item-->
         <div
           class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
-          data-te-carousel-item style="backface-visibility: hidden">
-          <img src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(22).jpg" class="block w-full" alt="...">
+          data-te-carousel-item
+          style="backface-visibility: hidden"
+        >
+          <img
+            src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(22).jpg"
+            class="block w-full"
+            alt="..."
+          >
           <div class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
             <h5 class="text-xl">
               Second slide label
@@ -49,8 +83,14 @@
         <!--Third item-->
         <div
           class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
-          data-te-carousel-item style="backface-visibility: hidden">
-          <img src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(23).jpg" class="block w-full" alt="...">
+          data-te-carousel-item
+          style="backface-visibility: hidden"
+        >
+          <img
+            src="https://tecdn.b-cdn.net/img/Photos/Slides/img%20(23).jpg"
+            class="block w-full"
+            alt="..."
+          >
           <div class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
             <h5 class="text-xl">
               Third slide label
@@ -63,28 +103,56 @@
       <!--Carousel controls - prev item-->
       <button
         class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-        type="button" data-te-target="#carouselExampleCaptions" data-te-slide="prev">
+        type="button"
+        data-te-target="#carouselExampleCaptions"
+        data-te-slide="prev"
+      >
         <span class="inline-block h-8 w-8">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-            stroke="currentColor" class="h-6 w-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="h-6 w-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15.75 19.5L8.25 12l7.5-7.5"
+            />
           </svg>
         </span>
         <span
-          class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
+          class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+        >Previous</span>
       </button>
       <!--Carousel controls - next item-->
       <button
         class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-        type="button" data-te-target="#carouselExampleCaptions" data-te-slide="next">
+        type="button"
+        data-te-target="#carouselExampleCaptions"
+        data-te-slide="next"
+      >
         <span class="inline-block h-8 w-8">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-            stroke="currentColor" class="h-6 w-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="h-6 w-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M8.25 4.5l7.5 7.5-7.5 7.5"
+            />
           </svg>
         </span>
         <span
-          class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Next</span>
+          class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+        >Next</span>
       </button>
     </div>
 
@@ -101,10 +169,19 @@
         </div>
 
         <div class="grid grid-cols-1 gap-8 mt-8 lg:grid-cols-2">
-          <div v-for="event in upcomingEvents" :key="event.slug">
-            <router-link :to="'/event/' + event.slug" class="block relative">
-              <img class="relative z-10 object-cover w-full rounded-md h-96" :src="prependBackendLink(event.image)"
-                alt="Event Image">
+          <div
+            v-for="event in upcomingEvents"
+            :key="event.slug"
+          >
+            <router-link
+              :to="'/event/' + event.slug"
+              class="block relative"
+            >
+              <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">
                 <span class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl">
                   {{ event.title }}
@@ -119,8 +196,7 @@
                   Deadline: {{ event.deadline }}
                 </p>
               </div>
-            </router-link>
-
+            </router-link>
           </div>
         </div>
       </div>
@@ -139,12 +215,20 @@
         </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">
-            <router-link :to="'/event/' + event.slug" class="block relative">
-              <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
+            v-for="event in latestEvents"
+            :key="event.slug"
+          >
+            <router-link
+              :to="'/event/' + event.slug"
+              class="block relative"
+            >
+              <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">
                 {{ event.title }}
                 <p class="mt-3 text-sm text-[#eab308]">
                   {{ event.timestamp }}
diff --git a/src/components/EventsPageNoBackend.vue b/src/components/EventsPageNoBackend.vue
index 3ce89ca..e967c45 100644
--- a/src/components/EventsPageNoBackend.vue
+++ b/src/components/EventsPageNoBackend.vue
@@ -3,19 +3,40 @@
 
   <body class="dark:bg-black dark:text-white">
     <!-- caraousal -->
-    <div id="carouselExampleCaptions" class="relative" data-te-carousel-init data-te-ride="carousel">
+    <div
+      id="carouselExampleCaptions"
+      class="relative"
+      data-te-carousel-init
+      data-te-ride="carousel"
+    >
       <!--Carousel indicators-->
-      <div class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
-        data-te-carousel-indicators>
-        <button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="0" data-te-carousel-active
+      <div
+        class="absolute bottom-0 left-0 right-0 z-[2] mx-[15%] mb-4 flex list-none justify-center p-0"
+        data-te-carousel-indicators
+      >
+        <button
+          type="button"
+          data-te-target="#carouselExampleCaptions"
+          data-te-slide-to="0"
+          data-te-carousel-active
           class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-          aria-current="true" aria-label="Slide 1" />
-        <button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="1"
+          aria-current="true"
+          aria-label="Slide 1"
+        />
+        <button
+          type="button"
+          data-te-target="#carouselExampleCaptions"
+          data-te-slide-to="1"
           class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-          aria-label="Slide 2" />
-        <button type="button" data-te-target="#carouselExampleCaptions" data-te-slide-to="2"
+          aria-label="Slide 2"
+        />
+        <button
+          type="button"
+          data-te-target="#carouselExampleCaptions"
+          data-te-slide-to="2"
           class="mx-[3px] box-content h-[3px] w-[30px] flex-initial cursor-pointer border-0 border-y-[10px] border-solid border-transparent bg-white bg-clip-padding p-0 -indent-[999px] opacity-50 transition-opacity duration-[600ms] ease-[cubic-bezier(0.25,0.1,0.25,1.0)] motion-reduce:transition-none"
-          aria-label="Slide 3" />
+          aria-label="Slide 3"
+        />
       </div>
 
       <!--Carousel items-->
@@ -23,8 +44,15 @@
         <!--First item-->
         <div
           class="relative float-left -mr-[100%] w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
-          data-te-carousel-active data-te-carousel-item style="backface-visibility: hidden">
-          <img src="../assets/Paradox.jpg" class="block w-full rounded-none" alt="...">
+          data-te-carousel-active
+          data-te-carousel-item
+          style="backface-visibility: hidden"
+        >
+          <img
+            src="../assets/Paradox.jpg"
+            class="block w-full rounded-none"
+            alt="..."
+          >
           <div class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
             <h5 class="text-xl">
               Experience IITM BS
@@ -37,8 +65,14 @@
         <!--Second item-->
         <div
           class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
-          data-te-carousel-item style="backface-visibility: hidden">
-          <img src="../assets/Paradox.jpg" class="block w-full" alt="...">
+          data-te-carousel-item
+          style="backface-visibility: hidden"
+        >
+          <img
+            src="../assets/Paradox.jpg"
+            class="block w-full"
+            alt="..."
+          >
           <div class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
             <h5 class="text-xl">
               Sundarbans House Events
@@ -49,8 +83,14 @@
         <!--Third item-->
         <div
           class="relative float-left -mr-[100%] hidden w-full transition-transform duration-[600ms] ease-in-out motion-reduce:transition-none"
-          data-te-carousel-item style="backface-visibility: hidden">
-          <img src="../assets/Paradox.jpg" class="block w-full" alt="...">
+          data-te-carousel-item
+          style="backface-visibility: hidden"
+        >
+          <img
+            src="../assets/Paradox.jpg"
+            class="block w-full"
+            alt="..."
+          >
           <div class="absolute inset-x-[15%] bottom-5 hidden py-5 text-center text-white md:block">
             <h5 class="text-xl">
               Community & Growth
@@ -63,28 +103,56 @@
       <!--Carousel controls - prev item-->
       <button
         class="absolute bottom-0 left-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-        type="button" data-te-target="#carouselExampleCaptions" data-te-slide="prev">
+        type="button"
+        data-te-target="#carouselExampleCaptions"
+        data-te-slide="prev"
+      >
         <span class="inline-block h-8 w-8">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-            stroke="currentColor" class="h-6 w-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="h-6 w-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M15.75 19.5L8.25 12l7.5-7.5"
+            />
           </svg>
         </span>
         <span
-          class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Previous</span>
+          class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+        >Previous</span>
       </button>
       <!--Carousel controls - next item-->
       <button
         class="absolute bottom-0 right-0 top-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
-        type="button" data-te-target="#carouselExampleCaptions" data-te-slide="next">
+        type="button"
+        data-te-target="#carouselExampleCaptions"
+        data-te-slide="next"
+      >
         <span class="inline-block h-8 w-8">
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-            stroke="currentColor" class="h-6 w-6">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="h-6 w-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M8.25 4.5l7.5 7.5-7.5 7.5"
+            />
           </svg>
         </span>
         <span
-          class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]">Next</span>
+          class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+        >Next</span>
       </button>
     </div>
 
@@ -101,11 +169,23 @@
         </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"
+          >
             <div class="block relative">
-              <a v-if="event.instagram" :href="event.instagram" target="_blank" rel="noopener" class="block relative">
-                <img class="relative z-10 object-cover w-full rounded-md h-96" :src="event.image"
-                  alt="Event Image">
+              <a
+                v-if="event.instagram"
+                :href="event.instagram"
+                target="_blank"
+                rel="noopener"
+                class="block relative"
+              >
+                <img
+                  class="relative z-10 object-cover w-full rounded-md h-96"
+                  :src="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">
                   <span class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl">
                     {{ event.title }}
@@ -121,9 +201,16 @@
                   </p>
                 </div>
               </a>
-              <router-link v-else :to="'/event/' + event.slug" class="block relative">
-                <img class="relative z-10 object-cover w-full rounded-md h-96" :src="event.image"
-                  alt="Event Image">
+              <router-link
+                v-else
+                :to="'/event/' + event.slug"
+                class="block relative"
+              >
+                <img
+                  class="relative z-10 object-cover w-full rounded-md h-96"
+                  :src="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">
                   <span class="font-semibold text-gray-800 hover:underline dark:text-white md:text-xl">
                     {{ event.title }}
@@ -139,7 +226,6 @@
                   </p>
                 </div>
               </router-link>
-
             </div>
           </div>
         </div>
@@ -159,12 +245,20 @@
         </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">
-            <router-link :to="'/event/' + event.slug" class="block relative">
-              <img class="relative z-10 object-cover w-full rounded-md h-96" :src="event.image"
-                alt="Event Image">
+          <div
+            v-for="event in latestEvents"
+            :key="event.slug"
+          >
+            <router-link
+              :to="'/event/' + event.slug"
+              class="block relative"
+            >
+              <img
+                class="relative z-10 object-cover w-full rounded-md h-96"
+                :src="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">
-
                 {{ event.title }}
                 <p class="mt-3 text-sm text-[#eab308]">
                   {{ event.timestamp }}
diff --git a/src/components/GLDashboard.vue b/src/components/GLDashboard.vue
index bc52b61..797925e 100644
--- a/src/components/GLDashboard.vue
+++ b/src/components/GLDashboard.vue
@@ -1,42 +1,55 @@
 <template>
-    <div>
-      <!-- Dropdown to select search type (Name or Email) -->
-      <select v-model="searchType">
-        <option value="name">Name</option>
-        <option value="email">Email</option>
-      </select>
+  <div>
+    <!-- Dropdown to select search type (Name or Email) -->
+    <select v-model="searchType">
+      <option value="name">
+        Name
+      </option>
+      <option value="email">
+        Email
+      </option>
+    </select>
   
-      <!-- Search bar to filter table -->
-      <input
-        type="text"
-        v-model="searchQuery"
-        placeholder="Search by selected option"
-        @input="debouncedSearch"
-      />
+    <!-- Search bar to filter table -->
+    <input
+      v-model="searchQuery"
+      type="text"
+      placeholder="Search by selected option"
+      @input="debouncedSearch"
+    >
   
-      <!-- Container to make the table vertically scrollable -->
-      <div class="table-container">
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Email</th>
-              <th>Mobile Number</th>
-              <th>Photo</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="user in filteredUsers" :key="user.email">
-              <td>{{ user.name }}</td>
-              <td>{{ user.email }}</td>
-              <td>{{ user.mobile }}</td>
-              <td><img :src="user.photo" alt="User Photo" width="50" /></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+    <!-- Container to make the table vertically scrollable -->
+    <div class="table-container">
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Email</th>
+            <th>Mobile Number</th>
+            <th>Photo</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="user in filteredUsers"
+            :key="user.email"
+          >
+            <td>{{ user.name }}</td>
+            <td>{{ user.email }}</td>
+            <td>{{ user.mobile }}</td>
+            <td>
+              <img
+                :src="user.photo"
+                alt="User Photo"
+                width="50"
+              >
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  </template>
+  </div>
+</template>
   
   <script>
   import _ from 'lodash'; // for debounce
diff --git a/src/components/GRP.vue b/src/components/GRP.vue
index 509ec72..d246a3b 100644
--- a/src/components/GRP.vue
+++ b/src/components/GRP.vue
@@ -1,26 +1,45 @@
 <template>
   <NavBar />
   <div class="container mx-auto p-4 bg-white dark:bg-black dark:text-white">
-
     <div class="content mt-8">
       <div class="flex justify-between items-center mb-4">
-        <div class="text-lg">Facing Issues? We are here to help!</div>
-        <button class="create-btn border border-gray-500 ml-2 dark:border-gray-300 py-2 px-3 rounded "
-          @click="showPopup = true">
+        <div class="text-lg">
+          Facing Issues? We are here to help!
+        </div>
+        <button
+          class="create-btn border border-gray-500 ml-2 dark:border-gray-300 py-2 px-3 rounded "
+          @click="showPopup = true"
+        >
           Create New Complaint
         </button>
       </div>
       <div class="complaints bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
-        <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">Past Complaints</h2>
+        <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">
+          Past Complaints
+        </h2>
         <ul>
-          <li v-if="complaints.length === 0" class="text-gray-600 dark:text-gray-400">No complaints found.</li>
-          <li v-for="complaint in complaints" :key="complaint.id"
-            class="complaint-item flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
+          <li
+            v-if="complaints.length === 0"
+            class="text-gray-600 dark:text-gray-400"
+          >
+            No complaints found.
+          </li>
+          <li
+            v-for="complaint in complaints"
+            :key="complaint.id"
+            class="complaint-item flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700"
+          >
             <div class="complaint-details">
-              <h3 class="text-lg font-medium dark:text-gray-100">{{ complaint.title }}</h3>
-              <p class="text-gray-600 dark:text-gray-400">Date Created: {{ new
-                Date(complaint.timestamp).toLocaleDateString() }}</p>
-              <p class="text-gray-600 dark:text-gray-400">Status: {{ complaint.status }}</p>
+              <h3 class="text-lg font-medium dark:text-gray-100">
+                {{ complaint.title }}
+              </h3>
+              <p class="text-gray-600 dark:text-gray-400">
+                Date Created: {{ new
+                  Date(complaint.timestamp).toLocaleDateString() }}
+              </p>
+              <p class="text-gray-600 dark:text-gray-400">
+                Status: {{ complaint.status }}
+              </p>
             </div>
             <div>
               <router-link :to="'/grp/' + complaint.id">
@@ -28,9 +47,11 @@
                   View
                 </button>
               </router-link>
-              <button v-if="complaint.status == 'Open'"
+              <button
+                v-if="complaint.status == 'Open'"
                 class="ml-2 view-btn border border-gray-500 dark:border-gray-300 py-1 px-3 rounded"
-                @click="closeComplaint(complaint.id)">
+                @click="closeComplaint(complaint.id)"
+              >
                 Close
               </button>
             </div>
@@ -38,108 +59,197 @@
         </ul>
       </div>
     </div>
-    <div v-if="showPopup" class="popup-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+    <div
+      v-if="showPopup"
+      class="popup-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
+    >
       <div class="popup-content bg-white dark:bg-gray-800 p-10 rounded-lg shadow-md ">
-        <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">Create New Complaint</h2>
+        <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">
+          Create New Complaint
+        </h2>
         <form @submit.prevent="submitComplaint">
           <div class="mb-4">
             <label class="block text-gray-700 dark:text-gray-300">Subject</label>
-            <input type="text" required placeholder="Short title summary." maxlength="100" v-model="newComplaint.title"
-              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded">
+            <input
+              v-model="newComplaint.title"
+              type="text"
+              required
+              placeholder="Short title summary."
+              maxlength="100"
+              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded"
+            >
           </div>
           <div class="mb-4">
             <label class="block text-gray-700 dark:text-gray-300">Category</label>
-            <select required v-model="newComplaint.category"
-              class="w-full bg-white border border-gray-300 dark:border-gray-600 p-2 rounded text-black">
-              <option value="" disabled selected>Select Option</option>
-              <option v-for="category in categories" :value="category" :key="category">{{ category }}</option>
+            <select
+              v-model="newComplaint.category"
+              required
+              class="w-full bg-white border border-gray-300 dark:border-gray-600 p-2 rounded text-black"
+            >
+              <option
+                value=""
+                disabled
+                selected
+              >
+                Select Option
+              </option>
+              <option
+                v-for="category in categories"
+                :key="category"
+                :value="category"
+              >
+                {{ category }}
+              </option>
 
               <!-- Add more categories as needed -->
             </select>
           </div>
-          <div v-if="isIncident" class="mb-4">
+          <div
+            v-if="isIncident"
+            class="mb-4"
+          >
             <label class="block text-gray-700 dark:text-gray-300">Date of Incident</label>
-            <input type="date" required v-model="newComplaint.date"
-              class="text-black placeholder-gray-500 w-full border border-gray-300 dark:border-gray-600 p-2 rounded">
+            <input
+              v-model="newComplaint.date"
+              type="date"
+              required
+              class="text-black placeholder-gray-500 w-full border border-gray-300 dark:border-gray-600 p-2 rounded"
+            >
           </div>
-          <div v-if="isIncident" class="mb-4">
+          <div
+            v-if="isIncident"
+            class="mb-4"
+          >
             <label class="block text-gray-700 dark:text-gray-300">Location</label>
-            <input type="text" required placeholder="Where did the incidence occur?" maxlength="100"
+            <input
               v-model="newComplaint.location"
-              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded">
+              type="text"
+              required
+              placeholder="Where did the incidence occur?"
+              maxlength="100"
+              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded"
+            >
           </div>
-          <div v-if="isIncident" class="mb-4">
+          <div
+            v-if="isIncident"
+            class="mb-4"
+          >
             <label class="block text-gray-700 dark:text-gray-300">Persons Involved</label>
-            <input type="text" required placeholder="Name of relevant persons" maxlength="100"
+            <input
               v-model="newComplaint.personsInvolved"
-              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded">
+              type="text"
+              required
+              placeholder="Name of relevant persons"
+              maxlength="100"
+              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded"
+            >
           </div>
           <div class="mb-4">
             <label class="block text-gray-700 dark:text-gray-300">Google Drive Link (optional)</label>
-            <input type="url" placeholder="Upload screenshots/files to GDrive and share the link here" maxlength="150"
+            <input
               v-model="newComplaint.gdriveLink"
-              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded">
+              type="url"
+              placeholder="Upload screenshots/files to GDrive and share the link here"
+              maxlength="150"
+              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded"
+            >
           </div>
           <div class="mb-4">
             <label class="block text-gray-700 dark:text-gray-300">Detailed Description</label>
-            <textarea required v-model="newComplaint.details"
-              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded"></textarea>
+            <textarea
+              v-model="newComplaint.details"
+              required
+              class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded"
+            />
           </div>
           <div class="mb-4">
             <div class="checkbox-wrapper-18 flex items-center">
               <div class="round mr-2">
-                <input type="checkbox" id="recc" v-model="newComplaint.recurring" />
-                <label for="recc"></label>
+                <input
+                  id="recc"
+                  v-model="newComplaint.recurring"
+                  type="checkbox"
+                >
+                <label for="recc" />
               </div>
               <span>Is this a recurring issue?</span>
             </div>
           </div>
           <div class="mb-4">
-
             <div class="checkbox-wrapper-18 flex items-center">
               <div class="round mr-2">
-                <input required type="checkbox" id="ack" v-model="newComplaint.acknowledgement" />
-                <label for="ack"></label>
+                <input
+                  id="ack"
+                  v-model="newComplaint.acknowledgement"
+                  required
+                  type="checkbox"
+                >
+                <label for="ack" />
               </div>
               <span>I acknowledge that the information provided is accurate to the best of my knowledge.</span>
             </div>
           </div>
 
           <div class="flex justify-end">
-            <button type="button" class="cancel-btn border border-gray-500 dark:border-gray-300 py-2 px-4 rounded mr-2"
-              @click="showPopup = false">
+            <button
+              type="button"
+              class="cancel-btn border border-gray-500 dark:border-gray-300 py-2 px-4 rounded mr-2"
+              @click="showPopup = false"
+            >
               Cancel
             </button>
-            <button type="submit" class="submit-btn border border-gray-500 dark:border-gray-300 py-2 px-4 rounded">
+            <button
+              type="submit"
+              class="submit-btn border border-gray-500 dark:border-gray-300 py-2 px-4 rounded"
+            >
               Submit
             </button>
           </div>
         </form>
       </div>
     </div>
-    <div v-if="showDetailsPopup"
-      class="popup-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+    <div
+      v-if="showDetailsPopup"
+      class="popup-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center"
+    >
       <div class="popup-content bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md w-1/2">
-        <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">Complaint Details</h2>
+        <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">
+          Complaint Details
+        </h2>
         <div class="mb-4">
-          <p class="block text-gray-700 dark:text-gray-300">Subject: {{ selectedComplaint.title }}</p>
-
+          <p class="block text-gray-700 dark:text-gray-300">
+            Subject: {{ selectedComplaint.title }}
+          </p>
         </div>
         <div class="mb-4">
-          <p class="block text-gray-700 dark:text-gray-300">Category: {{ selectedComplaint.category }}</p>
-
+          <p class="block text-gray-700 dark:text-gray-300">
+            Category: {{ selectedComplaint.category }}
+          </p>
         </div>
-        <div v-if="selectedComplaint.date" class="mb-4">
-          <p class="block text-gray-700 dark:text-gray-300">Date of Incident: {{ selectedComplaint.date }}</p>
+        <div
+          v-if="selectedComplaint.date"
+          class="mb-4"
+        >
+          <p class="block text-gray-700 dark:text-gray-300">
+            Date of Incident: {{ selectedComplaint.date }}
+          </p>
         </div>
-        <div v-if="selectedComplaint.location" class="mb-4">
-          <p class="block text-gray-700 dark:text-gray-300">Location: {{ selectedComplaint.location }}</p>
+        <div
+          v-if="selectedComplaint.location"
+          class="mb-4"
+        >
+          <p class="block text-gray-700 dark:text-gray-300">
+            Location: {{ selectedComplaint.location }}
+          </p>
         </div>
-        <button @click="showDetailsPopup = false"
-          class="cancel-btn border border-gray-500 dark:border-gray-300 py-2 px-4 rounded mr-2">Close</button>
+        <button
+          class="cancel-btn border border-gray-500 dark:border-gray-300 py-2 px-4 rounded mr-2"
+          @click="showDetailsPopup = false"
+        >
+          Close
+        </button>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -152,9 +262,6 @@ export default {
   components: {
     NavBar
   },
-  created() {
-    this.fetchComplaints();
-  },
   data() {
     return {
       showPopup: false,
@@ -183,6 +290,15 @@ export default {
       }
     };
   },
+  computed: {
+    // Add computed properties as needed
+    isIncident() {
+      return ['Bullying', 'Harassment', 'Discrimination'].includes(this.newComplaint.category);
+    }
+  },
+  created() {
+    this.fetchComplaints();
+  },
   methods: {
     async submitComplaint() {
       // Handle the submission of the new complaint
@@ -233,12 +349,6 @@ export default {
       this.selectedComplaint = complaint;
       this.showDetailsPopup = true;
     },
-  },
-  computed: {
-    // Add computed properties as needed
-    isIncident() {
-      return ['Bullying', 'Harassment', 'Discrimination'].includes(this.newComplaint.category);
-    }
   }
 };
 </script>
diff --git a/src/components/GRPAdmin.vue b/src/components/GRPAdmin.vue
index cf5a546..135eadd 100644
--- a/src/components/GRPAdmin.vue
+++ b/src/components/GRPAdmin.vue
@@ -1,40 +1,57 @@
 <template>
-    <NavBar />
-    <div class="container mx-auto p-4 bg-white dark:bg-black dark:text-white">
-
-        <div class="content mt-8">
-
-            <div class="complaints bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
-                <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">Active Complaints</h2>
-                <ul>
-                    <li v-if="complaints.length == 0" class="text-gray-600 dark:text-gray-400">No complaints found.</li>
-                    <li v-for="complaint in complaints" :key="complaint.id"
-                        class="complaint-item flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700">
-                        <div class="complaint-details">
-                            <h3 class="text-lg font-medium dark:text-gray-100">{{ complaint.title }}</h3>
-                            <p class="text-gray-600 dark:text-gray-400">Date Created: {{ new
-                                Date(complaint.timestamp).toLocaleDateString() }}</p>
-                            <p class="text-gray-600 dark:text-gray-400">Status: {{ complaint.status }}</p>
-                            <p class="text-gray-600 dark:text-gray-400">Priority: {{ complaint.priority }}</p>
-                        </div>
-                        <div>
-                            <router-link :to="'/grp/' + complaint.id">
-                                <button class="view-btn border border-gray-500 dark:border-gray-300 py-1 px-3 rounded">
-                                    View
-                                </button>
-                            </router-link>
-                            <button v-if="complaint.status == 'Open'"
-                                class="ml-2 view-btn border border-gray-500 dark:border-gray-300 py-1 px-3 rounded"
-                                @click="closeComplaint(complaint.id)">
-                                Close
-                            </button>
-                        </div>
-                    </li>
-                </ul>
+  <NavBar />
+  <div class="container mx-auto p-4 bg-white dark:bg-black dark:text-white">
+    <div class="content mt-8">
+      <div class="complaints bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
+        <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">
+          Active Complaints
+        </h2>
+        <ul>
+          <li
+            v-if="complaints.length == 0"
+            class="text-gray-600 dark:text-gray-400"
+          >
+            No complaints found.
+          </li>
+          <li
+            v-for="complaint in complaints"
+            :key="complaint.id"
+            class="complaint-item flex justify-between items-center py-2 border-b border-gray-200 dark:border-gray-700"
+          >
+            <div class="complaint-details">
+              <h3 class="text-lg font-medium dark:text-gray-100">
+                {{ complaint.title }}
+              </h3>
+              <p class="text-gray-600 dark:text-gray-400">
+                Date Created: {{ new
+                  Date(complaint.timestamp).toLocaleDateString() }}
+              </p>
+              <p class="text-gray-600 dark:text-gray-400">
+                Status: {{ complaint.status }}
+              </p>
+              <p class="text-gray-600 dark:text-gray-400">
+                Priority: {{ complaint.priority }}
+              </p>
             </div>
-        </div>
-
+            <div>
+              <router-link :to="'/grp/' + complaint.id">
+                <button class="view-btn border border-gray-500 dark:border-gray-300 py-1 px-3 rounded">
+                  View
+                </button>
+              </router-link>
+              <button
+                v-if="complaint.status == 'Open'"
+                class="ml-2 view-btn border border-gray-500 dark:border-gray-300 py-1 px-3 rounded"
+                @click="closeComplaint(complaint.id)"
+              >
+                Close
+              </button>
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -46,9 +63,6 @@ export default {
     components: {
         NavBar
     },
-    created() {
-        this.fetchComplaints();
-    },
     data() {
         return {
             complaints: [],
@@ -56,6 +70,9 @@ export default {
 
         };
     },
+    created() {
+        this.fetchComplaints();
+    },
     methods: {
 
         async fetchComplaints() {
diff --git a/src/components/GRPDetails.vue b/src/components/GRPDetails.vue
index bd21d3c..518ef6f 100644
--- a/src/components/GRPDetails.vue
+++ b/src/components/GRPDetails.vue
@@ -1,98 +1,156 @@
 <template>
-    <NavBar />
-    <div class="dark:bg-black dark:text-white">
-        <div class="complaint-details bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mx-auto w-3/4">
-            <h1 class="text-2xl font-semibold mb-4 dark:text-gray-100">Complaint Details</h1>
-            <div class="mb-4">
-                <label class="block text-gray-700 dark:text-gray-300 font-semibold">Subject</label>
-                <p class="text-black dark:text-gray-100">{{ complaint.title }}</p>
-            </div>
-            <div class="mb-4">
-                <label class="block text-gray-700 dark:text-gray-300 font-semibold">Student ID</label>
-                <p class="text-black dark:text-gray-100">{{ complaint.email }}</p>
-            </div>
+  <NavBar />
+  <div class="dark:bg-black dark:text-white">
+    <div class="complaint-details bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mx-auto w-3/4">
+      <h1 class="text-2xl font-semibold mb-4 dark:text-gray-100">
+        Complaint Details
+      </h1>
+      <div class="mb-4">
+        <label class="block text-gray-700 dark:text-gray-300 font-semibold">Subject</label>
+        <p class="text-black dark:text-gray-100">
+          {{ complaint.title }}
+        </p>
+      </div>
+      <div class="mb-4">
+        <label class="block text-gray-700 dark:text-gray-300 font-semibold">Student ID</label>
+        <p class="text-black dark:text-gray-100">
+          {{ complaint.email }}
+        </p>
+      </div>
 
-            <div class="flex justify-between mr-5 flex-wrap">
-
-                <div class="mb-4">
-                    <label class="block text-gray-700 dark:text-gray-300 font-semibold">Category</label>
-                    <p class="text-black dark:text-gray-100">{{ complaint.category }}</p>
-                </div>
-                <div v-if="complaint.date" class="mb-4">
-                    <label class="block text-gray-700 dark:text-gray-300 font-semibold">Date of Incident</label>
-                    <p class="text-black dark:text-gray-100">{{ complaint.date }}</p>
-                </div>
-                <div v-if="complaint.location" class="mb-4">
-                    <label class="block text-gray-700 dark:text-gray-300 font-semibold">Location</label>
-                    <p class="text-black dark:text-gray-100">{{ complaint.location }}</p>
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-700 dark:text-gray-300 font-semibold">Is Recurring?</label>
-                    <p class="text-black dark:text-gray-100">{{ complaint.recurring ? "Yes" : "No" }}</p>
-                </div>
-                <div v-if="complaint.personsInvolved" class="mb-4">
-                    <label class="block text-gray-700 dark:text-gray-300 font-semibold">People Accused</label>
-                    <p class="text-black dark:text-gray-100">{{ complaint.personsInvolved }}</p>
-                </div>
-            </div>
-            <div class="mb-4">
-                <label class="block text-gray-700 dark:text-gray-300 font-semibold">Google Drive Link</label>
-                <p class="text-black dark:text-gray-100">{{ complaint.gdrive_url || "Not Provided" }}</p>
-            </div>
-            <div class="mb-4">
-                <label class="block text-gray-700 dark:text-gray-300 font-semibold">Details</label>
-                <p class="text-black dark:text-gray-100">{{ complaint.details }}</p>
-            </div>
-
-            <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">Messages</h2>
-            <div v-if="messages.length" class="flex flex-col">
-                <div v-for="message in messages" :key="message.id"
-                    :class="{ 'ml-auto': message.sender === self, 'mr-auto': message.sender !== self }"
-                    class="mb-4 flex flex-col">
-                    <div class=" bg-gray-300 text-black p-3 rounded-lg max-w-xs">
-                        <label v-if="message.sender !== self"
-                            class="block text-gray-700 text-sm">{{ message.sender }}</label>
-                        <p>{{ message.text }}</p>
-                        <p class="text-[10px] text-gray-700 mt-1">{{ new Date(message.timestamp).toLocaleDateString() }}
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div v-else>
-                <p class="text-gray-600 dark:text-gray-400">No messages yet.</p>
-            </div>
-            <form @submit.prevent="sendMessage" v-if="complaint.status == 'Open'">
-                <div class="mb-4">
-
-                    <textarea v-model="newMessage" placeholder="Send a new Message."
-                        class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded"></textarea>
-                </div>
-                <button type="submit"
-                    class="mb-4 view-btn border border-gray-500 dark:border-gray-300 py-1 px-3 rounded">Send
-                    Message</button>
-            </form>
-            <button v-if="complaint.status == 'Open'" @click="closeComplaint"
-                class="mb-4 view-btn border border-gray-500 dark:border-gray-300 py-1 px-3 rounded">Close
-                Complaint</button>
-            <div class="flex justify-between mr-5 flex-wrap">
-
-                <div class="mb-4">
-                    <label class="block text-gray-700 dark:text-gray-300 font-semibold">Priority</label>
-                    <p class="text-black dark:text-gray-100">{{ complaint.priority }}</p>
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-700 dark:text-gray-300 font-semibold">Date Created</label>
-                    <p class="text-black dark:text-gray-100">{{ new Date(complaint.timestamp).toLocaleDateString() }}
-                    </p>
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-700 dark:text-gray-300 font-semibold">Status</label>
-                    <p class="text-black dark:text-gray-100">{{ complaint.status }}</p>
-                </div>
+      <div class="flex justify-between mr-5 flex-wrap">
+        <div class="mb-4">
+          <label class="block text-gray-700 dark:text-gray-300 font-semibold">Category</label>
+          <p class="text-black dark:text-gray-100">
+            {{ complaint.category }}
+          </p>
+        </div>
+        <div
+          v-if="complaint.date"
+          class="mb-4"
+        >
+          <label class="block text-gray-700 dark:text-gray-300 font-semibold">Date of Incident</label>
+          <p class="text-black dark:text-gray-100">
+            {{ complaint.date }}
+          </p>
+        </div>
+        <div
+          v-if="complaint.location"
+          class="mb-4"
+        >
+          <label class="block text-gray-700 dark:text-gray-300 font-semibold">Location</label>
+          <p class="text-black dark:text-gray-100">
+            {{ complaint.location }}
+          </p>
+        </div>
+        <div class="mb-4">
+          <label class="block text-gray-700 dark:text-gray-300 font-semibold">Is Recurring?</label>
+          <p class="text-black dark:text-gray-100">
+            {{ complaint.recurring ? "Yes" : "No" }}
+          </p>
+        </div>
+        <div
+          v-if="complaint.personsInvolved"
+          class="mb-4"
+        >
+          <label class="block text-gray-700 dark:text-gray-300 font-semibold">People Accused</label>
+          <p class="text-black dark:text-gray-100">
+            {{ complaint.personsInvolved }}
+          </p>
+        </div>
+      </div>
+      <div class="mb-4">
+        <label class="block text-gray-700 dark:text-gray-300 font-semibold">Google Drive Link</label>
+        <p class="text-black dark:text-gray-100">
+          {{ complaint.gdrive_url || "Not Provided" }}
+        </p>
+      </div>
+      <div class="mb-4">
+        <label class="block text-gray-700 dark:text-gray-300 font-semibold">Details</label>
+        <p class="text-black dark:text-gray-100">
+          {{ complaint.details }}
+        </p>
+      </div>
 
-            </div>
+      <h2 class="text-xl font-semibold mb-4 dark:text-gray-100">
+        Messages
+      </h2>
+      <div
+        v-if="messages.length"
+        class="flex flex-col"
+      >
+        <div
+          v-for="message in messages"
+          :key="message.id"
+          :class="{ 'ml-auto': message.sender === self, 'mr-auto': message.sender !== self }"
+          class="mb-4 flex flex-col"
+        >
+          <div class=" bg-gray-300 text-black p-3 rounded-lg max-w-xs">
+            <label
+              v-if="message.sender !== self"
+              class="block text-gray-700 text-sm"
+            >{{ message.sender }}</label>
+            <p>{{ message.text }}</p>
+            <p class="text-[10px] text-gray-700 mt-1">
+              {{ new Date(message.timestamp).toLocaleDateString() }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <p class="text-gray-600 dark:text-gray-400">
+          No messages yet.
+        </p>
+      </div>
+      <form
+        v-if="complaint.status == 'Open'"
+        @submit.prevent="sendMessage"
+      >
+        <div class="mb-4">
+          <textarea
+            v-model="newMessage"
+            placeholder="Send a new Message."
+            class="text-black w-full border border-gray-300 dark:border-gray-600 p-2 rounded"
+          />
         </div>
+        <button
+          type="submit"
+          class="mb-4 view-btn border border-gray-500 dark:border-gray-300 py-1 px-3 rounded"
+        >
+          Send
+          Message
+        </button>
+      </form>
+      <button
+        v-if="complaint.status == 'Open'"
+        class="mb-4 view-btn border border-gray-500 dark:border-gray-300 py-1 px-3 rounded"
+        @click="closeComplaint"
+      >
+        Close
+        Complaint
+      </button>
+      <div class="flex justify-between mr-5 flex-wrap">
+        <div class="mb-4">
+          <label class="block text-gray-700 dark:text-gray-300 font-semibold">Priority</label>
+          <p class="text-black dark:text-gray-100">
+            {{ complaint.priority }}
+          </p>
+        </div>
+        <div class="mb-4">
+          <label class="block text-gray-700 dark:text-gray-300 font-semibold">Date Created</label>
+          <p class="text-black dark:text-gray-100">
+            {{ new Date(complaint.timestamp).toLocaleDateString() }}
+          </p>
+        </div>
+        <div class="mb-4">
+          <label class="block text-gray-700 dark:text-gray-300 font-semibold">Status</label>
+          <p class="text-black dark:text-gray-100">
+            {{ complaint.status }}
+          </p>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
@@ -100,6 +158,9 @@ import axios from 'axios';
 import NavBar from './NavBar.vue';
 
 export default {
+    components: {
+        NavBar
+    },
     data() {
         return {
             complaint: {},
@@ -109,9 +170,6 @@ export default {
             backendUrl: this.$globalData.backendUrl,
         };
     },
-    components: {
-        NavBar
-    },
     created() {
         this.fetchComplaintDetails();
 
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index a93d9ef..5a23d23 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -47,7 +47,7 @@
           <img
             class="object-cover w-full h-96 rounded-xl lg:w-4/5"
             src="../assets/iitmphoto.jpg"
-          />
+          >
         </div>
       </div>
     </section>
@@ -67,12 +67,15 @@
         </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"
             >
@@ -121,16 +124,14 @@
             class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
             style="padding-top: 56.25%"
           >
-          <YoutubeVid videoId="6N-PfwyjsIQ" />
-            
+            <YoutubeVid video-id="6N-PfwyjsIQ" />
           </div>
 
           <div
             class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
             style="padding-top: 56.25%"
           >
-          <YoutubeVid videoId="RLBxlaK_aU4" />
-            
+            <YoutubeVid video-id="RLBxlaK_aU4" />
           </div>
         </div>
       </div>
@@ -142,8 +143,7 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-            <YoutubeVid videoId="TvkTrLJonbw" />
-              
+              <YoutubeVid video-id="TvkTrLJonbw" />
             </div>
           </div>
           <div class="p-4 md:w-1/2 lg:w-1/4 w-full">
@@ -151,8 +151,7 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-            <YoutubeVid videoId="kEsry2TSVKU" />
-              
+              <YoutubeVid video-id="kEsry2TSVKU" />
             </div>
           </div>
           <div class="p-4 md:w-1/2 lg:w-1/4 w-full">
@@ -160,8 +159,7 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-            <YoutubeVid videoId="QW4T_FQzi2I" />
-              
+              <YoutubeVid video-id="QW4T_FQzi2I" />
             </div>
           </div>
           <div class="p-4 md:w-1/2 lg:w-1/4 w-full">
@@ -169,8 +167,7 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-            <YoutubeVid videoId="rZdih019rz4" />
-              
+              <YoutubeVid video-id="rZdih019rz4" />
             </div>
           </div>
         </div>
@@ -192,12 +189,20 @@
         </p>
 
         <div class="dark:text-white 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">
-            <router-link :to="'/event/' + event.slug" class="block relative">
-              <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
+            v-for="event in latestEvents"
+            :key="event.slug"
+          >
+            <router-link
+              :to="'/event/' + event.slug"
+              class="block relative"
+            >
+              <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">
                 {{ event.title }}
                 <p class="mt-3 text-sm text-[#eab308]">
                   {{ event.timestamp }}
@@ -205,8 +210,8 @@
               </div>
             </router-link>
           </div>
+        </div>
       </div>
-    </div>
     </section>
   </body>
 </template>
diff --git a/src/components/HomePageNoBackend.vue b/src/components/HomePageNoBackend.vue
index 992edcf..73c2cfc 100644
--- a/src/components/HomePageNoBackend.vue
+++ b/src/components/HomePageNoBackend.vue
@@ -29,7 +29,7 @@
           <img
             class="object-cover w-full h-96 rounded-xl lg:w-4/5"
             src="../assets/iitmphoto.jpg"
-          />
+          >
         </div>
       </div>
     </section>
@@ -49,12 +49,15 @@
         </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="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"
             >
@@ -103,16 +106,14 @@
             class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
             style="padding-top: 56.25%"
           >
-          <YoutubeVid videoId="6N-PfwyjsIQ" />
-            
+            <YoutubeVid video-id="6N-PfwyjsIQ" />
           </div>
 
           <div
             class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
             style="padding-top: 56.25%"
           >
-          <YoutubeVid videoId="RLBxlaK_aU4" />
-            
+            <YoutubeVid video-id="RLBxlaK_aU4" />
           </div>
         </div>
       </div>
@@ -124,8 +125,7 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-            <YoutubeVid videoId="TvkTrLJonbw" />
-              
+              <YoutubeVid video-id="TvkTrLJonbw" />
             </div>
           </div>
           <div class="p-4 md:w-1/2 lg:w-1/4 w-full">
@@ -133,8 +133,7 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-            <YoutubeVid videoId="kEsry2TSVKU" />
-              
+              <YoutubeVid video-id="kEsry2TSVKU" />
             </div>
           </div>
           <div class="p-4 md:w-1/2 lg:w-1/4 w-full">
@@ -142,8 +141,7 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-            <YoutubeVid videoId="QW4T_FQzi2I" />
-              
+              <YoutubeVid video-id="QW4T_FQzi2I" />
             </div>
           </div>
           <div class="p-4 md:w-1/2 lg:w-1/4 w-full">
@@ -151,8 +149,7 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-            <YoutubeVid videoId="rZdih019rz4" />
-              
+              <YoutubeVid video-id="rZdih019rz4" />
             </div>
           </div>
         </div>
@@ -174,10 +171,19 @@
         </p>
 
         <div class="dark:text-white 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">
-            <router-link :to="'/event/' + event.slug" class="block relative">
-              <img class="relative z-10 object-cover w-full rounded-md h-96" :src="event.image"
-                alt="Event Image">
+          <div
+            v-for="event in latestEvents"
+            :key="event.slug"
+          >
+            <router-link
+              :to="'/event/' + event.slug"
+              class="block relative"
+            >
+              <img
+                class="relative z-10 object-cover w-full rounded-md h-96"
+                :src="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">
                 {{ event.title }}
                 <p class="mt-3 text-sm text-[#eab308]">
@@ -186,8 +192,8 @@
               </div>
             </router-link>
           </div>
+        </div>
       </div>
-    </div>
     </section>
   </body>
 </template>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index f1d80ba..95cb0c0 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -119,9 +119,11 @@
               alt="User Picture"
             >
             <span class="ml-2 text-black dark:text-white font-semibold"><router-link to="user">{{ clippedName }}</router-link></span>
-            <i class="ml-4 bi bi-box-arrow-right text-black dark:text-white font-semibold text-2xl cursor-pointer	" title="Sign Out" @click="signOut"></i>
-           
-            
+            <i
+              class="ml-4 bi bi-box-arrow-right text-black dark:text-white font-semibold text-2xl cursor-pointer	"
+              title="Sign Out"
+              @click="signOut"
+            />
           </div>
         </div>
         <!-- If user is not logged in, show sign-in button -->
diff --git a/src/components/NavBarNoBackend.vue b/src/components/NavBarNoBackend.vue
index 4102eae..ff91678 100644
--- a/src/components/NavBarNoBackend.vue
+++ b/src/components/NavBarNoBackend.vue
@@ -130,8 +130,21 @@
         
         <!-- Provide quick access to house WhatsApp links when backend is offline -->
         <div class="mt-4 lg:mt-0 lg:ml-8">
-          <router-link to="/whatsapp" class="inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg">
-            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m6 16l3-3-3-3"/></svg>
+          <router-link
+            to="/whatsapp"
+            class="inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg"
+          >
+            <svg
+              class="w-5 h-5 mr-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            ><path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M3 5h12M9 3v2m6 16l3-3-3-3"
+            /></svg>
             House WhatsApp Links
           </router-link>
         </div>
diff --git a/src/components/NotFound.vue b/src/components/NotFound.vue
index 4374901..1ec06d2 100644
--- a/src/components/NotFound.vue
+++ b/src/components/NotFound.vue
@@ -1,27 +1,30 @@
 <template>
-    <NavBar></NavBar>
-    <div>
-      <h1>404 Not Found</h1>
-      <p>The page you're looking for doesn't exist.</p>
-      <p>You'll be redirected to the home page in {{ countdown }} seconds...</p>
-    </div>
-  </template>
+  <NavBar />
+  <div>
+    <h1>404 Not Found</h1>
+    <p>The page you're looking for doesn't exist.</p>
+    <p>You'll be redirected to the home page in {{ countdown }} seconds...</p>
+  </div>
+</template>
   
   <script>
   import NavBar from './NavBar.vue';
   export default {
     name: 'NotFound',
+    components: {
+      NavBar,
+    },
     data() {
       return {
         countdown: 10,
       };
     },
-    components: {
-      NavBar,
-    },
     mounted() {
       this.startCountdown();
     },
+    beforeUnmount() {
+      clearInterval(this.timer);
+    },
     methods: {
       startCountdown() {
         this.timer = setInterval(() => {
@@ -34,9 +37,6 @@
         }, 1000);
       },
     },
-    beforeUnmount() {
-      clearInterval(this.timer);
-    },
   };
   </script>
   <style scoped>
diff --git a/src/components/NotesPage.vue b/src/components/NotesPage.vue
index a9e9936..480255d 100644
--- a/src/components/NotesPage.vue
+++ b/src/components/NotesPage.vue
@@ -12,7 +12,7 @@
       src="https://theopennotes.in/course/63fd9e3c553314fb9fc19524"
       frameborder="0"
       title="OpenNotes"
-    ></iframe>
+    />
   </div>
 </template>
 
diff --git a/src/components/PrivacyPolicy.vue b/src/components/PrivacyPolicy.vue
index 511117f..aa9352e 100644
--- a/src/components/PrivacyPolicy.vue
+++ b/src/components/PrivacyPolicy.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <NavBar></NavBar>
+    <NavBar />
     <div class="container">
       <h1>Privacy Policy for Sundarbans House</h1>
       <p>
@@ -10,11 +10,19 @@
       </p>
 
       <div class="button-container">
-        <button @click="printDocument" class="action-button">Print</button>
+        <button
+          class="action-button"
+          @click="printDocument"
+        >
+          Print
+        </button>
         <a href="https://drive.google.com/u/0/uc?id=1vNx3MT7kfmVec7WAtKiuSjlTrazUc7-f&export=download"><button class="action-button">Download PDF</button></a>
       </div>
 
-      <div ref="policyContent" class="policy-content">
+      <div
+        ref="policyContent"
+        class="policy-content"
+      >
         <section id="information-collected">
           <h2>Information We Collect</h2>
           <ul>
diff --git a/src/components/SDSDashboard.vue b/src/components/SDSDashboard.vue
index c5ae7b7..739694d 100644
--- a/src/components/SDSDashboard.vue
+++ b/src/components/SDSDashboard.vue
@@ -1,144 +1,216 @@
 <template>
-    <div>
-      <!-- Dropdown to select which table to search -->
-      <label for="tableSelect">Select Table:</label>
-      <select id="tableSelect" v-model="selectedTable">
-        <option value="groupLeaders">Group Leaders</option>
-        <option value="teamMembers">Team Members</option>
-        <option value="events">Events</option>
-      </select>
+  <div>
+    <!-- Dropdown to select which table to search -->
+    <label for="tableSelect">Select Table:</label>
+    <select
+      id="tableSelect"
+      v-model="selectedTable"
+    >
+      <option value="groupLeaders">
+        Group Leaders
+      </option>
+      <option value="teamMembers">
+        Team Members
+      </option>
+      <option value="events">
+        Events
+      </option>
+    </select>
   
-      <!-- Dropdown to select search type (Name or Email) -->
-      <select v-model="searchType">
-        <option value="name">Name</option>
-        <option value="email">Email</option>
-      </select>
+    <!-- Dropdown to select search type (Name or Email) -->
+    <select v-model="searchType">
+      <option value="name">
+        Name
+      </option>
+      <option value="email">
+        Email
+      </option>
+    </select>
   
-      <!-- Search bar to filter selected table -->
-      <input
-        type="text"
-        v-model="searchQuery"
-        placeholder="Search by selected option"
-        @input="debouncedSearch"
-      />
+    <!-- Search bar to filter selected table -->
+    <input
+      v-model="searchQuery"
+      type="text"
+      placeholder="Search by selected option"
+      @input="debouncedSearch"
+    >
   
-      <!-- Conditionally Render Group Leaders Table -->
-      <div v-if="selectedTable === 'groupLeaders'">
-        <div class="table-header">
-          <h2>Group Leaders</h2>
-          <button @click="showAddForm('groupLeaders')">Add Group Leader</button>
-        </div>
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Email</th>
-                <th>Mobile Number</th>
-                <th>Photo</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(leader, index) in filteredGroupLeaders" :key="leader.email">
-                <td>{{ leader.name }}</td>
-                <td>{{ leader.email }}</td>
-                <td>{{ leader.mobile }}</td>
-                <td><img :src="leader.photo" alt="Leader Photo" width="50" /></td>
-                <td>
-                  <button @click="showEditForm('groupLeaders', index)">Edit</button>
-                  <button @click="removeEntry('groupLeaders', index)">Remove</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+    <!-- Conditionally Render Group Leaders Table -->
+    <div v-if="selectedTable === 'groupLeaders'">
+      <div class="table-header">
+        <h2>Group Leaders</h2>
+        <button @click="showAddForm('groupLeaders')">
+          Add Group Leader
+        </button>
       </div>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Mobile Number</th>
+              <th>Photo</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(leader, index) in filteredGroupLeaders"
+              :key="leader.email"
+            >
+              <td>{{ leader.name }}</td>
+              <td>{{ leader.email }}</td>
+              <td>{{ leader.mobile }}</td>
+              <td>
+                <img
+                  :src="leader.photo"
+                  alt="Leader Photo"
+                  width="50"
+                >
+              </td>
+              <td>
+                <button @click="showEditForm('groupLeaders', index)">
+                  Edit
+                </button>
+                <button @click="removeEntry('groupLeaders', index)">
+                  Remove
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   
-      <!-- Conditionally Render Team Members Table -->
-      <div v-if="selectedTable === 'teamMembers'">
-        <div class="table-header">
-          <h2>Team Members</h2>
-        </div>
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Email</th>
-                <th>Mobile Number</th>
-                <th>Photo</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(member) in filteredTeamMembers" :key="member.email">
-                <td>{{ member.name }}</td>
-                <td>{{ member.email }}</td>
-                <td>{{ member.mobile }}</td>
-                <td><img :src="member.photo" alt="Member Photo" width="50" /></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+    <!-- Conditionally Render Team Members Table -->
+    <div v-if="selectedTable === 'teamMembers'">
+      <div class="table-header">
+        <h2>Team Members</h2>
+      </div>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Email</th>
+              <th>Mobile Number</th>
+              <th>Photo</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(member) in filteredTeamMembers"
+              :key="member.email"
+            >
+              <td>{{ member.name }}</td>
+              <td>{{ member.email }}</td>
+              <td>{{ member.mobile }}</td>
+              <td>
+                <img
+                  :src="member.photo"
+                  alt="Member Photo"
+                  width="50"
+                >
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
+    </div>
   
-      <!-- Conditionally Render Events Table -->
-      <div v-if="selectedTable === 'events'">
-        <div class="table-header">
-          <h2>Events</h2>
-          <button @click="showAddForm('events')">Add Event</button>
-        </div>
-        <div class="table-container">
-          <table>
-            <thead>
-              <tr>
-                <th>Event Name</th>
-                <th>Email</th>
-                <th>Mobile Number</th>
-                <th>Photo</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(event, index) in filteredEvents" :key="event.email">
-                <td>{{ event.name }}</td>
-                <td>{{ event.email }}</td>
-                <td>{{ event.mobile }}</td>
-                <td><img :src="event.photo" alt="Event Photo" width="50" /></td>
-                <td>
-                  <button @click="showEditForm('events', index)">Edit</button>
-                  <button @click="removeEntry('events', index)">Remove</button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+    <!-- Conditionally Render Events Table -->
+    <div v-if="selectedTable === 'events'">
+      <div class="table-header">
+        <h2>Events</h2>
+        <button @click="showAddForm('events')">
+          Add Event
+        </button>
+      </div>
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Event Name</th>
+              <th>Email</th>
+              <th>Mobile Number</th>
+              <th>Photo</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(event, index) in filteredEvents"
+              :key="event.email"
+            >
+              <td>{{ event.name }}</td>
+              <td>{{ event.email }}</td>
+              <td>{{ event.mobile }}</td>
+              <td>
+                <img
+                  :src="event.photo"
+                  alt="Event Photo"
+                  width="50"
+                >
+              </td>
+              <td>
+                <button @click="showEditForm('events', index)">
+                  Edit
+                </button>
+                <button @click="removeEntry('events', index)">
+                  Remove
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
+    </div>
   
-      <!-- Add/Edit Form Modal -->
-      <div v-if="isFormVisible" class="form-modal">
-        <div class="form-content">
-          <h3>{{ isEditing ? 'Edit' : 'Add' }} {{ selectedTable === 'groupLeaders' ? 'Group Leader' : 'Event' }}</h3>
-          <form @submit.prevent="isEditing ? updateEntry() : createEntry()">
-            <label>Name:</label>
-            <input v-model="formData.name" required />
+    <!-- Add/Edit Form Modal -->
+    <div
+      v-if="isFormVisible"
+      class="form-modal"
+    >
+      <div class="form-content">
+        <h3>{{ isEditing ? 'Edit' : 'Add' }} {{ selectedTable === 'groupLeaders' ? 'Group Leader' : 'Event' }}</h3>
+        <form @submit.prevent="isEditing ? updateEntry() : createEntry()">
+          <label>Name:</label>
+          <input
+            v-model="formData.name"
+            required
+          >
   
-            <label>Email:</label>
-            <input type="email" v-model="formData.email" required />
+          <label>Email:</label>
+          <input
+            v-model="formData.email"
+            type="email"
+            required
+          >
   
-            <label>Mobile Number:</label>
-            <input v-model="formData.mobile" required />
+          <label>Mobile Number:</label>
+          <input
+            v-model="formData.mobile"
+            required
+          >
   
-            <label>Photo URL:</label>
-            <input v-model="formData.photo" />
+          <label>Photo URL:</label>
+          <input v-model="formData.photo">
   
-            <button type="submit">{{ isEditing ? 'Update' : 'Add' }}</button>
-            <button type="button" @click="closeForm">Cancel</button>
-          </form>
-        </div>
+          <button type="submit">
+            {{ isEditing ? 'Update' : 'Add' }}
+          </button>
+          <button
+            type="button"
+            @click="closeForm"
+          >
+            Cancel
+          </button>
+        </form>
       </div>
     </div>
-  </template>
+  </div>
+</template>
   
   <script>
   import _ from 'lodash'; // for debounce
diff --git a/src/components/StudyBuddy.vue b/src/components/StudyBuddy.vue
index b29ffcd..48ed85e 100644
--- a/src/components/StudyBuddy.vue
+++ b/src/components/StudyBuddy.vue
@@ -1,50 +1,86 @@
 <template>
-  <NavBar></NavBar>
+  <NavBar />
 
   <div class="container">
-    
-    <div class="intro-text">Meet Your Nearby Study Buddies <p>This is a student run platform and it is not endorsed  by the  IITM BS degree program in any way. Students can join the platform on their personal discretion.</p></div>
+    <div class="intro-text">
+      Meet Your Nearby Study Buddies <p>This is a student run platform and it is not endorsed  by the  IITM BS degree program in any way. Students can join the platform on their personal discretion.</p>
+    </div>
 
-    <div v-if="token2" class="button-container">
+    <div
+      v-if="token2"
+      class="button-container"
+    >
       <button
         class="icon-button"
-        @click="showUpdatePopup"
         title="Update Social Media"
+        @click="showUpdatePopup"
       >
         <img
           src="../assets/update.svg"
           alt="Update Social Media"
           class="icon"
-        />
+        >
         <span class="button-text">Update Profile</span>
       </button>
-      <button class="icon-button" @click="refreshPage" title="Refresh">
-        <img src="../assets/refresh.svg" alt="Refresh" class="icon" />
+      <button
+        class="icon-button"
+        title="Refresh"
+        @click="refreshPage"
+      >
+        <img
+          src="../assets/refresh.svg"
+          alt="Refresh"
+          class="icon"
+        >
         <span class="button-text">Refresh</span>
       </button>
       <button
         class="icon-button"
-        @click="showDeletePopup"
         title="Delete My Data"
+        @click="showDeletePopup"
       >
-        <img src="../assets/delete.svg" alt="Delete My Data" class="icon" />
+        <img
+          src="../assets/delete.svg"
+          alt="Delete My Data"
+          class="icon"
+        >
         <span class="button-text">Delete My Data</span>
       </button>
     </div>
-    <div v-if="!token2" class="login-prompt">
-      <GoogleLogin></GoogleLogin>
+    <div
+      v-if="!token2"
+      class="login-prompt"
+    >
+      <GoogleLogin />
     </div>
     <div v-else>
-      <div v-if="loading" class="loading-container">
-        <div class="spinner"></div>
+      <div
+        v-if="loading"
+        class="loading-container"
+      >
+        <div class="spinner" />
       </div>
       <div v-else>
-        <div v-if="users.length" class="user-list">
-          <div class="user" v-for="user in pusers" :key="user.name"> <!-- looping over users fetched -->
-            <img :src="user.photo_url" :alt="`${user.name}'s photo`" class="user-photo" />
+        <div
+          v-if="users.length"
+          class="user-list"
+        >
+          <div
+            v-for="user in pusers"
+            :key="user.name"
+            class="user"
+          >
+            <!-- looping over users fetched -->
+            <img
+              :src="user.photo_url"
+              :alt="`${user.name}'s photo`"
+              class="user-photo"
+            >
 
             <div class="user-info">
-              <div class="user-name">{{ user.name }}</div>
+              <div class="user-name">
+                {{ user.name }}
+              </div>
               <div class="user-distance">
                 {{ user.distance.toFixed(2) }} km away from you.
               </div>
@@ -57,36 +93,45 @@
                     user.social_url && user.social_url.includes('instagram')
                   "
                 >
-                  <a :href="user.social_url" target="_blank">
+                  <a
+                    :href="user.social_url"
+                    target="_blank"
+                  >
                     <img
                       src="../assets/insta.png"
                       alt="Instagram"
                       class="instagram-logo"
-                    />
+                    >
                   </a>
                 </template>
                 <!-- LinkedIn -->
                 <template
                   v-if="user.social_url && user.social_url.includes('linkedin')"
                 >
-                  <a :href="user.social_url" target="_blank">
+                  <a
+                    :href="user.social_url"
+                    target="_blank"
+                  >
                     <img
                       src="../assets/linkedin.png"
                       alt="LinkedIn"
                       class="instagram-logo"
-                    />
+                    >
                   </a>
                 </template>
                 <!-- Snapchat -->
                 <template
                   v-if="user.social_url && user.social_url.includes('snapchat')"
                 >
-                  <a :href="user.social_url" target="_blank">
+                  <a
+                    :href="user.social_url"
+                    target="_blank"
+                  >
                     <img
                       src="../assets/snap.png"
                       alt="Snapchat"
                       class="instagram-logo"
-                    />
+                    >
                   </a>
                 </template>
                 <!-- Fallback for missing links -->
@@ -105,7 +150,7 @@
                     alt="Update Social Media"
                     class="instagram-logo"
                     @click="LinkNotAvailable"
-                  />
+                  >
                 </template>
               </template>
               <template v-else>
@@ -115,16 +160,30 @@
                   alt="Update Social Media"
                   class="instagram-logo"
                   @click="showInstagramAlert"
-                />
+                >
               </template>
             </div>
           </div>
-          <button v-if="hasNext" @click="paginate" style="width: 100%; background-color: #910404; text-align: center; color: white;">View more</button>
-          <p v-if="!users.length" class="no-users">No nearby users found.</p>
+          <button
+            v-if="hasNext"
+            style="width: 100%; background-color: #910404; text-align: center; color: white;"
+            @click="paginate"
+          >
+            View more
+          </button>
+          <p
+            v-if="!users.length"
+            class="no-users"
+          >
+            No nearby users found.
+          </p>
         </div>
       </div>
 
-      <div v-if="showPopup" class="popup-overlay">
+      <div
+        v-if="showPopup"
+        class="popup-overlay"
+      >
         <div class="popup-content">
           <p>
             I confirm that my location data will be captured & its derivatives,
@@ -132,45 +191,71 @@
             the application.
           </p>
           <div>
-            <button @click="agreeLocationSharing">I Agree</button>
-            <button @click="cancelLocationSharing">I Disagree</button>
+            <button @click="agreeLocationSharing">
+              I Agree
+            </button>
+            <button @click="cancelLocationSharing">
+              I Disagree
+            </button>
           </div>
           <div>
             <a
               href="https://sundarbans.iitmbs.org/privacy-policy#studybuddy-feature"
               target="_blank"
               style="color: blue"
-              >Privacy Policy</a
-            >
+            >Privacy Policy</a>
           </div>
         </div>
       </div>
 
-      <div v-if="showDeletePopupVisible" class="popup-overlay">
+      <div
+        v-if="showDeletePopupVisible"
+        class="popup-overlay"
+      >
         <div class="popup-content">
           <p>Are you sure you want to permanently delete your data?</p>
-          <button @click="deleteUserData">Yes</button>
-          <button @click="hideDeletePopup">No</button>
+          <button @click="deleteUserData">
+            Yes
+          </button>
+          <button @click="hideDeletePopup">
+            No
+          </button>
         </div>
       </div>
 
-      <div v-if="showUpdatePopupVisible" class="popup-overlay">
+      <div
+        v-if="showUpdatePopupVisible"
+        class="popup-overlay"
+      >
         <div class="popup-content">
           <label for="socialMedia">Select Social Media:</label>
-          <select v-model="selectedSocialMedia" id="socialMedia">
-            <option value="instagram">Instagram</option>
-            <option value="snapchat">Snapchat</option>
-            <option value="linkedin">LinkedIn</option>
+          <select
+            id="socialMedia"
+            v-model="selectedSocialMedia"
+          >
+            <option value="instagram">
+              Instagram
+            </option>
+            <option value="snapchat">
+              Snapchat
+            </option>
+            <option value="linkedin">
+              LinkedIn
+            </option>
           </select>
           <input
             v-model="socialMediaUrl"
             :placeholder="socialMediaPlaceholder"
             style="margin-top: 4px"
             type="text"
-          />
+          >
           <div>
-            <button @click="updateSocialMedia">Update</button>
-            <button @click="showUpdatePopupVisible = false">Cancel</button>
+            <button @click="updateSocialMedia">
+              Update
+            </button>
+            <button @click="showUpdatePopupVisible = false">
+              Cancel
+            </button>
           </div>
           <p>Required Url format: {{ socialMediaPlaceholder }}</p>
         </div>
@@ -230,6 +315,9 @@ export default {
       }
     },
   },
+  mounted() {
+    // this.fetchUserData();
+  },
   methods: {
     LinkNotAvailable() {
       alert("This user hasn't updated their social media profile yet.");
@@ -376,9 +464,6 @@ export default {
       return this.logos[randomIndex];
     },
   },
-  mounted() {
-    // this.fetchUserData();
-  },
 };
 </script>
 
diff --git a/src/components/StudyGroups.vue b/src/components/StudyGroups.vue
index 9c20b95..8142f99 100644
--- a/src/components/StudyGroups.vue
+++ b/src/components/StudyGroups.vue
@@ -1,19 +1,35 @@
 <template>
-    <div>
-      <NavBar></NavBar>
-      <div v-if="loading" class="loading">Loading...</div>
-      <div v-else class="container">
-        <div v-for="(link, community) in studyGroups" :key="community" class="box">
-          <div class="content">
-            <h3>{{ community }}</h3>
-            <div>
-            <a :href="link" target="_blank" class="join-button">Join Groups</a>
-        </div>
+  <div>
+    <NavBar />
+    <div
+      v-if="loading"
+      class="loading"
+    >
+      Loading...
+    </div>
+    <div
+      v-else
+      class="container"
+    >
+      <div
+        v-for="(link, community) in studyGroups"
+        :key="community"
+        class="box"
+      >
+        <div class="content">
+          <h3>{{ community }}</h3>
+          <div>
+            <a
+              :href="link"
+              target="_blank"
+              class="join-button"
+            >Join Groups</a>
           </div>
         </div>
       </div>
     </div>
-  </template>
+  </div>
+</template>
   
   <script>
   import axios from 'axios';
diff --git a/src/components/UserPage.vue b/src/components/UserPage.vue
index e5a4df0..50bd8b9 100644
--- a/src/components/UserPage.vue
+++ b/src/components/UserPage.vue
@@ -1,40 +1,64 @@
 <template>
   <NavBar />
-  <div v-if="userDetails" class=" dark:bg-black">
+  <div
+    v-if="userDetails"
+    class=" dark:bg-black"
+  >
     <div class="flex w-full max-w-sm mx-auto overflow-hidden bg-white dark:bg-black  lg:max-w-4xl">
       <div class="hidden bg-cover bg-no-repeat lg:block lg:w-1/2">
-        <img src="../assets/sundarbans2.png" class="w-full mt-16 py-auto rounded-full" alt="Avatar">
+        <img
+          src="../assets/sundarbans2.png"
+          class="w-full mt-16 py-auto rounded-full"
+          alt="Avatar"
+        >
       </div>
 
       <div class="w-full px-6 py-8 md:px-8 lg:w-1/2">
         <div class="flex justify-center mx-auto">
-          <img v-if="userDetails" :src="userDetails.picture" class="w-32 rounded-full"
-            alt="{{ userDetails.name }}'s Avatar">
+          <img
+            v-if="userDetails"
+            :src="userDetails.picture"
+            class="w-32 rounded-full"
+            alt="{{ userDetails.name }}'s Avatar"
+          >
         </div>
 
-        <p v-if="userDetails" class="mt-3 text-xl text-center text-gray-600 dark:text-gray-200">
+        <p
+          v-if="userDetails"
+          class="mt-3 text-xl text-center text-gray-600 dark:text-gray-200"
+        >
           {{ userDetails.name }}
         </p>
 
         <div class="flex items-center justify-center mt-4 dark:text-gray-200">
           <div class="py-2">
-            <svg class="w-6 h-6" viewBox="0 0 40 40">
+            <svg
+              class="w-6 h-6"
+              viewBox="0 0 40 40"
+            >
               <path
                 d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
-                fill="#FFC107" />
+                fill="#FFC107"
+              />
               <path
                 d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z"
-                fill="#FF3D00" />
+                fill="#FF3D00"
+              />
               <path
                 d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z"
-                fill="#4CAF50" />
+                fill="#4CAF50"
+              />
               <path
                 d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
-                fill="#1976D2" />
+                fill="#1976D2"
+              />
             </svg>
           </div>
 
-          <span v-if="userDetails" class="px-2 py-3 font-bold text-center">{{ userDetails.email }}</span>
+          <span
+            v-if="userDetails"
+            class="px-2 py-3 font-bold text-center"
+          >{{ userDetails.email }}</span>
         </div>
 
         <div class="flex items-center justify-center dark:text-gray-200">
@@ -58,28 +82,47 @@
         </div>
 
         <div class="mt-4">
-          <span v-if="GLmail && GLmail.length > 0"
-            class="block mb-2 text-sm font-medium text-gray-600 text-center dark:text-gray-200">
-            <li v-for="(email, index) in GLmail" :key="index">
+          <span
+            v-if="GLmail && GLmail.length > 0"
+            class="block mb-2 text-sm font-medium text-gray-600 text-center dark:text-gray-200"
+          >
+            <li
+              v-for="(email, index) in GLmail"
+              :key="index"
+            >
               RC Email: {{ email }}
             </li>
           </span>
         </div>
 
         <div v-if="GroupUrl">
-          <div v-if="GroupUrl && GroupUrl.length > 0" class="mt-6">
-            <a :href="GroupUrl[0]" target="_blank">
+          <div
+            v-if="GroupUrl && GroupUrl.length > 0"
+            class="mt-6"
+          >
+            <a
+              :href="GroupUrl[0]"
+              target="_blank"
+            >
               <button
-                class="w-full px-6 py-3 text-sm font-medium tracking-wide text-black capitalize transition-colors duration-300 transform bg-gray-200 rounded-lg hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50">
+                class="w-full px-6 py-3 text-sm font-medium tracking-wide text-black capitalize transition-colors duration-300 transform bg-gray-200 rounded-lg hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50"
+              >
                 Join Citywise Group
               </button>
             </a>
           </div>
 
-          <div v-if="GroupUrl2 && GroupUrl2.length > 0" class="mt-6">
-            <a :href="GroupUrl2" target="_blank">
+          <div
+            v-if="GroupUrl2 && GroupUrl2.length > 0"
+            class="mt-6"
+          >
+            <a
+              :href="GroupUrl2"
+              target="_blank"
+            >
               <button
-                class="w-full px-6 py-3 text-sm font-medium tracking-wide text-black capitalize transition-colors duration-300 transform bg-gray-200 rounded-lg hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50">
+                class="w-full px-6 py-3 text-sm font-medium tracking-wide text-black capitalize transition-colors duration-300 transform bg-gray-200 rounded-lg hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50"
+              >
                 Sundarbans Official Group
               </button>
             </a>
@@ -87,21 +130,31 @@
         </div>
 
         <div>
-          <h6 style="color: red;">Update Number to Access Group Links</h6>
+          <h6 style="color: red;">
+            Update Number to Access Group Links
+          </h6>
           <div class="mt-4">
             <div class="flex justify-between">
-              <label class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200"
-                for="loggingPassword">Whatsapp Number</label>
+              <label
+                class="block mb-2 text-sm font-medium text-gray-600 dark:text-gray-200"
+                for="loggingPassword"
+              >Whatsapp Number</label>
             </div>
 
-            <input id="loggingPassword"
-              class="block w-full px-4 py-2 text-gray-700 bg-white border rounded-lg dark:bg-black dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-blue-300"
-              v-model="Phone2" type="text" pattern="[6789][0-9]{9}">
+            <input
+              id="loggingPassword"
+              v-model="Phone2"
+              class="block w-full px-4 py-2 text-gray-700 bg-white border rounded-lg dark:bg-black dark:text-gray-300 dark:border-gray-600 focus:border-blue-400 focus:ring-opacity-40 dark:focus:border-blue-300 focus:outline-none focus:ring focus:ring-blue-300"
+              type="text"
+              pattern="[6789][0-9]{9}"
+            >
           </div>
           <div class="mt-6">
             <button
               class="w-full px-6 py-3 text-sm font-medium tracking-wide text-black capitalize transition-colors duration-300 transform bg-gray-200 rounded-lg hover:bg-gray-400 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50"
-              @click="updateuser" :disabled="updating">
+              :disabled="updating"
+              @click="updateuser"
+            >
               <span v-if="!updating">Update Number</span>
               <span v-else>Updating...</span> <!-- Display blinkingDots here -->
             </button>
@@ -120,7 +173,10 @@
       </div>
     </div>
   </div>
-  <div v-else class=" dark:bg-black">
+  <div
+    v-else
+    class=" dark:bg-black"
+  >
     <GoogleLogin />
   </div>
 </template>
@@ -149,41 +205,6 @@ export default {
       updating: false,
     };
   },
-  methods: {
-    async updateuser() {
-      // Set updating to true when the update process begins
-      this.updating = true;
-      // Trim the input and check if it's not empty
-      const trimmedPhone = this.Phone2.trim();
-      if (trimmedPhone) {
-        let token = localStorage.getItem('Token');
-        try {
-          const url = `${this.$globalData.backendUrl}/updateuser/`;
-          const config = {
-            headers: {
-              'Content-Type': 'application/json',
-            },
-          };
-          const data = {
-            'token': token,
-            'phone': trimmedPhone, // Use the trimmed value
-          };
-          const result = await axios.post(url, data, config);
-          if (result.data.success == true) {
-            alert("Whatsapp Number Updated Successfully.");
-            location.reload();
-          }
-        } catch (error) {
-          console.error('Error updating user details:', error);
-        }
-      } else {
-        // Display an error message or handle the empty input case
-        alert("Please enter a valid WhatsApp number.");
-      }
-      this.updating = false;
-    },
-
-  },
   async mounted() {
     const storedUserDetails = localStorage.getItem('userDetails');
 
@@ -226,5 +247,40 @@ export default {
       }
     }
   },
+  methods: {
+    async updateuser() {
+      // Set updating to true when the update process begins
+      this.updating = true;
+      // Trim the input and check if it's not empty
+      const trimmedPhone = this.Phone2.trim();
+      if (trimmedPhone) {
+        let token = localStorage.getItem('Token');
+        try {
+          const url = `${this.$globalData.backendUrl}/updateuser/`;
+          const config = {
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          };
+          const data = {
+            'token': token,
+            'phone': trimmedPhone, // Use the trimmed value
+          };
+          const result = await axios.post(url, data, config);
+          if (result.data.success == true) {
+            alert("Whatsapp Number Updated Successfully.");
+            location.reload();
+          }
+        } catch (error) {
+          console.error('Error updating user details:', error);
+        }
+      } else {
+        // Display an error message or handle the empty input case
+        alert("Please enter a valid WhatsApp number.");
+      }
+      this.updating = false;
+    },
+
+  },
 };
 </script>
diff --git a/src/components/UserPageNoBackend.vue b/src/components/UserPageNoBackend.vue
index c0a94c4..ef814b6 100644
--- a/src/components/UserPageNoBackend.vue
+++ b/src/components/UserPageNoBackend.vue
@@ -4,20 +4,38 @@
     <div class="container mx-auto p-8">
       <!-- Header -->
       <div class="text-center mb-12">
-        <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">User Dashboard</h1>
-        <p class="text-lg text-gray-600 dark:text-gray-300">Manage your profile and access house resources</p>
+        <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">
+          User Dashboard
+        </h1>
+        <p class="text-lg text-gray-600 dark:text-gray-300">
+          Manage your profile and access house resources
+        </p>
       </div>
 
       <!-- Temporary Mode Notice -->
       <div class="max-w-4xl mx-auto">
         <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-6 mb-8">
           <div class="flex items-center">
-            <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 18.5c-.77.833.192 2.5 1.732 2.5z"></path>
+            <svg
+              class="w-6 h-6 mr-3"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.732-.833-2.5 0L4.268 18.5c-.77.833.192 2.5 1.732 2.5z"
+              />
             </svg>
             <div>
-              <p class="font-semibold text-lg">🚧 User Features Temporarily Unavailable</p>
-              <p class="text-sm mt-2">User authentication and personal dashboard features require backend connectivity. These features are currently disabled in demo mode.</p>
+              <p class="font-semibold text-lg">
+                🚧 User Features Temporarily Unavailable
+              </p>
+              <p class="text-sm mt-2">
+                User authentication and personal dashboard features require backend connectivity. These features are currently disabled in demo mode.
+              </p>
             </div>
           </div>
         </div>
@@ -27,10 +45,18 @@
           <!-- Profile Card -->
           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
             <div class="flex items-center space-x-4 mb-4">
-              <img class="w-16 h-16 rounded-full" src="https://cdn.pixabay.com/photo/2018/11/13/21/43/avatar-3814049_1280.png" alt="Profile">
+              <img
+                class="w-16 h-16 rounded-full"
+                src="https://cdn.pixabay.com/photo/2018/11/13/21/43/avatar-3814049_1280.png"
+                alt="Profile"
+              >
               <div>
-                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Demo User</h3>
-                <p class="text-gray-600 dark:text-gray-300">Sample Profile</p>
+                <h3 class="text-lg font-semibold text-gray-800 dark:text-white">
+                  Demo User
+                </h3>
+                <p class="text-gray-600 dark:text-gray-300">
+                  Sample Profile
+                </p>
               </div>
             </div>
             <div class="space-y-2 text-sm">
@@ -42,7 +68,9 @@
 
           <!-- Group Information -->
           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
-            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Group Details</h3>
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">
+              Group Details
+            </h3>
             <div class="space-y-2 text-sm">
               <p><strong>Group Leader:</strong> Sample GL</p>
               <p><strong>WhatsApp Group:</strong> [Link Disabled]</p>
@@ -53,15 +81,26 @@
 
           <!-- Quick Actions -->
           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
-            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Quick Actions</h3>
+            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">
+              Quick Actions
+            </h3>
             <div class="space-y-3">
-              <button disabled class="w-full bg-gray-300 text-gray-500 py-2 px-4 rounded-lg cursor-not-allowed">
+              <button
+                disabled
+                class="w-full bg-gray-300 text-gray-500 py-2 px-4 rounded-lg cursor-not-allowed"
+              >
                 Update Profile
               </button>
-              <button disabled class="w-full bg-gray-300 text-gray-500 py-2 px-4 rounded-lg cursor-not-allowed">
+              <button
+                disabled
+                class="w-full bg-gray-300 text-gray-500 py-2 px-4 rounded-lg cursor-not-allowed"
+              >
                 Study Buddy
               </button>
-              <button disabled class="w-full bg-gray-300 text-gray-500 py-2 px-4 rounded-lg cursor-not-allowed">
+              <button
+                disabled
+                class="w-full bg-gray-300 text-gray-500 py-2 px-4 rounded-lg cursor-not-allowed"
+              >
                 Submit Grievance
               </button>
             </div>
@@ -70,49 +109,104 @@
 
         <!-- Available Features -->
         <div class="mt-12">
-          <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Available in Demo Mode</h2>
+          <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">
+            Available in Demo Mode
+          </h2>
           <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <router-link to="/events" class="bg-blue-100 hover:bg-blue-200 border border-blue-300 rounded-lg p-6 text-center transition-colors">
-              <div class="text-blue-600 text-3xl mb-3">📅</div>
-              <h3 class="text-lg font-semibold text-blue-800 mb-2">Events</h3>
-              <p class="text-blue-600 text-sm">Browse house events and activities</p>
+            <router-link
+              to="/events"
+              class="bg-blue-100 hover:bg-blue-200 border border-blue-300 rounded-lg p-6 text-center transition-colors"
+            >
+              <div class="text-blue-600 text-3xl mb-3">
+                📅
+              </div>
+              <h3 class="text-lg font-semibold text-blue-800 mb-2">
+                Events
+              </h3>
+              <p class="text-blue-600 text-sm">
+                Browse house events and activities
+              </p>
             </router-link>
 
-            <router-link to="/clubs" class="bg-green-100 hover:bg-green-200 border border-green-300 rounded-lg p-6 text-center transition-colors">
-              <div class="text-green-600 text-3xl mb-3">🏛️</div>
-              <h3 class="text-lg font-semibold text-green-800 mb-2">Clubs</h3>
-              <p class="text-green-600 text-sm">Explore clubs and organizations</p>
+            <router-link
+              to="/clubs"
+              class="bg-green-100 hover:bg-green-200 border border-green-300 rounded-lg p-6 text-center transition-colors"
+            >
+              <div class="text-green-600 text-3xl mb-3">
+                🏛️
+              </div>
+              <h3 class="text-lg font-semibold text-green-800 mb-2">
+                Clubs
+              </h3>
+              <p class="text-green-600 text-sm">
+                Explore clubs and organizations
+              </p>
             </router-link>
 
-            <router-link to="/council" class="bg-purple-100 hover:bg-purple-200 border border-purple-300 rounded-lg p-6 text-center transition-colors">
-              <div class="text-purple-600 text-3xl mb-3">👥</div>
-              <h3 class="text-lg font-semibold text-purple-800 mb-2">Council</h3>
-              <p class="text-purple-600 text-sm">Meet the council members</p>
+            <router-link
+              to="/council"
+              class="bg-purple-100 hover:bg-purple-200 border border-purple-300 rounded-lg p-6 text-center transition-colors"
+            >
+              <div class="text-purple-600 text-3xl mb-3">
+                👥
+              </div>
+              <h3 class="text-lg font-semibold text-purple-800 mb-2">
+                Council
+              </h3>
+              <p class="text-purple-600 text-sm">
+                Meet the council members
+              </p>
             </router-link>
 
-            <router-link to="/gallery" class="bg-yellow-100 hover:bg-yellow-200 border border-yellow-300 rounded-lg p-6 text-center transition-colors">
-              <div class="text-yellow-600 text-3xl mb-3">🖼️</div>
-              <h3 class="text-lg font-semibold text-yellow-800 mb-2">Gallery</h3>
-              <p class="text-yellow-600 text-sm">View photo gallery</p>
+            <router-link
+              to="/gallery"
+              class="bg-yellow-100 hover:bg-yellow-200 border border-yellow-300 rounded-lg p-6 text-center transition-colors"
+            >
+              <div class="text-yellow-600 text-3xl mb-3">
+                🖼️
+              </div>
+              <h3 class="text-lg font-semibold text-yellow-800 mb-2">
+                Gallery
+              </h3>
+              <p class="text-yellow-600 text-sm">
+                View photo gallery
+              </p>
             </router-link>
 
-            <router-link to="/notes" class="bg-indigo-100 hover:bg-indigo-200 border border-indigo-300 rounded-lg p-6 text-center transition-colors">
-              <div class="text-indigo-600 text-3xl mb-3">📝</div>
-              <h3 class="text-lg font-semibold text-indigo-800 mb-2">Notes</h3>
-              <p class="text-indigo-600 text-sm">Access study notes</p>
+            <router-link
+              to="/notes"
+              class="bg-indigo-100 hover:bg-indigo-200 border border-indigo-300 rounded-lg p-6 text-center transition-colors"
+            >
+              <div class="text-indigo-600 text-3xl mb-3">
+                📝
+              </div>
+              <h3 class="text-lg font-semibold text-indigo-800 mb-2">
+                Notes
+              </h3>
+              <p class="text-indigo-600 text-sm">
+                Access study notes
+              </p>
             </router-link>
 
             <div class="bg-gray-100 border border-gray-300 rounded-lg p-6 text-center opacity-50">
-              <div class="text-gray-400 text-3xl mb-3">🔒</div>
-              <h3 class="text-lg font-semibold text-gray-500 mb-2">Study Buddy</h3>
-              <p class="text-gray-400 text-sm">Requires backend authentication</p>
+              <div class="text-gray-400 text-3xl mb-3">
+                🔒
+              </div>
+              <h3 class="text-lg font-semibold text-gray-500 mb-2">
+                Study Buddy
+              </h3>
+              <p class="text-gray-400 text-sm">
+                Requires backend authentication
+              </p>
             </div>
           </div>
         </div>
 
         <!-- Instructions for Restoring -->
         <div class="mt-12 bg-blue-50 border border-blue-200 rounded-lg p-6">
-          <h3 class="text-lg font-semibold text-blue-800 mb-4">🔄 To Restore Full Functionality</h3>
+          <h3 class="text-lg font-semibold text-blue-800 mb-4">
+            🔄 To Restore Full Functionality
+          </h3>
           <div class="text-blue-700 space-y-2 text-sm">
             <p>1. <strong>Enable Backend:</strong> Uncomment the backend URL in <code>src/main.js</code></p>
             <p>2. <strong>Restore Original Routes:</strong> Update <code>src/router.js</code> to use original components</p>
diff --git a/src/components/VideoGallery.vue b/src/components/VideoGallery.vue
index 823503b..7d1985e 100644
--- a/src/components/VideoGallery.vue
+++ b/src/components/VideoGallery.vue
@@ -48,8 +48,7 @@
             class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
             style="padding-top: 56.25%"
           >
-          <YoutubeVid :videoId="video.video_url" />
-           
+            <YoutubeVid :video-id="video.video_url" />
           </div>
         </div>
       </div>
@@ -65,8 +64,7 @@
               class="embed-responsive embed-responsive-16by9 relative w-full overflow-hidden"
               style="padding-top: 56.25%"
             >
-            <YoutubeVid :videoId="video.video_url" />
-              
+              <YoutubeVid :video-id="video.video_url" />
             </div>
           </div>
         </div>
diff --git a/src/components/WhatsAppLinks.vue b/src/components/WhatsAppLinks.vue
index 7b0af31..c03fa99 100644
--- a/src/components/WhatsAppLinks.vue
+++ b/src/components/WhatsAppLinks.vue
@@ -4,48 +4,122 @@
 
     <section class="container mx-auto px-4 py-8">
       <div class="max-w-3xl mx-auto bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-6">
-        <h2 class="text-2xl font-bold mb-4">Sundarbans House WhatsApp Links</h2>
-        <p class="text-sm mb-6 text-gray-600 dark:text-gray-300">Open the main Sundarbans house group, or choose a regional group below. Use "Copy" to copy the invite link.</p>
+        <h2 class="text-2xl font-bold mb-4">
+          Sundarbans House WhatsApp Links
+        </h2>
+        <p class="text-sm mb-6 text-gray-600 dark:text-gray-300">
+          Open the main Sundarbans house group, or choose a regional group below. Use "Copy" to copy the invite link.
+        </p>
 
         <!-- Main house group -->
         <div class="mb-6 bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-700 rounded px-4 py-4 flex items-center justify-between">
           <div>
-            <div class="font-semibold">{{ mainGroup.name }}</div>
-            <div class="text-xs text-gray-600 dark:text-gray-400">{{ mainGroup.description }}</div>
+            <div class="font-semibold">
+              {{ mainGroup.name }}
+            </div>
+            <div class="text-xs text-gray-600 dark:text-gray-400">
+              {{ mainGroup.description }}
+            </div>
           </div>
           <div class="flex items-center gap-3">
-            <a :href="mainGroup.link" target="_blank" rel="noopener" class="inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md text-sm">Open</a>
-            <button @click="copyLink(mainGroup.link, mainGroup.name)" class="inline-flex items-center px-3 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm">
-              <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16h8M8 12h8m-6 8h6a2 2 0 002-2V6a2 2 0 00-2-2h-8l-4 4v10a2 2 0 002 2z"/></svg>
+            <a
+              :href="mainGroup.link"
+              target="_blank"
+              rel="noopener"
+              class="inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md text-sm"
+            >Open</a>
+            <button
+              class="inline-flex items-center px-3 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm"
+              @click="copyLink(mainGroup.link, mainGroup.name)"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-4 h-4 mr-2"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              ><path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 16h8M8 12h8m-6 8h6a2 2 0 002-2V6a2 2 0 00-2-2h-8l-4 4v10a2 2 0 002 2z"
+              /></svg>
               Copy
             </button>
           </div>
         </div>
 
         <!-- Regional groups -->
-        <h3 class="text-lg font-semibold mb-3">Regional Groups</h3>
+        <h3 class="text-lg font-semibold mb-3">
+          Regional Groups
+        </h3>
         <ul class="space-y-4">
-          <li v-for="region in regions" :key="region.id" class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-700 rounded px-4 py-3 gap-3">
+          <li
+            v-for="region in regions"
+            :key="region.id"
+            class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-700 rounded px-4 py-3 gap-3"
+          >
             <div>
-              <div class="font-semibold">{{ region.name }}</div>
-              <div class="text-xs text-gray-600 dark:text-gray-400">{{ region.description }}</div>
+              <div class="font-semibold">
+                {{ region.name }}
+              </div>
+              <div class="text-xs text-gray-600 dark:text-gray-400">
+                {{ region.description }}
+              </div>
               <div class="mt-2 text-xs text-gray-600 dark:text-gray-400">
-                <div v-if="region.form">Form: <a :href="region.form" target="_blank" rel="noopener" class="text-blue-600 dark:text-blue-300">Open form</a></div>
-                <div v-if="region.coordinator" class="mt-1">Coordinator: <span class="font-medium">{{ region.coordinator }}</span> <span v-if="region.phone">— <a :href="`tel:${region.phone}`">{{ region.phone }}</a></span></div>
+                <div v-if="region.form">
+                  Form: <a
+                    :href="region.form"
+                    target="_blank"
+                    rel="noopener"
+                    class="text-blue-600 dark:text-blue-300"
+                  >Open form</a>
+                </div>
+                <div
+                  v-if="region.coordinator"
+                  class="mt-1"
+                >
+                  Coordinator: <span class="font-medium">{{ region.coordinator }}</span> <span v-if="region.phone">— <a :href="`tel:${region.phone}`">{{ region.phone }}</a></span>
+                </div>
               </div>
             </div>
 
             <div class="flex items-center gap-3">
-              <a v-if="region.form" :href="region.form" target="_blank" rel="noopener" class="inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md text-sm">Open</a>
-              <button @click="copyLink(region.form || region.link, region.name)" class="inline-flex items-center px-3 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16h8M8 12h8m-6 8h6a2 2 0 002-2V6a2 2 0 00-2-2h-8l-4 4v10a2 2 0 002 2z"/></svg>
+              <a
+                v-if="region.form"
+                :href="region.form"
+                target="_blank"
+                rel="noopener"
+                class="inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md text-sm"
+              >Open</a>
+              <button
+                class="inline-flex items-center px-3 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm"
+                @click="copyLink(region.form || region.link, region.name)"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="w-4 h-4 mr-2"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                ><path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M8 16h8M8 12h8m-6 8h6a2 2 0 002-2V6a2 2 0 00-2-2h-8l-4 4v10a2 2 0 002 2z"
+                /></svg>
                 Copy
               </button>
             </div>
           </li>
         </ul>
 
-        <div v-if="copied" class="mt-4 text-sm text-green-600 dark:text-green-300">Link copied to clipboard: <span class="font-medium">{{ copied }}</span></div>
+        <div
+          v-if="copied"
+          class="mt-4 text-sm text-green-600 dark:text-green-300"
+        >
+          Link copied to clipboard: <span class="font-medium">{{ copied }}</span>
+        </div>
       </div>
     </section>
   </div>
diff --git a/src/components/YoutubeVid.vue b/src/components/YoutubeVid.vue
index dd509cd..cf6e2cc 100644
--- a/src/components/YoutubeVid.vue
+++ b/src/components/YoutubeVid.vue
@@ -1,17 +1,26 @@
 <template>
   <template v-if="!loaded">
+    <img
+      class="absolute inset-0 bottom-0 left-0 right-0 top-0 h-full w-full rounded-none"
+      :src="`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`"
+      alt="Youtube video thumbnail"
+      style="z-index:1"
+      title="Please wait for the YT Player to load"
+    >
 
-    <img class="absolute inset-0 bottom-0 left-0 right-0 top-0 h-full w-full rounded-none"
-      :src="`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`" alt="Youtube video thumbnail"
-      style="z-index:1" title="Please wait for the YT Player to load" />
-
-    <div class="absolute spinner" style="z-index:1"></div>
-
+    <div
+      class="absolute spinner"
+      style="z-index:1"
+    />
   </template>
 
-  <iframe class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full" :src="videoUrl"
-    style="z-index: 0" allowfullscreen @load="loaded=true" />
-
+  <iframe
+    class="embed-responsive-item absolute bottom-0 left-0 right-0 top-0 h-full w-full"
+    :src="videoUrl"
+    style="z-index: 0"
+    allowfullscreen
+    @load="loaded=true"
+  />
 </template>
 
 <script>
diff --git a/src/components/newPage.vue b/src/components/newPage.vue
index c912750..351a5f5 100644
--- a/src/components/newPage.vue
+++ b/src/components/newPage.vue
@@ -1,7 +1,5 @@
 <template>
-
-<h1>This is newly added page.</h1>
-
+  <h1>This is newly added page.</h1>
 </template>
 
 <script>