diff --git a/backend/src/routes/auth.ts b/backend/src/routes/auth.ts
index 1af438e..9002317 100644
--- a/backend/src/routes/auth.ts
+++ b/backend/src/routes/auth.ts
@@ -63,7 +63,7 @@ router.post("/login", validateAuth, async (req: Request, res: Response) => {
     if (!user) {
       res.status(401).json({
         title: "Wrong Email or Password",
-        message: "The credentials entered are invalid.........",
+        message: "The credentials entered are invalid.",
       });
       return;
     }
diff --git a/frontend/src/components/PreviewProfile.tsx b/frontend/src/components/PreviewProfile.tsx
index 9e133d1..a4a3ffd 100644
--- a/frontend/src/components/PreviewProfile.tsx
+++ b/frontend/src/components/PreviewProfile.tsx
@@ -90,7 +90,7 @@ const PreviewProfile = ({
             </div>
           </div>
         </div>
-        <div className="flex w-full flex-row-reverse ">
+        <div className="flex w-full flex-row-reverse">
           <button
             onClick={handleSendNotification}
             className="p-2 px-4 w-2/6 ml-4 lg:text-md md:text-xs sm:text-sm xs:text-xs text-2xs bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold">
diff --git a/frontend/src/components/RegistrationListCard.tsx b/frontend/src/components/RegistrationListCard.tsx
index d1c4726..32f081c 100644
--- a/frontend/src/components/RegistrationListCard.tsx
+++ b/frontend/src/components/RegistrationListCard.tsx
@@ -7,18 +7,23 @@ const RegistrationListCard = ({
 }: Registration) => {
   return (
     <div
-      className="border-b-2 flex-col flex-2 border-t-transparent w-full border-b-inputfield space-y-[20px]"
-      id="row">
-      <div className="flex p-2 items-right overflow-y-auto">
-        <div className="flex-2 min-w-[70%]">
-          <h1 className="text-white font-syke-light text-md">Name</h1>
-          <h1 className="text-textgreen font-syke-medium text-xl">
-            {first_name} {last_name} 
+      className="border-b-2 flex-col flex border-t-transparent w-full border-b-inputfield"
+      id="row"
+    >
+      <div className="flex p-2 items-right w-full space-x-5 overflow-y-auto">
+        <div className="flex-2 w-1/2">
+          <h1 className="text-white font-syke-light md:text-md xs:text-sm text-xs">
+            Name
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-lg xs:text-lg text-md">
+            {first_name} {last_name}
           </h1>
         </div>
-        <div className="flex-2 text-left">
-          <h1 className="text-white font-syke-light text-md">Driver Type</h1>
-          <h1 className="text-textgreen font-syke-medium text-xl">
+        <div className="flex-2 text-left w-1/2">
+          <h1 className="text-white font-syke-light md:text-md xs:text-sm text-xs">
+            Driver Type
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-lg xs:text-lg text-md">
             {driver_type}
           </h1>
         </div>
diff --git a/frontend/src/components/SearchAndSort.tsx b/frontend/src/components/SearchAndSort.tsx
index a86f331..99b52f2 100644
--- a/frontend/src/components/SearchAndSort.tsx
+++ b/frontend/src/components/SearchAndSort.tsx
@@ -1,9 +1,11 @@
 import React, { SetStateAction, useState } from "react";
-import { DriverWithVandC } from "../types/datatypes";
+import { DriverWithVandC, Registration } from "../types/datatypes";
 
 interface SearchAndSortProps {
-  entries: DriverWithVandC[];
-  setFilteredEntries: React.Dispatch<SetStateAction<DriverWithVandC[]>>;
+  entries?: DriverWithVandC[];
+  registrations?: Registration[];
+  setFilteredEntries?: React.Dispatch<SetStateAction<DriverWithVandC[]>>;
+  setFilteredRegisters?: React.Dispatch<SetStateAction<Registration[]>>;
   handleSortToggle: () => void;
   isSorted: boolean;
 }
@@ -11,6 +13,8 @@ interface SearchAndSortProps {
 const SearchAndSort = ({
   entries,
   setFilteredEntries,
+  setFilteredRegisters,
+  registrations,
   handleSortToggle,
   isSorted,
 }: SearchAndSortProps) => {
@@ -19,14 +23,28 @@ const SearchAndSort = ({
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const searchTerm = e.target.value;
     setSearchQuery(searchTerm);
+    if (location.pathname === "/registration-list") {
+      const filteredItems = registrations!.filter(
+        (register) =>
+          register!
+            .first_name!.toLowerCase()
+            .includes(searchTerm.toLowerCase()) ||
+          register!.last_name!.toLowerCase().includes(searchTerm.toLowerCase()),
+      );
 
-    const filteredItems = entries!.filter(
-      (entry) =>
-        entry!.first_name!.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        entry!.last_name!.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        entry!.license_number!.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-    if (searchQuery != null || "") setFilteredEntries(filteredItems);
+      if (searchQuery !== null || "") setFilteredRegisters!(filteredItems);
+    } else {
+      const filteredItems = entries!.filter(
+        (entry) =>
+          entry!.first_name!.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          entry!.last_name!.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          entry!
+            .license_number!.toLowerCase()
+            .includes(searchTerm.toLowerCase()),
+      );
+
+      if (searchQuery !== null || "") setFilteredEntries!(filteredItems);
+    }
   };
 
   return (
diff --git a/frontend/src/hooks/registration-hooks/useDeleteRegistration.ts b/frontend/src/hooks/registration-hooks/useDeleteRegistration.ts
index 501aa79..75ca81c 100644
--- a/frontend/src/hooks/registration-hooks/useDeleteRegistration.ts
+++ b/frontend/src/hooks/registration-hooks/useDeleteRegistration.ts
@@ -2,14 +2,15 @@ import { BackendMessage } from "../../types/response.types";
 import { fetchWithAuth } from "../../utils/fetch";
 import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports";
 import { toast } from "react-toastify";
-import { useState } from "react";
+import { LoadingContextType } from "../../types/loading.types";
+import useLoading from "../context-hooks/useLoading";
 
 export const useDeleteRegistration = () => {
   const { auth, refresh, navigate } = useFetchWithAuthExports();
-  const [deleteloading, setdeleteLoading] = useState<boolean>(false);
+  const { setAppLoading }: LoadingContextType = useLoading();
 
   const deleteRegistration = async (licenseNumber: string) => {
-    setdeleteLoading(true);
+    setAppLoading!(true);
 
     try {
       // Send license_number in the request body as JSON
@@ -50,11 +51,11 @@ export const useDeleteRegistration = () => {
       console.error("Error during deletion:", error);
       toast.error("Unexpected error occurred.");
     } finally {
-      setdeleteLoading(false);
+      setAppLoading!(false);
     }
   };
 
-  return { deleteRegistration, deleteloading };
+  return { deleteRegistration };
 };
 
 export default useDeleteRegistration;
diff --git a/frontend/src/pages/DriverList.tsx b/frontend/src/pages/DriverList.tsx
index 30d11f6..68c5379 100644
--- a/frontend/src/pages/DriverList.tsx
+++ b/frontend/src/pages/DriverList.tsx
@@ -71,7 +71,7 @@ const DriversList = () => {
                 <div className="flex lg:flex-row flex-col text-textgreen pb-3">
                   <div>
                     <h1 className="lg:text-4xl text-3xl font-syke-bold">
-                      Drivers' List
+                      Drivers List
                     </h1>
                     <p className="lg:text-xl md:text-lg text-md font-syke-bold">
                       List of Drivers within the university.
diff --git a/frontend/src/pages/RegistrationList.tsx b/frontend/src/pages/RegistrationList.tsx
index 5c931ed..09e7e93 100644
--- a/frontend/src/pages/RegistrationList.tsx
+++ b/frontend/src/pages/RegistrationList.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import useGetRegistration from "../hooks/registration-hooks/useGetRegistration";
 import useDeleteRegistration from "../hooks/registration-hooks/useDeleteRegistration";
@@ -7,14 +7,21 @@ import Loading from "../components/Loading";
 import RegistrationListCard from "../components/RegistrationListCard";
 import { Registration } from "../types/datatypes";
 import { useApproveRegistration } from "../hooks/registration-hooks/useApproveRegistration";
+import SearchAndSort from "../components/SearchAndSort";
 
 const RegistrationList = () => {
   const { registration: registrations, loading } = useGetRegistration();
-  const { deleteRegistration, deleteloading: deleteLoading } =
-    useDeleteRegistration();
+  const { deleteRegistration } = useDeleteRegistration();
   const [selectedRegistration, setSelectedRegistration] =
     useState<Registration>();
   const { approveRegistration } = useApproveRegistration();
+  const [sortedRegistrations, setSortedRegistrations] = useState<
+    Registration[]
+  >([]);
+  const [originalRegistrations, setOriginalRegistrations] = useState<
+    Registration[]
+  >([]);
+  const [isSorted, setIsSorted] = useState(false); // Tracks toggle state
 
   const handleRegisterClick = (registration: Registration) => {
     setSelectedRegistration(registration);
@@ -34,24 +41,33 @@ const RegistrationList = () => {
       // Perform the deletion of the registration
       await deleteRegistration(selectedRegistration.license_number);
 
-      // After deletion, remove the registration from the list
       setSelectedRegistration(undefined);
+    }
+  };
 
-      // Optionally, you can update the list by filtering out the deleted registration
-      // const updatedRegistrations = registrations.filter(
-      //   (registration) => registration.license_number !== selectedRegistration.license_number
-      // );
-      // setRegistrations(updatedRegistrations); // If you manage registrations in state
-
-      toast.success("Registration has been rejected rawr.");
+  const handleSortToggle = () => {
+    if (!registrations) return;
 
-      // Optionally, refresh the list or perform any other necessary updates
-      setTimeout(() => {
-        window.location.reload();
-      }, 1000);
+    if (isSorted) {
+      setSortedRegistrations(originalRegistrations); // Reset to original order
+    } else {
+      const sorted = [...registrations].sort((a, b) => {
+        const nameA = `${a.first_name} ${a.last_name}`.toLowerCase();
+        const nameB = `${b.first_name} ${b.last_name}`.toLowerCase();
+        return nameA.localeCompare(nameB);
+      });
+      setSortedRegistrations(sorted);
     }
+    setIsSorted(!isSorted); // Toggle the sort state
   };
 
+  useEffect(() => {
+    if (registrations) {
+      setOriginalRegistrations(registrations);
+      setSortedRegistrations(registrations);
+    }
+  }, [registrations]);
+
   if (loading) return <Loading loading={loading} />;
 
   return (
@@ -59,11 +75,11 @@ const RegistrationList = () => {
       <div>
         <AdminHeader />
       </div>
-      <div className="w-[75rem] h-auto bg-gray-400 rounded-lg bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
-        <div className="max-w-full max-h-full flex justify-center items-center">
-          <div className="w-[35rem] p-3 bg-gray-400 rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
+      <div className="flex justify-center items-center w-10/12 h-auto bg-gray-400 rounded-lg bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10 md:p-6 p-3">
+        <div className="flex md:flex-row flex-col-reverse w-full justify-center items-center">
+          <div className="w-full bg-gray-400 rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
             {selectedRegistration ? (
-              <div className="items-center px-5">
+              <div className="items-center p-6">
                 <div className="text-left font-syke-light text-white">
                   <div className="text-textgreen py-2 mb-9">
                     <h1 className="text-4xl font-syke-bold">
@@ -75,18 +91,18 @@ const RegistrationList = () => {
                 <form className="space-y-[2rem]">
                   <div className="flex space-x-1">
                     <div className="flex-1">
-                      <h1 className="text-white font-syke-light text-l">
+                      <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
                         Last Name
                       </h1>
-                      <h1 className="text-textgreen font-syke-medium text-xl">
+                      <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
                         {selectedRegistration.last_name || ""}
                       </h1>
                     </div>
                     <div className="flex-1">
-                      <h1 className="text-white font-syke-light text-l">
+                      <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
                         First Name
                       </h1>
-                      <h1 className="text-textgreen font-syke-medium text-xl">
+                      <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
                         {selectedRegistration.first_name || ""}
                       </h1>
                     </div>
@@ -94,91 +110,101 @@ const RegistrationList = () => {
 
                   <div className="flex space-x-4">
                     <div className="flex-1">
-                      <h1 className="text-white font-syke-light text-l">Sex</h1>
-                      <h1 className="text-textgreen font-syke-medium text-xl">
+                      <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
+                        Sex
+                      </h1>
+                      <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
                         {selectedRegistration.sex || ""}
                       </h1>
                     </div>
                     <div className="flex-1">
-                      <h1 className="text-white font-syke-light text-l">
+                      <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
                         Date of Birth
                       </h1>
-                      <h1 className="text-textgreen font-syke-medium text-xl">
+                      <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
                         {selectedRegistration.date_of_birth || "MM/DD/YY"}
                       </h1>
                     </div>
                     <div className="flex-1">
-                      <h1 className="text-white font-syke-light text-l">
+                      <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
                         Driver Type
                       </h1>
-                      <h1 className="text-textgreen font-syke-medium text-xl">
+                      <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
                         {selectedRegistration.driver_type || ""}
                       </h1>
                     </div>
                   </div>
 
-                  <div className="space-y-2">
+                  <div className="w-full space-y-2">
                     <div className="flex space-x-4">
                       <div className="flex-1">
-                        <h1 className="text-white font-syke-light text-l">
+                        <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
                           Email
                         </h1>
-                        <h1 className="text-textgreen font-syke-medium text-xl">
+                        <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
                           {selectedRegistration.school_email || ""}
                         </h1>
                       </div>
-                    </div>
-
-                    <div className="flex">
                       <div className="flex-1">
-                        <h1 className="text-white font-syke-light text-l">
+                        <h1 className="text-white font-syke-light lg:text-lg md:text-xs sm:text-sm xs:text-xs text-2xs">
                           License Number
                         </h1>
-                        <h1 className="text-textgreen font-syke-medium text-xl">
+                        <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg xs:text-sm text-xs">
                           {selectedRegistration.license_number || ""}
                         </h1>
                       </div>
-                      <div>
-                        <button
-                          onClick={handleAccept}
-                          className="p-2 px-4 m-2 bg-hoverbutton hover:bg-buttongreen transition-colors rounded-sm text-white font-syke-bold">
-                          Accept
-                        </button>
-                        <button
-                          className="p-2 px-5  m-2 bg-hoverbutton hover:bg-red-900 transition-colors rounded-sm text-white font-syke-bold"
-                          onClick={handleReject}
-                          disabled={deleteLoading}
-                        >
-                          {deleteLoading ? "Processing..." : "Reject"}
-                        </button>
-                      </div>
+                    </div>
+
+                    <div className="flex w-full flex-row-reverse">
+                      <button
+                        className="p-2 px-4 bg-hoverbutton hover:bg-red-900 transition-colors rounded-sm text-white font-syke-bold w-2/6 ml-4 lg:text-md md:text-xs sm:text-sm xs:text-xs text-2xs"
+                        onClick={handleReject}
+                      >
+                        Reject
+                      </button>
+                      <button
+                        onClick={handleAccept}
+                        className="p-2 px-4 bg-hoverbutton hover:bg-buttongreen transition-colors rounded-sm text-white font-syke-bold w-2/6 lg:text-md md:text-xs sm:text-sm xs:text-xs text-2xs"
+                      >
+                        Accept
+                      </button>
                     </div>
                   </div>
                 </form>
               </div>
             ) : (
-              <div className="text-white text-center font-syke p-2">
+              <div className="text-white text-center font-syke p-4">
                 Select a registration to see details.
               </div>
             )}
           </div>
-          <div className="w-[50%] h-full p-6 rounded-md">
-            <div className="text-left rounded-xl bg-clip-padding">
+          <div className="flex w-full h-full md:pl-6 pb-6 rounded-md">
+            <div className="text-left w-full rounded-xl bg-clip-padding">
               <div className="text-left font-syke-light text-white">
-                <div className="text-textgreen py-3">
-                  <h1 className="text-4xl font-syke-bold">
-                    Registration's List
-                  </h1>
-                  <div>List of Users that Registered.</div>
+                <div className="flex lg:flex-row flex-col text-textgreen pb-3">
+                  <div className="lg:w-1/2 w-full">
+                    <h1 className="lg:text-3xl text-2xl font-syke-bold">
+                      Registrations List
+                    </h1>
+                    <p className="lg:text-xl md:text-lg text-md font-syke-bold">
+                      List of Users that registered.
+                    </p>
+                  </div>
+                  <SearchAndSort
+                    registrations={registrations!}
+                    setFilteredRegisters={setSortedRegistrations}
+                    handleSortToggle={handleSortToggle}
+                    isSorted={isSorted}
+                  />
                 </div>
               </div>
               <div
                 className="w-full h-[20rem] overflow-y-auto"
                 id="listcontainer"
               >
-                <div className="flex flex-col overflow-y-auto h-80 scrollbar-thin scrollbar text-white">
-                  {registrations && registrations.length > 0 ? (
-                    registrations.map((registration) => (
+                <div className="flex flex-col w-full overflow-y-auto h-80 scrollbar-thin scrollbar text-white">
+                  {sortedRegistrations && sortedRegistrations.length > 0 ? (
+                    sortedRegistrations.map((registration) => (
                       <div
                         key={registration.user_id}
                         className="cursor-pointer hover:bg-secondgrey"
diff --git a/frontend/src/pages/ViolatorList.tsx b/frontend/src/pages/ViolatorList.tsx
index ede988a..18e020b 100644
--- a/frontend/src/pages/ViolatorList.tsx
+++ b/frontend/src/pages/ViolatorList.tsx
@@ -71,7 +71,7 @@ const ViolatorList = () => {
                 <div className="flex lg:flex-row flex-col text-textgreen pb-3">
                   <div>
                     <h1 className="lg:text-4xl text-3xl font-syke-bold">
-                      Violators' List
+                      Violators List
                     </h1>
                     <p className="lg:text-xl md:text-lg text-md font-syke-bold">
                       List of Violators within the university.