diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 00000000..aedcd321
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,97 @@
+name: Bug Report
+description: Report a bug or issue with the Audemy platform
+title: "[BUG]: "
+labels: [bug]
+body:
+    - type: markdown
+      attributes:
+          value: |
+              ## 🐞 Bug Reporting Guidelines
+              Please follow this structured format to help us fix issues quickly. Make sure the bug is reproducible and hasn't already been reported.
+
+    - type: input
+      id: title
+      attributes:
+          label: Short bug title
+          description: A clear, concise summary of the issue
+          placeholder: "[Bug] Submit button unresponsive after second question in Addition Game"
+      validations:
+          required: true
+
+    - type: textarea
+      id: description
+      attributes:
+          label: Describe the bug
+          description: What happened and what should have happened?
+          placeholder: "After answering the second question in the Addition Game, the Submit button stops responding..."
+      validations:
+          required: true
+
+    - type: textarea
+      id: steps
+      attributes:
+          label: Steps to reproduce
+          description: List the steps to reproduce the issue
+          placeholder: |
+              1. Go to the Game Zone
+              2. Open the Addition Game
+              3. Answer the first two questions
+              4. Try clicking the "Submit" button on the third question
+              5. Notice that nothing happens
+      validations:
+          required: true
+
+    - type: textarea
+      id: expected
+      attributes:
+          label: Expected behavior
+          description: What should have happened?
+          placeholder: "The Submit button should validate the answer, provide feedback, and move to the next question."
+      validations:
+          required: true
+
+    - type: textarea
+      id: actual
+      attributes:
+          label: Actual behavior
+          description: What actually happened?
+          placeholder: "The button appears clickable but does nothing and no feedback is shown."
+      validations:
+          required: true
+
+    - type: textarea
+      id: media
+      attributes:
+          label: Screenshots or recordings
+          description: If applicable, drag and drop images or video clips that show the bug.
+          placeholder: "Attach any relevant media files here."
+
+    - type: textarea
+      id: environment
+      attributes:
+          label: Environment details
+          description: Add device, OS, and version information
+          placeholder: |
+              - Device: Desktop
+              - OS: macOS Sonoma
+              - Frontend Version: v0.3.4
+              - Backend Version: main@6f9c2d1
+
+    - type: textarea
+      id: context
+      attributes:
+          label: Additional context
+          description: Any other info (e.g., logged in or not, using a screen reader, keyboard-only navigation, frequency of bug)
+          placeholder: "Happens every time; using VoiceOver on macOS; logged in as student"
+
+    - type: checkboxes
+      id: confirm
+      attributes:
+          label: Before submitting
+          options:
+              - label: I have searched for existing bug reports.
+                required: true
+              - label: I am using the latest version of Audemy.
+                required: true
+              - label: I can reliably reproduce this bug.
+                required: true
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 00000000..8005e322
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,2 @@
+blank_issues_enabled: false
+contact_links: []
diff --git a/.github/ISSUE_TEMPLATE/enhancement_request.yml b/.github/ISSUE_TEMPLATE/enhancement_request.yml
new file mode 100644
index 00000000..9295616c
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/enhancement_request.yml
@@ -0,0 +1,38 @@
+name: Enhancement Request
+description: Propose an improvement to an existing Audemy feature
+title: "[ENHANCEMENT]: "
+labels: [enhancement]
+body:
+    - type: markdown
+      attributes:
+          value: "## 🔧 Enhancement Request\nUse this form to improve existing features in Audemy."
+
+    - type: textarea
+      id: current
+      attributes:
+          label: What feature are you enhancing?
+          placeholder: "Describe the current feature."
+      validations:
+          required: true
+
+    - type: textarea
+      id: improvement
+      attributes:
+          label: What improvement would you like to see?
+          placeholder: "Explain what should be improved and why."
+      validations:
+          required: true
+
+    - type: textarea
+      id: benefit
+      attributes:
+          label: How will this benefit users?
+          placeholder: "Tell us how this improves user experience or functionality."
+
+    - type: checkboxes
+      id: confirm
+      attributes:
+          label: Before submitting
+          options:
+              - label: I’ve checked for similar enhancement requests.
+                required: true
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 00000000..1547d2db
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,38 @@
+name: Feature Request
+description: Suggest a new feature for Audemy
+title: "[FEATURE]: "
+labels: [feature]
+body:
+    - type: markdown
+      attributes:
+          value: "## 🎯 Feature Request\nUse this form to suggest a new feature you'd like to see in Audemy."
+
+    - type: textarea
+      id: description
+      attributes:
+          label: Describe the feature
+          placeholder: "Clearly and concisely describe the feature."
+      validations:
+          required: true
+
+    - type: textarea
+      id: value
+      attributes:
+          label: Why is this feature important?
+          placeholder: "Explain how this helps users or improves the product."
+      validations:
+          required: true
+
+    - type: textarea
+      id: solution
+      attributes:
+          label: Possible implementation
+          placeholder: "Optional: any ideas on how to implement it?"
+
+    - type: checkboxes
+      id: confirm
+      attributes:
+          label: Before submitting
+          options:
+              - label: I have searched for existing feature requests.
+                required: true
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..5e239fde
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 80,
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "vueIndentScriptAndStyle": false
+}
diff --git a/public/assets/images/about-us/volunteers/ankita.png b/public/assets/images/about-us/volunteers/ankita.png
new file mode 100644
index 00000000..47a6343c
Binary files /dev/null and b/public/assets/images/about-us/volunteers/ankita.png differ
diff --git a/public/assets/images/about-us/volunteers/doohwan.png b/public/assets/images/about-us/volunteers/doohwan.png
new file mode 100644
index 00000000..1f7baf57
Binary files /dev/null and b/public/assets/images/about-us/volunteers/doohwan.png differ
diff --git a/public/assets/images/about-us/volunteers/isabelle.png b/public/assets/images/about-us/volunteers/isabelle.png
new file mode 100644
index 00000000..26ff1f42
Binary files /dev/null and b/public/assets/images/about-us/volunteers/isabelle.png differ
diff --git a/public/assets/images/about-us/volunteers/jesus.png b/public/assets/images/about-us/volunteers/jesus.png
new file mode 100644
index 00000000..6d17bf55
Binary files /dev/null and b/public/assets/images/about-us/volunteers/jesus.png differ
diff --git a/public/assets/images/about-us/volunteers/rajat.png b/public/assets/images/about-us/volunteers/rajat.png
new file mode 100644
index 00000000..d031b8b4
Binary files /dev/null and b/public/assets/images/about-us/volunteers/rajat.png differ
diff --git a/src/pages/AboutUs/Volunteers/Staff.js b/src/pages/AboutUs/Volunteers/Staff.js
index 895a0740..e40c5ba4 100644
--- a/src/pages/AboutUs/Volunteers/Staff.js
+++ b/src/pages/AboutUs/Volunteers/Staff.js
@@ -124,11 +124,37 @@ const developmentStaff = [
         name: "Shyaka Chaste",
         role: "Developer",
         image: "/assets/images/about-us/volunteers/shyaka.png",
-    },{
+    },
+    {
         name: "Prajwala Shambulingappa",
         role: "Developer",
         image: "/assets/images/about-us/volunteers/default1.svg",
     },
