diff --git a/src/auth/Logout.tsx b/src/auth/Logout.tsx
index 08b71716..62e5440f 100644
--- a/src/auth/Logout.tsx
+++ b/src/auth/Logout.tsx
@@ -14,11 +14,7 @@ export default function LogoutRedirection() {
                 const response = await fetch(
                     `${process.env.REACT_APP_BACKEND_SERVER}/logout`,
                     {
-                        method: "GET",
-                        credentials: "include", // to send cookies or session data
-                        headers: {
-                            Authorization: `Bearer ${auth.token}`,
-                        },
+                        credentials: "include",
                     }
                 );
                 if (response.ok) {
@@ -32,7 +28,7 @@ export default function LogoutRedirection() {
             }
         }
         logoutUser();
-    }, [logout, auth.token]);
+    }, [logout]);
 
     return null; // Since this component doesn't need to render anything
 };
\ No newline at end of file
diff --git a/src/auth/Token.tsx b/src/auth/Token.tsx
index 411cf617..20b769c5 100644
--- a/src/auth/Token.tsx
+++ b/src/auth/Token.tsx
@@ -3,7 +3,11 @@ import { useEffect } from "react";
 
 export default function Token() {
 
-    const { login } = useAuth();
+    const { auth, login } = useAuth();
+
+    if (auth.isAuthenticated) {
+        window.location.href = "/";
+    }
 
     const urlParams = new URLSearchParams(window.location.search);
     const code = urlParams.get("code");
@@ -16,15 +20,18 @@ export default function Token() {
                     "Content-Type": "application/json",
                 },
                 body: JSON.stringify({ code }),
+                credentials: "include",
             })
                 .then((response) => response.json())
                 .then((data) => {
-                    const token = data.token;
-                    if (token) {
-                        login(token);
-                        window.location.href = "/";
-                        return null;
-                    }
+                    const registered = data.registered;
+                    console.log("registered", registered);
+                    login();
+                    // if (registered) {
+                    window.location.href = "/";
+                    return null;
+                    // }
+                    // TODO: Redirect to registration page
                 })
                 .catch((error) => console.error("Error fetching token:", error));
         }
@@ -34,4 +41,4 @@ export default function Token() {
     }, [code, login]);
 
     return null;
