diff --git a/package-lock.json b/package-lock.json
index 13d84a8..071ee2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54,7 +54,7 @@
                         "react-resizable-panels": "^2.1.7",
                         "react-router-dom": "^7.9.4",
                         "recharts": "^2.15.2",
-                        "sonner": "^2.0.3",
+                        "sonner": "^2.0.7",
                         "tailwind-merge": "*",
                         "tailwindcss": "^4.1.14",
                         "vaul": "^1.1.2"
diff --git a/package.json b/package.json
index 2e11959..078328a 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
             "react-resizable-panels": "^2.1.7",
             "react-router-dom": "^7.9.4",
             "recharts": "^2.15.2",
-            "sonner": "^2.0.3",
+            "sonner": "^2.0.7",
             "tailwind-merge": "*",
             "tailwindcss": "^4.1.14",
             "vaul": "^1.1.2"
diff --git a/src/Redux/Store.tsx b/src/Redux/Store.tsx
index 7d03f11..04e0e46 100644
--- a/src/Redux/Store.tsx
+++ b/src/Redux/Store.tsx
@@ -2,22 +2,25 @@ import { configureStore } from "@reduxjs/toolkit";
 import { fakeApi } from "./services/fakeApi.service";
 import { attractionsApi } from "./services/attractions.service";
 import { citiesApi } from "./services/cities.service";
+import { authApi } from "./services/auth.service";
 
 export const store = configureStore({
   reducer: {
-   [fakeApi.reducerPath]:fakeApi.reducer,
-   [attractionsApi.reducerPath]:attractionsApi.reducer,
-   [citiesApi.reducerPath]:citiesApi.reducer
+    [fakeApi.reducerPath]: fakeApi.reducer,
+    [attractionsApi.reducerPath]: attractionsApi.reducer,
+    [citiesApi.reducerPath]: citiesApi.reducer,
+    [authApi.reducerPath]:authApi.reducer
 
   },
 
-  
+
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(
-   
-fakeApi.middleware,
-attractionsApi.middleware,
-citiesApi.middleware 
+
+      fakeApi.middleware,
+      attractionsApi.middleware,
+      citiesApi.middleware,
+      authApi.middleware
     ),
 });
 export type RootState = ReturnType<typeof store.getState>;
diff --git a/src/Redux/baseQuery.ts b/src/Redux/baseQuery.ts
index 37c41cc..7ffc8d8 100644
--- a/src/Redux/baseQuery.ts
+++ b/src/Redux/baseQuery.ts
@@ -14,4 +14,3 @@ export const baseQuery = fetchBaseQuery({
     return headers;
   },
 });
- 
diff --git a/src/Redux/services/auth.service.ts b/src/Redux/services/auth.service.ts
new file mode 100644
index 0000000..100cd07
--- /dev/null
+++ b/src/Redux/services/auth.service.ts
@@ -0,0 +1,53 @@
+
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "../baseQuery";
+
+export const authApi = createApi({
+  reducerPath: "authApi",
+  baseQuery: baseQuery,
+
+  tagTypes: ["profile", "Transaction"],
+
+
+  endpoints: (builder) => ({
+    // Login
+
+    login: builder.mutation({
+      query: (credentials) => ({
+        url: "/website/send-otp",
+        method: "POST",
+        body: credentials,
+      }),
+    }),
+
+    verifyOtp: builder.mutation({
+      query: (credentials) => ({
+        url: "/website/user/verify-otp",
+        method: "POST",
+        body: credentials,
+      }),
+    }),
+
+    register: builder.mutation({
+      query: (credentials) => ({
+        url: "/website/user/register",
+        method: "POST",
+        body: credentials,
+      }),
+    }),
+
+    logoutUser: builder.mutation({
+      query: () => ({
+        url: "/website/user/logout",
+        method: "POST"
+      })
+    })
+  }),
+});
+
+export const {
+  useLoginMutation,
+  useVerifyOtpMutation,
+  useRegisterMutation,
+  useLogoutUserMutation
+} = authApi;
\ No newline at end of file
diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
index b70ce28..5eca180 100644
--- a/src/components/LoginModal.tsx
+++ b/src/components/LoginModal.tsx
@@ -4,37 +4,45 @@ import { X } from 'lucide-react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
-import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
+import { useLoginMutation, useVerifyOtpMutation } from '../Redux/services/auth.service';
+import { toast } from 'sonner';
 
 interface LoginModalProps {
   isOpen: boolean;
   onClose: () => void;
-  // onLoginSuccess: (userData: { email: string; name: string }) => void;
 }
 