+    {
+        name: "Ankita Shendge",
+        role: "Developer",
+        image: "/assets/images/about-us/volunteers/ankita.png",
+    },
+    {
+        name: "Isabelle Huang",
+        role: "Developer",
+        image: "/assets/images/about-us/volunteers/isabelle.png",
+    },
+    {
+        name: "DooHwan Kim",
+        role: "Developer",
+        image: "/assets/images/about-us/volunteers/doohwan.png",
+    },
+    {
+        name: "Jesus Luigi Sison",
+        role: "Developer",
+        image: "/assets/images/about-us/volunteers/jesus.png",
+    },
+    {
+        name: "Rajat Kulkarni",
+        role: "Developer",
+        image: "/assets/images/about-us/volunteers/rajat.png",
+    },
 ];
 
 const outreachStaff = [
diff --git a/src/pages/ForgotPassword/ForgotPassword.vue b/src/pages/ForgotPassword/ForgotPassword.vue
index 68aa1ed4..fa3588d9 100644
--- a/src/pages/ForgotPassword/ForgotPassword.vue
+++ b/src/pages/ForgotPassword/ForgotPassword.vue
@@ -7,6 +7,10 @@ const errors = ref(false);      // flag to display error on frontend
 const email = ref("");          // email input field value
 const router = useRouter();
 
+const showErrorAlert = (message) => {
+    alert(message); // Using standard alert for simplicity
+};
+
 const sendResetEmail = async (event) => {
     // prevent default form submission which would reload the page
     event.preventDefault();     
@@ -26,19 +30,57 @@ const sendResetEmail = async (event) => {
         );
         // Handle the response from the API based on the status code
         console.log("Response:", emailResponse.status)
-        if (emailResponse.status === 404) {
-            // Set the flag to true to display the error message on the frontend
-            console.error("Error: User with provided email id not present.");
-            errors.value = true;
-        } else{
+        // Get the response data
+        const responseData = await emailResponse.json().catch(() => ({}));
+        
+        if (!emailResponse.ok) {
+            switch (emailResponse.status) {
+                case 400:
+                    showErrorAlert("Bad request: Please check your input");
+                    break;
+                case 401:
+                    showErrorAlert("Unauthorized: Invalid credentials");
+                    break;
+                case 403:
+                    showErrorAlert("Forbidden: You don't have permission to access this resource");
+                    break;
+                case 404:
+                    showErrorAlert("Resource not found");
+                    break;
+                case 405:
+                    showErrorAlert("Method not allowed");
+                    break;
+                case 429:
+                    showErrorAlert("Too many requests: Please try again later");
+                    break;
+                case 500:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                case 502:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                case 503:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                case 504:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                default:
+                    // Handle other errors
+                    alert('Unexpected error occurred.');
+            }
+            // Return to prevent further execution
+            return;
+        } else {
             // Route to reset-link-sent page if email sent successfully
             console.log("Email sent successfully.");
             router.push("/reset-link-sent");
         }
     } catch (error) {
-        // Set the flag to true to display the error message on the frontend
-        console.error("Error: Email not present- ", error);
+        // Handle network errors
+        console.error("Error: ", error);
         errors.value = true;
+        alert('Network error. Please check your connection and try again.');
     }    
 };
 </script>
diff --git a/src/pages/GameZone/GameZoneCard/GameZoneCard.vue b/src/pages/GameZone/GameZoneCard/GameZoneCard.vue
index e4aa1e9a..692f609f 100644
--- a/src/pages/GameZone/GameZoneCard/GameZoneCard.vue
+++ b/src/pages/GameZone/GameZoneCard/GameZoneCard.vue
@@ -14,20 +14,20 @@ const props = defineProps({
 </script>
 
 <template>
-    <div
+    <button
         @click="$emit('selectGame', url)"
         class="w-full h-[320px] mobile:h-[160px] rounded-[16px] border-[5px] border-[#323232] shadow-2xl  p-5 relative flex justify-center items-center"
         :style="{ backgroundColor: bgColor, color: textColor ?? '#323232' }"
     >
         <img
             :src="icon"
-            alt="Game icon"
+            alt=""
             class="w-[100px] h-[100px] mobile:w-[40px] mobile:h-[40px] absolute top-4 right-5 mobile:top-5 mobile:right-1 z-20"
         />
         <img
             v-if="bgDecoration"
             :src="bgImage"
-            alt="BG Game icon"
+            alt=""
             class="h-3/4 absolute top-0 right-0 rounded-xl"
         />
         <div class="w-full absolute bottom-0 left-0 p-4 z-50">
@@ -48,7 +48,7 @@ const props = defineProps({
                 {{ description }}
             </div>
         </div>
-    </div>
+    </button>
 </template>
 <style>
 @media (max-width: 1020px) and (min-width: 768px) {
diff --git a/src/pages/GameZone/GameZoneList/CarCounting.vue b/src/pages/GameZone/GameZoneList/CarCounting.vue
index 4dacd43a..86246114 100644
--- a/src/pages/GameZone/GameZoneList/CarCounting.vue
+++ b/src/pages/GameZone/GameZoneList/CarCounting.vue
@@ -501,12 +501,8 @@ const toggleRecording = () => {
       console.log("User Answer:", finalTranscript);
       console.log("Correct Answer:", randQueNum[numOfAudiosPlayed.value]);
 
-      if (
-        finalTranscript
-          .trim()
-          .toLowerCase()
-          .includes(answers[numOfAudiosPlayed.value].toLowerCase())
-      ) {
+      const cleanedInput = finalTranscript.trim().toLowerCase().replace(/[^\w\s]/g, ''); // removes punctuation
+      if (cleanedInput.includes(answers[numOfAudiosPlayed.value].toLowerCase())) {
         score.value++;
         console.log("Correct Answer!");
         playSound("correctaudio.mp3");
diff --git a/src/pages/GameZone/GameZoneList/ColorGame.vue b/src/pages/GameZone/GameZoneList/ColorGame.vue
index b0d0d3df..9360de26 100644
--- a/src/pages/GameZone/GameZoneList/ColorGame.vue
+++ b/src/pages/GameZone/GameZoneList/ColorGame.vue
@@ -459,9 +459,10 @@ const toggleRecording = () => {
       console.log("Correct Answer:", question["A"]);
 
       const userWords = finalTranscript
-      .toLowerCase()
-      .replace(/[.,!?]/g, "")
-      .split(/\s+/);
+  .toLowerCase()
+  .replace(/[^a-z0-9\s]/gi, "") // removes everything except letters, numbers, and spaces
+  .split(/\s+/)
+  .filter(Boolean); // removes empty strings
 
       const correctAnswers = Array.isArray(question["A"])
         ? question["A"].map((a) => a.toLowerCase())
diff --git a/src/pages/Impact/CollaboratingSchools/Affiliates.vue b/src/pages/Impact/CollaboratingSchools/Affiliates.vue
index e795d676..c3361940 100644
--- a/src/pages/Impact/CollaboratingSchools/Affiliates.vue
+++ b/src/pages/Impact/CollaboratingSchools/Affiliates.vue
@@ -31,8 +31,8 @@ const schools = [
         link: "https://asdb.az.gov/",
     },
     {
-        name: "Obra D. Tompkins High School",
-        link: "https://www.katyisd.org/tompkins",
+        name: "Vermont Association For The Blind And Visually Impaired",
+        link: "https://www.vabvi.org/",
     },
     {
         name: "HeZe Special Education Center (菏泽市特殊教育中心)",
diff --git a/src/pages/Impact/CollaboratingSchools/Map.vue b/src/pages/Impact/CollaboratingSchools/Map.vue
index 362bd6f7..66b197a3 100644
--- a/src/pages/Impact/CollaboratingSchools/Map.vue
+++ b/src/pages/Impact/CollaboratingSchools/Map.vue
@@ -26,7 +26,7 @@ export default {
                 var location4 = [-89, 40];
                 var location5 = [-111.0937, 34.0489];
                 var location6 = [117.0208, 36.6683];
-                var location7 = [-95.3698, 29.7604];
+                var location7 = [-72.576, 44.2601];
                 var popupOffset = 25;
 
                 var marker1 = new tt.Marker().setLngLat(location1).addTo(map);
@@ -66,7 +66,9 @@ export default {
                 var popup7 = new tt.Popup({
                     offset: popupOffset,
                     closeButton: false,
-                }).setText("Obra D. Tompkins High School");
+                }).setText(
+                    "Vermont Association For The Blind And Visually Impaired"
+                );
 
                 marker1.setPopup(popup1);
                 marker2.setPopup(popup2);
diff --git a/src/pages/LogIn/LogIn.vue b/src/pages/LogIn/LogIn.vue
index 703fed9b..002b24ae 100644
--- a/src/pages/LogIn/LogIn.vue
+++ b/src/pages/LogIn/LogIn.vue
@@ -1,3 +1,165 @@
+<template>
+    <div
+        class="w-full h-screen overflow-hidden bg-[#FFDABA] flex justify-between mobile:flex-row"
+    >
+        <div
+            class="w-5/12 md:w-full sm:w-full relative flex items-center jusitfy-center"
+        >
+            <div
+                class="w-full flex flex-col justify-center items-center gap-14 z-10"
+            >
+                <img
+                    src="/assets/images/LoginImg/icons.svg"
+                    alt="logo icon"
+                    class="w-[50%] h-[50%]"
+                />
+                <img
+                    src="/assets/images/LoginImg/logo-icon.svg"
+                    alt="logo icon"
+                    class="w-[45%] h-[45%]"
+                />
+            </div>
+            <img
+                src="/assets/images/LoginImg/wave-icon.svg"
+                alt="wave icon"
+                class="absolute -bottom-[15%] right-0 w-full -z-1"
+            />
+            <button
+                v-if="userSession"
+                @click="logout"
+                class="mt-4 bg-red-500 text-white px-4 py-2 rounded"
+            >
+                Logout
+            </button>
+        </div>
+
+        <!-- Show login form if not logged in -->
+        <div
+            v-if="!userSession && !showSchoolForm"
+            class="w-7/12 md:w-full sm:w-full bg-white flex flex-col items-center justify-center border-2"
+        >
+            <form
+                @submit="login"
+                method="post"
+                class="w-full flex flex-col justify-center items-center gap-6 my-4"
+            >
+                <h1
+                    class="text-[36px] text-[#151E22] text-center w-7/12 mobile:w-full mobile:text-[24px] mobile:mb-4"
+                >
+                    Hi there, welcome back!
+                </h1>
+                <div class="w-[70%] max-w-[450px]">
+                    <div class="mt-8 mb-3" v-if="errors">
+                        <div
+                            class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative text-center"
+                            role="alert"
+                        >
+                            {{ errorMessage }}
+                        </div>
+                    </div>
+                    <div class="mb-[16px]">
+                        <label
+                            class="block text-[#0C0D0D] mb-1 font-semiBold"
+                            for="email"
+                            >Email Address</label
+                        >
+                        <input
+                            v-model="email"
+                            type="email"
+                            class="w-full outline-none border-2 border-black py-2 px-2 rounded-[8px]"
+                            id="email"
+                            name="email"
+                            placeholder="Enter your email address"
+                            autocomplete="email"
+                        />
+                    </div>
+                    <div class="mb-[16px]">
+                        <label
+                            for="password"
+                            class="block text-[#0C0D0D] mb-1 font-semiBold"
+                            >Password</label
+                        >
+                        <input
+                            v-model="password"
+                            type="password"
+                            class="w-full outline-none border-2 border-black py-2 px-2 rounded-[8px]"
+                            id="password"
+                            name="password"
+                            placeholder="Enter your password"
+                        />
+                    </div>
+                    <div class="flex justify-end w-full">
+                        <a
+                            href="./forgot-password"
+                            class="underline text-[#087BB4] font-medium"
+                            >Forgot password?</a
+                        >
+                    </div>
+                    <div class="flex justify-start w-full">
+                        <h5>
+                            New to Audemy?
+                            <a
+                                href="./signup"
+                                class="underline text-[#087BB4] font-medium"
+                                >Sign Up</a
+                            >
+                        </h5>
+                    </div>
+
+                    <div class="flex justify-center w-full pt-4 mb-6">
+                        <button
+                            type="submit"
+                            class="w-full py-3 font-bold rounded-[8px] bg-[#FE892A] hover:bg-[#ff8d33] border-2 border-black shadow-[4px_4px_0px_black] text-black"
+                        >
+                            Log in
+                        </button>
+                    </div>
+                </div>
+            </form>
+
+            <div
+                class="flex w-1/2 text-gray-500 items-center justify-center gap-2 my-4"
+            >
+                <div><hr class="w-32 md:w-52 h-0.5 bg-gray-500 rounded-sm" /></div>
+                <div>or</div>
+                <div><hr class="w-32 md:w-52 h-0.5 bg-gray-500 rounded-sm" /></div>
+            </div>
+
+            <!-- Google OAuth Login -->
+            <div class="flex w-full gap-4 items-center justify-center mt-4 mb-8">
+                <GoogleLogin
+                    :callback="callback"
+                    class="flex items-center justify-center gap-4"
+                />
+            </div>
+        </div>
+
+        <!-- Show school input if needed -->
+        <div
+            v-if="showSchoolForm"
+            class="w-7/12 bg-white flex items-center justify-center flex-col gap-4"
+        >
+            <h3
+                class="text-[36px] text-[#151E22] text-center w-7/12 mobile:w-full mobile:text-[24px] mobile:mb-4"
+            >
+                Enter Your School
+            </h3>
+            <input
+                v-model="school"
+                type="text"
+                class="border-2 border-black py-2 px-2 rounded-[8px] w-1/2"
+                placeholder="School Name"
+            />
+            <button
+                @click="updateSchool"
+                class="w-[488px] h-[56px] text-white rounded-[8px] bg-[#087BB4] hover:bg-[#0C587D] hover:cursor-pointer border-2 border-black font-semiBold shadow-[4px_4px_0px_black] mobile:w-full"
+            >
+                Submit
+            </button>
+        </div>
+    </div>
+</template>
+
 <script setup>
 import { ref, onMounted } from "vue";
 import { GoogleLogin } from "vue3-google-login";
@@ -6,6 +168,7 @@ import { jwtDecode } from "jwt-decode";
 import Cookies from "js-cookie";
 
 const errors = ref(false);
+const errorMessage = ref("Invalid email and password combination. Try again!");
 const email = ref("");
 const password = ref("");
 var authKey = ref("");
@@ -60,6 +223,59 @@ onMounted(() => {
     }
 });
 
+const showErrorAlert = (message) => {
+    errors.value = true;
+    errorMessage.value = message;
+    setTimeout(() => {
+        errors.value = false;
+    }, 5000);
+};
+
+const handleApiError = (status, message) => {
+    switch(status) {
+        case 400:
+            showErrorAlert("Bad request: " + (message || "Please check your input"));
+            break;
+        case 401:
+            showErrorAlert("Unauthorized: " + (message || "Invalid credentials"));
+            break;
+        case 403:
+            showErrorAlert("Forbidden: You don't have permission to access this resource");
+            break;
+        case 404:
+            showErrorAlert("Resource not found");
+            break;
+        case 405:
+            showErrorAlert("Method not allowed");
+            break;
+        case 429:
+            showErrorAlert("Too many requests: Please try again later");
+            break;
+        case 500:
+            showErrorAlert("Internal server error. Please try again later.");
+            break;
+        case 502:
+            showErrorAlert("Internal server error. Please try again later.");
+            break;
+        case 503:
+            showErrorAlert("Internal server error. Please try again later.");
+            break;
+        case 504:
+            showErrorAlert("Internal server error. Please try again later.");
+            break;
+        default:
+            // Handle other errors
+            showErrorAlert('Unexpected error occurred.');
+        }
+};
+
+const resetErrors = () => {
+    setTimeout(() => {
+        errors.value = false;
+    }, 5000);
+};
+
+
 const login = async (event) => {
     event.preventDefault();
     errors.value = false;
@@ -81,12 +297,30 @@ const login = async (event) => {
         // // Log response before parsing
         // const textResponse = await response.text();
         // console.log("Raw Response:", textResponse);
+        // Check if response is JSON before trying to parse it
+        const contentType = response.headers.get("content-type");
+        if (!contentType || !contentType.includes("application/json")) {
+            const errorText = await response.text();
+            console.error("Non-JSON response:", errorText);
+
+            if (!response.ok) {
+                console.log("response not okay")
+                handleApiError(response.status, errorText || "No details provided");
+                console.log("alert message displayed")
+                return;
+            }
+
+            console.log("Success with non-JSON response");
+            window.location.href = "/login";
+            return;
+        }
 
         const data = await response.json();
         // console.log("Response Data:", data);
 
         if (!response.ok) {
-            throw new Error(data.message || "Failed to login");
+            handleApiError(response.status, data.message || "Failed to login");
+            return;
         }
 
         authKey.value = response.headers.get("authorization");
@@ -100,6 +334,7 @@ const login = async (event) => {
         router.push("/game-zone");
     } catch (error) {
         console.error("Error:", error);
+        showErrorAlert("Connection error: Please check your internet connection");
     }
 };
 
@@ -115,6 +350,8 @@ const callback = async (response) => {
             };
         } catch (error) {
             console.error("Failed to decode JWT:", error);
+            showErrorAlert("Failed to process Google login");
+            return;
         }
     }
 
@@ -126,6 +363,12 @@ const callback = async (response) => {
         }
     );
 
+    if (!dbResponse.ok) {
+            const errorData = await dbResponse.json().catch(() => ({}));
+            handleApiError(dbResponse.status, errorData.message || "Failed to retrieve user data");
+            return;
+        }
+
     const dbData = await dbResponse.json();
     console.log("DB Response:", dbData);
 
@@ -169,6 +412,12 @@ const updateSchool = async () => {
             }),
         });
 
+        if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            handleApiError(response.status, errorData.message || "Failed to update school information");
+            return;
+        }
+
         const data = await response.json();
         console.log("Updated user:", data);
 
@@ -189,9 +438,12 @@ const updateSchool = async () => {
             };
             showSchoolForm.value = false;
             router.push("/game-zone");
+        } else {
+            showErrorAlert(data.message || "Failed to update school information");
         }
     } catch (error) {
         console.error("Error updating school:", error);
+        showErrorAlert("Connection error: Please check your internet connection");
     }
 };
 
@@ -201,165 +453,4 @@ const logout = () => {
     userProfile.value = null;
     router.push("/login");
 };
-</script>
-
-<template>
-    <div
-        class="w-full h-screen overflow-hidden bg-[#FFDABA] flex justify-between mobile:flex-row"
-    >
-        <div
-            class="w-5/12 md:w-full sm:w-full relative flex items-center jusitfy-center"
-        >
-            <div
-                class="w-full flex flex-col justify-center items-center gap-14 z-10"
-            >
-                <img
-                    src="/assets/images/LoginImg/icons.svg"
-                    alt="logo icon"
-                    class="w-[50%] h-[50%]"
-                />
-                <img
-                    src="/assets/images/LoginImg/logo-icon.svg"
-                    alt="logo icon"
-                    class="w-[45%] h-[45%]"
-                />
-            </div>
-            <img
-                src="/assets/images/LoginImg/wave-icon.svg"
-                alt="wave icon"
-                class="absolute -bottom-[15%] right-0 w-full -z-1"
-            />
-            <button
-                v-if="userSession"
-                @click="logout"
-                class="mt-4 bg-red-500 text-white px-4 py-2 rounded"
-            >
-                Logout
-            </button>
-        </div>
-
-        <!-- Show login form if not logged in -->
-        <div
-            v-if="!userSession && !showSchoolForm"
-            class="w-7/12 md:w-full sm:w-full bg-white flex flex-col items-center justify-center border-2"
-        >
-            <form
-                @submit="login"
-                method="post"
-                class="max-h-[350px] w-full flex flex-col justify-center items-center gap-[5%] my-4"
-            >
-                <h1
-                    class="text-[36px] text-[#151E22] text-center w-7/12 mobile:w-full mobile:text-[24px] mobile:mb-4"
-                >
-                    Hi there, welcome back!
-                </h1>
-                <div class="w-[70%] max-w-[450px]">
-                    <div class="mt-8 mb-3" v-if="errors">
-                        <div
-                            class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
-                            role="alert"
-                        >
-                            <span class="block sm:inline text-center"
-                                >Invalid email and password combination. Try
-                                again!</span
-                            >
-                        </div>
-                    </div>
-                    <div class="mb-[16px]">
-                        <label
-                            class="block text-[#0C0D0D] mb-1 font-semiBold"
-                            for="email"
-                            >Email Address</label
-                        >
-                        <input
-                            v-model="email"
-                            type="email"
-                            class="w-full outline-none border-2 border-black py-2 px-2 rounded-[8px]"
-                            id="email"
-                            name="email"
-                            placeholder="Enter your email address"
-                            autocomplete="email"
-                        />
-                    </div>
-                    <div class="mb-[16px]">
-                        <label
-                            for="password"
-                            class="block text-[#0C0D0D] mb-1 font-semiBold"
-                            >Password</label
-                        >
-                        <input
-                            v-model="password"
-                            type="password"
-                            class="w-full outline-none border-2 border-black py-2 px-2 rounded-[8px]"
-                            id="password"
-                            name="password"
-                            placeholder="Enter your password"
-                        />
-                    </div>
-                    <div class="flex justify-end w-full">
-                        <a
-                            href="./forgot-password"
-                            class="underline text-[#087BB4] font-medium"
-                            >Forgot password?</a
-                        >
-                    </div>
-                    <div class="flex justify-start w-full">
-                        <h5>
-                            New to Audemy?
-                            <a
-                                href="./signup"
-                                class="underline text-[#087BB4] font-medium"
-                                >Sign Up</a
-                            >
-                        </h5>
-                    </div>
-
-                    <div class="flex justify-center w-full pt-4">
-                        <button
-                            type="submit"
-                            class="w-full py-3 font-bold rounded-[8px] bg-[#FE892A] hover:bg-[#ff8d33] border-2 border-black shadow-[4px_4px_0px_black] text-black"
-                        >
-                            Log in
-                        </button>
-                    </div>
-                </div>
-            </form>
-
-            <div
-                class="flex w-1/2 text-gray-500 items-center justify-center gap-2"
-            >
-                <div><hr class="w-52 h-0.5 my-4 bg-gray-500 rounded-sm" /></div>
-                <div>or</div>
-                <div><hr class="w-52 h-0.5 my-4 bg-gray-500 rounded-sm" /></div>
-            </div>
-
-            <!-- Google OAuth Login -->
-            <div class="flex w-full gap-4 items-center justify-center mt-4">
-                <GoogleLogin
-                    :callback="callback"
-                    class="flex items-center justify-center gap-4"
-                />
-            </div>
-        </div>
-
-        <!-- Show school input if needed -->
-        <div
-            v-if="showSchoolForm"
-            class="w-7/12 bg-white flex items-center justify-center flex-col gap-4"
-        >
-            <h3 class="text-[36px] text-[#151E22] text-center w-7/12 mobile:w-full mobile:text-[24px] mobile:mb-4">Enter Your School</h3>
-            <input
-                v-model="school"
-                type="text"
-                class="border-2 border-black py-2 px-2 rounded-[8px] w-1/2"
-                placeholder="School Name"
-            />
-            <button
-                @click="updateSchool"
-                class="w-[488px] h-[56px] text-white rounded-[8px] bg-[#087BB4] hover:bg-[#0C587D] hover:cursor-pointer border-2 border-black font-semiBold shadow-[4px_4px_0px_black] mobile:w-full"
-            >
-                Submit
-            </button>
-        </div>
-    </div>
-</template>
+</script>
\ No newline at end of file
diff --git a/src/pages/LogIn/temp_login.vue b/src/pages/LogIn/temp_login.vue
index 6d1cd40b..595c0d7f 100644
--- a/src/pages/LogIn/temp_login.vue
+++ b/src/pages/LogIn/temp_login.vue
@@ -101,4 +101,4 @@ const logout = () => {
             <!-- Existing form and design remains unchanged -->
         </div>
     </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/pages/ResetPassword/ResetPassword.vue b/src/pages/ResetPassword/ResetPassword.vue
index 1d027949..79841db8 100644
--- a/src/pages/ResetPassword/ResetPassword.vue
+++ b/src/pages/ResetPassword/ResetPassword.vue
@@ -13,15 +13,66 @@ onMounted(() => {
     // Get the token from the URL query parameters
     const query = new URLSearchParams(window.location.search);
     token.value = query.get("token");
+
+    if (!token.value) {
+        errorMessage.value = "Invalid password reset link. Please request a new one.";
+    }
 });
 
+const showErrorAlert = (message) => {
+    errors.value = true;
+    errorMessage.value = message;
+};
+
+const handleApiError = (status, message) => {
+    switch(status) {
+        case 400:
+            errorMessage.value = "Bad request: " + (message || "Please check your input");
+            break;
+        case 401:
+            linkExpired.value = true;
+            errorMessage.value = "Password reset link is invalid or has expired";
+            break;
+        case 403:
+            errorMessage.value = "Forbidden: You don't have permission to reset this password";
+            break;
+        case 404:
+            errorMessage.value = "User not found";
+            break;
+        case 405:
+            errorMessage.value = "Method not allowed";
+            break;
+        case 429:
+            errorMessage.value = "Too many requests: Please try again later";
+            break;
+        case 500:
+            linkExpired.value = true;
+            errorMessage.value = "Internal server error: Password reset link may have expired";
+            break;
+        default:
+            errorMessage.value = message || "An error occurred during password reset";
+    }
+};
+
 const resetConfirm = async (event) => {
     event.preventDefault();     // prevent default form submission which would reload the page
 
+    // Reset error states
+    errors.value = false;
+    linkExpired.value = false;
+    errorMessage.value = "";
+
+    if (!token.value) {
+        errorMessage.value = "Invalid password reset link. Please request a new one.";
+        return;
+    }
+
     // pre-condition checks for the password and confirm password fields
     if ((password.value != confirmPassword.value) || (password.value.length < 8)) {
         // Set the flag to true to display the error message on the frontend
         errors.value = true;
+        errorMessage.value = "Passwords do not match or is not at least 8 characters long";
+        return;
     }else{
         errors.value = false;
         // API call to reset password
@@ -40,19 +91,26 @@ const resetConfirm = async (event) => {
 
             // Handle the response from the API based on the status code
             console.log("Reset Password response:", resetResponse.status);
-            if (resetResponse.status === 500) {
-                linkExpired.value = true;
-                console.error("Link Expired");
+            if (!resetResponse.ok) {
+            // Get response body if available
+            let errorData = {};
+            try {
+                errorData = await resetResponse.json();
+            } catch (e) {
+                // If response body can't be parsed as JSON, continue with empty error data
             }
+            
+            handleApiError(resetResponse.status, errorData.message);
+            return;
+        }
 
-            // Route to reset-confirm page if password reset was successfull
-            if (resetResponse.status === 200 && linkExpired.value === false) {
-                router.push("/reset-confirm");
-            }
-        } catch (error) {
+        // Route to reset-confirm page if password reset was successful
+        router.push("/reset-confirm");
+        
+    } catch (error) {
             // Throw error and set the flag to true to display the error message on the frontend
             console.error("Error: ", error);
-            errors.value = true;
+            errorMessage.value = "Connection error: Please check your internet connection and try again";
         }
     }
 };
diff --git a/src/pages/SignUp/SignUp.js b/src/pages/SignUp/SignUp.js
index 62152eff..f9767125 100644
--- a/src/pages/SignUp/SignUp.js
+++ b/src/pages/SignUp/SignUp.js
@@ -1,3 +1,7 @@
+const showErrorAlert = (message) => {
+  alert(message); // Using standard alert for simplicity
+};
+
 const submitForm = () => {
   // Get form data
   const form = document.getElementById("signupForm");
@@ -17,16 +21,64 @@ const submitForm = () => {
     },
     body: JSON.stringify(formObject),  // Convert the object to JSON
   })
-  .then(response => response.json())
-  .then(data => {
-    console.log('Success:', data);
-    // You can handle the response here (e.g., show a success message)
-  })
-  .catch((error) => {
-    console.error('Error:', error);
-    // You can handle errors here
-  });
+  .then(response => {
+    if (!response.ok) {
+      // Handle specific error codes
+      switch (response.status) {
+        case 400:
+            showErrorAlert("Bad request: " + (message || "Please check your input"));
+            break;
+        case 401:
+            showErrorAlert("Unauthorized: " + (message || "Invalid credentials"));
+            break;
+        case 403:
+            showErrorAlert("Forbidden: You don't have permission to access this resource");
+            break;
+        case 404:
+            showErrorAlert("Resource not found");
+            break;
+        case 405:
+            showErrorAlert("Method not allowed");
+            break;
+        case 429:
+            showErrorAlert("Too many requests: Please try again later");
+            break;
+        case 500:
+            showErrorAlert("Internal server error. Please try again later.");
+            break;
+        case 502:
+            showErrorAlert("Internal server error. Please try again later.");
+            break;
+        case 503:
+            showErrorAlert("Internal server error. Please try again later.");
+            break;
+        case 504:
+            showErrorAlert("Internal server error. Please try again later.");
+            break;
+            default:
+              showErrorAlert(`Error: ${response.status}. Please try again later.`);
+      }
+      
+      // Return a rejected promise to skip the next then block
+      return Promise.reject();
+  }
+  return response.json();
+})
+.then(data => {
+  console.log('Success:', data);
+  // You can handle the response here (e.g., show a success message)
+  alert('Signup successful!');
+})
+.catch((error) => {
+  // Only show network errors here - HTTP errors are already handled above
+  if (error) {
+      console.error('Error:', error);
+      if (!error.message || !parseInt(error.message)) {
+          showErrorAlert('Network error. Please check your connection and try again.');
+      }
+  }
+});
 };
 
 // Attach the submit event listener
-document.getElementById('submitBtn').addEventListener('click', submitForm);
+document.getElementById('submitBtn').addEventListener('click', submitForm);
\ No newline at end of file
diff --git a/src/pages/SignUp/SignUp.vue b/src/pages/SignUp/SignUp.vue
index 7aaacf8f..129fdd08 100644
--- a/src/pages/SignUp/SignUp.vue
+++ b/src/pages/SignUp/SignUp.vue
@@ -1,188 +1,3 @@
-<script setup>
-import { ref, watch, onMounted, computed } from "vue";
-
-const signupForm = ref(null);
-const passwordsMatch = ref(false);
-const showFeedback = ref(true);
-const password = ref('');
-const confirmPassword = ref('');
-const confirmTouched = ref(false);
-const formSubmitted = ref(false);
-
-import Group1010 from "/assets/images/SignUpImg/Group 1010.png";
-import Group878 from "/assets/images/SignUpImg/Group 878.png";
-import OrangeStar from "/assets/images/SignUpImg/Group 895.png";
-import Book from "/assets/images/SignUpImg/Group 1106.png";
-import Star from "/assets/images/testimonials/star.svg";
-
-import Cookies from "js-cookie";
-const submitForm = async (event) => {
-    event.preventDefault(); // Prevent default form submission behavior
-    
-    // Set formSubmitted to true
-    formSubmitted.value = true;
-    
-    // Force validation check before submission
-    validatePasswords();
-  
-    // Check if passwords match
-    if (!passwordsMatch.value) {
-        debugMessage.value = "Form submission stopped: passwords don't match";
-        return;
-    }
-  
-    try {
-        const response = await fetch("/api/auth/signup", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                user: {
-                    first_name: signupForm.value.first_name.value,
-                    last_name: signupForm.value.last_name.value,
-                    // birthday: signupForm.value.birthday.value,
-                    school_name: signupForm.value.school_name.value,
-                    email: signupForm.value.email.value,
-                    password: signupForm.value.password.value,
-                    confirm_password: signupForm.value.confirm_password.value,
-                },
-            }),
-        });
-
-        const data = await response.json();
-
-        if (!response.ok) {
-            throw new Error(data.error || "Something went wrong");
-        }
-
-        console.log("Success:", data);
-        //! Go To login
-        console.log("Signup Successful", data);
-
-        const loginResponse = await fetch("/api/auth/login", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                user: {
-                    email: signupForm.value.email.value,
-                    password: signupForm.value.password.value,
-                },
-            }),
-        });
-        const loginData = await loginResponse.json();
-        if (!loginResponse.ok) {
-            throw new Error(loginData.error || "Something went wrong");
-        }
-        console.log("Login Successful", loginData);
-
-        if (loginData.token) {
-            Cookies.set("audemyUserSession", JSON.stringify(loginData.token), {
-                expires: 7, // Set the cookie to expire in 7 days
-                secure: true,
-            });
-            window.location.href = "/game-zone";
-        } else {
-            throw new Error("Token not found");
-        }
-        signupForm.value?.reset?.();
-
-        // Handle success (e.g., redirect, show success message)
-    } catch (error) {
-        console.error("Error:", error.message);
-        // Handle error (e.g., show error message to the user)
-    }
-};
-
-const validatePasswords = () => {
-    
-    // Always show feedback
-    showFeedback.value = true;
-    
-    if (password.value && confirmPassword.value) {
-        // Both fields have values, set match status
-        passwordsMatch.value = password.value === confirmPassword.value;
-        debugMessage.value = passwordsMatch.value
-            ? "Passwords are a match."
-            : "Passwords do not match.";
-    } else if (confirmTouched.value && confirmPassword.value === '') {
-        // If user has interacted with confirm field but it's now empty
-        passwordsMatch.value = false;
-        debugMessage.value = "Please confirm your password";
-    } else if (formSubmitted.value) {
-        // If form was submitted but confirm password is empty
-        passwordsMatch.value = false; 
-        debugMessage.value = "Please confirm your password";
-    } else if (confirmPassword.value) {
-        // Confirm password has a value but doesn't match
-        passwordsMatch.value = false;
-        debugMessage.value = "Passwords do not match.";
-    } else {
-        // Confirm password is empty and never touched
-        passwordsMatch.value = null;
-        debugMessage.value = "Please confirm your password";
-    }
-    
-    console.log("passwordsMatch after:", passwordsMatch.value);
-};
-
-const handleConfirmBlur = () => {
-    confirmTouched.value = true;
-    validatePasswords();
-};
-
-onMounted(() => {
-    // Force feedback to show for debugging
-    showFeedback.value = true;
-    validatePasswords();
-});
-
-// Watch both password fields for changes
-watch(password, () => {
-    validatePasswords();
-});
-
-watch(confirmPassword, () => {
-    validatePasswords();
-});
-
-// Reset formSubmitted when either password changes
-watch([password, confirmPassword], () => {
-    // Reset formSubmitted whenever either password changes after form submission
-    if (formSubmitted.value) {
-        formSubmitted.value = false;
-    }
-    
-    // If user is typing in confirm field, mark it as touched
-    if (confirmPassword.value) {
-        confirmTouched.value = true;
-    }
-});
-
-const feedbackMessage = computed(() => {
-    if (passwordsMatch.value === true) {
-        return "Yeye! Passwords are a match!";
-    } else if (passwordsMatch.value === false) {
-        return "Oops! Passwords do not match. Please Try again.";
-    } else {
-        return "Please confirm your password";
-    }
-});
-
-const feedbackClass = computed(() => {
-    if (passwordsMatch.value === true) {
-        return "bg-green-100 border-green-500 text-green-800";
-    } else if (passwordsMatch.value === false) {
-        return "bg-red-100 border-red-500 text-red-800";
-    } else {
-        return "bg-gray-100 border-gray-400 text-gray-800";
-    }
-});
-
-</script>
-
 <template>
     <div
         class="w-full min-h-screen overflow-auto flex justify-between gap-[98px] font-poppins mobile:flex-col mobile:gap-[20px]"
