diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d823c23..0eb26a9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -83,7 +83,7 @@ function App() {
           path="/clubAdmin/*"
           element={<ClubAdmin setShowNavbar={setShowNavbar} />}
         />
-        <Route path="/registerClub" element={<ClubRegistration />} />
+        {/* <Route path="/registerClub" element={<ClubRegistration />} /> */}
         <Route path="/clubboard" element={<ClubsPage />} />
         <Route path="/about" element={<About />} />
         <Route path="/quiz" element={<QuizPage />} />
diff --git a/frontend/src/appComponents/ClubLogin.tsx b/frontend/src/appComponents/ClubLogin.tsx
index 8c1f56b..7ec5a6f 100644
--- a/frontend/src/appComponents/ClubLogin.tsx
+++ b/frontend/src/appComponents/ClubLogin.tsx
@@ -5,6 +5,7 @@ import password_icon from "../assets/password_icon.png";
 import { useAuth } from "../context/AuthContext";
 import { Eye, EyeOff } from "lucide-react"
 import ClipLoader from "react-spinners/ClipLoader";
+import ClubRegistration from "./ClubRegistration";
 
 const ClubLogin: React.FC<any> = ({ onClose, handleClosePopup }) => {
   const [email, setEmail] = useState("");
@@ -15,6 +16,8 @@ const ClubLogin: React.FC<any> = ({ onClose, handleClosePopup }) => {
   const [hidden, setHidden] = useState(true);
   const navigate = useNavigate();
   const { login } = useAuth();
+  const [showRegistrationPage, setShowRegistrationPage] = useState(false);
+
 
   const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
@@ -48,8 +51,16 @@ const ClubLogin: React.FC<any> = ({ onClose, handleClosePopup }) => {
     }
   };
 
+  const handleOpenRegistration = () => {
+    setShowRegistrationPage(true);
+  };
+
+  const handleCloseRegistration = () => {
+    setShowRegistrationPage(false);
+  };
+
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 rounded-lg">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-100 rounded-lg">
       <div className="bg-white rounded-lg px-4 relative border-2 py-8 md:w-1/2 flex flex-col justify-center gap-4 items-center ">
         <p
           className="cursor-pointer absolute p-2 rounded-md top-0 right-2 text-red-600 font-semibold"
@@ -57,7 +68,15 @@ const ClubLogin: React.FC<any> = ({ onClose, handleClosePopup }) => {
             onClose(false);
           }}
         >
-          X
+          <img
+            width="30"
+            height="30"
+            className="m-2 self-end cursor-pointer"
+            onClick={() => navigate("/")}
+            src="https://img.icons8.com/pastel-glyph/128/cancel--v1.png"
+            alt="cancel--v1"
+          />
+
         </p>
         <p className="text-2xl font-bold flex justify-center">
           {" "}
@@ -107,13 +126,13 @@ const ClubLogin: React.FC<any> = ({ onClose, handleClosePopup }) => {
           </button>
           <button
             className="text-black border border-black rounded text-lg font-semibold p-2 w-1/2"
-            onClick={() => {
-              onClose(false);
-              navigate("/registerClub");
-            }}
+            onClick={handleOpenRegistration}
           >
             Register
           </button>
+          {showRegistrationPage && (
+            <ClubRegistration onClose={handleCloseRegistration} />
+          )}
         </div>
       </div>
     </div>
diff --git a/frontend/src/appComponents/ClubRegistration.tsx b/frontend/src/appComponents/ClubRegistration.tsx
index 000eef3..6dce074 100644
--- a/frontend/src/appComponents/ClubRegistration.tsx
+++ b/frontend/src/appComponents/ClubRegistration.tsx
@@ -5,7 +5,9 @@ import type { FieldApi } from "@tanstack/react-form";
 import { useNavigate } from "react-router-dom";
 import confetti from "canvas-confetti";
 import { autoGrow } from "@/lib/utils";
-import {Eye, EyeOff} from "lucide-react"
+import { Eye, EyeOff } from "lucide-react"
+import ClubLogin from "./ClubLogin";
+
 // Define a TypeScript interface for the club
 interface Club {
   ClubName: string;
@@ -38,10 +40,11 @@ const addClub = async (newClub: Club): Promise<Club> => {
   return response.data;
 };
 
-const ClubRegistration: React.FC = () => {
+const ClubRegistration: React.FC<any> = ({ onClose, handleClosePopup }) => {
   const navigate = useNavigate();
   const [displayModal, setDisplayModal] = useState(false);
   const [hidden, setHidden] = useState(true);
+  const [showLoginPage, setShowLoginPage] = useState(false);
 
   const form = useForm({
     defaultValues: {
@@ -60,7 +63,8 @@ const ClubRegistration: React.FC = () => {
         console.log(response)
         setDisplayModal(true);
         handleClick();
-      } catch (e:any) {
+        onClose(false);
+      } catch (e: any) {
         alert("Error: " + e.message);
         return;
       }
@@ -97,18 +101,26 @@ const ClubRegistration: React.FC = () => {
   };
 
   const togglePasswordVisibility = () => {
-    setHidden( !hidden );
+    setHidden(!hidden);
+  };
+
+  const handleOpenLogin = () => {
+    setShowLoginPage(true);
+  };
+
+  const handleCloseLogin = () => {
+    setShowLoginPage(false);
   };
 
   return (
-    <div className="absolute h-full w-full flex items-center justify-center">
-      <div className="absolute bg-black opacity-40 z-[11] w-full h-full"></div>
-      <div className="bg-white rounded-3xl relative flex flex-col gap-4 z-20 items-center justify-center px-8 py-4 ">
-        {/* <img src="" alt="close" /> */}
-        <div className="flex items-center justify-end w-full ">
-          <h1 className="text-2xl font-bold underline grow text-center ml-4">
-            Club Registration Form
-          </h1>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-100">
+      <div className="bg-white rounded-lg px-4 relative border-2 py-8 md:w-1/2 flex flex-col gap-4 items-center">
+        <p
+          className="cursor-pointer absolute p-2 rounded-md top-2 right-2 text-red-600 font-semibold"
+          onClick={() => {
+            onClose(false);
+          }}
+        >
           <img
             width="30"
             height="30"
@@ -117,145 +129,146 @@ const ClubRegistration: React.FC = () => {
             src="https://img.icons8.com/pastel-glyph/128/cancel--v1.png"
             alt="cancel--v1"
           />
-        </div>
+        </p>
+        <p className="text-2xl font-bold flex justify-center">
+          {" "}
+          Club Registration Form
+        </p>
         <form
-          className="flex flex-col gap-4 p-4"
+          className="flex flex-col gap-4 p-4 w-full"
           onSubmit={(e) => {
             e.preventDefault();
             e.stopPropagation();
             form.handleSubmit();
           }}
         >
-          <div className="grid grid-cols-1 gap-2">
-            {/* A type-safe field component*/}
-            <div className="">
-              <form.Field
-                name="ClubName"
-                validators={{
-                  onChange: ({ value }) =>
-                    !value ? "Club  Name is required" : undefined,
-                  onChangeAsyncDebounceMs: 500,
-                  onChangeAsync: async ({ value }) => {
-                    await new Promise((resolve) => setTimeout(resolve, 1000));
-                    return (
-                      value.includes("error") &&
-                      'No "error" allowed in ClubName'
-                    );
-                  },
-                }}
-                children={(field) => {
-                  // Avoid hasty abstractions. Render props are great!
+          {/* A type-safe field component*/}
+          <div className="h-full w-full border-0 outline-none text-1xl border-black border-2 w-full">
+            <form.Field
+              name="ClubName"
+              validators={{
+                onChange: ({ value }) =>
+                  !value ? "Club  Name is required" : undefined,
+                onChangeAsyncDebounceMs: 500,
+                onChangeAsync: async ({ value }) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1000));
                   return (
-                    <>
-                      {/* <label htmlFor={field.name}>ClubName:</label> */}
-                      <input
-                        placeholder="Club Name"
-                        className="p-2 glass shadow-2xl border border-gray-300  w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
-                        id={field.name}
-                        name={field.name}
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                      />
-                      <div className="text-red-600 text-sm ml-2">
-                        <FieldInfo field={field} />
-                      </div>
-                    </>
+                    value.includes("error") &&
+                    'No "error" allowed in ClubName'
                   );
-                }}
-              />
-            </div>
+                },
+              }}
+              children={(field) => {
+                // Avoid hasty abstractions. Render props are great!
+                return (
+                  <>
+                    {/* <label htmlFor={field.name}>ClubName:</label> */}
+                    <input
+                      placeholder="Club Name"
+                      className="p-2 glass shadow-2xl border border-gray-300 w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5] "
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                    />
+                    <div className="text-red-600 text-sm ml-2">
+                      <FieldInfo field={field} />
+                    </div>
+                  </>
+                );
+              }}
+            />
+          </div>
 
-            <div>
-              <form.Field
-                name="Description"
-                validators={{
-                  onChange: ({ value }) =>
-                    !value ? "A Description is required" : undefined,
-                  onChangeAsyncDebounceMs: 500,
-                  onChangeAsync: async ({ value }) => {
-                    await new Promise((resolve) => setTimeout(resolve, 1000));
-                    return (
-                      value?.includes("error") &&
-                      'No "error" allowed in first name'
-                    );
-                  },
-                }}
-                children={(field) => {
-                  const descriptionRef = useRef(null);
-                  const handleInput = () => {
-                    if (descriptionRef && typeof descriptionRef !== "function") {
-                      autoGrow(descriptionRef);
-                    }
-                  };
-                  // Avoid hasty abstractions. Render props are great!
+          <div className="h-full w-full border-0 outline-none text-1xl border-black border-2 w-full">
+            <form.Field
+              name="Description"
+              validators={{
+                onChange: ({ value }) =>
+                  !value ? "A Description is required" : undefined,
+                onChangeAsyncDebounceMs: 500,
+                onChangeAsync: async ({ value }) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1000));
                   return (
-                    <>
-                      {/* <label htmlFor={field.name}>Description:</label> */}
-                      <textarea
-                        placeholder="Description"
-                        className="p-2 glass resize-none max-h-24 h-12 shadow-2xl border border-gray-300  w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
-                        id={field.name}
-                        name={field.name}
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        onInput={handleInput}
-                        ref={descriptionRef}
-                      />
-                      <div className="text-red-600 text-sm ml-2">
-                        <FieldInfo field={field} />
-                      </div>
-                    </>
+                    value?.includes("error") &&
+                    'No "error" allowed in first name'
                   );
-                }}
-              />
-            </div>
+                },
+              }}
+              children={(field) => {
+                const descriptionRef = useRef(null);
+                const handleInput = () => {
+                  if (descriptionRef && typeof descriptionRef !== "function") {
+                    autoGrow(descriptionRef);
+                  }
+                };
+                // Avoid hasty abstractions. Render props are great!
+                return (
+                  <>
+                    {/* <label htmlFor={field.name}>Description:</label> */}
+                    <input
+                      placeholder="Description"
+                      className="p-2 glass shadow-2xl border border-gray-300 w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onInput={handleInput}
+                      ref={descriptionRef}
+                    />
+                    <div className="text-red-600 text-sm ml-2">
+                      <FieldInfo field={field} />
+                    </div>
+                  </>
+                );
+              }}
+            />
           </div>
 
-          <div className="grid grid-cols-1 ">
-            <div>
-              <form.Field
-                name="FoundedDate"
-                validators={{
-                  onChange: ({ value }) =>
-                    !value ? "FoundedDate is required" : undefined,
-                  onChangeAsyncDebounceMs: 500,
-                  onChangeAsync: async ({ value }) => {
-                    await new Promise((resolve) => setTimeout(resolve, 1000));
-                    return (
-                      value.includes("error") &&
-                      'No "error" allowed in first name'
-                    );
-                  },
-                }}
-                children={(field) => {
-                  const [isFocused,setIsFocused] = useState(false);
-
-                  // Avoid hasty abstractions. Render props are great!
+          <div className="h-full w-full border-0 outline-none text-1xl border-black border-2 w-full">
+            <form.Field
+              name="FoundedDate"
+              validators={{
+                onChange: ({ value }) =>
+                  !value ? "FoundedDate is required" : undefined,
+                onChangeAsyncDebounceMs: 500,
+                onChangeAsync: async ({ value }) => {
+                  await new Promise((resolve) => setTimeout(resolve, 1000));
                   return (
-                    <>
-                      <input
-                        placeholder="Founded Date (DD/MM/YYYY)"
-                        className="p-2 shadow-xl  glass border border-gray-300 h-12  w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px]  border-[#035ec5]"
-                        type={isFocused ? "date" : "text"}  
-                        id={field.name}
-                        name={field.name}
-                        value={field.state.value}
-                        onBlur={field.handleBlur}
-                        onChange={(e) => field.handleChange(e.target.value)}
-                        onFocus={() => setIsFocused(true)}  
-                      />
-                      <div className="text-red-600 text-sm ml-2">
-                        <FieldInfo field={field} />
-                      </div>
-                    </>
+                    value.includes("error") &&
+                    'No "error" allowed in first name'
                   );
-                }}
-              />
-            </div>
+                },
+              }}
+              children={(field) => {
+                const [isFocused, setIsFocused] = useState(false);
+
+                // Avoid hasty abstractions. Render props are great!
+                return (
+                  <>
+                    <input
+                      placeholder="Founded Date (DD/MM/YYYY)"
+                      className="p-2 glass shadow-2xl border border-gray-300 w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
+                      type={isFocused ? "date" : "text"}
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      onFocus={() => setIsFocused(true)}
+                    />
+                    <div className="text-red-600 text-sm ml-2">
+                      <FieldInfo field={field} />
+                    </div>
+                  </>
+                );
+              }}
+            />
           </div>
-          <div>
+
+          <div className="h-full w-full border-0 outline-none text-1xl border-black border-2 w-full">
             <form.Field
               name="Email"
               validators={{
@@ -277,7 +290,7 @@ const ClubRegistration: React.FC = () => {
                     {/* <label htmlFor={field.name}>Email:</label> */}
                     <input
                       placeholder="Email"
-                      className="p-2  border border-gray-300  shadow-xl w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
+                      className="p-2 glass shadow-2xl border border-gray-300 w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
                       type="email"
                       id={field.name}
                       name={field.name}
@@ -293,7 +306,8 @@ const ClubRegistration: React.FC = () => {
               }}
             />
           </div>
-          <div>
+
+          <div className="h-full w-full border-0 outline-none text-1xl border-black border-2 w-full">
             <form.Field
               name="Password"
               validators={{
@@ -301,8 +315,8 @@ const ClubRegistration: React.FC = () => {
                   !value
                     ? "Password is required"
                     : value.length < 6
-                    ? "Password must be at least 6 characters"
-                    : undefined,
+                      ? "Password must be at least 6 characters"
+                      : undefined,
                 onChangeAsyncDebounceMs: 500,
                 onChangeAsync: async ({ value }) => {
                   await new Promise((resolve) => setTimeout(resolve, 1000));
@@ -317,34 +331,34 @@ const ClubRegistration: React.FC = () => {
                   <>
                     {/* <label htmlFor={field.name}>Password:</label> */}
                     <div className="relative">
-                    <input
-                      className="p-2 glass shadow-xl border border-gray-300  w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
-                      type={ hidden ? "password" : "text"}
-                      id={field.name}
-                      placeholder="Password"
-                      name={field.name}
-                      value={field.state.value}
-                      onBlur={field.handleBlur}
-                      onChange={(e) => field.handleChange(e.target.value)}
-                    />
-                    <button
-                    type="button"
-                    onClick={togglePasswordVisibility}
-                    className="absolute inset-y-0 right-0 pr-3 flex items-center text-xs"                    
-                    > 
-                    { hidden ? <EyeOff size={17} /> : <Eye size={17}/>}
-                    </button>
+                      <input
+                        className="p-2 glass shadow-2xl border border-gray-300 w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
+                        type={hidden ? "password" : "text"}
+                        id={field.name}
+                        placeholder="Password"
+                        name={field.name}
+                        value={field.state.value}
+                        onBlur={field.handleBlur}
+                        onChange={(e) => field.handleChange(e.target.value)}
+                      />
+                      <button
+                        type="button"
+                        onClick={togglePasswordVisibility}
+                        className="absolute inset-y-0 right-0 pr-3 flex items-center text-xs"
+                      >
+                        {hidden ? <EyeOff size={17} /> : <Eye size={17} />}
+                      </button>
                     </div>
-                    
                     <div className="text-red-600 text-sm ml-2">
-                                <FieldInfo field={field} />
+                      <FieldInfo field={field} />
                     </div>
                   </>
                 );
               }}
             />
           </div>
-          <div>
+
+          <div className="h-full w-full border-0 outline-none text-1xl border-black border-2 w-full">
             <form.Field
               name="LogoURL"
               validators={{
@@ -367,7 +381,7 @@ const ClubRegistration: React.FC = () => {
                     <input
                       type="file"
                       accept="image/*"
-                      className="p-2 glass shadow-xl border border-gray-300 w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
+                      className="p-2 glass shadow-2xl border border-gray-300 w-full placeholder:text-gray outline-none focus:border-black focus:border-[1px] border-[#035ec5]"
                       id={field.name}
                       name={field.name}
                       // value={field.state.value}
@@ -389,21 +403,34 @@ const ClubRegistration: React.FC = () => {
               }}
             />
           </div>
+          <div className="w-full flex gap-2">
 
-          <form.Subscribe
-            selector={(state) => [state.canSubmit, state.isSubmitting]}
-            children={([canSubmit, isSubmitting]) => (
-              <button
-                className="outline-none cursor-pointer glass border-slate-50 border shadow-xl tracking-wider leading-8  w-full p-2 bg-gray-900 text-white text-xl font-bold hover:bg-slate-50 hover:text-stone-950  hover:border-black hover:border-solid hover:border-[1px]  hover:text-[#035ec5] font-bold"
-                type="submit"
-                disabled={!canSubmit}
-              >
-                {isSubmitting ? "Submiting..." : "Register"}
-              </button>
-            )}
-          />
+            <form.Subscribe
+              selector={(state) => [state.canSubmit, state.isSubmitting]}
+              children={([canSubmit, isSubmitting]) => (
+                <button
+                  className="text-white rounded text-lg font-semibold p-2 w-1/2 bg-black"
+                  type="submit"
+                  disabled={!canSubmit}
+                >
+                  {isSubmitting ? "Submiting..." : "Register"}
+                </button>
+              )}
+            />
+            <button
+              className="text-black border border-black rounded text-lg font-semibold p-2 w-1/2"
+              onClick={handleOpenLogin}
+            >
+              Login
+            </button>
+          </div>
         </form>
       </div>
+      
+      {/* Conditionally render the login page */}
+      {showLoginPage && (
+        <ClubLogin onClose={handleCloseLogin} />
+      )}
 
       {displayModal ? (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-50">
@@ -434,6 +461,7 @@ const ClubRegistration: React.FC = () => {
         ""
       )}
     </div>
+    // </div>
   );
 };
 
diff --git a/frontend/src/appComponents/Popup.tsx b/frontend/src/appComponents/Popup.tsx
index 8ec77a7..c15998b 100644
--- a/frontend/src/appComponents/Popup.tsx
+++ b/frontend/src/appComponents/Popup.tsx
@@ -1,9 +1,12 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import ClubRegistration from './ClubRegistration';
 
-function Popup({ onClose }:any) {
+function Popup({ onClose }: any) {
+   const [showRegistrationPage, setShowRegistrationPage] = useState(false);
    const [isOpen, setIsOpen] = useState(false); // Start with the popup closed
    const navigate = useNavigate();
+
    useEffect(() => {
       // Show the popup after 3 seconds (3000 milliseconds)
       const timeout = setTimeout(() => {
@@ -18,18 +21,25 @@ function Popup({ onClose }:any) {
       onClose(); // Optional: Execute a function when closing
    };
 
-   // Close the popup when clicking outside of it
-   const handleOverlayClick = (e:any) => {
+   const handleOverlayClick = (e: any) => {
       if (e.target === e.currentTarget) {
          handleClose();
       }
    };
 
+   const handleOpenRegistration = () => {
+      setShowRegistrationPage(true);
+   };
+
+   const handleCloseRegistration = () => {
+      setShowRegistrationPage(false);
+   };
+
    if (!isOpen) return null;
 
    return (
       <div
-         className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70"
+         className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-100"
          onClick={handleOverlayClick} // Overlay click handler
       >
          <div className="relative w-4/5 max-w-3xl p-8 mx-auto bg-white rounded-lg shadow-lg">
@@ -64,13 +74,12 @@ function Popup({ onClose }:any) {
 
                <div className="flex items-center justify-center gap-4">
                   <button
-                     onClick={() => {
-                        navigate("/registerClub")
-                     }}
+                     onClick={handleOpenRegistration}
                      className="px-6 py-3 text-sm font-medium text-white bg-blue-500 rounded hover:bg-blue-600"
                   >
                      Register Now
                   </button>
+
                   <button
                      onClick={handleClose}
                      className="px-6 py-3 text-sm font-medium text-gray-700 bg-gray-200 rounded hover:bg-gray-300"
@@ -80,6 +89,11 @@ function Popup({ onClose }:any) {
                </div>
             </div>
          </div>
+
+         {/* Render ClubRegistration only when showRegistrationPage is true */}
+         {showRegistrationPage && (
+            <ClubRegistration onClose={handleCloseRegistration} />
+         )}
       </div>
    );
 }