DESIGN: Login/Register now hides behind AuthModel.

Pops up when hover, probs will make it follow cursor too

frontend/src/components/Auth/AuthModal.tsx

@@ -28,12 +28,42 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
         id="blurring-layer"
         className="fixed z-50 inset-0 w-screen h-screen backdrop-blur-sm group-has-[input:focus]:backdrop-blur-[5px]"
       ></div>
+      <div>
         {/*Container*/}
+
+        <div className="fixed inset-0 flex flex-col items-center justify-around z-[9000] 
+        h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem]  transition-all animate-floating">
+          
+            {/* Login/Register Buttons Container */}
+            <div
+              className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible "
+            >
+              {/* Login Toggle */}
+              <ToggleButton
+                toggled={selectedTab === "Login"}
+                extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
+                onClick={() => setSelectedTab("Login")}
+              >
+                <LogInIcon className="h-[40px] w-[40px] mr-1" />
+                Login
+              </ToggleButton>
+
+              {/* Register Toggle */}
+              <ToggleButton
+                toggled={selectedTab === "Register"}
+                extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]"
+                onClick={() => setSelectedTab("Register")}
+              >
+                <UserIcon className="h-[40px] w-[40px] mr-1" />
+                Register
+              </ToggleButton>
+            </div>
           <div
             className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] 
-        h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem] transition-all animate-floating"
+        h-[75vh] m-auto min-w-[45vw] w-fit py-[50px] rounded-[5rem]"
             style={{ "--spin-duration": spinDuration } as React.CSSProperties}
           >
+
             {/*Border Container*/}
             <div
               id="border-container"
@@ -50,22 +80,7 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
                 >
                   ✕
                 </button>
-            <ToggleButton
+
-              toggled={selectedTab === "Login"}
-              extraClasses="flex flex-col items-center px-8"
-              onClick={() => setSelectedTab("Login")}
-            >
-              <LogInIcon className="h-[40px] w-[40px] mr-1" />
-              Login
-            </ToggleButton>
-            <ToggleButton
-              toggled={selectedTab === "Register"}
-              extraClasses="flex flex-col items-center px-8"
-              onClick={() => setSelectedTab("Register")}
-            >
-              <UserIcon className="h-[40px] w-[40px] mr-1" />
-              Register
-            </ToggleButton>
               </div>
               {selectedTab === "Login" ? (
                 <LoginForm onSubmit={handleSubmit} />
@@ -74,6 +89,8 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
               )}
             </div>
           </div>
+        </div>
+      </div>
     </>
   );
 };