From df5ab708a7abe54ff633cc3be4e46862a837a04e Mon Sep 17 00:00:00 2001
From: Collins Chikangwu <collinschristroa@gmail.com>
Date: Mon, 17 Nov 2025 21:41:55 +0100
Subject: [PATCH 1/3] feat: integrate Google One Tap authentication and enhance
 dashboard UI

---
 app/(landing)/layout.tsx               |   2 +
 app/dashboard/page.tsx                 | 179 +++--
 components/auth/GoogleOneTap.tsx       |  59 ++
 components/auth/LoginForm.tsx          |  71 +-
 components/auth/LoginWrapper.tsx       |  55 +-
 components/auth/SignupForm.tsx         |  74 +-
 components/auth/SignupWrapper.tsx      |  61 +-
 components/buttons/BoundlessButton.tsx |  15 +-
 components/landing-page/navbar.tsx     | 954 +++++++++++--------------
 components/ui/sheet.tsx                |   2 +-
 lib/auth-client.ts                     |  23 +-
 lib/data/blog.ts                       | 365 ++++++++++
 12 files changed, 1208 insertions(+), 652 deletions(-)
 create mode 100644 components/auth/GoogleOneTap.tsx

diff --git a/app/(landing)/layout.tsx b/app/(landing)/layout.tsx
index 7fd4373fa..7482f9350 100644
--- a/app/(landing)/layout.tsx
+++ b/app/(landing)/layout.tsx
@@ -2,6 +2,7 @@ import { Metadata } from 'next';
 import { ReactNode } from 'react';
 import { Footer, Navbar } from '@/components/landing-page';
 import { generatePageMetadata } from '@/lib/metadata';
+import { GoogleOneTap } from '@/components/auth/GoogleOneTap';
 
 // Generate metadata for the landing layout (home page)
 export const metadata: Metadata = generatePageMetadata('home');
@@ -16,6 +17,7 @@ export default function LandingLayout({ children }: LandingLayoutProps) {
       <Navbar />
       <main className='flex-1'>{children}</main>
       <Footer />
+      <GoogleOneTap />
     </div>
   );
 }
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index e8aaa1b02..7546289b3 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -11,7 +11,14 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Loader2, LogOut, User, Mail, Shield } from 'lucide-react';
+import {
+  Loader2,
+  LogOut,
+  User,
+  Mail,
+  Shield,
+  CheckCircle2,
+} from 'lucide-react';
 import { authClient } from '@/lib/auth-client';
 import { useAuthActions } from '@/hooks/use-auth';
 
