diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/app/favicon.ico and /dev/null differ
diff --git a/components/Members.tsx b/components/Members.tsx
index 8e3a215..519595f 100644
--- a/components/Members.tsx
+++ b/components/Members.tsx
@@ -5,6 +5,7 @@ import Card from '@/components/ui/Card';
 import CollapsibleSection from '@/components/ui/CollapsibleSection';
 import { db } from "@/Firebase";
 import { collection, query, where, getDocs } from "firebase/firestore";
+import ClipLoader from "react-spinners/ClipLoader";
 
 interface Member {
     id: string;
@@ -17,9 +18,9 @@ interface Member {
 const headings = ["Alumni", "Fourth Year", "Third Year", "Second Year", "First Year"];
 
 export default function Members() {
-    // Set default open index to the index of "Alumni"
     const [openIndex, setOpenIndex] = useState<number>(headings.indexOf("Alumni"));
     const [data, setData] = useState<{ [key: string]: Member[] }>({});
+    const [loading, setLoading] = useState<boolean>(true);
 
     const handleToggle = (index: number) => {
         setOpenIndex(openIndex === index ? -1 : index);
@@ -27,6 +28,7 @@ export default function Members() {
 
     useEffect(() => {
         const fetchData = async () => {
+            setLoading(true);
             try {
                 const fetchedData: { [key: string]: Member[] } = {};
 
@@ -35,13 +37,11 @@ export default function Members() {
                     const q = query(membersCollection, where("year", "==", heading));
                     const querySnapshot = await getDocs(q);
 
-                    // Collect all documents
                     const allMembers = querySnapshot.docs.map(doc => ({
                         id: doc.id,
                         ...(doc.data() as Omit<Member, 'id'>)
                     })) as Member[];
 
-                    // Remove duplicates based on name, domain, and year
                     const uniqueMembers = Array.from(
                         new Map(
                             allMembers.map(member => [
@@ -51,7 +51,6 @@ export default function Members() {
                         ).values()
                     );
 
-                    // Sort members alphabetically by name
                     const sortedMembers = uniqueMembers.sort((a, b) => a.name.localeCompare(b.name));
 
                     fetchedData[heading] = sortedMembers;
@@ -60,39 +59,52 @@ export default function Members() {
                 setData(fetchedData);
             } catch (error) {
                 console.error("Error fetching data: ", error);
+            } finally {
+                setLoading(false);
             }
         };
         fetchData();
     }, []);
 
     return (
-        <div className="flex flex-col justify-center items-center w-full space-y-4 mt-20 pb-8 bg-black">
-            <h1 className="text-center font-bold text-4xl text-white"></h1>
+        <div className="flex flex-col justify-center items-center w-full space-y-4 mt-24 bg-black">
+            <h1 className="text-center font-bold text-4xl text-white">PB Members</h1>
             <div className="w-full max-w-6xl px-2 ">
-                <div className="space-y-2">
-                    {headings.map((heading, index) => (
-                        <CollapsibleSection
-                            key={index}
-                            heading={heading}
-                            content={
-                                <div className='flex justify-center'>
-                                    <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16">
-                                        {data[heading]?.map((profile, cardIndex) => (
-                                            <Card
-                                                key={cardIndex}
-                                                name={profile.name}
-                                                domain={profile.domain}
-                                                company={profile.company || ""}
-                                            />
-                                        ))}
+                {loading ? (
+                    <div className="flex justify-center py-10">
+                        <ClipLoader color={"#00C853"} loading={loading} size={50} />
+                    </div>
+                ) : (
+                    <div className="space-y-2">
+                        {headings.map((heading, index) => (
+                            <CollapsibleSection
+                                key={index}
+                                heading={heading}
+                                content={
+                                    <div className='flex justify-center'>
+                                        {heading === "First Year" && (
+                                            <p className="text-white lg:text-2xl text-xl mb-4">
+                                                Recruitment incoming soon
+                                            </p>
+                                        )}
+                                        <div className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16">
+                                            {data[heading]?.map((profile, cardIndex) => (
+                                                <Card
+                                                    key={cardIndex}
+                                                    name={profile.name}
+                                                    domain={profile.domain}
+                                                    company={profile.company || ""}
+                                                />
+                                            ))}
+                                        </div>
                                     </div>
-                                </div>
-                            }
-                            isOpen={openIndex === index}
-                            onToggle={() => handleToggle(index)}
-                        />
-                    ))}
-                </div>
+                                }
+                                isOpen={openIndex === index}
+                                onToggle={() => handleToggle(index)}
+                            />
+                        ))}
+                    </div>
+                )}
             </div>
         </div>
     );
diff --git a/components/ui/CollapsibleSection.tsx b/components/ui/CollapsibleSection.tsx
index e5f0c8e..037bcd5 100644
--- a/components/ui/CollapsibleSection.tsx
+++ b/components/ui/CollapsibleSection.tsx
@@ -16,10 +16,22 @@ const CollapsibleSection = forwardRef<HTMLDivElement, CollapsibleSectionProps>(
 
         useEffect(() => {
             if (isOpen && localRef.current) {
-                localRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+                const offset = 200; // Adjust this value to match the height of your navbar
+                const bodyRect = document.body.getBoundingClientRect().top;
+                const elementRect = localRef.current.getBoundingClientRect().top;
+                const elementPosition = elementRect - bodyRect;
+                const offsetPosition = elementPosition - offset;
+
+                window.scrollTo({
+                    top: offsetPosition,
+                    behavior: 'smooth',
+                });
+
             }
         }, [isOpen]);
 
+
         return (
             <div className="border-b border-gray-700" ref={localRef}>
                 <div
@@ -30,13 +42,12 @@ const CollapsibleSection = forwardRef<HTMLDivElement, CollapsibleSectionProps>(
                     tabIndex={-1}
                     className="flex items-center justify-between p-4 cursor-pointer bg-black text-white"
                 >
-                    <h2 className={` ${isOpen ? 'text-4xl mt-24 font-bold' : 'text-xl'} text-[#00C853]
-                    `}>
+                    <h2 className={`${isOpen ? 'text-4xl font-bold' : 'text-xl'} text-[#00C853]`}>
                         {heading}
                     </h2>
 
                     {isOpen ? (
-                        <FaChevronUp className="h-5 w-5 text-white mt-24" />
+                        <FaChevronUp className="h-5 w-5 text-white" />
                     ) : (
                         <FaChevronDown className="h-5 w-5 text-white" />
                     )}
diff --git a/components/ui/mobile-menu.tsx b/components/ui/mobile-menu.tsx
index ffb6e5b..5a91cbe 100644
--- a/components/ui/mobile-menu.tsx
+++ b/components/ui/mobile-menu.tsx
@@ -72,6 +72,9 @@ export default function MobileMenu() {
             <li>
               <Link href="/leads" className="flex font-medium w-full text-gray-300 hover:text-white py-2 justify-center" onClick={() => setMobileNavOpen(false)}>Leads</Link>
             </li>
+            <li>
+              <Link href="/members" className="flex font-medium w-full text-gray-300 hover:text-white py-2 justify-center" onClick={() => setMobileNavOpen(false)}>Members</Link>
+            </li>
             <li>
               <Link href="/achievements" className="flex font-medium w-full text-gray-300 hover:text-white py-2 justify-center" onClick={() => setMobileNavOpen(false)}>Achievements</Link>
             </li>
diff --git a/package-lock.json b/package-lock.json
index 5e088da..04aee73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "react-dom": "18.2.0",
         "react-hook-form": "^7.52.2",
         "react-icons": "^5.3.0",
+        "react-spinners": "^0.14.1",
         "react-spring": "^9.7.4",
         "tailwind-merge": "^2.4.0",
         "tailwindcss-animate": "^1.0.7",
@@ -11923,6 +11924,15 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.14.1.tgz",
+      "integrity": "sha512-2Izq+qgQ08HTofCVEdcAQCXFEYfqTDdfeDQJeo/HHQiQJD4imOicNLhkfN2eh1NYEWVOX4D9ok2lhuDB0z3Aag==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-spring": {
       "version": "9.7.4",
       "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.4.tgz",
diff --git a/package.json b/package.json
index cc610ef..381d8c7 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "react-hook-form": "^7.52.2",
 
     "react-icons": "^5.3.0",
-
+    "react-spinners": "^0.14.1",
     "react-spring": "^9.7.4",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",