diff --git a/app/components/NotificationHandler.js b/app/components/NotificationHandler.js
index 0dd3068..a426374 100644
--- a/app/components/NotificationHandler.js
+++ b/app/components/NotificationHandler.js
@@ -6,60 +6,102 @@ import AuthService from "../services/AuthService";
 
 export default function NotificationHandler() {
   const [notification, setNotification] = useState(null);
+  const [showPrompt, setShowPrompt] = useState(false);
   const initialized = useRef(false);
 
   useEffect(() => {
-    // Wait for hydration to complete
     const timer = setTimeout(() => {
       if (initialized.current) return;
       initialized.current = true;
 
       const token = AuthService.getToken();
-      if (!token) {
-        console.log("[Notifications] Not signed in, skipping");
-        return;
-      }
+      if (!token) return;
 
-      console.log("[Notifications] Signed in, requesting permission...");
-      requestNotificationPermission().then((fcmToken) => {
-        if (fcmToken) {
-          console.log("[Notifications] FCM token obtained:", fcmToken.substring(0, 20) + "...");
+      // Check current permission status
+      if ("Notification" in window) {
+        if (Notification.permission === "default") {
+          // Not yet asked — show prompt button
+          setShowPrompt(true);
+        } else if (Notification.permission === "granted") {
+          // Already allowed — get token silently
+          initFCM();
         }
-      });
-
-      const unsub = onForegroundMessage((payload) => {
-        const title = payload.notification?.title || payload.data?.title || "Sweet Home";
-        const body = payload.notification?.body || payload.data?.body || "";
-        setNotification({ title, body });
-        setTimeout(() => setNotification(null), 5000);
-      });
-
-      // Cleanup on unmount
-      return () => unsub();
-    }, 1000); // Wait 1s for hydration
+        // "denied" — do nothing, user must change in browser settings
+      }
+    }, 1000);
 
     return () => clearTimeout(timer);
   }, []);
 
-  if (!notification) return null;
+  async function initFCM() {
+    const fcmToken = await requestNotificationPermission();
+    if (fcmToken) {
+      console.log("[Notifications] FCM token obtained:", fcmToken.substring(0, 20) + "...");
+    }
+    onForegroundMessage((payload) => {
+      const title = payload.notification?.title || payload.data?.title || "Sweet Home";
+      const body = payload.notification?.body || payload.data?.body || "";
+      setNotification({ title, body });
+      setTimeout(() => setNotification(null), 5000);
+    });
+  }
+
+  async function handleEnableNotifications() {
+    setShowPrompt(false);
+    await initFCM();
+  }
 
   return (
-    <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-xl shadow-2xl border border-gray-200 p-4 z-[9999] animate-slide-up">
-      <div className="flex items-start gap-3">
-        <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
-          <span className="text-xl">🏠</span>
+    <>
+      {/* Permission prompt banner */}
+      {showPrompt && (
+        <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-xl shadow-2xl border border-gray-200 p-4 z-[9999]">
+          <div className="flex items-start gap-3">
+            <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
+              <span className="text-xl">🔔</span>
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-bold text-gray-900 text-sm">تفعيل الإشعارات</p>
+              <p className="text-gray-600 text-sm mt-0.5">اسمح بالإشعارات للبقاء على اطلاع بحجوزاتك وعروضنا.</p>
+              <div className="flex gap-2 mt-3">
+                <button
+                  onClick={handleEnableNotifications}
+                  className="px-4 py-1.5 bg-amber-500 text-white text-sm font-medium rounded-lg hover:bg-amber-600 transition-colors"
+                >
+                  تفعيل
+                </button>
+                <button
+                  onClick={() => setShowPrompt(false)}
+                  className="px-4 py-1.5 text-gray-500 text-sm hover:text-gray-700 transition-colors"
+                >
+                  لاحقاً
+                </button>
+              </div>
+            </div>
+          </div>
         </div>
-        <div className="flex-1 min-w-0">
-          <p className="font-bold text-gray-900 text-sm">{notification.title}</p>
-          <p className="text-gray-600 text-sm mt-0.5">{notification.body}</p>
+      )}
+
+      {/* Foreground notification toast */}
+      {notification && (
+        <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white rounded-xl shadow-2xl border border-gray-200 p-4 z-[9999] animate-slide-up">
+          <div className="flex items-start gap-3">
+            <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
+              <span className="text-xl">🏠</span>
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="font-bold text-gray-900 text-sm">{notification.title}</p>
+              <p className="text-gray-600 text-sm mt-0.5">{notification.body}</p>
+            </div>
+            <button
+              onClick={() => setNotification(null)}
+              className="text-gray-400 hover:text-gray-600 flex-shrink-0"
+            >
+              ✕
+            </button>
+          </div>
         </div>
-        <button
-          onClick={() => setNotification(null)}
-          className="text-gray-400 hover:text-gray-600 flex-shrink-0"
-        >
-          ✕
-        </button>
-      </div>
-    </div>
+      )}
+    </>
   );
 }