@@ -33,10 +40,10 @@ export default function DashboardPage() {
 
   if (sessionPending) {
     return (
-      <div className='flex min-h-screen items-center justify-center'>
-        <div className='flex items-center space-x-2'>
-          <Loader2 className='h-6 w-6 animate-spin' />
-          <span>Loading...</span>
+      <div className='flex min-h-screen items-center justify-center bg-[#030303]'>
+        <div className='flex items-center space-x-3'>
+          <Loader2 className='h-6 w-6 animate-spin text-[#a7f950]' />
+          <span className='text-white/80'>Loading...</span>
         </div>
       </div>
     );
@@ -47,96 +54,164 @@ export default function DashboardPage() {
   }
 
   return (
-    <div className='min-h-screen bg-gray-50 py-8'>
-      <div className='mx-auto max-w-4xl px-4 sm:px-6 lg:px-8'>
-        <div className='mb-8 flex items-center justify-between'>
-          <h1 className='text-3xl font-bold text-gray-900'>Dashboard</h1>
-          <Button onClick={handleSignOut} variant='outline'>
+    <div className='min-h-screen bg-[#030303] px-4 py-8 sm:px-6 lg:px-8'>
+      <div className='mx-auto max-w-6xl'>
+        {/* Header */}
+        <div className='mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+          <div>
+            <h1 className='text-4xl font-bold text-white'>Dashboard</h1>
+            <p className='mt-2 text-sm text-white/60'>
+              Welcome back, {session.user.name || session.user.email}
+            </p>
+          </div>
+          <Button
+            onClick={handleSignOut}
+            variant='outline'
+            className='border-white/20 bg-white/5 text-white/80 transition-all duration-200 hover:border-white/30 hover:bg-white/10 hover:text-white'
+          >
             <LogOut className='mr-2 h-4 w-4' />
             Sign Out
           </Button>
         </div>
 
+        {/* Stats Cards Grid */}
         <div className='grid gap-6 md:grid-cols-2 lg:grid-cols-3'>
-          <Card>
-            <CardHeader>
-              <CardTitle className='flex items-center'>
-                <User className='mr-2 h-5 w-5' />
+          {/* Profile Card */}
+          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/5 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-[#a7f950]/10'>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
+            <CardHeader className='relative z-10'>
+              <CardTitle className='flex items-center text-white'>
+                <div className='mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-[#a7f950]/10'>
+                  <User className='h-5 w-5 text-[#a7f950]' />
+                </div>
                 Profile
               </CardTitle>
             </CardHeader>
-            <CardContent>
+            <CardContent className='relative z-10'>
               <div className='flex items-center space-x-4'>
-                <Avatar className='h-12 w-12'>
+                <Avatar className='h-14 w-14 border-2 border-white/10'>
                   <AvatarImage src={session.user.image || ''} />
-                  <AvatarFallback>
+                  <AvatarFallback className='bg-white/10 text-white'>
                     {session.user.name?.charAt(0) ||
                       session.user.email.charAt(0)}
                   </AvatarFallback>
                 </Avatar>
-                <div>
-                  <p className='font-medium'>
+                <div className='min-w-0 flex-1'>
+                  <p className='truncate font-semibold text-white'>
                     {session.user.name || 'No name'}
                   </p>
-                  <p className='text-sm text-gray-500'>{session.user.email}</p>
+                  <p className='truncate text-sm text-white/60'>
+                    {session.user.email}
+                  </p>
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          <Card>
-            <CardHeader>
-              <CardTitle className='flex items-center'>
-                <Mail className='mr-2 h-5 w-5' />
+          {/* Account Details Card */}
+          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/5 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-[#a7f950]/10'>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
+            <CardHeader className='relative z-10'>
+              <CardTitle className='flex items-center text-white'>
+                <div className='mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-[#a7f950]/10'>
+                  <Mail className='h-5 w-5 text-[#a7f950]' />
+                </div>
                 Account Details
               </CardTitle>
             </CardHeader>
-            <CardContent className='space-y-2'>
-              <div className='flex justify-between'>
-                <span className='text-sm text-gray-500'>User ID:</span>
-                <span className='font-mono text-sm'>{session.user.id}</span>
+            <CardContent className='relative z-10 space-y-3'>
+              <div className='flex flex-col gap-1'>
+                <span className='text-xs text-white/50'>User ID</span>
+                <span className='font-mono text-sm text-white/90'>
+                  {session.user.id}
+                </span>
               </div>
-              <div className='flex justify-between'>
-                <span className='text-sm text-gray-500'>Email:</span>
-                <span className='text-sm'>{session.user.email}</span>
+              <div className='flex flex-col gap-1'>
+                <span className='text-xs text-white/50'>Email</span>
+                <span className='text-sm text-white/90'>
+                  {session.user.email}
+                </span>
               </div>
             </CardContent>
           </Card>
 
-          <Card>
-            <CardHeader>
-              <CardTitle className='flex items-center'>
-                <Shield className='mr-2 h-5 w-5' />
-                Role & Permissions
+          {/* Status Card */}
+          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/5 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-lg hover:shadow-[#a7f950]/10'>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/5 via-transparent to-white/10 opacity-50'></div>
+            <CardHeader className='relative z-10'>
+              <CardTitle className='flex items-center text-white'>
+                <div className='mr-3 flex h-10 w-10 items-center justify-center rounded-lg bg-[#a7f950]/10'>
+                  <Shield className='h-5 w-5 text-[#a7f950]' />
+                </div>
+                Status & Verification
               </CardTitle>
             </CardHeader>
-            <CardContent>
-              <div className='space-y-2'>
-                <div className='flex justify-between'>
-                  <span className='text-sm text-gray-500'>Role:</span>
-                  <span className='text-sm font-medium capitalize'>
-                    {session.user.emailVerified ? 'Verified' : 'Unverified'}
-                  </span>
+            <CardContent className='relative z-10 space-y-3'>
+              <div className='flex items-center justify-between'>
+                <span className='text-sm text-white/60'>Email Status</span>
+                <div className='flex items-center gap-2'>
+                  {session.user.emailVerified ? (
+                    <>
+                      <CheckCircle2 className='h-4 w-4 text-[#a7f950]' />
+                      <span className='text-sm font-medium text-[#a7f950]'>
+                        Verified
+                      </span>
+                    </>
+                  ) : (
+                    <span className='text-sm font-medium text-white/60'>
+                      Unverified
+                    </span>
+                  )}
                 </div>
-                <div className='flex justify-between'>
-                  <span className='text-sm text-gray-500'>Status:</span>
-                  <span className='text-sm text-green-600'>Active</span>
+              </div>
+              <div className='flex items-center justify-between'>
+                <span className='text-sm text-white/60'>Account Status</span>
+                <div className='flex items-center gap-2'>
+                  <div className='h-2 w-2 rounded-full bg-[#a7f950]'></div>
+                  <span className='text-sm font-medium text-[#a7f950]'>
+                    Active
+                  </span>
                 </div>
               </div>
+              {(session.user as { lastLoginMethod?: string | null })
+                ?.lastLoginMethod && (
+                <div className='flex items-center justify-between border-t border-white/10 pt-2'>
+                  <span className='text-sm text-white/60'>
+                    Last Login Method
+                  </span>
+                  <span className='text-sm font-medium text-white/90 capitalize'>
+                    {(() => {
+                      const method = (
+                        session.user as { lastLoginMethod?: string | null }
+                      ).lastLoginMethod;
+                      return method === 'google'
+                        ? 'Google'
+                        : method === 'email'
+                          ? 'Email'
+                          : method || 'N/A';
+                    })()}
+                  </span>
+                </div>
+              )}
             </CardContent>
           </Card>
         </div>
 
+        {/* Welcome Card */}
         <div className='mt-8'>
-          <Card>
-            <CardHeader>
-              <CardTitle>Welcome to Boundless Project</CardTitle>
-              <CardDescription>
+          <Card className='group relative overflow-hidden border-white/10 bg-gradient-to-br from-white/10 via-white/5 to-transparent backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-xl hover:shadow-[#a7f950]/10'>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-white/10 via-transparent to-white/5 opacity-50'></div>
+            <div className='pointer-events-none absolute inset-0 rounded-xl bg-gradient-to-br from-[#a7f950]/5 via-transparent to-transparent opacity-30'></div>
+            <CardHeader className='relative z-10'>
+              <CardTitle className='text-2xl text-white'>
+                Welcome to Boundless
+              </CardTitle>
+              <CardDescription className='text-white/60'>
                 Your platform for crowdfunding and grants
               </CardDescription>
             </CardHeader>
-            <CardContent>
-              <p className='text-gray-600'>
+            <CardContent className='relative z-10'>
+              <p className='leading-relaxed text-white/80'>
                 This is your dashboard where you can manage your projects, view
                 contributions, and access all the features of the platform. The
                 authentication system is now working properly!
diff --git a/components/auth/GoogleOneTap.tsx b/components/auth/GoogleOneTap.tsx
new file mode 100644
index 000000000..1b9e9093b
--- /dev/null
+++ b/components/auth/GoogleOneTap.tsx
@@ -0,0 +1,59 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useAuthStatus } from '@/hooks/use-auth';
+import { authClient } from '@/lib/auth-client';
+
+export function GoogleOneTap() {
+  const { isAuthenticated, isLoading } = useAuthStatus();
+  const hasTriggeredRef = useRef(false);
+
+  useEffect(() => {
+    // Don't trigger if user is authenticated or still loading
+    if (isAuthenticated || isLoading) {
+      return;
+    }
+
+    // Only trigger once per component mount
+    if (hasTriggeredRef.current) {
+      return;
+    }
+
+    // Small delay to ensure page is fully loaded
+    const timer = setTimeout(() => {
+      hasTriggeredRef.current = true;
+
+      // Call One Tap to show the popup
+      authClient
+        .oneTap({
+          callbackURL: window.location.href,
+          fetchOptions: {
+            onSuccess: () => {
+              // On success, reload the page to reflect auth state
+              // Better Auth will handle the redirect via callbackURL
+              window.location.reload();
+            },
+            onError: () => {
+              // Silently handle errors - user may have dismissed the prompt
+            },
+          },
+          onPromptNotification: () => {
+            // Called when max attempts are reached
+            // User has dismissed/skipped the prompt multiple times
+            // You could show an alternative sign-in button here if needed
+          },
+        })
+        .catch(() => {
+          // Silently handle errors in calling oneTap
+        });
+    }, 1000); // 1 second delay for better UX
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [isAuthenticated, isLoading]);
+
+  // This component doesn't render anything visible
+  // Google One Tap handles its own UI in the top-right corner
+  return null;
+}
diff --git a/components/auth/LoginForm.tsx b/components/auth/LoginForm.tsx
index 0028afbe8..3f5f6bfb3 100644
--- a/components/auth/LoginForm.tsx
+++ b/components/auth/LoginForm.tsx
@@ -1,10 +1,11 @@
 'use client';
 import { Eye, EyeOff, LockIcon, MailIcon } from 'lucide-react';
-// import Image from 'next/image';
+import Image from 'next/image';
 import Link from 'next/link';
 import { UseFormReturn } from 'react-hook-form';
 import z from 'zod';
 import { BoundlessButton } from '../buttons';
+import { Badge } from '../ui/badge';
 import { Checkbox } from '../ui/checkbox';
 import {
   Form,
@@ -32,6 +33,8 @@ interface LoginFormProps {
   showPassword: boolean;
   setShowPassword: (show: boolean) => void;
   isLoading: boolean;
+  onGoogleSignIn?: () => void;
+  lastMethod?: string | null;
 }
 
 const LoginForm = ({
@@ -40,7 +43,11 @@ const LoginForm = ({
   showPassword,
   setShowPassword,
   isLoading,
+  onGoogleSignIn,
+  lastMethod,
 }: LoginFormProps) => {
+  const isGoogleLastUsed = lastMethod === 'google';
+  const isEmailLastUsed = lastMethod === 'email';
   return (
     <>
       <div className='space-y-2'>
@@ -50,30 +57,48 @@ const LoginForm = ({
         </p>
       </div>
       <div className='mt-6 space-y-6'>
-        {/* <BoundlessButton
-          fullWidth
-          size='xl'
-          icon={
-            <Image
-              src='/auth/google.svg'
-              alt='google'
-              width={24}
-              height={24}
-              className='object-cover'
-            />
-          }
-          className='bg-background hover:!text-background border !border-[#484848] text-base !text-white'
-        >
-          Continue with Google
-        </BoundlessButton> */}
-        {/* 
+        <div className='relative'>
+          <BoundlessButton
+            centerContent={true}
+            fullWidth
+            size='xl'
+            icon={
+              <Image
+                src='/auth/google.svg'
+                alt='google'
+                width={24}
+                height={24}
+                className='object-cover'
+              />
+            }
+            className={`group bg-background hover:!text-background flex items-center justify-center gap-2 text-base !text-white transition-all duration-200 ${
+              isGoogleLastUsed
+                ? 'border-2 !border-[#a7f950] shadow-sm shadow-[#a7f950]/20'
+                : 'border !border-[#484848]'
+            }`}
+            onClick={onGoogleSignIn}
+            disabled={isLoading}
+          >
+            <div className='flex w-full items-center justify-between'>
+              <span>Continue with Google</span>
+              {isGoogleLastUsed && (
+                <Badge
+                  variant='secondary'
+                  className='group-hover:bg-background-card ml-2 border-[#a7f950]/30 bg-[#a7f950]/20 text-[#a7f950]'
+                >
+                  Last used
+                </Badge>
+              )}
+            </div>
+          </BoundlessButton>
+        </div>
         <div className='flex items-center justify-center gap-2.5'>
           <div className='h-[1px] w-full bg-[#2B2B2B]'></div>
           <p className='text-center text-sm leading-[145%] text-[#B5B5B5]'>
             Or
           </p>
           <div className='h-[1px] w-full bg-[#2B2B2B]'></div>
-        </div> */}
+        </div>
 
         <Form {...form}>
           <form
@@ -85,6 +110,14 @@ const LoginForm = ({
                 {form.formState.errors.root.message}
               </div>
             )}
+            {isEmailLastUsed && (
+              <div className='rounded-lg border border-[#a7f950]/30 bg-[#a7f950]/10 p-3'>
+                <p className='flex items-center gap-2 text-xs text-[#a7f950]'>
+                  <span className='h-1.5 w-1.5 rounded-full bg-[#a7f950]'></span>
+                  Last signed in with Email
+                </p>
+              </div>
+            )}
             <FormField
               control={form.control}
               name='email'
diff --git a/components/auth/LoginWrapper.tsx b/components/auth/LoginWrapper.tsx
index dc45004ff..a2f2d906c 100644
--- a/components/auth/LoginWrapper.tsx
+++ b/components/auth/LoginWrapper.tsx
@@ -2,7 +2,7 @@
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import z from 'zod';
@@ -30,8 +30,15 @@ const LoginWrapper = ({ setLoadingState }: LoginWrapperProps) => {
   const searchParams = useSearchParams();
   const [showPassword, setShowPassword] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [lastMethod, setLastMethod] = useState<string | null>(null);
 
-  const callbackUrl = searchParams.get('callbackUrl') || '/';
+  const callbackUrl =
+    searchParams.get('callbackUrl') || 'http://localhost:3000/';
+
+  useEffect(() => {
+    const method = authClient.getLastUsedLoginMethod();
+    setLastMethod(method);
+  }, []);
 
   const form = useForm<FormData>({
     resolver: zodResolver(formSchema),
@@ -104,6 +111,48 @@ const LoginWrapper = ({ setLoadingState }: LoginWrapperProps) => {
     [form, router]
   );
 
+  const handleGoogleSignIn = useCallback(async () => {
+    setIsLoading(true);
+    setLoadingState(true);
+
+    try {
+      await authClient.signIn.social(
+        {
+          provider: 'google',
+          callbackURL: 'http://localhost:3000/',
+        },
+        {
+          onRequest: () => {
+            setIsLoading(true);
+            setLoadingState(true);
+          },
+          onError: ctx => {
+            setIsLoading(false);
+            setLoadingState(false);
+
+            const errorObj = ctx.error || ctx;
+            const errorMessage =
+              typeof errorObj === 'object' && errorObj.message
+                ? errorObj.message
+                : 'Failed to sign in with Google. Please try again.';
+
+            toast.error(errorMessage);
+          },
+        }
+      );
+    } catch (error) {
+      setIsLoading(false);
+      setLoadingState(false);
+
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : 'An unexpected error occurred during Google sign-in.';
+
+      toast.error(errorMessage);
+    }
+  }, [setLoadingState]);
+
   const onSubmit = useCallback(
     async (values: FormData) => {
       setIsLoading(true);
@@ -203,6 +252,8 @@ const LoginWrapper = ({ setLoadingState }: LoginWrapperProps) => {
       showPassword={showPassword}
       setShowPassword={setShowPassword}
       isLoading={isLoading}
+      onGoogleSignIn={handleGoogleSignIn}
+      lastMethod={lastMethod}
     />
   );
 };
diff --git a/components/auth/SignupForm.tsx b/components/auth/SignupForm.tsx
index 00888e586..bf825c895 100644
--- a/components/auth/SignupForm.tsx
+++ b/components/auth/SignupForm.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { LockIcon, MailIcon, User } from 'lucide-react';
-// import Image from 'next/image';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -9,6 +9,7 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import z from 'zod';
 import { BoundlessButton } from '../buttons';
+import { Badge } from '../ui/badge';
 import {
   Form,
   FormControl,
@@ -39,12 +40,20 @@ const formSchema = z.object({
 interface SignupFormProps {
   onLoadingChange?: (isLoading: boolean) => void;
   invitation?: string | null;
+  onGoogleSignIn?: () => void;
+  lastMethod?: string | null;
 }
 
-const SignupForm = ({ onLoadingChange, invitation }: SignupFormProps) => {
+const SignupForm = ({
+  onLoadingChange,
+  invitation,
+  onGoogleSignIn,
+  lastMethod,
+}: SignupFormProps) => {
   const router = useRouter();
   const [step, setStep] = useState<'signup' | 'otp'>('signup');
   const [userData, setUserData] = useState<{ email: string } | null>(null);
+  const isGoogleLastUsed = lastMethod === 'google';
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -166,26 +175,46 @@ const SignupForm = ({ onLoadingChange, invitation }: SignupFormProps) => {
         </p>
       </div>
       <div className='mt-6 space-y-6'>
-        {/* <BoundlessButton
-          fullWidth
-          className='bg-background border !border-[#484848] !text-white'
-        >
-          <Image
-            src='/auth/google.svg'
-            alt='google'
-            width={24}
-            height={24}
-            className='object-cover'
-            unoptimized
-          />
-          Continue with Google
-        </BoundlessButton> */}
-        {/* 
+        <div className='relative'>
+          <BoundlessButton
+            fullWidth
+            centerContent={true}
+            className={`group bg-background !text-white transition-all duration-200 ${
+              isGoogleLastUsed
+                ? 'border-2 !border-[#a7f950] shadow-sm shadow-[#a7f950]/20'
+                : 'border !border-[#484848]'
+            }`}
+            onClick={onGoogleSignIn}
+            disabled={form.formState.isSubmitting}
+          >
+            <div className='flex w-full items-center justify-between'>
+              <div className='flex items-center gap-2'>
+                <Image
+                  src='/auth/google.svg'
+                  alt='google'
+                  width={24}
+                  height={24}
+                  className='object-cover'
+                  unoptimized
+                />
+                <span>Continue with Google</span>
+              </div>
+              {isGoogleLastUsed && (
+                <Badge
+                  variant='secondary'
+                  className='group-hover:bg-background-card ml-2 border-[#a7f950]/30 bg-[#a7f950]/20 text-[#a7f950]'
+                >
+                  Last used
+                </Badge>
+              )}
+            </div>
+          </BoundlessButton>
+        </div>
         <div className='flex items-center justify-center gap-2.5'>
           <div className='h-[1px] w-full bg-[#2B2B2B]'></div>
           <p className='text-center text-sm text-[#B5B5B5]'>Or</p>
           <div className='h-[1px] w-full bg-[#2B2B2B]'></div>
-        </div> */}
+        </div>
 
         <Form {...form}>
           <form
@@ -307,8 +336,13 @@ const SignupForm = ({ onLoadingChange, invitation }: SignupFormProps) => {
 
         <p className='text-center text-xs text-[#D9D9D9] lg:text-sm'>
           By continuing, you agree to our{' '}
-          <span className='text-white'>Terms of Service</span> and{' '}
-          <span className='text-white'>Privacy Policy</span>
+          <Link href='/terms' className='text-primary/80'>
+            Terms of Service
+          </Link>{' '}
+          and{' '}
+          <Link href='/privacy' className='text-primary/80'>
+            Privacy Policy
+          </Link>
         </p>
 
         <p className='text-center text-xs text-[#D9D9D9] lg:text-sm'>
diff --git a/components/auth/SignupWrapper.tsx b/components/auth/SignupWrapper.tsx
index 59d0b1d2d..a2c586c28 100644
--- a/components/auth/SignupWrapper.tsx
+++ b/components/auth/SignupWrapper.tsx
@@ -1,7 +1,9 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import { toast } from 'sonner';
 import SignupForm from './SignupForm';
+import { authClient } from '@/lib/auth-client';
 
 const SignupWrapper = ({
   setLoadingState,
@@ -11,9 +13,64 @@ const SignupWrapper = ({
   invitation?: string | null;
 }) => {
   const [isLoading, setIsLoading] = useState(false);
+  const [lastMethod, setLastMethod] = useState<string | null>(null);
   setLoadingState(isLoading);
 
-  return <SignupForm onLoadingChange={setIsLoading} invitation={invitation} />;
+  useEffect(() => {
+    const method = authClient.getLastUsedLoginMethod();
+    setLastMethod(method);
+  }, []);
+
+  const handleGoogleSignIn = useCallback(async () => {
+    setIsLoading(true);
+    setLoadingState(true);
+
+    try {
+      await authClient.signIn.social(
+        {
+          provider: 'google',
+          callbackURL: 'http://localhost:3000/',
+        },
+        {
+          onRequest: () => {
+            setIsLoading(true);
+            setLoadingState(true);
+          },
+          onError: ctx => {
+            setIsLoading(false);
+            setLoadingState(false);
+
+            const errorObj = ctx.error || ctx;
+            const errorMessage =
+              typeof errorObj === 'object' && errorObj.message
+                ? errorObj.message
+                : 'Failed to sign in with Google. Please try again.';
+
+            toast.error(errorMessage);
+          },
+        }
+      );
+    } catch (error) {
+      setIsLoading(false);
+      setLoadingState(false);
+
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : 'An unexpected error occurred during Google sign-in.';
+
+      toast.error(errorMessage);
+    }
+  }, [setLoadingState]);
+
+  return (
+    <SignupForm
+      onLoadingChange={setIsLoading}
+      invitation={invitation}
+      onGoogleSignIn={handleGoogleSignIn}
+      lastMethod={lastMethod}
+    />
+  );
 };
 
 export default SignupWrapper;
diff --git a/components/buttons/BoundlessButton.tsx b/components/buttons/BoundlessButton.tsx
index c47d34312..abd7ef8f3 100644
--- a/components/buttons/BoundlessButton.tsx
+++ b/components/buttons/BoundlessButton.tsx
@@ -66,6 +66,7 @@ export interface BoundlessButtonProps
   icon?: React.ReactNode;
   iconPosition?: 'left' | 'right';
   fullWidth?: boolean;
+  centerContent?: boolean;
 }
 
 const BoundlessButton = React.forwardRef<
@@ -84,6 +85,7 @@ const BoundlessButton = React.forwardRef<
       children,
       disabled,
       fullWidth,
+      centerContent = false,
       ...props
     },
     ref
@@ -106,6 +108,14 @@ const BoundlessButton = React.forwardRef<
       </>
     );
 
+    const contentWrapper = centerContent ? (
+      <span className='flex items-center justify-center gap-2'>
+        {buttonContent}
+      </span>
+    ) : (
+      buttonContent
+    );
+
     return (
       <motion.div
         whileHover='hover'
@@ -122,12 +132,13 @@ const BoundlessButton = React.forwardRef<
               state: loading ? 'loading' : state,
             }),
             className,
-            fullWidth && 'w-full'
+            fullWidth && 'w-full',
+            centerContent && 'justify-center'
           )}
           disabled={isDisabled}
           {...props}
         >
-          {buttonContent}
+          {contentWrapper}
         </Button>
       </motion.div>
     );
diff --git a/components/landing-page/navbar.tsx b/components/landing-page/navbar.tsx
index 5890c8543..5f7894766 100644
--- a/components/landing-page/navbar.tsx
+++ b/components/landing-page/navbar.tsx
@@ -1,13 +1,18 @@
 'use client';
 import Link from 'next/link';
-import { Menu, XIcon, Plus, Building2, ArrowUpRight } from 'lucide-react';
+import {
+  Menu,
+  Plus,
+  Building2,
+  ArrowUpRight,
+  User,
+  LogOut,
+  Settings,
+} from 'lucide-react';
 import Image from 'next/image';
-import { useRef, useState } from 'react';
-import { useGSAP } from '@gsap/react';
-import gsap from 'gsap';
-import { BoundlessButton } from '../buttons';
-import { usePathname, useRouter } from 'next/navigation';
-import { Sheet, SheetTrigger, SheetContent, SheetClose } from '../ui/sheet';
+import { useState, useMemo } from 'react';
+import { usePathname } from 'next/navigation';
+import { Sheet, SheetTrigger, SheetContent } from '../ui/sheet';
 import { useAuthStatus, useAuthActions } from '@/hooks/use-auth';
 import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 import {
@@ -16,669 +21,512 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu';
-import { User, LogOut, Settings } from 'lucide-react';
 import { UserMenu } from '../user/UserMenu';
 import { cn } from '@/lib/utils';
-// import WalletConnectButton from '../wallet/WalletConnectButton';
+import { BoundlessButton } from '../buttons';
 import CreateProjectModal from './project/CreateProjectModal';
 import { useProtectedAction } from '@/hooks/use-protected-action';
-import { useAuthStore } from '@/lib/stores/auth-store';
 import WalletRequiredModal from '@/components/wallet/WalletRequiredModal';
-import { useWindowSize } from '@/hooks/use-window-size';
 import { WalletButton } from '../wallet/WalletButton';
 
-gsap.registerPlugin(useGSAP);
+// Constants
+const BRAND_COLOR = '#a7f950';
+const ACTIONS = {
+  CREATE_PROJECT: 'create project',
+} as const;
 
-const menuItems = [
+const MENU_ITEMS = [
   { href: '/about', label: 'About' },
   { href: '/projects', label: 'Projects' },
   { href: '/hackathons', label: 'Hackathons' },
   { href: '/grants', label: 'Grants' },
   { href: '/bounties', label: 'Bounties' },
-
   { href: '/blog', label: 'Blog' },
-];
+] as const;
 
-export function Navbar() {
-  const navbarRef = useRef<HTMLElement>(null);
-  const logoRef = useRef<HTMLAnchorElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const ctaRef = useRef<HTMLDivElement>(null);
-  const router = useRouter();
-  const { isAuthenticated, isLoading, user } = useAuthStatus();
-  const pathname = usePathname();
-  const { width } = useWindowSize();
-
-  useGSAP(
-    () => {
-      gsap.fromTo(
-        navbarRef.current,
-        { opacity: 0 },
-        { opacity: 1, duration: 0.4, ease: 'power2.out' }
-      );
-
-      const logoHover = gsap.to(logoRef.current, {
-        scale: 1,
-        duration: 0.2,
-        ease: 'power2.out',
-        paused: true,
-      });
-
-      const logoEnterHandler = () => logoHover.play();
-      const logoLeaveHandler = () => logoHover.reverse();
-
-      logoRef.current?.addEventListener('mouseenter', logoEnterHandler);
-      logoRef.current?.addEventListener('mouseleave', logoLeaveHandler);
-
-      const menuItems = menuRef.current?.querySelectorAll('a');
-      const menuItemAnimations: Array<{
-        item: Element;
-        hoverTl: gsap.core.Timeline;
-        enterHandler: () => void;
-        leaveHandler: () => void;
-      }> = [];
-
-      menuItems?.forEach(item => {
-        const hoverTl = gsap.timeline({ paused: true });
-        hoverTl.to(item, {
-          duration: 0.2,
-          ease: 'power2.out',
-        });
-
-        const enterHandler = () => hoverTl.play();
-        const leaveHandler = () => hoverTl.reverse();
-
-        item.addEventListener('mouseenter', enterHandler);
-        item.addEventListener('mouseleave', leaveHandler);
-
-        menuItemAnimations.push({
-          item,
-          hoverTl,
-          enterHandler,
-          leaveHandler,
-        });
-      });
-
-      const ctaHover = gsap.to(ctaRef.current, {
-        scale: 1,
-        duration: 0.2,
-        ease: 'power2.out',
-        paused: true,
-      });
-
-      const ctaEnterHandler = () => ctaHover.play();
-      const ctaLeaveHandler = () => ctaHover.reverse();
-
-      ctaRef.current?.addEventListener('mouseenter', ctaEnterHandler);
-      ctaRef.current?.addEventListener('mouseleave', ctaLeaveHandler);
-
-      const scrollTl = gsap.timeline({ paused: true });
-      scrollTl.to(navbarRef.current, {
-        backgroundColor: 'rgba(0, 0, 0, 0.9)',
-        backdropFilter: 'blur(8px)',
-        duration: 0.2,
-        ease: 'power2.out',
-      });
-
-      const handleScroll = () => {
-        if (window.scrollY > 50) {
-          scrollTl.play();
-        } else {
-          scrollTl.reverse();
-        }
-      };
-
-      window.addEventListener('scroll', handleScroll);
-
-      return () => {
-        logoHover.kill();
-        ctaHover.kill();
-        scrollTl.kill();
-
-        logoRef.current?.removeEventListener('mouseenter', logoEnterHandler);
-        logoRef.current?.removeEventListener('mouseleave', logoLeaveHandler);
-
-        menuItemAnimations.forEach(
-          ({ item, hoverTl, enterHandler, leaveHandler }) => {
-            hoverTl.kill();
-            item.removeEventListener('mouseenter', enterHandler);
-            item.removeEventListener('mouseleave', leaveHandler);
-          }
-        );
+// Types
+interface UserProfile {
+  firstName?: string | null;
+  avatar?: string | null;
+}
 
-        ctaRef.current?.removeEventListener('mouseenter', ctaEnterHandler);
-        ctaRef.current?.removeEventListener('mouseleave', ctaLeaveHandler);
+interface User {
+  username?: string | null;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+  profile?: UserProfile;
+}
 
-        window.removeEventListener('scroll', handleScroll);
-      };
-    },
-    { scope: navbarRef }
-  );
+export function Navbar() {
+  const pathname = usePathname();
+  const { isAuthenticated, isLoading, user } = useAuthStatus();
 
+  // Don't show navbar on organization pages
   if (pathname.startsWith('/organizations')) {
     return null;
   }
+
   return (
-    <nav
-      ref={navbarRef}
-      className='sticky top-0 z-50 max-h-[88px] bg-[#030303A3] backdrop-blur-[12px]'
-    >
-      <div className='mx-auto max-w-[1440px] px-3 py-3 sm:px-6 sm:py-5 md:px-8 lg:px-12 xl:px-16 2xl:px-20'>
-        <div className='flex items-center justify-between gap-3 sm:gap-6'>
-          <div className='flex-shrink-0'>
-            <Link
-              ref={logoRef}
-              href='/'
-              onClick={() => router.push('/')}
-              className='flex items-center'
-            >
-              <Image
-                src='/logo-icon.png'
-                alt='logo'
-                width={32}
-                height={32}
-                className='transition-all duration-200 lg:hidden'
-              />
-              <Image
-                src='/logo.png'
-                alt='logo'
-                width={140}
-                height={28}
-                className='hidden transition-all duration-200 lg:block'
-              />
-            </Link>
-          </div>
+    <nav className='sticky top-0 z-50 border-b border-white/10 bg-[#030303]/95 shadow-lg shadow-black/20 backdrop-blur-xl'>
+      <div className='mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='flex h-16 items-center justify-between gap-4'>
+          {/* Logo */}
+          <Logo />
 
-          <div
-            ref={menuRef}
-            className='hidden md:flex md:flex-1 md:justify-center'
-          >
-            <div className='flex items-baseline space-x-2 lg:space-x-4'>
-              {menuItems.map(item => (
-                <Link
-                  key={item.href}
-                  href={item.href}
-                  className={cn(
-                    'rounded-md px-2 py-2 font-medium text-white transition-all duration-200 hover:bg-white/5 hover:text-white/80',
-                    'md:text-xs lg:text-sm',
-                    width && width < 1024 ? 'px-2' : 'px-3'
-                  )}
-                >
-                  {item.label}
-                </Link>
-              ))}
-            </div>
-          </div>
+          {/* Desktop Navigation */}
+          <DesktopMenu items={MENU_ITEMS} currentPath={pathname} />
 
-          <div ref={ctaRef} className='hidden md:block'>
+          {/* Desktop Actions - Updated with better alignment */}
+          <div className='hidden flex-shrink-0 md:flex md:items-center md:gap-3'>
             {isLoading ? (
-              <div className='flex items-center space-x-2'>
-                <div className='h-8 w-8 animate-pulse rounded-full bg-gray-200' />
-                <div className='h-4 w-20 animate-pulse rounded bg-gray-200' />
-              </div>
+              <LoadingSkeleton />
             ) : isAuthenticated ? (
-              <AuthenticatedNav />
+              <AuthenticatedActions />
             ) : (
-              <UnauthenticatedNav />
+              <UnauthenticatedActions />
             )}
           </div>
-          <MobileMenu isAuthenticated={isAuthenticated} user={user} />
+
+          {/* Mobile Menu */}
+          <MobileMenu
+            isAuthenticated={isAuthenticated}
+            isLoading={isLoading}
+            user={user}
+          />
         </div>
       </div>
     </nav>
   );
 }
 
-function AuthenticatedNav() {
-  const [createProjectModalOpen, setCreateProjectModalOpen] = useState(false);
+function Logo() {
+  return (
+    <Link
+      href='/'
+      className='flex-shrink-0 transition-opacity hover:opacity-80'
+      aria-label='Go to homepage'
+    >
+      <Image
+        src='/logo-icon.png'
+        alt='Logo'
+        width={32}
+        height={32}
+        className='md:hidden'
+      />
+      <Image
+        src='/logo.png'
+        alt='Logo'
+        width={140}
+        height={28}
+        className='hidden md:block'
+      />
+    </Link>
+  );
+}
+
+function DesktopMenu({
+  items,
+  currentPath,
+}: {
+  items: typeof MENU_ITEMS;
+  currentPath: string;
+}) {
+  return (
+    <nav
+      className='hidden flex-1 md:flex md:items-center md:justify-center'
+      aria-label='Main navigation'
+    >
+      <div className='flex items-center gap-1'>
+        {items.map(item => {
+          const isActive = currentPath === item.href;
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              aria-current={isActive ? 'page' : undefined}
+              className={cn(
+                'rounded-lg px-3 py-2 text-sm font-medium transition-all duration-100',
+                isActive
+                  ? `bg-[${BRAND_COLOR}]/10 text-[${BRAND_COLOR}] border border-[${BRAND_COLOR}]/20 shadow-sm shadow-[${BRAND_COLOR}]/5`
+                  : 'text-white/60 hover:bg-white/5 hover:text-white/90'
+              )}
+              style={
+                isActive
+                  ? {
+                      backgroundColor: `${BRAND_COLOR}1A`,
+                      color: BRAND_COLOR,
+                      borderColor: `${BRAND_COLOR}33`,
+                      boxShadow: `0 1px 2px ${BRAND_COLOR}0D`,
+                    }
+                  : undefined
+              }
+            >
+              {item.label}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
 
+function LoadingSkeleton() {
+  return (
+    <div className='flex items-center gap-3' role='status' aria-label='Loading'>
+      <div className='h-10 w-24 animate-pulse rounded-lg border border-white/10 bg-white/5' />
+      <div className='h-10 w-10 animate-pulse rounded-full border border-white/10 bg-white/5' />
+      <span className='sr-only'>Loading...</span>
+    </div>
+  );
+}
+
+function AuthenticatedActions() {
+  const [createProjectModalOpen, setCreateProjectModalOpen] = useState(false);
   const {
     executeProtectedAction,
     showWalletModal,
     closeWalletModal,
     handleWalletConnected,
   } = useProtectedAction({
-    actionName: 'create project',
+    actionName: ACTIONS.CREATE_PROJECT,
     onSuccess: () => setCreateProjectModalOpen(true),
   });
+
   return (
-    <div className='flex items-center space-x-2 lg:space-x-3'>
-      <WalletButton />
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <BoundlessButton className='hover:!text-primary tr bg-transparent text-white hover:bg-transparent'>
-            <Plus className='h-4 w-4' />
-          </BoundlessButton>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          align='end'
-          className='bg-background w-[280px] rounded-[8px] border border-[#2B2B2B] pt-3 pb-6 text-white shadow-[0_4px_4px_0_rgba(26,26,26,0.25)] sm:w-[300px]'
-        >
-          <DropdownMenuItem
-            onClick={async () => {
-              await executeProtectedAction(() =>
-                setCreateProjectModalOpen(true)
-              );
-            }}
-            className='group hover:text-primary px-6 py-3.5 text-white hover:!bg-transparent'
+    <>
+      <div className='flex items-center gap-2'>
+        <WalletButton />
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <BoundlessButton
+              variant='outline'
+              size='sm'
+              aria-label='Create new content'
+              className='border-white/20 transition-all duration-200'
+              style={
+                {
+                  '--hover-bg': `${BRAND_COLOR}1A`,
+                  '--hover-border': `${BRAND_COLOR}66`,
+                  '--hover-color': BRAND_COLOR,
+                } as React.CSSProperties
+              }
+              onMouseEnter={e => {
+                e.currentTarget.style.backgroundColor = `${BRAND_COLOR}1A`;
+                e.currentTarget.style.borderColor = `${BRAND_COLOR}66`;
+                e.currentTarget.style.color = BRAND_COLOR;
+              }}
+              onMouseLeave={e => {
+                e.currentTarget.style.backgroundColor = '';
+                e.currentTarget.style.borderColor = '';
+                e.currentTarget.style.color = '';
+              }}
+            >
+              <Plus className='h-4 w-4' />
+            </BoundlessButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align='end'
+            className='w-56 border-white/10 bg-[#030303]/98 shadow-xl shadow-black/40 backdrop-blur-xl'
           >
-            <span className='group-hover:text-primary flex w-full items-center justify-between'>
+            <DropdownMenuItem
+              onClick={() =>
+                executeProtectedAction(() => setCreateProjectModalOpen(true))
+              }
+              className='cursor-pointer text-white/80 hover:bg-white/5 hover:text-white focus:bg-white/5 focus:text-white'
+            >
+              <Plus className='mr-2 h-4 w-4' />
               Add Project
-              <Plus className='group-hover:text-primary h-4 w-4' />
-            </span>
-          </DropdownMenuItem>
-          <Link href='/organizations/new' target='_blank' rel='noreferrer'>
-            <DropdownMenuItem className='group hover:text-primary px-6 py-3.5 text-white hover:!bg-transparent'>
-              <span className='group-hover:text-primary flex w-full items-center justify-between'>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link
+                href='/organizations/new'
+                target='_blank'
+                className='text-white/80 hover:bg-white/5 hover:text-white focus:bg-white/5 focus:text-white'
+              >
+                <Building2 className='mr-2 h-4 w-4' />
                 Host Hackathon
-                <ArrowUpRight className='group-hover:text-primary h-4 w-4' />
-              </span>
+                <ArrowUpRight className='ml-auto h-4 w-4' />
+              </Link>
             </DropdownMenuItem>
-          </Link>
-          <Link href='/organizations/new' target='_blank' rel='noreferrer'>
-            <DropdownMenuItem className='group hover:text-primary px-6 py-3.5 text-white hover:!bg-transparent'>
-              <span className='group-hover:text-primary flex w-full items-center justify-between'>
+            <DropdownMenuItem asChild>
+              <Link
+                href='/organizations/new'
+                target='_blank'
+                className='text-white/80 hover:bg-white/5 hover:text-white focus:bg-white/5 focus:text-white'
+              >
+                <Building2 className='mr-2 h-4 w-4' />
                 Create Grant
-                <ArrowUpRight className='group-hover:text-primary h-4 w-4' />
-              </span>
+                <ArrowUpRight className='ml-auto h-4 w-4' />
+              </Link>
             </DropdownMenuItem>
-          </Link>
-        </DropdownMenuContent>
-      </DropdownMenu>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <UserMenu />
+      </div>
 
-      <UserMenu />
       <CreateProjectModal
         open={createProjectModalOpen}
         setOpen={setCreateProjectModalOpen}
       />
 
-      {/* Wallet Required Modal */}
       <WalletRequiredModal
         open={showWalletModal}
         onOpenChange={closeWalletModal}
-        actionName='create project'
+        actionName={ACTIONS.CREATE_PROJECT}
         onWalletConnected={handleWalletConnected}
       />
-    </div>
+    </>
   );
 }
 
-// In development, show a lightweight CTA that opens CreateProjectModal
-// even for unauthenticated users, so designers/QA can test the flow.
-function UnauthenticatedNav() {
+function UnauthenticatedActions() {
   const [createProjectModalOpen, setCreateProjectModalOpen] = useState(false);
-  const { width } = useWindowSize();
-
   const {
     executeProtectedAction,
     showWalletModal,
     closeWalletModal,
     handleWalletConnected,
   } = useProtectedAction({
-    actionName: 'create project',
+    actionName: ACTIONS.CREATE_PROJECT,
     onSuccess: () => setCreateProjectModalOpen(true),
   });
 
-  const showDevAddProject =
-    process.env.NODE_ENV !== 'production' &&
-    (process.env.NEXT_PUBLIC_SHOW_ADD_PROJECT_FOR_GUESTS === 'true' || true);
-
-  if (!showDevAddProject) {
-    return (
-      <BoundlessButton>
-        <Link href='/auth?mode=signup'>Get Started</Link>
-      </BoundlessButton>
-    );
-  }
+  const isDev = process.env.NODE_ENV !== 'production';
 
   return (
-    <div className='flex items-center space-x-2 lg:space-x-3'>
-      <BoundlessButton
-        variant='outline'
-        onClick={async () => {
-          await executeProtectedAction(() => setCreateProjectModalOpen(true));
-        }}
-        className='border-white/20 text-white hover:bg-white/10'
-        size={width && width < 1024 ? 'sm' : 'default'}
+    <>
+      {isDev && (
+        <BoundlessButton
+          variant='outline'
+          size='sm'
+          onClick={() =>
+            executeProtectedAction(() => setCreateProjectModalOpen(true))
+          }
+          className='border-white/20 transition-all duration-200'
+          style={
+            {
+              '--hover-bg': `${BRAND_COLOR}1A`,
+              '--hover-border': `${BRAND_COLOR}66`,
+              '--hover-color': BRAND_COLOR,
+            } as React.CSSProperties
+          }
+          onMouseEnter={e => {
+            e.currentTarget.style.backgroundColor = `${BRAND_COLOR}1A`;
+            e.currentTarget.style.borderColor = `${BRAND_COLOR}66`;
+            e.currentTarget.style.color = BRAND_COLOR;
+          }}
+          onMouseLeave={e => {
+            e.currentTarget.style.backgroundColor = '';
+            e.currentTarget.style.borderColor = '';
+            e.currentTarget.style.color = '';
+          }}
+        >
+          <Plus className='mr-2 h-4 w-4' />
+          Add Project
+        </BoundlessButton>
+      )}
+
+      <Link
+        href='/auth?mode=signin'
+        className='inline-flex h-8 items-center justify-center gap-2 rounded-[10px] bg-[#a7f950] px-3 text-sm font-medium whitespace-nowrap text-black shadow-sm shadow-[#a7f950]/20 transition-all hover:bg-[#a7f950]/90'
       >
-        <Plus className='mr-1 h-3 w-3 lg:mr-2 lg:h-4 lg:w-4' />
-        <span className='hidden sm:inline'>Add Project</span>
-        <span className='sm:hidden'>Add</span>
-      </BoundlessButton>
-      <BoundlessButton size={width && width < 1024 ? 'sm' : 'default'}>
-        <Link href='/auth?mode=signin'>Sign in</Link>
-      </BoundlessButton>
+        Sign In
+      </Link>
+
       <CreateProjectModal
         open={createProjectModalOpen}
         setOpen={setCreateProjectModalOpen}
       />
 
-      {/* Wallet Required Modal */}
       <WalletRequiredModal
         open={showWalletModal}
         onOpenChange={closeWalletModal}
-        actionName='create project'
+        actionName={ACTIONS.CREATE_PROJECT}
         onWalletConnected={handleWalletConnected}
       />
-    </div>
+    </>
   );
 }
 
-function MobileMenu({
+const MobileMenu = ({
   isAuthenticated,
+  isLoading,
   user,
 }: {
   isAuthenticated: boolean;
-  user: {
-    name?: string | null;
-    email?: string | null;
-    image?: string | null;
-    profile?: { firstName?: string | null; avatar?: string | null };
-    username?: string | null;
-  } | null;
-}) {
-  const mobileMenuRef = useRef<HTMLDivElement>(null);
-  const mobileButtonRef = useRef<HTMLButtonElement>(null);
-  const mobileLogoRef = useRef<HTMLAnchorElement>(null);
-  const mobileMenuItemsRef = useRef<HTMLDivElement>(null);
-  const mobileCTARef = useRef<HTMLDivElement>(null);
+  isLoading: boolean;
+  user: User | null;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
   const { logout } = useAuthActions();
-  const { isLoading } = useAuthStore();
-  const [createProjectModalOpen, setCreateProjectModalOpen] = useState(false);
-  const { width } = useWindowSize();
-  useGSAP(
-    () => {
-      gsap.fromTo(
-        mobileButtonRef.current,
-        { opacity: 0 },
-        { opacity: 1, duration: 0.3 }
-      );
-
-      const buttonHover = gsap.to(mobileButtonRef.current, {
-        scale: 1,
-        duration: 0.2,
-        ease: 'power2.out',
-        paused: true,
-      });
-
-      const buttonEnterHandler = () => buttonHover.play();
-      const buttonLeaveHandler = () => buttonHover.reverse();
-
-      mobileButtonRef.current?.addEventListener(
-        'mouseenter',
-        buttonEnterHandler
-      );
-      mobileButtonRef.current?.addEventListener(
-        'mouseleave',
-        buttonLeaveHandler
-      );
-
-      return () => {
-        buttonHover.kill();
-        mobileButtonRef.current?.removeEventListener(
-          'mouseenter',
-          buttonEnterHandler
-        );
-        mobileButtonRef.current?.removeEventListener(
-          'mouseleave',
-          buttonLeaveHandler
-        );
-      };
-    },
-    { scope: mobileMenuRef }
-  );
+  const pathname = usePathname();
 
-  const animateMobileMenuOpen = () => {
-    gsap.fromTo(
-      mobileLogoRef.current,
-      { opacity: 0 },
-      { opacity: 1, duration: 0.3, ease: 'power2.out' }
-    );
-
-    const menuItems = mobileMenuItemsRef.current?.querySelectorAll('a');
-    if (menuItems) {
-      gsap.fromTo(
-        menuItems,
-        { opacity: 0, y: 10 },
-        {
-          opacity: 1,
-          y: 0,
-          duration: 0.3,
-          stagger: 0.1,
-          ease: 'power2.out',
-        }
-      );
-    }
-
-    gsap.fromTo(
-      mobileCTARef.current,
-      { opacity: 0, y: 10 },
-      {
-        opacity: 1,
-        y: 0,
-        duration: 0.3,
-        delay: 0.2,
-        ease: 'power2.out',
-      }
-    );
-  };
-
-  const animateMobileMenuClose = () => {
-    gsap.to(
-      [mobileLogoRef.current, mobileMenuItemsRef.current, mobileCTARef.current],
-      {
-        opacity: 0,
-        duration: 0.2,
-        ease: 'power2.in',
-      }
-    );
-  };
+  const userInitial = useMemo(() => {
+    return user?.name?.charAt(0) || user?.email?.charAt(0) || 'U';
+  }, [user]);
+
+  const displayName = useMemo(() => {
+    return user?.name || user?.profile?.firstName || 'User';
+  }, [user]);
 
   return (
-    <div ref={mobileMenuRef} className='justify-self-end md:hidden'>
-      <Sheet
-        onOpenChange={open => {
-          if (open) {
-            setTimeout(animateMobileMenuOpen, 100);
-          } else {
-            animateMobileMenuClose();
-          }
-        }}
-      >
+    <div className='md:hidden'>
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
         <SheetTrigger asChild>
           <BoundlessButton
-            ref={mobileButtonRef}
             variant='outline'
-            size={width && width < 480 ? 'sm' : 'default'}
-            className='border-white/20 transition-all duration-200 hover:border-white/30 hover:bg-white/10 md:hidden'
+            size='sm'
+            aria-label='Open navigation menu'
+            className='border-white/20 transition-all duration-200'
+            style={
+              {
+                '--hover-bg': `${BRAND_COLOR}1A`,
+                '--hover-border': `${BRAND_COLOR}66`,
+                '--hover-color': BRAND_COLOR,
+              } as React.CSSProperties
+            }
+            onMouseEnter={e => {
+              e.currentTarget.style.backgroundColor = `${BRAND_COLOR}1A`;
+              e.currentTarget.style.borderColor = `${BRAND_COLOR}66`;
+              e.currentTarget.style.color = BRAND_COLOR;
+            }}
+            onMouseLeave={e => {
+              e.currentTarget.style.backgroundColor = '';
+              e.currentTarget.style.borderColor = '';
+              e.currentTarget.style.color = '';
+            }}
           >
-            <Menu className={width && width < 480 ? 'h-4 w-4' : 'h-5 w-5'} />
+            <Menu className='h-5 w-5' />
           </BoundlessButton>
         </SheetTrigger>
+
         <SheetContent
-          showCloseButton={false}
-          side='top'
-          className='px-4 pt-4 pb-8 sm:px-6 sm:pt-6 sm:pb-12'
+          side='right'
+          className='flex w-full flex-col border-l border-white/10 bg-[#030303] sm:max-w-md'
+          showCloseButton={true}
         >
-          {/* Header with logo and close button */}
-          <div className='mb-6 flex items-center justify-between sm:mb-8'>
-            <div className='flex-shrink-0'>
-              <Link ref={mobileLogoRef} href='/' className='flex items-center'>
-                <Image
-                  src='/logo.png'
-                  alt='logo'
-                  width={116}
-                  height={22}
-                  className='transition-all duration-200 lg:hidden'
-                />
-                <Image
-                  src='/logo.png'
-                  alt='logo'
-                  width={140}
-                  height={28}
-                  className='hidden transition-all duration-200 lg:block'
-                />
-              </Link>
-            </div>
-            <SheetClose>
-              <BoundlessButton
-                variant='outline'
-                size='sm'
-                className='border-white/20 hover:bg-white/10'
-              >
-                <XIcon className='h-4 w-4' />
-              </BoundlessButton>
-            </SheetClose>
-          </div>
-          {/* Navigation Menu */}
-          <div ref={mobileMenuItemsRef} className='mb-6 sm:mb-8'>
-            <h3 className='mb-4 text-xs font-semibold tracking-wider text-white/60 uppercase'>
-              Navigation
-            </h3>
-            <div className='flex flex-col gap-1'>
-              {menuItems.map(item => (
-                <Link
-                  key={item.href}
-                  href={item.href}
-                  className='flex items-center rounded-lg px-4 py-3 text-base font-medium text-white transition-all duration-200 hover:bg-white/10 hover:text-white active:bg-white/15'
-                >
-                  {item.label}
-                </Link>
-              ))}
-            </div>
-          </div>
-          <div ref={mobileCTARef}>
-            {isLoading ? (
-              <div className='flex items-center justify-center space-x-2 py-4'>
-                <div className='h-8 w-8 animate-pulse rounded-full bg-gray-200' />
-                <div className='h-4 w-20 animate-pulse rounded bg-gray-200' />
-              </div>
-            ) : isAuthenticated ? (
-              <div className='space-y-6'>
-                {/* User Profile Section */}
-                <div className='rounded-xl border border-white/10 bg-gradient-to-r from-white/5 to-white/10 p-4'>
-                  <div className='flex items-center space-x-3'>
-                    <Avatar className='h-12 w-12 ring-2 ring-white/20'>
-                      <AvatarImage
-                        src={user?.image || user?.profile?.avatar || ''}
-                        alt={user?.name || user?.profile?.firstName || ''}
-                      />
-                      <AvatarFallback className='bg-white/10 font-semibold text-white'>
-                        {user?.name?.charAt(0) ||
-                          user?.profile?.firstName?.charAt(0) ||
-                          user?.email?.charAt(0) ||
-                          'U'}
-                      </AvatarFallback>
-                    </Avatar>
-                    <div className='min-w-0 flex-1'>
-                      <p className='truncate text-base font-semibold text-white'>
-                        {user?.name || user?.profile?.firstName || 'User'}
-                      </p>
-                      <p className='truncate text-sm text-white/70'>
-                        {user?.email}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                {/* Wallet Connection */}
-                <div className='space-y-3'>
-                  <h3 className='text-xs font-semibold tracking-wider text-white/60 uppercase'>
-                    Wallet
-                  </h3>
-                  <WalletButton
-                  // variant='outline'
-                  // size='sm'
-                  // className='w-full border-white/20 bg-white/5 text-white hover:border-white/30 hover:bg-white/10'
+          <div className='flex flex-1 flex-col gap-6 overflow-y-auto pb-6'>
+            {/* User Info (if authenticated) */}
+            {isAuthenticated && user && (
+              <div className='flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/8'>
+                <Avatar className='h-10 w-10 border border-white/10'>
+                  <AvatarImage
+                    src={user?.image || user?.profile?.avatar || ''}
+                    alt={displayName}
                   />
-                </div>
-
-                {/* Quick Actions */}
-                <div className='space-y-3'>
-                  <h3 className='text-xs font-semibold tracking-wider text-white/60 uppercase'>
-                    Quick Actions
-                  </h3>
-                  <div className='grid grid-cols-1 gap-2'>
-                    <Link
-                      href={`/profile/${user?.username}`}
-                      className='flex items-center rounded-lg px-4 py-3 text-sm font-medium text-white transition-all duration-200 hover:bg-white/10 active:bg-white/15'
-                    >
-                      <User className='mr-3 h-4 w-4' />
-                      Profile
-                    </Link>
-                    <Link
-                      href='/organizations'
-                      className='flex items-center rounded-lg px-4 py-3 text-sm font-medium text-white transition-all duration-200 hover:bg-white/10 active:bg-white/15'
-                    >
-                      <Building2 className='mr-3 h-4 w-4' />
-                      Organizations
-                    </Link>
-                    <Link
-                      href='/me/settings'
-                      className='flex items-center rounded-lg px-4 py-3 text-sm font-medium text-white transition-all duration-200 hover:bg-white/10 active:bg-white/15'
-                    >
-                      <Settings className='mr-3 h-4 w-4' />
-                      Settings
-                    </Link>
-                  </div>
-                </div>
-                {/* Sign Out Button */}
-                <div className='border-t border-white/10 pt-2'>
-                  <BoundlessButton
-                    size='lg'
-                    fullWidth
-                    variant='outline'
-                    onClick={() => !isLoading && logout()}
-                    disabled={isLoading}
-                    className='w-full border-red-500/50 text-red-400 hover:border-red-500 hover:bg-red-500/10 hover:text-red-300'
-                  >
-                    <LogOut className='mr-2 h-4 w-4' />
-                    {isLoading ? 'Signing Out...' : 'Sign Out'}
-                  </BoundlessButton>
+                  <AvatarFallback className='bg-white/10 text-white/80'>
+                    {userInitial}
+                  </AvatarFallback>
+                </Avatar>
+                <div className='min-w-0 flex-1'>
+                  <p className='truncate text-sm font-medium text-white'>
+                    {displayName}
+                  </p>
+                  <p className='truncate text-xs text-white/60'>
+                    {user?.email}
+                  </p>
                 </div>
               </div>
-            ) : (
-              <div className='space-y-6'>
-                {/* Wallet Connection */}
-                <div className='space-y-3'>
-                  <h3 className='text-xs font-semibold tracking-wider text-white/60 uppercase'>
-                    Connect Wallet
-                  </h3>
-                  <WalletButton
-                  // variant='outline'
-                  // size='sm'
-                  // className='w-full border-white/20 bg-white/5 text-white hover:border-white/30 hover:bg-white/10'
-                  />
-                </div>
+            )}
 
-                {/* Get Started Section */}
-                <div className='space-y-3'>
-                  <h3 className='text-xs font-semibold tracking-wider text-white/60 uppercase'>
-                    Get Started
-                  </h3>
-                  <BoundlessButton
-                    size='lg'
-                    fullWidth
-                    className='w-full bg-gradient-to-r from-blue-600 to-purple-600 font-semibold text-white hover:from-blue-700 hover:to-purple-700'
+            {/* Navigation Links */}
+            <nav className='flex flex-col gap-1' aria-label='Mobile navigation'>
+              {MENU_ITEMS.map(item => {
+                const isActive = pathname === item.href;
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={() => setIsOpen(false)}
+                    aria-current={isActive ? 'page' : undefined}
+                    className={cn(
+                      'rounded-lg px-4 py-3 text-sm font-medium transition-all duration-200',
+                      isActive
+                        ? 'border'
+                        : 'text-white/70 hover:border hover:border-white/10 hover:bg-white/5 hover:text-white/90'
+                    )}
+                    style={
+                      isActive
+                        ? {
+                            backgroundColor: `${BRAND_COLOR}1A`,
+                            color: BRAND_COLOR,
+                            borderColor: `${BRAND_COLOR}33`,
+                          }
+                        : undefined
+                    }
                   >
-                    <Link
-                      href='/auth?mode=signup'
-                      className='flex items-center justify-center'
-                    >
-                      <Plus className='mr-2 h-4 w-4' />
-                      Get Started
+                    {item.label}
+                  </Link>
+                );
+              })}
+            </nav>
+
+            {/* Actions - Only for authenticated users */}
+            {isAuthenticated && (
+              <div className='flex flex-col gap-3 border-t border-white/10 pt-6'>
+                {isLoading ? (
+                  <LoadingSkeleton />
+                ) : (
+                  <>
+                    <WalletButton />
+                    {user?.username && (
+                      <Link
+                        href={`/profile/${user.username}`}
+                        onClick={() => setIsOpen(false)}
+                      >
+                        <BoundlessButton variant='outline' className='w-full'>
+                          <User className='mr-2 h-4 w-4' />
+                          Profile
+                        </BoundlessButton>
+                      </Link>
+                    )}
+                    <Link href='/me/settings' onClick={() => setIsOpen(false)}>
+                      <BoundlessButton variant='outline' className='w-full'>
+                        <Settings className='mr-2 h-4 w-4' />
+                        Settings
+                      </BoundlessButton>
                     </Link>
-                  </BoundlessButton>
-                </div>
+                    <BoundlessButton
+                      variant='outline'
+                      className='w-full border-red-500/50 text-red-400 hover:bg-red-500/10'
+                      onClick={() => {
+                        logout();
+                        setIsOpen(false);
+                      }}
+                    >
+                      <LogOut className='mr-2 h-4 w-4' />
+                      Sign Out
+                    </BoundlessButton>
+                  </>
+                )}
               </div>
             )}
           </div>
+
+          {/* Sign Up / Sign In Buttons - Fixed at bottom for unauthenticated users */}
+          {!isAuthenticated && (
+            <div className='mt-auto flex flex-col gap-3 border-t border-white/10 pt-6 pb-6'>
+              <Link
+                href='/auth?mode=signup'
+                onClick={() => setIsOpen(false)}
+                className='inline-flex h-9 w-full items-center justify-center gap-2 rounded-[10px] bg-[#a7f950] px-4 py-2 text-sm font-medium whitespace-nowrap text-black shadow-sm shadow-[#a7f950]/20 transition-all hover:bg-[#a7f950]/90'
+              >
+                Get Started
+              </Link>
+              <Link
+                href='/auth?mode=signin'
+                onClick={() => setIsOpen(false)}
+                className='inline-flex h-9 w-full items-center justify-center gap-2 rounded-[10px] border border-white/30 px-4 py-2 text-sm font-medium whitespace-nowrap text-white transition-all hover:border-white/40 hover:bg-white/10'
+              >
+                Sign In
+              </Link>
+            </div>
+          )}
         </SheetContent>
       </Sheet>
-      <CreateProjectModal
-        open={createProjectModalOpen}
-        setOpen={setCreateProjectModalOpen}
-      />
     </div>
   );
-}
+};
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index 522fe7d56..ca80d8856 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -76,7 +76,7 @@ function SheetContent({
         {children}
         {showCloseButton && (
           <SheetPrimitive.Close className='ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none'>
-            <XIcon className='size-4' />
+            <XIcon className='size-6 text-white' />
             <span className='sr-only'>Close</span>
           </SheetPrimitive.Close>
         )}
diff --git a/lib/auth-client.ts b/lib/auth-client.ts
index 3f806b1ce..621f3fb50 100644
--- a/lib/auth-client.ts
+++ b/lib/auth-client.ts
@@ -1,5 +1,9 @@
 import { createAuthClient } from 'better-auth/react';
-import { emailOTPClient } from 'better-auth/client/plugins';
+import {
+  emailOTPClient,
+  lastLoginMethodClient,
+  oneTapClient,
+} from 'better-auth/client/plugins';
 
 // Get base URL for Better Auth
 // Use proxy route on client-side to avoid CORS issues
@@ -26,5 +30,22 @@ export const authClient = createAuthClient({
   baseURL: getAuthBaseURL(),
   plugins: [
     emailOTPClient(), // Required for OTP email verification
+    lastLoginMethodClient(),
+    oneTapClient({
+      clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || '',
+      // Optional client configuration:
+      autoSelect: false,
+      cancelOnTapOutside: true,
+      context: 'signin',
+      additionalOptions: {
+        // Any extra options for the Google initialize method
+      },
+
+      // Configure prompt behavior and exponential backoff:
+      promptOptions: {
+        baseDelay: 1000, // Base delay in ms (default: 1000)
+        maxAttempts: 5, // Maximum number of attempts before triggering onPromptNotification (default: 5)
+      },
+    }),
   ],
 });
diff --git a/lib/data/blog.ts b/lib/data/blog.ts
index 577741a3f..11be7ac73 100644
--- a/lib/data/blog.ts
+++ b/lib/data/blog.ts
@@ -24,6 +24,371 @@ export interface BlogPost {
 }
 
 export const mockBlogPosts: BlogPost[] = [
+  {
+    id: 'what-is-boundless',
+    title: 'What is Boundless?',
+    excerpt:
+      'Discover Boundless: the decentralized platform for crowdfunding, grants, and hackathons built on Stellar blockchain. Learn how milestone-based escrow, instant prize payouts, community validation, and smart contracts create a more transparent and secure funding ecosystem.',
+    content: `# What is Boundless?
+
+If you've ever had a brilliant idea but lacked the funds to bring it to life, wanted to compete in a hackathon with fair prize distribution, or needed to support innovative projects with confidence—you're not alone. Traditional funding platforms are filled with uncertainty, high fees, slow payouts, and limited transparency. That's where Boundless comes in.
+
+## The Problem with Traditional Funding Platforms
+
+Let's be honest: traditional funding platforms—whether for crowdfunding, grants, or hackathons—have some serious flaws. You've probably heard the horror stories: projects that raise thousands only to disappear, hackathon winners waiting weeks for prize payouts, creators who never deliver on promises, and backers left with disappointment. Even when projects succeed, the process is often opaque, expensive, and slow.
+
+**The challenges are real:**
+- **All-or-nothing funding**: You either hit your goal or get nothing, with no middle ground
+- **Delayed prize payouts**: Hackathon winners often wait weeks or months to receive their prizes
+- **Lack of accountability**: Once funds are released, there's little oversight on how they're used
+- **High fees**: Platform fees can eat up 5-8% of your hard-earned funds
+- **Slow transactions**: Traditional payment systems can take days or weeks
+- **Limited transparency**: Participants often have no idea if their money is being used as promised
+- **Geographic restrictions**: Many platforms limit who can participate based on location
+- **Manual prize distribution**: Hackathon organizers struggle with complex, error-prone payout processes
+
+## Enter Boundless: A New Way to Fund Innovation
+
+Boundless is a **decentralized platform for crowdfunding, grants, and hackathons** built on the Stellar blockchain that solves these problems through smart contracts, milestone-based funding, instant prize payouts, and community-driven validation. Think of it as combining the best of Kickstarter, Devpost, and grant platforms—but with blockchain-powered accountability, transparency, and instant payouts.
+
+### What Makes Boundless Different?
+
+Boundless isn't just another crowdfunding platform—it's a complete reimagining of how funding works. Here's what sets us apart:
+
+#### 1. **Milestone-Based Escrow System**
+
+Unlike traditional platforms that release all funds at once, Boundless uses **smart contract escrow** to hold funds securely until specific project milestones are completed and verified. This means:
+
+- **Backers are protected**: Funds are only released when creators deliver on their promises
+- **Creators stay accountable**: Milestone verification ensures projects stay on track
+- **Transparent progress**: Everyone can see exactly what's been completed and what's next
+- **Automatic releases**: No waiting for manual approvals—when milestones are met, funds flow automatically
+
+#### 2. **Community Validation Before Funding**
+
+Before any project goes live, it goes through a **community validation process**:
+
+- **Peer review**: Other creators and backers evaluate your idea
+- **Expert feedback**: Industry experts assess feasibility and market potential
+- **Public voting**: The community votes on whether projects should move forward
+- **Refinement opportunity**: Creators can improve their proposals based on feedback
+
+This validation process ensures that only projects with genuine potential and credibility make it to the funding stage, giving backers greater confidence in where their support goes.
+
+#### 3. **Built on Stellar Blockchain**
+
+Stellar isn't just any blockchain—it's designed for fast, affordable, and sustainable transactions:
+
+- **Lightning-fast**: Transactions finalize in 2-5 seconds (compared to minutes or hours on other networks)
+- **Ultra-low fees**: Just $0.00001 per transaction—practically free
+- **Global accessibility**: No geographic restrictions, works anywhere in the world
+- **Energy efficient**: Stellar uses a consensus mechanism that's far more sustainable than proof-of-work systems
+
+#### 4. **Three Powerful Funding Models**
+
+Boundless supports three distinct funding models, each optimized for different needs:
+
+**Hackathons**
+- **Instant prize payouts**: Winners receive prizes immediately via smart contracts—no waiting weeks for bank transfers
+- **Automated prize distribution**: Smart contracts handle tier-based prize pools automatically
+- **Transparent judging**: Community voting combined with expert judging panels
+- **Global participation**: No geographic restrictions—compete from anywhere in the world
+- **Fair competition**: On-chain verification ensures all submissions are legitimate
+- **Real-time leaderboards**: Track your progress and see rankings as they update
+- **Multiple prize tiers**: Support for first, second, third place, and special category prizes
+- **Organizer-friendly**: Set up hackathons in minutes with automated prize pool management
+
+**Crowdfunding Campaigns**
+- Milestone-based releases with escrow protection
+- Set your funding goal and deadline
+- Community backing with transparent progress tracking
+- Funds released only when milestones are verified
+
+**Grant Programs**
+- Apply for grants from organizations and institutions
+- Structured milestone-based funding
+- Professional review and approval processes
+- Automated milestone verification and fund releases
+
+#### 5. **Trustless Escrow with Trustless Work**
+
+All funds are held in **trustless escrow contracts** powered by Trustless Work, which means:
+
+- **No middleman**: Smart contracts handle everything automatically
+- **Transparent**: Every transaction is verifiable on-chain via Stellar.expert
+- **Secure**: Funds are locked in smart contracts until conditions are met
+- **Automated**: No manual intervention needed—the code enforces the rules
+
+#### 6. **Multi-Wallet Support**
+
+We support all major Stellar wallets, so you can use what you're already comfortable with:
+
+- Freighter
+- Albedo
+- Rabet
+- xBull
+- Lobstr
+- Hana
+- HOT Wallet
+
+#### 7. **Lower Fees, Higher Transparency**
+
+At just **4% platform fee** (compared to 5-8% on competitors), Boundless offers:
+
+- **Transparent fee structure**: All fees are clearly defined in smart contracts
+- **No hidden costs**: What you see is what you pay
+- **Fair distribution**: Fees are used to maintain and improve the platform
+
+## How Boundless Works
+
+The Boundless experience is designed to be intuitive, whether you're organizing a hackathon, launching a campaign, applying for grants, or participating as a developer or backer:
+
+### For Hackathon Organizers
+
+1. **Create Your Hackathon**: Set up your competition with prize tiers, rules, and deadlines
+2. **Fund Prize Pool**: Deposit prize funds into secure smart contract escrow
+3. **Launch**: Open registration and let participants join from around the world
+4. **Monitor Submissions**: Track real-time submissions and participant progress
+5. **Judging**: Combine expert judging with community voting for fair evaluation
+6. **Instant Payouts**: Winners receive prizes automatically via smart contracts—no manual processing needed
+7. **Transparent Results**: All winners and prize distributions are verifiable on-chain
+
+### For Hackathon Participants
+
+1. **Discover Hackathons**: Browse active competitions across different categories and themes
+2. **Register & Join**: Sign up for hackathons that interest you—no geographic restrictions
+3. **Build & Submit**: Create your project and submit before the deadline
+4. **Compete Fairly**: All submissions are verified on-chain for legitimacy
+5. **Track Rankings**: See real-time leaderboards and your position
+6. **Win & Get Paid Instantly**: If you win, prizes are automatically sent to your wallet—no waiting
+7. **Build Your Portfolio**: Showcase your wins and build your reputation in the community
+
+### For Crowdfunding Creators
+
+1. **Submit Your Idea**: Start by submitting your project idea for community validation
+2. **Get Feedback**: Receive valuable input from peers, experts, and the community
+3. **Refine and Launch**: Improve your proposal based on feedback, then launch your campaign
+4. **Set Milestones**: Define clear, verifiable milestones for your project
+5. **Raise Funds**: Backers contribute, and funds are held in secure escrow
+6. **Deliver Milestones**: Complete milestones and submit proof
+7. **Get Paid**: Funds are automatically released as milestones are verified
+8. **Build Your Reputation**: Successful projects build your credibility for future campaigns
+
+### For Grant Applicants
+
+1. **Browse Grant Programs**: Discover available grants from organizations and institutions
+2. **Submit Proposal**: Apply with detailed project proposals and milestones
+3. **Review Process**: Participate in community and expert review processes
+4. **Get Approved**: Receive approval with structured milestone-based funding
+5. **Execute & Deliver**: Complete milestones and submit verification
+6. **Receive Funding**: Get automatic fund releases as milestones are verified
+
+### For Backers & Supporters
+
+1. **Discover Projects**: Browse validated projects, active hackathons, and grant programs
+2. **Research and Evaluate**: Review project details, milestones, and creator history
+3. **Support with Confidence**: Contribute knowing your funds are protected in escrow
+4. **Track Progress**: Watch real-time updates as milestones are completed
+5. **Verify on Blockchain**: Check all transactions on Stellar.expert for full transparency
+6. **Support Innovation**: Be part of bringing groundbreaking ideas to life
+
+## The Technology Behind Boundless
+
+Boundless leverages cutting-edge blockchain technology to create a secure, transparent, and efficient platform:
+
+### Soroban Smart Contracts
+
+Built on **Soroban**, Stellar's smart contract platform, our escrow contracts are:
+
+- **Rust-based**: Written in Rust for maximum security and performance
+- **Audited**: Regularly reviewed for security vulnerabilities
+- **Upgradeable**: Can be improved without disrupting existing projects
+- **Gas-efficient**: Optimized for low transaction costs
+
+### Trustless Work Integration
+
+We've integrated **Trustless Work**, a leading escrow infrastructure provider, to handle:
+
+- Multi-release escrow contracts
+- Automated milestone verification
+- Secure fund management
+- Dispute resolution mechanisms
+
+### Modern Web Stack
+
+The platform itself is built with:
+
+- **Next.js 15**: Latest React framework for optimal performance
+- **TypeScript**: Type-safe code for reliability
+- **Tailwind CSS**: Beautiful, responsive design
+- **Stellar SDK**: Seamless blockchain integration
+
+## Real-World Impact
+
+Boundless is more than just technology—it's about creating real opportunities:
+
+### For Hackathon Organizers
+
+- **Instant prize distribution**: No more manual payouts or waiting weeks—winners get paid immediately
+- **Automated management**: Smart contracts handle prize pool distribution automatically
+- **Global reach**: Attract participants from anywhere in the world
+- **Transparent competition**: All submissions and results are verifiable on-chain
+- **Lower operational costs**: Reduced administrative overhead with automated systems
+- **Fair judging**: Combine expert panels with community voting for balanced evaluation
+
+### For Hackathon Participants
+
+- **Instant prize payouts**: Win and receive your prize immediately—no waiting for bank transfers
+- **Fair competition**: On-chain verification ensures all participants play by the rules
+- **Global access**: Compete in hackathons regardless of your location
+- **Portfolio building**: Showcase your wins and build your developer reputation
+- **Real-time feedback**: See rankings and progress as the competition unfolds
+- **Multiple opportunities**: Access to hackathons across different categories and themes
+
+### For Innovators & Creators
+
+- **Access to funding** without traditional gatekeepers
+- **Community support** and validation before launch
+- **Accountability framework** that helps you stay on track
+- **Global reach** without geographic limitations
+- **Lower costs** means more money goes to your project
+
+### For Backers & Grant Providers
+
+- **Reduced risk** through milestone-based releases
+- **Full transparency** with on-chain verification
+- **Community validation** ensures quality projects
+- **Lower fees** mean your support goes further
+- **Global access** to innovative projects worldwide
+- **Automated distribution** for grants and hackathon prizes
+
+### For Communities
+
+- **Democratized funding** accessible to everyone
+- **Quality control** through validation processes
+- **Economic empowerment** for underserved regions
+- **Innovation support** for groundbreaking ideas
+- **Transparent governance** with community participation
+- **Fair competition** in hackathons with instant, verifiable results
+
+## Why "Boundless"?
+
+The name "Boundless" reflects our mission: to remove the boundaries that limit innovation and funding. We believe that great ideas shouldn't be constrained by:
+
+- Geographic location
+- Traditional financial systems
+- High fees and middlemen
+- Lack of transparency
+- Limited accountability
+
+With Boundless, the potential for innovation is truly **boundless**.
+
+## Getting Started with Boundless
+
+Ready to join the future of funding? Here's how to get started:
+
+### If You're a Hackathon Organizer
+
+1. **Sign up** for a Boundless account
+2. **Create your hackathon** with prize tiers, rules, and deadlines
+3. **Fund your prize pool** by depositing into secure escrow
+4. **Launch and promote** your competition globally
+5. **Monitor submissions** in real-time
+6. **Judge and award** winners with instant automatic payouts
+
+### If You're a Hackathon Participant
+
+1. **Create an account** to explore active hackathons
+2. **Browse competitions** across different categories and themes
+3. **Connect your Stellar wallet** to receive prizes
+4. **Register and build** your project during the competition
+5. **Submit your entry** before the deadline
+6. **Win and get paid instantly** if you're selected as a winner
+
+### If You're a Creator
+
+1. **Sign up** for a Boundless account (no wallet needed initially)
+2. **Submit your project idea** for community validation
+3. **Engage with feedback** and refine your proposal
+4. **Connect your Stellar wallet** when you're ready to launch
+5. **Set up milestones** and define your funding goal
+6. **Launch your campaign** and start raising funds
+
+### If You're a Backer
+
+1. **Create an account** to explore projects and hackathons
+2. **Browse validated projects** and active competitions
+3. **Connect your Stellar wallet** to start backing
+4. **Support projects** that align with your interests
+5. **Track progress** and celebrate milestones with creators
+6. **Build your portfolio** of supported innovations
+
+## The Future of Funding is Here
+
+Boundless represents a fundamental shift in how we think about funding innovation. By combining the best of blockchain technology, smart contracts, and community governance, we've created a platform that's:
+
+- **More transparent** than traditional crowdfunding
+- **More secure** than centralized platforms
+- **More affordable** than competitors
+- **More accessible** to global participants
+- **More accountable** through milestone verification
+
+Whether you're organizing a hackathon and need instant prize distribution, competing in competitions and want fair, transparent judging, an entrepreneur with a game-changing idea, a developer looking for grant funding, a creator building a community project, or someone who wants to support innovation—Boundless provides the tools, security, and transparency you need to succeed.
+
+## Join the Boundless Community
+
+Boundless is more than a platform—it's a community of innovators, backers, and dreamers working together to bring bold ideas to life. When you join Boundless, you're not just using a tool; you're becoming part of a movement that's redefining what's possible in funding and innovation.
+
+**The question isn't "What is Boundless?"—it's "What will you build with Boundless?"**
+
+Ready to unlock your boundless potential? [Get started today](/auth/signup) and join thousands of hackathon organizers, participants, creators, and backers who are already building the future.
+
+> "Boundless isn't just a platform—it's a promise that great ideas will find the support they deserve, with transparency, security, and accountability built in from day one." - The Boundless Team
+
+---
+
+**Have questions?** Check out our [About page](/about) or [contact us](/contact) to learn more. We're here to help you succeed.`,
+    image: '/funding.png',
+    date: '1 Aug, 2025',
+    slug: 'what-is-boundless',
+    category: 'Platform',
+    author: {
+      name: 'Boundless Team',
+      avatar: '/admin.png',
+      bio: 'The team behind Boundless, dedicated to revolutionizing how ideas get funded through blockchain technology and community-driven innovation.',
+    },
+    tags: [
+      'Platform',
+      'Introduction',
+      'Crowdfunding',
+      'Hackathons',
+      'Grants',
+      'Blockchain',
+      'Stellar',
+    ],
+    readTime: 10,
+    publishedAt: '2025-08-01T10:00:00Z',
+    seo: {
+      metaTitle:
+        'What is Boundless? | Hackathons, Crowdfunding & Grants Platform',
+      metaDescription:
+        'Discover Boundless: the decentralized platform for hackathons, crowdfunding, and grants on Stellar blockchain. Instant prize payouts, milestone-based funding, smart contract escrow, and community validation.',
+      keywords: [
+        'Boundless',
+        'hackathon platform',
+        'instant prize payouts',
+        'decentralized crowdfunding',
+        'Stellar blockchain',
+        'milestone funding',
+        'smart contracts',
+        'escrow',
+        'community validation',
+        'grants platform',
+        'hackathon prizes',
+        'Trustless Work',
+      ],
+    },
+  },
   {
     id: '1',
     title: "Milestone-Based Funding: Why It's the Future of Crowdfunding",

From 0fff7ec6c9ae070d04f362112a3c121ef0e3b811 Mon Sep 17 00:00:00 2001
From: Collins Chikangwu <collinschristroa@gmail.com>
Date: Tue, 18 Nov 2025 11:51:43 +0100
Subject: [PATCH 2/3] feat: implement notification system with polling and
 preferences management

---
 app/(landing)/notifications/page.tsx          | 148 +++++++++++
 app/(landing)/organizations/[id]/page.tsx     |  16 +-
 app/(landing)/page.tsx                        |   5 +-
 app/providers.tsx                             |  24 +-
 components/auth/LoginWrapper.tsx              |   3 +-
 components/auth/OtpForm.tsx                   |  78 +++---
 components/landing-page/Hero copy.tsx         | 217 ++++++++++++++++
 components/landing-page/Hero2.tsx             | 221 +++++++++++++++++
 .../landing-page/hackathon/HackathonCard.tsx  |   6 +-
 components/notifications/NotificationBell.tsx |  71 ++++++
 .../notifications/NotificationDropdown.tsx    | 234 ++++++++++++++++++
 components/notifications/NotificationIcon.tsx | 200 +++++++++++++++
 components/notifications/NotificationItem.tsx | 133 ++++++++++
 components/notifications/NotificationList.tsx | 102 ++++++++
 .../organization/OrganizationHeader.tsx       |  67 ++---
 .../cards/OrganizationSelector.tsx            | 106 +++++---
 .../organization/cards/OrganzationCards.tsx   |  22 +-
 components/ui/shadcn-io/cursor/index.tsx      |  62 +++++
 components/user/UserMenu.tsx                  |  20 +-
 hooks/use-notification-polling.ts             |  39 +++
 hooks/use-notification-preferences.ts         |  83 +++++++
 hooks/use-notifications.ts                    | 140 +++++++++--
 lib/api/notifications.ts                      | 131 ++++++++++
 lib/mock.ts                                   |  70 ------
 next.config.ts                                |   4 +
 public/lines.svg                              |   4 +
 types/notifications.ts                        | 165 ++++++++++++
 27 files changed, 2130 insertions(+), 241 deletions(-)
 create mode 100644 app/(landing)/notifications/page.tsx
 create mode 100644 components/landing-page/Hero copy.tsx
 create mode 100644 components/landing-page/Hero2.tsx
 create mode 100644 components/notifications/NotificationBell.tsx
 create mode 100644 components/notifications/NotificationDropdown.tsx
 create mode 100644 components/notifications/NotificationIcon.tsx
 create mode 100644 components/notifications/NotificationItem.tsx
 create mode 100644 components/notifications/NotificationList.tsx
 create mode 100644 components/ui/shadcn-io/cursor/index.tsx
 create mode 100644 hooks/use-notification-polling.ts
 create mode 100644 hooks/use-notification-preferences.ts
 create mode 100644 lib/api/notifications.ts
 create mode 100644 public/lines.svg
 create mode 100644 types/notifications.ts

diff --git a/app/(landing)/notifications/page.tsx b/app/(landing)/notifications/page.tsx
new file mode 100644
index 000000000..d0315ca95
--- /dev/null
+++ b/app/(landing)/notifications/page.tsx
@@ -0,0 +1,148 @@
+'use client';
+
+import { useState } from 'react';
+import { useNotifications } from '@/hooks/use-notifications';
+import { useNotificationPolling } from '@/hooks/use-notification-polling';
+import { NotificationList } from '@/components/notifications/NotificationList';
+import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
+import { toast } from 'sonner';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export default function NotificationsPage() {
+  const [page, setPage] = useState(1);
+  const limit = 20;
+
+  const notificationsHook = useNotifications({
+    page,
+    limit,
+    autoFetch: true,
+  });
+
+  const {
+    notifications,
+    loading,
+    error,
+    total,
+    unreadCount,
+    markAllAsRead,
+    markNotificationAsRead,
+    setCurrentPage,
+  } = notificationsHook;
+
+  // Enable polling for real-time updates
+  useNotificationPolling(notificationsHook, {
+    interval: 30000,
+    enabled: true,
+  });
+
+  const totalPages = Math.ceil(total / limit);
+
+  const handleMarkAllAsRead = async () => {
+    try {
+      await markAllAsRead();
+      toast.success('All notifications marked as read');
+    } catch {
+      toast.error('Failed to mark all as read');
+    }
+  };
+
+  const handlePageChange = (newPage: number) => {
+    setCurrentPage(newPage);
+    setPage(newPage);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  if (error) {
+    return (
+      <div className='container mx-auto max-w-4xl p-6'>
+        <div className='rounded-lg border border-red-800/50 bg-red-950/20 p-8 text-center'>
+          <p className='text-lg font-semibold text-red-400'>
+            Error loading notifications
+          </p>
+          <p className='mt-2 text-sm text-zinc-400'>{error.message}</p>
+          <Button
+            onClick={() => notificationsHook.refetch()}
+            className='mt-4'
+            variant='outline'
+          >
+            Try Again
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='container mx-auto max-w-4xl p-6'>
+      <div className='mb-6 flex items-center justify-between'>
+        <div>
+          <h1 className='text-3xl font-bold text-white'>Notifications</h1>
+          <p className='mt-1 text-sm text-zinc-400'>
+            {loading ? (
+              <Skeleton className='h-4 w-48' />
+            ) : (
+              <>
+                {unreadCount} unread of {total} total
+              </>
+            )}
+          </p>
+        </div>
+        {unreadCount > 0 && !loading && (
+          <Button
+            onClick={handleMarkAllAsRead}
+            variant='outline'
+            className='border-primary/30 text-primary hover:bg-primary/10'
+          >
+            Mark all as read
+          </Button>
+        )}
+      </div>
+
+      <NotificationList
+        notifications={notifications}
+        loading={loading}
+        onNotificationClick={notification => {
+          if (!notification.read) {
+            markNotificationAsRead([notification._id]).catch(() => {
+              // Silently handle error - user feedback already provided
+            });
+          }
+        }}
+        onMarkAsRead={id => {
+          markNotificationAsRead([id]).catch(() => {
+            // Silently handle error - user feedback already provided
+          });
+        }}
+      />
+
+      {totalPages > 1 && !loading && (
+        <div className='mt-8 flex items-center justify-center gap-4'>
+          <Button
+            onClick={() => handlePageChange(page - 1)}
+            disabled={page === 1}
+            variant='outline'
+            size='sm'
+            className='border-zinc-800/50'
+          >
+            <ChevronLeft className='mr-1 h-4 w-4' />
+            Previous
+          </Button>
+          <span className='text-sm text-zinc-400'>
+            Page {page} of {totalPages}
+          </span>
+          <Button
+            onClick={() => handlePageChange(page + 1)}
+            disabled={page === totalPages}
+            variant='outline'
+            size='sm'
+            className='border-zinc-800/50'
+          >
+            Next
+            <ChevronRight className='ml-1 h-4 w-4' />
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/(landing)/organizations/[id]/page.tsx b/app/(landing)/organizations/[id]/page.tsx
index 7b70105de..838da2b01 100644
--- a/app/(landing)/organizations/[id]/page.tsx
+++ b/app/(landing)/organizations/[id]/page.tsx
@@ -1,7 +1,21 @@
+'use client';
+
 import OrganizationAnalytics from '@/components/organization/OrganizationAnalytics';
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useParams } from 'next/navigation';
+import { useOrganization } from '@/lib/providers/OrganizationProvider';
 
 const OrganizationPage = () => {
+  const params = useParams();
+  const organizationId = params.id as string;
+  const { setActiveOrg } = useOrganization();
+
+  useEffect(() => {
+    if (organizationId) {
+      setActiveOrg(organizationId);
+    }
+  }, [organizationId, setActiveOrg]);
+
   return (
     <div className='bg-background-main-bg min-h-screen text-white'>
       <OrganizationAnalytics />
diff --git a/app/(landing)/page.tsx b/app/(landing)/page.tsx
index 64445b5a4..ba79e4989 100644
--- a/app/(landing)/page.tsx
+++ b/app/(landing)/page.tsx
@@ -1,18 +1,19 @@
 import BeamBackground from '@/components/landing-page/BeamBackground';
-import { Hero } from '@/components/landing-page';
 import WhyBoundless from '@/components/landing-page/WhyBoundless';
 import BackedBy from '@/components/landing-page/BackedBy';
 import NewsLetter from '@/components/landing-page/NewsLetter';
 import BlogSection from '@/components/landing-page/blog/BlogSection';
 import Explore from '@/components/landing-page/Explore';
 import CleanBanner from '@/components/landing-page/Banner';
+import Hero2 from '@/components/landing-page/Hero2';
 
 export default function LandingPage() {
   return (
     <div className='relative overflow-hidden'>
       <BeamBackground />
       <div className='relative z-10 mx-auto max-w-[1440px] space-y-[60px] px-5 py-5 md:space-y-[80px] md:px-[50px] lg:px-[100px]'>
-        <Hero />
+        {/* <Hero /> */}
+        <Hero2 />
         <Explore />
         <WhyBoundless />
         <BackedBy />
diff --git a/app/providers.tsx b/app/providers.tsx
index 848d2638e..bd629961c 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -5,14 +5,6 @@ import { AuthProvider } from '@/components/providers/auth-provider';
 import { WalletProvider } from '@/components/providers/wallet-provider';
 import { TrustlessWorkProvider } from '@/lib/providers/TrustlessWorkProvider';
 import { EscrowProvider } from '@/lib/providers/EscrowProvider';
-import { NotificationProvider } from 'react-notification-core';
-import {
-  mockFetchNotifications,
-  mockMarkAsRead,
-  mockMarkAllAsRead,
-  mockDeleteNotification,
-} from '@/lib/mock';
-
 interface ProvidersProps {
   children: ReactNode;
 }
@@ -22,21 +14,7 @@ export function Providers({ children }: ProvidersProps) {
     <AuthProvider>
       <WalletProvider>
         <TrustlessWorkProvider>
-          <EscrowProvider>
-            <NotificationProvider
-              fetchNotifications={mockFetchNotifications}
-              onMarkAsRead={mockMarkAsRead}
-              onMarkAllAsRead={mockMarkAllAsRead}
-              onDeleteNotification={mockDeleteNotification}
-              fetchOptions={{
-                retryCount: 2,
-                retryDelay: 1000,
-                timeout: 5000,
-              }}
-            >
-              {children}
-            </NotificationProvider>
-          </EscrowProvider>
+          <EscrowProvider>{children}</EscrowProvider>
         </TrustlessWorkProvider>
       </WalletProvider>
     </AuthProvider>
diff --git a/components/auth/LoginWrapper.tsx b/components/auth/LoginWrapper.tsx
index a2f2d906c..a9df3e2c1 100644
--- a/components/auth/LoginWrapper.tsx
+++ b/components/auth/LoginWrapper.tsx
@@ -32,8 +32,7 @@ const LoginWrapper = ({ setLoadingState }: LoginWrapperProps) => {
   const [isLoading, setIsLoading] = useState(false);
   const [lastMethod, setLastMethod] = useState<string | null>(null);
 
-  const callbackUrl =
-    searchParams.get('callbackUrl') || 'http://localhost:3000/';
+  const callbackUrl = searchParams.get('callbackUrl') || '/';
 
   useEffect(() => {
     const method = authClient.getLastUsedLoginMethod();
diff --git a/components/auth/OtpForm.tsx b/components/auth/OtpForm.tsx
index 7a7c9e4a6..85d2f5ded 100644
--- a/components/auth/OtpForm.tsx
+++ b/components/auth/OtpForm.tsx
@@ -172,15 +172,15 @@ const OtpForm = ({
 
   return (
     <>
-      <div className='space-y-6'>
-        <div>
-          <h2 className='mb-3 text-2xl font-medium text-white lg:text-[40px]'>
+      <div className='space-y-4 sm:space-y-6'>
+        <div className='space-y-2 sm:space-y-3'>
+          <h2 className='text-xl font-medium text-white sm:text-2xl lg:text-[40px]'>
             Enter OTP
           </h2>
-          <p className='text-sm leading-relaxed text-[#D9D9D9] lg:text-base'>
+          <p className='text-xs leading-relaxed text-[#D9D9D9] sm:text-sm lg:text-base'>
             Enter the OTP that was sent to {maskEmail(email)}
           </p>
-          <p className='text-sm leading-relaxed text-[#D9D9D9] lg:text-base'>
+          <p className='text-xs leading-relaxed text-[#D9D9D9] sm:text-sm lg:text-base'>
             Please keep this code private.
           </p>
         </div>
@@ -188,7 +188,7 @@ const OtpForm = ({
         <Form {...form}>
           <form
             onSubmit={form.handleSubmit(onSubmit)}
-            className='w-full space-y-6'
+            className='w-full space-y-4 sm:space-y-6'
           >
             <FormField
               control={form.control}
@@ -196,37 +196,39 @@ const OtpForm = ({
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
-                    <InputOTP
-                      {...field}
-                      maxLength={6}
-                      className='flex items-center justify-between'
-                      containerClassName='justify-between'
-                    >
-                      <InputOTPSlot
-                        index={0}
-                        className='h-[73px] w-[73px] !rounded-2xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-white'
-                      />
-                      <InputOTPSlot
-                        index={1}
-                        className='h-[73px] w-[73px] rounded-2xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-white'
-                      />
-                      <InputOTPSlot
-                        index={2}
-                        className='h-[73px] w-[73px] rounded-2xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-white'
-                      />
-                      <InputOTPSlot
-                        index={3}
-                        className='h-[73px] w-[73px] rounded-2xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-white'
-                      />
-                      <InputOTPSlot
-                        index={4}
-                        className='h-[73px] w-[73px] rounded-2xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-white'
-                      />
-                      <InputOTPSlot
-                        index={5}
-                        className='h-[73px] w-[73px] rounded-2xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-white'
-                      />
-                    </InputOTP>
+                    <div className='flex w-full justify-center'>
+                      <InputOTP
+                        {...field}
+                        maxLength={6}
+                        className='flex w-full flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4'
+                        containerClassName='justify-center w-full'
+                      >
+                        <InputOTPSlot
+                          index={0}
+                          className='h-14 w-14 rounded-xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-xl text-white sm:h-16 sm:w-16 sm:rounded-2xl sm:text-2xl md:h-[73px] md:w-[73px]'
+                        />
+                        <InputOTPSlot
+                          index={1}
+                          className='h-14 w-14 rounded-xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-xl text-white sm:h-16 sm:w-16 sm:rounded-2xl sm:text-2xl md:h-[73px] md:w-[73px]'
+                        />
+                        <InputOTPSlot
+                          index={2}
+                          className='h-14 w-14 rounded-xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-xl text-white sm:h-16 sm:w-16 sm:rounded-2xl sm:text-2xl md:h-[73px] md:w-[73px]'
+                        />
+                        <InputOTPSlot
+                          index={3}
+                          className='h-14 w-14 rounded-xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-xl text-white sm:h-16 sm:w-16 sm:rounded-2xl sm:text-2xl md:h-[73px] md:w-[73px]'
+                        />
+                        <InputOTPSlot
+                          index={4}
+                          className='h-14 w-14 rounded-xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-xl text-white sm:h-16 sm:w-16 sm:rounded-2xl sm:text-2xl md:h-[73px] md:w-[73px]'
+                        />
+                        <InputOTPSlot
+                          index={5}
+                          className='h-14 w-14 rounded-xl border border-[#2B2B2B] bg-[#1C1C1C] text-center text-xl text-white sm:h-16 sm:w-16 sm:rounded-2xl sm:text-2xl md:h-[73px] md:w-[73px]'
+                        />
+                      </InputOTP>
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -251,7 +253,7 @@ const OtpForm = ({
           <button
             type='button'
             onClick={handleResendOtp}
-            className='hover:text-primary text-sm text-white underline transition-colors'
+            className='hover:text-primary text-xs text-white underline transition-colors sm:text-sm'
           >
             Send code again
           </button>
diff --git a/components/landing-page/Hero copy.tsx b/components/landing-page/Hero copy.tsx
new file mode 100644
index 000000000..29597da7a
--- /dev/null
+++ b/components/landing-page/Hero copy.tsx	
@@ -0,0 +1,217 @@
+'use client';
+
+import { useRef, useCallback, useMemo } from 'react';
+import gsap from 'gsap';
+import { useGSAP } from '@gsap/react';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+import { ScrollSmoother } from 'gsap/ScrollSmoother';
+import Image from 'next/image';
+import { BoundlessButton } from '@/components/buttons';
+import LooperSVG from './LooperSVG';
+import { useRouter } from 'next/navigation';
+
+gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
+
+interface HeroProps {
+  className?: string;
+}
+
+export default function Hero({ className = '' }: HeroProps) {
+  const heroRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+  const animationConfig = useMemo(
+    () => ({
+      ellipse: {
+        scale: 1.1,
+        ease: 'power2.inOut',
+        duration: 3,
+        repeat: -1,
+        yoyo: true,
+      },
+      sphere: {
+        rotation: 360,
+        ease: 'none',
+        duration: 50,
+        repeat: -1,
+      },
+    }),
+    []
+  );
+
+  const setupAnimations = useCallback(() => {
+    if (!heroRef.current) return;
+
+    const ellipseImg = heroRef.current.querySelectorAll('.ellipse-image');
+    const sphereImg = heroRef.current.querySelector('.sphere-image');
+
+    if (ellipseImg) {
+      ellipseImg.forEach((img, i) => {
+        // Common scale animation
+        gsap.to(img, {
+          ...animationConfig.ellipse,
+          willChange: 'transform',
+          force3D: true,
+          immediateRender: false,
+          lazy: true,
+        });
+
+        // Rotation animation per ellipse
+        const direction = i === 1 || i === 1 ? 2 : -1;
+        gsap.to(img, {
+          rotation: direction * 360,
+          ease: 'none',
+          duration: 60,
+          repeat: -1,
+          transformOrigin: '50% 50%',
+          force3D: true,
+          willChange: 'transform',
+        });
+      });
+    }
+
+    if (sphereImg) {
+      gsap.to(sphereImg, {
+        ...animationConfig.sphere,
+        willChange: 'transform',
+        force3D: true,
+        immediateRender: false,
+        lazy: true,
+      });
+    }
+  }, [animationConfig]);
+
+  useGSAP(
+    () => {
+      setupAnimations();
+
+      return () => {
+        ScrollTrigger.getAll().forEach(trigger => trigger.kill());
+      };
+    },
+    { scope: heroRef, dependencies: [setupAnimations] }
+  );
+  const ellipses = [
+    {
+      src: '/elipse1.svg',
+      width: 'w-[35%]',
+      z: 'z-10',
+      opacity: '',
+      sizes: '50vw',
+    },
+    {
+      src: '/elipse2.svg',
+      width: 'w-[45%]',
+      z: 'z-10',
+      opacity: '',
+      sizes: '90vw',
+    },
+    {
+      src: '/elipse3.svg',
+      width: 'w-[55%]',
+      z: 'z-10',
+      opacity: '',
+      sizes: '100vw',
+    },
+  ];
+  return (
+    <header
+      className={`relative mx-5 flex h-screen min-h-screen items-stretch justify-between pb-9 md:items-end md:pb-[66px] ${className}`}
+      id='hero'
+      role='banner'
+      aria-labelledby='hero-heading'
+    >
+      <div
+        ref={heroRef}
+        className='absolute top-1/2 left-1/2 z-10 h-full w-full -translate-x-1/2 -translate-y-1/2'
+        aria-hidden='true'
+      >
+        <LooperSVG />
+        {/* <Image
+          src='/glow.svg'
+          alt=''
+          className='glow-element absolute top-1/2 left-1/2 z-10 h-full w-screen max-w-screen -translate-x-1/2 -translate-y-1/2 opacity-80'
+          width={1920}
+          height={1080}
+          priority
+          quality={85}
+          sizes='100vw'
+        /> */}
+        {ellipses.map((ellipse, i) => (
+          <Image
+            key={i}
+            src={ellipse.src}
+            alt=''
+            className={`ellipse-image absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ${ellipse.width} ${ellipse.z} ${ellipse.opacity}`}
+            width={1920}
+            height={1080}
+            priority
+            quality={85}
+            sizes={ellipse.sizes}
+          />
+        ))}
+        <div
+          className='absolute bottom-0 left-0 z-10 h-[150px] w-screen max-w-screen bg-gradient-to-t from-transparent'
+          style={{
+            background:
+              'linear-gradient(180deg, rgba(3, 3, 3, 0.00) 32.3%, #030303 84.8%)',
+          }}
+        />
+      </div>
+
+      <div
+        ref={contentRef}
+        className='z-30 mt-[28px] mb-10 flex h-full w-full flex-col justify-between gap-4 md:mt-[120px] md:h-auto md:flex-row md:items-end'
+      >
+        <h1
+          id='hero-heading'
+          className='max-w-[350px] text-left text-[30px] leading-[140%] text-white sm:max-w-full md:max-w-[579px] lg:text-[32px] xl:text-[40px]'
+        >
+          Validate Ideas, <br /> Fund Bold Projects, <br />{' '}
+          <span className='gradient-text font-medium'>
+            Unlock Boundless Potential
+          </span>
+        </h1>
+
+        <div className='relative bottom-[50px] md:bottom-0 md:max-w-[466px]'>
+          <p
+            className='text-[14px] leading-[150%] text-white lg:text-[14px] xl:text-[16px]'
+            style={{
+              background: 'linear-gradient(93deg, #B5B5B5 15.93%, #FFF 97.61%)',
+              backgroundClip: 'text',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+            }}
+          >
+            Boundless is the milestone-based platform for validating, funding,
+            and scaling ideas through community crowdfunding, grants, and
+            hackathons built on Stellar.
+          </p>
+
+          <nav
+            className='mt-7 flex flex-col items-center gap-4 md:flex-row'
+            aria-label='Primary actions'
+          >
+            <BoundlessButton
+              variant='default'
+              size='xl'
+              fullWidth
+              aria-label='Explore featured projects and campaigns'
+              onClick={() => router.push('/projects')}
+            >
+              Explore Projects
+            </BoundlessButton>
+            <BoundlessButton
+              variant='secondary'
+              size='xl'
+              fullWidth
+              aria-label='Submit your project idea for funding'
+            >
+              Submit Your Idea
+            </BoundlessButton>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/components/landing-page/Hero2.tsx b/components/landing-page/Hero2.tsx
new file mode 100644
index 000000000..c3d9cc530
--- /dev/null
+++ b/components/landing-page/Hero2.tsx
@@ -0,0 +1,221 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ArrowRight, CheckCircle2 } from 'lucide-react';
+import {
+  Cursor,
+  CursorPointer,
+  CursorBody,
+  CursorMessage,
+} from '../ui/shadcn-io/cursor';
+import Image from 'next/image';
+import { BoundlessButton } from '../buttons';
+import HackathonCard from '@/components/landing-page/hackathon/HackathonCard';
+import ProjectCard from './project/ProjectCard';
+
+const BRAND_COLOR = '#a7f950';
+
+export default function Hero2() {
+  const router = useRouter();
+
+  return (
+    <section className='relative flex min-h-screen w-full items-center justify-center overflow-hidden py-12 md:py-20'>
+      <Cursor className='animate-float-slow absolute top-32 left-20 z-20 hidden text-sm font-medium lg:block'>
+        <CursorPointer style={{ color: BRAND_COLOR }} />
+        <CursorBody
+          className='text-black'
+          style={{ backgroundColor: BRAND_COLOR }}
+        >
+          <CursorMessage>Milestone Escrow</CursorMessage>
+        </CursorBody>
+      </Cursor>
+      <Cursor className='animate-float-medium absolute top-40 right-24 z-20 hidden text-sm font-medium lg:block'>
+        <CursorPointer className='text-orange-500' />
+        <CursorBody className='border border-orange-500/50 bg-orange-500/20 text-orange-400'>
+          <CursorMessage>Community Validation</CursorMessage>
+        </CursorBody>
+      </Cursor>
+
+      <div className='relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8'>
+        <div className='mb-8 flex justify-center md:mb-12'>
+          <div className='inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-5 py-2 backdrop-blur-sm'>
+            <div
+              className='flex h-4 w-4 items-center justify-center rounded-full'
+              style={{ backgroundColor: `${BRAND_COLOR}40` }}
+            >
+              <CheckCircle2
+                className='h-3 w-3'
+                style={{ color: BRAND_COLOR }}
+              />
+            </div>
+            <span className='text-xs font-medium tracking-wide text-white/80 uppercase'>
+              The #1 milestone-based funding platform on Stellar
+            </span>
+          </div>
+        </div>
+
+        <div className='mx-auto mb-12 max-w-4xl space-y-8 text-center md:mb-16'>
+          <div className='space-y-4'>
+            <h1 className='text-4xl leading-none font-bold tracking-tight md:text-6xl lg:text-7xl'>
+              <span
+                className='bg-gradient-to-r from-[#a7f950] to-[#8ae63a] bg-clip-text text-transparent'
+                style={{ color: BRAND_COLOR }}
+              >
+                Launch Projects
+              </span>
+              <br />
+              <span className='relative inline-block text-white'>
+                Manage Hackathons.
+                <div className='mt-2'>
+                  <Image
+                    src='/lines.svg'
+                    alt=''
+                    width={100}
+                    height={12}
+                    className='h-[12px] w-full'
+                  />
+                </div>
+              </span>
+            </h1>
+
+            <p className='mx-auto max-w-2xl text-lg leading-relaxed text-white/70 md:text-xl'>
+              Turn your ideas into reality with{' '}
+              <span
+                className='font-medium underline decoration-2 underline-offset-2'
+                style={{
+                  color: BRAND_COLOR,
+                  textDecorationColor: `${BRAND_COLOR}60`,
+                }}
+              >
+                milestone-based funding
+              </span>
+            </p>
+          </div>
+
+          <div className='flex flex-col items-center justify-center gap-4 sm:flex-row'>
+            <BoundlessButton
+              variant='default'
+              size='xl'
+              onClick={() => router.push('/auth?mode=signup')}
+              className='group'
+            >
+              Get Started for Free
+              <ArrowRight className='h-4 w-4 transition-transform group-hover:translate-x-1' />
+            </BoundlessButton>
+
+            <BoundlessButton
+              variant='outline'
+              size='xl'
+              onClick={() => router.push('/organizations/new')}
+              className='group'
+            >
+              Host a Hackathon
+              <ArrowRight className='h-4 w-4 transition-transform group-hover:translate-x-1' />
+            </BoundlessButton>
+          </div>
+        </div>
+
+        <div className='relative mx-auto hidden h-[500px] max-w-5xl md:block'>
+          <div className='absolute top-12 left-0 z-10 w-72 -rotate-3 transform cursor-pointer shadow-xl transition-transform duration-300 hover:rotate-0'>
+            <HackathonCard
+              organizationName='Boundless'
+              deadlineInDays={10}
+              categories={['Web3', 'DeFi', 'Blockchain']}
+              location='Virtual'
+              venueType='virtual'
+              participants={{ current: 127, goal: 200 }}
+              prizePool={{ total: 50000, currency: 'USD' }}
+              status='Published'
+              hackathonSlug='boundless-hackathon-2024'
+              hackathonId='hackathon-1'
+              organizerName='Boundless Team'
+              organizerLogo='/bitmed.png'
+              hackathonImage='/banner.png'
+              hackathonTitle='Boundless Innovation Hackathon'
+              hackathonDescription='Join the biggest hackathon on Stellar blockchain. Build innovative solutions and compete for $50,000 in prizes.'
+            />
+          </div>
+
+          <div className='absolute top-0 left-1/2 z-20 w-80 -translate-x-1/2 transform cursor-pointer rounded-2xl shadow-xl transition-transform duration-300 hover:scale-105'>
+            <ProjectCard
+              projectId='project-1'
+              creatorName='Green Energy Team'
+              creatorLogo='/bitmed.png'
+              projectImage='/banner.png'
+              projectTitle='Solar Power Initiative'
+              projectDescription='Revolutionary solar energy solution for rural communities'
+              status='Funding'
+              deadlineInDays={15}
+              funding={{ current: 25000, goal: 100000, currency: 'USD' }}
+              votes={{ current: 450, goal: 500 }}
+            />
+          </div>
+
+          <div className='absolute top-20 right-0 z-10 w-72 rotate-3 transform cursor-pointer rounded-2xl shadow-xl transition-transform duration-300 hover:rotate-0'>
+            <ProjectCard
+              projectId='project-2'
+              creatorName='AI Research Lab'
+              creatorLogo='/bitmed.png'
+              projectImage='/banner.png'
+              projectTitle='AI Learning Platform'
+              projectDescription='Democratizing AI education through interactive learning'
+              status='Validation'
+              deadlineInDays={8}
+              votes={{ current: 320, goal: 500 }}
+            />
+          </div>
+
+          <div className='absolute bottom-0 left-1/2 z-20 w-96 -translate-x-1/2 transform cursor-pointer rounded-2xl shadow-xl transition-transform duration-300 hover:scale-105'>
+            <HackathonCard
+              organizationName='Boundless'
+              deadlineInDays={5}
+              categories={['AI', 'Machine Learning', 'Open Source']}
+              location='Virtual'
+              venueType='virtual'
+              participants={{ current: 89, goal: 150 }}
+              prizePool={{ total: 30000, currency: 'USD' }}
+              status='Published'
+              hackathonSlug='ai-innovation-challenge'
+              hackathonId='hackathon-2'
+              organizerName='Boundless AI'
+              organizerLogo='/bitmed.png'
+              hackathonImage='/banner.png'
+              hackathonTitle='AI Innovation Challenge'
+              hackathonDescription='Build the next generation of AI-powered applications'
+            />
+          </div>
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes float-slow {
+          0%,
+          100% {
+            transform: translateY(0px) rotate(-2deg);
+          }
+          50% {
+            transform: translateY(-15px) rotate(-2deg);
+          }
+        }
+
+        @keyframes float-medium {
+          0%,
+          100% {
+            transform: translateY(0px) rotate(2deg);
+          }
+          50% {
+            transform: translateY(-20px) rotate(2deg);
+          }
+        }
+
+        .animate-float-slow {
+          animation: float-slow 6s ease-in-out infinite;
+        }
+
+        .animate-float-medium {
+          animation: float-medium 5s ease-in-out infinite;
+        }
+      `}</style>
+    </section>
+  );
+}
diff --git a/components/landing-page/hackathon/HackathonCard.tsx b/components/landing-page/hackathon/HackathonCard.tsx
index 4425d4a4c..f8d8cffde 100644
--- a/components/landing-page/hackathon/HackathonCard.tsx
+++ b/components/landing-page/hackathon/HackathonCard.tsx
@@ -31,6 +31,7 @@ type HackathonCardProps = {
   };
   isFullWidth?: boolean;
   isListView?: boolean;
+  className?: string;
 };
 
 const formatFullNumber = (num: number): string =>
@@ -53,6 +54,7 @@ function HackathonCard({
   participants,
   prizePool,
   isFullWidth = false,
+  className,
 }: HackathonCardProps) {
   const router = useRouter();
 
@@ -187,7 +189,9 @@ function HackathonCard({
     }, [categoriesList]);
 
     return (
-      <div className='relative flex items-center overflow-hidden'>
+      <div
+        className={`relative flex items-center overflow-hidden ${className}`}
+      >
         <div ref={ref} className='scrollbar-hide flex gap-1.5 overflow-x-auto'>
           {categoriesList.map((cat, i) => (
             <span
diff --git a/components/notifications/NotificationBell.tsx b/components/notifications/NotificationBell.tsx
new file mode 100644
index 000000000..4768bfd99
--- /dev/null
+++ b/components/notifications/NotificationBell.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { useState } from 'react';
+import { Bell } from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { NotificationDropdown } from './NotificationDropdown';
+import { useNotifications } from '@/hooks/use-notifications';
+import { useNotificationPolling } from '@/hooks/use-notification-polling';
+import { cn } from '@/lib/utils';
+
+interface NotificationBellProps {
+  className?: string;
+  limit?: number;
+}
+
+export const NotificationBell = ({
+  className,
+  limit = 10,
+}: NotificationBellProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const notificationsHook = useNotifications({
+    page: 1,
+    limit,
+    autoFetch: true,
+  });
+
+  const { notifications, unreadCount, loading, markAllAsRead } =
+    notificationsHook;
+
+  // Enable polling when dropdown is open or when there are unread notifications
+  useNotificationPolling(notificationsHook, {
+    interval: 30000, // 30 seconds
+    enabled: isOpen || unreadCount > 0,
+  });
+
+  const handleNotificationClick = () => {
+    // Notification click is handled in NotificationDropdown
+  };
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          className={cn(
+            'relative flex items-center justify-center rounded-lg border border-zinc-800/50 bg-zinc-900/30 p-2 text-zinc-400 transition-all hover:border-zinc-700 hover:bg-zinc-900/50 hover:text-white',
+            className
+          )}
+          aria-label='Notifications'
+        >
+          <Bell className='h-4 w-4' />
+          {unreadCount > 0 && (
+            <span className='bg-primary absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-bold text-black'>
+              {unreadCount > 9 ? '9+' : unreadCount}
+            </span>
+          )}
+        </button>
+      </DropdownMenuTrigger>
+      <NotificationDropdown
+        notifications={notifications}
+        unreadCount={unreadCount}
+        loading={loading}
+        onNotificationClick={handleNotificationClick}
+        onMarkAllAsRead={markAllAsRead}
+        onClose={() => setIsOpen(false)}
+      />
+    </DropdownMenu>
+  );
+};
diff --git a/components/notifications/NotificationDropdown.tsx b/components/notifications/NotificationDropdown.tsx
new file mode 100644
index 000000000..1deec9914
--- /dev/null
+++ b/components/notifications/NotificationDropdown.tsx
@@ -0,0 +1,234 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { isToday, isYesterday } from 'date-fns';
+import {
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+} from '@/components/ui/dropdown-menu';
+import { NotificationItem } from './NotificationItem';
+import { Notification } from '@/types/notifications';
+import { Skeleton } from '@/components/ui/skeleton';
+import { markAsRead } from '@/lib/api/notifications';
+import { toast } from 'sonner';
+
+interface NotificationDropdownProps {
+  notifications: Notification[];
+  unreadCount: number;
+  loading?: boolean;
+  onNotificationClick?: (notification: Notification) => void;
+  onMarkAllAsRead?: () => void;
+  onClose?: () => void;
+}
+
+const groupNotificationsByTime = (
+  notifications: Notification[]
+): Record<string, Notification[]> => {
+  const groups: Record<string, Notification[]> = {
+    today: [],
+    yesterday: [],
+    thisWeek: [],
+    older: [],
+  };
+
+  const now = new Date();
+  const oneWeekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+
+  notifications.forEach(notification => {
+    const date = new Date(notification.createdAt);
+
+    if (isToday(date)) {
+      groups.today.push(notification);
+    } else if (isYesterday(date)) {
+      groups.yesterday.push(notification);
+    } else if (date > oneWeekAgo) {
+      groups.thisWeek.push(notification);
+    } else {
+      groups.older.push(notification);
+    }
+  });
+
+  return groups;
+};
+
+const getGroupLabel = (group: string): string => {
+  switch (group) {
+    case 'today':
+      return 'Today';
+    case 'yesterday':
+      return 'Yesterday';
+    case 'thisWeek':
+      return 'This Week';
+    case 'older':
+      return 'Older';
+    default:
+      return group;
+  }
+};
+
+export const NotificationDropdown = ({
+  notifications,
+  unreadCount,
+  loading = false,
+  onNotificationClick,
+  onMarkAllAsRead,
+  onClose,
+}: NotificationDropdownProps) => {
+  const router = useRouter();
+
+  const handleNotificationClick = async (notification: Notification) => {
+    if (onNotificationClick) {
+      onNotificationClick(notification);
+    }
+
+    // Auto-mark as read on click
+    if (!notification.read) {
+      try {
+        await markAsRead({ ids: [notification._id] });
+      } catch {
+        // Silently handle error - user feedback already provided
+      }
+    }
+
+    // Navigate to relevant page based on priority
+    // Organization notifications
+    if (notification.data.organizationId) {
+      router.push(`/organizations/${notification.data.organizationId}`);
+    }
+    // Hackathon notifications (prefer slug over ID)
+    else if (notification.data.hackathonId) {
+      if (notification.data.hackathonSlug) {
+        router.push(`/hackathons/${notification.data.hackathonSlug}`);
+      } else {
+        router.push(`/hackathons/${notification.data.hackathonId}`);
+      }
+    }
+    // Team invitation notifications (navigate to project if available)
+    else if (
+      notification.data.teamInvitationId &&
+      notification.data.projectId
+    ) {
+      router.push(`/projects/${notification.data.projectId}`);
+    }
+    // Project notifications
+    else if (notification.data.projectId) {
+      router.push(`/projects/${notification.data.projectId}`);
+    }
+    // Comment notifications
+    else if (notification.data.commentId) {
+      router.push(`/comments/${notification.data.commentId}`);
+    }
+    // Milestone notifications
+    else if (notification.data.milestoneId) {
+      router.push(`/milestones/${notification.data.milestoneId}`);
+    }
+
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const handleMarkAllAsRead = async () => {
+    if (onMarkAllAsRead) {
+      try {
+        await onMarkAllAsRead();
+        toast.success('All notifications marked as read');
+      } catch {
+        toast.error('Failed to mark all as read');
+      }
+    }
+  };
+
+  const groupedNotifications = groupNotificationsByTime(notifications);
+  const hasUnread = unreadCount > 0;
+
+  return (
+    <DropdownMenuContent
+      className='w-80 rounded-xl border border-zinc-800/50 bg-zinc-950/95 p-0 backdrop-blur-xl'
+      align='end'
+    >
+      <div className='border-b border-zinc-800/50 p-4'>
+        <div className='flex items-center justify-between'>
+          <h3 className='font-semibold text-white'>Notifications</h3>
+          {hasUnread && (
+            <span className='bg-primary/20 text-primary rounded-full px-2 py-0.5 text-xs font-semibold'>
+              {unreadCount} new
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className='max-h-96 overflow-y-auto p-2'>
+        {loading ? (
+          <div className='space-y-2'>
+            {[1, 2, 3].map(i => (
+              <Skeleton key={i} className='h-20 w-full rounded-lg' />
+            ))}
+          </div>
+        ) : notifications.length === 0 ? (
+          <div className='py-8 text-center'>
+            <p className='text-sm text-zinc-400'>No notifications</p>
+            <p className='mt-1 text-xs text-zinc-500'>You're all caught up!</p>
+          </div>
+        ) : (
+          <div className='space-y-4'>
+            {Object.entries(groupedNotifications).map(
+              ([group, groupNotifications]) => {
+                if (groupNotifications.length === 0) return null;
+
+                return (
+                  <div key={group}>
+                    <div className='mb-2 px-2'>
+                      <p className='text-xs font-medium tracking-wider text-zinc-500 uppercase'>
+                        {getGroupLabel(group)}
+                      </p>
+                    </div>
+                    <div className='space-y-1'>
+                      {groupNotifications.map(notification => (
+                        <NotificationItem
+                          key={notification._id}
+                          notification={notification}
+                          onMarkAsRead={() =>
+                            handleNotificationClick(notification)
+                          }
+                          showUnreadIndicator={true}
+                          className='cursor-pointer'
+                        />
+                      ))}
+                    </div>
+                  </div>
+                );
+              }
+            )}
+          </div>
+        )}
+      </div>
+
+      {notifications.length > 0 && (
+        <>
+          <DropdownMenuSeparator className='bg-zinc-800/50' />
+          <div className='border-t border-zinc-800/50 p-2'>
+            <div className='flex items-center justify-between gap-2'>
+              {hasUnread && (
+                <button
+                  onClick={handleMarkAllAsRead}
+                  className='text-primary hover:text-primary/80 text-xs font-medium transition-colors'
+                >
+                  Mark all as read
+                </button>
+              )}
+              <Link
+                href='/notifications'
+                className='text-primary hover:text-primary/80 ml-auto text-xs font-medium transition-colors'
+                onClick={onClose}
+              >
+                View all notifications
+              </Link>
+            </div>
+          </div>
+        </>
+      )}
+    </DropdownMenuContent>
+  );
+};
diff --git a/components/notifications/NotificationIcon.tsx b/components/notifications/NotificationIcon.tsx
new file mode 100644
index 000000000..845f32e01
--- /dev/null
+++ b/components/notifications/NotificationIcon.tsx
@@ -0,0 +1,200 @@
+import {
+  Zap,
+  Building2,
+  Users,
+  DollarSign,
+  Vote,
+  CheckCircle,
+  AlertCircle,
+  MessageSquare,
+  Heart,
+  Shield,
+  Mail,
+  Lock,
+  Bell,
+  Target,
+  Rocket,
+  Trophy,
+  Clock,
+  FileText,
+  UserPlus,
+  XCircle,
+  Ban,
+  KeyRound,
+  LucideIcon,
+} from 'lucide-react';
+import { NotificationType } from '@/types/notifications';
+
+/**
+ * Maps notification types to appropriate Lucide icons
+ */
+export const getNotificationIcon = (type: NotificationType): LucideIcon => {
+  switch (type) {
+    // Organization Notifications
+    case NotificationType.ORGANIZATION_CREATED:
+    case NotificationType.ORGANIZATION_UPDATED:
+      return Building2;
+    case NotificationType.ORGANIZATION_DELETED:
+      return AlertCircle;
+    case NotificationType.ORGANIZATION_INVITE_SENT:
+      return Mail;
+    case NotificationType.ORGANIZATION_INVITE_ACCEPTED:
+    case NotificationType.ORGANIZATION_MEMBER_ADDED:
+      return CheckCircle;
+    case NotificationType.ORGANIZATION_MEMBER_REMOVED:
+      return Users;
+    case NotificationType.ORGANIZATION_ROLE_CHANGED:
+      return KeyRound;
+
+    // Hackathon Notifications
+    case NotificationType.HACKATHON_CREATED:
+    case NotificationType.HACKATHON_UPDATED:
+      return Target;
+    case NotificationType.HACKATHON_STATUS_CHANGED:
+      return Zap;
+    case NotificationType.HACKATHON_PUBLISHED:
+    case NotificationType.HACKATHON_ACTIVE:
+      return Rocket;
+    case NotificationType.HACKATHON_COMPLETED:
+      return CheckCircle;
+    case NotificationType.HACKATHON_CANCELLED:
+      return AlertCircle;
+    case NotificationType.HACKATHON_REGISTERED:
+      return FileText;
+    case NotificationType.HACKATHON_SUBMISSION_SUBMITTED:
+      return FileText;
+    case NotificationType.HACKATHON_SUBMISSION_SHORTLISTED:
+      return Trophy;
+    case NotificationType.HACKATHON_SUBMISSION_DISQUALIFIED:
+      return AlertCircle;
+    case NotificationType.HACKATHON_WINNERS_ANNOUNCED:
+      return Trophy;
+    case NotificationType.HACKATHON_DEADLINE_APPROACHING:
+      return Clock;
+
+    // Team Invitation Notifications
+    case NotificationType.TEAM_INVITATION_SENT:
+      return UserPlus;
+    case NotificationType.TEAM_INVITATION_ACCEPTED:
+      return CheckCircle;
+    case NotificationType.TEAM_INVITATION_DECLINED:
+      return XCircle;
+    case NotificationType.TEAM_INVITATION_EXPIRED:
+      return Clock;
+    case NotificationType.TEAM_INVITATION_CANCELLED:
+      return Ban;
+
+    // Project Status
+    case NotificationType.PROJECT_CREATED:
+    case NotificationType.PROJECT_UPDATED:
+      return Building2;
+    case NotificationType.PROJECT_VERIFIED:
+    case NotificationType.PROJECT_APPROVED:
+    case NotificationType.PROJECT_COMPLETED:
+      return CheckCircle;
+    case NotificationType.PROJECT_REJECTED:
+    case NotificationType.PROJECT_CANCELLED:
+      return AlertCircle;
+    case NotificationType.PROJECT_FUNDED:
+      return DollarSign;
+
+    // Funding Status
+    case NotificationType.FUNDING_RECEIVED:
+    case NotificationType.FUNDING_GOAL_MET:
+      return DollarSign;
+    case NotificationType.FUNDING_FAILED:
+    case NotificationType.FUNDING_DEADLINE_APPROACHING:
+      return AlertCircle;
+    case NotificationType.REFUND_PROCESSED:
+      return CheckCircle;
+
+    // Voting Status
+    case NotificationType.VOTING_STARTED:
+    case NotificationType.VOTING_ENDED:
+    case NotificationType.VOTE_RECEIVED:
+    case NotificationType.VOTING_THRESHOLD_MET:
+      return Vote;
+
+    // Milestone Status
+    case NotificationType.MILESTONE_CREATED:
+    case NotificationType.MILESTONE_UPDATED:
+      return Zap;
+    case NotificationType.MILESTONE_COMPLETED:
+    case NotificationType.MILESTONE_FUNDS_RELEASED:
+      return CheckCircle;
+    case NotificationType.MILESTONE_DEADLINE_APPROACHING:
+      return AlertCircle;
+
+    // Interaction Notifications
+    case NotificationType.COMMENT_RECEIVED:
+    case NotificationType.COMMENT_REPLY:
+    case NotificationType.COMMENT_MENTION:
+      return MessageSquare;
+    case NotificationType.REACTION_RECEIVED:
+      return Heart;
+
+    // Account Notifications
+    case NotificationType.ACCOUNT_VERIFIED:
+      return CheckCircle;
+    case NotificationType.PASSWORD_CHANGED:
+    case NotificationType.EMAIL_CHANGED:
+      return Lock;
+    case NotificationType.SECURITY_ALERT:
+      return Shield;
+
+    default:
+      return Bell;
+  }
+};
+
+/**
+ * Gets notification color class based on type
+ */
+export const getNotificationColor = (type: NotificationType): string => {
+  // Security alerts - red
+  if (type === NotificationType.SECURITY_ALERT) {
+    return 'border-red-200 bg-red-50 text-red-900';
+  }
+
+  // Success states - green
+  if (
+    type === NotificationType.PROJECT_FUNDED ||
+    type === NotificationType.PROJECT_COMPLETED ||
+    type === NotificationType.FUNDING_GOAL_MET ||
+    type === NotificationType.MILESTONE_COMPLETED ||
+    type === NotificationType.ACCOUNT_VERIFIED ||
+    type === NotificationType.ORGANIZATION_INVITE_ACCEPTED ||
+    type === NotificationType.ORGANIZATION_MEMBER_ADDED ||
+    type === NotificationType.HACKATHON_COMPLETED ||
+    type === NotificationType.HACKATHON_SUBMISSION_SHORTLISTED ||
+    type === NotificationType.HACKATHON_WINNERS_ANNOUNCED ||
+    type === NotificationType.TEAM_INVITATION_ACCEPTED
+  ) {
+    return 'border-green-200 bg-green-50 text-green-900';
+  }
+
+  // Warning/alert states - yellow/orange
+  if (
+    type === NotificationType.FUNDING_DEADLINE_APPROACHING ||
+    type === NotificationType.MILESTONE_DEADLINE_APPROACHING ||
+    type === NotificationType.HACKATHON_DEADLINE_APPROACHING ||
+    type === NotificationType.TEAM_INVITATION_EXPIRED
+  ) {
+    return 'border-yellow-200 bg-yellow-50 text-yellow-900';
+  }
+
+  // Error/rejection states - red
+  if (
+    type === NotificationType.PROJECT_REJECTED ||
+    type === NotificationType.ORGANIZATION_DELETED ||
+    type === NotificationType.HACKATHON_CANCELLED ||
+    type === NotificationType.HACKATHON_SUBMISSION_DISQUALIFIED ||
+    type === NotificationType.TEAM_INVITATION_DECLINED ||
+    type === NotificationType.TEAM_INVITATION_CANCELLED
+  ) {
+    return 'border-red-200 bg-red-50 text-red-900';
+  }
+
+  // Default - blue for unread, gray for read
+  return 'border-blue-200 bg-blue-50 text-blue-900';
+};
diff --git a/components/notifications/NotificationItem.tsx b/components/notifications/NotificationItem.tsx
new file mode 100644
index 000000000..2013b722b
--- /dev/null
+++ b/components/notifications/NotificationItem.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import { formatDistanceToNow } from 'date-fns';
+import Link from 'next/link';
+import { Notification } from '@/types/notifications';
+import { getNotificationIcon } from './NotificationIcon';
+import { cn } from '@/lib/utils';
+
+interface NotificationItemProps {
+  notification: Notification;
+  onMarkAsRead?: () => void;
+  showUnreadIndicator?: boolean;
+  className?: string;
+}
+
+export const NotificationItem = ({
+  notification,
+  onMarkAsRead,
+  showUnreadIndicator = true,
+  className,
+}: NotificationItemProps) => {
+  const Icon = getNotificationIcon(notification.type);
+
+  const getNotificationLink = (): string => {
+    // Organization notifications
+    if (notification.data.organizationId) {
+      return `/organizations/${notification.data.organizationId}`;
+    }
+
+    // Hackathon notifications (prefer slug over ID)
+    if (notification.data.hackathonId) {
+      if (notification.data.hackathonSlug) {
+        return `/hackathons/${notification.data.hackathonSlug}`;
+      }
+      return `/hackathons/${notification.data.hackathonId}`;
+    }
+
+    // Team invitation notifications (navigate to project if available)
+    if (notification.data.teamInvitationId && notification.data.projectId) {
+      return `/projects/${notification.data.projectId}`;
+    }
+
+    // Project notifications
+    if (notification.data.projectId) {
+      return `/projects/${notification.data.projectId}`;
+    }
+
+    // Comment notifications
+    if (notification.data.commentId) {
+      return `/comments/${notification.data.commentId}`;
+    }
+
+    // Milestone notifications
+    if (notification.data.milestoneId) {
+      return `/milestones/${notification.data.milestoneId}`;
+    }
+
+    return '#';
+  };
+
+  const handleClick = () => {
+    if (!notification.read && onMarkAsRead) {
+      onMarkAsRead();
+    }
+  };
+
+  const link = getNotificationLink();
+  const isClickable = link !== '#';
+
+  const content = (
+    <div
+      className={cn(
+        'flex items-start gap-3 rounded-lg border p-4 transition-all',
+        !notification.read
+          ? 'border-primary/30 bg-primary/5 hover:bg-primary/10'
+          : 'border-zinc-800/50 bg-zinc-900/30 hover:bg-zinc-900/50',
+        className
+      )}
+    >
+      <div className='bg-primary/10 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg'>
+        <Icon className='text-primary h-5 w-5' />
+      </div>
+
+      <div className='min-w-0 flex-1'>
+        <div className='flex items-start justify-between gap-2'>
+          <div className='min-w-0 flex-1'>
+            <div className='flex items-center gap-2'>
+              <h4
+                className={cn(
+                  'font-semibold',
+                  !notification.read ? 'text-white' : 'text-zinc-300'
+                )}
+              >
+                {notification.title}
+              </h4>
+              {!notification.read && showUnreadIndicator && (
+                <span className='bg-primary h-2 w-2 shrink-0 rounded-full' />
+              )}
+            </div>
+            <p
+              className={cn(
+                'mt-1 line-clamp-2 text-sm',
+                !notification.read ? 'text-zinc-300' : 'text-zinc-500'
+              )}
+            >
+              {notification.message}
+            </p>
+            {notification.data.amount && (
+              <p className='mt-2 text-sm font-medium text-green-400'>
+                Amount: ${notification.data.amount.toLocaleString()}
+              </p>
+            )}
+            <p className='mt-2 text-xs text-zinc-500'>
+              {formatDistanceToNow(new Date(notification.createdAt), {
+                addSuffix: true,
+              })}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (isClickable) {
+    return (
+      <Link href={link} onClick={handleClick} className='block'>
+        {content}
+      </Link>
+    );
+  }
+
+  return <div onClick={handleClick}>{content}</div>;
+};
diff --git a/components/notifications/NotificationList.tsx b/components/notifications/NotificationList.tsx
new file mode 100644
index 000000000..2cc3881dc
--- /dev/null
+++ b/components/notifications/NotificationList.tsx
@@ -0,0 +1,102 @@
+'use client';
+
+import { format, isToday, isYesterday, isThisWeek } from 'date-fns';
+import { NotificationItem } from './NotificationItem';
+import { Notification } from '@/types/notifications';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface NotificationListProps {
+  notifications: Notification[];
+  loading?: boolean;
+  onNotificationClick?: (notification: Notification) => void;
+  onMarkAsRead?: (id: string) => void;
+}
+
+const groupNotificationsByDate = (
+  notifications: Notification[]
+): Record<string, Notification[]> => {
+  const groups: Record<string, Notification[]> = {};
+
+  notifications.forEach(notification => {
+    const date = new Date(notification.createdAt);
+    let groupKey: string;
+
+    if (isToday(date)) {
+      groupKey = 'Today';
+    } else if (isYesterday(date)) {
+      groupKey = 'Yesterday';
+    } else if (isThisWeek(date)) {
+      groupKey = format(date, 'EEEE'); // Day name
+    } else {
+      groupKey = format(date, 'MMMM d, yyyy'); // Full date
+    }
+
+    if (!groups[groupKey]) {
+      groups[groupKey] = [];
+    }
+    groups[groupKey].push(notification);
+  });
+
+  return groups;
+};
+
+export const NotificationList = ({
+  notifications,
+  loading = false,
+  onNotificationClick,
+  onMarkAsRead,
+}: NotificationListProps) => {
+  if (loading) {
+    return (
+      <div className='space-y-4'>
+        {[1, 2, 3, 4, 5].map(i => (
+          <Skeleton key={i} className='h-24 w-full rounded-lg' />
+        ))}
+      </div>
+    );
+  }
+
+  if (notifications.length === 0) {
+    return (
+      <div className='rounded-lg border border-zinc-800/50 bg-zinc-900/30 p-12 text-center'>
+        <p className='text-lg font-medium text-zinc-300'>No notifications</p>
+        <p className='mt-2 text-sm text-zinc-500'>
+          You're all caught up! New notifications will appear here.
+        </p>
+      </div>
+    );
+  }
+
+  const groupedNotifications = groupNotificationsByDate(notifications);
+
+  return (
+    <div className='space-y-6'>
+      {Object.entries(groupedNotifications).map(([date, dateNotifications]) => (
+        <div key={date}>
+          <div className='mb-3'>
+            <h3 className='text-sm font-semibold tracking-wider text-zinc-500 uppercase'>
+              {date}
+            </h3>
+          </div>
+          <div className='space-y-2'>
+            {dateNotifications.map(notification => (
+              <NotificationItem
+                key={notification._id}
+                notification={notification}
+                onMarkAsRead={() => {
+                  if (onMarkAsRead) {
+                    onMarkAsRead(notification._id);
+                  }
+                  if (onNotificationClick) {
+                    onNotificationClick(notification);
+                  }
+                }}
+                showUnreadIndicator={true}
+              />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/components/organization/OrganizationHeader.tsx b/components/organization/OrganizationHeader.tsx
index 0fbdaee01..d2a321d43 100644
--- a/components/organization/OrganizationHeader.tsx
+++ b/components/organization/OrganizationHeader.tsx
@@ -2,7 +2,6 @@
 import {
   ChevronDown,
   Search,
-  Bell,
   Plus,
   ChevronRight,
   Zap,
@@ -31,11 +30,14 @@ import { useWalletContext } from '@/components/providers/wallet-provider';
 import { formatAddress } from '@/lib/wallet-utils';
 import { toast } from 'sonner';
 import { UserMenu } from '@/components/user/UserMenu';
+import { Skeleton } from '../ui/skeleton';
+import { NotificationBell } from '@/components/notifications/NotificationBell';
 
 export default function OrganizationHeader() {
   const pathname = usePathname();
   const isOnOrganizationsPage = pathname === '/organizations';
-  const { organizations, activeOrg, setActiveOrg } = useOrganization();
+  const { organizations, activeOrg, setActiveOrg, isLoadingActiveOrg } =
+    useOrganization();
   const { handleConnect, handleDisconnect } = useWallet();
   const { walletAddress, walletName } = useWalletContext();
   const [copied, setCopied] = useState(false);
@@ -58,11 +60,18 @@ export default function OrganizationHeader() {
       crumbs.push({ label: 'Organizations', href: '/organizations' });
 
       if (parts[1] && parts[1] !== 'new') {
+        // Show organization name in breadcrumb if available, or placeholder during loading
         if (activeOrg) {
           crumbs.push({
             label: activeOrg.name,
             href: `/organizations/${activeOrg._id}`,
           });
+        } else if (isLoadingActiveOrg && parts[1]) {
+          // Show placeholder during loading
+          crumbs.push({
+            label: '',
+            href: `/organizations/${parts[1]}`,
+          });
         }
 
         if (parts[2] === 'hackathons') {
@@ -78,7 +87,7 @@ export default function OrganizationHeader() {
     }
 
     return crumbs;
-  }, [pathname, activeOrg]);
+  }, [pathname, activeOrg, isLoadingActiveOrg]);
 
   // Quick actions based on context
   const quickActions = useMemo(() => {
@@ -161,9 +170,13 @@ export default function OrganizationHeader() {
             <div key={index} className='flex items-center gap-1.5'>
               <ChevronRight className='h-3.5 w-3.5 flex-shrink-0 text-zinc-700' />
               {index === breadcrumbs.slice(1).length - 1 ? (
-                <span className='truncate font-medium text-white'>
-                  {crumb.label}
-                </span>
+                isLoadingActiveOrg || !crumb.label ? (
+                  <Skeleton className='h-4 w-24' />
+                ) : (
+                  <span className='truncate font-medium text-white'>
+                    {crumb.label}
+                  </span>
+                )
               ) : (
                 <Link
                   href={crumb.href}
@@ -199,6 +212,7 @@ export default function OrganizationHeader() {
                       }
                     : undefined
                 }
+                isLoading={isLoadingActiveOrg}
                 onOrganizationChange={orgId => setActiveOrg(orgId)}
               />
             </div>
@@ -268,46 +282,7 @@ export default function OrganizationHeader() {
         )}
 
         {/* Notifications */}
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <button className='relative flex items-center justify-center rounded-lg border border-zinc-800/50 bg-zinc-900/30 p-2 text-zinc-400 transition-all hover:border-zinc-700 hover:bg-zinc-900/50 hover:text-white'>
-              <Bell className='h-4 w-4' />
-              <span className='bg-primary absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-bold text-black'>
-                2
-              </span>
-            </button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className='w-80 rounded-xl border border-zinc-800/50 bg-zinc-950/95 p-0 backdrop-blur-xl'
-            align='end'
-          >
-            <div className='border-b border-zinc-800/50 p-4'>
-              <div className='flex items-center justify-between'>
-                <h3 className='font-semibold text-white'>Notifications</h3>
-                <span className='bg-primary/20 text-primary rounded-full px-2 py-0.5 text-xs font-semibold'>
-                  2 new
-                </span>
-              </div>
-            </div>
-            <div className='max-h-96 overflow-y-auto p-2'>
-              <div className='rounded-lg p-3 transition-colors hover:bg-zinc-900/50'>
-                <p className='text-sm text-white'>New submission received</p>
-                <p className='mt-1 text-xs text-zinc-500'>2 minutes ago</p>
-              </div>
-              <div className='rounded-lg p-3 transition-colors hover:bg-zinc-900/50'>
-                <p className='text-sm text-white'>
-                  Hackathon deadline approaching
-                </p>
-                <p className='mt-1 text-xs text-zinc-500'>1 hour ago</p>
-              </div>
-            </div>
-            <div className='border-t border-zinc-800/50 p-2'>
-              <button className='text-primary w-full rounded-lg py-2 text-center text-sm font-medium transition-colors hover:bg-zinc-900/50'>
-                View all notifications
-              </button>
-            </div>
-          </DropdownMenuContent>
-        </DropdownMenu>
+        <NotificationBell limit={10} />
 
         {/* Wallet Connection */}
         {walletAddress ? (
diff --git a/components/organization/cards/OrganizationSelector.tsx b/components/organization/cards/OrganizationSelector.tsx
index e4cd6bf17..6df07ee09 100644
--- a/components/organization/cards/OrganizationSelector.tsx
+++ b/components/organization/cards/OrganizationSelector.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Check, ChevronsUpDown } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter, usePathname } from 'next/navigation';
@@ -11,6 +11,7 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
+import { Skeleton } from '@/components/ui/skeleton';
 import { OrganizationSummary } from '@/lib/providers/organization-types';
 import { useNavigationLoading } from '@/lib/providers';
 import { normalizeCloudinaryImageUrl } from '@/lib/utils/cloudinary-url';
@@ -18,6 +19,7 @@ import { normalizeCloudinaryImageUrl } from '@/lib/utils/cloudinary-url';
 interface OrganizationSelectorProps {
   organizations?: OrganizationSummary[];
   currentOrganization?: OrganizationSummary;
+  isLoading?: boolean;
   onOrganizationChange?: (orgId: string) => void;
   onToggle?: (isOpen: boolean) => void;
 }
@@ -25,6 +27,7 @@ interface OrganizationSelectorProps {
 export default function OrganizationSelector({
   organizations = [],
   currentOrganization,
+  isLoading = false,
   onOrganizationChange,
   onToggle,
 }: OrganizationSelectorProps) {
@@ -32,38 +35,67 @@ export default function OrganizationSelector({
   const pathname = usePathname();
   const { setIsNavigating } = useNavigationLoading();
   const [selectedOrg, setSelectedOrg] = useState<OrganizationSummary | null>(
-    currentOrganization || organizations[0] || null
+    currentOrganization || null
   );
   const [isOpen, setIsOpen] = useState(false);
-
-  React.useEffect(() => {
-    if (currentOrganization) {
-      if (!selectedOrg || selectedOrg._id !== currentOrganization._id) {
-        setSelectedOrg(currentOrganization);
+  const pendingOrgIdRef = useRef<string | null>(null);
+  const isUserSelectionRef = useRef(false);
+
+  // Sync selectedOrg with currentOrganization prop
+  // This ensures the UI stays in sync with the provider state
+  useEffect(() => {
+    // If user just made a selection, wait for it to complete
+    if (isUserSelectionRef.current) {
+      // If loading finished and we have the new currentOrganization, verify it matches
+      if (!isLoading && currentOrganization) {
+        const currentOrgId = currentOrganization._id;
+        if (currentOrgId === pendingOrgIdRef.current) {
+          // Selection completed successfully, sync with provider
+          setSelectedOrg(currentOrganization);
+          isUserSelectionRef.current = false;
+          pendingOrgIdRef.current = null;
+        } else if (pendingOrgIdRef.current) {
+          // The selected org doesn't match what we expected - might be a race condition
+          // Clear the flag and let normal sync handle it
+          isUserSelectionRef.current = false;
+          pendingOrgIdRef.current = null;
+        }
       }
-    } else if (organizations.length > 0 && !selectedOrg) {
-      setSelectedOrg(organizations[0]);
+      // Don't update from prop while user selection is pending (unless loading finished)
+      return;
     }
-  }, [currentOrganization, organizations, selectedOrg]);
-
-  React.useEffect(() => {
-    if (currentOrganization && organizations.length > 0) {
-      const foundOrg = organizations.find(
-        org => org._id === currentOrganization._id
-      );
-      if (!foundOrg) {
+
+    if (!currentOrganization) {
+      // If no currentOrganization but we have organizations, use first one as fallback
+      // Only do this if we haven't selected anything yet
+      if (organizations.length > 0 && !selectedOrg) {
         setSelectedOrg(organizations[0]);
-        onOrganizationChange?.(organizations[0]._id);
       }
+      return;
     }
-  }, [currentOrganization, organizations, onOrganizationChange]);
+
+    const currentOrgId = currentOrganization._id;
+
+    // Update if the currentOrganization ID changed or if we don't have a selectedOrg
+    if (!selectedOrg || selectedOrg._id !== currentOrgId) {
+      setSelectedOrg(currentOrganization);
+    }
+  }, [currentOrganization, organizations, isLoading, selectedOrg]);
 
   const handleOrganizationSelect = (org: OrganizationSummary) => {
+    // Mark that this is a user selection
+    isUserSelectionRef.current = true;
+    pendingOrgIdRef.current = org._id;
+
+    // Update local state immediately for instant UI feedback
     setSelectedOrg(org);
-    onOrganizationChange?.(org._id);
     setIsOpen(false);
     onToggle?.(false);
 
+    // Call the change handler to update the provider
+    // This will trigger a fetch and update currentOrganization prop
+    onOrganizationChange?.(org._id);
+
     // Don't navigate if we're on the /organizations/new page
     if (pathname === '/organizations/new') {
       return;
@@ -83,11 +115,14 @@ export default function OrganizationSelector({
     return null;
   }
 
+  // Show skeleton only when we don't have a selected org (initial load)
+  // Don't show skeleton during loading if we already have a selected org (optimistic update)
   if (!selectedOrg) {
     return (
       <div className='flex items-center gap-3 bg-transparent px-3 py-2'>
-        <div className='relative h-10 w-10 animate-pulse overflow-hidden rounded-full bg-gray-300' />
-        <span className='text-sm font-medium text-gray-400'>Loading...</span>
+        <Skeleton className='h-10 w-10 rounded-full' />
+        <Skeleton className='h-4 w-24' />
+        <Skeleton className='h-4 w-4' />
       </div>
     );
   }
@@ -98,14 +133,21 @@ export default function OrganizationSelector({
         asChild
         className='focus:ring-0 focus-visible:ring-0'
       >
-        <Button className='flex items-center gap-3 bg-transparent px-3 py-2 transition-colors hover:bg-transparent focus:ring-0 focus-visible:ring-0'>
+        <Button
+          className='flex items-center gap-3 bg-transparent px-3 py-2 transition-colors hover:bg-transparent focus:ring-0 focus-visible:ring-0 disabled:opacity-50'
+          disabled={isLoading}
+        >
           <div className='relative h-10 w-10 overflow-hidden rounded-full bg-white'>
-            <Image
-              src={selectedOrg.logo || '/placeholder-org.png'}
-              alt={selectedOrg.name || 'Organization'}
-              fill
-              className='object-cover'
-            />
+            {isLoading ? (
+              <Skeleton className='h-full w-full rounded-full' />
+            ) : (
+              <Image
+                src={selectedOrg.logo || '/placeholder-org.png'}
+                alt={selectedOrg.name || 'Organization'}
+                fill
+                className='object-cover'
+              />
+            )}
           </div>
 
           <span className='max-w-[100px] truncate text-sm font-medium text-white'>
@@ -113,7 +155,11 @@ export default function OrganizationSelector({
           </span>
 
           <div className='flex flex-col gap-0'>
-            <ChevronsUpDown className='m-0 h-4 w-4 p-0 text-white' />
+            {isLoading ? (
+              <Skeleton className='h-4 w-4' />
+            ) : (
+              <ChevronsUpDown className='m-0 h-4 w-4 p-0 text-white' />
+            )}
           </div>
         </Button>
       </DropdownMenuTrigger>
diff --git a/components/organization/cards/OrganzationCards.tsx b/components/organization/cards/OrganzationCards.tsx
index c403583aa..347114779 100644
--- a/components/organization/cards/OrganzationCards.tsx
+++ b/components/organization/cards/OrganzationCards.tsx
@@ -13,6 +13,7 @@ import {
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { normalizeCloudinaryImageUrl } from '@/lib/utils/cloudinary-url';
+import { useOrganization } from '@/lib/providers/OrganizationProvider';
 import {
   Tooltip,
   TooltipContent,
@@ -58,6 +59,10 @@ export default function OrganizationCard({
   isDeleting = false,
 }: OrganizationCardProps) {
   const router = useRouter();
+  const { setActiveOrg, isLoadingActiveOrg, activeOrgId } = useOrganization();
+
+  // Check if this specific organization is being loaded
+  const isThisOrgLoading = isLoadingActiveOrg && activeOrgId === id;
 
   const formatDate = (dateString: string) => {
     const date = new Date(dateString);
@@ -99,11 +104,24 @@ export default function OrganizationCard({
     }
   };
 
+  const handleCardClick = () => {
+    // Prevent clicks if this organization is currently being loaded
+    if (isThisOrgLoading) {
+      return;
+    }
+
+    // Set the active organization before navigating to ensure proper state sync
+    setActiveOrg(id);
+    router.push(`/organizations/${id}`);
+  };
+
   return (
     <TooltipProvider>
       <div
-        onClick={() => router.push(`/organizations/${id}`)}
-        className='group hover:shadow-primary/10 relative cursor-pointer overflow-hidden rounded-2xl border border-zinc-800 bg-gradient-to-br from-zinc-900 to-black transition-all duration-300 hover:border-zinc-700 hover:shadow-2xl'
+        onClick={handleCardClick}
+        className={`group hover:shadow-primary/10 relative cursor-pointer overflow-hidden rounded-2xl border border-zinc-800 bg-gradient-to-br from-zinc-900 to-black transition-all duration-300 hover:border-zinc-700 hover:shadow-2xl ${
+          isThisOrgLoading ? 'pointer-events-none opacity-75' : ''
+        }`}
       >
         {/* Animated gradient overlay on hover */}
         <div className='pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100'>
diff --git a/components/ui/shadcn-io/cursor/index.tsx b/components/ui/shadcn-io/cursor/index.tsx
new file mode 100644
index 000000000..330196885
--- /dev/null
+++ b/components/ui/shadcn-io/cursor/index.tsx
@@ -0,0 +1,62 @@
+import { Children, type HTMLAttributes, type SVGProps } from 'react';
+import { cn } from '@/lib/utils';
+
+export type CursorProps = HTMLAttributes<HTMLSpanElement>;
+
+export const Cursor = ({ className, children, ...props }: CursorProps) => (
+  <span
+    className={cn('pointer-events-none relative select-none', className)}
+    {...props}
+  >
+    {children}
+  </span>
+);
+
+export type CursorPointerProps = SVGProps<SVGSVGElement>;
+
+export const CursorPointer = ({ className, ...props }: CursorPointerProps) => (
+  <svg
+    aria-hidden='true'
+    className={cn('size-3.5', className)}
+    fill='none'
+    focusable='false'
+    height='20'
+    viewBox='0 0 20 20'
+    width='20'
+    xmlns='http://www.w3.org/2000/svg'
+    {...props}
+  >
+    <path
+      d='M19.438 6.716 1.115.05A.832.832 0 0 0 .05 1.116L6.712 19.45a.834.834 0 0 0 1.557.025l3.198-8 7.995-3.2a.833.833 0 0 0 0-1.559h-.024Z'
+      fill='currentColor'
+    />
+  </svg>
+);
+
+export type CursorBodyProps = HTMLAttributes<HTMLSpanElement>;
+
+export const CursorBody = ({
+  children,
+  className,
+  ...props
+}: CursorBodyProps) => (
+  <span
+    className={cn(
+      'relative ml-3.5 flex flex-col rounded-xl py-1 pr-3 pl-2.5 text-xs whitespace-nowrap',
+      Children.count(children) > 1 && 'rounded-tl [&>:first-child]:opacity-70',
+      'bg-secondary text-foreground',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </span>
+);
+
+export type CursorNameProps = HTMLAttributes<HTMLSpanElement>;
+
+export const CursorName = (props: CursorNameProps) => <span {...props} />;
+
+export type CursorMessageProps = HTMLAttributes<HTMLSpanElement>;
+
+export const CursorMessage = (props: CursorMessageProps) => <span {...props} />;
diff --git a/components/user/UserMenu.tsx b/components/user/UserMenu.tsx
index ff383d60f..202d15790 100644
--- a/components/user/UserMenu.tsx
+++ b/components/user/UserMenu.tsx
@@ -44,7 +44,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
   const { isLoading, user } = useAuthStatus();
   const { logout } = useAuthActions();
 
-  // Safely get organizations from context if available
   const orgContext = useContext(OrganizationContext);
   const organizations = orgContext?.organizations || [];
 
@@ -79,7 +78,6 @@ export const UserMenu: React.FC<UserMenuProps> = ({
         align='end'
         forceMount
       >
-        {/* User Info */}
         <div className='border-b border-zinc-800/50 p-4'>
           <div className='flex items-center gap-3'>
             <Avatar className='h-10 w-10 border border-zinc-800'>
@@ -111,13 +109,15 @@ export const UserMenu: React.FC<UserMenuProps> = ({
           )}
         </div>
 
-        {/* Menu Items */}
         <div className='p-2'>
           <DropdownMenuItem
             className='rounded-lg px-3 py-2 text-sm text-white transition-colors hover:bg-zinc-900/50 focus:bg-zinc-900/50'
             asChild
           >
-            <Link href='/me' className='flex items-center gap-3'>
+            <Link
+              href='/me'
+              className='flex items-center gap-3 hover:!text-white'
+            >
               <User className='h-4 w-4 text-zinc-400' />
               Profile
             </Link>
@@ -128,7 +128,10 @@ export const UserMenu: React.FC<UserMenuProps> = ({
               className='rounded-lg px-3 py-2 text-sm text-white transition-colors hover:bg-zinc-900/50 hover:text-white focus:bg-zinc-900/50'
               asChild
             >
-              <Link href='/organizations' className='flex items-center gap-3'>
+              <Link
+                href='/organizations'
+                className='flex items-center gap-3 hover:!text-white'
+              >
                 <Building2 className='h-4 w-4 text-zinc-400' />
                 Organizations
               </Link>
@@ -139,7 +142,10 @@ export const UserMenu: React.FC<UserMenuProps> = ({
             className='rounded-lg px-3 py-2 text-sm text-white transition-colors hover:bg-zinc-900/50 hover:text-white focus:bg-zinc-900/50'
             asChild
           >
-            <Link href='/me/settings' className='flex items-center gap-3'>
+            <Link
+              href='/me/settings'
+              className='flex items-center gap-3 hover:!text-white'
+            >
               <Settings className='h-4 w-4 text-zinc-400' />
               Settings
             </Link>
@@ -153,7 +159,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({
           <DropdownMenuItem
             onClick={() => !isLoading && logout()}
             disabled={isLoading}
-            className='rounded-lg px-3 py-2 text-sm text-red-400 transition-colors hover:bg-red-500/10 hover:text-red-400 focus:bg-red-500/10 disabled:cursor-not-allowed disabled:opacity-50'
+            className='rounded-lg px-3 py-2 text-sm text-red-400 transition-colors hover:bg-red-500/10 hover:!text-red-400 focus:bg-red-500/10 disabled:cursor-not-allowed disabled:opacity-50'
           >
             <LogOut className='mr-3 h-4 w-4' />
             {isLoading ? 'Signing out...' : 'Sign out'}
diff --git a/hooks/use-notification-polling.ts b/hooks/use-notification-polling.ts
new file mode 100644
index 000000000..560bb2e80
--- /dev/null
+++ b/hooks/use-notification-polling.ts
@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+import type { UseNotificationsReturn } from './use-notifications';
+
+interface UseNotificationPollingOptions {
+  interval?: number;
+  enabled?: boolean;
+}
+
+/**
+ * Hook to poll for new notifications at a specified interval
+ * Only polls when component is mounted and enabled is true
+ */
+export const useNotificationPolling = (
+  notificationsHook: UseNotificationsReturn,
+  options: UseNotificationPollingOptions = {}
+): void => {
+  const { interval = 30000, enabled = true } = options;
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const { refetch } = notificationsHook;
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    // Poll for new notifications at specified interval
+    intervalRef.current = setInterval(() => {
+      refetch().catch(() => {
+        // Silently fail polling errors to avoid disrupting UX
+      });
+    }, interval);
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [refetch, interval, enabled]);
+};
diff --git a/hooks/use-notification-preferences.ts b/hooks/use-notification-preferences.ts
new file mode 100644
index 000000000..ebcccfd85
--- /dev/null
+++ b/hooks/use-notification-preferences.ts
@@ -0,0 +1,83 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  getPreferences,
+  updatePreferences as updatePreferencesApi,
+} from '@/lib/api/notifications';
+import type {
+  NotificationPreferences,
+  UpdatePreferencesRequest,
+} from '@/types/notifications';
+
+interface UseNotificationPreferencesReturn {
+  preferences: NotificationPreferences | null;
+  loading: boolean;
+  error: Error | null;
+  updatePreferences: (prefs: UpdatePreferencesRequest) => Promise<void>;
+  refetch: () => Promise<void>;
+}
+
+export const useNotificationPreferences =
+  (): UseNotificationPreferencesReturn => {
+    const [preferences, setPreferences] =
+      useState<NotificationPreferences | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<Error | null>(null);
+
+    const fetchPreferences = useCallback(async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const response = await getPreferences();
+
+        // Response is NotificationPreferences directly
+        if (response && typeof response === 'object') {
+          setPreferences(response);
+        } else {
+          throw new Error('Invalid preferences response format');
+        }
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error
+            ? err
+            : new Error('Failed to fetch notification preferences');
+        setError(errorMessage);
+      } finally {
+        setLoading(false);
+      }
+    }, []);
+
+    useEffect(() => {
+      fetchPreferences();
+    }, [fetchPreferences]);
+
+    const updatePreferences = useCallback(
+      async (prefs: UpdatePreferencesRequest) => {
+        // Optimistic update
+        if (preferences) {
+          setPreferences({
+            ...preferences,
+            ...prefs,
+          });
+        }
+
+        try {
+          await updatePreferencesApi(prefs);
+          // Refetch to ensure consistency
+          await fetchPreferences();
+        } catch (err) {
+          // Revert on error
+          await fetchPreferences();
+          throw err;
+        }
+      },
+      [preferences, fetchPreferences]
+    );
+
+    return {
+      preferences,
+      loading,
+      error,
+      updatePreferences,
+      refetch: fetchPreferences,
+    };
+  };
diff --git a/hooks/use-notifications.ts b/hooks/use-notifications.ts
index 76282e3f3..f8c2154ca 100644
--- a/hooks/use-notifications.ts
+++ b/hooks/use-notifications.ts
@@ -1,25 +1,127 @@
-import { useNotifications as useCoreNotifications } from 'react-notification-core';
+import { useState, useEffect, useCallback } from 'react';
+import {
+  getNotifications,
+  markAsRead,
+  markAllAsRead,
+} from '@/lib/api/notifications';
+import type { Notification } from '@/types/notifications';
 
-export function useNotifications() {
-  const {
-    notifications,
-    unreadCount,
-    markAsRead,
-    markAllAsRead,
-    deleteNotification,
-    refreshNotifications,
-    isLoading,
-    error,
-  } = useCoreNotifications();
+interface UseNotificationsOptions {
+  page?: number;
+  limit?: number;
+  autoFetch?: boolean;
+}
+
+export interface UseNotificationsReturn {
+  notifications: Notification[];
+  loading: boolean;
+  error: Error | null;
+  total: number;
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  unreadCount: number;
+  markNotificationAsRead: (ids: string[]) => Promise<void>;
+  markAllAsRead: () => Promise<void>;
+  refetch: () => Promise<void>;
+}
+
+export const useNotifications = (
+  options: UseNotificationsOptions = {}
+): UseNotificationsReturn => {
+  const { page: initialPage = 1, limit = 10, autoFetch = true } = options;
+
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [loading, setLoading] = useState<boolean>(autoFetch);
+  const [error, setError] = useState<Error | null>(null);
+  const [total, setTotal] = useState<number>(0);
+  const [currentPage, setCurrentPage] = useState<number>(initialPage);
+
+  const fetchNotifications = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await getNotifications(currentPage, limit);
+
+      // Response structure: { data: Notification[], total: number, page: number, limit: number }
+      if (response && Array.isArray(response.data)) {
+        setNotifications(response.data || []);
+        setTotal(response.total || 0);
+      } else {
+        throw new Error('Invalid response format');
+      }
+    } catch (err) {
+      const errorMessage =
+        err instanceof Error ? err : new Error('Failed to fetch notifications');
+      setError(errorMessage);
+      setNotifications([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [currentPage, limit]);
+
+  useEffect(() => {
+    if (autoFetch) {
+      fetchNotifications();
+    }
+  }, [fetchNotifications, autoFetch]);
+
+  const markNotificationAsRead = useCallback(
+    async (ids: string[]) => {
+      // Optimistic update
+      setNotifications(prev =>
+        prev.map(notif =>
+          ids.includes(notif._id)
+            ? {
+                ...notif,
+                read: true,
+                readAt: new Date().toISOString(),
+              }
+            : notif
+        )
+      );
+
+      try {
+        await markAsRead({ ids });
+      } catch (err) {
+        // Revert on error
+        await fetchNotifications();
+        throw err;
+      }
+    },
+    [fetchNotifications]
+  );
+
+  const handleMarkAllAsRead = useCallback(async () => {
+    // Optimistic update
+    setNotifications(prev =>
+      prev.map(notif => ({
+        ...notif,
+        read: true,
+        readAt: new Date().toISOString(),
+      }))
+    );
+
+    try {
+      await markAllAsRead();
+    } catch (err) {
+      // Revert on error
+      await fetchNotifications();
+      throw err;
+    }
+  }, [fetchNotifications]);
+
+  const unreadCount = notifications.filter(n => !n.read).length;
 
   return {
     notifications,
-    unreadCount,
-    markAsRead,
-    markAllAsRead,
-    deleteNotification,
-    refreshNotifications,
-    isLoading,
+    loading,
     error,
+    total,
+    currentPage,
+    setCurrentPage,
+    unreadCount,
+    markNotificationAsRead,
+    markAllAsRead: handleMarkAllAsRead,
+    refetch: fetchNotifications,
   };
-}
+};
diff --git a/lib/api/notifications.ts b/lib/api/notifications.ts
new file mode 100644
index 000000000..477b21e1c
--- /dev/null
+++ b/lib/api/notifications.ts
@@ -0,0 +1,131 @@
+import api from './api';
+import { ApiResponse, ErrorResponse } from './types';
+import type {
+  NotificationsResponse,
+  MarkAsReadRequest,
+  UpdatePreferencesRequest,
+  NotificationPreferences,
+} from '@/types/notifications';
+
+/**
+ * Get paginated list of notifications for the authenticated user
+ */
+export const getNotifications = async (
+  page: number = 1,
+  limit: number = 10
+): Promise<NotificationsResponse> => {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    limit: limit.toString(),
+  });
+
+  const res = await api.get<NotificationsResponse>(
+    `/notifications?${params.toString()}`
+  );
+
+  // Backend returns { data, total, page, limit } directly
+  // The api.get wrapper returns ApiResponse<T>, so res.data is the actual response
+  if (res.data && 'data' in res.data) {
+    return res.data as NotificationsResponse;
+  }
+
+  // Fallback: if the response structure is different, return as-is
+  return res.data as NotificationsResponse;
+};
+
+/**
+ * Mark one or more notifications as read
+ */
+export const markAsRead = async (options: MarkAsReadRequest): Promise<void> => {
+  const res = await api.put<{ message: string }>(
+    '/notifications/read',
+    options
+  );
+  // Backend returns { message: string } or wrapped in ApiResponse
+  if (
+    !res.data ||
+    (typeof res.data === 'object' && 'success' in res.data && !res.data.success)
+  ) {
+    throw new Error('Failed to mark notifications as read');
+  }
+};
+
+/**
+ * Mark all notifications as read
+ */
+export const markAllAsRead = async (): Promise<void> => {
+  const res = await api.put<{ message: string }>('/notifications/read', {
+    all: true,
+  });
+  // Backend returns { message: string } or wrapped in ApiResponse
+  if (
+    !res.data ||
+    (typeof res.data === 'object' && 'success' in res.data && !res.data.success)
+  ) {
+    throw new Error('Failed to mark all notifications as read');
+  }
+};
+
+/**
+ * Update user notification preferences
+ */
+export const updatePreferences = async (
+  preferences: UpdatePreferencesRequest
+): Promise<void> => {
+  const res = await api.put<{ message: string }>(
+    '/notifications/preference',
+    preferences
+  );
+  // Backend returns { message: string } or wrapped in ApiResponse
+  if (
+    !res.data ||
+    (typeof res.data === 'object' && 'success' in res.data && !res.data.success)
+  ) {
+    throw new Error('Failed to update notification preferences');
+  }
+};
+
+/**
+ * Get user notification preferences
+ */
+export const getPreferences = async (): Promise<NotificationPreferences> => {
+  const res = await api.get<
+    NotificationPreferences | ApiResponse<NotificationPreferences>
+  >('/notifications/preference');
+  // Backend returns NotificationPreferences directly or wrapped
+  if (res.data && typeof res.data === 'object') {
+    // If wrapped in ApiResponse, extract data
+    if (
+      'data' in res.data &&
+      'success' in res.data &&
+      'timestamp' in res.data
+    ) {
+      const apiResponse = res.data as ApiResponse<NotificationPreferences>;
+      if (apiResponse.data) {
+        return apiResponse.data;
+      }
+    }
+    // If direct response (NotificationPreferences)
+    if ('email' in res.data && 'push' in res.data && 'inApp' in res.data) {
+      return res.data as NotificationPreferences;
+    }
+  }
+  throw new Error('Invalid preferences response format');
+};
+
+// Error handling utilities
+export const isNotificationError = (error: unknown): error is ErrorResponse => {
+  return (
+    typeof error === 'object' &&
+    error !== null &&
+    'success' in error &&
+    'statusCode' in error
+  );
+};
+
+export const handleNotificationError = (error: unknown): never => {
+  if (isNotificationError(error)) {
+    throw new Error(`${error.message} (${error.statusCode})`);
+  }
+  throw new Error('An unexpected error occurred');
+};
diff --git a/lib/mock.ts b/lib/mock.ts
index d546a209d..6a3761c4c 100644
--- a/lib/mock.ts
+++ b/lib/mock.ts
@@ -1,5 +1,4 @@
 import { Project } from '@/types/project';
-import type { Notification } from 'react-notification-core';
 
 export const mockProjects: Project[] = [
   {
@@ -110,72 +109,3 @@ export const mockCampaignDetails = {
   ],
   status: 'validated',
 };
-
-const mockNotifications: Notification[] = [
-  {
-    id: '1',
-    title: 'New feature available',
-    message: 'Check out our new dashboard features.',
-    timestamp: new Date(Date.now() - 60 * 60 * 1000),
-    read: true,
-    type: 'info',
-  },
-  {
-    id: '2',
-    title: 'Action required',
-    message: 'Please verify your email address.',
-    timestamp: new Date(Date.now() - 2 * 60 * 60 * 1000),
-    read: false,
-    type: 'warning',
-  },
-  {
-    id: '3',
-    title: 'Payment successful',
-    message: 'Your subscription has been renewed.',
-    timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000),
-    read: true,
-    type: 'success',
-  },
-  {
-    id: '4',
-    title: 'Login attempt',
-    message: 'A new login was detected from an unknown device.',
-    timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000),
-    read: false,
-    type: 'error',
-  },
-];
-
-let notifications = [...mockNotifications];
-
-// Mock API functions
-export async function mockFetchNotifications(): Promise<Notification[]> {
-  await new Promise(resolve => setTimeout(resolve, 500));
-
-  // Simulate occasional errors (1 in 10 chance)
-  if (Math.random() < 0.1) {
-    throw new Error('Failed to fetch notifications');
-  }
-
-  return [...notifications];
-}
-
-export async function mockMarkAsRead(id: string): Promise<void> {
-  await new Promise(resolve => setTimeout(resolve, 300));
-  notifications = notifications.map(notification =>
-    notification.id === id ? { ...notification, read: true } : notification
-  );
-}
-
-export async function mockMarkAllAsRead(): Promise<void> {
-  await new Promise(resolve => setTimeout(resolve, 300));
-  notifications = notifications.map(notification => ({
-    ...notification,
-    read: true,
-  }));
-}
-
-export async function mockDeleteNotification(id: string): Promise<void> {
-  await new Promise(resolve => setTimeout(resolve, 300));
-  notifications = notifications.filter(notification => notification.id !== id);
-}
diff --git a/next.config.ts b/next.config.ts
index 8dbc1b31d..fe678c541 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -41,6 +41,10 @@ const nextConfig: NextConfig = {
         protocol: 'https',
         hostname: 'picsum.photos',
       },
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+      },
     ],
   },
 };
diff --git a/public/lines.svg b/public/lines.svg
new file mode 100644
index 000000000..e0dcd3fb4
--- /dev/null
+++ b/public/lines.svg
@@ -0,0 +1,4 @@
+<svg width="538" height="15" viewBox="0 0 538 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.06396 7C1.06396 7 166.668 1 272.78 1C375.599 1 536.064 5 536.064 5" stroke="#A7F950" stroke-width="2" stroke-linecap="square"/>
+<path d="M1.06396 13C1.06396 13 166.668 2 272.78 2C375.599 2 536.064 11 536.064 11" stroke="#A7F950" stroke-width="2" stroke-linecap="square"/>
+</svg>
diff --git a/types/notifications.ts b/types/notifications.ts
new file mode 100644
index 000000000..b3941efb3
--- /dev/null
+++ b/types/notifications.ts
@@ -0,0 +1,165 @@
+/**
+ * Notification Types
+ * All notification types supported by the backend API
+ */
+export enum NotificationType {
+  // Organization Notifications
+  ORGANIZATION_CREATED = 'ORGANIZATION_CREATED',
+  ORGANIZATION_UPDATED = 'ORGANIZATION_UPDATED',
+  ORGANIZATION_DELETED = 'ORGANIZATION_DELETED',
+  ORGANIZATION_INVITE_SENT = 'ORGANIZATION_INVITE_SENT',
+  ORGANIZATION_INVITE_ACCEPTED = 'ORGANIZATION_INVITE_ACCEPTED',
+  ORGANIZATION_MEMBER_ADDED = 'ORGANIZATION_MEMBER_ADDED',
+  ORGANIZATION_MEMBER_REMOVED = 'ORGANIZATION_MEMBER_REMOVED',
+  ORGANIZATION_ROLE_CHANGED = 'ORGANIZATION_ROLE_CHANGED',
+
+  // Hackathon Notifications
+  HACKATHON_CREATED = 'HACKATHON_CREATED',
+  HACKATHON_UPDATED = 'HACKATHON_UPDATED',
+  HACKATHON_STATUS_CHANGED = 'HACKATHON_STATUS_CHANGED',
+  HACKATHON_PUBLISHED = 'HACKATHON_PUBLISHED',
+  HACKATHON_ACTIVE = 'HACKATHON_ACTIVE',
+  HACKATHON_COMPLETED = 'HACKATHON_COMPLETED',
+  HACKATHON_CANCELLED = 'HACKATHON_CANCELLED',
+  HACKATHON_REGISTERED = 'HACKATHON_REGISTERED',
+  HACKATHON_SUBMISSION_SUBMITTED = 'HACKATHON_SUBMISSION_SUBMITTED',
+  HACKATHON_SUBMISSION_SHORTLISTED = 'HACKATHON_SUBMISSION_SHORTLISTED',
+  HACKATHON_SUBMISSION_DISQUALIFIED = 'HACKATHON_SUBMISSION_DISQUALIFIED',
+  HACKATHON_WINNERS_ANNOUNCED = 'HACKATHON_WINNERS_ANNOUNCED',
+  HACKATHON_DEADLINE_APPROACHING = 'HACKATHON_DEADLINE_APPROACHING',
+
+  // Team Invitation Notifications
+  TEAM_INVITATION_SENT = 'TEAM_INVITATION_SENT',
+  TEAM_INVITATION_ACCEPTED = 'TEAM_INVITATION_ACCEPTED',
+  TEAM_INVITATION_DECLINED = 'TEAM_INVITATION_DECLINED',
+  TEAM_INVITATION_EXPIRED = 'TEAM_INVITATION_EXPIRED',
+  TEAM_INVITATION_CANCELLED = 'TEAM_INVITATION_CANCELLED',
+
+  // Project Status
+  PROJECT_CREATED = 'PROJECT_CREATED',
+  PROJECT_UPDATED = 'PROJECT_UPDATED',
+  PROJECT_VERIFIED = 'PROJECT_VERIFIED',
+  PROJECT_APPROVED = 'PROJECT_APPROVED',
+  PROJECT_REJECTED = 'PROJECT_REJECTED',
+  PROJECT_FUNDED = 'PROJECT_FUNDED',
+  PROJECT_COMPLETED = 'PROJECT_COMPLETED',
+  PROJECT_CANCELLED = 'PROJECT_CANCELLED',
+
+  // Funding Status
+  FUNDING_RECEIVED = 'FUNDING_RECEIVED',
+  FUNDING_GOAL_MET = 'FUNDING_GOAL_MET',
+  FUNDING_FAILED = 'FUNDING_FAILED',
+  REFUND_PROCESSED = 'REFUND_PROCESSED',
+  FUNDING_DEADLINE_APPROACHING = 'FUNDING_DEADLINE_APPROACHING',
+
+  // Voting Status
+  VOTING_STARTED = 'VOTING_STARTED',
+  VOTING_ENDED = 'VOTING_ENDED',
+  VOTE_RECEIVED = 'VOTE_RECEIVED',
+  VOTING_THRESHOLD_MET = 'VOTING_THRESHOLD_MET',
+
+  // Milestone Status
+  MILESTONE_CREATED = 'MILESTONE_CREATED',
+  MILESTONE_UPDATED = 'MILESTONE_UPDATED',
+  MILESTONE_COMPLETED = 'MILESTONE_COMPLETED',
+  MILESTONE_DEADLINE_APPROACHING = 'MILESTONE_DEADLINE_APPROACHING',
+  MILESTONE_FUNDS_RELEASED = 'MILESTONE_FUNDS_RELEASED',
+
+  // Interaction Notifications
+  COMMENT_RECEIVED = 'COMMENT_RECEIVED',
+  COMMENT_REPLY = 'COMMENT_REPLY',
+  COMMENT_MENTION = 'COMMENT_MENTION',
+  REACTION_RECEIVED = 'REACTION_RECEIVED',
+
+  // Account Notifications
+  ACCOUNT_VERIFIED = 'ACCOUNT_VERIFIED',
+  PASSWORD_CHANGED = 'PASSWORD_CHANGED',
+  EMAIL_CHANGED = 'EMAIL_CHANGED',
+  SECURITY_ALERT = 'SECURITY_ALERT',
+}
+
+/**
+ * Notification data structure matching backend API response
+ */
+export interface Notification {
+  _id: string;
+  userId: {
+    type: string;
+  };
+  type: NotificationType;
+  title: string;
+  message: string;
+  data: {
+    // Organization fields
+    organizationId?: string;
+    organizationName?: string;
+    // Hackathon fields
+    hackathonId?: string;
+    hackathonName?: string;
+    hackathonSlug?: string;
+    // Team invitation fields
+    teamInvitationId?: string;
+    // Project fields
+    projectId?: string;
+    projectName?: string;
+    // Member fields
+    memberEmail?: string;
+    role?: string;
+    oldRole?: string;
+    newRole?: string;
+    // Submission fields
+    submissionStatus?: string;
+    deadlineType?: string;
+    // Status change fields
+    oldStatus?: string;
+    newStatus?: string;
+    isWinner?: boolean;
+    // Existing fields
+    commentId?: string;
+    milestoneId?: string;
+    amount?: number;
+    transactionHash?: string;
+    [key: string]: unknown;
+  };
+  read: boolean;
+  readAt: string | null;
+  emailSent: boolean;
+  emailSentAt: string | null;
+  createdAt: string;
+}
+
+/**
+ * Paginated notifications response
+ */
+export interface NotificationsResponse {
+  data: Notification[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+/**
+ * Request body for marking notifications as read
+ */
+export interface MarkAsReadRequest {
+  ids?: string[];
+  all?: boolean;
+}
+
+/**
+ * Notification preferences
+ */
+export interface NotificationPreferences {
+  email: boolean;
+  push: boolean;
+  inApp: boolean;
+}
+
+/**
+ * Update notification preferences request
+ */
+export interface UpdatePreferencesRequest {
+  email?: boolean;
+  push?: boolean;
+  inApp?: boolean;
+}

From 1f87b56664e53287fd36b0c7094c37d81e013c03 Mon Sep 17 00:00:00 2001
From: Collins Chikangwu <collinschristroa@gmail.com>
Date: Tue, 18 Nov 2025 14:04:02 +0100
Subject: [PATCH 3/3] feat: uodate

---
 components/notifications/NotificationIcon.tsx | 10 ++-
 .../organization/OrganizationContent.tsx      | 53 ++++++++++-
 .../organization/OrganizationSettings.tsx     | 23 +----
 .../organization/cards/OrganzationCards.tsx   | 89 ++++++++++++++-----
 hooks/use-hackathon-publish.ts                | 32 ++++++-
 lib/api/organization.ts                       | 23 +++++
 lib/providers/OrganizationProvider.tsx        | 54 +++++++++++
 lib/providers/organization-types.ts           |  3 +
 types/notifications.ts                        |  3 +
 9 files changed, 239 insertions(+), 51 deletions(-)

diff --git a/components/notifications/NotificationIcon.tsx b/components/notifications/NotificationIcon.tsx
index 845f32e01..6721b5989 100644
--- a/components/notifications/NotificationIcon.tsx
+++ b/components/notifications/NotificationIcon.tsx
@@ -21,6 +21,8 @@ import {
   XCircle,
   Ban,
   KeyRound,
+  Archive,
+  ArchiveRestore,
   LucideIcon,
 } from 'lucide-react';
 import { NotificationType } from '@/types/notifications';
@@ -45,6 +47,10 @@ export const getNotificationIcon = (type: NotificationType): LucideIcon => {
       return Users;
     case NotificationType.ORGANIZATION_ROLE_CHANGED:
       return KeyRound;
+    case NotificationType.ORGANIZATION_ARCHIVED:
+      return Archive;
+    case NotificationType.ORGANIZATION_UNARCHIVED:
+      return ArchiveRestore;
 
     // Hackathon Notifications
     case NotificationType.HACKATHON_CREATED:
@@ -165,6 +171,7 @@ export const getNotificationColor = (type: NotificationType): string => {
     type === NotificationType.ACCOUNT_VERIFIED ||
     type === NotificationType.ORGANIZATION_INVITE_ACCEPTED ||
     type === NotificationType.ORGANIZATION_MEMBER_ADDED ||
+    type === NotificationType.ORGANIZATION_UNARCHIVED ||
     type === NotificationType.HACKATHON_COMPLETED ||
     type === NotificationType.HACKATHON_SUBMISSION_SHORTLISTED ||
     type === NotificationType.HACKATHON_WINNERS_ANNOUNCED ||
@@ -178,7 +185,8 @@ export const getNotificationColor = (type: NotificationType): string => {
     type === NotificationType.FUNDING_DEADLINE_APPROACHING ||
     type === NotificationType.MILESTONE_DEADLINE_APPROACHING ||
     type === NotificationType.HACKATHON_DEADLINE_APPROACHING ||
-    type === NotificationType.TEAM_INVITATION_EXPIRED
+    type === NotificationType.TEAM_INVITATION_EXPIRED ||
+    type === NotificationType.ORGANIZATION_ARCHIVED
   ) {
     return 'border-yellow-200 bg-yellow-50 text-yellow-900';
   }
diff --git a/components/organization/OrganizationContent.tsx b/components/organization/OrganizationContent.tsx
index 725c2ea34..078080752 100644
--- a/components/organization/OrganizationContent.tsx
+++ b/components/organization/OrganizationContent.tsx
@@ -34,6 +34,8 @@ export default function OrganizationContent() {
     isLoading,
     isLoadingOrganizations,
     deleteOrganization,
+    archiveOrganization,
+    unarchiveOrganization,
     activeOrg,
   } = useOrganization();
   const [searchQuery, setSearchQuery] = useState('');
@@ -44,6 +46,7 @@ export default function OrganizationContent() {
     id: string;
     name: string;
   } | null>(null);
+  const [archivingId, setArchivingId] = useState<string | null>(null);
 
   const loading = isLoading || isLoadingOrganizations;
 
@@ -138,11 +141,18 @@ export default function OrganizationContent() {
       return;
     }
 
+    setArchivingId(orgId);
+
     try {
-      // TODO: Implement archive functionality
-      toast.info('Archive functionality coming soon', {
-        description: 'This feature will be available in a future update.',
+      await archiveOrganization(orgId);
+      toast.success('Organization archived successfully', {
+        description: `"${orgName}" has been archived.`,
       });
+
+      // If the archived org was the active org, redirect to organizations page
+      if (activeOrg?._id === orgId) {
+        router.push('/organizations');
+      }
     } catch (error) {
       const errorMessage =
         error instanceof Error
@@ -151,6 +161,40 @@ export default function OrganizationContent() {
       toast.error('Failed to archive organization', {
         description: errorMessage,
       });
+    } finally {
+      setArchivingId(null);
+    }
+  };
+
+  const handleUnarchive = async (orgId: string) => {
+    const orgToUnarchive = organizations.find(org => org._id === orgId);
+    const orgName = orgToUnarchive?.name || 'this organization';
+
+    if (
+      !confirm(
+        `Are you sure you want to unarchive "${orgName}"? This will restore the organization to your active list.`
+      )
+    ) {
+      return;
+    }
+
+    setArchivingId(orgId);
+
+    try {
+      await unarchiveOrganization(orgId);
+      toast.success('Organization unarchived successfully', {
+        description: `"${orgName}" has been restored.`,
+      });
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : 'Failed to unarchive organization. Please try again.';
+      toast.error('Failed to unarchive organization', {
+        description: errorMessage,
+      });
+    } finally {
+      setArchivingId(null);
     }
   };
 
@@ -307,8 +351,11 @@ export default function OrganizationContent() {
                     }}
                     onEdit={handleEdit}
                     onArchive={handleArchive}
+                    onUnarchive={handleUnarchive}
                     onDelete={handleDeleteClick}
                     isDeleting={deletingId === org._id}
+                    isArchiving={archivingId === org._id}
+                    isArchived={org.isArchived ?? false}
                   />
                 ))}
               </div>
diff --git a/components/organization/OrganizationSettings.tsx b/components/organization/OrganizationSettings.tsx
index 6e71a58b9..c8e37e362 100644
--- a/components/organization/OrganizationSettings.tsx
+++ b/components/organization/OrganizationSettings.tsx
@@ -28,22 +28,6 @@ export default function OrganizationSettings({
 }: OrganizationSettingsProps) {
   const [modalOpen, setModalOpen] = useState(false);
 
-  const handleProfileSave = () => {
-    // TODO: Implement profile save logic
-  };
-
-  const handleLinksSave = () => {
-    // TODO: Implement links save logic
-  };
-
-  const handleMembersSave = () => {
-    // TODO: Implement members save logic
-  };
-
-  const handleTransferOwnership = () => {
-    // TODO: Implement ownership transfer logic
-  };
-
   return (
     <div
       className='flex-1 overflow-hidden bg-black text-white'
@@ -108,7 +92,6 @@ export default function OrganizationSettings({
             <ProfileTab
               organizationId={organizationId}
               initialData={initialData}
-              onSave={handleProfileSave}
               isCreating={isCreating}
             />
           </TabsContent>
@@ -116,15 +99,15 @@ export default function OrganizationSettings({
           {!isCreating && (
             <>
               <TabsContent value='links' className='mt-0'>
-                <LinksTab onSave={handleLinksSave} />
+                <LinksTab />
               </TabsContent>
 
               <TabsContent value='members' className='mt-0'>
-                <MembersTab onSave={handleMembersSave} />
+                <MembersTab />
               </TabsContent>
 
               <TabsContent value='transfer' className='mt-0'>
-                <TransferOwnershipTab onTransfer={handleTransferOwnership} />
+                <TransferOwnershipTab />
               </TabsContent>
             </>
           )}
diff --git a/components/organization/cards/OrganzationCards.tsx b/components/organization/cards/OrganzationCards.tsx
index 347114779..f89c9554d 100644
--- a/components/organization/cards/OrganzationCards.tsx
+++ b/components/organization/cards/OrganzationCards.tsx
@@ -7,6 +7,7 @@ import {
   Calendar,
   Edit,
   Archive,
+  ArchiveRestore,
   Trash2,
   Loader2,
 } from 'lucide-react';
@@ -42,8 +43,11 @@ interface OrganizationCardProps {
   };
   onEdit?: (id: string) => void;
   onArchive?: (id: string) => void;
+  onUnarchive?: (id: string) => void;
   onDelete?: (id: string) => void;
   isDeleting?: boolean;
+  isArchiving?: boolean;
+  isArchived?: boolean;
 }
 
 export default function OrganizationCard({
@@ -55,8 +59,11 @@ export default function OrganizationCard({
   grants,
   onEdit,
   onArchive,
+  onUnarchive,
   onDelete,
   isDeleting = false,
+  isArchiving = false,
+  isArchived = false,
 }: OrganizationCardProps) {
   const router = useRouter();
   const { setActiveOrg, isLoadingActiveOrg, activeOrgId } = useOrganization();
@@ -86,10 +93,13 @@ export default function OrganizationCard({
     e.stopPropagation();
     if (onArchive) {
       onArchive(id);
-    } else {
-      if (confirm('Are you sure you want to archive this organization?')) {
-        // TODO: Implement archive functionality
-      }
+    }
+  };
+
+  const handleUnarchive = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onUnarchive) {
+      onUnarchive(id);
     }
   };
 
@@ -119,9 +129,11 @@ export default function OrganizationCard({
     <TooltipProvider>
       <div
         onClick={handleCardClick}
-        className={`group hover:shadow-primary/10 relative cursor-pointer overflow-hidden rounded-2xl border border-zinc-800 bg-gradient-to-br from-zinc-900 to-black transition-all duration-300 hover:border-zinc-700 hover:shadow-2xl ${
-          isThisOrgLoading ? 'pointer-events-none opacity-75' : ''
-        }`}
+        className={`group hover:shadow-primary/10 relative cursor-pointer overflow-hidden rounded-2xl border transition-all duration-300 hover:shadow-2xl ${
+          isArchived
+            ? 'border-zinc-700/50 bg-gradient-to-br from-zinc-950 to-black opacity-60'
+            : 'border-zinc-800 bg-gradient-to-br from-zinc-900 to-black hover:border-zinc-700'
+        } ${isThisOrgLoading ? 'pointer-events-none opacity-75' : ''}`}
       >
         {/* Animated gradient overlay on hover */}
         <div className='pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100'>
@@ -150,9 +162,16 @@ export default function OrganizationCard({
 
               {/* Organization Info */}
               <div className='flex flex-col gap-1'>
-                <h3 className='group-hover:text-primary text-xl font-bold text-white transition-colors'>
-                  {name}
-                </h3>
+                <div className='flex items-center gap-2'>
+                  <h3 className='group-hover:text-primary text-xl font-bold text-white transition-colors'>
+                    {name}
+                  </h3>
+                  {isArchived && (
+                    <span className='rounded-full bg-zinc-800 px-2 py-0.5 text-xs font-medium text-zinc-400'>
+                      Archived
+                    </span>
+                  )}
+                </div>
                 <div className='flex items-center gap-2 text-sm text-zinc-500'>
                   <Calendar className='h-3.5 w-3.5' />
                   <span>Created {formatDate(createdAt)}</span>
@@ -176,20 +195,42 @@ export default function OrganizationCard({
                 className='w-48 border-zinc-800 bg-zinc-950'
                 onClick={e => e.stopPropagation()}
               >
-                <DropdownMenuItem
-                  onClick={handleEdit}
-                  className='focus:bg-primary cursor-pointer text-zinc-300 focus:text-black'
-                >
-                  <Edit className='mr-2 h-4 w-4' />
-                  Edit Organization
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={handleArchive}
-                  className='cursor-pointer text-zinc-300 focus:bg-zinc-800 focus:text-white'
-                >
-                  <Archive className='mr-2 h-4 w-4' />
-                  Archive
-                </DropdownMenuItem>
+                {!isArchived && (
+                  <DropdownMenuItem
+                    onClick={handleEdit}
+                    className='focus:bg-primary cursor-pointer text-zinc-300 focus:text-black'
+                  >
+                    <Edit className='mr-2 h-4 w-4' />
+                    Edit Organization
+                  </DropdownMenuItem>
+                )}
+                {isArchived ? (
+                  <DropdownMenuItem
+                    onClick={handleUnarchive}
+                    disabled={isArchiving}
+                    className='cursor-pointer text-zinc-300 focus:bg-zinc-800 focus:text-white disabled:cursor-not-allowed disabled:opacity-50'
+                  >
+                    {isArchiving ? (
+                      <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                    ) : (
+                      <ArchiveRestore className='mr-2 h-4 w-4' />
+                    )}
+                    {isArchiving ? 'Unarchiving...' : 'Unarchive'}
+                  </DropdownMenuItem>
+                ) : (
+                  <DropdownMenuItem
+                    onClick={handleArchive}
+                    disabled={isArchiving}
+                    className='cursor-pointer text-zinc-300 focus:bg-zinc-800 focus:text-white disabled:cursor-not-allowed disabled:opacity-50'
+                  >
+                    {isArchiving ? (
+                      <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+                    ) : (
+                      <Archive className='mr-2 h-4 w-4' />
+                    )}
+                    {isArchiving ? 'Archiving...' : 'Archive'}
+                  </DropdownMenuItem>
+                )}
                 <DropdownMenuItem
                   onClick={handleDelete}
                   disabled={isDeleting}
diff --git a/hooks/use-hackathon-publish.ts b/hooks/use-hackathon-publish.ts
index b5dc58f5e..a0bc41992 100644
--- a/hooks/use-hackathon-publish.ts
+++ b/hooks/use-hackathon-publish.ts
@@ -132,6 +132,10 @@ export const useHackathonPublish = ({
         address: walletAddress,
       });
 
+      if (!signedEscrowXdr || signedEscrowXdr.trim() === '') {
+        throw new Error('Transaction signing was cancelled');
+      }
+
       const escrowSendResponse = await sendTransaction(signedEscrowXdr);
 
       if (
@@ -181,6 +185,10 @@ export const useHackathonPublish = ({
         address: walletAddress,
       });
 
+      if (!signedFundXdr || signedFundXdr.trim() === '') {
+        throw new Error('Transaction signing was cancelled');
+      }
+
       const fundSendResponse = await sendTransaction(signedFundXdr);
 
       if (
@@ -219,10 +227,28 @@ export const useHackathonPublish = ({
           );
         }, 1500);
       }
-    } catch {
-      toast.error('Failed to publish hackathon');
+    } catch (error) {
+      let errorMessage = 'Failed to publish hackathon';
+
+      if (error instanceof Error) {
+        const errorMsg = error.message.toLowerCase();
+        if (
+          errorMsg.includes('user rejected') ||
+          errorMsg.includes('cancelled') ||
+          errorMsg.includes('rejected') ||
+          errorMsg.includes('transaction signing was cancelled')
+        ) {
+          errorMessage = 'Transaction signing was cancelled. Please try again.';
+        } else if (errorMsg.includes('sign')) {
+          errorMessage = 'Failed to sign transaction. Please try again.';
+        } else {
+          errorMessage = error.message;
+        }
+      }
+
+      toast.error(errorMessage);
 
-      throw new Error('Failed to publish hackathon');
+      throw error;
     } finally {
       setIsPublishing(false);
     }
diff --git a/lib/api/organization.ts b/lib/api/organization.ts
index 8ec4471d0..cd805852b 100644
--- a/lib/api/organization.ts
+++ b/lib/api/organization.ts
@@ -22,6 +22,9 @@ export interface Organization {
   grants: string[];
   isProfileComplete: boolean;
   pendingInvites: string[];
+  isArchived?: boolean;
+  archivedBy?: string;
+  archivedAt?: string;
   createdAt: string;
   updatedAt: string;
 }
@@ -317,6 +320,26 @@ export const deleteOrganization = async (
   return res.data;
 };
 
+/**
+ * Archive an organization
+ */
+export const archiveOrganization = async (
+  organizationId: string
+): Promise<UpdateOrganizationResponse> => {
+  const res = await api.post(`/organizations/${organizationId}/archive`);
+  return res.data;
+};
+
+/**
+ * Unarchive an organization
+ */
+export const unarchiveOrganization = async (
+  organizationId: string
+): Promise<UpdateOrganizationResponse> => {
+  const res = await api.post(`/organizations/${organizationId}/unarchive`);
+  return res.data;
+};
+
 /**
  * Get organizations by user (organizations where user is a member)
  */
diff --git a/lib/providers/OrganizationProvider.tsx b/lib/providers/OrganizationProvider.tsx
index edad23378..f57c5b9ba 100644
--- a/lib/providers/OrganizationProvider.tsx
+++ b/lib/providers/OrganizationProvider.tsx
@@ -30,6 +30,8 @@ import {
   updateOrganizationHackathons,
   updateOrganizationGrants,
   deleteOrganization,
+  archiveOrganization,
+  unarchiveOrganization,
   assignOrganizationRole,
   transferOrganizationOwnership,
   getOrganizationPermissions as fetchOrganizationPermissions,
@@ -863,6 +865,56 @@ export function OrganizationProvider({
     }
   }, []);
 
+  const archiveOrg = useCallback(
+    async (orgId: string) => {
+      try {
+        dispatch({ type: 'SET_LOADING', payload: { isLoading: true } });
+        const response = await archiveOrganization(orgId);
+        const updatedOrg = response.data;
+
+        dispatch({ type: 'UPDATE_ORGANIZATION', payload: updatedOrg });
+        await refreshOrganizations();
+
+        return updatedOrg;
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error
+            ? error.message
+            : 'Failed to archive organization';
+        dispatch({ type: 'SET_ERROR', payload: { error: errorMessage } });
+        throw error;
+      } finally {
+        dispatch({ type: 'SET_LOADING', payload: { isLoading: false } });
+      }
+    },
+    [refreshOrganizations]
+  );
+
+  const unarchiveOrg = useCallback(
+    async (orgId: string) => {
+      try {
+        dispatch({ type: 'SET_LOADING', payload: { isLoading: true } });
+        const response = await unarchiveOrganization(orgId);
+        const updatedOrg = response.data;
+
+        dispatch({ type: 'UPDATE_ORGANIZATION', payload: updatedOrg });
+        await refreshOrganizations();
+
+        return updatedOrg;
+      } catch (error) {
+        const errorMessage =
+          error instanceof Error
+            ? error.message
+            : 'Failed to unarchive organization';
+        dispatch({ type: 'SET_ERROR', payload: { error: errorMessage } });
+        throw error;
+      } finally {
+        dispatch({ type: 'SET_LOADING', payload: { isLoading: false } });
+      }
+    },
+    [refreshOrganizations]
+  );
+
   const inviteMembers = useCallback(
     async (orgId: string, emails: string[]) => {
       try {
@@ -1180,6 +1232,8 @@ export function OrganizationProvider({
     updateOrganizationLinks: updateOrgLinks,
     updateOrganizationMembers: updateOrgMembers,
     deleteOrganization: deleteOrg,
+    archiveOrganization: archiveOrg,
+    unarchiveOrganization: unarchiveOrg,
     inviteMember: inviteMembers,
     removeMember,
     addHackathon,
diff --git a/lib/providers/organization-types.ts b/lib/providers/organization-types.ts
index ba4f21441..30c166538 100644
--- a/lib/providers/organization-types.ts
+++ b/lib/providers/organization-types.ts
@@ -11,6 +11,7 @@ export interface OrganizationSummary {
   memberCount: number;
   hackathonCount: number;
   grantCount: number;
+  isArchived?: boolean;
   createdAt: string;
 }
 
@@ -171,6 +172,8 @@ export interface OrganizationContextActions {
     members: string[]
   ) => Promise<Organization>;
   deleteOrganization: (orgId: string) => Promise<void>;
+  archiveOrganization: (orgId: string) => Promise<Organization>;
+  unarchiveOrganization: (orgId: string) => Promise<Organization>;
   removeMember: (orgId: string, email: string) => Promise<void>;
   inviteMember: (orgId: string, emails: string[]) => Promise<void>;
   addHackathon: (orgId: string, hackathonId: string) => Promise<void>;
diff --git a/types/notifications.ts b/types/notifications.ts
index b3941efb3..ae00d943d 100644
--- a/types/notifications.ts
+++ b/types/notifications.ts
@@ -12,6 +12,8 @@ export enum NotificationType {
   ORGANIZATION_MEMBER_ADDED = 'ORGANIZATION_MEMBER_ADDED',
   ORGANIZATION_MEMBER_REMOVED = 'ORGANIZATION_MEMBER_REMOVED',
   ORGANIZATION_ROLE_CHANGED = 'ORGANIZATION_ROLE_CHANGED',
+  ORGANIZATION_ARCHIVED = 'ORGANIZATION_ARCHIVED',
+  ORGANIZATION_UNARCHIVED = 'ORGANIZATION_UNARCHIVED',
 
   // Hackathon Notifications
   HACKATHON_CREATED = 'HACKATHON_CREATED',
@@ -119,6 +121,7 @@ export interface Notification {
     milestoneId?: string;
     amount?: number;
     transactionHash?: string;
+    archivedBy?: string;
     [key: string]: unknown;
   };
   read: boolean;