diff --git a/frontend/package.json b/frontend/package.json
index f24b5ac..6b1a3b1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@hookform/resolvers": "^4.1.1",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-label": "^2.1.2",
@@ -18,17 +19,22 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tailwindcss/vite": "^4.0.6",
+    "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^8.5.2",
     "lucide-react": "^0.475.0",
+    "next-themes": "^0.4.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.2",
     "react-router-dom": "^7.1.5",
+    "sonner": "^2.0.1",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.19.0",
diff --git a/frontend/src/api/axios.ts b/frontend/src/api/axios.ts
new file mode 100644
index 0000000..5312064
--- /dev/null
+++ b/frontend/src/api/axios.ts
@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+export const axiosInstance = axios.create({
+    baseURL: 'http://localhost:3000',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    withCredentials: true,
+});
\ No newline at end of file
diff --git a/frontend/src/components/password-input.tsx b/frontend/src/components/password-input.tsx
new file mode 100644
index 0000000..7fec070
--- /dev/null
+++ b/frontend/src/components/password-input.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { Eye, EyeOff } from 'lucide-react';
+import { cn } from '@/lib/utils'
+import { Button } from './ui/button'
+
+type PasswordInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+>
+
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ className, disabled, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React.useState(false)
+    return (
+      <div className={cn('relative rounded-md', className)}>
+        <input
+          type={showPassword ? 'text' : 'password'}
+          className='flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
+          ref={ref}
+          disabled={disabled}
+          {...props}
+        />
+        <Button
+          type='button'
+          size='icon'
+          variant='ghost'
+          disabled={disabled}
+          className='absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2 rounded-md text-muted-foreground'
+          onClick={() => setShowPassword((prev) => !prev)}
+        >
+          {showPassword ? <Eye size={18} /> : <EyeOff size={18} />}
+        </Button>
+      </div>
+    )
+  }
+)
+PasswordInput.displayName = 'PasswordInput'
+
+export { PasswordInput }
diff --git a/frontend/src/components/ui/form.tsx b/frontend/src/components/ui/form.tsx
new file mode 100644
index 0000000..2bca54c
--- /dev/null
+++ b/frontend/src/components/ui/form.tsx
@@ -0,0 +1,175 @@
+import * as React from 'react'
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from 'react-hook-form'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>')
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = 'FormItem'
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = 'FormLabel'
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = 'FormControl'
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn('text-[0.8rem] text-muted-foreground', className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = 'FormDescription'
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn('text-[0.8rem] font-medium text-destructive', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = 'FormMessage'
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..8bfe1d1
--- /dev/null
+++ b/frontend/src/components/ui/sonner.tsx
@@ -0,0 +1,27 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/frontend/src/components/user/auth/AuthLeftPanel.tsx b/frontend/src/components/user/auth/AuthLeftPanel.tsx
deleted file mode 100644
index c2de0c6..0000000
--- a/frontend/src/components/user/auth/AuthLeftPanel.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { FC } from 'react'
-import Image from "../../../assets/AuthImage.jpg"
-
-
-const AuthLeftPanel: FC = () => {
-    return (
-        <div className="hidden lg:flex lg:w-1/2 p-10 ">
-            <img src={Image} alt="" className='rounded-xl shadow' />
-        </div>
-    )
-}
-
-export default AuthLeftPanel
diff --git a/frontend/src/components/user/auth/components/FormLayout.tsx b/frontend/src/components/user/auth/components/FormLayout.tsx
new file mode 100644
index 0000000..fc2c3d6
--- /dev/null
+++ b/frontend/src/components/user/auth/components/FormLayout.tsx
@@ -0,0 +1,66 @@
+import { Separator } from "@/components/ui/separator"
+import { UserAuthForm } from "./user-auth-form"
+import Button from "@/components/ui/button"
+import { Github } from "lucide-react"
+import { useState } from "react"
+
+
+export const FormLayout = () => {
+
+    const [authState, setAuthState] = useState<'login' | 'register'>('login');
+
+    return (
+        <div className='lg:p-8'>
+            <div className='mx-auto flex w-full flex-col justify-center space-y-2 sm:w-[350px]'>
+                <div className='flex flex-col space-y-2 text-left'>
+                    <h1 className='text-2xl font-semibold tracking-tight'>{authState === 'login' ? "Welcome Back!" : "Create an Account"}</h1>
+                    <p className='text-sm text-muted-foreground'>
+                        {authState === 'login' ? "Please enter your email and password to log in." : "Please fill in the details to create your account."}
+                    </p>
+                </div>
+                <UserAuthForm
+                    authState={authState}
+                    onStateChange={setAuthState}
+                />
+                <div className="relative">
+                    <div className="absolute inset-0 flex items-center">
+                        <Separator />
+                    </div>
+                    <div className="relative flex justify-center text-xs uppercase">
+                        <span className="bg-background px-2 text-muted-foreground">
+                            Or continue with
+                        </span>
+                    </div>
+                </div>
+
+                <div className="flex gap-2 ">
+                    <Button variant="outline" className="w-full">
+                        <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
+                            <path
+                                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                                fill="#4285F4"
+                            />
+                            <path
+                                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                                fill="#34A853"
+                            />
+                            <path
+                                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                                fill="#FBBC05"
+                            />
+                            <path
+                                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                                fill="#EA4335"
+                            />
+                        </svg>
+                        Google
+                    </Button>
+                    <Button variant="outline" className="w-full">
+                        <Github className="mr-2 h-4 w-4" />
+                        Github
+                    </Button>
+                </div>
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/components/user/auth/components/SideLayout.tsx b/frontend/src/components/user/auth/components/SideLayout.tsx
new file mode 100644
index 0000000..3dfc037
--- /dev/null
+++ b/frontend/src/components/user/auth/components/SideLayout.tsx
@@ -0,0 +1,19 @@
+import { useTheme } from "../../common/theme-provider"
+import LightLogo from '@/assets/Logo Light.svg'
+import DarkLogo from '@/assets/Logo Dark.svg'
+
+export const SideLayout = () => {
+    const { theme } = useTheme()
+    return (
+        <div className='relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex'>
+            <div className='absolute inset-0 bg-zinc-900' />
+            <div className='relative z-20 flex items-center text-lg font-medium'>
+                <img
+                    src={theme == 'light' ? LightLogo : DarkLogo}
+                    className='mr-2 h-20 w-20'
+                    alt='Inker'
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/frontend/src/components/user/auth/components/user-auth-form.tsx b/frontend/src/components/user/auth/components/user-auth-form.tsx
new file mode 100644
index 0000000..d5c2b7f
--- /dev/null
+++ b/frontend/src/components/user/auth/components/user-auth-form.tsx
@@ -0,0 +1,166 @@
+"use client"
+
+import { type FC, useState } from "react"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+import { PasswordInput } from "@/components/password-input"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/cn"
+import { Loader2 } from "lucide-react"
+import { toast } from "sonner"
+import { AuthService } from "@/services/authServices"
+import { useNavigate } from "react-router-dom"
+
+interface UserAuthFormProps {
+    authState: "login" | "register"
+    onStateChange: (state: "login" | "register") => void
+}
+
+const loginSchema = z.object({
+    email: z.string().min(1, { message: "Please enter your email" }).email({ message: "Invalid email address" }),
+    password: z
+        .string()
+        .min(1, {
+            message: "Please enter your password",
+        })
+        .min(7, {
+            message: "Password must be at least 7 characters long",
+        }),
+})
+
+const registerSchema = z
+    .object({
+        name: z.string().min(1, { message: "Please enter your name" }),
+        email: z.string().min(1, { message: "Please enter your email" }).email({ message: "Invalid email address" }),
+        password: z
+            .string()
+            .min(1, {
+                message: "Please enter your password",
+            })
+            .min(7, {
+                message: "Password must be at least 7 characters long",
+            }),
+        confirmPassword: z.string(),
+    })
+    .refine((data) => data.password === data.confirmPassword, {
+        message: "Passwords don't match.",
+        path: ["confirmPassword"],
+    })
+
+export const UserAuthForm: FC<UserAuthFormProps> = ({ authState, onStateChange }) => {
+    const [isLoading, setIsLoading] = useState(false)
+    const navigate = useNavigate()
+    const formSchema = authState === "login" ? loginSchema : registerSchema
+    const form = useForm<z.infer<typeof formSchema>>({
+        resolver: zodResolver(formSchema),
+    })
+
+    async function onSubmit(data: z.infer<typeof formSchema>) {
+        setIsLoading(true)
+
+        try {
+            // Simulate API call
+            await new Promise((resolve) => setTimeout(resolve, 2000))
+            if (authState == 'login') {
+                await AuthService.loginService(data)
+            } else {
+                await AuthService.registerService(data as { email: string; password: string; name: string; confirmPassword: string })
+            }
+            toast.success(authState === "login" ? "Logged in successfully" : "Account created successfully")
+            navigate('/home')
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (error) {
+            toast.error("An error occurred. Please try again.")
+        } finally {
+            setIsLoading(false)
+        }
+    }
+
+    return (
+        <div className={cn("grid gap-6")}>
+            <Form {...form}>
+                <form onSubmit={form.handleSubmit(onSubmit)}>
+                    <div className="grid gap-2">
+                        {authState === "register" && (
+                            <FormField
+                                control={form.control}
+                                name="name"
+                                render={({ field }) => (
+                                    <FormItem className="space-y-1">
+                                        <FormControl>
+                                            <Input placeholder="Name" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        )}
+                        <FormField
+                            control={form.control}
+                            name="email"
+                            render={({ field }) => (
+                                <FormItem className="space-y-1">
+                                    <FormControl>
+                                        <Input placeholder="Email" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <FormField
+                            control={form.control}
+                            name="password"
+                            render={({ field }) => (
+                                <FormItem className="space-y-1">
+                                    <FormControl>
+                                        <PasswordInput placeholder="Password" {...field} />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        {authState === "register" && (
+                            <FormField
+                                control={form.control}
+                                name="confirmPassword"
+                                render={({ field }) => (
+                                    <FormItem className="space-y-1">
+                                        <FormControl>
+                                            <PasswordInput placeholder="Confirm Password" {...field} />
+                                        </FormControl>
+                                        <FormMessage />
+                                    </FormItem>
+                                )}
+                            />
+                        )}
+                        <Button className="mt-2" disabled={isLoading} type="submit">
+                            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                            {authState === "login" ? "Log In" : "Create Account"}
+                        </Button>
+                    </div>
+                </form>
+            </Form>
+            <div className="text-center">
+                {authState === "login" ? (
+                    <p>
+                        Don't have an account?{" "}
+                        <Button variant="link" onClick={() => onStateChange("register")}>
+                            Register
+                        </Button>
+                    </p>
+                ) : (
+                    <p>
+                        Already have an account?{" "}
+                        <Button variant="link" onClick={() => onStateChange("login")}>
+                            Log In
+                        </Button>
+                    </p>
+                )}
+            </div>
+        </div>
+    )
+}
+
diff --git a/frontend/src/components/user/auth/index.tsx b/frontend/src/components/user/auth/index.tsx
new file mode 100644
index 0000000..f59f3fa
--- /dev/null
+++ b/frontend/src/components/user/auth/index.tsx
@@ -0,0 +1,12 @@
+import { SideLayout } from './components/SideLayout'
+import { FormLayout } from './components/FormLayout'
+
+export default function AuthForm() {
+
+  return (
+    <>
+      <SideLayout />
+      <FormLayout />
+    </>
+  )
+}
diff --git a/frontend/src/components/user/common/ThemeToggle.tsx b/frontend/src/components/user/common/ThemeToggle.tsx
index 0e4b012..69f1bcd 100644
--- a/frontend/src/components/user/common/ThemeToggle.tsx
+++ b/frontend/src/components/user/common/ThemeToggle.tsx
@@ -2,13 +2,13 @@ import { useState } from 'react'
 import { useTheme } from './theme-provider'
 
 const ThemeToggle = () => {
-  const { setTheme } = useTheme()
+    const { setTheme } = useTheme()
 
     const [theme, setLocalTheme] = useState(localStorage.getItem('vite-ui-theme'))
 
     const toggleTheme = () => {
-        setTheme(theme  === "dark" ? 'light' : 'dark')
-        setLocalTheme(theme  === "dark" ? 'light' : 'dark')
+        setTheme(theme === "dark" ? 'light' : 'dark')
+        setLocalTheme(theme === "dark" ? 'light' : 'dark')
 
     }
 
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index bef5202..5fe9c37 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,9 +2,11 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { Toaster } from 'sonner'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <App />
+    <Toaster richColors />
   </StrictMode>,
 )
diff --git a/frontend/src/pages/auth/Auth.tsx b/frontend/src/pages/auth/Auth.tsx
index 3d44646..9633dba 100644
--- a/frontend/src/pages/auth/Auth.tsx
+++ b/frontend/src/pages/auth/Auth.tsx
@@ -1,14 +1,10 @@
-import AuthLeftPanel from "@/components/user/auth/AuthLeftPanel";
-import Login from "@/components/user/auth/Login";
-import { useState } from "react";
+import UserAuth from "@/components/user/auth";
 
 export default function LoginPage() {
-  const [signin, setSignin] = useState<"register" | "login">("login");
-  
+
   return (
-    <div className="min-h-screen flex">
-      <AuthLeftPanel/>
-      <Login signin={signin} setSignin={setSignin}/>
+    <div className='container relative grid h-svh flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0'>
+      <UserAuth />
     </div>
   );
 }
diff --git a/frontend/src/services/authServices.ts b/frontend/src/services/authServices.ts
index e69de29..26a5b3c 100644
--- a/frontend/src/services/authServices.ts
+++ b/frontend/src/services/authServices.ts
@@ -0,0 +1,18 @@
+import { axiosInstance } from "@/api/axios"
+
+export const AuthService = {
+    loginService: async (data: { email: string, password: string }) => {
+        try {
+            return await axiosInstance.post('/login', data)
+        } catch (error) {
+            console.log(error)
+        }
+    },
+    registerService: async (data: { email: string; password: string; name: string; confirmPassword: string; }) => {
+        try {
+            return await axiosInstance.post('/register', data)
+        } catch (error) {
+            console.log(error)
+        }
+    }
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 00ff062..d07a593 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,7 @@
     "frontend": {
       "version": "1.0.0",
       "dependencies": {
+        "@hookform/resolvers": "^4.1.1",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
         "@radix-ui/react-label": "^2.1.2",
@@ -59,17 +60,22 @@
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@tailwindcss/vite": "^4.0.6",
+        "axios": "^1.7.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "embla-carousel-autoplay": "^8.5.2",
         "embla-carousel-react": "^8.5.2",
         "lucide-react": "^0.475.0",
+        "next-themes": "^0.4.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-hook-form": "^7.54.2",
         "react-router-dom": "^7.1.5",
+        "sonner": "^2.0.1",
         "tailwind-merge": "^3.0.1",
         "tailwindcss": "^4.0.6",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "zod": "^3.24.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.19.0",
@@ -1042,6 +1048,17 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-4.1.1.tgz",
+      "integrity": "sha512-S9YN1RgNWG+klUz5uQaV6rjE4pr6Py2tamj7ekshzLcMyg+/Pal1KZAYgGszV0+doiy41dUiQgXL3uRS9stndQ==",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001698"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1475,7 +1492,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.2.tgz",
       "integrity": "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==",
-      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-primitive": "2.0.2"
       },
@@ -1695,7 +1711,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
       "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
-      "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.1"
       },
@@ -3064,6 +3079,21 @@
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/backend": {
       "resolved": "backend",
       "link": true
@@ -3259,7 +3289,6 @@
       "version": "1.0.30001700",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001700.tgz",
       "integrity": "sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3381,6 +3410,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3510,6 +3550,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -3694,6 +3742,20 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
@@ -4278,6 +4340,39 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -4461,6 +4556,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -5346,6 +5455,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.4.tgz",
+      "integrity": "sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -5679,6 +5797,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pstree.remy": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
@@ -5776,6 +5899,21 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.54.2",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
+      "integrity": "sha512-eHpAUgUjWbZocoQYUHposymRb4ZP6d0uwUnooL2uOybA9/3tPUvoAKqEWK1WaSiTxxOfTpffNZP7QwlnM3/gEg==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -6254,6 +6392,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/sonner": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.1.tgz",
+      "integrity": "sha512-FRBphaehZ5tLdLcQ8g2WOIRE+Y7BCfWi5Zyd8bCvBjiW8TxxAyoWZIxS661Yz6TGPqFQ4VLzOF89WEYhfynSFQ==",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -6838,6 +6985,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "3.24.2",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz",
+      "integrity": "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "shared": {
       "version": "1.0.0",
       "license": "ISC"