-}
\ No newline at end of file
+}
diff --git a/src/context/AuthContext.tsx b/src/context/AuthContext.tsx
index 83c6660a..d9402572 100644
--- a/src/context/AuthContext.tsx
+++ b/src/context/AuthContext.tsx
@@ -1,53 +1,62 @@
-import React, { createContext, useState, useContext, useEffect } from 'react';
-import { ReactNode } from 'react';
+import React, { createContext, useState, useContext } from 'react';
+import { ReactNode, useEffect } from 'react';
 
 
 const AuthContext = createContext<{
-    auth: { isAuthenticated: boolean; token: string | null };
-    login: (token: string) => void;
+    auth: { isAuthenticated: boolean };
+    login: () => void;
     logout: () => void;
-    loadToken: () => void;
 }>({
-    auth: { isAuthenticated: false, token: null },
+    auth: { isAuthenticated: false },
     login: () => { },
     logout: () => { },
-    loadToken: () => { }
 });
 interface AuthProviderProps {
     children: ReactNode;
 }
 
 export const AuthProvider = ({ children }: AuthProviderProps) => {
-    const [auth, setAuth] = useState<{ isAuthenticated: boolean; token: string | null }>({
+    const [auth, setAuth] = useState<{ isAuthenticated: boolean }>({
         isAuthenticated: false,
-        token: null,
     });
 
-    const login = (token: string) => {
-        setAuth({ isAuthenticated: true, token });
-        // Save token to localStorage for persistence
-        localStorage.setItem('jwt', token);
-    };
-
-    const logout = () => {
-        setAuth({ isAuthenticated: false, token: null });
-        // Clear token from localStorage
-        localStorage.removeItem('jwt');
-    };
-
-    const loadToken = () => {
-        const savedToken = localStorage.getItem('jwt');
-        if (savedToken) {
-            setAuth({ isAuthenticated: true, token: savedToken });
+    const checkAuth = async () => {
+        try {
+            const response = await fetch(`${process.env.REACT_APP_BACKEND_SERVER}/authcheck`, {
+                credentials: "include",
+            });
+            if (response.ok) {
+                setAuth({ isAuthenticated: true });
+            } else {
+                const refreshResponse = await fetch(`${process.env.REACT_APP_BACKEND_SERVER}/token/refresh`, {
+                    credentials: "include",
+                });
+                if (refreshResponse.ok) {
+                    setAuth({ isAuthenticated: true });
+                } else {
+                    setAuth({ isAuthenticated: false });
+                }
+            }
+        } catch (error) {
+            console.error("Auth check failed:", error);
+            setAuth({ isAuthenticated: false });
         }
     };
 
     useEffect(() => {
-        loadToken();
+        checkAuth(); // Run this on mount to persist session state
     }, []);
 
+    const login = () => {
+        setAuth({ isAuthenticated: true });
+    };
+
+    const logout = () => {
+        setAuth({ isAuthenticated: false });
+    };
+
     return (
-        <AuthContext.Provider value={{ auth, login, logout, loadToken }}>
+        <AuthContext.Provider value={{ auth, login, logout }}>
             {children}
         </AuthContext.Provider>
     );
diff --git a/src/shared/components/Profile/ProfileComponents.tsx b/src/shared/components/Profile/ProfileComponents.tsx
index d09c1e1a..a346f4bb 100644
--- a/src/shared/components/Profile/ProfileComponents.tsx
+++ b/src/shared/components/Profile/ProfileComponents.tsx
@@ -4,14 +4,7 @@ import ProfileDescription from "./ProfileDescription.tsx";
 import ProfileOpportunities from "./ProfileOpportunities.tsx";
 import SEO from "..//SEO.tsx";
 import Breadcrumb from "../UIElements/Breadcrumb.tsx";
-
-interface Profile {
-    name: string;
-    image: string;
-    department: string;
-    description: string;
-    website?: string;
-}
+import { Profile } from "../../../types/profile.ts";
 
 const ProfileComponents = ({ profile, id, staff }: { profile: Profile, id: string, staff: boolean }) => {
     return (
@@ -36,7 +29,6 @@ const ProfileComponents = ({ profile, id, staff }: { profile: Profile, id: strin
                 <div className="flex gap-5">
                     <ProfileAvatar name={profile.name} image={profile.image} />
                     <ProfileDescription
-                        website={profile.website}
                         {...profile}
                     />
                 </div>
diff --git a/src/shared/components/Profile/ProfileDescription.tsx b/src/shared/components/Profile/ProfileDescription.tsx
index fa25d1ad..5f408872 100644
--- a/src/shared/components/Profile/ProfileDescription.tsx
+++ b/src/shared/components/Profile/ProfileDescription.tsx
@@ -1,12 +1,15 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
+import { Profile } from "../../../types/profile.ts";
 
-const ProfileDescription = ({ name, department, description, website }) => {
+export default function ProfileDescription({
+  name, department, description, website, pronouns
+}: Profile) {
   return (
     <div className="font-light flex2 gap-2">
       <h2 className="font-extrabold text-5xl">{name}</h2>
       <h5 className="text-gray-700">{department}</h5>
+      {pronouns && <h5 className="text-gray-700">{pronouns}</h5>}
       <p>{description}</p>
       {website && website.length && (
         <Link to={website} target="_blank">
@@ -15,13 +18,4 @@ const ProfileDescription = ({ name, department, description, website }) => {
       )}
     </div>
   );
-};
-
-ProfileDescription.propTypes = {
-  name: PropTypes.string.isRequired,
-  department: PropTypes.string,
-  description: PropTypes.string.isRequired,
-  website: PropTypes.string,
-};
-
-export default ProfileDescription;
+};
\ No newline at end of file
diff --git a/src/shared/components/Profile/ProfileOpportunities.tsx b/src/shared/components/Profile/ProfileOpportunities.tsx
index cc659444..881bca2b 100644
--- a/src/shared/components/Profile/ProfileOpportunities.tsx
+++ b/src/shared/components/Profile/ProfileOpportunities.tsx
@@ -1,19 +1,15 @@
 import React from "react";
 import LargeTextCard from "../UIElements/LargeTextCard.tsx";
 import { useState, useEffect } from "react";
-import { useAuth } from "../../../context/AuthContext.tsx";
 
 export default function ProfileOpportunities({ id, staff }: { id: string, staff: boolean }) {
-  const { auth } = useAuth();
   const [opportunities, setOpportunities] = useState<Array<{ id: string; title: string; due: string; pay: string; credits: string }> | null | "no response">(null);
 
   useEffect(() => {
     async function setData() {
       const response = await fetch(
         `${process.env.REACT_APP_BACKEND_SERVER}/${staff ? "staff" : "profile"}/opportunities/${id}`, {
-        headers: {
-          Authorization: `Bearer ${auth.token}`,
-        },
+        credentials: "include",
       }
       );
 
@@ -26,7 +22,7 @@ export default function ProfileOpportunities({ id, staff }: { id: string, staff:
     }
 
     setData();
-  }, [auth.token, id, staff]);
+  }, [id, staff]);
 
   const opportunityList = (
     <div className="flex gap-2 flex-wrap">
diff --git a/src/shared/pages/404.tsx b/src/shared/pages/404.tsx
index 45ad2e0e..fda689c2 100644
--- a/src/shared/pages/404.tsx
+++ b/src/shared/pages/404.tsx
@@ -7,7 +7,7 @@ const PageNotFound = () => {
     <>
       <SEO title="404 Not Found" description="Not found page" />
       <p className="text-4xl text-center pt-20">Whoops!</p>
-      <p className="text-xl text-center pt-8">It looks like that page couldn't be reached. Please click the link below to return to LabConnect or try refreshing the page</p>
+      <p className="text-xl text-center pt-8">It looks like that page couldn&apos;t be reached. Please click the link below to return to LabConnect or try refreshing the page</p>
       <section className="pt-8 flex justify-center">
         <Link to="/" className="btn btn-primary w-1/5 text-gray-200 bg-blue-600 hover:bg-blue-900 focus:bg-blue-900">Home</Link>
       </section>
diff --git a/src/shared/pages/LoginRedirect.tsx b/src/shared/pages/LoginRedirect.tsx
deleted file mode 100644
index 29e33a83..00000000
--- a/src/shared/pages/LoginRedirect.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import SEO from "../components/SEO.tsx";
-import { Link } from "react-router-dom";
-const LoginRedirect = () => {
-  return (
-    <>
-        <p className="text-4xl text-center pt-20">Whoops!</p>
-        <p className="text-xl text-center pt-8">It looks like you're not logged in. Click the button below and log in to see this page</p>
-        <section className="pt-8 flex justify-center">
-          <Link to="/login" className="btn btn-primary w-1/5">Log In</Link>
-        </section>
-    </>
-  );
-};
-export default LoginRedirect;
\ No newline at end of file
diff --git a/src/shared/pages/Profile.tsx b/src/shared/pages/Profile.tsx
index 5859efaf..5b91fc15 100644
--- a/src/shared/pages/Profile.tsx
+++ b/src/shared/pages/Profile.tsx
@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useState } from "react";
 import ProfileComponents from "../components/Profile/ProfileComponents.tsx";
 import { useAuth } from "../../context/AuthContext.tsx";
+import { Profile } from "../../types/profile.ts";
 // import EditProfile from "./EditProfile";
 
 export default function ProfilePage() {
@@ -12,14 +13,6 @@ export default function ProfilePage() {
   }
 
   // const [editMode, setEditMode] = useState(false);
-  interface Profile {
-    id: string;
-    name: string;
-    image: string;
-    department: string;
-    description: string;
-    website?: string;
-  }
 
   const [profile, setProfile] = useState<null | Profile | boolean>(null);
 
@@ -31,9 +24,7 @@ export default function ProfilePage() {
     const fetchProfile = async () => {
       const response = await fetch(
         `${process.env.REACT_APP_BACKEND_SERVER}/profile`, {
-        headers: {
-          Authorization: `Bearer ${auth.token}`,
-        },
+        credentials: "include",
       }
       );
 
@@ -48,7 +39,7 @@ export default function ProfilePage() {
       }
     };
     fetchProfile();
-  }, [auth.token]);
+  }, []);
 
   // const editButton = (
   //   <button className="btn btn-primary my-3" onClick={changeEditMode}>
diff --git a/src/staff/components/CreationForms.tsx b/src/staff/components/CreationForms.tsx
index 3bfbcf78..1c516235 100644
--- a/src/staff/components/CreationForms.tsx
+++ b/src/staff/components/CreationForms.tsx
@@ -4,7 +4,6 @@ import { useEffect } from "react";
 import CheckBox from "./Checkbox.tsx";
 import Input from "./Input";
 import { useParams } from "react-router";
-import { useAuth } from "../../context/AuthContext.tsx";
 import { Locations } from "../../shared/data/locations.ts";
 
 
@@ -13,7 +12,6 @@ interface CreationFormsProps {
 }
 
 export default function CreationForms({ edit }: CreationFormsProps) {
-  const { auth } = useAuth();
   const { postID } = useParams();
   const [loading, setLoading] = useState<string | boolean>(false);
   const [compensationType, setCompensationType] = useState("Any"); // Manage the state for "For Pay" or "For Credit"
@@ -69,10 +67,7 @@ export default function CreationForms({ edit }: CreationFormsProps) {
     if (edit) {
       fetch(`${process.env.REACT_APP_BACKEND_SERVER}/editOpportunity/${postID}`, {
         method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${auth.token}`,
-        },
+        credentials: "include",
         body: JSON.stringify({ ...data }),
       }).then((response) => {
         if (response.ok) {
@@ -85,10 +80,7 @@ export default function CreationForms({ edit }: CreationFormsProps) {
     } else {
       fetch(`${process.env.REACT_APP_BACKEND_SERVER}/createOpportunity`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${auth.token}`,
-        },
+        credentials: "include",
         body: JSON.stringify({ ...data }),
       }).then((response) => {
         if (response.ok) {
@@ -108,9 +100,7 @@ export default function CreationForms({ edit }: CreationFormsProps) {
     async function fetchEditData() {
       const response = await fetch(
         `${process.env.REACT_APP_BACKEND_SERVER}/editOpportunity/${postID}`, {
-        headers: {
-          Authorization: `Bearer ${auth.token}`,
-        },
+        credentials: "include",
       }
       );
       if (response.ok) {
@@ -141,7 +131,7 @@ export default function CreationForms({ edit }: CreationFormsProps) {
     } else {
       setLoading(false);
     }
-  }, [edit, auth.token, postID, reset]);
+  }, [edit, postID, reset]);
 
   return loading === false && years != null ? (
     <form
@@ -240,27 +230,27 @@ export default function CreationForms({ edit }: CreationFormsProps) {
         </div>
 
         {/* Conditionally Render Pay Input or Credit Checkboxes */}
-          {compensationType === "For Pay" || compensationType === "Any" ? (
-            <div className="w-1/3 pr-3 pl-3">
-              <div className="w-4/5">
-                <Input
-                  errors={errors}
-                  label="Hourly Pay (min. 0)"
-                  name={"hourlyPay"}
-                  errorMessage={"Hourly pay must be at least 0"}
-                  formHook={{
-                    ...register("hourlyPay", {
-                      required: compensationType === "For Pay", // Hourly pay required only if "For Pay"
-                      min: 0,
-                    }),
-                  }}
-                  type="number"
-                  options={[]}
-                  placeHolder="Enter hourly pay"
-                />
-              </div>
+        {compensationType === "For Pay" || compensationType === "Any" ? (
+          <div className="w-1/3 pr-3 pl-3">
+            <div className="w-4/5">
+              <Input
+                errors={errors}
+                label="Hourly Pay (min. 0)"
+                name={"hourlyPay"}
+                errorMessage={"Hourly pay must be at least 0"}
+                formHook={{
+                  ...register("hourlyPay", {
+                    required: compensationType === "For Pay", // Hourly pay required only if "For Pay"
+                    min: 0,
+                  }),
+                }}
+                type="number"
+                options={[]}
+                placeHolder="Enter hourly pay"
+              />
             </div>
-          ) : null}
+          </div>
+        ) : null}
 
         {compensationType === "For Credit" || compensationType === "Any" ? (
           <div className="w-1/3 pl-3">
diff --git a/src/staff/components/DepartmentHeading.tsx b/src/staff/components/DepartmentHeading.tsx
index 47b17969..993fd14b 100644
--- a/src/staff/components/DepartmentHeading.tsx
+++ b/src/staff/components/DepartmentHeading.tsx
@@ -1,8 +1,14 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 
-const DepartmentHeading = ({ name, description, image, website }) => {
+interface DepartmentHeadingProps {
+  name: string;
+  description: string;
+  image: string;
+  website?: string;
+}
+
+export default function DepartmentHeading({ name, description, image, website }: DepartmentHeadingProps) {
   return (
     <div className="flex justify-center">
       <div className="flex2 lg:flex-row gap-5">
@@ -11,18 +17,10 @@ const DepartmentHeading = ({ name, description, image, website }) => {
         </figure>
         <h1>{name}</h1>
         <p>{description}</p>
-        <Link to={website} target="_blank">
+        {website && <Link to={website} target="_blank">
           {website}
-        </Link>
+        </Link>}
       </div>
     </div>
   );
 };
-
-DepartmentHeading.propTypes = {
-  name: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  image: PropTypes.string.isRequired,
-  website: PropTypes.string,
-};
-export default DepartmentHeading;
diff --git a/src/staff/components/DepartmentItems.tsx b/src/staff/components/DepartmentItems.tsx
index 02b07f54..e67c4311 100644
--- a/src/staff/components/DepartmentItems.tsx
+++ b/src/staff/components/DepartmentItems.tsx
@@ -22,7 +22,6 @@ const DepartmentItems = ({ items }) => {
 DepartmentItems.propTypes = {
   items: PropTypes.arrayOf(
     PropTypes.shape({
-      school_id: PropTypes.string.isRequired,
       department_id: PropTypes.string.isRequired,
       title: PropTypes.string.isRequired,
       image: PropTypes.string.isRequired,
diff --git a/src/staff/pages/Department.tsx b/src/staff/pages/Department.tsx
index 9f645550..33f3ce82 100644
--- a/src/staff/pages/Department.tsx
+++ b/src/staff/pages/Department.tsx
@@ -14,15 +14,13 @@ export default function Department() {
   }
 
   const { department } = useParams();
-  const [departmentstate, setDepartmentstate] = useState<false | "not found" | { name: string; description: string; image: string; staff: { id: string; name: string; role: string; image: string; }[] }>(false);
+  const [departmentstate, setDepartmentstate] = useState<false | "not found" | { name: string; description: string; image: string; website?: string; staff: { id: string; name: string; role: string; image: string }[] }>(false);
 
   useEffect(() => {
     const fetchDepartment = async () => {
       const response = await fetch(
         `${process.env.REACT_APP_BACKEND_SERVER}/departments/${department}`, {
-        headers: {
-          Authorization: `Bearer ${auth.token}`,
-        },
+        credentials: "include",
       }
       );
 
@@ -33,7 +31,7 @@ export default function Department() {
         // Ensure each staff member has an image property
         const updatedData = {
           ...data,
-          staff: data.staff.map((member: { id: string; name: string; role: string; image?: string }) => ({
+          staff: data.staff.map((member: { id: string; name: string; role: string; image?: string; website?: string }) => ({
             ...member,
             image: member.image || "default-image-url" // Provide a default image URL if none exists
           }))
@@ -42,7 +40,7 @@ export default function Department() {
       }
     };
     fetchDepartment();
-  }, [auth.token, department]);
+  }, [department]);
 
   const departmentComponents = (
     <>
@@ -52,6 +50,7 @@ export default function Department() {
             name={departmentstate.name}
             description={departmentstate.description}
             image={departmentstate.image}
+            website={departmentstate.website}
           />
           <DepartmentStaff staff={departmentstate.staff} />
         </>
diff --git a/src/staff/pages/Departments.tsx b/src/staff/pages/Departments.tsx
index 8235e638..1884229a 100644
--- a/src/staff/pages/Departments.tsx
+++ b/src/staff/pages/Departments.tsx
@@ -6,12 +6,13 @@ import { useAuth } from "../../context/AuthContext.tsx";
 
 export default function Departments() {
   const { auth } = useAuth();
+
   if (!auth.isAuthenticated) {
     window.location.href = "/login";
   }
 
   const [departments, setDepartments] = useState<
-    { school_id: string; department_id: string; title: string; image: string }[] | string | null
+    { department_id: string; title: string; image: string }[] | string | null
   >(null);
 
   useEffect(() => {
@@ -19,9 +20,7 @@ export default function Departments() {
       try {
         const response = await fetch(
           `${process.env.REACT_APP_BACKEND_SERVER}/departments`, {
-          headers: {
-            Authorization: `Bearer ${auth.token}`,
-          },
+          credentials: "include",
         }
         );
 
@@ -36,7 +35,7 @@ export default function Departments() {
       }
     };
     fetchDepartments();
-  }, [auth.token]);
+  }, []);
 
   const departmentComponents = (
     <section className="flex2 gap-3">
diff --git a/src/staff/pages/Staff.tsx b/src/staff/pages/Staff.tsx
index 5f7abf12..3e0d749d 100644
--- a/src/staff/pages/Staff.tsx
+++ b/src/staff/pages/Staff.tsx
@@ -6,6 +6,10 @@ import { useAuth } from "../../context/AuthContext.tsx";
 export default function StaffPage() {
   const { auth } = useAuth();
 
+  if (!auth.isAuthenticated) {
+    window.location.href = "/login";
+  }
+
   const { staffId } = useParams();
   const [profile, setProfile] = useState<null | boolean>(null);
 
@@ -13,9 +17,7 @@ export default function StaffPage() {
     const fetchProfile = async () => {
       const response = await fetch(
         `${process.env.REACT_APP_BACKEND_SERVER}/staff/${staffId}`, {
-        headers: {
-          Authorization: `Bearer ${auth.token}`,
-        },
+        credentials: "include",
       }
       );
 
@@ -32,9 +34,7 @@ export default function StaffPage() {
       }
     };
 
-    if (!auth.isAuthenticated) {
-      window.location.href = "/login";
-    } else if (!staffId) {
+    if (!staffId) {
       setProfile(false);
     } else {
       fetchProfile();
@@ -42,7 +42,7 @@ export default function StaffPage() {
     const checkProfile = (data: { name: string; image: string; department: string; description: string }) => {
       return data.name && data.image && data.department && data.description;
     };
-  }, [auth.token, staffId, auth.isAuthenticated]);
+  }, [staffId]);
 
   return (
     <>
diff --git a/src/types/profile.ts b/src/types/profile.ts
new file mode 100644
index 00000000..8199a6a3
--- /dev/null
+++ b/src/types/profile.ts
@@ -0,0 +1,9 @@
+export type Profile = {
+    id: string;
+    name: string;
+    image: string;
+    department: string;
+    description: string;
+    website?: string;
+    pronouns?: string;
+}
\ No newline at end of file