diff --git a/apps/web/app/discover/page.tsx b/apps/web/app/discover/page.tsx
index 0003b91d..f8d31c05 100644
--- a/apps/web/app/discover/page.tsx
+++ b/apps/web/app/discover/page.tsx
@@ -8,18 +8,15 @@ import { OrganizerComponent } from "@/components/events/organizer-component";
 import { Footer } from "@/components/layout/footer";
 import { EmptyState } from "@/components/ui/EmptyState";
 import { fetchOrganizers, type DiscoverOrganizer } from "@/utils/api";
+import { toast } from "sonner";
 
 export default function DiscoverPage() {
-  const [toastMessage, setToastMessage] = useState<string | null>(null);
   const [activeCategory, setActiveCategory] = useState<string>("All");
   const [selectedOrganizer, setSelectedOrganizer] = useState<string | null>(null);
   const [allOrganizers, setAllOrganizers] = useState<DiscoverOrganizer[]>([]);
   const [hasEvents, setHasEvents] = useState<boolean>(true);
 
-  const showErrorToast = (message: string) => {
-    setToastMessage(message);
-    window.setTimeout(() => setToastMessage(null), 3500);
-  };
+  const showErrorToast = (message: string) => toast.error(message);
 
   // Load all organizers for filtering
   useEffect(() => {
@@ -38,11 +35,6 @@ export default function DiscoverPage() {
   return (
     <main className="flex flex-col min-h-screen bg-base">
       <Navbar />
-      {toastMessage && (
-        <div className="fixed top-4 right-4 z-[60] rounded-lg bg-black px-4 py-3 text-sm text-white shadow-lg">
-          {toastMessage}
-        </div>
-      )}
       <div className="p-10 pl-45 hidden lg:block bg-base">
         <div className="flex justify-start items-center gap-4 p-5 pb-10">
           <h1 className="font-semibold md:text-4xl pl-3">Explore events</h1>
diff --git a/apps/web/app/organizers/page.tsx b/apps/web/app/organizers/page.tsx
index 12e1e31e..85c49f2c 100644
--- a/apps/web/app/organizers/page.tsx
+++ b/apps/web/app/organizers/page.tsx
@@ -3,24 +3,14 @@
 import { Navbar } from "@/components/layout/navbar";
 import { Footer } from "@/components/layout/footer";
 import { OrganizerComponent } from "@/components/events/organizer-component";
-import { useState } from "react";
+import { toast } from "sonner";
 
 export default function OrganizersPage() {
-  const [toastMessage, setToastMessage] = useState<string | null>(null);
-
-  const showErrorToast = (message: string) => {
-    setToastMessage(message);
-    window.setTimeout(() => setToastMessage(null), 3500);
-  };
+  const showErrorToast = (message: string) => toast.error(message);
 
   return (
     <main className="flex flex-col min-h-screen bg-base">
       <Navbar />
-      {toastMessage && (
-        <div className="fixed top-4 right-4 z-[60] rounded-lg bg-black px-4 py-3 text-sm text-white shadow-lg">
-          {toastMessage}
-        </div>
-      )}
       <div className="p-10 pl-45 hidden lg:block bg-base">
         <div className="flex justify-start items-center gap-4 p-5 pb-10">
           <h1 className="font-semibold md:text-4xl pl-3">Explore organizers</h1>