diff --git a/app/auth/signin/page.tsx b/app/auth/signin/page.tsx
index 62d338d8a..ab1e5131a 100644
--- a/app/auth/signin/page.tsx
+++ b/app/auth/signin/page.tsx
@@ -1,11 +1,117 @@
 'use client';
 import AuthLayout from '@/components/auth/AuthLayout';
 import LoginForm from '@/components/auth/LoginForm';
+import { useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { getSession, signIn } from 'next-auth/react';
+import { toast } from 'sonner';
+import Cookies from 'js-cookie';
+import z from 'zod';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import Loading from '@/components/loading/Loading';
+
+const formSchema = z.object({
+  email: z.string().email({
+    message: 'Invalid email address',
+  }),
+  password: z.string().min(8, {
+    message: 'Password must be at least 8 characters',
+  }),
+});
 
 export default function SignInPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get('callbackUrl') || '/user';
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+  });
+
+  const onSubmit = async (values: z.infer<typeof formSchema>) => {
+    setIsLoading(true);
+    try {
+      const result = await signIn('credentials', {
+        email: values.email,
+        password: values.password,
+        redirect: false,
+      });
+
+      if (result?.error) {
+        if (result.error === 'UNVERIFIED_EMAIL') {
+          toast.error(
+            'Please verify your email before signing in. Check your inbox for a verification link.'
+          );
+          setTimeout(() => {
+            router.push(
+              `/auth/verify-email?email=${encodeURIComponent(values.email)}`
+            );
+          }, 3000);
+        } else {
+          form.setError('email', {
+            type: 'manual',
+            message: 'Invalid email or password',
+          });
+          form.setError('password', {
+            type: 'manual',
+            message: 'Invalid email or password',
+          });
+        }
+      } else if (result?.ok) {
+        const session = await getSession();
+
+        if (session) {
+          if (session.user.accessToken) {
+            Cookies.set('accessToken', session.user.accessToken);
+          }
+          if (session.user.refreshToken) {
+            Cookies.set('refreshToken', session.user.refreshToken);
+          }
+          router.push(callbackUrl);
+        } else {
+          form.setError('root', {
+            type: 'manual',
+            message:
+              'Login successful but session not found. Please try again.',
+          });
+        }
+        router.push(callbackUrl);
+      } else {
+        form.setError('root', {
+          type: 'manual',
+          message: 'An unexpected error occurred. Please try again.',
+        });
+      }
+    } catch {
+      form.setError('root', {
+        type: 'manual',
+        message: 'An unexpected error occurred. Please try again.',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <AuthLayout>
-      <LoginForm />
+      <LoginForm
+        form={form}
+        onSubmit={onSubmit}
+        showPassword={showPassword}
+        setShowPassword={setShowPassword}
+        isLoading={isLoading}
+      />
     </AuthLayout>
   );
 }
diff --git a/components/auth/AuthLayout.tsx b/components/auth/AuthLayout.tsx
index 8a3cd1e0b..4d9586074 100644
--- a/components/auth/AuthLayout.tsx
+++ b/components/auth/AuthLayout.tsx
@@ -1,8 +1,7 @@
 'use client';
 import Image from 'next/image';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Badge } from '../ui/badge';
-import { useState, useEffect } from 'react';
 import {
   Carousel,
   CarouselContent,
@@ -11,7 +10,6 @@ import {
   CarouselPrevious,
   type CarouselApi,
 } from '../ui/carousel';
-import Autoplay from 'embla-carousel-autoplay';
 
 interface AuthLayoutProps {
   children: React.ReactNode;
@@ -19,7 +17,6 @@ interface AuthLayoutProps {
 }
 
 const AuthLayout = ({ children, showCarousel = true }: AuthLayoutProps) => {
-  // Slide data
   const slides = [
     {
       id: 1,
@@ -67,136 +64,119 @@ const AuthLayout = ({ children, showCarousel = true }: AuthLayoutProps) => {
   const [api, setApi] = useState<CarouselApi>();
 
   useEffect(() => {
-    if (!api) {
-      return;
-    }
-
-    api.on('select', () => {
-      setCurrentSlide(api.selectedScrollSnap());
-    });
+    if (!api) return;
+    api.on('select', () => setCurrentSlide(api.selectedScrollSnap()));
   }, [api]);
 
   return (
-    <div className='bg-background'>
-      <div className='flex flex-col lg:flex-row justify-between h-screen overflow-hidden'>
-        {/* Left Panel - Auth Form */}
-        <div className='w-full lg:basis-1/2 relative z-10 p-4 lg:p-0'>
+    <div className='bg-background min-h-screen w-full flex justify-center'>
+      <div className='flex flex-col lg:flex-row h-screen w-full max-w-[1920px] xl:max-w-[1600px] 2xl:max-w-[1800px] mx-auto'>
+        {/* Left Panel */}
+        <div className='w-full h-full lg:basis-1/2 relative flex items-center justify-center px-6 py-10 lg:px-16 xl:px-24 2xl:px-32 overflow-hidden'>
           <Image
             src='/auth/top-left.png'
             alt='auth'
             width={248}
             height={231}
-            className='object-cover absolute top-0 left-0 pointer-events-none z-10'
+            className='absolute top-0 left-0 object-contain pointer-events-none z-0'
+            unoptimized
+          />
+
+          <Image
+            src='/auth/grid.svg'
+            alt='grid'
+            width={248}
+            height={231}
+            className='absolute bottom-0 left-0 object-cover pointer-events-none w-full min-w-[500px] max-h-[254px] z-0'
             unoptimized
           />
-          <div className='flex flex-col justify-center h-full ml-4 lg:ml-[130px] mt-8 lg:mt-[33px] max-w-[500px] space-y-6 lg:space-y-8'>
+
+          {/* Form Content */}
+          <div className='flex flex-col justify-center h-full max-w-[500px] w-full gap-6 lg:gap-10 relative z-10'>
             <Image
               src='/auth/logo.svg'
-              alt='auth'
-              width={123}
-              height={22}
-              className='object-cover'
+              alt='auth-logo'
+              width={160}
+              height={30}
+              className='object-contain mx-auto lg:mx-0'
               unoptimized
             />
-            <div className='space-y-6 lg:space-y-8'>{children}</div>
-          </div>
-          <div className='w-full h-[254px]'>
-            <Image
-              src='/auth/grid.svg'
-              alt='auth'
-              width={248}
-              height={231}
-              className='object-cover absolute bottom-0 right-0 pointer-events-none 0 w-full h-[254px] -z-10'
-            />
+            <div className='space-y-6 lg:space-y-10'>{children}</div>
           </div>
         </div>
 
         {/* Right Panel - Carousel */}
         {showCarousel && (
-          <div className='w-full lg:basis-1/2 hidden lg:flex items-center justify-center p-4 lg:p-8 min-h-[400px] lg:min-h-0'>
-            <div
-              className='w-[650px] max-w-[650px] h-[400px] lg:h-full rounded-[12px] border border-[#2B2B2B] relative overflow-hidden bg-black'
-              style={{
-                background: `
-                  url('/auth/bg.png')
-                  conic-gradient(from 180deg at 50% 50%,rgba(0,0,0,0.60) 44.56deg,rgba(0,0,0,0.20) 90.14deg,rgba(0,0,0,0.06) 131deg,#000 222.03deg,rgba(0,0,0,0.24) 286.68deg,rgba(0,0,0,0.00) 317.11deg,#000 360deg)
-                `,
-              }}
-            >
-              <div className='flex flex-col items-center justify-center h-full gap-4 lg:gap-8 relative z-10 px-2 lg:px-8 py-4 lg:py-0'>
+          <div className='hidden lg:flex w-full lg:basis-1/2 items-center justify-center p-6 lg:p-8 xl:p-10'>
+            <div className="relative w-full max-w-[500px] md:max-w-[600px] xl:max-w-[700px] 2xl:max-w-[800px] aspect-[4/3] lg:aspect-[3/4] xl:aspect-[4/3] h-full rounded-2xl border border-[#2B2B2B] overflow-hidden bg-[url('/auth/bg.png')] bg-cover bg-center shadow-xl">
+              <div className='flex flex-col items-center justify-center h-full p-6 lg:p-8 relative z-10'>
                 <Carousel
-                  opts={{
-                    align: 'start',
-                    loop: true,
-                  }}
-                  className='w-full'
+                  opts={{ align: 'start', loop: true }}
                   setApi={setApi}
-                  plugins={[
-                    Autoplay({
-                      delay: 2000,
-                    }),
-                  ]}
+                  className='w-full h-full flex'
                 >
-                  <CarouselContent>
+                  <CarouselContent className=' h-full'>
                     {slides.map(slide => (
-                      <CarouselItem key={slide.id}>
-                        <div className='flex flex-col items-center gap-4 lg:gap-8'>
-                          {/* Main card with glassmorphism effects */}
-                          <div className='w-full max-w-[300px] lg:max-w-[536px] relative flex items-center justify-center'>
+                      <CarouselItem key={slide.id} className='h-full'>
+                        <div className='flex flex-col items-center justify-between h-full gap-6 lg:gap-8'>
+                          {/* Image Card Container */}
+                          <div className='relative w-full max-w-[400px] lg:max-w-[500px] aspect-[5/3]'>
                             <Image
                               src='/auth/image-card.png'
-                              alt='Glassmorphism card'
-                              width={536}
-                              height={320}
-                              className='object-cover rounded-[12px] w-full h-auto'
+                              alt='Glass card'
+                              fill
+                              className='object-cover rounded-2xl'
                               unoptimized
                             />
-                            <div className='z-10 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
-                              <Image
-                                src={slide.logo}
-                                alt='logo'
-                                width={537}
-                                height={22}
-                                className='object-cover w-[150px] lg:w-[250px] h-auto'
-                              />
+                            <div className='absolute inset-0 flex items-center justify-center'>
+                              <div className='relative w-[100px] h-[40px] sm:w-[120px] sm:h-[48px] lg:w-[160px] lg:h-[64px] xl:w-[200px] xl:h-[80px]'>
+                                <Image
+                                  src={slide.logo}
+                                  alt={`${slide.title} logo`}
+                                  fill
+                                  className='object-contain'
+                                />
+                              </div>
                             </div>
                           </div>
 
-                          {/* Project information section */}
-                          <div className='w-full max-w-[300px] lg:max-w-[400px]'>
-                            <Badge className='w-fit text-xs font-medium backdrop-blur-md bg-white/10 border border-white/20 rounded-full px-3 py-1 text-white mb-4'>
+                          {/* Content */}
+                          <div className='text-center w-full max-w-[300px] lg:max-w-[400px] px-2 mb-8'>
+                            <Badge className='inline-flex items-center text-xs font-medium backdrop-blur-md bg-white/10 border border-white/20 rounded-full px-3 py-1 text-white mb-4 hover:bg-white/15 transition-colors'>
                               {slide.badge}
                             </Badge>
-
-                            <div className='space-y-3'>
-                              <h3 className='text-white text-xs lg:text-sm font-semibold'>
-                                {slide.title}
-                              </h3>
-                              <p className='text-xs lg:text-sm text-[#D9D9D9] leading-relaxed mx-auto'>
-                                {slide.description}
-                              </p>
-                            </div>
+                            <h3 className='text-white text-lg lg:text-xl font-semibold mb-3'>
+                              {slide.title}
+                            </h3>
+                            <p className='text-sm lg:text-base text-[#D9D9D9] leading-relaxed'>
+                              {slide.description}
+                            </p>
                           </div>
                         </div>
                       </CarouselItem>
                     ))}
                   </CarouselContent>
-                  <div className='flex items-center justify-between gap-2 relative z-10 max-w-[300px] lg:max-w-[400px] mx-auto'>
-                    <CarouselPrevious className='static bg-transparent border-none text-white translate-0' />
-                    <div className='flex items-center justify-center gap-2'>
-                      {slides.map((_, dotIndex) => (
+
+                  {/* Controls */}
+                  <div className='flex items-center justify-between w-full mt-6 absolute bottom-0'>
+                    <CarouselPrevious className='relative left-0 translate-y-0 bg-transparent border-none text-white hover:text-gray-300 hover:scale-110 transition-all duration-200 h-8 w-8' />
+
+                    <div className='flex items-center gap-2'>
+                      {slides.map((_, i) => (
                         <button
-                          key={dotIndex}
-                          onClick={() => api?.scrollTo(dotIndex)}
-                          className={`w-8 h-1.5 rounded-full transition-all duration-300 ${
-                            dotIndex === currentSlide
-                              ? 'bg-white'
-                              : 'bg-gray-600'
+                          key={i}
+                          onClick={() => api?.scrollTo(i)}
+                          className={`h-2 rounded-full transition-all duration-300 ${
+                            i === currentSlide
+                              ? 'bg-white w-8'
+                              : 'bg-gray-600 hover:bg-gray-500 w-2'
                           }`}
+                          aria-label={`Go to slide ${i + 1}`}
                         />
                       ))}
                     </div>
-                    <CarouselNext className='static bg-transparent border-none text-white translate-0' />
+
+                    <CarouselNext className='relative right-0 translate-y-0 bg-transparent border-none text-white hover:text-gray-300 hover:scale-110 transition-all duration-200 h-8 w-8' />
                   </div>
                 </Carousel>
               </div>
diff --git a/components/auth/LoginForm.tsx b/components/auth/LoginForm.tsx
index ecf184f0d..95503a1db 100644
--- a/components/auth/LoginForm.tsx
+++ b/components/auth/LoginForm.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useState } from 'react';
+import React from 'react';
 import { BoundlessButton } from '../buttons';
 import {
   Form,
@@ -9,19 +9,14 @@ import {
   FormMessage,
 } from '../ui/form';
 import { FormLabel } from '../ui/form';
-import z from 'zod';
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import { Input } from '../ui/input';
 import { Eye, EyeOff, LockIcon, MailIcon } from 'lucide-react';
 import { Checkbox } from '../ui/checkbox';
 import { Label } from '../ui/label';
 import Link from 'next/link';
-import { getSession, signIn } from 'next-auth/react';
-import { toast } from 'sonner';
-import { useRouter, useSearchParams } from 'next/navigation';
-import Cookies from 'js-cookie';
 import Image from 'next/image';
+import { UseFormReturn } from 'react-hook-form';
+import z from 'zod';
 
 const formSchema = z.object({
   email: z.string().email({
@@ -32,88 +27,28 @@ const formSchema = z.object({
   }),
 });
 
-const LoginForm = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const callbackUrl = searchParams.get('callbackUrl') || '/user';
-  const [showPassword, setShowPassword] = useState(false);
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      email: '',
-      password: '',
-    },
-  });
-
-  const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    try {
-      const result = await signIn('credentials', {
-        email: values.email,
-        password: values.password,
-        redirect: false,
-      });
-
-      if (result?.error) {
-        if (result.error === 'UNVERIFIED_EMAIL') {
-          toast.error(
-            'Please verify your email before signing in. Check your inbox for a verification link.'
-          );
-          setTimeout(() => {
-            router.push(
-              `/auth/verify-email?email=${encodeURIComponent(values.email)}`
-            );
-          }, 3000);
-        } else {
-          form.setError('email', {
-            type: 'manual',
-            message: 'Invalid email or password',
-          });
-          form.setError('password', {
-            type: 'manual',
-            message: 'Invalid email or password',
-          });
-        }
-      } else if (result?.ok) {
-        const session = await getSession();
-
-        if (session) {
-          if (session.user.accessToken) {
-            Cookies.set('accessToken', session.user.accessToken);
-          }
-          if (session.user.refreshToken) {
-            Cookies.set('refreshToken', session.user.refreshToken);
-          }
-          router.push(callbackUrl);
-        } else {
-          form.setError('root', {
-            type: 'manual',
-            message:
-              'Login successful but session not found. Please try again.',
-          });
-        }
-        router.push(callbackUrl);
-      } else {
-        form.setError('root', {
-          type: 'manual',
-          message: 'An unexpected error occurred. Please try again.',
-        });
-      }
-    } catch {
-      form.setError('root', {
-        type: 'manual',
-        message: 'An unexpected error occurred. Please try again.',
-      });
-    }
-  };
+interface LoginFormProps {
+  form: UseFormReturn<z.infer<typeof formSchema>>;
+  onSubmit: (values: z.infer<typeof formSchema>) => Promise<void>;
+  showPassword: boolean;
+  setShowPassword: (show: boolean) => void;
+  isLoading: boolean;
+}
 
+const LoginForm = ({
+  form,
+  onSubmit,
+  showPassword,
+  setShowPassword,
+  isLoading,
+}: LoginFormProps) => {
   return (
     <>
-      <div>
-        <h2 className='text-2xl lg:text-[40px] font-medium text-white mb-3'>
+      <div className='space-y-2'>
+        <h2 className='text-2xl text-center md:text-left lg:text-[40px] font-medium text-white mb-3'>
           Sign in
         </h2>
-        <p className='text-sm lg:text-base text-[#D9D9D9] leading-relaxed'>
+        <p className='text-sm text-center md:text-left lg:text-base text-[#D9D9D9] leading-relaxed'>
           Sign in to manage campaigns, apply for grants, and track your funding
           progress — all in one dashboard.
         </p>
@@ -224,9 +159,9 @@ const LoginForm = () => {
             <BoundlessButton
               type='submit'
               className='w-full'
-              disabled={form.formState.isSubmitting || !form.formState.isValid}
+              disabled={isLoading || !form.formState.isValid}
               fullWidth
-              loading={form.formState.isSubmitting}
+              loading={isLoading}
             >
               Sign in
             </BoundlessButton>
diff --git a/components/auth/SignupForm.tsx b/components/auth/SignupForm.tsx
index 5e42fe321..3cecb3ef2 100644
--- a/components/auth/SignupForm.tsx
+++ b/components/auth/SignupForm.tsx
@@ -139,11 +139,11 @@ const SignupForm = () => {
 
   return (
     <>
-      <div>
-        <h2 className='text-2xl lg:text-[40px] font-medium text-white mb-3'>
+      <div className='space-y-2'>
+        <h2 className='text-2xl text-center md:text-left lg:text-[40px] font-medium text-white mb-3'>
           Create account
         </h2>
-        <p className='text-sm lg:text-base text-[#D9D9D9] leading-relaxed'>
+        <p className='text-sm text-center md:text-left lg:text-base text-[#D9D9D9] leading-relaxed'>
           Create an account to manage campaigns, apply for grants, and track
           your funding progress — all in one dashboard.
         </p>
diff --git a/components/loading/Loading.tsx b/components/loading/Loading.tsx
new file mode 100644
index 000000000..7150387b0
--- /dev/null
+++ b/components/loading/Loading.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import LoadingSpinner from '../LoadingSpinner';
+
+const Loading = () => {
+  return (
+    <div className='flex justify-center items-center h-screen absolute top-0 left-0 right-0 bottom-0 bg-[rgba(28,28,28,0.64)] overflow-hidden'>
+      <LoadingSpinner size='lg' className='text-white' />
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/components/providers/auth-provider.tsx b/components/providers/auth-provider.tsx
index cf45b47e9..2a977db95 100644
--- a/components/providers/auth-provider.tsx
+++ b/components/providers/auth-provider.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { useAuthStore } from '@/lib/stores/auth-store';
+import Loading from '../loading/Loading';
 
 interface AuthProviderProps {
   children: React.ReactNode;
@@ -63,11 +64,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
 
   // Show loading state while hydrating
   if (!isHydrated) {
-    return (
-      <div className='flex items-center justify-center min-h-screen'>
-        <div className='animate-spin rounded-full h-8 w-8 border-b-2 border-white'></div>
-      </div>
-    );
+    return <Loading />;
   }
 
   return <>{children}</>;
@@ -98,11 +95,7 @@ export function AuthLoadingProvider({
   const { isLoading } = useAuthStore();
 
   if (!isHydrated || isLoading) {
-    return (
-      <div className='flex items-center justify-center min-h-screen'>
-        <div className='animate-spin rounded-full h-8 w-8 border-b-2 border-white'></div>
-      </div>
-    );
+    return <Loading />;
   }
 
   return <>{children}</>;