diff --git a/frontend/src/components/AdminHeader.tsx b/frontend/src/components/AdminHeader.tsx
index 8d9fcfc..c8c9101 100644
--- a/frontend/src/components/AdminHeader.tsx
+++ b/frontend/src/components/AdminHeader.tsx
@@ -89,17 +89,17 @@ const AdminHeader = () => {
                   <span
                     onClick={handleViolators}
                     className="z-50 block px-4 py-2 hover:bg-buttongreen cursor-pointer hover:rounded-t-md">
-                    Violator's List
+                    Violators List
                   </span>
                   <span
                     onClick={handleDrivers}
                     className=" z-50 block px-4 py-2 hover:bg-buttongreen cursor-pointer">
-                    Driver's List
+                    Drivers List
                   </span>
                   <span
                     onClick={handleRegistrations}
                     className="z-50 block px-4 py-2 hover:bg-buttongreen cursor-pointer hover:rounded-b-md">
-                    Registration's List
+                    Registrations List
                   </span>
                 </div>
               )}
diff --git a/frontend/src/hooks/useLogin.ts b/frontend/src/hooks/useLogin.ts
index b70438f..ea003ec 100644
--- a/frontend/src/hooks/useLogin.ts
+++ b/frontend/src/hooks/useLogin.ts
@@ -48,7 +48,8 @@ const useLogin = () => {
       // To either navigate to the previous page where they go logged off or the landing page
       navigate(userInfo.isAdmin ? "/admin" : "/homepage");
     } catch (error) {
-      alert(error);
+      const errorMessage = (error as Error).message;
+      toast.error(errorMessage);
     } finally {
       // stop the loadings
       setAppLoading!(false);
diff --git a/frontend/src/pages/AddViolationPage.tsx b/frontend/src/pages/AddViolationPage.tsx
index da60502..cc7f6bf 100644
--- a/frontend/src/pages/AddViolationPage.tsx
+++ b/frontend/src/pages/AddViolationPage.tsx
@@ -2,17 +2,17 @@ import { useNavigate } from "react-router-dom";
 import AdminHeader from "../components/AdminHeader";
 import { useState } from "react";
 import { toast } from "react-toastify";
-import useCheckLicenseNumber from "../hooks/car-hooks/useCheckLicenseNumber"; 
+import useCheckLicenseNumber from "../hooks/car-hooks/useCheckLicenseNumber";
 import { DriverWithVandC } from "../types/datatypes";
 import AddViolationComponent from "../components/AddViolationComponent";
 
 const AddViolation = () => {
   const navigate = useNavigate();
-  const { checkLicenseNumber, loading } = useCheckLicenseNumber(); 
+  const { checkLicenseNumber, loading } = useCheckLicenseNumber();
 
   const [currentStep, setCurrentStep] = useState(1);
   const [licenseNumber, setLicenseNumber] = useState("");
-  const [driverProfile, setDriverProfile] = useState<DriverWithVandC>(); 
+  const [driverProfile, setDriverProfile] = useState<DriverWithVandC>();
   const [violationModalActive, setViolationModalActive] = useState(false);
 
   const handleCancelButton = () => {
@@ -47,14 +47,19 @@ const AddViolation = () => {
         <div className="w-full max-w-lg px-6 py-5 bg-gray-400 rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
           <div className="text-left font-syke-light text-white">
             <div className="text-textgreen">
-              <h1 className="text-2xl md:text-4xl font-syke-bold">Adding a Violation</h1>
+              <h1 className="text-2xl md:text-4xl font-syke-bold">
+                Adding a Violation
+              </h1>
               <p>Find the driver by searching for the license number.</p>
             </div>
 
             <div className="mt-4">
               <form className="space-y-5">
                 <div>
-                  <label htmlFor="license_number" className="text-white font-syke-light text-lg">
+                  <label
+                    htmlFor="license_number"
+                    className="text-white font-syke-light text-lg"
+                  >
                     License Number
                   </label>
                   <input
@@ -77,7 +82,9 @@ const AddViolation = () => {
         <div className="w-full max-w-xl px-6 py-5 bg-gray-400 rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
           <div className="text-left font-syke-light text-white">
             <div className="text-textgreen">
-              <h1 className="text-2xl md:text-4xl font-syke-bold">Driver Found</h1>
+              <h1 className="text-2xl md:text-4xl font-syke-bold">
+                Driver Found
+              </h1>
               <p>Driver details are shown below.</p>
             </div>
 
@@ -85,13 +92,17 @@ const AddViolation = () => {
               <form className="space-y-4">
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <h1 className="text-white font-syke-light text-xl">Last Name</h1>
+                    <h1 className="text-white font-syke-light text-xl">
+                      Last Name
+                    </h1>
                     <h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
                       {driverProfile.last_name}
                     </h1>
                   </div>
                   <div>
-                    <h1 className="text-white font-syke-light text-xl">First Name</h1>
+                    <h1 className="text-white font-syke-light text-xl">
+                      First Name
+                    </h1>
                     <h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
                       {driverProfile.first_name}
                     </h1>
@@ -104,25 +115,33 @@ const AddViolation = () => {
                     </h1>
                   </div>
                   <div>
-                    <h1 className="text-white font-syke-light text-xl">Date of Birth</h1>
+                    <h1 className="text-white font-syke-light text-xl">
+                      Date of Birth
+                    </h1>
                     <h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
                       {driverProfile.date_of_birth}
                     </h1>
                   </div>
                   <div>
-                    <h1 className="text-white font-syke-light text-xl">Driver Type</h1>
+                    <h1 className="text-white font-syke-light text-xl">
+                      Driver Type
+                    </h1>
                     <h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
                       {driverProfile.driver_type}
                     </h1>
                   </div>
                   <div>
-                    <h1 className="text-white font-syke-light text-xl">License Number</h1>
+                    <h1 className="text-white font-syke-light text-xl">
+                      License Number
+                    </h1>
                     <h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
                       {driverProfile.license_number}
                     </h1>
                   </div>
                   <div>
-                    <h1 className="text-white font-syke-light text-xl">License Expiration Date</h1>
+                    <h1 className="text-white font-syke-light text-xl">
+                      License Expiration Date
+                    </h1>
                     <h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
                       {driverProfile.license_expiration_date}
                     </h1>
@@ -166,21 +185,21 @@ const AddViolation = () => {
             <button
               type="button"
               className="w-32 bg-buttongreen font-syke-medium text-white py-2 hover:bg-[#33471a] font-syke-regular transition-colors rounded-sm"
-              onClick={() => setViolationModalActive(true)}>
+              onClick={() => setViolationModalActive(true)}
+            >
               Add Violation
             </button>
-          </div>
-        </div>
-      )}
-      {violationModalActive && (
-        <AddViolationComponent
-          driverId={driverProfile!.id!}
-          setViolationModalActive={setViolationModalActive}
-        />
-      )}
+          </>
+        )}
+        {violationModalActive && (
+          <AddViolationComponent
+            driverId={driverProfile!.id!}
+            setViolationModalActive={setViolationModalActive}
+          />
+        )}
+      </div>
     </div>
   );
 };
 
 export default AddViolation;
-
diff --git a/frontend/src/pages/AdminHomePage.tsx b/frontend/src/pages/AdminHomePage.tsx
index 3b676ba..5949990 100644
--- a/frontend/src/pages/AdminHomePage.tsx
+++ b/frontend/src/pages/AdminHomePage.tsx
@@ -21,50 +21,55 @@ const AdminLandingPage = () => {
   };
 
   return (
-    <div className="flex flex-col items-center bg-adminlanding-bg bg-cover bg-center sm:bg-cover md:bg-contain lg:bg-cover h-screen">
+    <div className="flex flex-col items-center bg-adminlanding-bg bg-cover bg-center sm:bg-cover md:bg-contain lg:bg-cover h-full">
       <div>
         <AdminHeader />
       </div>
 
-      <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">
-          {user?.user.first_name}
-        </h1>
-      </div>
+      <div className="flex flex-col items-center justify-center h-full p-6">
+        <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">
+            {user?.user.first_name}
+          </h1>
+        </div>
 
-      <div className="text-xl md:text-md sm-text-sm text-white font-syke-light text-center m-2 w-[3/12]">
-        Your dashboard to monitor, manage, and maintain order within the university premises is ready.
-        <p>Let's create a safer and more organized school environment together. </p>
-      </div>
+        <div className="text-xl md:text-md sm-text-sm text-white font-syke-light text-center m-2 w-[3/12]">
+          Your dashboard to monitor, manage, and maintain order within the
+          university premises is ready.
+          <p>
+            Let's create a safer and more organized school environment together.{" "}
+          </p>
+        </div>
 
-      <div className="font-syke-medium items-center text-3xl mt-10">
-        <button
-          className="transition-transform w-full max-w-md h-12 duration-300 hover:scale-105 text-white px-5 py-4 rounded-lg bg-buttongreen active:bg-colorhover font-syke-medium"
-          onClick={handleEncodeButton}
-        >
-          Encode
-        </button>
-      </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 font-syke-medium text-3xl gap-5 mt-6 w-full max-w-4xl">
-        <button
-          className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
-          onClick={handleAddDriverButton}
-        >
-          View Drivers
-        </button>
-        <button
-          className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
-          onClick={handleAddViolationButton}
-        >
-          View Violators
-        </button>
-        <button
-          className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
-          onClick={handleRegistrationList}
-        >
-          View Registration List
-        </button>
+        <div className="font-syke-medium items-center lg:text-3xl md:text-2xl text-xl md:w-1/3 w-1/2 mb-4">
+          <button
+            className="transition-transform w-full h-full duration-300 hover:scale-105 text-white px-5 py-4 rounded-lg bg-buttongreen active:bg-colorhover font-syke-medium"
+            onClick={handleEncodeButton}
+          >
+            Encode
+          </button>
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 font-syke-medium lg:text-3xl md:text-2xl text-xl gap-5 w-full max-w-4xl">
+          <button
+            className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
+            onClick={handleAddDriverButton}
+          >
+            View Drivers
+          </button>
+          <button
+            className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
+            onClick={handleAddViolationButton}
+          >
+            View Violators
+          </button>
+          <button
+            className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
+            onClick={handleRegistrationList}
+          >
+            View Registration List
+          </button>
+        </div>
       </div>
     </div>
   );