@@ -305,6 +120,22 @@ const feedbackClass = computed(() => {
                     />
                 </div>
 
+                <!-- EMAIL FIELD -->
+                <div class="mb-[16px] mobile:w-full">
+                    <label
+                        class="block text-[#0C0D0D] font-semiBold"
+                        for="email"
+                        >Email</label
+                    >
+                    <input
+                        type="email"
+                        class="w-full outline-none border border-black h-[48px] px-4 rounded-[8px]"
+                        id="email"
+                        name="email"
+                        placeholder="Enter your email address"
+                    />
+                </div>
+
                 <!-- PASSWORD FIELD -->
                 <div class="mb-[16px] mobile:w-full">
                     <label
@@ -339,11 +170,12 @@ const feedbackClass = computed(() => {
                         placeholder="Confirm your password"
                         @input="validatePasswords"
                         @blur="handleConfirmBlur"
-                    />                   
+                    />
                 </div>
-                
+
                 <!-- Password match feedback container (Using computed properties) -->
-                <div v-show="confirmTouched"
+                <div
+                    v-show="confirmTouched"
                     class="mb-6 p-3 rounded-lg border-2 shadow-md min-h-[56px] text-base font-medium"
                     :class="feedbackClass"
                 >
@@ -375,4 +207,292 @@ const feedbackClass = computed(() => {
             </form>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<script setup>
+import { ref, watch, onMounted, computed } from "vue";
+
+const signupForm = ref(null);
+const passwordsMatch = ref(false);
+const showFeedback = ref(true);
+const password = ref("");
+const confirmPassword = ref("");
+const confirmTouched = ref(false);
+const formSubmitted = ref(false);
+const debugMessage = ref("Please confirm your password");
+
+import Group1010 from "/assets/images/SignUpImg/Group 1010.png";
+import Group878 from "/assets/images/SignUpImg/Group 878.png";
+import OrangeStar from "/assets/images/SignUpImg/Group 895.png";
+import Book from "/assets/images/SignUpImg/Group 1106.png";
+import Star from "/assets/images/testimonials/star.svg";
+
+import Cookies from "js-cookie";
+
+const showErrorAlert = (message) => {
+    alert(message); // Using standard alert for simplicity
+};
+
+const submitForm = async (event) => {
+    event.preventDefault(); // Prevent default form submission behavior
+
+    // Set formSubmitted to true
+    formSubmitted.value = true;
+
+    // Force validation check before submission
+    validatePasswords();
+
+    // Check if passwords match
+    if (!passwordsMatch.value) {
+        debugMessage.value = "Form submission stopped: passwords don't match";
+        return;
+    }
+
+    try {
+        const response = await fetch("/api/auth/signup", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                user: {
+                    first_name: signupForm.value.first_name.value,
+                    last_name: signupForm.value.last_name.value,
+                    // birthday: signupForm.value.birthday.value,
+                    school_name: signupForm.value.school_name.value,
+                    email: signupForm.value.email.value,
+                    password: signupForm.value.password.value,
+                    confirm_password: signupForm.value.confirm_password.value,
+                },
+            }),
+        });
+
+        if (!response.ok) {
+            // For non-JSON responses, try to get text content
+            const contentType = response.headers.get("content-type");
+            if (!contentType || !contentType.includes("application/json")) {
+                const errorText = await response.text();
+                console.error("Non-JSON error response:", errorText);
+            }
+            
+            // Now handle based on status code
+            switch (response.status) {
+                case 400:
+                    showErrorAlert("Bad request: Please check your input");
+                    break;
+                case 401:
+                    showErrorAlert("Unauthorized: Invalid credentials");
+                    break;
+                case 403:
+                    showErrorAlert("Forbidden: You don't have permission to access this resource");
+                    break;
+                case 404:
+                    showErrorAlert("Resource not found");
+                    break;
+                case 405:
+                    showErrorAlert("Method not allowed");
+                    break;
+                case 429:
+                    showErrorAlert("Too many requests: Please try again later");
+                    break;
+                case 500:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                case 502:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                case 503:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                case 504:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                default:
+                    // Try to get error message from response if it's JSON
+                    let errorMessage = 'Something went wrong';
+                    if (contentType && contentType.includes("application/json")) {
+                        try {
+                            const data = await response.json();
+                            errorMessage = data.error || errorMessage;
+                        } catch (e) {
+                            console.error("Error parsing JSON:", e);
+                        }
+                    }
+                    alert(`Signup error: ${errorMessage}`);
+            }
+            
+            // Instead of throwing an error, just return to stop execution
+            return;
+        }
+
+        // Continue with normal execution if response is OK
+        const data = await response.json();
+
+        console.log("Success:", data);
+        //! Go To login
+        console.log("Signup Successful", data);
+
+        const loginResponse = await fetch("/api/auth/login", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                user: {
+                    email: signupForm.value.email.value,
+                    password: signupForm.value.password.value,
+                },
+            }),
+        });
+
+        if (!loginResponse.ok) {
+            const loginContentType = loginResponse.headers.get("content-type");
+            let loginData;
+            
+            if (loginContentType && loginContentType.includes("application/json")) {
+                try {
+                    loginData = await loginResponse.json();
+                } catch (e) {
+                    console.error("Error parsing login JSON:", e);
+                }
+            }
+            
+            switch (loginResponse.status) {
+                case 400:
+                    alert('Invalid login request. Please check your information.');
+                    break;
+                case 401:
+                    alert('Invalid email or password. Please try again.');
+                    break;
+                case 404:
+                    alert('Account not found. Please check your email.');
+                    break;
+                case 429:
+                    alert('Too many login attempts. Please try again later.');
+                    break;
+                case 500:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                case 502:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                case 503:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                case 504:
+                    showErrorAlert("Internal server error. Please try again later.");
+                    break;
+                default:
+                    alert(`Login error: ${(loginData && loginData.error) || 'Something went wrong'}`);
+            }
+            
+            // Return without throwing error to prevent dual alerts
+            return;
+        }
+
+        const loginData = await loginResponse.json();
+        console.log("Login Successful", loginData);
+
+        if (loginData.token) {
+            Cookies.set("audemyUserSession", JSON.stringify(loginData.token), {
+                expires: 7, // Set the cookie to expire in 7 days
+                secure: true,
+            });
+            window.location.href = "/game-zone";
+        } else {
+            showErrorAlert("Token not found");
+            return;
+        }
+        signupForm.value?.reset?.();
+
+    } catch (error) {
+        console.error("Error:", error.message);
+        // Only show error alert if it hasn't been shown by the code above
+        showErrorAlert(`Error: ${error.message}`);
+    }
+};
+
+const validatePasswords = () => {
+    // Always show feedback
+    showFeedback.value = true;
+
+    if (password.value && confirmPassword.value) {
+        // Both fields have values, set match status
+        passwordsMatch.value = password.value === confirmPassword.value;
+        debugMessage.value = passwordsMatch.value
+            ? "Passwords are a match."
+            : "Passwords do not match.";
+    } else if (confirmTouched.value && confirmPassword.value === "") {
+        // If user has interacted with confirm field but it's now empty
+        passwordsMatch.value = false;
+        debugMessage.value = "Please confirm your password";
+    } else if (formSubmitted.value) {
+        // If form was submitted but confirm password is empty
+        passwordsMatch.value = false;
+        debugMessage.value = "Please confirm your password";
+    } else if (confirmPassword.value) {
+        // Confirm password has a value but doesn't match
+        passwordsMatch.value = false;
+        debugMessage.value = "Passwords do not match.";
+    } else {
+        // Confirm password is empty and never touched
+        passwordsMatch.value = null;
+        debugMessage.value = "Please confirm your password";
+    }
+
+    // console.log("passwordsMatch after:", passwordsMatch.value);
+};
+
+const handleConfirmBlur = () => {
+    confirmTouched.value = true;
+    validatePasswords();
+};
+
+onMounted(() => {
+    // Force feedback to show for debugging
+    showFeedback.value = true;
+    validatePasswords();
+});
+
+// Watch both password fields for changes
+watch(password, () => {
+    validatePasswords();
+});
+
+watch(confirmPassword, () => {
+    validatePasswords();
+});
+
+// Reset formSubmitted when either password changes
+watch([password, confirmPassword], () => {
+    // Reset formSubmitted whenever either password changes after form submission
+    if (formSubmitted.value) {
+        formSubmitted.value = false;
+    }
+
+    // If user is typing in confirm field, mark it as touched
+    if (confirmPassword.value) {
+        confirmTouched.value = true;
+    }
+});
+
+const feedbackMessage = computed(() => {
+    if (passwordsMatch.value === true) {
+        return "Yeye! Passwords are a match!";
+    } else if (passwordsMatch.value === false) {
+        return "Oops! Passwords do not match. Please Try again.";
+    } else {
+        return "Please confirm your password";
+    }
+});
+
+const feedbackClass = computed(() => {
+    if (passwordsMatch.value === true) {
+        return "bg-green-100 border-green-500 text-green-800";
+    } else if (passwordsMatch.value === false) {
+        return "bg-red-100 border-red-500 text-red-800";
+    } else {
+        return "bg-gray-100 border-gray-400 text-gray-800";
+    }
+});
+</script>
\ No newline at end of file