diff --git a/backend/src/index.ts b/backend/src/index.ts
index 228378d3..f1dcbf64 100644
--- a/backend/src/index.ts
+++ b/backend/src/index.ts
@@ -59,14 +59,6 @@ server.use("/notification", notificationRoutes);
 server.use("/violation", violationRoutes);
 server.use("/violator", violatorRoutes);
 
-// server.get("/testing", async (req: Request, res: Response) => {
-//   try {
-//     res.status(200).json({ title: "Testing Complete", message: "WOWZIES" });
-//   } catch (error) {
-//     res.sendStatus(500);
-//   }
-// });
-
 // For PORT
 const PORT = Number(process.env.PORT) || 3000;
 
diff --git a/backend/src/middlewares/verifyToken.ts b/backend/src/middlewares/verifyToken.ts
index 39abdf39..8478a757 100644
--- a/backend/src/middlewares/verifyToken.ts
+++ b/backend/src/middlewares/verifyToken.ts
@@ -6,7 +6,6 @@ dotenv.config();
 
 const verifyToken = async (req: Request, res: Response, next: NextFunction) => {
   const token = req.headers["authorization"]?.split(" ")[1];
-  // console.log(token)
   if (!token) {
     res
       .status(401)
@@ -19,14 +18,11 @@ const verifyToken = async (req: Request, res: Response, next: NextFunction) => {
       token,
       process.env.ACCESS_TOKEN_SECRET!
     ) as JwtPayload;
-    // console.log(payload.userId)
     req.user = payload.userId;
-    console.log(`UserId: ${req.user}`);
   } catch (error) {
-    console.log(error);
     res
       .status(403)
-      .json({ title: "Token Invalid", message: "Access has expired." });
+      .json({ title: "Token Invalid", message: error });
     return;
   }
   next();
diff --git a/backend/src/routes/auth.ts b/backend/src/routes/auth.ts
index 93354ddf..d6ef970e 100644
--- a/backend/src/routes/auth.ts
+++ b/backend/src/routes/auth.ts
@@ -95,13 +95,11 @@ router.post("/login", validateAuth, async (req: Request, res: Response) => {
     // console.log(req.cookies.jwt);
     res.status(200).json({ accessToken, isAdmin: user.is_admin, id: user.id });
   } catch (error) {
-    res.sendStatus(500);
-    console.log(error);
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
 
-
-
 router.get("/refresh", async (req: Request, res: Response) => {
   try {
     const cookies = req.cookies;
@@ -153,8 +151,8 @@ router.get("/refresh", async (req: Request, res: Response) => {
       return;
     }
   } catch (error) {
-    res.sendStatus(500).json({ title: "Unknown Error", message: error });
-    console.log(error);
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
 
@@ -201,8 +199,8 @@ router.get("/logout", async (req: Request, res: Response) => {
       message: "Thank you for visiting, feel free to use our services again.",
     });
   } catch (error) {
-    res.sendStatus(500);
-    console.log(error);
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
 export default router;
diff --git a/backend/src/routes/cars.ts b/backend/src/routes/cars.ts
index f1e679ba..5885e41f 100644
--- a/backend/src/routes/cars.ts
+++ b/backend/src/routes/cars.ts
@@ -26,8 +26,8 @@ router.post("/check-license", async (req: Request, res: Response) => {
 
     res.status(200).json(driverFound);
   } catch (error) {
-    console.log(error);
-    res.sendStatus(500);
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
 
@@ -86,8 +86,7 @@ router.post("/add", async (req: Request, res: Response) => {
     });
   } catch (error) {
     const errorMessage = (error as Error).message;
-    console.error("Error:", errorMessage);
-    res.status(500).json({ title: "Error", message: errorMessage });
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
 
@@ -124,61 +123,56 @@ router.get("/get", async (req: Request, res: Response) => {
 
     res.status(200).json(cars);
   } catch (error: unknown) {
-    if (error instanceof Error) {
-      console.error("Error fetching cars:", error.message);
-      res.status(500).json({ title: "Unknown Error", message: error.message });
-      return;
-    } else {
-      console.error("Unknown error:", error);
-      res.status(500).json({
-        title: "Unknown Error",
-        message: "An unexpected error occurred",
-      });
-      return;
-    }
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
 
 router.patch("/update", async (req: Request, res: Response) => {
-  const { id, ...updates } = req.body;
+  try {
+    const { id, ...updates } = req.body;
 
-  if (!id) {
-    res.status(400).json({
-      title: "Validation Error",
-      message: "License plate is required to update the record.",
-    });
-    return;
-  }
+    if (!id) {
+      res.status(400).json({
+        title: "Validation Error",
+        message: "License plate is required to update the record.",
+      });
+      return;
+    }
 
-  const fields = Object.keys(updates);
-  const values = Object.values(updates);
+    const fields = Object.keys(updates);
+    const values = Object.values(updates);
 
-  const setClause = fields
-    .map((field, index) => `${field} = $${index + 1}`)
-    .join(", ");
+    const setClause = fields
+      .map((field, index) => `${field} = $${index + 1}`)
+      .join(", ");
 
-  const query = `UPDATE cars SET ${setClause}
+    const query = `UPDATE cars SET ${setClause}
          WHERE id = $${fields.length + 1} 
          RETURNING *`;
 
-  const result = await pool.query(query, [...values, id]);
+    const result = await pool.query(query, [...values, id]);
 
-  if (result.rowCount === 0) {
-    res.status(404).json({
-      title: "Not Found",
-      message: "Cars with the specified ID does not exist.",
-    });
-    return;
-  }
+    if (result.rowCount === 0) {
+      res.status(404).json({
+        title: "Not Found",
+        message: "Cars with the specified ID does not exist.",
+      });
+      return;
+    }
 
-  const updateCar = result.rows[0];
-  console.log("Car updated successfully:", updateCar);
+    const updateCar = result.rows[0];
+    console.log("Car updated successfully:", updateCar);
 
-  res.status(200).json({
-    title: "Car Updated!",
-    message: `Car has been updated successfully.`,
-    driver: updateCar,
-  });
+    res.status(200).json({
+      title: "Car Updated!",
+      message: `Car has been updated successfully.`,
+      driver: updateCar,
+    });
+  } catch (error) {
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
+  }
 });
 
 router.delete("/delete", async (req: Request, res: Response) => {
@@ -197,7 +191,8 @@ router.delete("/delete", async (req: Request, res: Response) => {
     res.status(200).json({ message: "Car Added Successfully" });
     console.log("Driver deleted successfully:", car);
   } catch (error) {
-    res.status(500).json({ message: error });
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
 
diff --git a/backend/src/routes/driver.ts b/backend/src/routes/driver.ts
index 6eaefb95..afbe5191 100644
--- a/backend/src/routes/driver.ts
+++ b/backend/src/routes/driver.ts
@@ -52,16 +52,8 @@ router.post("/add", validateDriver, async (req: Request, res: Response) => {
 
     return;
   } catch (error) {
-    if (error instanceof Error) {
-      console.error("Error occurred:", error.message);
-      res.status(500).json({ title: "Server Error", message: error.message });
-    } else {
-      console.error("Unexpected error occurred:", error);
-      res.status(500).json({
-        title: "Server Error",
-        message: "An unexpected error occurred.",
-      });
-    }
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
 
@@ -129,7 +121,6 @@ router.get("/get/:driverId", async (req: Request, res: Response) => {
     res.status(200).json({ ...foundDriver, violations, cars });
   } catch (error) {
     const errorMessage = (error as Error).message;
-    console.error("Error fetching driver:", errorMessage);
     res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
@@ -149,20 +140,6 @@ router.patch("/update", async (req: Request, res: Response) => {
       license_expiration_date,
     } = req.body;
 
-    console.log("THIS IS THE DRIVER!");
-    console.log(
-      id,
-      email,
-      first_name,
-      last_name,
-      middle_name,
-      date_of_birth,
-      sex,
-      driver_type,
-      license_number,
-      license_expiration_date
-    );
-
     if (
       ![
         id,
@@ -210,54 +187,55 @@ router.patch("/update", async (req: Request, res: Response) => {
       message: `Successfully updated Driver: ${first_name} ${last_name}.`,
     });
   } catch (error) {
-    console.error("Error updating driver:", error);
-    res.status(500).json({
-      title: "Server Error",
-      message: "An error occurred while updating the driver.",
-    });
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
 });
 
 router.delete("/delete", async (req: Request, res: Response) => {
   console.log("Request body:", req.body); // Log the incoming request body
+  try {
+    const { id } = req.body;
 
-  const { id } = req.body;
+    if (!id) {
+      console.error("No ID provided in the request body");
+      res.status(400).json({
+        title: "Validation Error",
+        message: "Driver ID is required to delete a record.",
+      });
+      return;
+    }
 
-  if (!id) {
-    console.error("No ID provided in the request body");
-    res.status(400).json({
-      title: "Validation Error",
-      message: "Driver ID is required to delete a record.",
-    });
-    return;
-  }
+    await pool.query(`DELETE FROM cars WHERE driver_id = $1 RETURNING *`, [id]);
 
-  await pool.query(`DELETE FROM cars WHERE driver_id = $1 RETURNING *`, [id]);
+    await pool.query(`DELETE FROM violations WHERE id = $1 RETURNING *`, [id]);
 
-  await pool.query(`DELETE FROM violations WHERE id = $1 RETURNING *`, [id]);
+    const resultDriver = await pool.query(
+      `DELETE FROM drivers WHERE id = $1 RETURNING *`,
+      [id]
+    );
 
-  const resultDriver = await pool.query(
-    `DELETE FROM drivers WHERE id = $1 RETURNING *`,
-    [id]
-  );
+    if (resultDriver.rowCount === 0) {
+      console.error("Driver not found in the database");
+      res.status(404).json({
+        title: "Not Found",
+        message: "Driver with the specified ID does not exist.",
+      });
+      return;
+    }
+
+    const deletedDriver = resultDriver.rows[0];
+    console.log("Driver deleted successfully:", deletedDriver);
 
-  if (resultDriver.rowCount === 0) {
-    console.error("Driver not found in the database");
-    res.status(404).json({
-      title: "Not Found",
-      message: "Driver with the specified ID does not exist.",
+    res.status(200).json({
+      title: "Driver Deleted",
+      message: `Driver ${deletedDriver.last_name}, ${deletedDriver.first_name} has been removed.`,
+      driver: deletedDriver,
     });
-    return;
+  } catch (error) {
+    const errorMessage = (error as Error).message;
+    res.status(500).json({ title: "Unknown Error", message: errorMessage });
   }
-
-  const deletedDriver = resultDriver.rows[0];
-  console.log("Driver deleted successfully:", deletedDriver);
-
-  res.status(200).json({
-    title: "Driver Deleted",
-    message: `Driver ${deletedDriver.last_name}, ${deletedDriver.first_name} has been removed.`,
-    driver: deletedDriver,
-  });
 });
 
 export default router;
diff --git a/backend/src/routes/notification.ts b/backend/src/routes/notification.ts
index 36f62dfc..afa8dee9 100644
--- a/backend/src/routes/notification.ts
+++ b/backend/src/routes/notification.ts
@@ -26,7 +26,7 @@ router.get("/get-by-user", async (req: Req, res: Response) => {
       res.json(notifications);
     }
   } catch (err) {
-    console.error("ERROR", err);
+    console.log(err);
     res.status(500).json({
       title: "Server Error",
       message: "An unexpected error occurred while retrieving notifications",
@@ -36,11 +36,12 @@ router.get("/get-by-user", async (req: Req, res: Response) => {
 
 // Create a new notification
 router.post("/add", async (req: Req, res: Response) => {
-  const { licenseNumber, message } = req.body;
   try {
+    const { driver_id, title, message } = req.body;
+
     const { rows: drivers } = await pool.query(
-      "SELECT * FROM drivers WHERE license_number = $1",
-      [licenseNumber]
+      "SELECT * FROM drivers WHERE id = $1",
+      [driver_id]
     );
 
     if (drivers.length === 0) {
@@ -54,8 +55,8 @@ router.post("/add", async (req: Req, res: Response) => {
     const driver = await drivers[0];
 
     const { rows: notifications } = await pool.query(
-      "INSERT INTO notifications (user_id, message) VALUES ($1, $2)",
-      [driver.id, message]
+      "INSERT INTO notifications (driver_id, title, message) VALUES ($1, $2, $3) RETURNING *",
+      [driver.id, title, message]
     );
 
     if (notifications.length === 0) {
diff --git a/backend/src/routes/profile.ts b/backend/src/routes/profile.ts
index 0e6ec33b..0861b73b 100644
--- a/backend/src/routes/profile.ts
+++ b/backend/src/routes/profile.ts
@@ -24,24 +24,17 @@ router.get("/get/:id", async (req: Request, res: Response) => {
       [foundDriver.id]
     );
 
-    res.status(200).json({ ...foundDriver, violations });
+    const { rows: cars } = await pool.query(
+      "SELECT * FROM cars WHERE driver_id = $1",
+      [foundDriver.id]
+    );
+
+    res.status(200).json({ ...foundDriver, violations, cars });
   } catch (error) {
     console.log(error);
     res.sendStatus(500);
   }
 });
 
-// router.delete("/:id", async (req: Request, res: Response) => {
-//   try {
-//     const {id} = req.params
-
-//     const {rows: profile} = await pool.query('')
-
-
-//   } catch (error) {
-//     console.log(error);
-//     res.sendStatus(500);
-//   }
-// });
 
 export default router;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 00000000..dd5aa9a9
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,105 @@
+import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
+import "react-activity/dist/Spinner.css";
+import "react-toastify/dist/ReactToastify.css";
+
+import LoginPage from "./pages/LoginPage.tsx";
+import HomePage from "./pages/HomePage.tsx";
+import SignUp from "./pages/SignUpPage.tsx";
+import AboutPage from "./pages/AboutPage.tsx";
+
+import AdminLandingPage from "./pages/AdminHomePage.tsx";
+import EncodePage from "./pages/EncodePage.tsx";
+import ViolatorList from "./pages/ViolatorList.tsx";
+import DriversList from "./pages/DriverList.tsx";
+import RegisterDriver from "./pages/RegisterDriver.tsx";
+import AddDriver from "./pages/AddDriver.tsx";
+import UnauthorizedPage from "./pages/UnauthorizedPage.tsx";
+import HomepageDriver from "./components/NotificationsList.tsx";
+import RegistrationList from "./pages/RegistrationList.tsx";
+import RequireAuth from "./components/RequireAuth.tsx";
+import PersistLogin from "./components/PersistLogin.tsx";
+import Loading from "./components/Loading.tsx";
+import { LoadingContextType } from "./types/loading.types.ts";
+import useLoading from "./hooks/context-hooks/useLoading.ts";
+import ViewProfile from "./pages/ViewProfile.tsx";
+import Protocols from "./components/Policies/protocols.tsx";
+import Rules from "./components/Policies/rules.tsx";
+import ChangePassword from "./pages/ChangePassword.tsx";
+import AddViolationPage from "./pages/AddViolationPage.tsx";
+import SendNotif from "./pages/SendNotif.tsx";
+
+const Main = () => {
+  const { appLoading }: LoadingContextType = useLoading();
+
+  return appLoading ? (
+    <div className="flex justify-center items-center h-screen bg-hoverbutton">
+      <Loading loading={appLoading} />
+    </div>
+  ) : (
+    <BrowserRouter>
+      <Routes>
+        {/* PUBLIC ROUTES */}
+        <Route path="/" element={<Navigate to="/login" replace />} />
+        <Route path="/login" element={<LoginPage />} />
+
+        <Route path="/signup" element={<SignUp />} />
+
+        <Route path="/unauthorized" element={<UnauthorizedPage />} />
+
+        <Route element={<PersistLogin />}>
+          {/* FOR ALL LOGGED IN */}
+          <Route path="/view-profile/:driverId" element={<ViewProfile />} />
+          <Route path="/changepassword" element={<ChangePassword />} />
+
+          {/* USER ROUTES */}
+          <Route element={<RequireAuth forAdmin={false} />}>
+            <Route path="/homepage" element={<HomePage />} />
+            <Route path="/about" element={<AboutPage />} />
+            <Route path="/register-driver" element={<RegisterDriver />} />
+            <Route path="/homepagedriver" element={<HomepageDriver />} />
+            <Route path="/protocols" element={<Protocols />} />
+            <Route path="/rules" element={<Rules />} />
+          </Route>
+
+          {/* ADMIN ROUTES */}
+          <Route element={<RequireAuth forAdmin={true} />}>
+            <Route
+              path="/admin"
+              element={<AdminLandingPage />}
+            />
+            <Route
+              path="/driverslist"
+              element={<DriversList />}
+            />
+            <Route
+              path="/encode"
+              element={<EncodePage />}
+            />
+            <Route
+              path="/add-driver"
+              element={<AddDriver />}
+            />
+            <Route
+              path="/add-violation"
+              element={<AddViolationPage />}
+            />
+            <Route
+              path="/violatorslist"
+              element={<ViolatorList />}
+            />
+            <Route
+              path="/registration-list"
+              element={<RegistrationList />}
+            />
+            <Route
+              path="/send-notif/:id"
+              element={<SendNotif />}
+            /> 
+          </Route>
+        </Route>
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Main
\ No newline at end of file
diff --git a/frontend/src/components/DriversListCard.tsx b/frontend/src/components/DriversListCard.tsx
index 3a022290..976fa698 100644
--- a/frontend/src/components/DriversListCard.tsx
+++ b/frontend/src/components/DriversListCard.tsx
@@ -8,20 +8,22 @@ const DriverListCard = ({
   driver_type,
   license_number,
 }: DriverWithVandC) => {
-
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const { deleteDriver } = useDeleteDriver()
+  const { deleteDriver } = useDeleteDriver();
 
-  const handleDeleteDriver = () => { 
-    deleteDriver(id!)
+  const handleDeleteDriver = () => {
+    deleteDriver(id!);
     setIsMenuOpen(false);
-  }
-  
+  };
+
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
         setIsMenuOpen(false);
       }
     };
@@ -35,59 +37,49 @@ const DriverListCard = ({
   return (
     <div
       className="border-b-2 flex-col flex-1 border-t-transparent w-full border-b-inputfield space-y-[20px] relative"
-      id="row"
-    >
+      id="row">
       <div className="flex p-2 items-center overflow-y-auto">
-        <div className="flex-2 min-w-[45%]">
-          <h1 className="text-white font-syke-light text-sm"
-          >
+        <div className="flex-2 w-4/12">
+          <h1 className="text-white font-syke-light md:text-sm xs:text-xs text-xxs">
             Name
-            </h1>
-          <h1 className="text-textgreen font-syke-medium text-md"
-          >
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-sm md:text-xs xs:text-sm text-xs">
             {first_name} {last_name}
           </h1>
         </div>
 
-        <div className="flex-2 text-left min-w-[25%]">
-          <h1 className="text-white font-syke-light text-sm"
-          >Driver Type
+        <div className="flex-2 text-left w-3/12">
+          <h1 className="text-white font-syke-light md:text-sm xs:text-xs text-xxs">
+            Driver Type
           </h1>
-          <h1 className="text-textgreen font-syke-medium text-md"
-          >
+          <h1 className="text-textgreen font-syke-medium lg:text-sm md:text-xs xs:text-sm text-xs">
             {driver_type}
           </h1>
         </div>
 
-        <div className="flex-2 text-left">
-          <h1 className="text-white font-syke-light text-sm"
-          >
+        <div className="flex-2 text-left w-4/12">
+          <h1 className="text-white font-syke-light md:text-sm xs:text-xs text-xxs">
             License Number
-            </h1>
-          <h1 className="text-textgreen font-syke-medium text-md"
-          >
+          </h1>
+          <h1 className="text-textgreen font-syke-medium lg:text-sm md:text-xs xs:text-sm text-xs">
             {license_number}
           </h1>
         </div>
 
-        <div className="relative flex items-center ml-auto" 
-        ref={dropdownRef}>
-
+        <div
+          className="relative flex w-1/12 items-center ml-auto"
+          ref={dropdownRef}>
           <button
             className="text-white px-2 py-1 rounded-full hover:bg-lime-600"
-            onClick={() => setIsMenuOpen(!isMenuOpen)}
-          >
+            onClick={() => setIsMenuOpen(!isMenuOpen)}>
             <span className="text-2xl">⋮</span>
           </button>
 
           {isMenuOpen && (
-            <div
-              className="absolute right-0 top-1/2 transform -translate-y-1/2 w-40 bg-gray-800 text-white rounded-md shadow-lg z-[9999]"
-            >
+            <div className="absolute right-0 top-1/2 transform -translate-y-1/2 w-40 bg-gray-800 text-white rounded-md shadow-lg z-[9999]">
               <button
                 className="block w-full text-left px-4 py-2 hover:bg-gray-700 text-red-500"
-                onClick={handleDeleteDriver}
-              >
+                onClick={handleDeleteDriver}>
                 Delete
               </button>
             </div>
diff --git a/frontend/src/components/PreviewProfile.tsx b/frontend/src/components/PreviewProfile.tsx
index 2060e9b5..82063a3d 100644
--- a/frontend/src/components/PreviewProfile.tsx
+++ b/frontend/src/components/PreviewProfile.tsx
@@ -13,93 +13,95 @@ const PreviewProfile = ({
   };
 
   const handleSendNotification = () => {
-    if(!selectedEntry) return;
+    if (!selectedEntry) return;
     navigate(`/send-notif/${selectedEntry.id}`);
-
   };
 
   return (
-    <div className="items-center px-5">
-      <div className="text-left font-syke-light text-white">
-        <div className="text-textgreen py-2 mb-5">
-          <h1 className="text-4xl font-syke-bold">Driver Details</h1>
-          <div>Driver's key data.</div>
-        </div>
+    <div className="items-center p-6">
+      <div className="text-left font-syke-light text-textgreen mb-5">
+        <h1 className="text-4xl font-syke-bold">Driver Details</h1>
+        <div>Driver's key data.</div>
       </div>
       <form className="space-y-[2rem]">
-        <div className="flex space-x-1">
+        <div className="flex w-full">
           <div className="flex-1">
-            <h1 className="text-white font-syke-light text-l">Last Name</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-md text-sm">
+              Last Name
+            </h1>
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
               {selectedEntry.last_name || ""}
             </h1>
           </div>
           <div className="flex-1">
-            <h1 className="text-white font-syke-light text-l">First Name</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-md text-sm">
+              First Name
+            </h1>
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
               {selectedEntry.first_name || ""}
             </h1>
           </div>
         </div>
 
-        <div className="flex space-x-4">
+        <div className="flex w-full">
           <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-md text-sm">
+              Sex
+            </h1>
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
               {selectedEntry.sex || ""}
             </h1>
           </div>
           <div className="flex-1">
-            <h1 className="text-white font-syke-light text-l">Date of Birth</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-md text-sm">
+              Date of Birth
+            </h1>
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
               {selectedEntry.date_of_birth || "MM/DD/YY"}
             </h1>
           </div>
           <div className="flex-1">
-            <h1 className="text-white font-syke-light text-l">Driver Type</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-md text-sm">
+              Driver Type
+            </h1>
+            <h1 className="text-textgreen font-syke-medium lg:text-xl md:text-xs sm:text-lg text-md">
               {selectedEntry.driver_type || ""}
             </h1>
           </div>
         </div>
 
-        <div className="space-y-2">
-          <div className="flex space-x-4">
+        <div className="w-full">
+          <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-md text-sm">
                 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 text-md">
                 {selectedEntry.license_number || ""}
               </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-md text-sm">
                 License Expiration Date
               </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 text-md">
                 {selectedEntry.license_expiration_date || ""}
               </h1>
             </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"
-              >
-                View Profile
-              </button>
-              <button
-                onClick={handleSendNotification}
-                className="p-2 px-4 m-2 bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold"
-              >
-                Send Notification
-              </button>
-            </div>
           </div>
         </div>
+        <div className="flex w-full flex-row-reverse ">
+          <button
+            onClick={handleSendNotification}
+            className="p-2 px-4 w-2/6 ml-4  bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold">
+            Send Notification
+          </button>
+          <button
+            onClick={handleViewProfile}
+            className="p-2 px-4 w-2/6 bg-buttongreen active:bg-colorhover transition-colors rounded-sm text-white font-syke-bold">
+            View Profile
+          </button>
+        </div>
       </form>
     </div>
   );
diff --git a/frontend/src/components/SearchAndSort.tsx b/frontend/src/components/SearchAndSort.tsx
index a94ebb2a..a86f3315 100644
--- a/frontend/src/components/SearchAndSort.tsx
+++ b/frontend/src/components/SearchAndSort.tsx
@@ -30,16 +30,16 @@ const SearchAndSort = ({
   };
 
   return (
-    <div className="flex items-center space-x-2">
+    <div className="flex items-center lg:w-1/2 w-full space-x-2">
       <input
         type="text"
         placeholder="Search"
         value={searchQuery}
         onChange={handleInputChange}
-        className="p-2 rounded font-syke-medium bg-hoverbutton w-40 text-white focus:outline-none focus:ring-0 active:outline-none"
+        className="p-2 rounded font-syke-medium bg-hoverbutton text-white focus:outline-none focus:ring-0 active:outline-none lg:w-1/2 w-4/6 md:text-md text-sm"
       />
       <button
-        className="text-white bg-buttongreen w-20 h-10 rounded font-syke-medium active:bg-colorhover "
+        className="text-white bg-buttongreen lg:w-1/2 w-2/6 p-2 rounded font-syke-medium active:bg-colorhover md:text-md text-sm"
         onClick={handleSortToggle}
       >
         {isSorted ? "Default" : "Sort"}
diff --git a/frontend/src/hooks/car-hooks/useCars.ts b/frontend/src/hooks/car-hooks/useCars.ts
index 4a668a34..0cfd8e9a 100644
--- a/frontend/src/hooks/car-hooks/useCars.ts
+++ b/frontend/src/hooks/car-hooks/useCars.ts
@@ -1,5 +1,5 @@
 import { Car } from "../../types/datatypes.ts";
-import { BackendError } from "../../types/error.types.ts";
+import { BackendMessage } from "../../types/response.types.ts";
 
 import { useEffect, useState, useCallback } from "react";
 import { fetchWithAuth } from "../../utils/fetch.tsx";
@@ -7,7 +7,7 @@ import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports.ts
 
 const useCars = (driverId: string) => {
   const [data, setData] = useState<Car[] | null>(null);
-  const [error, setError] = useState<BackendError | null>(null);
+  const [error, setError] = useState<BackendMessage | null>(null);
   const [loading, setLoading] = useState(false);
   const { auth, refresh, navigate } = useFetchWithAuthExports();
 
@@ -23,7 +23,7 @@ const useCars = (driverId: string) => {
       );
 
       if (!response.ok) {
-        const error: BackendError = await response.json();
+        const error: BackendMessage = await response.json();
         setError(error);
       } else {
         const cars: Car[] = await response.json();
@@ -31,7 +31,7 @@ const useCars = (driverId: string) => {
       }
     } catch (err) {
       console.error("Unexpected error:", err);
-      setError({ message: "An unexpected error occurred" } as BackendError);
+      setError({ message: "An unexpected error occurred" } as BackendMessage);
     } finally {
       setLoading(false);
     }
diff --git a/frontend/src/hooks/car-hooks/useCheckLicenseNumber.ts b/frontend/src/hooks/car-hooks/useCheckLicenseNumber.ts
index db92ffaf..02c14b56 100644
--- a/frontend/src/hooks/car-hooks/useCheckLicenseNumber.ts
+++ b/frontend/src/hooks/car-hooks/useCheckLicenseNumber.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { toast } from "react-toastify";
-import { BackendError } from "../../types/error.types";
+import { BackendMessage } from "../../types/response.types";
 import { fetchWithAuth } from "../../utils/fetch";
 import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports";
 import { DriverWithVandC } from "../../types/datatypes";
@@ -29,14 +29,14 @@ const useCheckLicenseNumber = () => {
       );
 
       if (!response.ok) {
-        const backendError: BackendError = await response.json();
+        const backendError: BackendMessage = await response.json();
         toast.error(backendError.message);
-        return
+        return;
       }
 
       const driver = await response.json();
 
-      return driver; 
+      return driver;
     } catch (error) {
       console.error("Error checking license number:", error);
       toast.error("Failed to verify license number.");
@@ -49,4 +49,4 @@ const useCheckLicenseNumber = () => {
   return { checkLicenseNumber, loading };
 };
 
-export default useCheckLicenseNumber;
\ No newline at end of file
+export default useCheckLicenseNumber;
diff --git a/frontend/src/hooks/driver-hooks/useAddDriver.ts b/frontend/src/hooks/driver-hooks/useAddDriver.ts
index 0077e794..827fb5c7 100644
--- a/frontend/src/hooks/driver-hooks/useAddDriver.ts
+++ b/frontend/src/hooks/driver-hooks/useAddDriver.ts
@@ -1,12 +1,12 @@
 import { useState } from "react";
-import { BackendError } from "../../types/error.types";
+import { BackendMessage } from "../../types/response.types";
 import { Driver } from "../../types/datatypes";
 import { fetchWithAuth } from "../../utils/fetch";
 import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports";
 
 export const useAddDriver = () => {
   // const [data, setData] = useState<Driver[] | null>(null); // Store fetched drivers
-  const [error, setError] = useState<BackendError | null>(null); // Handle errors
+  const [error, setError] = useState<BackendMessage | null>(null); // Handle errors
   const [loading, setLoading] = useState<boolean>(); // Track loading state
   const { auth, refresh, navigate } = useFetchWithAuthExports();
 
@@ -25,13 +25,13 @@ export const useAddDriver = () => {
       );
 
       if (!response.ok) {
-        const error: BackendError = await response.json();
+        const error: BackendMessage = await response.json();
         setError(error);
         console.log("What are you doing?!");
       }
     } catch (error) {
       console.error("Unexpected error:", error);
-      setError({ message: "An unexpected error occurred" } as BackendError);
+      setError({ message: "An unexpected error occurred" } as BackendMessage);
     } finally {
       setTimeout(() => {
         setLoading(false);
diff --git a/frontend/src/hooks/driver-hooks/useDrivers.ts b/frontend/src/hooks/driver-hooks/useDrivers.ts
index 30048b3b..f47f69a0 100644
--- a/frontend/src/hooks/driver-hooks/useDrivers.ts
+++ b/frontend/src/hooks/driver-hooks/useDrivers.ts
@@ -1,12 +1,12 @@
 import { useEffect, useState, useCallback } from "react";
 import { DriverWithVandC } from "../../types/datatypes.ts";
-import { BackendError } from "../../types/error.types.ts";
+import { BackendMessage } from "../../types/response.types.ts";
 import { fetchWithAuth } from "../../utils/fetch.tsx";
 import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports.ts";
 
 const useDrivers = () => {
   const [data, setData] = useState<DriverWithVandC[] | null>(null);
-  const [error, setError] = useState<BackendError | null>(null);
+  const [error, setError] = useState<BackendMessage | null>(null);
   const [loading, setLoading] = useState(false);
   const { auth, refresh, navigate } = useFetchWithAuthExports();
 
@@ -22,7 +22,7 @@ const useDrivers = () => {
       );
 
       if (!response.ok) {
-        const error: BackendError = await response.json();
+        const error: BackendMessage = await response.json();
         setError(error);
       } else {
         const drivers: DriverWithVandC[] = await response.json();
@@ -30,7 +30,7 @@ const useDrivers = () => {
       }
     } catch (err) {
       console.error("Unexpected error:", err);
-      setError({ message: "An unexpected error occurred" } as BackendError);
+      setError({ message: "An unexpected error occurred" } as BackendMessage);
     } finally {
       setLoading(false);
     }
diff --git a/frontend/src/hooks/driver-hooks/useEditDriver.ts b/frontend/src/hooks/driver-hooks/useEditDriver.ts
index 2534470a..847e5d75 100644
--- a/frontend/src/hooks/driver-hooks/useEditDriver.ts
+++ b/frontend/src/hooks/driver-hooks/useEditDriver.ts
@@ -1,5 +1,5 @@
 import { fetchWithAuth } from "../../utils/fetch";
-import { BackendError } from "../../types/error.types";
+import { BackendMessage } from "../../types/response.types";
 import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports";
 import { DriverWithVandC } from "../../types/datatypes";
 import useLoading from "../context-hooks/useLoading";
@@ -23,7 +23,7 @@ export const useEditDriver = () => {
       );
 
       if (!response.ok) {
-        const errorData: BackendError = await response.json();
+        const errorData: BackendMessage = await response.json();
         toast.error(errorData.message);
         return;
       }
diff --git a/frontend/src/hooks/driver-hooks/useGetDriver.ts b/frontend/src/hooks/driver-hooks/useGetDriver.ts
index d186e055..db214305 100644
--- a/frontend/src/hooks/driver-hooks/useGetDriver.ts
+++ b/frontend/src/hooks/driver-hooks/useGetDriver.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { BackendError } from "../../types/error.types";
+import { BackendMessage } from "../../types/response.types";
 import { toast } from "react-toastify";
 import { DriverWithVandC } from "../../types/datatypes";
 import { fetchWithAuth } from "../../utils/fetch";
@@ -23,14 +23,14 @@ const useGetDriver = (id: string) => {
         );
 
         if (response.status === 401) {
-          const backendError: BackendError = await response.json();
+          const backendError: BackendMessage = await response.json();
           toast.error(backendError.message);
           navigate("/unauthorized");
           return {};
         }
 
         if (!response.ok) {
-          const backendError: BackendError = await response.json();
+          const backendError: BackendMessage = await response.json();
           toast.error(backendError.message);
           return {};
         }
diff --git a/frontend/src/hooks/registration-hooks/useAddRegistration.ts b/frontend/src/hooks/registration-hooks/useAddRegistration.ts
index 545983bd..30cb6f94 100644
--- a/frontend/src/hooks/registration-hooks/useAddRegistration.ts
+++ b/frontend/src/hooks/registration-hooks/useAddRegistration.ts
@@ -1,4 +1,4 @@
-import { BackendError } from "../../types/error.types";
+import { BackendMessage } from "../../types/response.types";
 import { Registration } from "../../types/datatypes";
 import { fetchWithAuth } from "../../utils/fetch";
 import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports";
@@ -7,7 +7,7 @@ import { useState } from "react";
 
 export const useAddRegistration = () => {
   const { auth, refresh, navigate } = useFetchWithAuthExports();
-  const [loading, setLoading] = useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false);
 
   const postRegistration = async (formData: Registration) => {
     setLoading(true);
@@ -23,15 +23,15 @@ export const useAddRegistration = () => {
       );
 
       if (!response.ok) {
-        const error: BackendError = await response.json();
-        toast.error(error.message)
-        return
+        const error: BackendMessage = await response.json();
+        toast.error(error.message);
+        return;
       }
     } catch (error) {
-      alert(error)
-      toast.error("Unexpected error has occured.")
+      alert(error);
+      toast.error("Unexpected error has occured.");
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   };
   return { postRegistration, loading };
diff --git a/frontend/src/hooks/registration-hooks/useGetRegistration.ts b/frontend/src/hooks/registration-hooks/useGetRegistration.ts
index 9538577b..2641d4d9 100644
--- a/frontend/src/hooks/registration-hooks/useGetRegistration.ts
+++ b/frontend/src/hooks/registration-hooks/useGetRegistration.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { Registration } from "../../types/datatypes.ts";
-import { BackendError } from "../../types/error.types.ts";
+import { BackendMessage } from "../../types/response.types.ts";
 import { fetchWithAuth } from "../../utils/fetch.tsx";
 import useFetchWithAuthExports from "../context-hooks/useFetchWithAuthExports.ts";
 
@@ -25,7 +25,7 @@ const useGetRegistration = () => {
         );
 
         if (!response.ok) {
-          const backendError: BackendError = await response.json();
+          const backendError: BackendMessage = await response.json();
           toast.error(backendError.message);
           return;
         }
diff --git a/frontend/src/hooks/useAddRegistration.ts b/frontend/src/hooks/useAddRegistration.ts
index 64ad9fc5..1787de64 100644
--- a/frontend/src/hooks/useAddRegistration.ts
+++ b/frontend/src/hooks/useAddRegistration.ts
@@ -1,11 +1,11 @@
 import { useState } from "react";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types";
 import { Registration } from "../types/datatypes";
 import { fetchWithAuth } from "../utils/fetch";
 import useFetchWithAuthExports from "./context-hooks/useFetchWithAuthExports";
 
 export const useAddRegistration = () => {
-  const [error, setError] = useState<BackendError | null>(null); // Handle errors
+  const [error, setError] = useState<BackendMessage | null>(null); // Handle errors
   const [loading, setLoading] = useState<boolean>(); // Track loading state
   const { auth, refresh, navigate } = useFetchWithAuthExports();
 
@@ -23,12 +23,12 @@ export const useAddRegistration = () => {
       );
 
       if (!response.ok) {
-        const error: BackendError = await response.json();
+        const error: BackendMessage = await response.json();
         setError(error);
       }
     } catch (error) {
       console.error("Unexpected error:", error);
-      setError({ message: "An unexpected error occurred" } as BackendError);
+      setError({ message: "An unexpected error occurred" } as BackendMessage);
     } finally {
       setTimeout(() => {
         setLoading(false);
diff --git a/frontend/src/hooks/useChangePassword.ts b/frontend/src/hooks/useChangePassword.ts
index 0efd0fa3..021ad07b 100644
--- a/frontend/src/hooks/useChangePassword.ts
+++ b/frontend/src/hooks/useChangePassword.ts
@@ -2,7 +2,7 @@ import { useState } from "react";
 import useFetchWithAuthExports from "./context-hooks/useFetchWithAuthExports";
 import { fetchWithAuth } from "../utils/fetch";
 import { toast } from "react-toastify";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types";
 
 const useChangePassword = () => {
   const { auth, navigate, refresh } = useFetchWithAuthExports();
@@ -24,7 +24,7 @@ const useChangePassword = () => {
       );
 
       if (!response.ok) {
-        const backendError: BackendError = await response.json();
+        const backendError: BackendMessage = await response.json();
         toast.error(backendError.message);
         return;
       }
diff --git a/frontend/src/hooks/useEditViolation.ts b/frontend/src/hooks/useEditViolation.ts
index 5d5c75ed..3090245f 100644
--- a/frontend/src/hooks/useEditViolation.ts
+++ b/frontend/src/hooks/useEditViolation.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types";
 import { toast } from "react-toastify";
 import { Violation } from "../types/datatypes";
 import { fetchWithAuth } from "../utils/fetch";
@@ -24,26 +24,26 @@ const useEditViolation = (id: string) => {
         );
 
         if (response.status === 401) {
-          const backendError: BackendError = await response.json();
+          const backendError: BackendMessage = await response.json();
           toast.error(backendError.message);
           navigate("/unauthorized");
-          throw Error("WALA TAWO NGA LOGGED IN")
+          throw Error("WALA TAWO NGA LOGGED IN");
         }
 
         if (!response.ok) {
-          const backendError: BackendError = await response.json();
+          const backendError: BackendMessage = await response.json();
           toast.error(backendError.message);
-          throw Error("may sala sa backend hahaha")
+          throw Error("may sala sa backend hahaha");
         }
 
         const editedViolation = await response.json();
         setViolation(editedViolation);
       } catch (error) {
-        console.error(error)
+        console.error(error);
       }
     };
 
-    editViolation(id)
+    editViolation(id);
   }, [auth, id, navigate, refresh]);
 
   return { violation, loading };
diff --git a/frontend/src/hooks/useGetRegistration.ts b/frontend/src/hooks/useGetRegistration.ts
index af08797b..2a2a3f0b 100644
--- a/frontend/src/hooks/useGetRegistration.ts
+++ b/frontend/src/hooks/useGetRegistration.ts
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { Registration } from "../types/datatypes.ts";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types.ts";
 import { fetchWithAuth } from "../utils/fetch.tsx";
 import useFetchWithAuthExports from "./context-hooks/useFetchWithAuthExports.ts";
 
@@ -25,7 +25,7 @@ const useGetRegistration = () => {
         );
 
         if (!response.ok) {
-          const backendError: BackendError = await response.json();
+          const backendError: BackendMessage = await response.json();
           toast.error(backendError.message);
           return;
         }
diff --git a/frontend/src/hooks/useGetViolators.ts b/frontend/src/hooks/useGetViolators.ts
index b4246fff..596d4b07 100644
--- a/frontend/src/hooks/useGetViolators.ts
+++ b/frontend/src/hooks/useGetViolators.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types";
 import { DriverWithVandC } from "../types/datatypes";
 import { fetchWithAuth } from "../utils/fetch";
 import useFetchWithAuthExports from "./context-hooks/useFetchWithAuthExports";
@@ -23,7 +23,7 @@ const useGetViolators = () => {
         );
 
         if (!response.ok) {
-          const backendError: BackendError = await response.json();
+          const backendError: BackendMessage = await response.json();
           toast.error(backendError.message);
           return;
         }
diff --git a/frontend/src/hooks/useLogin.ts b/frontend/src/hooks/useLogin.ts
index d84f6fe8..b70438fa 100644
--- a/frontend/src/hooks/useLogin.ts
+++ b/frontend/src/hooks/useLogin.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { AuthContextType, UserLogin } from "../types/user.types";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types";
 import { useNavigate } from "react-router-dom";
 import useAuth from "./context-hooks/useAuth";
 import { LoadingContextType } from "../types/loading.types";
@@ -28,7 +28,7 @@ const useLogin = () => {
       const response = await normalFetch("/auth/login", "post", data);
 
       if (!response.ok) {
-        const backendError: BackendError = await response.json();
+        const backendError: BackendMessage = await response.json();
         toast.error(`${backendError.message}`);
 
         // stop button loading here after error
diff --git a/frontend/src/hooks/useLogout.ts b/frontend/src/hooks/useLogout.ts
index 5ae55bd5..b82171f9 100644
--- a/frontend/src/hooks/useLogout.ts
+++ b/frontend/src/hooks/useLogout.ts
@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router-dom";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types";
 import { AuthContextType } from "../types/user.types";
 import useAuth from "./context-hooks/useAuth";
 import { LoadingContextType } from "../types/loading.types";
@@ -18,7 +18,7 @@ const useLogout = () => {
       const response = await normalFetch("/auth/logout", "get");
 
       if (!response.ok) {
-        const backendError: BackendError = await response.json();
+        const backendError: BackendMessage = await response.json();
         toast.error("Something went wrong!");
         throw new Error(`${backendError.title}: ${backendError.message}`);
       }
diff --git a/frontend/src/hooks/useRefresh.ts b/frontend/src/hooks/useRefresh.ts
index 7acad25d..b393d9df 100644
--- a/frontend/src/hooks/useRefresh.ts
+++ b/frontend/src/hooks/useRefresh.ts
@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { AuthContextType } from "../types/user.types";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types";
 import useAuth from "./context-hooks/useAuth";
 
 const useRefresh = () => {
   const { setAuth }: AuthContextType = useAuth();
-  const [error, setError] = useState<BackendError>();
+  const [error, setError] = useState<BackendMessage>();
   const [loading, setLoading] = useState<boolean>(true);
 
   const refresh = async () => {
@@ -18,7 +18,7 @@ const useRefresh = () => {
     });
 
     if (!response.ok) {
-      const backendError: BackendError = await response.json();
+      const backendError: BackendMessage = await response.json();
       setError(backendError);
       setLoading(false);
       return undefined;
diff --git a/frontend/src/hooks/useSendNotifications.ts b/frontend/src/hooks/useSendNotifications.ts
index 12332e52..f11c6757 100644
--- a/frontend/src/hooks/useSendNotifications.ts
+++ b/frontend/src/hooks/useSendNotifications.ts
@@ -1,46 +1,46 @@
-import { useState } from "react";
 import { toast } from "react-toastify";
-import useCheckLicenseNumber from "../hooks/car-hooks/useCheckLicenseNumber";
+import { fetchWithAuth } from "../utils/fetch";
+import useFetchWithAuthExports from "./context-hooks/useFetchWithAuthExports";
+import { BackendMessage } from "../types/response.types";
+import { LoadingContextType } from "../types/loading.types";
+import useLoading from "./context-hooks/useLoading";
+import { UserNotification } from "../types/datatypes";
 
 const useSendNotification = () => {
-  const [licenseNumber, setLicenseNumber] = useState<string>("");
-  const [licenseError, setLicenseError] = useState<string>("");
-  // const [licenseExists, setLicenseExists] = useState<boolean>(false);
-  const [currentStep, setCurrentStep] = useState(1);
-  
-  const { checkLicenseNumber } = useCheckLicenseNumber();
+  const { auth, refresh, navigate } = useFetchWithAuthExports();
+  const { setAppLoading }: LoadingContextType = useLoading();
 
-  const handleCheckLicense = async () => {
+  const handleSendNotification = async (formData: UserNotification) => {
+    setAppLoading!(true);
     try {
-      if (!licenseNumber.trim()) {
-        toast.error("License Number is required.");
-        return;
-      }
+      const response = await fetchWithAuth(
+        navigate,
+        refresh,
+        auth,
+        "/notification/add",
+        "post",
+        formData
+      );
 
-      const driverData = await checkLicenseNumber(licenseNumber.trim());
-      if (!driverData) {
-        setLicenseError("This license number does not exist in our records.");
+      if (!response.ok) {
+        const backendError: BackendMessage = await response.json();
+        toast.error(backendError.message);
         return;
       }
 
-      // Set driver data and clear error
-      // setLicenseExists(driverData);
-      setLicenseError("");
-      setCurrentStep(2);  // Move to the next step
+      const backendNotification: BackendMessage = await response.json();
+
+      toast.success(backendNotification.message);
     } catch (error) {
-      console.error("Error checking license number:", error);
-      setLicenseError("An error occurred while checking the license number.");
+      const errorMessage = (error as Error).message;
+      toast.error(errorMessage);
+    } finally {
+      setAppLoading!(false);
     }
   };
 
   return {
-    licenseNumber,
-    setLicenseNumber,
-    licenseError,
-    // licenseExists,
-    currentStep,
-    setCurrentStep,
-    handleCheckLicense,
+    handleSendNotification,
   };
 };
 
diff --git a/frontend/src/hooks/useSignUp.ts b/frontend/src/hooks/useSignUp.ts
index 7f70c143..ff4e5d0b 100644
--- a/frontend/src/hooks/useSignUp.ts
+++ b/frontend/src/hooks/useSignUp.ts
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { UserSignUp } from "../types/user.types";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types";
 import { toast } from "react-toastify";
 import { normalFetch } from "../utils/fetch";
 
@@ -13,7 +13,7 @@ const useSignUp = () => {
       const response = await normalFetch("/auth/signup", "post", formData);
 
       if (!response.ok) {
-        const backendError: BackendError = await response.json();
+        const backendError: BackendMessage = await response.json();
         console.log(backendError);
         toast.error(`${backendError.message}`);
         return;
diff --git a/frontend/src/hooks/useUser.ts b/frontend/src/hooks/useUser.ts
index a18f577e..d396522e 100644
--- a/frontend/src/hooks/useUser.ts
+++ b/frontend/src/hooks/useUser.ts
@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types.ts";
 import { UserType } from "../types/datatypes.ts";
 import { fetchWithAuth } from "../utils/fetch.tsx";
 import useFetchWithAuthExports from "./context-hooks/useFetchWithAuthExports.ts";
 
 const useUser = () => {
   const [data, setData] = useState<UserType | null>(null); // Store fetched drivers
-  const [error, setError] = useState<BackendError | null>(null); // Handle errors
+  const [error, setError] = useState<BackendMessage | null>(null); // Handle errors
   const [loading, setLoading] = useState(false); // Track loading state
   const { auth, refresh, navigate } = useFetchWithAuthExports();
 
@@ -22,7 +22,7 @@ const useUser = () => {
           "get"
         );
         if (!response.ok) {
-          const error: BackendError = await response.json();
+          const error: BackendMessage = await response.json();
           setError(error);
           return;
         }
@@ -31,7 +31,7 @@ const useUser = () => {
         setData(user);
       } catch (err) {
         console.error("Error fetching user:", err);
-        setError({ message: "An unexpected error occurred" } as BackendError);
+        setError({ message: "An unexpected error occurred" } as BackendMessage);
       } finally {
         setLoading(false);
       }
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 6d925e9b..d8f8c919 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,111 +1,10 @@
 import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
-import "react-activity/dist/Spinner.css";
-import "react-toastify/dist/ReactToastify.css";
-
-import LoginPage from "./pages/LoginPage.tsx";
-import HomePage from "./pages/HomePage.tsx";
-import SignUp from "./pages/SignUpPage.tsx";
-import AboutPage from "./pages/AboutPage.tsx";
-
-import AdminLandingPage from "./pages/AdminHomePage.tsx";
-import EncodePage from "./pages/EncodePage.tsx";
-import ViolatorList from "./pages/ViolatorList.tsx";
-import DriversList from "./pages/DriverList.tsx";
-import RegisterDriver from "./pages/RegisterDriver.tsx";
-import AddDriver from "./pages/AddDriver.tsx";
-import { AuthProvider } from "./context/AuthContext.tsx";
-import UnauthorizedPage from "./pages/UnauthorizedPage.tsx";
-import HomepageDriver from "./components/NotificationsList.tsx";
-import RegistrationList from "./pages/RegistrationList.tsx";
-import RequireAuth from "./components/RequireAuth.tsx";
-import PersistLogin from "./components/PersistLogin.tsx";
-import Loading from "./components/Loading.tsx";
-import { LoadingContextType } from "./types/loading.types.ts";
-import useLoading from "./hooks/context-hooks/useLoading.ts";
-import { LoadingProvider } from "./context/LoadingContext.tsx";
 import { Slide, ToastContainer } from "react-toastify";
-import ViewProfile from "./pages/ViewProfile.tsx";
-import Protocols from "./components/Policies/protocols.tsx";
-import Rules from "./components/Policies/rules.tsx";
-import ChangePassword from "./pages/ChangePassword.tsx";
-import AddViolationPage from "./pages/AddViolationPage.tsx";
-import SendNotif from "./pages/SendNotif.tsx";
-
-const Main = () => {
-  const { appLoading }: LoadingContextType = useLoading();
-
-  return appLoading ? (
-    <div className="flex justify-center items-center h-screen bg-hoverbutton">
-      <Loading loading={appLoading} />
-    </div>
-  ) : (
-    <BrowserRouter>
-      <Routes>
-        {/* PUBLIC ROUTES */}
-        <Route path="/" element={<Navigate to="/login" replace />} />
-        <Route path="/login" element={<LoginPage />} />
-
-        <Route path="/signup" element={<SignUp />} />
-
-        <Route path="/unauthorized" element={<UnauthorizedPage />} />
-
-        <Route element={<PersistLogin />}>
-          {/* FOR ALL LOGGED IN */}
-          <Route path="/view-profile/:driverId" element={<ViewProfile />} />
-          <Route path="/changepassword" element={<ChangePassword />} />
-
-          {/* USER ROUTES */}
-          <Route element={<RequireAuth forAdmin={false} />}>
-            <Route path="/homepage" element={<HomePage />} />
-            <Route path="/about" element={<AboutPage />} />
-            <Route path="/register-driver" element={<RegisterDriver />} />
-            <Route path="/homepagedriver" element={<HomepageDriver />} />
-            <Route path="/protocols" element={<Protocols />} />
-            <Route path="/rules" element={<Rules />} />
-          </Route>
+import { AuthProvider } from "./context/AuthContext";
+import { LoadingProvider } from "./context/LoadingContext";
+import Main from "./App";
+import { createRoot } from "react-dom/client";
 
-          {/* ADMIN ROUTES */}
-          <Route element={<RequireAuth forAdmin={true} />}>
-            <Route
-              path="/admin"
-              element={<AdminLandingPage />}
-            />
-            <Route
-              path="/driverslist"
-              element={<DriversList />}
-            />
-            <Route
-              path="/encode"
-              element={<EncodePage />}
-            />
-            <Route
-              path="/add-driver"
-              element={<AddDriver />}
-            />
-            <Route
-              path="/add-violation"
-              element={<AddViolationPage />}
-            />
-            <Route
-              path="/violatorslist"
-              element={<ViolatorList />}
-            />
-            <Route
-              path="/registration-list"
-              element={<RegistrationList />}
-            />
-            <Route
-              path="/send-notif/:id"
-              element={<SendNotif />}
-            /> 
-          </Route>
-        </Route>
-      </Routes>
-    </BrowserRouter>
-  );
-};
 
 const rootElement = document.getElementById("root");
 if (rootElement) {
diff --git a/frontend/src/pages/AdminHomePage.tsx b/frontend/src/pages/AdminHomePage.tsx
index f3f0ddfa..a20d6fdf 100644
--- a/frontend/src/pages/AdminHomePage.tsx
+++ b/frontend/src/pages/AdminHomePage.tsx
@@ -32,7 +32,7 @@ const AdminLandingPage = () => {
       <div className="flex space-x-2 p-5">
         <h1 className="text-3xl text-textgreen font-syke-bold">Welcome,</h1>
         <h1 className="text-3xl text-white font-syke-bold">
-          Admin {user?.user.first_name}
+          {user?.user.first_name}
         </h1>
       </div>
 
diff --git a/frontend/src/pages/DriverList.tsx b/frontend/src/pages/DriverList.tsx
index dad70435..51acf225 100644
--- a/frontend/src/pages/DriverList.tsx
+++ b/frontend/src/pages/DriverList.tsx
@@ -54,25 +54,29 @@ const DriversList = () => {
         <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">
             {selectedDriver ? (
               <PreviewProfile selectedEntry={selectedDriver} />
             ) : (
-              <div className="text-white text-center font-syke p-2">
+              <div className="text-white text-center font-syke p-4">
                 Select a driver 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 flex justify-between items-center">
+                <div className="flex lg:flex-row flex-col text-textgreen pb-3">
                   <div>
-                    <h1 className="text-4xl font-syke-bold">Driver's List</h1>
-                    <div>List of Drivers within the university.</div>
+                    <h1 className="lg:text-4xl text-3xl font-syke-bold">
+                      Driver's List
+                    </h1>
+                    <p className="lg:text-xl md:text-lg text-md font-syke-bold">
+                      List of Drivers within the university.
+                    </p>
                   </div>
                   <SearchAndSort
                     entries={Drivers!}
diff --git a/frontend/src/pages/SendNotif.tsx b/frontend/src/pages/SendNotif.tsx
index 44435b3f..3cb129a2 100644
--- a/frontend/src/pages/SendNotif.tsx
+++ b/frontend/src/pages/SendNotif.tsx
@@ -1,16 +1,17 @@
-import { useParams } from 'react-router-dom';
-import { useState, useEffect } from 'react';
-import AdminHeader from '../components/AdminHeader';
-import useGetDriver from '../hooks/driver-hooks/useGetDriver';
-import { DriverWithVandC } from '../types/datatypes';
-import Loading from '../components/Loading';
-import { toast } from 'react-toastify';
+import { useParams } from "react-router-dom";
+import { useState, useEffect } from "react";
+import AdminHeader from "../components/AdminHeader";
+import useGetDriver from "../hooks/driver-hooks/useGetDriver";
+import { DriverWithVandC } from "../types/datatypes";
+import Loading from "../components/Loading";
+import useSendNotification from "../hooks/useSendNotifications";
 
 const SendNotif: React.FC = () => {
   const { id } = useParams<{ id: string }>();
-  const [title, setTitle] = useState<string>('');
-  const [message, setMessage] = useState<string>('');
+  const [title, setTitle] = useState<string>("");
+  const [message, setMessage] = useState<string>("");
   const { loading, driver } = useGetDriver(id!);
+  const { handleSendNotification } = useSendNotification();
 
   const [formData, setFormData] = useState<DriverWithVandC | null>(null);
 
@@ -28,9 +29,11 @@ const SendNotif: React.FC = () => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!formData) return;
-    toast.success('Message submitted for driver');
-    setTitle('');
-    setMessage('');
+    handleSendNotification({
+      driver_id: driver.id,
+      message: message,
+      title: title,
+    });
   };
 
   if (loading) {
@@ -46,16 +49,22 @@ const SendNotif: React.FC = () => {
       <AdminHeader />
       <div className="w-[40rem] h-auto bg-gray-400 rounded-lg bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
         <div className="p-5 max-w-xl mx-auto items-center">
-        <div className='flex space-x-2 py-3'>
-          <h1 className="text-2xl font-syke-medium text-textgreen flex space-x-4">
-            Send a Notification to </h1>
-            <h1 className='text-white font-syke-bold text-2xl'>{formData.last_name}, {formData.first_name} </h1>
+          <div className="flex space-x-2 py-3">
+            <h1 className="text-2xl font-syke-medium text-textgreen flex space-x-4">
+              Send a Notification to{" "}
+            </h1>
+            <h1 className="text-white font-syke-bold text-2xl">
+              {formData.last_name}, {formData.first_name}{" "}
+            </h1>
           </div>
 
-
           <form onSubmit={handleSubmit}>
             <div className="mb-4">
-              <label htmlFor="title" className="block text-sm text-white mb-1 font-syke-medium">Title</label>
+              <label
+                htmlFor="title"
+                className="block text-sm text-white mb-1 font-syke-medium">
+                Title
+              </label>
               <input
                 placeholder="Title"
                 type="text"
@@ -67,20 +76,22 @@ const SendNotif: React.FC = () => {
               />
             </div>
             <div className="mb-4">
-              <label htmlFor="body" className="block text-sm font-syke-medium text-white mb-1">Body</label>
+              <label
+                htmlFor="body"
+                className="block text-sm font-syke-medium text-white mb-1">
+                Body
+              </label>
               <textarea
                 placeholder="Write your notification..."
                 id="body"
                 value={message}
                 onChange={(e) => setMessage(e.target.value)}
                 className="scrollbar w-full px-3 py-2 font-syke-light bg-secondgrey text-white border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-buttongreen focus:border-buttongreen h-[15rem]"
-                required
-              ></textarea>
+                required></textarea>
             </div>
             <button
               type="submit"
-              className="px-4 py-2 bg-buttongreen text-white font-semibold rounded shadow-md hover:bg-colorhover focus:outline-none"
-            >
+              className="px-4 py-2 bg-buttongreen text-white font-semibold rounded shadow-md hover:bg-colorhover focus:outline-none">
               Send Notification
             </button>
           </form>
diff --git a/frontend/src/types/datatypes.ts b/frontend/src/types/datatypes.ts
index 933b5ef8..774e9b92 100644
--- a/frontend/src/types/datatypes.ts
+++ b/frontend/src/types/datatypes.ts
@@ -91,6 +91,7 @@ export interface UserType {
 export interface UserNotification {
   id?: string;
   driver_id?: string;
+  title?: string;
   message?: string;
   sender?: "Central Philippine School";
   date_sent?: string;
diff --git a/frontend/src/types/error.types.ts b/frontend/src/types/response.types.ts
similarity index 52%
rename from frontend/src/types/error.types.ts
rename to frontend/src/types/response.types.ts
index d5a50dc8..4a8f3f42 100644
--- a/frontend/src/types/error.types.ts
+++ b/frontend/src/types/response.types.ts
@@ -1,4 +1,4 @@
-export interface BackendError {
+export interface BackendMessage {
   title: string;
   message: string;
 }
diff --git a/frontend/src/utils/fetch.tsx b/frontend/src/utils/fetch.tsx
index b6985d77..dee1b58e 100644
--- a/frontend/src/utils/fetch.tsx
+++ b/frontend/src/utils/fetch.tsx
@@ -1,5 +1,5 @@
 import { NavigateFunction } from "react-router-dom";
-import { BackendError } from "../types/error.types";
+import { BackendMessage } from "../types/response.types";
 import { User } from "../types/user.types";
 
 export const normalFetch = async (
@@ -58,7 +58,7 @@ export const fetchWithAuth = async (
     );
 
     if (!newResponse.ok) {
-      const backendError: BackendError = await newResponse.json();
+      const backendError: BackendMessage = await newResponse.json();
       navigate("/unauthorized");
       throw new Error(backendError.title + ": " + backendError.message);
     }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index c241f5d6..772b9f65 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -12,7 +12,9 @@ export default {
         "2xl": "1536px",
       },
       fontSize: {
+        "2xxs": ["0.5rem", "0.8rem"],
         xxs: ["0.5rem", "0.75rem"],
+        xxxs: ["0.4rem", "0.65rem"],
       },
       colors: {
         textgreen: "#86C232",