diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
index 7125674..6f3525b 100644
--- a/client/src/components/Navbar.jsx
+++ b/client/src/components/Navbar.jsx
@@ -266,7 +266,7 @@ export default function Navbar() {
                   "about"
                 )}`}
               >
-                About
+                Help
               </button>
               <button
                 onClick={(e) => handleLinkClick("/#help", e)}
@@ -274,7 +274,7 @@ export default function Navbar() {
                   "help"
                 )}`}
               >
-                Help
+                About
               </button>
               <button
                 onClick={(e) => handleLinkClick("/#faq", e)}
diff --git a/client/src/pages/AboutUs.jsx b/client/src/pages/AboutUs.jsx
index 699c5a6..69ca78d 100644
--- a/client/src/pages/AboutUs.jsx
+++ b/client/src/pages/AboutUs.jsx
@@ -1,70 +1,91 @@
-import React from 'react'
-import { Shield, Zap, CheckCircle2, Folder, BadgeCheck } from 'lucide-react'
+import React from "react";
+import { Shield, Zap, CheckCircle2, Folder, BadgeCheck } from "lucide-react";
 
 export default function AboutUs() {
   return (
-    <div className="w-full min-h-screen sm:gap-10 flex flex-col lg:flex-row justify-center items-center mt-20 sm:mt-7 py-16 px-10 sm:px-8">
-     {/* Left side */}
-      <div className="w-full lg:w-1/2 flex justify-center  ml-7 mr-7 relative mb-12 lg:mb-0">
-        <div className="absolute -top-13  w-70 h-40 sm:w-100 sm:h-70 bg-[#F9AB00]/25 rounded-full  filter blur-xl opacity-20"></div>
-
+    <div className="w-full min-h-screen gap-10 flex flex-col xl:flex-row justify-center items-center mt-30 sm:mt-10">
+      {/* Left side */}
+      <div className="w-full lg:w-1/2 flex justify-center xl:ml-35 xl:mr-35 relative mb-12 lg:mb-0">
         {/* Container with scaling */}
-        <div className="relative flex justify-center w-[380px] sm:w-[450px] md:w-[470px] lg:w-[500px] 
-                        transform origin-center scale-90 sm:scale-90 md:scale-100">
+        <div
+          className="relative flex justify-center w-[380px] sm:w-[450px] md:w-[470px] lg:w-[500px] 
+                        transform origin-center scale-90 sm:scale-90 md:scale-100 lg:scale-130 xl:scale-120"
+        >
           {/* Main ticket */}
-          <div className="bg-white w-1/2 shadow-sm border border-[#E2E3E4] rounded-xl 
+          <div
+            className="bg-white w-1/2 shadow-sm border border-[#E2E3E4] rounded-xl 
                           px-8 sm:px-12 py-12 sm:py-16 text-center 
-                          text-4xl sm:text-4xl md:text-5xl font-bold text-blue-600">
+                          text-4xl sm:text-4xl md:text-5xl font-bold text-blue-600"
+          >
             P01
           </div>
 
           {/* Floating tags */}
-          <div className="absolute font-semibold top-12 -left-4 sm:top-17 sm:-left-7 md:top-17 md:-left-11 bg-white shadow-xs rounded-xl 
-                          border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm 
-                          flex items-center gap-2">
+          <div
+            className="absolute font-semibold top-12 -left-4 sm:top-17 sm:-left-7 md:top-17 md:-left-11 bg-white shadow-xs rounded-xl 
+                          border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm 
+                          flex items-center gap-2"
+          >
             <img src="assets/check.svg" alt="" />
-             Enrollment/Transfer
+            Enrollment/Transfer
           </div>
 
-          <div className="absolute font-semibold top-22 -left-1 sm:top-27 sm:-left-1 md:top-28 md:-left-3 bg-white shadow-xs rounded-xl 
-                          border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm 
-                          flex items-center gap-2">
-            <img src="assets/check.svg" alt="" />Temporary Gate Pass
+          <div
+            className="absolute font-semibold top-22 -left-1 sm:top-27 sm:-left-1 md:top-28 md:-left-3 bg-white shadow-xs rounded-xl 
+                          border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm 
+                          flex items-center gap-2"
+          >
+            <img src="assets/check.svg" alt="" />
+            Temporary Gate Pass
           </div>
 
-          <div className="absolute font-semibold top-32 left-14 sm:top-37 sm:left-17 md:top-39 md:left-18 bg-white shadow-xs rounded-xl 
-                          border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm 
-                          flex items-center gap-2">
+          <div
+            className="absolute font-semibold top-32 left-14 sm:top-37 sm:left-17 md:top-39 md:left-18 bg-white shadow-xs rounded-xl 
+                          border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2  text-[10px] sm:text-xs md:text-sm 
+                          flex items-center gap-2"
+          >
             <img src="assets/check.svg" alt="" /> Uniform Exemption
           </div>
 
-          <div className="absolute font-semibold -top-7 right-19 sm:-top-7 sm:right-23 md:-top-7 md:right-24 bg-white shadow-xs rounded-xl 
-                          border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm 
-                          flex items-center gap-2">
-            <img src="assets/check.svg" alt="" />Good Moral
+          <div
+            className="absolute font-semibold -top-7 right-19 sm:-top-7 sm:right-23 md:-top-7 md:right-24 bg-white shadow-xs rounded-xl 
+                          border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm 
+                          flex items-center gap-2"
+          >
+            <img src="assets/check.svg" alt="" />
+            Good Moral
           </div>
 
-          <div className="absolute font-semibold top-3 -right-3 sm:top-3 sm:-right-2 md:top-4 md:-right-6 bg-white shadow-xs rounded-xl 
-                          border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm 
-                          flex items-center gap-2">
-            <img src="assets/check.svg" alt="" />Insurance Payment
+          <div
+            className="absolute font-semibold top-3 -right-3 sm:top-3 sm:-right-2 md:top-4 md:-right-10 xl:-right-6 bg-white shadow-xs rounded-xl 
+                          border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm 
+                          flex items-center gap-2"
+          >
+            <img src="assets/check.svg" alt="" />
+            Insurance Payment
           </div>
 
-          <div className="absolute font-semibold top-13 right-2 sm:top-13 sm:right-3 md:top-15 md:-right-0 bg-white shadow-xs rounded-xl 
-                          border border-[#E2E3E4] px-3 py-2 text-[10px] sm:text-xs md:text-sm 
-                          flex items-center gap-2">
+          <div
+            className="absolute font-semibold top-13 right-0 sm:top-13 sm:right-4 md:top-15 md:-right-4 xl:-right-0 bg-white shadow-xs rounded-xl 
+                          border border-[#E2E3E4] px-2 py-1 sm:px-3 sm:py-2 text-[10px] sm:text-xs md:text-sm 
+                          flex items-center gap-2"
+          >
             <img src="assets/check.svg" alt="" /> Transmittal Letter
           </div>
         </div>
       </div>
 
-
       {/* Right side */}
-      <div className="w-full  pl-20 lg:w-1/2 lg:pl-8 xl:pl-12 text-left mr-15">
-        <h1 className="text-3xl sm:text-4xl font-medium  leading-tight">Built to Streamline</h1>
-        <h1 className="text-3xl sm:text-4xl font-medium leading-tight mt-2">Your Campus Exercise</h1>
-        <p className="mt-4 text-gray-600 text-base sm:text-lg">
-          Join thousands of students and staff who use ExeQueue to save time and reduce wait times.
+      <div className="w-full sm:pl-20 lg:pl-8 xl:pl-12 text-left sm:mr-15 lg:mt-25 xl:mt-0">
+        <h1 className="text-2xl sm:text-4xl font-medium  leading-tight">
+          Built to Streamline
+        </h1>
+        <h1 className="text-2xl sm:text-4xl font-medium leading-tight mt-2">
+          Your Campus Exercise
+        </h1>
+        <p className="mt-4 text-gray-600 text-base text-md sm:text-lg">
+          Join thousands of students and staff who use ExeQueue to save time and
+          reduce wait times.
         </p>
 
         {/* Features */}
@@ -74,39 +95,51 @@ export default function AboutUs() {
               <Shield className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
             </div>
             <div>
-                <h2 className="font-semibold text-lg sm:text-lg mb-1">Secure</h2>
-                <p className="text-gray-600 text-md sm:text-md">Your information stays safe at all times.</p>
+              <h2 className="font-semibold text-lg sm:text-lg mb-1">Secure</h2>
+              <p className="text-gray-600 text-md sm:text-md">
+                Your information stays safe at all times.
+              </p>
             </div>
           </div>
           <div className="gap-10">
-            <div className='inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2'>
-            <Zap className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
-            </div>   
-            <div className='gap-10'>
+            <div className="inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2">
+              <Zap className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
+            </div>
+            <div className="gap-10">
               <h2 className="font-semibold text-lg sm:text-lg mb-1">Fast</h2>
-              <p className="text-gray-600 text-md">Get in line and get real-time updates in seconds.</p>
+              <p className="text-gray-600 text-md">
+                Get in line and get real-time updates in seconds.
+              </p>
             </div>
           </div>
           <div className="gap-3">
-            <div className='inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2'>
-            <BadgeCheck className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
+            <div className="inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2">
+              <BadgeCheck className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
             </div>
             <div>
-              <h2 className="font-semibold text-base sm:text-lg mb-1">Reliable</h2>
-              <p className="text-gray-600 text-md sm:text-md">Always available when you need it.</p>
+              <h2 className="font-semibold text-base sm:text-lg mb-1">
+                Reliable
+              </h2>
+              <p className="text-gray-600 text-md sm:text-md">
+                Always available when you need it.
+              </p>
             </div>
           </div>
           <div className="gap-3">
-            <div className='inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2'>
-            <Folder className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
+            <div className="inline-block bg-[#DDEAFC]/55 p-2 rounded-xl mb-2">
+              <Folder className="text-yellow-500 w-5 h-5 sm:w-6 sm:h-6 mt-1" />
             </div>
-            <div className=''>
-              <h2 className="font-semibold text-base sm:text-lg mb-1">Organized</h2>
-              <p className="text-gray-600 text-md sm:text-md">A structured and orderly digital queue for everyone.</p>
+            <div className="">
+              <h2 className="font-semibold text-base sm:text-lg mb-1">
+                Organized
+              </h2>
+              <p className="text-gray-600 text-md sm:text-md">
+                A structured and orderly digital queue for everyone.
+              </p>
             </div>
           </div>
         </div>
       </div>
     </div>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/client/src/pages/Contact.jsx b/client/src/pages/Contact.jsx
index d9cb8ea..8d5a3a6 100644
--- a/client/src/pages/Contact.jsx
+++ b/client/src/pages/Contact.jsx
@@ -4,10 +4,10 @@ import { Globe } from "lucide-react";
 
 export default function Contact() {
   return (
-    <footer className="bg-[#10458B] mt-20 text-white py-8 px-6 md:px-15 rounded-4xl w-full xl:w-[95%] 2xl:w-[100%]">
-      <div className="max-w-8xl mx-auto flex flex-col md:flex-row justify-between items-start gap-40">
+    <footer className="bg-[#10458B] mt-20 text-white py-8 rounded-4xl w-full">
+      <div className="max-w-8xl mx-auto flex flex-col lg:flex-row justify-between items-start gap-10   lg:gap-40">
         {/* Left Section */}
-        <div className="md:mx-10 lg:mx-20 flex flex-col max-w-md w-full top-1/2 transform -translate-y-[15%] ">
+        <div className="ml-10 pr-20 sm:pr-0 md:mx-10 lg:mx-20 flex flex-col max-w-md w-full top-1/2 transform -translate-y-[15%] ">
           <div className="flex items-center gap-2">
             {/* Logo */}
             <div className="w-30 h-30 flex items-center justify-center rounded-full left-1/2 transform -translate-x-[30%] ">
@@ -18,7 +18,7 @@ export default function Contact() {
               />
             </div>
             <h1
-              className="text-2xl font-bold left-1/2 transform -translate-x-[55%]"
+              className=" text-xl sm:text-2xl font-bold left-1/2 transform -translate-x-[55%]"
               style={{ fontFamily: "Montserrat, sans-serif" }}
             >
               ExeQueue
@@ -45,7 +45,7 @@ export default function Contact() {
         </div>
 
         {/* Middle - Services */}
-        <div className="md:mr-20 lg:mr-40 grid grid-cols-2 gap-20">
+        <div className="md:mr-20 lg:mr-40 ml-10 grid grid-cols-2 gap-20">
           <div className="text-left w-full sm:w-auto">
             <h2 className="text-white font-medium mb-3">Service</h2>
             <ul className="space-y-2 text-gray-300 text-sm md:text-base">
diff --git a/client/src/pages/FAQs.jsx b/client/src/pages/FAQs.jsx
index f9122e1..fe46197 100644
--- a/client/src/pages/FAQs.jsx
+++ b/client/src/pages/FAQs.jsx
@@ -72,9 +72,9 @@ export default function FAQ() {
   };
 
   return (
-    <div className="w-full xl:w-[70%] 2xl:w-[90%] mt-10 flex items-center flex-col xl:flex-row  lg:gap-16 ">
+    <div className="w-full mt-25 sm:mt-0 flex items-center flex-col xl:flex-row lg:gap-16 ">
       {/* Left side: Categories */}
-      <div className="w-full xl:w-3xl flex flex-col gap-4 mb-8 lg:mb-0 p-7 lg:p-0">
+      <div className="w-full xl:w-3xl flex flex-col gap-4 mb-8 lg:mb-0 ">
         <h2 className="text-3xl sm:text-4xl lg:text-4xl text-left font-semibold text-gray-900 mb-2">
           Frequently Asked Questions
         </h2>
@@ -128,7 +128,7 @@ export default function FAQ() {
       </div>
 
       {/* Right side: Accordion */}
-      <div className="w-full md:w-3xl lg:w-3xl flex flex-col justify-center p-7 lg:p-0">
+      <div className="w-full xl:w-3xl flex flex-col justify-center">
         <div className="flex flex-col gap-4">
           {faqs[activeCategory].map((item, index) => (
             <div
diff --git a/client/src/pages/Help.jsx b/client/src/pages/Help.jsx
index ff3211e..aed50e3 100644
--- a/client/src/pages/Help.jsx
+++ b/client/src/pages/Help.jsx
@@ -1,54 +1,63 @@
 export default function Help() {
   return (
-    <div className="w-full flex justify-center mt-24 sm:mt-20 lg:mt-35 items-center">
-      <div className="flex flex-col xl:flex-row bg-[#DDEAFC]/55 sm:mx-10 md:mx-20 rounded-2xl justify-start items-baseline p-10 sm:p-0">
+    <div className="w-full min-h-screen flex justify-center xl:mt-10 items-center">
+      <div className="flex flex-col xl:flex-row bg-[#DDEAFC]/55 gap-0 xl:gap-13 mt-15 xl:mt-5 rounded-2xl justify-start items-baseline">
         {/* Left side */}
-        <div className="w-full py-10 md:py-10 xl:py-0 md:w-full xl:w-[40%] flex flex-col text-center xl:text-start xl:ml-10 mb-10 xl:mb-0 2xl:ml-20">
-          <h1 className="text-3xl sm:text-4xl md:text-4xl lg:text-4xl xl:text-4xl 2xl:text-5xl font-semibold text-gray-900 leading-tight">
+        <div className="w-full py-10 px-5 sm:px-0 md:py-10 xl:py-0 md:w-full xl:w-[40%] flex flex-col text-center xl:text-start xl:ml-10 2xl:ml-20">
+          <h1 className="text-2xl sm:text-4xl md:text-4xl lg:text-4xl xl:text-4xl 2xl:text-5xl font-semibold text-gray-900 leading-tight">
             How Does it Work?
           </h1>
-          <p className="mt-4 text-lg sm:text-xl md:text-xl lg:text-xl xl:text-xl text-gray-700">
+          <p className="mt-4 text-md sm:text-xl md:text-xl lg:text-xl xl:text-xl text-gray-700">
             No lines, no stress—just follow these steps.
           </p>
         </div>
 
         {/* Right side - single column for mobile AND iPad Pro, two columns only on xl screens (large PC) */}
-        <div className="w-full md:w-full xl:w-1/2 xl:min-h-[80vh] grid grid-cols-1 2xl:grid-cols-2 gap-6 xl:gap-8 xl:mr-5 2xl:mr-20 sm:p-10 md:p-10 xl:p-0 xl:pt-20 2xl:pt-40">
-          
+        <div className="w-full md:w-full xl:w-1/2 xl:min-h-[80vh] grid grid-cols-1 lg:grid-cols-2 gap-6 xl:gap-8 xl:mr-5 2xl:mr-20 p-5 pb-10 sm:p-10 xl:p-0 xl:pt-20 2xl:pt-25">
           {/* Step 1 */}
           <div className="flex items-start gap-4 xl:gap-5">
-            <span className="text-4xl md:text-4xl xl:text-4xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">1</span>
+            <span className="text-4xl md:text-4xl xl:text-5xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">
+              1
+            </span>
             <p className="text-base md:text-lg xl:text-base 2xl:text-xl text-start font-light pt-2 xl:pt-2">
-              Choose your queue type — Priority (for PWDs, seniors, etc.) or Standard for regular requests.
+              Choose your queue type — Priority (for PWDs, seniors, etc.) or
+              Standard for regular requests.
             </p>
           </div>
 
           {/* Step 2 */}
           <div className="flex items-start gap-4 xl:gap-5">
-            <span className="text-4xl md:text-4xl xl:text-4xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">2</span>
+            <span className="text-4xl md:text-4xl xl:text-5xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">
+              2
+            </span>
             <p className="text-base md:text-lg xl:text-base 2xl:text-xl text-start font-light pt-2 xl:pt-2">
-              Fill in your details like name, ID number, and contact information.
+              Fill in your details like name, ID number, and contact
+              information.
             </p>
           </div>
 
           {/* Step 3 */}
           <div className="flex items-start gap-4 xl:gap-5">
-            <span className="text-4xl md:text-4xl xl:text-4xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">3</span>
+            <span className="text-4xl md:text-4xl xl:text-5xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">
+              3
+            </span>
             <p className="text-base md:text-lg xl:text-base 2xl:text-xl text-start font-light pt-2 xl:pt-2">
-              Select the service you need, such as Good Moral Certificate, Insurance Payment, Gate Pass, and more.
+              Select the service you need, such as Good Moral Certificate,
+              Insurance Payment, Gate Pass, and more.
             </p>
           </div>
 
           {/* Step 4 */}
           <div className="flex items-start gap-4 xl:gap-5">
-            <span className="text-4xl md:text-4xl xl:text-4xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">4</span>
+            <span className="text-4xl md:text-4xl xl:text-5xl 2xl:text-6xl font-extrabold text-amber-500 min-w-[40px] xl:min-w-[50px]">
+              4
+            </span>
             <p className="text-base md:text-lg xl:text-base 2xl:text-xl text-start font-light pt-2 xl:pt-2">
               Review your information and confirm to get your queue number.
             </p>
           </div>
-
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/client/src/pages/Home.jsx b/client/src/pages/Home.jsx
index 6d6ddb1..61e2e8e 100644
--- a/client/src/pages/Home.jsx
+++ b/client/src/pages/Home.jsx
@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 
 export default function Home() {
   const [loading, setLoading] = useState(false);
@@ -16,13 +16,13 @@ export default function Home() {
 
   return (
     <div>
-      <div className="w-full flex flex-col justify-center  max-w-4xl text-center md:text-left space-y-4 px-4 rounded-2xl relative z-10 min-h-[80vh] ">
+      <div className="w-full flex flex-col justify-center  max-w-4xl text-center md:text-left space-y-4 rounded-2xl relative z-10 min-h-[80vh] ">
         {/* Heading with improved gradient and animation */}
-        <div className="space-y-6 pt-10  sm:pt-0 text-center mb-10">
+        <div className="space-y-6 w-full pt-10  sm:pt-0 text-center mb-10">
           <h1 className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-extrabold text-gray-900 leading-tight">
             <span className="bg-gradient-to-r from-[#1A73E8] via-[#F9AB00] to-[#1A73E8] bg-clip-text text-transparent bg-size-200 animate-gradient">
               Student
-            </span>{' '}
+            </span>{" "}
             Services, Simplified
           </h1>
         </div>
@@ -35,33 +35,33 @@ export default function Home() {
         </div>
 
         {/* Buttons with improved styling and icons */}
-        <div className="flex flex-col sm:flex-row mb-4 gap-5 justify-center ">
+        <div className="flex flex-row mb-4 gap-5 justify-center ">
           {/* Proceed as Staff */}
           <Link to="/staff/login">
             <button
-             className="group border border-gray-400 hover:bg-[#1A73E8] w-full hover:text-white font-semibold py-5 px-6 rounded-2xl transition-all duration-300 shadow-sm hover:shadow-lg flex items-center justify-center gap-2 cursor-pointer text-sm sm:text-md"
+              className="group border border-gray-400 hover:bg-[#1A73E8] w-full hover:text-white font-semibold py-3 px-3 sm:py-5 sm:px-6 rounded-2xl transition-all duration-300 shadow-sm hover:shadow-lg flex items-center justify-center gap-1 sm:gap-2 cursor-pointer text-xs sm:text-md"
               // onClick={() => handleRedirect("/staff/login")}
             >
-                {/* Default (visible when not hovered) */}
-                <img
-                  src="/assets/User - V1.png"
-                  alt="user"
-                  className="w-6 h-6 block group-hover:hidden"
-                />
+              {/* Default (visible when not hovered) */}
+              <img
+                src="/assets/User - V1.png"
+                alt="user"
+                className="w-6 h-6 block group-hover:hidden"
+              />
 
-                {/* Hovered (visible on hover only) */}
-                <img
-                  src="/assets/userWhite.png"
-                  alt="user white"
-                  className="w-6 h-6 hidden group-hover:block"
-                />
+              {/* Hovered (visible on hover only) */}
+              <img
+                src="/assets/userWhite.png"
+                alt="user white"
+                className="w-6 h-6 hidden group-hover:block"
+              />
               <span>Proceed as Staff</span>
             </button>
           </Link>
 
           {/* Request Service */}
           <Link to="/student/request">
-            <button className="bg-[#1A73E8] hover:bg-[#1557B0] w-full text-white font-semibold py-5 px-6 rounded-2xl transition-all duration-300 shadow-md hover:shadow-xl transform hover:-translate-y-1 flex items-center justify-center gap-2 cursor-pointer text-sm sm:text-md">
+            <button className="bg-[#1A73E8] hover:bg-[#1557B0] w-full text-white font-semibold py-3 px-4 sm:py-5 sm:px-6 rounded-2xl transition-all duration-300 shadow-md hover:shadow-xl transform hover:-translate-y-1 flex items-center justify-center gap-1 sm:gap-2  cursor-pointer text-xs md:text-md">
               <img
                 src="/assets/dashboard icons.png"
                 alt="search"
@@ -74,12 +74,12 @@ export default function Home() {
 
         <div className="items-center mb-8 text-center text-gray-500 text-sm sm:text-base">
           <p>
-            Already have a queue number?{' '}
+            Already have a queue number?{" "}
             <Link to="/student/queue/search">
               <span>
                 <button
                   className="cursor-pointer underline text-[#1A73E8] hover:text-blue-700 transition-colors"
-                  onClick={() => handleRedirect('/student/queue/search')} // change later to url destination for view queue
+                  onClick={() => handleRedirect("/student/queue/search")} // change later to url destination for view queue
                 >
                   Search Queue
                 </button>
diff --git a/client/src/pages/Landing.jsx b/client/src/pages/Landing.jsx
index dfdef35..d23eec3 100644
--- a/client/src/pages/Landing.jsx
+++ b/client/src/pages/Landing.jsx
@@ -18,7 +18,7 @@ export default function Landing() {
       {/* About Us Section */}
       <section
         id="about"
-        className="min-h-screen flex items-center justify-center "
+        className="min-h-[80vh] w-full  px-5 sm:px-10 lg:px-15 flex items-center justify-center "
       >
         <Help />
       </section>
@@ -26,19 +26,19 @@ export default function Landing() {
       {/* Help Section */}
       <section
         id="help"
-        className="min-h-[80vh] flex items-center justify-center "
+        className="min-h-[80vh] w-full  px-5 sm:px-10 lg:px-15 flex items-center justify-center "
       >
         <AboutUs />
       </section>
       <section
         id="faq"
-        className="min-h-[80vh] flex items-center justify-center"
+        className="min-h-[80vh] w-full  px-5 sm:px-10 lg:px-15  flex items-center justify-center"
       >
         <FAQs />
       </section>
       <section
         id="faq"
-        className="min-h-[50vh] flex items-center justify-center"
+        className="min-h-[50vh] w-full  px-5 sm:px-10 lg:px-15  flex items-center justify-center"
       >
         <Contact />
       </section>
diff --git a/client/src/pages/dashboard/Profile.jsx b/client/src/pages/dashboard/Profile.jsx
index 1293234..593f27f 100644
--- a/client/src/pages/dashboard/Profile.jsx
+++ b/client/src/pages/dashboard/Profile.jsx
@@ -76,7 +76,11 @@ export default function Profile() {
           Manage your profile and account settings
         </span>
 
-        <div className="w-full flex flex-col p-5 lg:p-6 border border-gray-300 rounded-2xl xl:mb-12">
+        <div
+          className={`w-full flex flex-col p-5 lg:p-6 border border-gray-300 rounded-2xl ${
+            isPersonnel ? "xl:mb-12" : "md:mb-40"
+          }`}
+        >
           <div className="flex flex-row justify-between items-start sm:items-center gap-3 mb-5 lg:mb-8">
             <div className="flex gap-2 items-center">
               <img
@@ -139,26 +143,28 @@ export default function Profile() {
             {/* RIGHT SIDE: FORM */}
             <div
               className={`w-full xl:w-2/3 space-y-4 sm:space-y-5 lg:space-y-6 ${
-                isPersonnel ? "" : "pb-20"
+                isPersonnel ? "" : "md:pb-20"
               }`}
             >
-              {["fullName", "username", "email", "password"].map((field) => (
-                <div key={field}>
-                  <label className="text-xs sm:text-sm lg:text-base font-semibold capitalize">
-                    {field === "fullName" ? "Full name" : field}
-                  </label>
-                  <input
-                    type={field === "password" ? "password" : "text"}
-                    name={field}
-                    value={formData[field]}
-                    onChange={handleChange}
-                    className={`w-full bg-[#F5F5F5] rounded-lg px-3 sm:px-4 py-2 sm:py-3 lg:py-4 text-sm lg:text-base border border-transparent 
-                      focus:outline-none focus:ring-2 focus:ring-[#1A73E8] focus:border-[#1A73E8] 
-                      ${isEditing ? "text-black" : "text-gray-500"}`}
-                    disabled={!isEditing}
-                  />
-                </div>
-              ))}
+              {["fullName", "username", "email"]
+                .concat(isPersonnel ? ["password"] : [])
+                .map((field) => (
+                  <div key={field}>
+                    <label className="text-xs sm:text-sm lg:text-base font-semibold capitalize">
+                      {field === "fullName" ? "Full name" : field}
+                    </label>
+                    <input
+                      type={field === "password" ? "password" : "text"}
+                      name={field}
+                      value={formData[field]}
+                      onChange={handleChange}
+                      className={`w-full bg-[#F5F5F5] rounded-2xl px-3 sm:px-4 py-2 sm:py-3 lg:py-4 text-sm lg:text-base border border-transparent 
+                        focus:outline-none focus:ring-2 focus:ring-[#1A73E8] focus:border-[#1A73E8] 
+                        ${isEditing ? "text-black" : "text-gray-500"}`}
+                      disabled={!isEditing}
+                    />
+                  </div>
+                ))}
 
               {/* ✅ SAVE BUTTON ALWAYS VISIBLE */}
               {isPersonnel && (
@@ -166,11 +172,11 @@ export default function Profile() {
                   <button
                     onClick={handleSave}
                     disabled={!isEditing || !hasChanges}
-                    className={`w-full cursor-pointer sm:w-auto font-medium py-2.5 sm:py-3 px-4 sm:px-5 
+                    className={`w-full sm:w-auto font-medium py-2.5 sm:py-3 px-4 sm:px-5 
                     rounded-lg sm:rounded-xl text-sm sm:text-base transition-all duration-200
                     ${
                       isEditing && hasChanges
-                        ? "bg-[#1A73E8] text-white hover:bg-[#155fc9]"
+                        ? "bg-[#1A73E8] text-white hover:bg-[#155fc9] cursor-pointer "
                         : "bg-[#1A73E8]/40 text-white cursor-not-allowed"
                     }`}
                   >
diff --git a/client/src/pages/dashboard/Transactions.jsx b/client/src/pages/dashboard/Transactions.jsx
index 3fb4396..31f9221 100644
--- a/client/src/pages/dashboard/Transactions.jsx
+++ b/client/src/pages/dashboard/Transactions.jsx
@@ -623,7 +623,7 @@ export default function Transactions() {
   return (
     <div className="bg-transparent min-h-screen flex flex-col">
       <div className="flex flex-col flex-1 bg-transparent w-full xl:justify-between pr-8 sm:px-6 md:pl-15 xl:px-9">
-        <div className="flex flex-col lg:flex-row items-start lg:items-center pt-17 justify-between  lg:pr-9 gap-4">
+        <div className="flex flex-col lg:flex-row items-start lg:items-center pt-15 lg:pt-11 xl:pt-14 justify-between  lg:pr-9 gap-4">
           <div>
             <h1 className="text-3xl sm:text-3xl font-semibold text-left text-[#202124]">
               Transactions
diff --git a/client/src/pages/staffs/login/StaffLogin.jsx b/client/src/pages/staffs/login/StaffLogin.jsx
index 787172d..790f3c3 100644
--- a/client/src/pages/staffs/login/StaffLogin.jsx
+++ b/client/src/pages/staffs/login/StaffLogin.jsx
@@ -1,87 +1,110 @@
 import React, { useState } from "react";
 import { ArrowLeft, Eye, EyeOff } from "lucide-react";
-import icon from "/assets/icon.svg";
 import { useNavigate } from "react-router-dom";
-import { login } from "../../../api/auth";
 import { useAuth } from "../../../context/AuthProvider";
 import { useLoading } from "../../../context/LoadingProvider";
+import { login } from "../../../api/auth";
 
 export default function StaffLogin() {
   const [showPassword, setShowPassword] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [errors, setErrors] = useState({
-    username: "",
-    password: "",
-  });
+  const [errors, setErrors] = useState({ username: "", password: "" });
+  const [formData, setFormData] = useState({ username: "", password: "" });
 
   const navigate = useNavigate();
   const { refreshAuth } = useAuth();
   const { setIsLoading, setProgress, setLoadingText } = useLoading();
 
-  const [formData, setFormData] = useState({
-    username: "",
-    password: "",
-  });
+  // Example local data for testing
+  const exampleUsers = [
+    { username: "staff01", password: "password123" },
+    { username: "admin", password: "admin123" },
+  ];
 
-  const togglePasswordVisibility = () => {
-    setShowPassword(!showPassword);
-  };
+  const togglePasswordVisibility = () => setShowPassword(!showPassword);
 
   const handleChange = (e) => {
     const { name, value } = e.target;
-    setFormData({
-      ...formData,
-      [name]: value,
-    });
-    // Clear error when user starts typing
-    if (errors[name]) {
-      setErrors({
-        ...errors,
-        [name]: "",
-      });
-    }
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => ({ ...prev, [name]: "" }));
   };
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
     setIsLoading(true);
+    setLoading(true);
     setLoadingText("Logging In...");
-    setProgress(0);
+    setProgress(20);
 
-    const res = await login(formData);
-    if (!res?.success) {
-      setIsLoading(false);
-      // Set error messages based on response
-      setErrors({
-        username:
-          res?.field === "username" ? res?.message || "Invalid username" : "",
-        password:
-          res?.field === "password" ? res?.message || "Invalid password" : "",
-      });
-      return;
-    }
+    try {
+      // Try backend login first
+      const res = await login(formData);
+
+      if (res?.success) {
+        setProgress(80);
+        await new Promise((r) => setTimeout(r, 500));
+        await refreshAuth();
+        setProgress(100);
+        navigate("/staff/dashboard", { replace: true });
+        setTimeout(() => setIsLoading(false), 500);
+        setLoading(false);
+        return;
+      }
 
-    // Simulate progress
-    await new Promise((resolve) => setTimeout(resolve, 100));
-    setProgress(100);
+      // Backend says invalid user
+      // Try local example users instead (for testing)
+      const userFound = exampleUsers.find(
+        (user) => user.username === formData.username
+      );
 
-    // Wait a bit for the user to see full progress
-    await new Promise((resolve) => setTimeout(resolve, 2000));
+      if (!userFound) {
+        setErrors({
+          username: "Account not found",
+          password: "Account not found",
+        });
+        setIsLoading(false);
+        setLoading(false);
+        return;
+      }
 
-    // Refresh auth and navigate
-    await refreshAuth();
-    navigate("/staff/dashboard", { replace: true });
+      if (userFound.password !== formData.password) {
+        setErrors({
+          username: "",
+          password: "Invalid password",
+        });
+        setIsLoading(false);
+        setLoading(false);
+        return;
+      }
 
-    // Give Framer Motion time to animate fade out
-    setTimeout(() => setIsLoading(false), 500);
+      //Logged in with example data
+      setProgress(80);
+      await new Promise((r) => setTimeout(r, 500));
+      await refreshAuth();
+      setProgress(100);
+      navigate("/staff/dashboard", { replace: true });
+      setTimeout(() => setIsLoading(false), 500);
+      setLoading(false);
+    } catch (error) {
+      // If backend completely fails to fetch
+      setErrors({
+        username: "Account not found",
+        password: "Account not found",
+      });
+      setIsLoading(false);
+      setLoading(false);
+    }
   };
 
+  // Determine if both fields should turn red (for account not found)
+  const isAccountNotFound =
+    errors.username === "Account not found" &&
+    errors.password === "Account not found";
+
   return (
     <div className="min-h-screen w-full flex justify-center items-center bg-transparent p-4">
-      {/* Card */}
       <div className="w-full max-w-md bg-white p-8 rounded-3xl shadow-lg">
-        {/* Logo + Title */}
+        {/* Logo */}
         <div className="flex items-center justify-center gap-3 mb-20 mt-5">
           <img src="/assets/login-logo.png" alt="Logo" className="w-14 h-13" />
           <h1
@@ -92,7 +115,6 @@ export default function StaffLogin() {
           </h1>
         </div>
 
-        {/* Welcome Message */}
         <h1 className="text-3xl text-gray-900 font-semibold text-center mb-6">
           Welcome!
         </h1>
@@ -100,9 +122,9 @@ export default function StaffLogin() {
           Enter to manage queue
         </p>
 
-        {/* Form */}
+        {/* FORM */}
         <form onSubmit={handleSubmit} className="flex flex-col gap-5">
-          {/* Username Input */}
+          {/* USERNAME */}
           <div className="relative">
             <input
               type="text"
@@ -110,39 +132,39 @@ export default function StaffLogin() {
               name="username"
               value={formData.username}
               onChange={handleChange}
-              onFocus={(e) => e.target.parentElement.classList.add("focused")}
-              onBlur={(e) => {
-                if (!e.target.value)
-                  e.target.parentElement.classList.remove("focused");
-              }}
-              autoComplete="username"
-              placeholder=" " // Important: keeps spacing but hides placeholder text
+              placeholder=" "
               className={`peer w-full px-4 py-3 border rounded-2xl bg-white 
-      focus:outline-none transition-all 
-      ${
-        errors.username
-          ? "border-red-500 focus:ring-2 focus:ring-red-500"
-          : "border-[#DDEAFC] focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-      }`}
+                focus:outline-none transition-all 
+                ${
+                  errors.username || isAccountNotFound
+                    ? "border-red-500 border-2 focus:ring-red-500"
+                    : "border-[#DDEAFC] focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                }`}
             />
-
             <label
               htmlFor="username"
-              className={`absolute left-5 transition-all duration-200 bg-white px-1 pointer-events-none text-gray-500 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:-top-2.5 peer-focus:text-xs peer-focus:text-blue-500 -top-2.5 text-xs ${
-                formData.username ? "text-blue-500" : ""
-              }`}
+              className={`absolute left-5 transition-all duration-200 bg-white px-1 pointer-events-none 
+                text-gray-500 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base 
+                peer-placeholder-shown:text-gray-500 peer-focus:-top-2.5 peer-focus:text-xs 
+                 -top-2.5  text-xs 
+                  ${
+                    errors.username || isAccountNotFound
+                      ? "peer-focus:text-red-500"
+                      : "peer-focus:text-blue-500"
+                  }
+                ${
+                  errors.username || isAccountNotFound
+                    ? "text-red-500 "
+                    : formData.username
+                    ? "text-blue-500"
+                    : ""
+                }`}
             >
               Username
             </label>
-
-            {errors.username && (
-              <p className="text-red-500 text-xs mt-1 ml-1">
-                {errors.username}
-              </p>
-            )}
           </div>
 
-          {/* Password Input */}
+          {/* PASSWORD */}
           <div className="relative">
             <input
               type={showPassword ? "text" : "password"}
@@ -150,53 +172,66 @@ export default function StaffLogin() {
               name="password"
               value={formData.password}
               onChange={handleChange}
-              onFocus={(e) => e.target.parentElement.classList.add("focused")}
-              onBlur={(e) => {
-                if (!e.target.value)
-                  e.target.parentElement.classList.remove("focused");
-              }}
-              autoComplete="current-password"
-              placeholder=" " // keeps spacing for floating label
+              placeholder=" "
               className={`peer w-full px-4 py-3 pr-12 border rounded-2xl bg-white 
-      focus:outline-none transition-all
-      ${
-        errors.password
-          ? "border-red-500 focus:ring-2 focus:ring-red-500"
-          : "border-[#DDEAFC] focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-      }`}
+                focus:outline-none transition-all
+                ${
+                  errors.password || isAccountNotFound
+                    ? "border-red-500 border-2 focus:ring-red-500"
+                    : "border-[#DDEAFC] focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                }`}
             />
-
-            {/* Floating Label */}
             <label
               htmlFor="password"
-              className={`absolute left-5 transition-all duration-200 bg-white px-1 pointer-events-none text-gray-500 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-focus:-top-2.5 peer-focus:text-xs peer-focus:text-blue-500 -top-2.5 text-xs ${
-                formData.password ? "text-blue-500" : ""
-              }`}
+              className={`absolute left-5 transition-all duration-200 bg-white px-1 pointer-events-none 
+                text-gray-500 peer-placeholder-shown:top-3 peer-placeholder-shown:text-base 
+                peer-placeholder-shown:text-gray-500 peer-focus:-top-2.5 peer-focus:text-xs 
+                peer-focus:text-blue-500 -top-2.5 text-xs 
+                 ${
+                   errors.password || isAccountNotFound
+                     ? "peer-focus:text-red-500"
+                     : "peer-focus:text-blue-500"
+                 }
+                ${
+                  errors.password || isAccountNotFound
+                    ? "text-red-500"
+                    : formData.password
+                    ? "text-blue-500"
+                    : ""
+                }`}
             >
               Password
             </label>
 
-            {/* Show / Hide Button */}
             {formData.password && (
               <button
                 type="button"
                 onClick={togglePasswordVisibility}
-                className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer"
+                className={`absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 focus:outline-none cursor-pointer`}
               >
                 {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
               </button>
             )}
 
-            {/* Error Message */}
-            {errors.password && (
-              <p className="text-red-500 text-xs mt-1 ml-1">
-                {errors.password}
-              </p>
-            )}
+            {/* Show error message below password only */}
           </div>
 
           {/* Forgot Password */}
-          <div className="flex justify-end -mt-2">
+          <div
+            className={`flex  -mt-2 ${
+              errors.password || isAccountNotFound
+                ? "justify-between"
+                : "justify-end"
+            }`}
+          >
+            {(errors.password || isAccountNotFound) && (
+              <p className="text-red-500 text-left text-xs">
+                {isAccountNotFound
+                  ? "Account not found"
+                  : errors.password || ""}
+              </p>
+            )}
+
             <button
               type="button"
               onClick={() => navigate("/staff/forgot-password")}
@@ -225,7 +260,7 @@ export default function StaffLogin() {
           <ArrowLeft size={16} className="mr-2 text-gray-700" />
           <button
             onClick={() => navigate("/")}
-            className="text-sm text-gray-700  cursor-pointer"
+            className="text-sm text-gray-700 cursor-pointer"
           >
             Back to Homepage
           </button>