diff --git a/admin/src/components/Header.js b/admin/src/components/Header.js
index 21ad1c2..a11f2e1 100644
--- a/admin/src/components/Header.js
+++ b/admin/src/components/Header.js
@@ -22,6 +22,7 @@ const Header = () => {
         updateUserData({});
         localStorage.removeItem("admin-token");
         navigate("/");
+        window.location.reload();
       }
     });
   };
@@ -38,10 +39,15 @@ const Header = () => {
         paddingRight: "20px",
       }}
     >
-      <a style={{
-        color: "white",
-        textDecoration: "none",
-      }} href="/movies-view"><span>CINEMAGIC</span></a>
+      <a
+        style={{
+          color: "white",
+          textDecoration: "none",
+        }}
+        href="/movies-view"
+      >
+        <span>CINEMAGIC</span>
+      </a>
       <button
         onClick={handleLogout}
         style={{
diff --git a/admin/src/pages/Login.js b/admin/src/pages/Login.js
index ccdd7ba..566905e 100644
--- a/admin/src/pages/Login.js
+++ b/admin/src/pages/Login.js
@@ -5,15 +5,19 @@ import Swal from "sweetalert2";
 
 import { UserContext } from "./auth/UserContext";
 
+import { TailSpin } from "react-loader-spinner";
+import { useUserContext } from "./auth/UserContext";
+
 const Login = () => {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const navigate = useNavigate();
   const { updateUserData } = useContext(UserContext); // Use the context to set user data
-
+  const { isLoading, setLoading } = useUserContext();
   const handleSubmit = async (event) => {
     event.preventDefault();
     try {
+      setLoading(true);
       // Authenticate user
       const loginResponse = await axios.post(
         `${process.env.REACT_APP_API_PATH}/auth/signin`,
@@ -32,7 +36,7 @@ const Login = () => {
       if (userData && userData.type === "ADMIN") {
         localStorage.setItem("admin-token", token); // Store the token
         updateUserData(userData); // Update user data in context
-
+        setLoading(false);
         window.location.reload(); // Navigate to the admin dashboard
       } else {
         navigate("/");
@@ -44,6 +48,7 @@ const Login = () => {
         });
       }
     } catch (error) {
+      setLoading(false);
       console.error("Login Error:", error);
       Swal.fire({
         title: "Login Failed",
diff --git a/admin/src/pages/Signup.js b/admin/src/pages/Signup.js
index 0459dc0..312b5cc 100644
--- a/admin/src/pages/Signup.js
+++ b/admin/src/pages/Signup.js
@@ -1,45 +1,110 @@
-import React, { useState } from 'react';
-import '../css/Login.css'; // Reusing the same CSS file
-import { Link } from 'react-router-dom';
+import React, { useState } from "react";
+import Swal from "sweetalert2";
+import axios from "axios";
+import "../css/Login.css";
+import { useNavigate, Link } from "react-router-dom";
+
+import { TailSpin } from "react-loader-spinner";
+import { useUserContext } from "./auth/UserContext";
 
 const RegisterPage = () => {
-    const [firstName, setFirstName] = useState('');
-    const [lastName, setLastName] = useState('');
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const navigate = useNavigate(); // useNavigate hook for navigation
+  const { isLoading, setLoading } = useUserContext();
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
 
-    const handleSubmit = (event) => {
-        event.preventDefault();
-        // Implement your registration logic here
-    };
+    try {
+      setLoading(true);
+      const response = await axios.post(
+        `${process.env.REACT_APP_API_PATH}/auth/admin/signup`,
+        {
+          firstName,
+          lastName,
+          password,
+          email,
+        }
+      );
+      setLoading(false);
+      Swal.fire({
+        icon: "success",
+        title: "Registration Successful",
+        text: "Your account has been created successfully!",
+      }).then(() => {
+        navigate("/"); // Navigate to login page
+      });
+    } catch (error) {
+      setLoading(false);
+      Swal.fire({
+        icon: "error",
+        title: "Oops...",
+        text: error.response?.data?.message || "Something went wrong!",
+      });
+    }
+  };
 
-    return (
-        <div className="login-container">
-            <form onSubmit={handleSubmit} className="login-form">
-                <h1>Register</h1>
-                <div className="form-group">
-                    <label className='label-name'>First Name:</label><br />
-                    <input type="text" value={firstName} onChange={e => setFirstName(e.target.value)} />
-                </div>
-                <div className="form-group">
-                    <label className='label-name'>Last Name:</label><br />
-                    <input type="text" value={lastName} onChange={e => setLastName(e.target.value)} />
-                </div>
-                <div className="form-group">
-                    <label className='label-name'>Email:</label><br />
-                    <input type="email" value={email} onChange={e => setEmail(e.target.value)} />
-                </div>
-                <div className="form-group">
-                    <label className='label-name'>Password:</label><br />
-                    <input type="password" value={password} onChange={e => setPassword(e.target.value)} />
-                </div>
-                <div className='login-btn-div'>
-                    <button type="submit" className="login-button">Register</button>
-                </div>
-                <Link to="/login"><p className="reg-link">Already have an account? Login</p></Link>
-            </form>
+  return (
+    <div className={`login-wrapper ${isLoading ? "blurred" : ""}`}>
+      {isLoading && (
+        <div className="loader-container">
+          <TailSpin color="#00BFFF" height={100} width={100} />
         </div>
-    );
+      )}
+      <div className="login-container">
+        <form onSubmit={handleSubmit} className="login-form">
+          <h1>Register</h1>
+          <div className="form-group">
+            <label className="label-name">First Name:</label>
+            <br />
+            <input
+              type="text"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+            />
+          </div>
+          <div className="form-group">
+            <label className="label-name">Last Name:</label>
+            <br />
+            <input
+              type="text"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+            />
+          </div>
+          <div className="form-group">
+            <label className="label-name">Email:</label>
+            <br />
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <div className="form-group">
+            <label className="label-name">Password:</label>
+            <br />
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+          <div className="login-btn-div">
+            <button type="submit" className="login-button">
+              Register
+            </button>
+          </div>
+          <Link to="/login">
+            <p className="reg-link">Already have an account? Login</p>
+          </Link>
+        </form>
+      </div>
+    </div>
+  );
 };
 
 export default RegisterPage;