diff --git a/src/components/schedules/modal/DeleteScheduleModal.tsx b/src/components/schedules/modal/DeleteScheduleModal.tsx
index 5d2bff9..139f835 100644
--- a/src/components/schedules/modal/DeleteScheduleModal.tsx
+++ b/src/components/schedules/modal/DeleteScheduleModal.tsx
@@ -1,11 +1,12 @@
 "use client";
 
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@heroui/modal";
+import { useDeleteSchedule } from "@/hooks/data/use-schedules";
+import { getQueryClient } from "@/lib/get-query-client";
 import { Button } from "@heroui/button";
-import fetcher from "@/lib/fetcher";
-import { useRouter } from "next/navigation";
+import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from "@heroui/modal";
+import { Spinner } from "@heroui/spinner";
 import { addToast } from "@heroui/toast";
-import { getQueryClient } from "@/lib/get-query-client";
+import { useRouter } from "next/navigation";
 
 type DeleteScheduleModalProps = {
   scheduleId: string;
@@ -16,29 +17,19 @@ type DeleteScheduleModalProps = {
 export default function DeleteScheduleModal({ isOpen, onClose, scheduleId }: DeleteScheduleModalProps) {
   const router = useRouter();
   const qc = getQueryClient();
-
+  const { mutate: deleteSchedule, isPending: isLoading } = useDeleteSchedule();
   const onDelete = async () => {
-    try {
-      const response = await fetcher<{ id: string }>("DELETE", `/schedules/${scheduleId}`);
-
-      if (response?.id) {
-        onClose();
+    deleteSchedule(scheduleId, {
+      onSuccess: () => {
+        addToast({ title: "Schedule deleted successfully", color: "success" });
         qc.invalidateQueries({ queryKey: ["schedules"] });
         router.push("/schedules");
-      } else {
-        console.error("Failed to delete schedule");
-        addToast({
-          title: "Failed to delete schedule",
-          color: "danger",
-        });
-      }
-    } catch (error) {
-      addToast({
-        title: "An error occurred while deleting the schedule",
-        color: "danger",
-      });
-      console.error("Error deleting schedule:", error);
-    }
+      },
+      onError: (error: unknown) => {
+        const errorMessage = (error as { response?: { data?: { message?: string } } })?.response?.data?.message || (error as { message?: string })?.message || "Failed to delete schedule";
+        addToast({ title: errorMessage, color: "danger" });
+      },
+    });
   };
 
   return (
@@ -53,6 +44,7 @@ export default function DeleteScheduleModal({ isOpen, onClose, scheduleId }: Del
         </ModalBody>
         <ModalFooter className="border-t border-gray-300 dark:border-gray-800 py-2.5">
           <Button variant="flat" size="sm" color="danger" onPress={onDelete} className="text-primary-foreground">
+            {isLoading && <Spinner color="danger" size="sm" />}
             Delete
           </Button>
         </ModalFooter>
diff --git a/src/components/shared/notification-example.tsx b/src/components/shared/notification-example.tsx
deleted file mode 100644
index 2292691..0000000
--- a/src/components/shared/notification-example.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// Example usage of the NotificationCard and NotificationList components
-import { NotificationDto } from "@/components/shared/notification-card";
-import NotificationList from "@/components/shared/notification-list";
-
-// Example data
-const sampleNotifications: NotificationDto[] = [
-  {
-    id: "1",
-    title: 'Schedule "Morning Posts" Completed',
-    description: "All 5 posts have been successfully published to your social media accounts.",
-    type: "SCHEDULE",
-    timestamp: new Date(Date.now() - 30 * 60 * 1000), // 30 minutes ago
-    severity: "INFO",
-    scheduleId: "schedule-123",
-    service: "Scheduler",
-  },
-  {
-    id: "2",
-    title: "Error Occurred",
-    description: "Failed to upload image to Instagram. Please check your connection and try again.",
-    type: "ACTIVITY",
-    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000), // 2 hours ago
-    severity: "ERROR",
-    postId: "post-456",
-    service: "Instagram API",
-  },
-  {
-    id: "3",
-    title: "Warning",
-    description: "Your account is approaching the monthly posting limit.",
-    type: "ACTIVITY",
-    timestamp: new Date(Date.now() - 5 * 60 * 60 * 1000), // 5 hours ago
-    severity: "WARNING",
-    service: "Usage Monitor",
-  },
-];
-
-// Example usage in a component
-export const NotificationExample = () => {
-  return (
-    <div className="mx-auto space-y-6">
-      <NotificationList notifications={sampleNotifications} showDividers={false} />
-    </div>
-  );
-};
-
-export default NotificationExample;
diff --git a/src/hooks/data/use-schedules.ts b/src/hooks/data/use-schedules.ts
index 873a139..8dd2a65 100644
--- a/src/hooks/data/use-schedules.ts
+++ b/src/hooks/data/use-schedules.ts
@@ -1,5 +1,5 @@
 import fetcher from "@/lib/fetcher";
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 
 export type Schedule = {
   id: string;
@@ -64,18 +64,17 @@ export type SchedulePost = {
   scheduleTimeId: string;
 };
 
-export function useSchedulePosts(
-  scheduleId: string,
-  month?: number,
-  year?: number
-) {
+export function useSchedulePosts(scheduleId: string, month?: number, year?: number) {
   return useQuery<SchedulePost[]>({
     queryKey: ["schedulePosts", scheduleId],
-    queryFn: async () =>
-      fetcher<SchedulePost[]>(
-        "GET",
-        `/schedules/${scheduleId}/posts?month=${month}&year=${year}`
-      ),
+    queryFn: async () => fetcher<SchedulePost[]>("GET", `/schedules/${scheduleId}/posts?month=${month}&year=${year}`),
     enabled: !!scheduleId,
   });
 }
+
+export function useDeleteSchedule() {
+  return useMutation({
+    mutationKey: ["deleteSchedule"],
+    mutationFn: async (scheduleId: string) => fetcher<{ id: string }>("DELETE", `/schedules/${scheduleId}`),
+  });
+}