-export function LoginModal({ isOpen, onClose, }: LoginModalProps) {
+export function LoginModal({ isOpen, onClose }: LoginModalProps) {
   const [step, setStep] = useState<'email' | 'otp'>('email');
   const [email, setEmail] = useState('');
   const [otp, setOtp] = useState(['', '', '', '', '', '']);
   const [countdown, setCountdown] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
   const [helperText, setHelperText] = useState('');
+  const [error, setError] = useState('');
 
-  const { login } = useAuth(); // from AuthContext
+  const { login } = useAuth();
 
-  // Reset modal state when closed
+  const [sendOtp, { isLoading: isSendingOtp }] = useLoginMutation();
+  const [verifyOtp, { isLoading: isVerifying }] = useVerifyOtpMutation();
+
+  // Reset modal when closed
   useEffect(() => {
     if (!isOpen) {
-      setStep('email');
-      setEmail('');
-      setOtp(['', '', '', '', '', '']);
-      setCountdown(0);
-      setHelperText('');
+      resetModal();
     }
   }, [isOpen]);
 
-  // Countdown timer for OTP resend
+  const resetModal = () => {
+    setStep('email');
+    setEmail('');
+    setOtp(['', '', '', '', '', '']);
+    setCountdown(0);
+    setHelperText('');
+    setError('');
+  };
+
+  // Countdown timer
   useEffect(() => {
     if (countdown > 0) {
       const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
@@ -42,67 +50,105 @@ export function LoginModal({ isOpen, onClose, }: LoginModalProps) {
     }
   }, [countdown]);
 
-  const handleSendOTP = async () => {
-    if (!email || !email.includes('@')) {
-      setHelperText('Please enter a valid email address');
-      return;
+  // ==================== PASTE OTP FEATURE ====================
+  const handlePaste = (e: React.ClipboardEvent) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData('text').trim();
+
+    // Extract only digits
+    const digits = pastedData.replace(/\D/g, '').slice(0, 6);
+
+    if (digits.length === 0) return;
+
+    const newOtp = [...otp];
+
+    // Fill the OTP array with pasted digits
+    for (let i = 0; i < digits.length; i++) {
+      newOtp[i] = digits[i];
     }
 
-    setIsLoading(true);
-    setHelperText('');
+    setOtp(newOtp);
 
-    // Simulate API call
-    setTimeout(() => {
-      setStep('otp');
-      setCountdown(120); // 2 minutes countdown
-      setIsLoading(false);
-      setHelperText('OTP sent successfully');
-    }, 1500);
+    // Auto-focus the next empty field or the last one
+    const nextIndex = digits.length < 6 ? digits.length : 5;
+    const nextInput = document.querySelector(
+      `input[data-otp-index="${nextIndex}"]`
+    ) as HTMLInputElement;
+
+    nextInput?.focus();
   };
 
   const handleOTPChange = (index: number, value: string) => {
-    if (value.length > 1) return; // Only allow single digit
+    if (value.length > 1) return;
 
     const newOtp = [...otp];
     newOtp[index] = value;
     setOtp(newOtp);
 
-    // Auto-focus next input
     if (value && index < 5) {
-      const nextInput = document.querySelector(`input[data-otp-index="${index + 1}"]`) as HTMLInputElement;
+      const nextInput = document.querySelector(
+        `input[data-otp-index="${index + 1}"]`
+      ) as HTMLInputElement;
       nextInput?.focus();
     }
   };
 
   const handleOTPKeyDown = (index: number, e: React.KeyboardEvent) => {
     if (e.key === 'Backspace' && !otp[index] && index > 0) {
-      const prevInput = document.querySelector(`input[data-otp-index="${index - 1}"]`) as HTMLInputElement;
+      const prevInput = document.querySelector(
+        `input[data-otp-index="${index - 1}"]`
+      ) as HTMLInputElement;
       prevInput?.focus();
     }
   };
 
+  // Rest of your functions remain the same
+  const handleSendOTP = async () => {
+    if (!email || !email.includes('@')) {
+      setError('Please enter a valid email address');
+      return;
+    }
+
+    setError('');
+    setHelperText('');
+
+    try {
+      await sendOtp({ emailAddress: email }).unwrap();
+      setStep('otp');
+      setCountdown(120);
+      setHelperText('OTP sent successfully to your email');
+    } catch (err: any) {
+      setError(err?.data?.message || 'Failed to send OTP. Please try again.');
+    }
+  };
+
   const handleVerifyLogin = async () => {
     const otpString = otp.join('');
     if (otpString.length !== 6) {
-      setHelperText('Please enter complete OTP');
+      setError('Please enter complete 6-digit OTP');
       return;
     }
 
-    setIsLoading(true);
-    setHelperText('');
+    setError('');
 
-    // Simulate API call
-    setTimeout(() => {
-      // Generate name from email for demo
-      const emailParts = email.split('@')[0];
-      const name = emailParts.charAt(0).toUpperCase() + emailParts.slice(1);
+    try {
+      const response = await verifyOtp({
+        emailAddress: email,
+        otp: otpString
+      }).unwrap();
 
-      login({ email, name })
+      const userData = {
+        email: response?.email || email,
+        name: response?.name || email.split('@')[0].charAt(0).toUpperCase() + email.split('@')[0].slice(1),
+      };
 
-      setIsLoading(false);
-      // navigate("/melbourne")
+      login(userData);
+      toast.success("User Logged in successfully")
       onClose();
-    }, 1500);
+    } catch (err: any) {
+      setError(err?.data?.message || 'Invalid OTP. Please try again.');
+      toast.error(err?.data?.message)
+    }
   };
 
   const formatCountdown = (seconds: number) => {
@@ -115,26 +161,21 @@ export function LoginModal({ isOpen, onClose, }: LoginModalProps) {
     <AnimatePresence>
       {isOpen && (
         <>
-          {/* Backdrop */}
           <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
             className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
             onClick={onClose}
           />
 
-          {/* Modal */}
           <motion.div
             initial={{ opacity: 0, scale: 0.95, y: 20 }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.95, y: 20 }}
-            transition={{ duration: 0.3, ease: "easeOut" }}
             className="fixed inset-0 flex items-center justify-center z-50 p-4"
           >
             <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md mx-auto overflow-hidden">
-              {/* Header */}
               <div className="relative px-8 pt-8 pb-4">
                 <button
                   onClick={onClose}
@@ -147,73 +188,49 @@ export function LoginModal({ isOpen, onClose, }: LoginModalProps) {
                   Login
                 </h2>
                 <p className="font-poppins text-sm text-gray-600">
-                  Enter your email Id and verify with OTP sent on it.
+                  Enter your email and verify with OTP
                 </p>
               </div>
 
-              {/* Content */}
               <div className="px-8 pb-8">
                 {step === 'email' ? (
+                  // ... Email step (unchanged)
                   <div className="space-y-6">
-                    {/* Email Input */}
                     <div className="space-y-2">
                       <Label className="font-poppins text-sm font-medium text-gray-700">
-                        Email
+                        Email Address
                       </Label>
                       <Input
                         type="email"
-                        placeholder="Name@example.com"
+                        placeholder="name@example.com"
                         value={email}
                         onChange={(e) => setEmail(e.target.value)}
-                        className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
                         onKeyDown={(e) => e.key === 'Enter' && handleSendOTP()}
+                        className="font-poppins text-base h-12 bg-gray-50 border-0 rounded-xl placeholder:text-gray-400"
                       />
-                      {helperText && (
-                        <p className={`font-poppins text-xs ${helperText.includes('success') ? 'text-green-600' : 'text-red-500'}`}>
-                          {helperText}
-                        </p>
-                      )}
+                      {error && <p className="text-red-500 text-xs">{error}</p>}
+                      {helperText && <p className="text-green-600 text-xs">{helperText}</p>}
                     </div>
 
-                    {/* Send OTP Button */}
                     <Button
                       onClick={handleSendOTP}
-                      disabled={isLoading}
-                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 cursor-pointer text-white font-poppins font-semibold rounded-xl transition-colors"
+                      disabled={isSendingOtp}
+                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white font-poppins font-semibold rounded-xl"
                     >
-                      {isLoading ? (
-                        <div className="flex items-center gap-2">
-                          <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
-                          Sending OTP...
-                        </div>
-                      ) : (
-                        <>
-                          Send OTP
-                          <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                          </svg>
-                        </>
-                      )}
+                      {isSendingOtp ? 'Sending OTP...' : 'Send OTP'}
                     </Button>
                   </div>
                 ) : (
                   <div className="space-y-6">
                     {/* Email Display */}
                     <div className="space-y-2">
-                      <Label className="font-poppins text-sm font-medium text-gray-700">
-                        Email
-                      </Label>
-                      <div className="h-12 bg-gray-50 rounded-xl flex items-center px-4">
-                        <span className="font-poppins text-base text-gray-600">{email}</span>
+                      <Label className="font-poppins text-sm font-medium text-gray-700">Email</Label>
+                      <div className="h-12 bg-gray-50 rounded-xl flex items-center px-4 font-poppins text-base text-gray-600">
+                        {email}
                       </div>
-                      {helperText && (
-                        <p className={`font-poppins text-xs ${helperText.includes('success') ? 'text-green-600' : 'text-red-500'}`}>
-                          {helperText}
-                        </p>
-                      )}
                     </div>
 
-                    {/* OTP Input */}
+                    {/* OTP Inputs with Paste Support */}
                     <div className="space-y-3">
                       <Label className="font-poppins text-sm font-medium text-gray-700">
                         Enter OTP
@@ -224,54 +241,42 @@ export function LoginModal({ isOpen, onClose, }: LoginModalProps) {
                             key={index}
                             type="text"
                             inputMode="numeric"
-                            pattern="[0-9]*"
                             maxLength={1}
                             value={digit}
                             onChange={(e) => handleOTPChange(index, e.target.value.replace(/\D/g, ''))}
                             onKeyDown={(e) => handleOTPKeyDown(index, e)}
+                            onPaste={handlePaste}           // ← Paste support added here
                             data-otp-index={index}
-                            className="w-12 h-12 text-center font-poppins font-semibold text-lg bg-gray-300 border-0 rounded-xl focus:bg-white focus:ring-2 focus:ring-primary focus:outline-none transition-colors"
+                            className="w-12 h-12 text-center font-poppins font-semibold text-lg bg-gray-100 border-0 rounded-xl focus:bg-white focus:ring-2 focus:ring-gray-800 focus:outline-none transition-all"
                           />
                         ))}
                       </div>
 
-                      {/* Countdown */}
                       {countdown > 0 && (
-                        <p className="font-poppins text-xs text-gray-500 text-center">
-                          {formatCountdown(countdown)}
+                        <p className="text-center text-xs text-gray-500">
+                          Resend OTP in {formatCountdown(countdown)}
                         </p>
                       )}
                     </div>
 
-                    {/* Verify Button */}
+                    {error && <p className="text-red-500 text-xs text-center">{error}</p>}
+
                     <Button
                       onClick={handleVerifyLogin}
-                      disabled={isLoading || otp.join('').length !== 6}
-                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 cursor-pointer text-white font-poppins font-semibold rounded-xl transition-colors disabled:opacity-50"
+                      disabled={isVerifying || otp.join('').length !== 6}
+                      className="w-full h-12 bg-gray-800 hover:bg-gray-900 text-white font-poppins font-semibold rounded-xl disabled:opacity-50"
                     >
-                      {isLoading ? (
-                        <div className="flex items-center gap-2">
-                          <div className="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin" />
-                          Verifying...
-                        </div>
-                      ) : (
-                        <>
-                          Verify and Login
-                          <svg className="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                          </svg>
-                        </>
-                      )}
+                      {isVerifying ? 'Verifying...' : 'Verify & Login'}
                     </Button>
 
-                    {/* Resend OTP */}
                     {countdown === 0 && (
                       <button
                         onClick={() => {
                           setStep('email');
                           setOtp(['', '', '', '', '', '']);
+                          setError('');
                         }}
-                        className="w-full font-poppins text-sm text-gray-600 hover:text-gray-800 transition-colors"
+                        className="w-full text-sm text-gray-600 hover:text-gray-800 font-poppins"
                       >
                         Didn't receive OTP? Send again
                       </button>
diff --git a/src/main.tsx b/src/main.tsx
index 241b0b3..9cf6d51 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,14 @@
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 import App from "./App";
-import "./index.css";
 import { Provider } from "react-redux";
 import { store } from "./Redux/Store";
+import { Toaster } from "sonner";
 
 createRoot(document.getElementById("root")!).render(
   <Provider store={store}>
     <BrowserRouter>
+      <Toaster position="top-right" richColors />
       <App />
     </BrowserRouter>
   </Provider>