diff --git a/frontend/src/pages/DriverList.tsx b/frontend/src/pages/DriverList.tsx
index 531b825..19cc850 100644
--- a/frontend/src/pages/DriverList.tsx
+++ b/frontend/src/pages/DriverList.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import AdminHeader from "../components/AdminHeader";
 import DriverListCard from "../components/DriversListCard";
@@ -10,8 +10,13 @@ import { DriverWithVandC } from "../types/datatypes.ts";
 const DriversList = () => {
   const { data: Drivers, loading } = useDrivers();
   const [selectedDriver, setSelectedDriver] = useState<DriverWithVandC>();
+  const [sortedDrivers, setSortedDrivers] = useState<DriverWithVandC[]>([]);
+  const [isSorted, setIsSorted] = useState(false); // Tracks toggle state
+  const [originalDrivers, setOriginalDrivers] = useState<DriverWithVandC[]>([]); // Stores the original list
+  const [searchQuery, setSearchQuery] = useState(""); // Tracks the search input
 
   const navigate = useNavigate();
+
   // Handle driver click to show more details
   const handleDriverClick = (driver: DriverWithVandC) => {
     setSelectedDriver(driver);
@@ -23,6 +28,46 @@ const DriversList = () => {
     navigate(`/view-profile/${selectedDriver.id}`);
   };
 
+  // Toggle sorting between alphabetical and default
+  const handleSortToggle = () => {
+    if (!Drivers) return;
+
+    if (isSorted) {
+      setSortedDrivers(originalDrivers); // Reset to original order
+    } else {
+      const sorted = [...Drivers].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);
+      });
+      setSortedDrivers(sorted);
+    }
+    setIsSorted(!isSorted); // Toggle the sort state
+  };
+
+  // Filter drivers based on search query
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    if (!query) {
+      setSortedDrivers(isSorted ? sortedDrivers : originalDrivers); // Reset to original or sorted list
+      return;
+    }
+
+    const filtered = Drivers?.filter((driver) => {
+      const fullName = `${driver.first_name} ${driver.last_name}`.toLowerCase();
+      return fullName.includes(query.toLowerCase());
+    });
+    setSortedDrivers(filtered || []);
+  };
+
+  // Initialize drivers and store the original list
+  useEffect(() => {
+    if (Drivers) {
+      setOriginalDrivers(Drivers);
+      setSortedDrivers(Drivers); // Default display
+    }
+  }, [Drivers]);
+
   if (loading) return <Loading loading={loading} />;
 
   return (
@@ -110,8 +155,8 @@ const DriversList = () => {
                       </div>
                       <div>
                         <button
-                        onClick={handleViewProfile}
-                        className="p-2 px-4 m-2 bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold"
+                          onClick={handleViewProfile}
+                          className="p-2 px-4 m-2 bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold"
                         >
                           View Profile
                         </button>
@@ -130,9 +175,26 @@ const DriversList = () => {
           <div className="w-[50%] h-full p-6 rounded-md">
             <div className="text-left 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">Driver's List</h1>
-                  <div>List of Drivers within the university.</div>
+                <div className="text-textgreen py-3 flex justify-between items-center">
+                  <div>
+                    <h1 className="text-4xl font-syke-bold">Driver's List</h1>
+                    <div>List of Drivers within the university.</div>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <input
+                      type="text"
+                      placeholder="Search..."
+                      value={searchQuery}
+                      onChange={(e) => handleSearch(e.target.value)}
+                      className="p-2 rounded-md bg-white text-black"
+                    />
+                    <button
+                      className="text-white bg-textgreen w-20 h-8 rounded-md"
+                      onClick={handleSortToggle}
+                    >
+                      {isSorted ? "Default" : "Sort"}
+                    </button>
+                  </div>
                 </div>
               </div>
               <div
@@ -140,8 +202,8 @@ const DriversList = () => {
                 id="listcontainer"
               >
                 <div className="flex flex-col overflow-y-auto h-80 scrollbar-thin scrollbar text-white">
-                  {Drivers && Drivers.length > 0 ? (
-                    Drivers.map((driver) => (
+                  {sortedDrivers && sortedDrivers.length > 0 ? (
+                    sortedDrivers.map((driver) => (
                       <div
                         key={driver.id}
                         className="cursor-pointer hover:bg-secondgrey"
@@ -164,51 +226,6 @@ const DriversList = () => {
               </div>
             </div>
           </div>
-
-          {/* <div className="w-[50%] h-full p-6 rounded-r-md  bg-gray-400 rounded-l-lg bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
-          <div className="text-left 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">Driver's List</h1>
-                <div>List of Registered Drivers.</div>
-              </div>
-            </div>
-            <div
-              className="w-full h-[23rem] overflow-y-auto rounded-md scrollbar"
-              id="listcontainer"
-            >
-              
-              <div className="flex justify-between font-syke-medium items-center border-b-2 pb-2 mb-2 border-white text-white text-xl">
-                <div className="flex-1 text-center">First Name</div>
-                <div className="flex-1 text-center">Last Name</div>
-                <div className="flex-1 text-center">License No.</div>
-              </div>
-
-              <div className="flex flex-col overflow-y-auto h-80 scrollbar-thin scrollbar text-white">
-                {Drivers && Drivers.length > 0 ? (
-                  Drivers.map((driver) => (
-                    <div
-                      key={driver.id}
-                      className="cursor-pointer hover:bg-gray-700"
-                      onClick={() => handleDriverClick(driver)} // Show more details on click
-                    >
-                      <DriverListCard
-                        key={driver.id}
-                        id={driver.id!}
-                        firstname={driver.first_name!}
-                        lastname={driver.last_name!}
-                        driver_type={driver.driver_type!}
-                        license_no={driver.license_number!}
-                      />
-                    </div>
-                  ))
-                ) : (
-                  <p className="text-white text-center">No drivers found.</p>
-                )}
-              </div>
-            </div>
-          </div>
-        </div> */}
         </div>
       </div>
     </div>
@@ -216,98 +233,3 @@ const DriversList = () => {
 };
 
 export default DriversList;
-
-// import { useState } from "react";
-// import { Spinner } from "react-activity";
-// import AdminHeader from "../components/AdminHeader";
-// import DriverListCard from "../components/DriversListCard";
-// import useDrivers from "../hooks/useDrivers";
-
-// const DriversList = () => {
-//   const { data: Drivers, loading } = useDrivers();
-//   const [selectedDriver, setSelectedDriver] = useState<any>(null);
-
-//   // Handle driver click to show more details
-//   const handleDriverClick = (driver: any) => {
-//     setSelectedDriver(driver);
-//   };
-
-//   if (loading)
-//     return (
-//       <div className="flex justify-center items-center h-screen">
-//         <Spinner size={50} color="#008000" animating={loading} />
-//       </div>
-//     );
-
-//   return (
-//     <div className="flex flex-col items-center bg-login-bg bg-cover bg-no-repeat sm:bg-top md:bg-right lg:bg-left h-screen">
-//       <div>
-//         <AdminHeader />
-//       </div>
-
-//       {/* Main Content */}
-//       {/* drivers info left side */}
-//       <div className="flex flex-col lg:flex-row items-center justify-center lg:space-x-10 w-full px-5">
-//         <div className="bg-[rgba(34,38,41,0.66)] opacity-99 w-full lg:w-2/5 p-6 rounded-lg shadow-md mb-5 lg:mb-0">
-//           <h1 className="text-xl text-center text-textgreen font-syke-bold mb-4">
-//             Drivers Info
-//           </h1>
-//           {selectedDriver ? (
-//             <div>
-//               <p className="text-white">
-//                 <strong>Email:</strong> {selectedDriver.email}
-//               </p>
-//               <p className="text-white">
-//                 <strong>Sex:</strong> {selectedDriver.sex}
-//               </p>
-//               <p className="text-white">
-//                 <strong>License Expiration:</strong> {selectedDriver.license_expiration_date}
-//               </p>
-//             </div>
-//           ) : (
-//             <p className="text-white">Click a driver to see more details.</p>
-//           )}
-//         </div>
-
-//         {/* Drivers List Section */}
-//         <div className="bg-[rgba(34,38,41,0.66)] opacity-99 w-full lg:w-3/5 p-4 rounded-lg shadow-md overflow-hidden">
-//           <h1 className="text-xl text-center text-textgreen font-syke-bold">
-//             Drivers List
-//           </h1>
-
-//           {/* drivers list header */}
-//           <div className="flex justify-between items-center border-b-2 pb-2 mb-2 border-gray-400 text-white text-sm">
-//             <div className="flex-1 text-center font-bold">First Name</div>
-//             <div className="flex-1 text-center font-bold">Last Name</div>
-//             <div className="flex-1 text-center font-bold">Driver Type</div>
-//             <div className="flex-1 text-center font-bold">License No.</div>
-//           </div>
-
-//           {/* Scrollable Driver List */}
-//           <div className="flex flex-col overflow-y-auto h-80 scrollbar-thin scrollbar-thumb-gray-500 scrollbar-track-gray-300 text-white">
-//             {Drivers && Drivers.length > 0 ? (
-//               Drivers.map((driver) => (
-//                 <div
-//                   key={driver.license_number}
-//                   className="cursor-pointer hover:bg-gray-700 p-2"
-//                   onClick={() => handleDriverClick(driver)} // Show more details on click
-//                 >
-//                   <DriverListCard
-//                     firstname={driver.first_name!}
-//                     lastname={driver.last_name!}
-//                     driver_type={driver.driver_type!}
-//                     license_no={driver.license_number!}
-//                   />
-//                 </div>
-//               ))
-//             ) : (
-//               <p className="text-white text-center">No drivers found.</p>
-//             )}
-//           </div>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default DriversList;