diff --git a/client/app/auth/change-password/page.tsx b/client/app/auth/change-password/page.tsx
index 20d3edb..26bae76 100644
--- a/client/app/auth/change-password/page.tsx
+++ b/client/app/auth/change-password/page.tsx
@@ -13,6 +13,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import useChangePass from "@/hooks/auth/useChangePass";
 import { setCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -34,7 +35,7 @@ export default function ChangePassword() {
       setTime((time) => {
         if (time === 0) {
           clearInterval(timer);
-          alert("Time Expired!");
+          message.error("Time Expired!");
           router.push("/dashboard");
           return 0;
         } else return time - 0.5;
@@ -45,7 +46,7 @@ export default function ChangePassword() {
   async function submitForm() {
   
     isVerified && (await changePass()) && router.push("/dashboard");
-    !isVerified && alert("Invalid Captcha!");
+    !isVerified && message.error("Invalid Captcha!");
   }
 
   return (
diff --git a/client/app/auth/reset-password/initiate/forgetPasswordInitiate.tsx b/client/app/auth/reset-password/initiate/forgetPasswordInitiate.tsx
index bcf9fff..cda4588 100644
--- a/client/app/auth/reset-password/initiate/forgetPasswordInitiate.tsx
+++ b/client/app/auth/reset-password/initiate/forgetPasswordInitiate.tsx
@@ -9,6 +9,7 @@ import { useRouter } from "next/navigation";
 import useForgetPassInitiate from "@/hooks/auth/useForgetPassInitiate";
 import { useContext, useState } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
+import { message } from "antd";
 
 function ForgetPassInitiateForm() {
   const { userEmail, setUserEmail, initiate } = useForgetPassInitiate();
@@ -18,7 +19,7 @@ function ForgetPassInitiateForm() {
   async function handleFormSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     if (!isCaptchaVerified) {
-      alert("Please verify that you are not a robot.");
+      message.warning("Please verify that you are not a robot.");
       return;
     }
     const success = await initiate();
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
index 50115ac..8ce03a3 100644
--- a/client/app/layout.tsx
+++ b/client/app/layout.tsx
@@ -13,7 +13,7 @@ export const metadata: Metadata = {
   title: "EcoSync",
   description: "EcoSync is a platform for managing waste in DNCC.",
   icons: {
-    icon: "/logo.png",
+    icon: "/logoBlack.png",
   },
 };
 
diff --git a/client/app/profile/page.tsx b/client/app/profile/page.tsx
index 81dde4e..9e18775 100644
--- a/client/app/profile/page.tsx
+++ b/client/app/profile/page.tsx
@@ -7,7 +7,7 @@ import { PersonIcon } from "@radix-ui/react-icons";
 import { useParams } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { EditIcon, Factory, CircleUser } from "lucide-react";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import { ProfileEditModal } from "@/components/modals/ProfileEditModal";
 import useGetAllRole from "@/hooks/user_data/useGetAllRole";
 import { UpdateStsStorage } from "@/components/modals/stsControl/updateSTSStorage";
@@ -16,34 +16,33 @@ import { UpdateLandfillStorageModal } from "@/components/modals/landfillControl/
 type RolesWithPermisson = {
   id: string;
   name: string;
-  permissions: [{
-    name: string;
-    description: string;
-}]
+  permissions: [
+    {
+      name: string;
+      description: string;
+    }
+  ];
 };
 
-
 export default function ProfilePage() {
-
   const router = useRouter();
-  const { user, stsDetails, landfillDetails, getUserDetails} = useGetUserProfile(); // Destructure user and getUserDetails
+  const { user, stsDetails, landfillDetails, getUserDetails } =
+    useGetUserProfile(); // Destructure user and getUserDetails
   const [role, setRole] = useState<string>("Role Name");
   // const [permissions, setPermissions] = useState<RolesWithPermisson[]>([]);
-  const RolePlace = 'Station';
+  const RolePlace = "Station";
   const { fetchAllRoles, roles, rolesWithPermissions } = useGetAllRole();
   useEffect(() => {
     const fetchData = async () => {
       await getUserDetails();
       await fetchAllRoles();
-     
+
       setRole(user.roleName);
     };
-  
-    fetchData();
 
+    fetchData();
   }, []);
 
-
   return (
     <div className="w-screen h-fit ">
       <BackgroundComponent />
@@ -55,129 +54,212 @@ export default function ProfilePage() {
         Back to Dashboard
       </Button>
       <div className="absolute top-[20px] right-[100px] text-3xl text-white flex">
-      {user.roleName}<CircleUser className="mx-2 h-8 w-8" />
+        {user.roleName}
+        <CircleUser className="mx-2 h-8 w-8" />
       </div>
       <div className="absolute top-[85px] w-4/5 mx-40 my-24  h-4/6 flex ">
-      <div className="h-full w-96 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground p-10 rounded-xl flex flex-col justify-center items-center gap-8">
-        <Avatar className="w-24 h-24">
-          <AvatarFallback>
-            <PersonIcon className="w-3/6 h-3/6" />
-          </AvatarFallback>
-        </Avatar>
-        <h1 className="font-bold text-xl">Profile Page</h1>
-        <div className="flex flex-col justify-center items-center">
-          {/* <h1><span className="font-bold">ID: </span>{user.id}</h1> */}
-          <p><span className="font-bold">Email: </span>{user.email}</p>
-          <p><span className="font-bold">Role: </span>{user.roleName}</p>
-          <p><span className="font-bold">Profile Name: </span>{user.profileName}</p>
-          <p><span className="font-bold">Username: </span>{user.username}</p>
-          <p><span className="font-bold">Role Description: </span>{user.roleDescription}</p>
-        </div>
-        <ProfileEditModal profileInfo={user}/>
-     
-      </div>
-
-
-      <div className="h-fit w-4/6 ml-32 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground p-10 rounded-xl flex flex-col justify-center items-center gap-8">
-        
-        <Factory className="w-24 h-24" />
-  
-        {user?.roleName === 'STS_MANAGER' && stsDetails?.stsId?.toString().length > 1 &&<div>
-        <div className="font-bold text-2xl mb-4">STS Details</div>
-        <p><span className="font-bold">Id: </span>{stsDetails.stsId}</p>
-          <p><span className="font-bold">STS Name: </span>{stsDetails.stsName}</p>
-          <p><span className="font-bold">Ward Number: </span>{stsDetails.stsWardNumber}</p>
-          <p><span className="font-bold">Capacity: </span>{stsDetails.stsCapacity}</p>
-          <p><span className="font-bold">Current Total Waste: </span>{stsDetails.stsCurrentTotalWaste}</p>
-          <p><span className="font-bold">Coordinate: </span>{stsDetails.stsLatitude}, {stsDetails.stsLongitude}</p>
-
-          <UpdateStsStorage />
+        <div className="h-full w-96 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground p-10 rounded-xl flex flex-col justify-center items-center gap-8">
+          <Avatar className="w-24 h-24">
+            <AvatarFallback>
+              <PersonIcon className="w-3/6 h-3/6" />
+            </AvatarFallback>
+          </Avatar>
+          <h1 className="font-bold text-xl">Profile Page</h1>
+          <div className="flex flex-col justify-center items-center">
+            {/* <h1><span className="font-bold">ID: </span>{user.id}</h1> */}
+            <p>
+              <span className="font-bold">Email: </span>
+              {user.email}
+            </p>
+            <p>
+              <span className="font-bold">Role: </span>
+              {user.roleName}
+            </p>
+            <p>
+              <span className="font-bold">Profile Name: </span>
+              {user.profileName}
+            </p>
+            <p>
+              <span className="font-bold">Username: </span>
+              {user.username}
+            </p>
+            <p>
+              <span className="font-bold">Role Description: </span>
+              {user.roleDescription}
+            </p>
+          </div>
+          <ProfileEditModal profileInfo={user} />
         </div>
-      
-        
-        }
 
-{user?.roleName === 'STS_MANAGER' && stsDetails?.stsId?.toString().length < 1 && <div>
-      <div className="font-bold text-2xl my-4">STS Not Assigned</div>
-    Call your admin to assign your STS.
-  </div>
-        }
-{user?.roleName === 'STS_MANAGER' && rolesWithPermissions.some(role => role.name === 'STS_MANAGER') && (
-  <div>
-    <h1 className="text-xl mb-3"><b>Land Manager Permissions:</b></h1>
-    <div className="flex flex-wrap items-center justify-center ">
-      {rolesWithPermissions
-        .find(role => role.name === 'STS_MANAGER')
-        ?.permissions.map(permission => (
-          <div key={permission.name} className="border-2 border-slate-400 m-2 p-3 bg-slate-300 rounded-xl">
-            <div><strong>{permission.name}:</strong></div>
-             <div> {permission.description} </div>
-          </div>
-        ))}
-    </div>
-  </div>
-)}
+        <div className="h-fit w-4/6 ml-32 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground p-10 rounded-xl flex flex-col justify-center items-center gap-8">
+          <Factory className="w-24 h-24" />
 
+          {user?.roleName === "STS_MANAGER" &&
+            stsDetails?.stsId?.toString().length > 1 && (
+              <div>
+                <div className="font-bold text-2xl mb-4">STS Details</div>
+                <p>
+                  <span className="font-bold">Id: </span>
+                  {stsDetails.stsId}
+                </p>
+                <p>
+                  <span className="font-bold">STS Name: </span>
+                  {stsDetails.stsName}
+                </p>
+                <p>
+                  <span className="font-bold">Ward Number: </span>
+                  {stsDetails.stsWardNumber}
+                </p>
+                <p>
+                  <span className="font-bold">Capacity: </span>
+                  {stsDetails.stsCapacity}
+                </p>
+                <p>
+                  <span className="font-bold">Current Total Waste: </span>
+                  {stsDetails.stsCurrentTotalWaste}
+                </p>
+                <p>
+                  <span className="font-bold">Coordinate: </span>
+                  {stsDetails.stsLatitude}, {stsDetails.stsLongitude}
+                </p>              
+              </div>
+            )}
 
-      {user?.roleName === 'LAND_MANAGER' && landfillDetails?.landfillId?.toString().length > 1 &&<div>
-        <div className="font-bold text-2xl my-4">Landfill Details </div>
-        <p><span className="font-bold">ID: </span>{landfillDetails.landfillId}</p>
-          <p><span className="font-bold">Landfill Name: </span>{landfillDetails.landFillName}</p>
-          <p><span className="font-bold">Capacity: </span>{landfillDetails.landFillCapacity}</p>
-          <p><span className="font-bold">Current Total Waste: </span>{landfillDetails.landFillCurrentWaste}</p>
-          <p><span className="font-bold">Coordinate: </span>{landfillDetails.landfillLatitude}, {landfillDetails.landFillLongitude}</p>
-        <UpdateLandfillStorageModal />
-        </div>}
+          {user?.roleName === "STS_MANAGER" &&
+            stsDetails?.stsId?.toString().length < 1 && (
+              <div>
+                <div className="font-bold text-2xl my-4">STS Not Assigned</div>
+                Call your admin to assign your STS.
+              </div>
+            )}
+          {user?.roleName === "STS_MANAGER" &&
+            rolesWithPermissions.some(
+              (role) => role.name === "STS_MANAGER"
+            ) && (
+              <div>
+                <h1 className="text-xl mb-3">
+                  <b>Land Manager Permissions:</b>
+                </h1>
+                <div className="flex flex-wrap items-center justify-center ">
+                  {rolesWithPermissions
+                    .find((role) => role.name === "STS_MANAGER")
+                    ?.permissions.map((permission) => (
+                      <div
+                        key={permission.name}
+                        className="border-2 border-slate-400 m-2 p-3 bg-slate-300 rounded-xl"
+                      >
+                        <div>
+                          <strong>{permission.name}:</strong>
+                        </div>
+                        <div> {permission.description} </div>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )}
 
-        {user?.roleName === 'LAND_MANAGER' && landfillDetails?.landfillId?.toString().length < 1 && (
-             <div>
-                   <div className="font-bold text-2xl my-4">LandFill Not Assigned</div>
-                 Call your admin to assign your Landfill.
-             </div>
-           )}
+          {user?.roleName === "LAND_MANAGER" &&
+            landfillDetails?.landfillId?.toString().length > 1 && (
+              <div>
+                <div className="font-bold text-2xl my-4">Landfill Details </div>
+                <p>
+                  <span className="font-bold">ID: </span>
+                  {landfillDetails.landfillId}
+                </p>
+                <p>
+                  <span className="font-bold">Landfill Name: </span>
+                  {landfillDetails.landFillName}
+                </p>
+                <p>
+                  <span className="font-bold">Capacity: </span>
+                  {landfillDetails.landFillCapacity}
+                </p>
+                <p>
+                  <span className="font-bold">Current Total Waste: </span>
+                  {landfillDetails.landFillCurrentWaste}
+                </p>
+                <p>
+                  <span className="font-bold">Coordinate: </span>
+                  {landfillDetails.landfillLatitude},{" "}
+                  {landfillDetails.landFillLongitude}
+                </p>
+              </div>
+            )}
 
-{user?.roleName === 'LAND_MANAGER' && rolesWithPermissions.some(role => role.name === 'LAND_MANAGER') && (
-  <div>
-    <h1 className="text-xl mb-3"><b>Land Manager Permissions:</b></h1>
-    <div className="flex flex-wrap items-center justify-center ">
-      {rolesWithPermissions
-        .find(role => role.name === 'LAND_MANAGER')
-        ?.permissions.map(permission => (
-          <div key={permission.name} className="border-2 border-slate-400 m-2 p-3 bg-slate-300 rounded-xl">
-            <div><strong>{permission.name}:</strong></div>
-             <div> {permission.description} </div>
-          </div>
-        ))}
-    </div>
-  </div>
-)}
+          {user?.roleName === "LAND_MANAGER" &&
+            landfillDetails?.landfillId?.toString().length < 1 && (
+              <div>
+                <div className="font-bold text-2xl my-4">
+                  LandFill Not Assigned
+                </div>
+                Call your admin to assign your Landfill.
+              </div>
+            )}
 
-        {user?.roleName === 'SYSTEM_ADMIN' && <div>
-        <div className="font-bold text-2xl my-4">Admin</div>
-          <div>You are admin</div>
-        </div>}
-      {user?.roleName !== 'STS_MANAGER' && user?.roleName !== 'LAND_MANAGER' && user?.roleName !== 'SYSTEM_ADMIN' && (
-        <div>Wait! Your role has not assigned yet</div>
-      )}
+          {user?.roleName === "LAND_MANAGER" &&
+            rolesWithPermissions.some(
+              (role) => role.name === "LAND_MANAGER"
+            ) && (
+              <div>
+                <h1 className="text-xl mb-3">
+                  <b>Land Manager Permissions:</b>
+                </h1>
+                <div className="flex flex-wrap items-center justify-center ">
+                  {rolesWithPermissions
+                    .find((role) => role.name === "LAND_MANAGER")
+                    ?.permissions.map((permission) => (
+                      <div
+                        key={permission.name}
+                        className="border-2 border-slate-400 m-2 p-3 bg-slate-300 rounded-xl"
+                      >
+                        <div>
+                          <strong>{permission.name}:</strong>
+                        </div>
+                        <div> {permission.description} </div>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )}
 
-{user?.roleName === 'SYSTEM_ADMIN' && rolesWithPermissions.some(role => role.name === 'SYSTEM_ADMIN') && (
-  <div>
-    <h1 className="text-xl mb-3"><b>System Admin Permissions:</b></h1>
-    <div className="flex flex-wrap items-center justify-center ">
-      {rolesWithPermissions
-        .find(role => role.name === 'SYSTEM_ADMIN')
-        ?.permissions.map(permission => (
-          <div key={permission.name} className="border-2 border-slate-400 m-2 p-3 bg-slate-300 rounded-xl">
-            <div><strong>{permission.name}:</strong></div>
-             <div> {permission.description} </div>
-          </div>
-        ))}
-    </div>
-  </div>
-)}
+          {user?.roleName === "SYSTEM_ADMIN" && (
+            <div>
+              <div className="font-bold text-2xl my-4">Admin</div>
+              <div>You are admin</div>
+            </div>
+          )}
+          {user?.roleName !== "STS_MANAGER" &&
+            user?.roleName !== "LAND_MANAGER" &&
+            user?.roleName !== "SYSTEM_ADMIN" && (
+              <div>Wait! Your role has not assigned yet</div>
+            )}
 
-      
-      </div>
+          {user?.roleName === "SYSTEM_ADMIN" &&
+            rolesWithPermissions.some(
+              (role) => role.name === "SYSTEM_ADMIN"
+            ) && (
+              <div>
+                <h1 className="text-xl mb-3">
+                  <b>System Admin Permissions:</b>
+                </h1>
+                <div className="flex flex-wrap items-center justify-center ">
+                  {rolesWithPermissions
+                    .find((role) => role.name === "SYSTEM_ADMIN")
+                    ?.permissions.map((permission) => (
+                      <div
+                        key={permission.name}
+                        className="border-2 border-slate-400 m-2 p-3 bg-slate-300 rounded-xl"
+                      >
+                        <div>
+                          <strong>{permission.name}:</strong>
+                        </div>
+                        <div> {permission.description} </div>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )}
+        </div>
       </div>
     </div>
   );
diff --git a/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx b/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx
index 4129fb1..b3e81c7 100644
--- a/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx
+++ b/client/components/dashboard-componenets/mainContent/landFillManagerContents/DumpEntry.tsx
@@ -6,6 +6,7 @@ import LandFillDeliveredVehicles from "../../../dataTables/LandFillDeliveredVehi
 import { AllStsMapShow } from "@/components/maps/AllStsShow";
 import { Button } from "@/components/ui/button";
 import { Cog, LogOut } from "lucide-react";
+import { UpdateLandfillStorageModal } from "@/components/modals/landfillControl/updateLandfillStorage";
 
 
 export default function LandfillManagerDumpEntries() {
@@ -14,13 +15,10 @@ export default function LandfillManagerDumpEntries() {
     
     <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6  max-h-[calc(100vh-60px)] overflow-scroll">
       <div className="flex items-center justify-between">
-        <h1 className="text-lg font-semibold md:text-2xl">DUMP ENTRIES</h1>
+        <h1 className="text-lg font-semibold md:text-2xl">Bills</h1>
         <div className="flex-grow-1"></div>
         <div className="flex gap-2">
-          <Button variant="ghost" size="sm" className="w-full text-md border shadow-lg py-4">            
-            OUTGOING DUMP ENTRY
-            <LogOut size={20} className="ml-4" />
-          </Button>          
+          <UpdateLandfillStorageModal />     
         </div>
       </div>
       <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">        
@@ -36,7 +34,7 @@ export default function LandfillManagerDumpEntries() {
             </EmptyFillContainer>
           </div>          
         </div>
-      </div>
+        </div>
     </main>
   );  
 }
diff --git a/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx b/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx
index 32a7f06..b296a72 100644
--- a/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx
+++ b/client/components/dashboard-componenets/mainContent/landFillManagerContents/Storage.tsx
@@ -23,8 +23,7 @@ export default function LandfillManagerStorageData() {
     getLandfillDatabyID(getCookie(landfillId))
   }, []);
 
-  useEffect(() => {
-    // alert(JSON.stringify(landfillData))
+  useEffect(() => {    
   }, [landfillData]);
 
   return (
diff --git a/client/components/dashboard-componenets/mainContent/mainSection.tsx b/client/components/dashboard-componenets/mainContent/mainSection.tsx
index fcc9c93..f988a8d 100644
--- a/client/components/dashboard-componenets/mainContent/mainSection.tsx
+++ b/client/components/dashboard-componenets/mainContent/mainSection.tsx
@@ -11,7 +11,7 @@ function MainSection({ role = "unassigned" }: { role: string }) {
   const currentState = useContext(NavContext)?.currentActive;
 
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col max-w-[100vw]">
       <MainSectionHeader role={role} subsection={currentState} />
 
       {getDashboardFor(currentState)}
diff --git a/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx b/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx
index fa61a9e..d7e2960 100644
--- a/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx
+++ b/client/components/dashboard-componenets/mainContent/mainSectionHeader.tsx
@@ -48,8 +48,9 @@ import {
   username,
 } from "@/data/cookieNames";
 import { get } from "http";
-import { landfillManager, stsManager } from "@/data/roles";
+import { admin, landfillManager, stsManager } from "@/data/roles";
 import axios from "axios";
+import { message } from "antd";
 
 function logout(router: AppRouterInstance) {
   axios.post(
@@ -63,6 +64,7 @@ function logout(router: AppRouterInstance) {
   );
   eraseCookie(role);
   eraseCookie(jwtToken);
+  message.success("logged out successfully");
   router.push("/auth/login");
 }
 
@@ -76,7 +78,7 @@ export default function MainSectionHeader({
   const router = useRouter();
   const { currentActive, setCurrentActive } = useContext(NavContext);
   return (
-    <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6 justify-between">
+    <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6 justify-between max-w-[100vw]">
       {/* Sheet for displaying menu in small screens */}
       <Sheet>
         <SheetTrigger asChild>
@@ -125,6 +127,12 @@ export default function MainSectionHeader({
           ) : (
             <>{"NO LANDFILL ASSIGNED"}</>
           ))}
+
+        {getCookie(curActive)?.startsWith(admin) && 
+            <b>
+              SYSTEM ADMIN OF ECOSYNC
+            </b>}
+
       </div>
 
       {/* Profile Icon and dropdown menu */}
diff --git a/client/components/dashboard-componenets/mainContent/stsManagerContents/Dashboard.tsx b/client/components/dashboard-componenets/mainContent/stsManagerContents/Dashboard.tsx
index 4d65975..1260ab7 100644
--- a/client/components/dashboard-componenets/mainContent/stsManagerContents/Dashboard.tsx
+++ b/client/components/dashboard-componenets/mainContent/stsManagerContents/Dashboard.tsx
@@ -10,6 +10,7 @@ import { PieChart } from "@mantine/charts";
 import LanfFillUpcomingVehiclesInDashboard from "@/components/dataTables/LandFillUpcomingVehicleInDashboard";
 import STSVehicleList from "@/components/dataTables/StsVehicleList";
 import STSVehicleHistoryList from "@/components/dataTables/STSVehicleHistoryList";
+import { UpdateStsStorage } from "@/components/modals/stsControl/updateSTSStorage";
 
 export default function STSManagerDashboard() {
   const { getstsDatabyID, stsData } = useGetstsDatabyID();
@@ -18,8 +19,7 @@ export default function STSManagerDashboard() {
     getstsDatabyID(getCookie(stsId));
   }, []);
 
-  useEffect(() => {
-    // alert(JSON.stringify(stsData))
+  useEffect(() => {    
   }, [stsData]);
 
   return (
@@ -34,10 +34,7 @@ export default function STSManagerDashboard() {
               OUTGOING DUMP ENTRY
             </Button>
           </StsVehicleEntryModal>
-          <Button size="sm" className="w-full">
-            <ArrowDown strokeWidth={3} className="py-1 mr-1 ml-[-5px]" />
-            INCOMING DUMP ENTRY
-          </Button>
+          <UpdateStsStorage />          
         </div>
       </div>
       <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
diff --git a/client/components/dashboard-componenets/mainContent/stsManagerContents/DumpEntry.tsx b/client/components/dashboard-componenets/mainContent/stsManagerContents/DumpEntry.tsx
index 4b50cb3..ad337c6 100644
--- a/client/components/dashboard-componenets/mainContent/stsManagerContents/DumpEntry.tsx
+++ b/client/components/dashboard-componenets/mainContent/stsManagerContents/DumpEntry.tsx
@@ -11,6 +11,9 @@ import LanfFillUpcomingVehiclesInDashboard from "@/components/dataTables/LandFil
 import STSVehicleList from "@/components/dataTables/StsVehicleList";
 import STSVehicleHistoryList from "@/components/dataTables/STSVehicleHistoryList";
 import GetStsCoordinateForRoute from "@/components/maps/getStsCoordinateForRoute";
+import { UpdateStsStorage } from "@/components/modals/stsControl/updateSTSStorage";
+import VehicleReleaseRoute from "@/components/maps/VehicleReleaseRoute";
+import GetVehicleCoordinateRoute from "@/components/maps/getVehicleCoordinate";
 
 export default function STSManagerDumpEntries() {
   const { getstsDatabyID, stsData } = useGetstsDatabyID();
@@ -20,7 +23,7 @@ export default function STSManagerDumpEntries() {
   }, []);
 
   useEffect(() => {
-    // alert(JSON.stringify(stsData))
+    
   }, [stsData]);
 
   return (
@@ -35,10 +38,7 @@ export default function STSManagerDumpEntries() {
               OUTGOING DUMP ENTRY
             </Button>
           </StsVehicleEntryModal>
-          <Button size="sm" className="w-full">
-            <ArrowDown strokeWidth={3} className="py-1 mr-1 ml-[-5px]" />
-            INCOMING DUMP ENTRY
-          </Button>
+          <UpdateStsStorage />
         </div>
       </div>
       <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
@@ -48,7 +48,7 @@ export default function STSManagerDumpEntries() {
           </div> */}
           <div className="col-span-1 lg:row-span-2 lg:col-span-4 min-h-[500px]">
             <EmptyFillContainer>
-              <GetStsCoordinateForRoute />
+            <GetVehicleCoordinateRoute />
             </EmptyFillContainer>
           </div>
           <div className="lg:col-span-6 min-h-48">
diff --git a/client/components/dashboard-componenets/mainContent/stsManagerContents/Storage.tsx b/client/components/dashboard-componenets/mainContent/stsManagerContents/Storage.tsx
index 5e97ad5..c5d14cd 100644
--- a/client/components/dashboard-componenets/mainContent/stsManagerContents/Storage.tsx
+++ b/client/components/dashboard-componenets/mainContent/stsManagerContents/Storage.tsx
@@ -24,7 +24,7 @@ export default function STSManagerStorageData() {
   }, []);
 
   useEffect(() => {
-    // alert(JSON.stringify(stsData))
+    
   }, [stsData]);
 
     return (
diff --git a/client/components/dashboard-componenets/mainContent/systemAdminContents/Bills.tsx b/client/components/dashboard-componenets/mainContent/systemAdminContents/Bills.tsx
index 9378846..1a8edac 100644
--- a/client/components/dashboard-componenets/mainContent/systemAdminContents/Bills.tsx
+++ b/client/components/dashboard-componenets/mainContent/systemAdminContents/Bills.tsx
@@ -1,33 +1,18 @@
 import { Button } from "@/components/ui/button";
 import { UserRoundCog, Cog } from "lucide-react";
 import EmptyFillContainer from "../../cards/EmptyFillContainer";
+import CompletedBillList from "@/components/dataTables/CompletedBillList";
+import PendingBillList from "@/components/dataTables/PendingBillList";
+import BillListAdmin from "@/components/dataTables/BillListAdmin";
 
 export default function AdminBillsManagementPanel() {
-    return (
-      <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6  max-h-[calc(100vh-60px)] overflow-scroll">
-        <div className="flex items-center justify-between">
-        <h1 className="text-lg font-semibold md:text-2xl">Bills</h1>
-        <div className="flex-grow-1"></div>
-        <div className="flex gap-2">
-          <Button size="sm" className="w-full">
-            <Cog size={16} className="mr-2" />
-            CONFIGURE BILL RATES
-          </Button>          
+  return (
+    <main className="flex flex-1 flex-col p-4 lg:p-6 max-h-[calc(100vh-60px)] overflow-scroll items-center">
+      
+        <div className="flex flex-col justify-center h-full w-full">
+          <BillListAdmin />
         </div>
-      </div>
-      <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
-        <div className="grid grid-cols-1 md:grid-cols-7 grid-rows-5 grid-flow-row gap-2 md:gap-4 w-full md:h-full max-h-max">
-          <div className="md:col-span-3 row-span-5 min-h-40">
-            <EmptyFillContainer>Recent Bills</EmptyFillContainer>
-          </div>
-          <div className="row-span-2 md:col-span-4 min-h-40">
-            <EmptyFillContainer>Search Bill</EmptyFillContainer>
-          </div>
-          <div className="row-span-3 md:col-span-4 min-h-40">
-            <EmptyFillContainer>Bill Heatmap</EmptyFillContainer>
-          </div>          
-        </div>
-      </div>
-      </main>
-    );
-  }
\ No newline at end of file
+      
+    </main>
+  );
+}
diff --git a/client/components/dashboard-componenets/mainContent/systemAdminContents/Roles.tsx b/client/components/dashboard-componenets/mainContent/systemAdminContents/Roles.tsx
index 7190efb..ef86aa1 100644
--- a/client/components/dashboard-componenets/mainContent/systemAdminContents/Roles.tsx
+++ b/client/components/dashboard-componenets/mainContent/systemAdminContents/Roles.tsx
@@ -9,7 +9,7 @@ export default function AdminRolesManagementPanel() {
   return (
     <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6  max-h-[calc(100vh-60px)] overflow-scroll">
       <div className="flex items-center justify-between">
-        <h1 className="text-lg font-semibold md:text-2xl">Roles</h1>
+        <h1 className="text-lg font-semibold md:text-2xl hidden lg:block">Roles</h1>
         <div className="flex-grow-1"></div>
         <div className="flex gap-2">
           <RoleCreateModal>
@@ -31,7 +31,7 @@ export default function AdminRolesManagementPanel() {
         </div>
       </div>
       <div className="flex max-w-[90vw] md:max-w-[100vw] items-center justify-center rounded-lg border border-dashed shadow-sm h-full">
-        <EmptyFillContainer className="flex flex-col">
+        <EmptyFillContainer className="flex flex-col overflow-scroll">
           <h1 className="text-2xl p-4 w-full text-center mb-2">
             <b>PERMISSON LIST</b> BY ROLE
           </h1>
diff --git a/client/components/dashboard-componenets/mainContent/systemAdminContents/Schedule.tsx b/client/components/dashboard-componenets/mainContent/systemAdminContents/Schedule.tsx
index 3d773c3..767a438 100644
--- a/client/components/dashboard-componenets/mainContent/systemAdminContents/Schedule.tsx
+++ b/client/components/dashboard-componenets/mainContent/systemAdminContents/Schedule.tsx
@@ -1,23 +1,20 @@
 import { Button } from "@/components/ui/button";
 import { Plus, Truck } from "lucide-react";
 import EmptyFillContainer from "../../cards/EmptyFillContainer";
+import { BillBySTSId } from "@/components/dataTables/BillBySTSId";
 
 export default function AdminSchedulePanel() {
   return (
-    <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6  max-h-[calc(100vh-60px)] overflow-scroll">
-      <div className="flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm">
-        <div className="grid grid-cols-1 md:grid-cols-2 grid-rows-2 grid-flow-row gap-2 md:gap-4 w-full md:h-full max-h-max">
-          <div className="col-span-1 row-span-1 min-h-48">
-            <EmptyFillContainer>ADD NEW SCHEDULE</EmptyFillContainer>
-          </div>
-          <div className="col-span-1 row-span-2 min-h-48">
-            <EmptyFillContainer>CRITICAL FIRST SCHEDULES</EmptyFillContainer>
-          </div>
-          <div className="col-span-1 row-span-1 min-h-48">
-            <EmptyFillContainer>DISPATCH HISTORY</EmptyFillContainer>
-          </div>
+    <main className="flex flex-1 flex-col p-4 lg:p-6 max-h-[calc(100vh-60px)] overflow-scroll items-center">
+      
+        <div>
+          SEE SCHEDULE FOR STS 1
         </div>
-      </div>
+
+        <div className="flex flex-col items-center justify-center h-full w-full">
+          <BillBySTSId stsId="sts-1" />
+        </div>
+      
     </main>
   );
 }
diff --git a/client/components/dataTables/BillBySTSId.tsx b/client/components/dataTables/BillBySTSId.tsx
new file mode 100644
index 0000000..da62473
--- /dev/null
+++ b/client/components/dataTables/BillBySTSId.tsx
@@ -0,0 +1,196 @@
+"use client";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { message } from "antd";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+const invoices = [
+  {
+    invoice: "INV001",
+    paymentStatus: "Paid",
+    totalAmount: "$250.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV002",
+    paymentStatus: "Pending",
+    totalAmount: "$150.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV003",
+    paymentStatus: "Unpaid",
+    totalAmount: "$350.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV004",
+    paymentStatus: "Paid",
+    totalAmount: "$450.00",
+    paymentMethod: "Credit Card",
+  },
+  {
+    invoice: "INV005",
+    paymentStatus: "Paid",
+    totalAmount: "$550.00",
+    paymentMethod: "PayPal",
+  },
+  {
+    invoice: "INV006",
+    paymentStatus: "Pending",
+    totalAmount: "$200.00",
+    paymentMethod: "Bank Transfer",
+  },
+  {
+    invoice: "INV007",
+    paymentStatus: "Unpaid",
+    totalAmount: "$300.00",
+    paymentMethod: "Credit Card",
+  },
+];
+
+const dummyDataArray: ScheduleEntry[] = [
+  {
+    time: "10:00 AM",
+    vehicleNumber: "MH12AB1234",
+    vehicleType: "Truck",
+    landFillName: "Landfill 1",
+    amount: "50 tons",
+    duration: "2 hours",
+  },
+  {
+    time: "12:00 PM",
+    vehicleNumber: "MH12AB1235",
+    vehicleType: "Van",
+    landFillName: "Landfill 2",
+    amount: "30 tons",
+    duration: "1.5 hours",
+  },
+  {
+    time: "02:00 PM",
+    vehicleNumber: "MH12AB1236",
+    vehicleType: "Truck",
+    landFillName: "Landfill 3",
+    amount: "60 tons",
+    duration: "2.5 hours",
+  },
+  {
+    time: "04:00 PM",
+    vehicleNumber: "MH12AB1237",
+    vehicleType: "Van",
+    landFillName: "Landfill 4",
+    amount: "40 tons",
+    duration: "2 hours",
+  },
+  {
+    time: "06:00 PM",
+    vehicleNumber: "MH12AB1238",
+    vehicleType: "Truck",
+    landFillName: "Landfill 5",
+    amount: "70 tons",
+    duration: "3 hours",
+  },
+  {
+    time: "08:00 PM",
+    vehicleNumber: "MH12AB1239",
+    vehicleType: "Van",
+    landFillName: "Landfill 6",
+    amount: "35 tons",
+    duration: "1.5 hours",
+  },
+  {
+    time: "10:00 PM",
+    vehicleNumber: "MH12AB1240",
+    vehicleType: "Truck",
+    landFillName: "Landfill 7",
+    amount: "55 tons",
+    duration: "2.5 hours",
+  },
+];
+
+type ScheduleEntry = {
+  time: string;
+  vehicleNumber: string;
+  vehicleType: string;
+  landFillName: string;
+  amount: string;
+  duration: string;
+};
+
+export function BillBySTSId({ stsId, date }: { stsId: string; date: string }) {
+  const [scheduleData, setSchedulData] = useState<ScheduleEntry[]>([]);
+  const [stsName, setStsName] = useState<string>("");
+
+  async function fetchStsScheduleData() {
+    try {
+      // fetch data from api
+      const res: any = await axios.get(
+        "http://localhost:8585/schedules/search?date=2024-01-5&stsId=sts1",
+        {
+          headers: {
+            Authorization: `Bearer ${localStorage.getItem("token")}`,
+          },
+        }
+      );
+      const data = res.data.map((d: any) => ({
+        time: d.scheduleTime,
+        vehicleNumber: d.vehicle?.vehicleNumber ?? 'N/A',
+        vehicleType: d.vehicle?.vehicleType ?? 'N/A',
+        landFillName: d.vehicle?.landFill?.name ?? 'N/A',
+        amount: d.wasteAmount ?? 'N/A',
+        duration: d.vehicle?.duration ?? 'N/A',
+      }));
+      setStsName(res.data[0].sts?.name);
+      setSchedulData(data);
+    } catch (error: any) {
+      message.error(error?.response?.data?.message || error);
+    }
+  }
+
+  useEffect(() => {
+    fetchStsScheduleData();
+  }, []);
+
+  return (
+    <Table>
+      <TableCaption>Schedule of {stsName} for 12/12/2020.</TableCaption>
+      <TableHeader className="bg-slate-100 font-bold text-black text-md">
+        <TableRow>
+          <TableHead>Time</TableHead>
+          <TableHead>Vehicle Number</TableHead>
+          <TableHead>Vehicle Type</TableHead>
+          <TableHead>Landfill Name</TableHead>
+          <TableHead>Amount</TableHead>
+          <TableHead>Duration</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {scheduleData.map((data, i) => (
+          <TableRow key={i}>
+            <TableCell>{data.time}</TableCell>
+            <TableCell>{data.vehicleNumber}</TableCell>
+            <TableCell>{data.vehicleType}</TableCell>
+            <TableCell>{data.landFillName}</TableCell>
+            <TableCell>{data.duration}</TableCell>
+            <TableCell>{data.amount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={5}>Total</TableCell>
+          <TableCell>500 tons</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  );
+}
diff --git a/client/components/dataTables/BillListAdmin.tsx b/client/components/dataTables/BillListAdmin.tsx
new file mode 100644
index 0000000..c05ecd4
--- /dev/null
+++ b/client/components/dataTables/BillListAdmin.tsx
@@ -0,0 +1,387 @@
+"use client";
+
+import * as React from "react";
+import {
+  CaretSortIcon,
+  ChevronDownIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons";
+
+import { Button } from "@/components/ui/button";
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import useGetAllVehicleList from "@/hooks/vehicles/useGetAllVehicleList";
+import { DeleteVehicleModal } from "../modals/vehicleControl/DeleteVehicleModal";
+import { EditVehicleInfoModal } from "../modals/vehicleControl/EditVehicleInfoModal";
+import useGetAllPendingBillList from "@/hooks/bills/useGetAllPendingBillList";
+import { Package, PackageCheck, PackageX } from "lucide-react";
+import { getCookie } from "@/lib/cookieFunctions";
+import { landfillId, landfillName } from "@/data/cookieNames";
+import { BillCreationModal } from "../modals/billControl/BillCreationModal";
+import useGetAllCompletedBillList from "@/hooks/bills/useGetAllCompletedBillList";
+import { BillViewModal } from "../modals/billControl/BillViewModal";
+
+export type Bill = {
+  id: string;
+  billNo: string;
+  stsName: string;
+  landFillName: string;
+  vehicleNumber: string;
+  vehicleType: string;
+  weightOfWaste: number;
+  shortage: number;
+  loadedFuelCostPerKm: number;
+  unloadedFuelCostPerKm: number;
+  capacity: number;
+  estimatedFuelCost: number;
+  distance: number;
+  estimatedDuration: number;
+  actualDuration: number;
+  allocatedFuelCost: number;
+  tripId: string;
+};
+
+export const columns: ColumnDef<Bill>[] = [
+  {
+    accessorKey: "billNo",
+    header: ({ column }) => {
+      return (
+        <div className="flex justify-center items-center">
+          <Button
+            variant="ghost"
+            className="text-center"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          >
+            Bill Number
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
+      );
+    },
+    cell: ({ row }) => (
+      <div className="text-center font-medium">{row.getValue("billNo")}</div>
+    ),
+  },
+  {
+    accessorKey: "vehicleNumber",
+    header: ({ column }) => {
+      return (
+        <div className="flex justify-center items-center">
+          <Button
+            variant="ghost"
+            className="text-center"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          >
+            Vehicle Number
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
+      );
+    },
+    cell: ({ row }) => (
+      <div className="text-center font-medium">
+        {row.getValue("vehicleNumber")}
+      </div>
+    ),
+  },
+  {
+    accessorKey: "stsName",
+    header: ({ column }) => {
+      return (
+        <div className="flex justify-center items-center">
+          <Button
+            variant="ghost"
+            className="text-center"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          >
+            STS Name
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
+      );
+    },
+    cell: ({ row }) => (
+      <div className="text-center font-medium">{row.getValue("stsName")}</div>
+    ),
+  },
+  {
+    accessorKey: "weightOfWaste",
+    header: ({ column }) => {
+      return (
+        <div className="flex justify-center items-center">
+          <Button
+            variant="ghost"
+            className="text-center"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          >
+            Weight of Waste
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
+      );
+    },
+    cell: ({ row }) => (
+      <div className="text-center font-medium">
+        {row.getValue("weightOfWaste") + " Ton"}
+      </div>
+    ),
+  },
+  {
+    accessorKey: "allocatedFuelCost",
+    header: ({ column }) => {
+      return (
+        <div className="flex justify-center items-center">
+          <Button
+            variant="ghost"
+            className="text-center"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          >
+            Allocated Fuel Cost
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
+      );
+    },
+    cell: ({ row }) => (
+      <div className="text-center font-medium">
+        {row.getValue("allocatedFuelCost")}
+      </div>
+    ),
+  },  
+  {
+    accessorKey: "actualDuration",
+    header: ({ column }) => {
+      return (
+        <div className="flex justify-center items-center">
+          <Button
+            variant="ghost"
+            className="text-center"
+            onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+          >
+            Actual Duration
+            <CaretSortIcon className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
+      );
+    },
+    cell: ({ row }) => (
+      <div className="text-center font-medium">
+        {row.getValue("actualDuration")}
+      </div>
+    ),
+  },
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const bill: Bill = row.original;
+
+      return (
+        <div>
+          {/* <DeleteVehicleModal vehicleInfo={vehicle} />          
+            <EditVehicleInfoModal vehicleInfo={vehicle} /> */}
+          <BillViewModal billInfo={bill} />
+        </div>
+      );
+    },
+  },
+];
+
+export default function BillListAdmin() {
+  const [data, setData] = React.useState<Bill[]>([]);
+  const { billList, getbillList } = useGetAllCompletedBillList();
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
+
+  React.useEffect(() => {
+    getbillList(
+      "rootSecretKey"
+    );
+  }, []);
+
+  React.useEffect(() => {
+    setData(billList);
+  }, [billList]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  });
+  return (
+    <>
+      <div className="font-bold text-2xl w-full text-center">
+        COMPLETED BILL LIST
+      </div>
+      <div className="flex items-center py-4 gap-4">
+        <Input
+          placeholder="Search by vehicle number..."
+          value={
+            (table.getColumn("vehicleNumber")?.getFilterValue() as string) ?? ""
+          }
+          onChange={(event) =>
+            table.getColumn("vehicleNumber")?.setFilterValue(event.target.value)
+          }
+          className="max-w-sm"
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Filter Vehicles <ChevronDownIcon className="ml-2 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  {billList.length > 0 ? (
+                    <div className="flex items-center justify-center text-muted-foreground gap-3 text-lg">
+                      <PackageX />
+                      No bills include this vehicle number.
+                    </div>
+                  ) : (
+                    <div className="flex items-center justify-center text-muted-foreground gap-3 text-lg">
+                      <PackageCheck />
+                      No pending bills.
+                    </div>
+                  )}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <div className="flex-1 text-sm text-muted-foreground">
+          Total {table.getFilteredRowModel().rows.length} row(s) rendered.
+        </div>
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/client/components/dataTables/LandFillUpcomingVehicle.tsx b/client/components/dataTables/LandFillUpcomingVehicle.tsx
index 8dfe0bf..0badd86 100644
--- a/client/components/dataTables/LandFillUpcomingVehicle.tsx
+++ b/client/components/dataTables/LandFillUpcomingVehicle.tsx
@@ -58,19 +58,17 @@ import { landfillId } from "@/data/cookieNames";
 import formatTimestamp from "@/lib/formatTimestamp";
 
 type Vehicle = {
-    tripId: string,
-    weightOfWaste: string,
-    vehicleNumber: string,
-    stsId: string,
-    vehicleType: string,
-    distance: string,
-    tripStartTime: string,
-    estimatedDuration: string
-    tripStatus: string
-    capacity: string,
-    
-  };
-  
+  tripId: string;
+  weightOfWaste: string;
+  vehicleNumber: string;
+  stsId: string;
+  vehicleType: string;
+  distance: string;
+  tripStartTime: string;
+  estimatedDuration: string;
+  tripStatus: string;
+  capacity: string;
+};
 
 export const columns: ColumnDef<Vehicle>[] = [
   {
@@ -90,7 +88,9 @@ export const columns: ColumnDef<Vehicle>[] = [
       );
     },
     cell: ({ row }) => (
-      <div className="text-center font-medium">{row.getValue("vehicleNumber")}</div>
+      <div className="text-center font-medium">
+        {row.getValue("vehicleNumber")}
+      </div>
     ),
   },
   {
@@ -132,7 +132,9 @@ export const columns: ColumnDef<Vehicle>[] = [
       );
     },
     cell: ({ row }) => (
-      <div className="text-center font-medium">{formatTimestamp(row.getValue("tripStartTime".toLocaleString()))}</div>
+      <div className="text-center font-medium">
+        {formatTimestamp(row.getValue("tripStartTime".toLocaleString()))}
+      </div>
     ),
   },
   {
@@ -152,7 +154,9 @@ export const columns: ColumnDef<Vehicle>[] = [
       );
     },
     cell: ({ row }) => (
-      <div className="text-center font-medium">{row.getValue("estimatedDuration")}</div>
+      <div className="text-center font-medium">
+        {row.getValue("estimatedDuration")}
+      </div>
     ),
   },
   {
@@ -192,7 +196,9 @@ export const columns: ColumnDef<Vehicle>[] = [
       );
     },
     cell: ({ row }) => (
-      <div className="text-center font-medium">{row.getValue("weightOfWaste")}</div>
+      <div className="text-center font-medium">
+        {row.getValue("weightOfWaste")}
+      </div>
     ),
   },
   {
@@ -245,11 +251,9 @@ export default function LanfFillUpcomingVehicles() {
 
   async function getAllUpcomingVehicles() {
     console.log(landfillId);
-    await UpcomingVehicle(
-      {
-        landFillId: await getCookie(landfillId)
-      }
-      );
+    await UpcomingVehicle({
+      landFillId: await getCookie(landfillId),
+    });
   }
 
   React.useEffect(() => {
@@ -276,7 +280,7 @@ export default function LanfFillUpcomingVehicles() {
       columnFilters,
       columnVisibility,
       rowSelection,
-    },  
+    },
     initialState: {
       pagination: {
         pageIndex: 0,
@@ -286,11 +290,15 @@ export default function LanfFillUpcomingVehicles() {
   });
   return (
     <>
-    <div className="flex justify-center font-bold text-2xl">UPCOMING VEHICLES</div>
+      <div className="flex justify-center font-bold text-2xl">
+        UPCOMING VEHICLES
+      </div>
       <div className="flex items-center pb-4 gap-4">
         <Input
           placeholder="Search by Vehicle Name..."
-          value={(table.getColumn("vehicleNumber")?.getFilterValue() as string) ?? ""}
+          value={
+            (table.getColumn("vehicleNumber")?.getFilterValue() as string) ?? ""
+          }
           onChange={(event) =>
             table.getColumn("vehicleNumber")?.setFilterValue(event.target.value)
           }
diff --git a/client/components/dataTables/LandFillUpcomingVehicleInDashboard.tsx b/client/components/dataTables/LandFillUpcomingVehicleInDashboard.tsx
index c344050..19ab973 100644
--- a/client/components/dataTables/LandFillUpcomingVehicleInDashboard.tsx
+++ b/client/components/dataTables/LandFillUpcomingVehicleInDashboard.tsx
@@ -58,18 +58,17 @@ import { landfillId, landfillName } from "@/data/cookieNames";
 import formatTimestamp from "@/lib/formatTimestamp";
 
 type Vehicle = {
-    tripId: string,
-    weightOfWaste: string,
-    vehicleNumber: string,
-    stsId: string,
-    vehicleType: string,
-    distance: string,
-    tripStartTime: string,
-    estimatedDuration: string
-    tripStatus: string
-    capacity: string,
-    
-  };
+  tripId: string;
+  weightOfWaste: string;
+  vehicleNumber: string;
+  stsId: string;
+  vehicleType: string;
+  distance: string;
+  tripStartTime: string;
+  estimatedDuration: string;
+  tripStatus: string;
+  capacity: string;
+};
 
 export const columns: ColumnDef<Vehicle>[] = [
   {
@@ -89,9 +88,11 @@ export const columns: ColumnDef<Vehicle>[] = [
       );
     },
     cell: ({ row }) => (
-      <div className="text-center font-medium">{row.getValue("vehicleNumber")}</div>
+      <div className="text-center font-medium">
+        {row.getValue("vehicleNumber")}
+      </div>
     ),
-  },  
+  },
   {
     accessorKey: "stsId",
     header: ({ column }) => {
@@ -129,7 +130,9 @@ export const columns: ColumnDef<Vehicle>[] = [
       );
     },
     cell: ({ row }) => (
-      <div className="text-center font-medium">{formatTimestamp(row.getValue("tripStartTime".toLocaleString()))}</div>
+      <div className="text-center font-medium">
+        {formatTimestamp(row.getValue("tripStartTime".toLocaleString()))}
+      </div>
     ),
   },
   {
@@ -149,10 +152,12 @@ export const columns: ColumnDef<Vehicle>[] = [
       );
     },
     cell: ({ row }) => (
-      <div className="text-center font-medium">{row.getValue("weightOfWaste")}</div>
+      <div className="text-center font-medium">
+        {row.getValue("weightOfWaste")}
+      </div>
     ),
   },
-  
+
   {
     id: "actions",
     enableHiding: false,
@@ -181,8 +186,8 @@ export default function LanfFillUpcomingVehiclesInDashboard() {
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState({});
 
-    async function callUpcomingVehicle() {    
-    await UpcomingVehicle(await getCookie(landfillId));
+  async function callUpcomingVehicle() {
+    await UpcomingVehicle({landFillId: await getCookie(landfillId)});
   }
 
   React.useEffect(() => {
@@ -203,27 +208,31 @@ export default function LanfFillUpcomingVehiclesInDashboard() {
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,    
+    onRowSelectionChange: setRowSelection,
     state: {
       sorting,
       columnFilters,
       columnVisibility,
-      rowSelection,      
+      rowSelection,
     },
     initialState: {
       pagination: {
         pageIndex: 0,
         pageSize: 4,
       },
-    },    
+    },
   });
   return (
     <>
-    <div className="flex justify-center font-bold text-lg">Upcoming trips to your {getCookie(landfillName)} landfill</div>
+      <div className="flex justify-center font-bold text-lg">
+        Upcoming trips to your {getCookie(landfillName)} landfill
+      </div>
       <div className="flex items-center py-4 gap-4">
         <Input
           placeholder="Search by Vehicle Name..."
-          value={(table.getColumn("vehicleNumber")?.getFilterValue() as string) ?? ""}
+          value={
+            (table.getColumn("vehicleNumber")?.getFilterValue() as string) ?? ""
+          }
           onChange={(event) =>
             table.getColumn("vehicleNumber")?.setFilterValue(event.target.value)
           }
diff --git a/client/components/lists/PermissonList.tsx b/client/components/lists/PermissonList.tsx
index b318c89..befb620 100644
--- a/client/components/lists/PermissonList.tsx
+++ b/client/components/lists/PermissonList.tsx
@@ -20,6 +20,7 @@ import {
 import { Button } from "../ui/button";
 import { updatePermisson } from "@/hooks/user_data/updatePermisson";
 import { Pointer, SquareMousePointer } from "lucide-react";
+import { message } from "antd";
 
 type RolesWithPermisson = {
   id: string;
@@ -175,7 +176,7 @@ function PermissonList() {
                       <AlertDialogCancel>Cancel</AlertDialogCancel>
                       <AlertDialogAction
                         onClick={async () => {
-                          msg && alert(await updatePermisson(msg));
+                          msg && message.info(await updatePermisson(msg));
                           await fetchAllRoles();
                           setMsg(undefined);
                         }}
diff --git a/client/components/maps/OptimizedVehicleRoute.tsx b/client/components/maps/OptimizedVehicleRoute.tsx
index cc69544..cd7aa61 100644
--- a/client/components/maps/OptimizedVehicleRoute.tsx
+++ b/client/components/maps/OptimizedVehicleRoute.tsx
@@ -25,6 +25,15 @@ import {
   useJsApiLoader,
 } from "@react-google-maps/api";
 import { ChevronDownIcon } from "@chakra-ui/icons";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
 
 const center = { lat: 23.77217046, lng: 90.39943882 };
 
@@ -34,11 +43,11 @@ type StsRouteType = {
 };
 
 type VehicleCoordinateType = {
-    vehicleNumber: string;
-    vehicleType: string;
-    capacity: string;
-    coordinate: string;
-  };
+  vehicleNumber: string;
+  vehicleType: string;
+  capacity: string;
+  coordinate: string;
+};
 
 type MapProps = {
   coordinates: StsRouteType[];
@@ -46,14 +55,15 @@ type MapProps = {
 };
 
 interface Coordinate {
-    lat: number;
-    lng: number;
+  lat: number;
+  lng: number;
 }
 
-const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }) => {
-  const [routeType, setRouteType] = useState<string>(
-    "Vehicle Tracking Map"
-  );
+const OptimizedVehicleRoute: React.FC<MapProps> = ({
+  coordinates,
+  vehicleCoord,
+}) => {
+  const [routeType, setRouteType] = useState<string>("Vehicle Tracking Map");
   const [useDropdown, setUseDropdown] = useState<boolean>(false);
   const [useLandDropdown, setUseLandDropdown] = useState<boolean>(false);
   const [searchTerm, setSearchTerm] = useState<string>("");
@@ -84,8 +94,12 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
 
   useEffect(() => {
     const coordinateArray: string[] = coordinates.map((route) => route.name);
-    const VehicleCoordinateArray: string[] = vehicleCoord.map((route) => route.vehicleNumber);
-    const VehicleCoordinateObject: string[] = vehicleCoord.map((route) => route.coordinate);
+    const VehicleCoordinateArray: string[] = vehicleCoord.map(
+      (route) => route.vehicleNumber
+    );
+    const VehicleCoordinateObject: string[] = vehicleCoord.map(
+      (route) => route.coordinate
+    );
     setAllCoordinates(coordinateArray);
     setVehicleAllCoord(VehicleCoordinateArray);
     setVehicleObjectCoord(VehicleCoordinateObject);
@@ -112,15 +126,13 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
     handleLandChangeInputType();
   };
 
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(event.target.value);
-    setShowSuggestions(true);
+  const handleInputChange = (event: string) => {
+    setSearchTerm(event);
+    //setShowSuggestions(true);
   };
-  const handleLandInputChange = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    setLandterm(event.target.value);
-    setShowLandsuggestion(true);
+  const handleLandInputChange = (event: string) => {
+    setLandterm(event);
+    //setShowLandsuggestion(true);
   };
 
   const handleSuggestionClick = (suggestion: string) => {
@@ -183,25 +195,23 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
   };
 
   async function calculateRoute() {
-   
-      const stsCoord = getSTSCoodrdinateByName(searchTerm);
-      const vehicleCoord = getVehicleCoordByName(landTerm);
-
-      const newString = stsCoord.substring(0, 11);
-      console.log(stsCoord);
-      const directionsService = new google.maps.DirectionsService();
-      const results = await directionsService.route({
-        origin: vehicleCoord,
-        destination: stsCoord,
-        travelMode: google.maps.TravelMode.DRIVING,
-      });
-
-      if (results && results.routes.length > 0) {
-        setDirectionsResponse(results);
-        setDistance(results.routes[0].legs[0].distance?.text || "");
-        setDuration(results.routes[0].legs[0].duration?.text || "");
-      }
-    
+    const stsCoord = getSTSCoodrdinateByName(searchTerm);
+    const vehicleCoord = getVehicleCoordByName(landTerm);
+
+    const newString = stsCoord.substring(0, 11);
+    console.log(stsCoord);
+    const directionsService = new google.maps.DirectionsService();
+    const results = await directionsService.route({
+      origin: vehicleCoord,
+      destination: stsCoord,
+      travelMode: google.maps.TravelMode.DRIVING,
+    });
+
+    if (results && results.routes.length > 0) {
+      setDirectionsResponse(results);
+      setDistance(results.routes[0].legs[0].distance?.text || "");
+      setDuration(results.routes[0].legs[0].duration?.text || "");
+    }
   }
 
   function clearRoute() {
@@ -214,22 +224,24 @@ const OptimizedVehicleRoute: React.FC<MapProps> = ({ coordinates, vehicleCoord }
     if (destinationRef.current) destinationRef.current.value = "";
   }
 
-//   const DummyCoordinates = [
-//     { lat: 23.76287175, lng: 90.4306625 },
-//     { lat: 23.79067691, lng: 90.3932404 },
-//     { lat: 23.75847265, lng: 90.3819107 },
-//     { lat: 23.79868747, lng: 90.3870606 },
-//     { lat: 23.79083399, lng: 90.3762459 },
-//     { lat: 23.79366130, lng: 90.4129814 },
-//     { lat: 23.77952415, lng: 90.4260277 }
-//   ];
-
-const ObjectCoordinates: Coordinate[] = vehicleObjectCoord.map(coordString => {
-    const [lat, lng] = coordString.split(',').map(parseFloat);
-    return { lat, lng };
-});
+  //   const DummyCoordinates = [
+  //     { lat: 23.76287175, lng: 90.4306625 },
+  //     { lat: 23.79067691, lng: 90.3932404 },
+  //     { lat: 23.75847265, lng: 90.3819107 },
+  //     { lat: 23.79868747, lng: 90.3870606 },
+  //     { lat: 23.79083399, lng: 90.3762459 },
+  //     { lat: 23.79366130, lng: 90.4129814 },
+  //     { lat: 23.77952415, lng: 90.4260277 }
+  //   ];
+
+  const ObjectCoordinates: Coordinate[] = vehicleObjectCoord.map(
+    (coordString) => {
+      const [lat, lng] = coordString.split(",").map(parseFloat);
+      return { lat, lng };
+    }
+  );
   const carIcon = {
-    url: 'https://banner2.cleanpng.com/20180331/tsw/kisspng-pickup-truck-car-dump-truck-clip-art-dump-truck-5abfc5a5931d73.2100081815225174136026.jpg',
+    url: "https://banner2.cleanpng.com/20180331/tsw/kisspng-pickup-truck-car-dump-truck-clip-art-dump-truck-5abfc5a5931d73.2100081815225174136026.jpg",
     scaledSize: new window.google.maps.Size(40, 40), // Adjust the size as per your icon
   };
   console.log(ObjectCoordinates);
@@ -255,9 +267,14 @@ const ObjectCoordinates: Coordinate[] = vehicleObjectCoord.map(coordString => {
           }}
           onLoad={(map) => setMap(map as google.maps.Map)}
         >
-          {map && ObjectCoordinates.map(coord => (
-        <Marker key={`${coord.lat}-${coord.lng}`} position={coord} icon={carIcon}/>
-      ))}
+          {map &&
+            ObjectCoordinates.map((coord) => (
+              <Marker
+                key={`${coord.lat}-${coord.lng}`}
+                position={coord}
+                icon={carIcon}
+              />
+            ))}
           {directionsResponse && (
             <DirectionsRenderer directions={directionsResponse} />
           )}
@@ -265,76 +282,100 @@ const ObjectCoordinates: Coordinate[] = vehicleObjectCoord.map(coordString => {
       </Box>
       <Box
         p={4}
-        borderRadius="lg"
-        m={4}
-        bgColor="white"
+        borderRadius={10}
+        m={-1}
+        bgColor="#f1f8ff"
         shadow="base"
         w="100%"
         zIndex="1"
       >
-        <div>
+        <div className="pb-3 text-center text-lg">
           <b>Vehicle Live Tracking</b>
         </div>
-        <HStack spacing={2} justifyContent="space-between">
-        <Box flexGrow={1}>
-           
-           <div>
-             <input
-               type="text"
-               placeholder="Search by Vehicle"
-               value={landTerm}
-               onChange={handleLandInputChange}
-               className="border border-gray-300 px-3 py-2 rounded-md focus:outline-none focus:border-blue-500"
-             />
-             {showLandSuggestion && (
-               <ul className="absolute z-10 mt-1 w-2/5 bg-white rounded-md shadow-lg">
-                 {landFilteredSuggestions.map((suggestion, index) => (
-                   <li
-                     key={index}
-                     onClick={() => handleLandSuggestionClick(suggestion)}
-                   >
-                     {suggestion}
-                   </li>
-                 ))}
-               </ul>
-             )}
-           </div>
-      
-       </Box>
-          <Box flexGrow={1}>
-           
-              <div>
-                <input
-                  type="text"
-                  placeholder="Search by STS"
-                  value={searchTerm}
-                  onChange={handleInputChange}
-                  className="border border-gray-300 px-1 py-2 rounded-md focus:outline-none focus:border-blue-500"
-                />
-                {showSuggestions && (
-                  <ul className="absolute z-10 mt-1 w-2/5 bg-white rounded-md shadow-lg">
-                    {filteredSuggestions.map((suggestion, index) => (
-                      <li
-                        key={index}
-                        onClick={() => handleSuggestionClick(suggestion)}
-                      >
-                        {suggestion}
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </div>
-          
-          </Box>
-         
-
-          <ButtonGroup>
+        <div className="grid grid-flow-row grid-cols-3 gap-2">
+          <Select value={landTerm} onValueChange={handleLandInputChange}>
+            <SelectTrigger>
+              <SelectValue id="vehicle" placeholder="Vehicle Number" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Vehicle</SelectLabel>
+                {landFilteredSuggestions.map((coordinate, index) => (
+                  <SelectItem key={index} value={coordinate}>
+                    {coordinate}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          {/* <Box>
+            <div>
+              <input
+                type="text"
+                placeholder="Search by Vehicle"
+                value={landTerm}
+                onChange={handleLandInputChange}
+                className="border border-gray-300 px-3 py-2 rounded-md focus:outline-none focus:border-blue-500"
+              />
+              {showLandSuggestion && (
+                <ul className="absolute z-10 mt-1 w-2/5 bg-white rounded-md shadow-lg">
+                  {landFilteredSuggestions.map((suggestion, index) => (
+                    <li
+                      key={index}
+                      onClick={() => handleLandSuggestionClick(suggestion)}
+                    >
+                      {suggestion}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </Box> */}
+          {/* <Box flexGrow={1}>
+            <div>
+              <input
+                type="text"
+                placeholder="Search by STS"
+                value={searchTerm}
+                onChange={handleInputChange}
+                className="border border-gray-300 px-1 py-2 rounded-md focus:outline-none focus:border-blue-500"
+              />
+              {showSuggestions && (
+                <ul className="absolute z-10 mt-1 w-2/5 bg-white rounded-md shadow-lg">
+                  {filteredSuggestions.map((suggestion, index) => (
+                    <li
+                      key={index}
+                      onClick={() => handleSuggestionClick(suggestion)}
+                    >
+                      {suggestion}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </div>
+          </Box> */}
+          <Select value={searchTerm} onValueChange={handleInputChange}>
+            <SelectTrigger>
+              <SelectValue id="STS" placeholder="STS Name" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>STS</SelectLabel>
+                {filteredSuggestions.map((landfilll, index) => (
+                  <SelectItem key={index} value={landfilll}>
+                    {landfilll}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <ButtonGroup className="flex justify-center">
             <Button
               colorScheme="facebook"
               type="submit"
               onClick={calculateRoute}
             >
-              Calculate Route
+              <div className="text-sm">Calculate</div>
             </Button>
             <IconButton
               aria-label="Clear Route"
@@ -342,7 +383,7 @@ const ObjectCoordinates: Coordinate[] = vehicleObjectCoord.map(coordString => {
               onClick={clearRoute}
             />
           </ButtonGroup>
-        </HStack>
+        </div>
         <HStack spacing={4} mt={4} justifyContent="space-between">
           <Text>Distance: {distance} </Text>
           <Text>Duration: {duration} </Text>
@@ -373,5 +414,5 @@ export default OptimizedVehicleRoute;
 //     "23.790833993414953, 90.37624594171659",
 //     "23.793661300302535, 90.41298147521984",
 //     "23.779524150835503, 90.42602773945464",
-    
-//     ]
\ No newline at end of file
+
+//     ]
diff --git a/client/components/modals/DeleteVehicleModalForSTS.tsx b/client/components/modals/DeleteVehicleModalForSTS.tsx
index 533f786..55f1f56 100644
--- a/client/components/modals/DeleteVehicleModalForSTS.tsx
+++ b/client/components/modals/DeleteVehicleModalForSTS.tsx
@@ -15,6 +15,7 @@ import React, { useState } from "react";
 import { Trash } from "lucide-react";
 import deleteUser from "@/hooks/user_data/deleteUser";
 import deleteVehicleEntryFromSTS from "@/hooks/StsDashboard/deleteVehicleEntryFromSTS";
+import { message } from "antd";
 
 type Vehicle = {
   entryId: string,
@@ -90,9 +91,9 @@ export const DeleteVehicleModalForSTS = ({ vehicleInfo }: { vehicleInfo: Vehicle
               type="submit"
               onClick={async () => {
                 if (confirmText !== "CONFIRM")
-                  return alert("Please type 'CONFIRM' to confirm");
+                  return message.error("Please type 'CONFIRM' to confirm");
                 const result = await deleteVehicleEntryFromSTS(vehicleInfo.entryId);
-                if (result) return alert(result);
+                if (result) return message.info(result);
               }}
             >
               Confirm
diff --git a/client/components/modals/LandFillVehicleEntryModal.tsx b/client/components/modals/LandFillVehicleEntryModal.tsx
index bf2354e..15eaf0a 100644
--- a/client/components/modals/LandFillVehicleEntryModal.tsx
+++ b/client/components/modals/LandFillVehicleEntryModal.tsx
@@ -38,6 +38,7 @@ import useTripComplete from "@/hooks/landFillDashboard/useTripComplete";
 import DatePicker from "react-datepicker";
 
 import "react-datepicker/dist/react-datepicker.css";
+import { message } from "antd";
 
 
 type Vehicle = {
@@ -84,7 +85,7 @@ const handleDateChange = (date: Date) => {
         weightOfWaste: weightOfWaste,
         entryTime: selectedDateTime.toISOString()//entryTime,
       });
-      if(postEntry) return alert(postEntry);
+      if(postEntry) return message.success(postEntry);
 
     } catch (error) {
       console.error("Error:", error);
diff --git a/client/components/modals/ProfileEditModal.tsx b/client/components/modals/ProfileEditModal.tsx
index 0243b5f..5cc6b39 100644
--- a/client/components/modals/ProfileEditModal.tsx
+++ b/client/components/modals/ProfileEditModal.tsx
@@ -37,6 +37,7 @@ import useTripComplete from "@/hooks/landFillDashboard/useTripComplete";
 import { profile } from "console";
 import useEditProfileInfo from "@/hooks/user_data/useEditProfileInfo";
 import useGetUserProfile from "@/hooks/user_data/useGetUserProfile";
+import { message } from "antd";
 
 
 type User = {
@@ -73,7 +74,7 @@ export const ProfileEditModal = ({ profileInfo }: { profileInfo: User }) => {
         profileName: profilename
       });
 
-      if(postEntry) return alert(postEntry);
+      if(postEntry) return message.success(postEntry);
       
     } catch (error) {
       console.error("Error:", error);
diff --git a/client/components/modals/STSVehicleReleaseModal.tsx b/client/components/modals/STSVehicleReleaseModal.tsx
index abc5863..02d78c7 100644
--- a/client/components/modals/STSVehicleReleaseModal.tsx
+++ b/client/components/modals/STSVehicleReleaseModal.tsx
@@ -35,6 +35,7 @@ import useVehicleReleaseFromSTS from "@/hooks/StsDashboard/useVehicleReleaseFrom
 import DatePicker from "react-datepicker";
 
 import "react-datepicker/dist/react-datepicker.css";
+import { message } from "antd";
 
 type Vehicle = {
   entryId: string;
@@ -83,7 +84,7 @@ export const STSVehicleRelease = ({
         estimatedDuration: duration,
       });
       // window.location.reload();
-      if(postEntry) return alert(postEntry);      
+      if(postEntry) return message.success(postEntry);      
     } catch (error) {
       console.error("Error:", error);
     }
diff --git a/client/components/modals/StsVehicleEntryModal.tsx b/client/components/modals/StsVehicleEntryModal.tsx
index e023a3f..fdec517 100644
--- a/client/components/modals/StsVehicleEntryModal.tsx
+++ b/client/components/modals/StsVehicleEntryModal.tsx
@@ -33,6 +33,7 @@ import {
 } from "../ui/select";
 
 import useGetSTSAvailableVehicles from "@/hooks/vehicles/useSTSAvailableVehicles";
+import { message } from "antd";
 
 
 interface DialogWrapperProps {
@@ -67,7 +68,7 @@ export const StsVehicleEntryModal: React.FC<DialogWrapperProps> = ({
   const [weightOfWaste, setWeightOfWaste] = useState("");
   const callVehcilse = async () => {
     const sucess = await GetSTSAvailableVehicles();
-      if(!sucess) return alert("Wrong Vehicle Information");
+      if(!sucess) return message.error("Wrong Vehicle Information");
   };
 
   useEffect(() => {
@@ -121,7 +122,7 @@ export const StsVehicleEntryModal: React.FC<DialogWrapperProps> = ({
         vehicleIds: vehicleId,
         entryTimes: selectedDateTime.toISOString(),
       });
-      if(postEntry) return alert(postEntry);
+      if(postEntry) return message.success(postEntry);
     } catch (error) {
       console.error("Error:", error);
     }
diff --git a/client/components/modals/VehicleModal.tsx b/client/components/modals/VehicleModal.tsx
index 61ba794..b0ae6b0 100644
--- a/client/components/modals/VehicleModal.tsx
+++ b/client/components/modals/VehicleModal.tsx
@@ -33,6 +33,7 @@ import {
 import useGetAllLandfill from "@/hooks/dataQuery/useGetAllLandfill";
 import useCreateVehicle from "@/hooks/entityCreation/useCreateVehicle";
 import useGetAllSTS from "@/hooks/stsdata/useGetAllSTS";
+import { message } from "antd";
 
 interface DialogWrapperProps {
   children: React.ReactNode;
@@ -62,10 +63,6 @@ export const VehicleCreateModal: React.FC<DialogWrapperProps> = ({
   useEffect(() => {}, [stsList]);
 
   const handleSaveChanges = async () => {
-    console.log("Vehicle Number:", vehicleNumber);
-    console.log("Vehicle Type:", vehicleType);
-    console.log("Capacity:", capacity);
-    //alert(assignedLandfill);
     const res = await createVehicle({
       vehicleNumber,
       vehicleType,
@@ -75,7 +72,7 @@ export const VehicleCreateModal: React.FC<DialogWrapperProps> = ({
       landFillId: assignedLandfill,
       stsId: assignedSTS,
     })
-    if(res) return alert(res);
+    if(res) return message.success(res);
   };
 
   return (
diff --git a/client/components/modals/billControl/BillCreationModal.tsx b/client/components/modals/billControl/BillCreationModal.tsx
index ece447f..6504da8 100644
--- a/client/components/modals/billControl/BillCreationModal.tsx
+++ b/client/components/modals/billControl/BillCreationModal.tsx
@@ -33,6 +33,7 @@ import useGetAllLandfill from "@/hooks/dataQuery/useGetAllLandfill";
 import editVehicle from "@/hooks/vehicles/editVehicle";
 import { Trip } from "@/components/dataTables/PendingBillList";
 import makeBill from "@/hooks/bills/makeBill";
+import { message } from "antd";
 
 export const BillCreationModal = ({ tripInfo }: { tripInfo: Trip }) => {
   const [allocatedCost, setAllocatedCost] = useState<number | undefined>();
@@ -131,7 +132,7 @@ export const BillCreationModal = ({ tripInfo }: { tripInfo: Trip }) => {
               onClick={async () => {
                 let result;
                 allocatedCost ? result = await makeBill(tripInfo, allocatedCost) : result = "Please enter allocated cost";
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               GENERATE BILL
diff --git a/client/components/modals/billControl/BillViewModal.tsx b/client/components/modals/billControl/BillViewModal.tsx
index 5e7806b..54fcc09 100644
--- a/client/components/modals/billControl/BillViewModal.tsx
+++ b/client/components/modals/billControl/BillViewModal.tsx
@@ -133,14 +133,7 @@ export const BillViewModal = ({ billInfo }: { billInfo: Bill }) => {
 
             <Link href={{ pathname: '/billPrint', query: { ...billInfo } }}>
             <Button
-              type="submit"
-              onClick={async () => {
-                // let result;
-                // allocatedCost
-                //   ? (result = await makeBill(billInfo, allocatedCost))
-                //   : (result = "Please enter allocated cost");
-                // if (result) return alert(result);
-              }}
+              type="submit"              
             >
               PRINT BILL
             </Button>
diff --git a/client/components/modals/landfillControl/DeleteLandfillModal.tsx b/client/components/modals/landfillControl/DeleteLandfillModal.tsx
index 754553c..0fa8aac 100644
--- a/client/components/modals/landfillControl/DeleteLandfillModal.tsx
+++ b/client/components/modals/landfillControl/DeleteLandfillModal.tsx
@@ -17,6 +17,7 @@ import deleteUser from "@/hooks/user_data/deleteUser";
 import deleteSTS from "@/hooks/entityCreation/deleteSTS";
 import { LandFill } from "@/components/dataTables/LandFillList";
 import deleteLandFill from "@/hooks/entityCreation/deleteLandfill";
+import { message } from "antd";
 
 export const DeleteLandfillModal = ({ landfillInfo }: { landfillInfo: LandFill }) => {
   const [confirmText, setConfirmText] = useState("");
@@ -77,9 +78,9 @@ export const DeleteLandfillModal = ({ landfillInfo }: { landfillInfo: LandFill }
               type="submit"
               onClick={async () => {
                 if (confirmText !== "CONFIRM")
-                  return alert("Please type 'CONFIRM' to confirm");
+                  return message.error("Please type 'CONFIRM' to confirm");
                 const result = await deleteLandFill(landfillInfo.id);
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               Confirm
diff --git a/client/components/modals/landfillControl/EditLandfillInfoModal.tsx b/client/components/modals/landfillControl/EditLandfillInfoModal.tsx
index 04eb53c..c475376 100644
--- a/client/components/modals/landfillControl/EditLandfillInfoModal.tsx
+++ b/client/components/modals/landfillControl/EditLandfillInfoModal.tsx
@@ -30,6 +30,7 @@ import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import editSTS from "@/hooks/entityCreation/editSTS";
 import getUserByRole from "@/hooks/user_data/getUserByRole";
 import editLandfill from "@/hooks/entityCreation/editLandfill";
+import { message } from "antd";
 
 type LandFill = {
   id: string;
@@ -136,7 +137,7 @@ export const EditLandfillInfoModal = ({ landfillInfo }: { landfillInfo: LandFill
               type="submit"
               onClick={async () => {
                 const result = await editLandfill(landfillData, landfillManagerData?.id || "");
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               Update Landfill
diff --git a/client/components/modals/landfillControl/LandfillModal.tsx b/client/components/modals/landfillControl/LandfillModal.tsx
index f625693..145892e 100644
--- a/client/components/modals/landfillControl/LandfillModal.tsx
+++ b/client/components/modals/landfillControl/LandfillModal.tsx
@@ -17,6 +17,7 @@ import SetZone from "../../maps/SetZone";
 import useCreateLandFill, {
   LandFill,
 } from "@/hooks/entityCreation/useCreateLandfill";
+import { message } from "antd";
 
 interface DialogWrapperProps {
   children: React.ReactNode;
@@ -38,7 +39,7 @@ export const LandfillCreateModal: React.FC<DialogWrapperProps> = ({
       latitude: parseFloat(latitude),
       longitude: parseFloat(longitude),
     };
-    alert((await createLandfill(data)) || "Landfill data invalid");
+    message.success((await createLandfill(data)) || "Landfill data invalid");
   };
 
   return (
diff --git a/client/components/modals/landfillControl/updateLandfillStorage.tsx b/client/components/modals/landfillControl/updateLandfillStorage.tsx
index 44c026f..792ebdc 100644
--- a/client/components/modals/landfillControl/updateLandfillStorage.tsx
+++ b/client/components/modals/landfillControl/updateLandfillStorage.tsx
@@ -12,13 +12,14 @@ import {
 
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import React, { use, useEffect, useState } from "react";
-import { Send, Trash,EditIcon  } from "lucide-react";
+import React, { Children, use, useEffect, useState } from "react";
+import { Send, Trash,EditIcon, LogOut  } from "lucide-react";
 
 import useEditProfileInfo from "@/hooks/user_data/useEditProfileInfo";
 import useGetUserProfile from "@/hooks/user_data/useGetUserProfile";
 import useUpdateSts from "@/hooks/StsDashboard/useUpdateSts";
 import useLandFillStorageEdit from "@/hooks/landFillDashboard/useLandFillStorageEdit";
+import { message } from "antd";
 
 
 type User = {
@@ -55,9 +56,10 @@ export const UpdateLandfillStorageModal = () => {
           landfillId: landfillDetails.landfillId
         });
 
-        if(postEntry) return alert(postEntry);
-      } catch (error) {
-        console.error("Error:", error);
+        if(postEntry) return message.success(postEntry);
+      } catch (error: any) {
+        message.error(error?.response?.data?.message || "An error occurred");
+        // console.error("Error:", error);
       }
     
   
@@ -69,10 +71,11 @@ export const UpdateLandfillStorageModal = () => {
 
   return (
     <Dialog>
-      <DialogTrigger asChild>
-        <Button variant="outline" title="Edit STS Info" className="h-8 w-24 p-0">
-        <EditIcon className="h-4 w-4" /> Edit
-        </Button>
+      <DialogTrigger asChild>        
+        <Button variant="ghost" size="sm" className="text-md border shadow-lg">            
+            OUTGOING DUMP ENTRY
+            <LogOut size={20} className="ml-4" />
+          </Button>
       </DialogTrigger>
       <DialogContent className="max-w-[425px]">
         <DialogHeader>
diff --git a/client/components/modals/stsControl/DeleteSTSModal.tsx b/client/components/modals/stsControl/DeleteSTSModal.tsx
index 52373e1..a8a03c6 100644
--- a/client/components/modals/stsControl/DeleteSTSModal.tsx
+++ b/client/components/modals/stsControl/DeleteSTSModal.tsx
@@ -15,6 +15,7 @@ import React, { useState } from "react";
 import { Trash } from "lucide-react";
 import deleteUser from "@/hooks/user_data/deleteUser";
 import deleteSTS from "@/hooks/entityCreation/deleteSTS";
+import { message } from "antd";
 
 export type STS = {
     id: string;
@@ -89,9 +90,9 @@ export const DeleteSTSModal = ({ stsInfo }: { stsInfo: STS }) => {
               type="submit"
               onClick={async () => {
                 if (confirmText !== "CONFIRM")
-                  return alert("Please type 'CONFIRM' to confirm");
+                  return message.error("Please type 'CONFIRM' to confirm");
                 const result = await deleteSTS(stsInfo.id);
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               Confirm
diff --git a/client/components/modals/stsControl/EditSTSInfoModal.tsx b/client/components/modals/stsControl/EditSTSInfoModal.tsx
index 5f4d425..d455860 100644
--- a/client/components/modals/stsControl/EditSTSInfoModal.tsx
+++ b/client/components/modals/stsControl/EditSTSInfoModal.tsx
@@ -29,6 +29,7 @@ import { number } from "prop-types";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import editSTS from "@/hooks/entityCreation/editSTS";
 import getUserByRole from "@/hooks/user_data/getUserByRole";
+import { message } from "antd";
 
 export type STS = {
   id: string;
@@ -151,7 +152,7 @@ export const EditSTSInfoModal = ({ stsInfo }: { stsInfo: STS }) => {
               type="submit"
               onClick={async () => {
                 const result = await editSTS(stsData, stsManagerData?.id || "");
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               Update STS
diff --git a/client/components/modals/stsControl/StsModal.tsx b/client/components/modals/stsControl/StsModal.tsx
index a00853a..f7e2d8a 100644
--- a/client/components/modals/stsControl/StsModal.tsx
+++ b/client/components/modals/stsControl/StsModal.tsx
@@ -16,6 +16,7 @@ import { Label } from "@/components/ui/label";
 import React , {useState} from "react";
 import SetZone from "../../maps/SetZone";
 import useCreateSTS, { STS } from "@/hooks/entityCreation/useCreateSTS";
+import { message } from "antd";
 
 interface DialogWrapperProps {
   children: React.ReactNode;
@@ -32,9 +33,8 @@ export const StsCreateModal: React.FC<DialogWrapperProps> = ({
     const {createSTS } = useCreateSTS();
 
   const handleSaveChanges = async () => {
-    const data:STS = {name: stsName, wardNumber , capacity: parseInt(capacity), latitude: parseFloat(latitude), longitude: parseFloat(longitude)};
-    console.log(data);    
-    alert(await createSTS(data) || "STS data invalid");    
+    const data:STS = {name: stsName, wardNumber , capacity: parseInt(capacity), latitude: parseFloat(latitude), longitude: parseFloat(longitude)};    
+    message.success(await createSTS(data) || "STS data invalid");    
   };
 
 
diff --git a/client/components/modals/stsControl/updateSTSStorage.tsx b/client/components/modals/stsControl/updateSTSStorage.tsx
index df019c2..28c209d 100644
--- a/client/components/modals/stsControl/updateSTSStorage.tsx
+++ b/client/components/modals/stsControl/updateSTSStorage.tsx
@@ -7,76 +7,70 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-  DialogClose
+  DialogClose,
 } from "@/components/ui/dialog";
 
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import React, { use, useEffect, useState } from "react";
-import { Send, Trash,EditIcon  } from "lucide-react";
+import { Send, Trash, EditIcon, ArrowDown } from "lucide-react";
 
 import useEditProfileInfo from "@/hooks/user_data/useEditProfileInfo";
 import useGetUserProfile from "@/hooks/user_data/useGetUserProfile";
 import useUpdateSts from "@/hooks/StsDashboard/useUpdateSts";
-
+import { message } from "antd";
 
 type User = {
   id: string;
   username: string;
   email: string;
   profileName: string;
-   roleName: string;
+  roleName: string;
   roleDescription: string;
- 
 };
 
-
 export const UpdateStsStorage = () => {
-  
+  const { user, stsDetails, landfillDetails, getUserDetails } =
+    useGetUserProfile();
 
-  const { user, stsDetails, landfillDetails, getUserDetails} = useGetUserProfile(); 
- 
+  const [username, setUsername] = useState<string>(user.username);
+  const [profilename, setProfilename] = useState<string>(user.profileName);
+  const [wastageEntry, setWastageEntry] = useState<string>(
+    stsDetails.stsCurrentTotalWaste
+  );
 
-  const [username , setUsername] = useState<string>(user.username);
-  const [profilename , setProfilename] = useState<string>(user.profileName);
-  const [wastageEntry , setWastageEntry] = useState<string>(stsDetails.stsCurrentTotalWaste);
-  
   const { UpdateSts } = useUpdateSts();
 
-
-
- 
   const handleSaveChanges = async () => {
     try {
-        const remainingCapacity = parseInt(stsDetails.stsCurrentTotalWaste) + parseInt(wastageEntry);
-        const postEntry = await UpdateSts({
-          storedData: remainingCapacity,
-          stsId: stsDetails.stsId
-        });
+      const remainingCapacity =
+        parseInt(stsDetails.stsCurrentTotalWaste) + parseInt(wastageEntry);
+      const postEntry = await UpdateSts({
+        storedData: remainingCapacity,
+        stsId: stsDetails.stsId,
+      });
 
-        if(postEntry) return alert(postEntry);
-      } catch (error) {
-        console.error("Error:", error);
-      }
-    
-  
+      if (postEntry) return message.success(postEntry);
+    } catch (error) {
+      console.error("Error:", error);
+    }
   };
   useEffect(() => {
     getUserDetails();
   }, []);
-  
 
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline" title="Edit STS Info" className="h-8 w-24 p-0">
-        <EditIcon className="h-4 w-4" /> Edit
+        <Button size="sm" className="w-full">
+          <ArrowDown strokeWidth={3} className="py-1 mr-1 ml-[-5px]" />
+          INCOMING DUMP ENTRY
         </Button>
       </DialogTrigger>
       <DialogContent className="max-w-[425px]">
         <DialogHeader>
           <DialogTitle className="mt-4 text-xl sm:text-2xl">
-           Entry Dump In STS
+            Entry Dump In STS
           </DialogTitle>
           <DialogDescription>
             <div className="mt-4 flex flex-col justify-center items-start text-left p-4 rounded-lg border shadow-xl text-md">
@@ -89,27 +83,24 @@ export const UpdateStsStorage = () => {
                 {stsDetails.stsName}
               </p>
               <p>
-              <p>
-                <span className="font-bold">Ward Number: </span>
-                {stsDetails.stsWardNumber}
-              </p>
-              <span className="font-bold">Capacity: </span>
+                <p>
+                  <span className="font-bold">Ward Number: </span>
+                  {stsDetails.stsWardNumber}
+                </p>
+                <span className="font-bold">Capacity: </span>
                 {stsDetails.stsCapacity}
               </p>
               <p>
                 <span className="font-bold">Current Total Waste: </span>
                 {stsDetails.stsCurrentTotalWaste}
               </p>
-             
-            
-              
             </div>
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid grid-cols-4 items-center gap-4">
             <Label htmlFor="name" className="text-right">
-             Entry Wastage
+              Entry Wastage
             </Label>
             <Input
               id="weight of waste"
@@ -119,13 +110,13 @@ export const UpdateStsStorage = () => {
               onChange={(e) => setWastageEntry(e.target.value)}
             />
           </div>
-          
-         
         </div>
         <DialogFooter>
-        <DialogClose asChild>
-        <Button type="button" onClick={handleSaveChanges}>Save changes</Button>
-        </DialogClose>
+          <DialogClose asChild>
+            <Button type="button" onClick={handleSaveChanges}>
+              Save changes
+            </Button>
+          </DialogClose>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/client/components/modals/userControls/AddNewUserModal.tsx b/client/components/modals/userControls/AddNewUserModal.tsx
index 27fde5b..aba3834 100644
--- a/client/components/modals/userControls/AddNewUserModal.tsx
+++ b/client/components/modals/userControls/AddNewUserModal.tsx
@@ -24,6 +24,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../../ui/select";
+import { message } from "antd";
 
 interface DialogWrapperProps {
   children: React.ReactNode;
@@ -135,7 +136,7 @@ export const AddNewUserModal = ({ props }: { props: any }) => {
               type="submit"
               onClick={async () => {
                 const result = await props.createNewUser();
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               Create User
diff --git a/client/components/modals/userControls/DeleteUserModal.tsx b/client/components/modals/userControls/DeleteUserModal.tsx
index eb4d359..08f814f 100644
--- a/client/components/modals/userControls/DeleteUserModal.tsx
+++ b/client/components/modals/userControls/DeleteUserModal.tsx
@@ -14,6 +14,7 @@ import { Label } from "@/components/ui/label";
 import React, { useState } from "react";
 import { Trash } from "lucide-react";
 import deleteUser from "@/hooks/user_data/deleteUser";
+import { message } from "antd";
 
 type User = {
   id: string;
@@ -79,9 +80,9 @@ export const DeleteUserModal = ({ userInfo }: { userInfo: User }) => {
               type="submit"
               onClick={async () => {
                 if (confirmText !== "CONFIRM")
-                  return alert("Please type 'CONFIRM' to confirm");
+                  return message.error("Please type 'CONFIRM' to confirm");
                 const result = await deleteUser(userInfo.id);
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               Confirm
diff --git a/client/components/modals/userControls/EditUserInfoModal.tsx b/client/components/modals/userControls/EditUserInfoModal.tsx
index 238c9d1..6d682a1 100644
--- a/client/components/modals/userControls/EditUserInfoModal.tsx
+++ b/client/components/modals/userControls/EditUserInfoModal.tsx
@@ -27,6 +27,7 @@ import editUser from "@/hooks/user_data/editUser";
 import gettAllRoles from "@/hooks/user_data/useGetAllRole";
 import { number } from "prop-types";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
+import { message } from "antd";
 
 type User = {
   id: string;
@@ -132,7 +133,7 @@ export const EditUserModal = ({ userInfo }: { userInfo: User }) => {
               type="submit"
               onClick={async () => {
                 const result = await editUser(userData);
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               Update User
diff --git a/client/components/modals/vehicleControl/DeleteVehicleModal.tsx b/client/components/modals/vehicleControl/DeleteVehicleModal.tsx
index 10102c1..4c32340 100644
--- a/client/components/modals/vehicleControl/DeleteVehicleModal.tsx
+++ b/client/components/modals/vehicleControl/DeleteVehicleModal.tsx
@@ -16,6 +16,7 @@ import { Trash } from "lucide-react";
 import deleteUser from "@/hooks/user_data/deleteUser";
 import deleteVehicleEntryFromSTS from "@/hooks/StsDashboard/deleteVehicleEntryFromSTS";
 import deleteVehiclebyId from "@/hooks/vehicles/deleteVehiclebyId";
+import { message } from "antd";
 
 type Vehicle = {
     id: string,
@@ -86,9 +87,9 @@ export const DeleteVehicleModal = ({ vehicleInfo }: { vehicleInfo: Vehicle }) =>
               type="submit"
               onClick={async () => {
                 if (confirmText !== "CONFIRM")
-                  return alert("Please type 'CONFIRM' to confirm");
+                  return message.error("Please type 'CONFIRM' to confirm");
                 const result = await deleteVehiclebyId(vehicleInfo.id);
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               Confirm
diff --git a/client/components/modals/vehicleControl/EditVehicleInfoModal.tsx b/client/components/modals/vehicleControl/EditVehicleInfoModal.tsx
index f64de5b..cb69c1d 100644
--- a/client/components/modals/vehicleControl/EditVehicleInfoModal.tsx
+++ b/client/components/modals/vehicleControl/EditVehicleInfoModal.tsx
@@ -32,6 +32,7 @@ import getUserByRole from "@/hooks/user_data/getUserByRole";
 import useGetAllLandfill from "@/hooks/dataQuery/useGetAllLandfill";
 import editVehicle from "@/hooks/vehicles/editVehicle";
 import useGetAllSTS from "@/hooks/stsdata/useGetAllSTS";
+import { message } from "antd";
 
 type Vehicle = {
   id: string,
@@ -216,9 +217,8 @@ export const EditVehicleInfoModal = ({ vehicleInfo }: { vehicleInfo: Vehicle })
             <Button
               type="submit"
               onClick={async () => {
-                alert(vehicleData.stsId)
                 const result = await editVehicle(vehicleData);
-                if (result) return alert(result);
+                if (result) return message.success(result);
               }}
             >
               Update Vehicle
diff --git a/client/data/apiRoutes.ts b/client/data/apiRoutes.ts
index aca9b78..930d433 100644
--- a/client/data/apiRoutes.ts
+++ b/client/data/apiRoutes.ts
@@ -63,6 +63,7 @@ export const apiRoutes = {
     bills: {
         makeBill: `${baseUrl}/bills/create-from-trip/`,
         search: `${baseUrl}/bills/search`,
+        getAll: `${baseUrl}/bills`,
     },
     profile: {
         getProfile: `${baseUrl}/profile`,
diff --git a/client/hooks/StsDashboard/deleteVehicleEntryFromSTS.tsx b/client/hooks/StsDashboard/deleteVehicleEntryFromSTS.tsx
index fe418df..d5cce9b 100644
--- a/client/hooks/StsDashboard/deleteVehicleEntryFromSTS.tsx
+++ b/client/hooks/StsDashboard/deleteVehicleEntryFromSTS.tsx
@@ -3,7 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 
 export default async function deleteVehicleEntryFromSTS(entryId: string) {
   if (entryId) {
@@ -15,8 +15,8 @@ export default async function deleteVehicleEntryFromSTS(entryId: string) {
       });
       window.location.reload();
       return "vehicle removed successfully";
-    } catch (error: any) {
-      return error.message?.toString() || "error removing vehicle";
+    } catch (error: AxiosError | any) {
+      return error?.response?.data.message?.toString() || "error removing vehicle";
     }
   }
 
diff --git a/client/hooks/StsDashboard/getStsDataById.ts b/client/hooks/StsDashboard/getStsDataById.ts
index 4ecb565..b5ff9d9 100644
--- a/client/hooks/StsDashboard/getStsDataById.ts
+++ b/client/hooks/StsDashboard/getStsDataById.ts
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 import { useState, useEffect, use } from "react";
 import { set } from "react-hook-form";
@@ -51,8 +52,7 @@ export default function useGetstsDatabyID() {
       console.log(stsData);
       return stsData;
     } catch (error: any) {
-      alert("Error fetching sts data... Are you authorized?");
-      console.log(error.message);
+      message.error(error?.response?.data?.message + "Error fetching sts data... Are you authorized?");      
     }
   }
 
diff --git a/client/hooks/StsDashboard/useUpdateSts.tsx b/client/hooks/StsDashboard/useUpdateSts.tsx
index 429fc44..4f0bbd9 100644
--- a/client/hooks/StsDashboard/useUpdateSts.tsx
+++ b/client/hooks/StsDashboard/useUpdateSts.tsx
@@ -3,6 +3,7 @@ import { setCookie, getCookie } from '@/lib/cookieFunctions';
 import axios from 'axios';
 import { jwtToken, stsId } from '@/data/cookieNames'; // Ensure these variables are properly defined
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 
 export default function useUpdateSts() {
   async function UpdateSts(data: {
@@ -32,8 +33,8 @@ export default function useUpdateSts() {
       window.location.reload();
       return "Wastege Entry in STS Successful";
     } catch (error: any) {
-      alert(error.message?.toString() || 'Error Editing');
-      return false;
+      message.error(error.message?.toString() || 'Error Editing');
+      return null;
     }
   }
 
diff --git a/client/hooks/StsDashboard/useVehicleEntry.tsx b/client/hooks/StsDashboard/useVehicleEntry.tsx
index b583f0e..9dba127 100644
--- a/client/hooks/StsDashboard/useVehicleEntry.tsx
+++ b/client/hooks/StsDashboard/useVehicleEntry.tsx
@@ -5,6 +5,7 @@ import axios from "axios";
 import { jwtToken, role, uid, username, stsId } from "@/data/cookieNames";
 import { uri } from "@/data/constant";
 import { apiRoutes } from "@/data/apiRoutes";
+import { message } from "antd";
 
 export default function useVehicleEntry() {
   const [entryTime, setEntryTime] = useState(new Date().toLocaleString());
@@ -41,7 +42,7 @@ export default function useVehicleEntry() {
 
       return "Vehicle Entered Noted";
     } catch (error: any) {
-      alert(error.message?.toString() || "error adding entry");
+      message.error(error?.response?.data.message?.toString() || "error adding entry");
       return false;
     }
   }
diff --git a/client/hooks/StsDashboard/useVehicleReleaseFromSTS.tsx b/client/hooks/StsDashboard/useVehicleReleaseFromSTS.tsx
index 41972dc..ad47070 100644
--- a/client/hooks/StsDashboard/useVehicleReleaseFromSTS.tsx
+++ b/client/hooks/StsDashboard/useVehicleReleaseFromSTS.tsx
@@ -5,8 +5,7 @@ import axios from "axios";
 import { jwtToken, role, uid, username, stsId } from "@/data/cookieNames";
 import { uri } from "@/data/constant";
 import { apiRoutes } from "@/data/apiRoutes";
-
-
+import { message } from "antd";
 
 export default function useVehicleReleaseFromSTS() {
   async function VehicleReleaseFromSTS(data: {
@@ -28,34 +27,38 @@ export default function useVehicleReleaseFromSTS() {
         data.estimatedDuration.replace("mins", "")
       );
 
-        console.log({
+      console.log({
+        stsVehicleId: data.stsVehicleId,
+        weightOfWaste: data.weightOfWaste,
+        exitTime: isoString,
+        distance: distanceWithoutUnit,
+        estimatedDuration: durationWithoutUnit,
+      });
+
+      const res = await axios.post(
+        apiRoutes.trip.create,
+        {
           stsVehicleId: data.stsVehicleId,
           weightOfWaste: data.weightOfWaste,
           exitTime: isoString,
           distance: distanceWithoutUnit,
           estimatedDuration: durationWithoutUnit,
-        });
-
-      const res = await axios.post(apiRoutes.trip.create, {
-        stsVehicleId: data.stsVehicleId,
-    weightOfWaste: data.weightOfWaste,
-    exitTime: isoString,
-    distance: distanceWithoutUnit,
-    estimatedDuration: durationWithoutUnit
-    }, {
-      headers: { Authorization: `Bearer ${getCookie(jwtToken)}` },
-    });
+        },
+        {
+          headers: { Authorization: `Bearer ${getCookie(jwtToken)}` },
+        }
+      );
       //use the response from here
       //console.log(res.data);
       window.location.reload();
 
       return true;
-        return "Vehicle Released Successfully";
+      return "Vehicle Released Successfully";
     } catch (error: any) {
-      alert(error.message?.toString() || "error logging in");
+      message.error(error?.response?.data.message?.toString() || "error logging in");
       return false;
     }
   }
 
   return { VehicleReleaseFromSTS };
-}
\ No newline at end of file
+}
diff --git a/client/hooks/auth/useChangePass.tsx b/client/hooks/auth/useChangePass.tsx
index 29ef19c..022b162 100644
--- a/client/hooks/auth/useChangePass.tsx
+++ b/client/hooks/auth/useChangePass.tsx
@@ -4,6 +4,7 @@ import { getCookie, setCookie } from '@/lib/cookieFunctions';
 import { jwtToken } from '@/data/cookieNames';
 import axios from 'axios';
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 
 export default function useChangePass() { 
   const [oldPassword, setOldPassword] = useState("");
@@ -32,12 +33,12 @@ export default function useChangePass() {
           );  
 
             console.log(res.data.msg);
-        alert(res.data.msg);
+        message.success(res.data.msg);
         
         return true;
     }    
     
-    alert("Invalid Password!");
+    message.error("Invalid Password!");
     return false;
   }
 
diff --git a/client/hooks/auth/useForgetPassConfirm.tsx b/client/hooks/auth/useForgetPassConfirm.tsx
index 4489de3..aa7ed4a 100644
--- a/client/hooks/auth/useForgetPassConfirm.tsx
+++ b/client/hooks/auth/useForgetPassConfirm.tsx
@@ -3,6 +3,7 @@ import axios from 'axios';
 import { apiRoutes } from '@/data/apiRoutes';
 import { jwtToken, otpToken } from '@/data/cookieNames';
 import { setCookie, getCookie } from '@/lib/cookieFunctions';
+import { message } from 'antd';
 type OTP = string;
 
 export default function useForgetPassConfirm() {
@@ -23,11 +24,11 @@ export default function useForgetPassConfirm() {
             headers: { Authorization: `Bearer ${getCookie(otpToken)}` },
           }
           );  
-        alert("Check your email for the reset password link" + res.data.msg);
+        message.info("Check your email for the reset password link" + res.data.msg);
         return true;
     }    
     
-    alert("Invalid OTP!");
+    message.error("Invalid OTP!");
     return false;
   }
 
diff --git a/client/hooks/auth/useForgetPassInitiate.tsx b/client/hooks/auth/useForgetPassInitiate.tsx
index e1df42a..9b2a169 100644
--- a/client/hooks/auth/useForgetPassInitiate.tsx
+++ b/client/hooks/auth/useForgetPassInitiate.tsx
@@ -3,6 +3,7 @@ import { setCookie, getCookie } from '@/lib/cookieFunctions';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 
 
 export default function useForgetPassInitiate() {
@@ -23,12 +24,12 @@ export default function useForgetPassInitiate() {
         setCookie(otpToken, res.data.otptoken, 1);
         // console.log(res.data);
         //console.log(getCookie(otpToken));
-        alert(userEmail);
+        message.success("a mail has been sent to " + userEmail + " with the OTP");
         setCookie(jwtToken, userEmail, 0.01);
         return true;
     }    
     
-    alert("Invalid credentials!");
+    message.error("Invalid credentials!");
     return false;
   }
 
diff --git a/client/hooks/bills/makeBill.ts b/client/hooks/bills/makeBill.ts
index f443b2e..d26001f 100644
--- a/client/hooks/bills/makeBill.ts
+++ b/client/hooks/bills/makeBill.ts
@@ -6,6 +6,7 @@ import { getCookie } from "@/lib/cookieFunctions";
 import axios from "axios";
 import { STS } from "@/components/modals/stsControl/EditSTSInfoModal";
 import { Trip } from "@/components/dataTables/PendingBillList";
+import { message } from "antd";
 
 
 export default async function makeBill(tripData: Trip, allocatedCost: number) {
@@ -23,14 +24,14 @@ export default async function makeBill(tripData: Trip, allocatedCost: number) {
             Authorization: `Bearer ${await getCookie(jwtToken)}`,
           },
         }
-      );
-      console.log(res2.data);
+      );      
       return "bill created successfully";
     } catch (error: any) {
-      return (
-        error.message?.toString() ||
+      message.error(
+        error?.response?.data.message?.toString() ||
         "error making bill. You may not have the required permissions."
       );
+      return null;
     }
   }
 
diff --git a/client/hooks/bills/useGetAllCompletedBillList.tsx b/client/hooks/bills/useGetAllCompletedBillList.tsx
index 6b50877..4abb500 100644
--- a/client/hooks/bills/useGetAllCompletedBillList.tsx
+++ b/client/hooks/bills/useGetAllCompletedBillList.tsx
@@ -6,17 +6,24 @@ import { jwtToken } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
 import { Trip } from "@/components/dataTables/PendingBillList";
 import { Bill } from "@/components/dataTables/CompletedBillList";
+import { message } from "antd";
 
 export default function useGetAllCompletedBillList() {
   const [billList, setbillList] = useState<Bill[]>([]); // Initialize with an empty array of Vehicle objects  
 
   async function getbillList(landfillId: string) {
     try {
-      const res = await axios.get(apiRoutes.bills.search + "?landFillId=" + landfillId, {
+
+      var url = apiRoutes.bills.search + "?landFillId=" + landfillId;
+
+      if(landfillId == "rootSecretKey") {
+        url = apiRoutes.bills.getAll;
+      }
+
+      const res = await axios.get(url, {
         headers: { Authorization: `Bearer ${getCookie(jwtToken)}` },
       });
-
-      //alert(JSON.stringify(res.data));
+      
       // Assuming the response data is an array of vehicles
       const allBills: Bill[] = res.data.map((bill: any) => ({
         id: bill.id,
@@ -44,7 +51,7 @@ export default function useGetAllCompletedBillList() {
 
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching pending bills list");
+      message.error(error?.response?.data.message?.toString() || "Error fetching pending bills list");
       return false;
     }
   }
diff --git a/client/hooks/bills/useGetAllPendingBillList.tsx b/client/hooks/bills/useGetAllPendingBillList.tsx
index 63fe70f..0802478 100644
--- a/client/hooks/bills/useGetAllPendingBillList.tsx
+++ b/client/hooks/bills/useGetAllPendingBillList.tsx
@@ -5,6 +5,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
 import { Trip } from "@/components/dataTables/PendingBillList";
+import { message } from "antd";
 
 export default function useGetAllPendingBillList() {
   const [tripList, setTripList] = useState<Trip[]>([]); // Initialize with an empty array of Vehicle objects  
@@ -38,7 +39,7 @@ export default function useGetAllPendingBillList() {
 
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching pending bills list");
+      message.error(error?.response?.data.message?.toString() || "Error fetching pending bills list");
       return false;
     }
   }
diff --git a/client/hooks/dataQuery/useGetAllLandfill.tsx b/client/hooks/dataQuery/useGetAllLandfill.tsx
index b813f17..8432e92 100644
--- a/client/hooks/dataQuery/useGetAllLandfill.tsx
+++ b/client/hooks/dataQuery/useGetAllLandfill.tsx
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 import { useState, useEffect, use } from "react";
 
@@ -38,8 +39,7 @@ export default function useGetAllLandfill() {
       await setLandfillData(landfillList);
       console.log(landfillList);
     } catch (error: any) {
-      alert("Error fetching sts data... Are you authorized?");
-      console.log(error.message);
+      message.error(error?.response?.data?.message + "Error fetching sts data... Are you authorized?");      
     }
   }
 
diff --git a/client/hooks/dataQuery/useGetAllSTS.tsx b/client/hooks/dataQuery/useGetAllSTS.tsx
index ff3f3b0..3f9961b 100644
--- a/client/hooks/dataQuery/useGetAllSTS.tsx
+++ b/client/hooks/dataQuery/useGetAllSTS.tsx
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 import { useState, useEffect, use } from "react";
 
@@ -40,8 +41,7 @@ export default function useGetAllSTS() {
       await setSTSData(stsList);
       console.log(stsList);
     } catch (error: any) {
-      alert("Error fetching sts data... Are you authorized?");
-      console.log(error.message);
+      message.error(error?.response?.data?.message + "Error fetching sts data... Are you authorized?");      
     }
   }
 
diff --git a/client/hooks/entityCreation/deleteLandfill.ts b/client/hooks/entityCreation/deleteLandfill.ts
index 67ab9db..c731857 100644
--- a/client/hooks/entityCreation/deleteLandfill.ts
+++ b/client/hooks/entityCreation/deleteLandfill.ts
@@ -2,6 +2,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 
 export default async function deleteLandFill(landFillId: string) {
@@ -14,7 +15,8 @@ export default async function deleteLandFill(landFillId: string) {
       });
       return "landfills deleted successfully";
     } catch (error: any) {
-      return error.message?.toString() || "error deleteing landfill";
+      message.error(error?.response?.data.message?.toString() || "error deleteing landfill");
+      return null;
     }
   }
 
diff --git a/client/hooks/entityCreation/deleteSTS.ts b/client/hooks/entityCreation/deleteSTS.ts
index 6464169..7a5e4e3 100644
--- a/client/hooks/entityCreation/deleteSTS.ts
+++ b/client/hooks/entityCreation/deleteSTS.ts
@@ -2,6 +2,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 
 export default async function deleteSTS(stsId: string) {
@@ -14,7 +15,8 @@ export default async function deleteSTS(stsId: string) {
       });
       return "sts deleted successfully";
     } catch (error: any) {
-      return error.message?.toString() || "error deleteing sts";
+      message.error(error?.response?.data.message?.toString() || "error deleteing sts");
+      return null;
     }
   }
 
diff --git a/client/hooks/entityCreation/editLandfill.ts b/client/hooks/entityCreation/editLandfill.ts
index 2ce7f02..86f5831 100644
--- a/client/hooks/entityCreation/editLandfill.ts
+++ b/client/hooks/entityCreation/editLandfill.ts
@@ -6,6 +6,7 @@ import { getCookie } from "@/lib/cookieFunctions";
 import axios from "axios";
 import { STS } from "@/components/modals/stsControl/EditSTSInfoModal";
 import { LandFill } from "@/components/dataTables/LandFillList";
+import { message } from "antd";
 
 export default async function editLandfill(landfillData: LandFill, managerId: string) {
   if (landfillData && managerId) {
@@ -35,10 +36,11 @@ export default async function editLandfill(landfillData: LandFill, managerId: st
       );
       return "landfill updated successfully";
     } catch (error: any) {
-      return (
+      message.error(
         error.message?.toString() ||
         "error updating landfill. You may not have the required permissions."
       );
+      return null;
     }
   }
 
diff --git a/client/hooks/entityCreation/editSTS.ts b/client/hooks/entityCreation/editSTS.ts
index de8df83..8ca82ef 100644
--- a/client/hooks/entityCreation/editSTS.ts
+++ b/client/hooks/entityCreation/editSTS.ts
@@ -5,6 +5,7 @@ import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
 import axios from "axios";
 import { STS } from "@/components/modals/stsControl/EditSTSInfoModal";
+import { message } from "antd";
 
 export default async function editSTS(stsData: STS, managerId: string) {
   if (stsData && managerId) {
@@ -34,10 +35,11 @@ export default async function editSTS(stsData: STS, managerId: string) {
       );
       return "sts updated successfully";
     } catch (error: any) {
-      return (
-        error.message?.toString() ||
+      message.error(
+        error?.response?.data.message?.toString() ||
         "error updating sts. You may not have the required permissions."
       );
+      return null;
     }
   }
 
diff --git a/client/hooks/entityCreation/useCreateLandfill.tsx b/client/hooks/entityCreation/useCreateLandfill.tsx
index ae042a9..a38045b 100644
--- a/client/hooks/entityCreation/useCreateLandfill.tsx
+++ b/client/hooks/entityCreation/useCreateLandfill.tsx
@@ -35,7 +35,7 @@ export default function useCreateLandFill() {
         window.location.reload();
         return "Landfill Aadded successfully";
       } catch (error: any) {
-        return error.message?.toString() || "Error creating Landfill";
+        return error?.response?.data.message?.toString() || "Error creating Landfill";
       }
     }
 
diff --git a/client/hooks/entityCreation/useCreateSTS.tsx b/client/hooks/entityCreation/useCreateSTS.tsx
index d61af0a..308e8d0 100644
--- a/client/hooks/entityCreation/useCreateSTS.tsx
+++ b/client/hooks/entityCreation/useCreateSTS.tsx
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 export type STS = {
     name: string;
@@ -37,7 +38,8 @@ export default function useCreateSTS() {
         window.location.reload();
         return "STS Aadded successfully";
       } catch (error: any) {
-        return error.message?.toString() || "Error creating STS";
+        message.error(error.message?.toString() || "Error creating STS");
+        return null;
       }
     }
 
diff --git a/client/hooks/entityCreation/useCreateVehicle.ts b/client/hooks/entityCreation/useCreateVehicle.ts
index e782c0a..04e3753 100644
--- a/client/hooks/entityCreation/useCreateVehicle.ts
+++ b/client/hooks/entityCreation/useCreateVehicle.ts
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 export type Vehicle = {
     vehicleNumber: string;
@@ -42,7 +43,8 @@ export default function useCreateVehicle() {
         window.location.reload();
         return "Vehicle Aadded successfully";
       } catch (error: any) {
-        return error.message?.toString() || "Error creating Vehicle. Do you have permisson?.";
+        message.error(error?.response?.data.message?.toString() || "Error creating Vehicle. Do you have permisson?.");
+        return null;
       }
     }
 
diff --git a/client/hooks/landFillDashboard/getLandFillDataById.ts b/client/hooks/landFillDashboard/getLandFillDataById.ts
index 9f3e48c..d83c06d 100644
--- a/client/hooks/landFillDashboard/getLandFillDataById.ts
+++ b/client/hooks/landFillDashboard/getLandFillDataById.ts
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 import { useState, useEffect, use } from "react";
 import { set } from "react-hook-form";
@@ -49,8 +50,7 @@ export default function useGetLandfillDatabyID() {
       console.log(landfillData);
       return landfillData;
     } catch (error: any) {
-      alert("Error fetching landfill data... Are you authorized?");
-      console.log(error.message);
+      message.error(error?.response?.data?.message + "Error fetching landfill data... Are you authorized?");      
     }
   }
 
diff --git a/client/hooks/landFillDashboard/useLandFillStorageEdit.tsx b/client/hooks/landFillDashboard/useLandFillStorageEdit.tsx
index ad2cc06..1e2613f 100644
--- a/client/hooks/landFillDashboard/useLandFillStorageEdit.tsx
+++ b/client/hooks/landFillDashboard/useLandFillStorageEdit.tsx
@@ -3,6 +3,7 @@ import { setCookie, getCookie } from '@/lib/cookieFunctions';
 import axios from 'axios';
 import { jwtToken, stsId } from '@/data/cookieNames'; // Ensure these variables are properly defined
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 
 export default function useLandFillStorageEdit() {
   async function UpdateLandfillStorage(data: {
@@ -31,8 +32,8 @@ export default function useLandFillStorageEdit() {
       window.location.reload();
       return "Wastage Released From Landfill";
     } catch (error: any) {
-      alert(error.message?.toString() || 'Error Editing');
-      return false;
+      message.error(error?.response?.data.message?.toString() || 'Error Editing');
+      return null;
     }
   }
 
diff --git a/client/hooks/landFillDashboard/useTripComplete.tsx b/client/hooks/landFillDashboard/useTripComplete.tsx
index daafb39..4ca1bc2 100644
--- a/client/hooks/landFillDashboard/useTripComplete.tsx
+++ b/client/hooks/landFillDashboard/useTripComplete.tsx
@@ -1,10 +1,11 @@
 import { useState } from 'react';
 import {admin, landfillManager, stsManager, unassigned} from '@/data/roles';
 import { setCookie, getCookie } from '@/lib/cookieFunctions';
-import axios from 'axios';
+import axios, { AxiosError } from 'axios';
 import { jwtToken, role , uid , username, stsId} from '@/data/cookieNames';
 import { uri } from '@/data/constant';
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 
 export default function useTripComplete() {  
 
@@ -40,8 +41,8 @@ export default function useTripComplete() {
     window.location.reload();
 
       return "Trip Complete Successful";
-    } catch (error: any) {
-      alert(error.message?.toString() || "error logging in");
+    } catch (error: AxiosError | any) {
+      message.error(error?.response?.data.message?.toString() || "error logging in");
       return false;
     }
     
diff --git a/client/hooks/landFillDashboard/useUpcomingVehiclesList.tsx b/client/hooks/landFillDashboard/useUpcomingVehiclesList.tsx
index 4e507dd..066dca7 100644
--- a/client/hooks/landFillDashboard/useUpcomingVehiclesList.tsx
+++ b/client/hooks/landFillDashboard/useUpcomingVehiclesList.tsx
@@ -5,6 +5,7 @@ import { jwtToken, landfillId } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
 
 import { apiRoutes } from "@/data/apiRoutes";
+import { message } from "antd";
 
 type Vehicle = {
   tripId: string;
@@ -58,7 +59,7 @@ export default function useUpcomingVehicle() {
 
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching vehicle list");
+      message.error(error?.response?.data.message?.toString() || "Error fetching vehicle list");
       return false;
     }
   }
diff --git a/client/hooks/landFillDashboard/useVehicleTripCompleteList.tsx b/client/hooks/landFillDashboard/useVehicleTripCompleteList.tsx
index c47313e..ea4a94d 100644
--- a/client/hooks/landFillDashboard/useVehicleTripCompleteList.tsx
+++ b/client/hooks/landFillDashboard/useVehicleTripCompleteList.tsx
@@ -7,6 +7,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 
 import { jwtToken } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 
 type Vehicle = {
   tripId: string;
@@ -64,7 +65,7 @@ export default function useVehicleTripCompleteList(data: { landFillId: string })
 
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching vehicle list");
+      message.error(error?.response?.data?.message?.toString() || "Error fetching vehicle list");
       return false;
     }
   }
diff --git a/client/hooks/stsdata/useGetAllSTS.tsx b/client/hooks/stsdata/useGetAllSTS.tsx
index 6e2560f..be43102 100644
--- a/client/hooks/stsdata/useGetAllSTS.tsx
+++ b/client/hooks/stsdata/useGetAllSTS.tsx
@@ -4,6 +4,7 @@ import { uri } from '@/data/constant';
 import { jwtToken } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 type STS = {
     id: string,
     name: string,
@@ -77,7 +78,7 @@ export default function useGetAllSTS() {
 
             return true;
         } catch (error: any) {
-            alert(error.message?.toString() || "Error fetching STS list");
+            message.error(error?.response?.data?.message?.toString() || "Error fetching STS list");
             return false;
         }
     }
diff --git a/client/hooks/user_data/addNewRole.ts b/client/hooks/user_data/addNewRole.ts
index bcab66b..6aac055 100644
--- a/client/hooks/user_data/addNewRole.ts
+++ b/client/hooks/user_data/addNewRole.ts
@@ -4,6 +4,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 import { useState, useEffect, use } from "react";
 
@@ -20,8 +21,7 @@ export default async function addNewRole(roleName: string) {
 
       if(res) return "Role added successfully";
     } catch (error: any) {
-      alert("Error creating role... Are you authorized?");
-      console.log(error.message);      
+      message.error(error?.response?.data?.message + "Error creating role... Are you authorized?");      
     }
   
 }
diff --git a/client/hooks/user_data/deleteRole.ts b/client/hooks/user_data/deleteRole.ts
index 4619a8c..1a22e8d 100644
--- a/client/hooks/user_data/deleteRole.ts
+++ b/client/hooks/user_data/deleteRole.ts
@@ -4,6 +4,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 import { useState, useEffect, use } from "react";
 
@@ -20,8 +21,7 @@ export default async function deleteRole(roleName: string) {
 
       if(res) return "Role added successfully";
     } catch (error: any) {
-      alert("Error creating role... Are you authorized?");
-      console.log(error.message);      
+      message.error(error?.response?.data?.message + "Error creating role... Are you authorized?");      
     }
   
 }
diff --git a/client/hooks/user_data/deleteUser.tsx b/client/hooks/user_data/deleteUser.tsx
index 70491ba..1d02255 100644
--- a/client/hooks/user_data/deleteUser.tsx
+++ b/client/hooks/user_data/deleteUser.tsx
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 
 export default async function deleteUser(userId: string) {
@@ -15,7 +16,8 @@ export default async function deleteUser(userId: string) {
       });
       return "user deleted successfully";
     } catch (error: any) {
-      return error.message?.toString() || "error deleteing user";
+      message.error(error?.response?.data.message?.toString() || "error deleteing user");
+      return null;
     }
   }
 
diff --git a/client/hooks/user_data/editUser.tsx b/client/hooks/user_data/editUser.tsx
index 6265a02..a217fd1 100644
--- a/client/hooks/user_data/editUser.tsx
+++ b/client/hooks/user_data/editUser.tsx
@@ -4,6 +4,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 
 export default async function editUser(user: User) {
@@ -26,7 +27,7 @@ export default async function editUser(user: User) {
       }) : null;
       return "user updated successfully";
     } catch (error: any) {
-      return error.message?.toString() || "error updating user. You may not have the required permissions.";
+      message.error(error?.response?.data.message?.toString() || "error updating user. You may not have the required permissions.");
     }
   }
 
diff --git a/client/hooks/user_data/getAllPermissonList.ts b/client/hooks/user_data/getAllPermissonList.ts
index 9bf5a50..c43842b 100644
--- a/client/hooks/user_data/getAllPermissonList.ts
+++ b/client/hooks/user_data/getAllPermissonList.ts
@@ -1,6 +1,7 @@
 import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 
 export async function fetchAllPermissons() {
@@ -20,7 +21,6 @@ export async function fetchAllPermissons() {
       };
     });
   } catch (error: any) {
-    alert("Error fetching permissons... Are you authorized?");
-    console.log(error.message);
+    message.error(error?.response?.data?.message + "Error fetching permissons... Are you authorized?");    
   }
 }
diff --git a/client/hooks/user_data/getUserByRole.ts b/client/hooks/user_data/getUserByRole.ts
index 25a119c..93f08a3 100644
--- a/client/hooks/user_data/getUserByRole.ts
+++ b/client/hooks/user_data/getUserByRole.ts
@@ -4,6 +4,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 import { useState, useEffect, use } from "react";
 
@@ -31,8 +32,7 @@ export default async function getUserByRole(roleName: string) {
       console.log(userList);
       return userList;
     } catch (error: any) {
-      alert("Error fetching user data... Are you authorized?");
-      console.log(error.message);      
+      message.error(error?.response?.data?.message + "Error fetching user data... Are you authorized?");      
     }    
 
   return [];
diff --git a/client/hooks/user_data/updatePermisson.tsx b/client/hooks/user_data/updatePermisson.tsx
index d155dcf..3ea3c4c 100644
--- a/client/hooks/user_data/updatePermisson.tsx
+++ b/client/hooks/user_data/updatePermisson.tsx
@@ -1,7 +1,8 @@
 import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
-import axios from "axios";
+import { message } from "antd";
+import axios, { Axios, AxiosError } from "axios";
 
 type EditPermisson = {
   role: string;
@@ -36,11 +37,10 @@ export async function updatePermisson(payload: EditPermisson) {
             },
           }
         ));
-
-    //console.log(response.data);
+    
     return "Permisson updated successfully!";
-  } catch (error: any) {
-    alert("Error updating permissons... Are you authorized?");
-    console.log(error.message);
+  } catch (error: AxiosError | any) {
+    message.error("Error updating permissons... Are you authorized?");    
+    message.error(error?.response?.data.message?.toString() || "Error updating permissons");
   }
 }
diff --git a/client/hooks/user_data/useEditProfileInfo.tsx b/client/hooks/user_data/useEditProfileInfo.tsx
index df963f4..a63b906 100644
--- a/client/hooks/user_data/useEditProfileInfo.tsx
+++ b/client/hooks/user_data/useEditProfileInfo.tsx
@@ -3,6 +3,7 @@ import { setCookie, getCookie } from '@/lib/cookieFunctions';
 import axios from 'axios';
 import { jwtToken, stsId } from '@/data/cookieNames'; // Ensure these variables are properly defined
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 
 export default function useEditProfileInfo() {
   async function EditProfileInfo(data: {
@@ -30,7 +31,7 @@ export default function useEditProfileInfo() {
 
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || 'Error Editing');
+      message.error(error?.response?.data.message?.toString() || 'Error Editing');
       return false;
     }
   }
diff --git a/client/hooks/user_data/useGetAllRole.tsx b/client/hooks/user_data/useGetAllRole.tsx
index 4e8f8da..eef0268 100644
--- a/client/hooks/user_data/useGetAllRole.tsx
+++ b/client/hooks/user_data/useGetAllRole.tsx
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 import { useState, useEffect, use } from "react";
 import { set } from "react-hook-form";
@@ -43,8 +44,7 @@ export default function useGetAllRole() {
       await setRoles([unassigned, admin, landfillManager, stsManager]);      
       // console.log(roles);
     } catch (error: any) {
-      alert("Error fetching roles... Are you authorized?");
-      console.log(error.message);
+      message.error(error?.response?.data?.message + "Error fetching roles... Are you authorized?");      
     }
   }
 
diff --git a/client/hooks/user_data/useGetAllUser.tsx b/client/hooks/user_data/useGetAllUser.tsx
index d6dbb55..3dd6054 100644
--- a/client/hooks/user_data/useGetAllUser.tsx
+++ b/client/hooks/user_data/useGetAllUser.tsx
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 import { useState, useEffect, use } from "react";
 
@@ -34,8 +35,7 @@ export default function useGetAllUser() {
       await setUserData(userList);
       console.log(userList);
     } catch (error: any) {
-      alert("Error fetching user data... Are you authorized?");
-      console.log(error.message);
+      message.error(error?.response?.data?.message + "Error fetching user data... Are you authorized?");      
     }
   }
 
diff --git a/client/hooks/user_data/useGetUserProfile.tsx b/client/hooks/user_data/useGetUserProfile.tsx
index a0dd207..41af0db 100644
--- a/client/hooks/user_data/useGetUserProfile.tsx
+++ b/client/hooks/user_data/useGetUserProfile.tsx
@@ -6,6 +6,7 @@ import axios from 'axios';
 import { apiRoutes } from '@/data/apiRoutes'; // Adjust the import path
 import { jwtToken } from '@/data/cookieNames'; // Adjust the import path
 import { getCookie } from '@/lib/cookieFunctions'; // Adjust the import path
+import { message } from 'antd';
 
 type User = {
   id: string;
@@ -191,7 +192,7 @@ export default function useGetUserProfile() {
 
 
     } catch (error: any) {
-      alert(error.message?.toString() || 'Error fetching user profile'); // Updated error message
+      message.error(error?.response?.data?.message?.toString() || 'Error fetching user profile'); // Updated error message
     }
   }
 
diff --git a/client/hooks/vehicles/deleteVehiclebyId.ts b/client/hooks/vehicles/deleteVehiclebyId.ts
index 1e82181..8f8b9a5 100644
--- a/client/hooks/vehicles/deleteVehiclebyId.ts
+++ b/client/hooks/vehicles/deleteVehiclebyId.ts
@@ -3,6 +3,7 @@ import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 import axios from "axios";
 
 export default async function deleteVehiclebyId(id: string) {
@@ -15,7 +16,8 @@ export default async function deleteVehiclebyId(id: string) {
       });
       return "vehicle removed successfully";
     } catch (error: any) {
-      return error.message?.toString() || "error removing vehicle";
+      message.error(error.message?.toString() || "error removing vehicle");
+      return null;
     }
   }
 
diff --git a/client/hooks/vehicles/editVehicle.ts b/client/hooks/vehicles/editVehicle.ts
index 35c9098..e49bd37 100644
--- a/client/hooks/vehicles/editVehicle.ts
+++ b/client/hooks/vehicles/editVehicle.ts
@@ -5,6 +5,7 @@ import { admin, landfillManager, stsManager, unassigned } from "@/data/roles";
 import { getCookie } from "@/lib/cookieFunctions";
 import axios from "axios";
 import { STS } from "@/components/modals/stsControl/EditSTSInfoModal";
+import { message } from "antd";
 
 type Vehicle = {
   id: string;
@@ -41,10 +42,11 @@ export default async function editVehicle(vehicleData: Vehicle) {
       );
       return "vehicle updated successfully";
     } catch (error: any) {
-      return (
+      message.error(
         error.message?.toString() ||
         "error updating vehicle. You may not have the required permissions."
       );
+      return null;
     }
   }
 
diff --git a/client/hooks/vehicles/useGetAllVehicleList.tsx b/client/hooks/vehicles/useGetAllVehicleList.tsx
index 39be896..f89a404 100644
--- a/client/hooks/vehicles/useGetAllVehicleList.tsx
+++ b/client/hooks/vehicles/useGetAllVehicleList.tsx
@@ -4,6 +4,7 @@ import { uri } from "@/data/constant";
 import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 
 type Vehicle = {
   entryId: string;
@@ -53,7 +54,7 @@ export default function useGetAllVehicleList() {
 
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching vehicle list");
+      message.error(error?.response?.data?.message?.toString() || "Error fetching vehicle list");
       return false;
     }
   }
diff --git a/client/hooks/vehicles/useGetStsVehicles.tsx b/client/hooks/vehicles/useGetStsVehicles.tsx
index 35dcfba..c192bc5 100644
--- a/client/hooks/vehicles/useGetStsVehicles.tsx
+++ b/client/hooks/vehicles/useGetStsVehicles.tsx
@@ -4,6 +4,7 @@ import { uri } from '@/data/constant';
 import { jwtToken,stsId } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 
 
 interface StsEntryDataType {
@@ -69,7 +70,7 @@ export default function useGetStsVehicles() {
      
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching vehicle list");
+      message.error(error?.response?.data?.message?.toString() || "Error fetching vehicle list");
       return false;
     }
   }
diff --git a/client/hooks/vehicles/useGetVehicleHistoryForSTS.tsx b/client/hooks/vehicles/useGetVehicleHistoryForSTS.tsx
index 7579fd5..e1cbf5e 100644
--- a/client/hooks/vehicles/useGetVehicleHistoryForSTS.tsx
+++ b/client/hooks/vehicles/useGetVehicleHistoryForSTS.tsx
@@ -3,6 +3,7 @@ import axios from 'axios';
 import { getCookie } from '@/lib/cookieFunctions';
 import { stsId } from '@/data/cookieNames';
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 
 type Vehicle = {
     vehicleNumber: string,
@@ -30,7 +31,7 @@ export default function useGetVehicleHistoryForSTS() {
      
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching vehicle list");
+      message.error(error?.response?.data?.message?.toString() || "Error fetching vehicle list");
       return false;
     }
   }
diff --git a/client/hooks/vehicles/useGetVeicleForSTS.tsx b/client/hooks/vehicles/useGetVeicleForSTS.tsx
index dd0855a..6716a15 100644
--- a/client/hooks/vehicles/useGetVeicleForSTS.tsx
+++ b/client/hooks/vehicles/useGetVeicleForSTS.tsx
@@ -4,6 +4,7 @@ import { uri } from '@/data/constant';
 import { getCookie } from '@/lib/cookieFunctions';
 import { jwtToken, stsId } from "@/data/cookieNames";
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 
 type Vehicle = {
   entryId: string,
@@ -56,7 +57,7 @@ export default function useVehicleListForSTS() {
      
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching vehicle list");
+      message.error(error?.response?.data?.message?.toString() || "Error fetching vehicle list");
       return false;
     }
   }
diff --git a/client/hooks/vehicles/useSTSAvailableVehicles.tsx b/client/hooks/vehicles/useSTSAvailableVehicles.tsx
index 4364b2e..eef5d9b 100644
--- a/client/hooks/vehicles/useSTSAvailableVehicles.tsx
+++ b/client/hooks/vehicles/useSTSAvailableVehicles.tsx
@@ -4,6 +4,7 @@ import { uri } from "@/data/constant";
 import { apiRoutes } from "@/data/apiRoutes";
 import { jwtToken, stsId } from "@/data/cookieNames";
 import { getCookie } from "@/lib/cookieFunctions";
+import { message } from "antd";
 
 type Vehicle = {
  
@@ -65,7 +66,7 @@ export default function useGetSTSAvailableVehicles() {
 
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching vehicle list");
+      message.error(error?.response?.data?.message?.toString() || "Error fetching vehicle list");
       return false;
     }
   }
diff --git a/client/hooks/vehicles/useVehiclesData.tsx b/client/hooks/vehicles/useVehiclesData.tsx
index 7cda1ba..5400a8b 100644
--- a/client/hooks/vehicles/useVehiclesData.tsx
+++ b/client/hooks/vehicles/useVehiclesData.tsx
@@ -4,6 +4,7 @@ import { uri } from '@/data/constant';
 import { jwtToken, stsId } from '@/data/cookieNames';
 import { setCookie, getCookie } from '@/lib/cookieFunctions';
 import { apiRoutes } from '@/data/apiRoutes';
+import { message } from 'antd';
 type Vehicle = {
   id: string;
   vehicleNumber: string;
@@ -46,7 +47,7 @@ export default function useVehicleList() {
      
       return true;
     } catch (error: any) {
-      alert(error.message?.toString() || "Error fetching vehicle list");
+      message.error(error?.response?.data?.message?.toString() || "Error fetching vehicle list");
       return false;
     }
   }
diff --git a/server/src/middlewares/authorizer.ts b/server/src/middlewares/authorizer.ts
index 85ca73a..c75867d 100644
--- a/server/src/middlewares/authorizer.ts
+++ b/server/src/middlewares/authorizer.ts
@@ -18,11 +18,11 @@ const authRole = (roles: string[]) => {
 const authorizer = (permission: string) => {
   return errorWrapper(
     async (req: Request, res: Response, next: NextFunction) => {
-      const role = (req as any).user.role;
+      const userRole = ((req as any).user as any)?.role;
 
       const permittedRoles = await getPermittedRoleNames(permission);
 
-      if (role && permittedRoles.includes(role)) {
+      if (userRole && permittedRoles.includes(userRole)) {
         next();
       } else throw new CustomError("Unauthorized", 401);
     }