diff --git a/src/App.tsx b/src/App.tsx
index 92b44b2..3c9f7ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import { Suspense, lazy, useEffect } from 'react';
 import { Toaster } from "@/components/ui/sonner";
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
index 3541814..20fcc49 100644
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,5 +1,8 @@
+
+"use client"
+
 import { useTheme } from "next-themes"
-import { Toaster as Sonner, toast } from "sonner"
+import { Toaster as Sonner } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
@@ -26,4 +29,6 @@ const Toaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { Toaster, toast }
+export { Toaster }
+// Re-export toast function directly from sonner
+export { toast } from "sonner"
diff --git a/src/components/ui/use-toast.ts b/src/components/ui/use-toast.ts
index d3da9e2..4bb01e6 100644
--- a/src/components/ui/use-toast.ts
+++ b/src/components/ui/use-toast.ts
@@ -1,4 +1,5 @@
 
-import { useToast, toast } from "@/hooks/use-toast";
+import { toast } from "@/components/ui/sonner"
+import { useToast } from "@/hooks/use-toast"
 
-export { useToast, toast };
+export { useToast, toast }