diff --git a/components/auth/components-auth-login-form.tsx b/components/auth/components-auth-login-form.tsx
index ac1f086..77cf895 100644
--- a/components/auth/components-auth-login-form.tsx
+++ b/components/auth/components-auth-login-form.tsx
@@ -14,8 +14,8 @@ const ComponentsAuthLoginForm = () => {
 
     const submitForm = async (e: React.FormEvent) => {
         e.preventDefault()
-        setLoading(true)
 
+        setLoading(true)
         try {
             const res = await axios.post(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/login`, {
                 email,
@@ -32,7 +32,7 @@ const ComponentsAuthLoginForm = () => {
         } finally {
             setLoading(false)
         }
-    };
+    }
 
     return (
         <form className="space-y-5 dark:text-white" onSubmit={submitForm}>
diff --git a/components/auth/components-auth-register-form.tsx b/components/auth/components-auth-register-form.tsx
index 0a47cd5..6db417a 100644
--- a/components/auth/components-auth-register-form.tsx
+++ b/components/auth/components-auth-register-form.tsx
@@ -2,15 +2,38 @@
 import IconLockDots from '@/components/icon/icon-lock-dots';
 import IconMail from '@/components/icon/icon-mail';
 import IconUser from '@/components/icon/icon-user';
+import axios from 'axios';
 import { useRouter } from 'next/navigation';
+import { useState } from "react";
 import React from 'react';
+import toast from 'react-hot-toast';
 
 const ComponentsAuthRegisterForm = () => {
-    const router = useRouter();
+    const [email, setEmail] = useState("")
+    const [password, setPassword] = useState("")
+    const [loading, setLoading] = useState(false)
+    const router = useRouter()
 
-    const submitForm = (e: any) => {
-        e.preventDefault();
-        router.push('/');
+    const submitForm = async(e: any) => {
+        e.preventDefault()
+
+        setLoading(true)
+        try {
+            const res = await axios.post(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/register`, {
+                email,
+                password,
+            })
+
+            localStorage.setItem("token", res.data.token)
+
+            toast.success("Register successful!")
+            router.push("/")
+        } catch (err: any) {
+            console.error("Register error:", err)
+            toast.error(err.response?.data?.error || "Something went wrong")
+        } finally {
+            setLoading(false)
+        }
     };
     return (
         <form className="space-y-5 dark:text-white" onSubmit={submitForm}>
@@ -26,7 +49,7 @@ const ComponentsAuthRegisterForm = () => {
             <div>
                 <label htmlFor="Email">Email</label>
                 <div className="relative text-white-dark">
-                    <input id="Email" type="email" placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
+                    <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
                     <span className="absolute start-4 top-1/2 -translate-y-1/2">
                         <IconMail fill={true} />
                     </span>
@@ -35,14 +58,14 @@ const ComponentsAuthRegisterForm = () => {
             <div>
                 <label htmlFor="Password">Password</label>
                 <div className="relative text-white-dark">
-                    <input id="Password" type="password" placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
+                    <input value={password} onChange={(e) => setPassword(e.target.value)} type="password" placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
                     <span className="absolute start-4 top-1/2 -translate-y-1/2">
                         <IconLockDots fill={true} />
                     </span>
                 </div>
             </div>
-            <button type="submit" className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
-                Sign Up
+            <button type="submit" disabled={loading} className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
+            {loading ? "Creating account..." : "Register"}
             </button>
         </form>
     );