diff --git a/frontend/src/pages/login/Login.css b/frontend/src/pages/login/Login.css
index 637c571..69e22ab 100644
--- a/frontend/src/pages/login/Login.css
+++ b/frontend/src/pages/login/Login.css
@@ -67,16 +67,19 @@
   from {
     opacity: 0;
   }
-
   to {
     opacity: 1;
   }
 }
 
-.login-form-hidden {
+.login-card-fadein {
   opacity: 0;
+  animation: fadeIn 2s ease-in-out forwards;
+  animation-delay: 3s;
 }
 
-.login-form-visible {
+.login-interactive-fadein {
+  opacity: 0;
   animation: fadeIn 2s ease-in-out forwards;
+  animation-delay: 6s;
 }
\ No newline at end of file
diff --git a/frontend/src/pages/login/Login.jsx b/frontend/src/pages/login/Login.jsx
index 68610d4..70c8246 100644
--- a/frontend/src/pages/login/Login.jsx
+++ b/frontend/src/pages/login/Login.jsx
@@ -5,7 +5,6 @@ import Input from "../../components/Input";
 import "./Login.css";
 
 export default function Login() {
-  const [isVisible, setIsVisible] = useState(false);
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
@@ -46,12 +45,12 @@ export default function Login() {
         <source src="/koin_spin.mp4" type="video/mp4" />
       </video>
 
-      <div className="login-card" onMouseEnter={() => setIsVisible(true)}>
+      <div className="login-card login-card-fadein">
         <h1 className="login-heading">
           <span className="login-brand">Koin Ping</span> - Login
         </h1>
 
-        <div className={isVisible ? "login-form-visible" : "login-form-hidden"}>
+        <div className="login-interactive-fadein">
           {error && <div className="alert alert--error">{error}</div>}
 
           <form onSubmit={handleSubmit}>