diff --git a/client/src/App.tsx b/client/src/App.tsx
index 4ad07a2..837228d 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -25,6 +25,7 @@ import ResetPasswordPage from "./pages/ResetPasswordPage";
 import ForgotPasswordPage from "./pages/ForgotPasswordPage";
 import RestrictedLayout from "./layouts/restricted";
 import Ranking from "./pages/Ranking";
+import ManageSchedulePage from "./pages/ManageSchedulePage";
 
 function App() {
   return (
@@ -44,7 +45,7 @@ function App() {
             <Route path="events">
               <Route index element={<EventsPage />} />
             </Route>
-            <Route element={<EventDetailsPage />} path="event/:id"/>
+            <Route element={<EventDetailsPage />} path="event/:id" />
 
             {/* Karang Guni Schedules Route */}
             <Route path="karang-guni-schedules">
@@ -94,6 +95,10 @@ function App() {
           <Route path="ranking">
             <Route index element={<Ranking />} />
           </Route>
+
+          <Route path="schedules">
+            <Route index element={<ManageSchedulePage />} />
+          </Route>
         </Route>
       </Route>
     </Routes>
diff --git a/client/src/components/AdministratorNavigationPanel.tsx b/client/src/components/AdministratorNavigationPanel.tsx
index 0d7123c..0dc8e9a 100644
--- a/client/src/components/AdministratorNavigationPanel.tsx
+++ b/client/src/components/AdministratorNavigationPanel.tsx
@@ -178,7 +178,7 @@ export default function AdministratorNavigationPanel() {
                       <AdministratorNavigationPanelNavigationButton
                         text="Schedules"
                         icon={<CalendarDaysIcon />}
-                        onClickRef="#"
+                        onClickRef="schedules"
                       />
                       <AdministratorNavigationPanelNavigationButton
                         text="Transactions"
diff --git a/client/src/pages/ManageSchedulePage.tsx b/client/src/pages/ManageSchedulePage.tsx
new file mode 100644
index 0000000..91aa6db
--- /dev/null
+++ b/client/src/pages/ManageSchedulePage.tsx
@@ -0,0 +1,156 @@
+import { Link } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import instance from "../security/http";
+import { PencilSquareIcon, PlusIcon, TrashDeleteIcon } from "../icons";
+import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure, SortDescriptor, Link as NextUILink } from "@nextui-org/react";
+
+interface Schedule {
+    id: number;
+    dateTime: string;
+    location: string;
+    postalCode: string;
+    status: string;
+}
+
+export default function ManageSchedulePage() {
+
+    const [scheduleList, setScheduleList] = useState<Schedule[]>([]);
+    const [scheduleIdToDelete, setScheduleIdToDelete] = useState<number | null>(null);
+    const { isOpen, onOpen, onOpenChange } = useDisclosure();
+    const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
+        column: 'dateTime',
+        direction: 'ascending',
+    });
+
+    useEffect(() => {
+        instance.get('/schedule')
+            .then((res) => {
+                const schedules = res.data.map((schedule: Schedule) => ({
+                    ...schedule,
+                    dateTime: new Date(schedule.dateTime), // Convert to Date object
+                }));
+                setScheduleList(schedules);
+            })
+            .catch((err) => {
+                console.error('Error fetching schedules:', err);
+            });
+    }, []);
+
+    const deleteSchedule = () => {
+        if (scheduleIdToDelete !== null) {
+            instance.delete(`/schedule/${scheduleIdToDelete}`)
+                .then((res) => {
+                    console.log(res.data);
+                    setScheduleList((prev) => prev.filter(schedule => schedule.id !== scheduleIdToDelete));
+                    onOpenChange();
+                    setScheduleIdToDelete(null);
+                })
+                .catch((err) => {
+                    console.error('Error deleting schedule:', err);
+                });
+        }
+    };
+
+    const sortScheduleList = (list: Schedule[], descriptor: SortDescriptor) => {
+        const { column, direction } = descriptor;
+
+        const sortedList = [...list].sort((a, b) => {
+            switch (column) {
+                case 'dateTime':
+                    const dateA = new Date(a.dateTime);
+                    const dateB = new Date(b.dateTime);
+                    return direction === 'ascending' ? dateA.getTime() - dateB.getTime() : dateB.getTime() - dateA.getTime();
+                case 'location':
+                    return direction === 'ascending' ? a.location.localeCompare(b.location) : b.location.localeCompare(a.location);
+                case 'postalCode':
+                    return direction === 'ascending' ? a.postalCode.localeCompare(b.postalCode) : b.postalCode.localeCompare(a.postalCode);
+                case 'status':
+                    return direction === 'ascending' ? a.status.localeCompare(b.status) : b.status.localeCompare(a.status);
+                default:
+                    throw new Error(`Unsupported column: ${column}`);
+            }
+        });
+
+        return sortedList;
+    };
+
+    const handleSort = () => {
+        const { column, direction } = sortDescriptor;
+        const newDirection = direction === 'ascending' ? 'descending' : 'ascending';
+
+        setSortDescriptor({ column, direction: newDirection });
+    };
+
+    const renderSortIndicator = () => {
+        if (sortDescriptor.direction === 'ascending') {
+            return <span>&uarr;</span>;
+        } else {
+            return <span>&darr;</span>;
+        }
+    };
+
+    const sortedScheduleList = sortScheduleList(scheduleList, sortDescriptor);
+
+    return (
+        <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
+            <div className="inline-block text-center justify-center flex flex-row gap-10">
+                <p className="text-3xl font-bold">Admin Karang Guni Schedule</p>
+                <Link to="/Addschedules">
+                    <Button isIconOnly color="primary">
+                        <PlusIcon />
+                    </Button>
+                </Link>
+            </div>
+            <div className="w-full overflow-auto max-w-screen-lg">
+                <Table aria-label="Schedule Table">
+                    <TableHeader>
+                        <TableColumn>
+                            <NextUILink className="font-normal text-[12px] opacity-70" color="foreground" onClick={handleSort}>Date{renderSortIndicator()}</NextUILink>
+                        </TableColumn>
+                        <TableColumn>Time</TableColumn>
+                        <TableColumn>Location</TableColumn>
+                        <TableColumn>Postal Code</TableColumn>
+                        <TableColumn>Status</TableColumn>
+                        <TableColumn>Action</TableColumn>
+                    </TableHeader>
+                    <TableBody>
+                        {sortedScheduleList.map((schedule) => (
+                            <TableRow key={schedule.id}>
+                                <TableCell>{((schedule.dateTime as unknown) as Date).toLocaleDateString()}</TableCell>
+                                <TableCell>{((schedule.dateTime as unknown) as Date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</TableCell>
+                                <TableCell>{schedule.location}</TableCell>
+                                <TableCell>{schedule.postalCode}</TableCell>
+                                <TableCell>{schedule.status}</TableCell>
+                                <TableCell>
+                                    <Link to={`/Editschedules/${schedule.id}`}><Button isIconOnly color="success" variant="light"><PencilSquareIcon /></Button></Link>
+                                    <Button isIconOnly color="danger" variant="light" onPress={() => { setScheduleIdToDelete(schedule.id); onOpen(); }}><TrashDeleteIcon /></Button>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </div>
+            <Modal isOpen={isOpen} onOpenChange={onOpenChange} isDismissable={false} isKeyboardDismissDisabled={true}>
+                <ModalContent>
+                    {(onClose) => (
+                        <>
+                            <ModalHeader className="flex flex-col gap-1">Delete Schedule</ModalHeader>
+                            <ModalBody>
+                                <p>Are you sure you want to delete this schedule?</p>
+                            </ModalBody>
+                            <ModalFooter>
+                                <Button color="danger" variant="light" onPress={onClose}>
+                                    Close
+                                </Button>
+                                <Button color="danger" onPress={() => { deleteSchedule(); onClose(); }}>
+                                    Delete
+                                </Button>
+                            </ModalFooter>
+                        </>
+                    )}
+                </ModalContent>
+            </Modal>
+        </section>
+    )
+}
+
diff --git a/client/src/pages/Ranking.tsx b/client/src/pages/Ranking.tsx
index 7df7fef..79c2c2e 100644
--- a/client/src/pages/Ranking.tsx
+++ b/client/src/pages/Ranking.tsx
@@ -73,19 +73,18 @@ export default function Ranking() {
 
     return (
         <section className="flex flex-col items-center justify-center py-5">
-            <p className="text-2xl font-bold">Form Data</p>
+            <p className="text-xl font-bold">Form Data</p>
             <div className="gap-8 p-8">
                 <Table aria-label="Form Data Table">
                     <TableHeader>
-                        <TableColumn onClick={handleSort}>
-                            Average Bill {renderSortIndicator()}
-                        </TableColumn>
-                        <TableColumn>Form ID</TableColumn>
                         <TableColumn>User ID</TableColumn>
                         <TableColumn>Electrical Bill</TableColumn>
                         <TableColumn>Water Bill</TableColumn>
                         <TableColumn>Total Bill</TableColumn>
                         <TableColumn>Number of Dependents</TableColumn>
+                        <TableColumn onClick={handleSort}>
+                            Average Bill {renderSortIndicator()}
+                        </TableColumn>
                         <TableColumn>Electrical Bill Picture</TableColumn>
                         <TableColumn>Water Bill Picture</TableColumn>
                         <TableColumn>Actions</TableColumn>
@@ -93,13 +92,12 @@ export default function Ranking() {
                     <TableBody>
                         {sortedFormData.map((data) => (
                             <TableRow key={data.id}>
-                                <TableCell>${data.avgBill.toFixed(2)}</TableCell>
-                                <TableCell>{data.id}</TableCell>
                                 <TableCell>{data.userId}</TableCell>
                                 <TableCell>${data.electricalBill.toFixed(2)}</TableCell>
                                 <TableCell>${data.waterBill.toFixed(2)}</TableCell>
                                 <TableCell>${data.totalBill.toFixed(2)}</TableCell>
                                 <TableCell>{data.noOfDependents}</TableCell>
+                                <TableCell>${data.avgBill.toFixed(2)}</TableCell>
                                 <TableCell>
                                     {data.ebPicture && <img src={`${config.serverAddress}/hbcform/ebPicture/${data.id}`} alt="Electrical Bill" className="w-full" />}
                                 </TableCell>