diff --git a/login.css b/login.css
index 8dc718f..62b544d 100644
--- a/login.css
+++ b/login.css
@@ -1,5 +1,6 @@
-body 
-{
+/* Background & body */
+body {
+  margin: 0;
   font-family: Poppins, Arial, sans-serif;
   background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
   min-height: 100vh;
@@ -9,37 +10,40 @@ body
   align-items: center;
 }
 
-/* Background animation circles */
-.bg-animated .bg-circle {
+/* Animated background circles */
+.bg-1, .bg-2, .bg-3 {
   position: absolute;
   border-radius: 50%;
   filter: blur(70px);
-  animation: float 7s infinite ease-in-out;
   opacity: 0.8;
+  animation: float 7s infinite ease-in-out;
 }
 
-.one { 
-  top: 10%; 
-  left: 5%; 
-  width: 220px; 
-  height: 220px; 
-  background: rgba(255,255,255,0.5); 
+.bg-1 {
+  top: 10%;
+  left: 5%;
+  width: 220px;
+  height: 220px;
+  background: rgba(255,255,255,0.5);
 }
-.two { 
-  bottom: 10%; 
-  right: 5%; 
-  width: 300px; 
-  height: 300px; 
+
+.bg-2 {
+  bottom: 10%;
+  right: 5%;
+  width: 300px;
+  height: 300px;
   background: rgba(255,180,220,0.5);
-  animation-delay: 1.3s; 
+  animation-delay: 1.3s;
 }
-.three { 
-  top: 60%; 
-  left: 50%; 
-  width: 200px; 
-  height: 200px; 
+
+.bg-3 {
+  top: 55%;
+  left: 50%;
+  width: 200px;
+  height: 200px;
+  transform: translate(-50%, -50%);
   background: rgba(150,110,255,0.5);
-  animation-delay: 2s; 
+  animation-delay: 2s;
 }
 
 @keyframes float {
@@ -47,9 +51,9 @@ body
   50% { transform: translateY(-25px); }
 }
 
-/* Card */
+/* Login Card (match with register) */
 .login-card {
-  background: rgba(255, 255, 255, 0.35);
+  background: rgba(255,255,255,0.35);
   backdrop-filter: blur(20px);
   padding: 35px;
   max-width: 420px;
@@ -58,57 +62,65 @@ body
   box-shadow: 0 20px 50px rgba(0,0,0,0.15);
   border: 1px solid rgba(255,255,255,0.4);
   position: relative;
+  z-index: 5;
 }
 
 /* Icon */
-.icon-wrapper { 
-  display: flex; 
-  justify-content: center; 
-  margin-bottom: 25px; 
+.icon-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 25px;
 }
 
-.icon-circle {
-  background: linear-gradient(135deg, #7928ff, #ff0080);
-  padding: 22px;
+.icon-bg {
+  width: 90px;
+  height: 90px;
+  position: absolute;
   border-radius: 50%;
-  box-shadow: 0 6px 20px rgba(255,0,128,0.4);
+  filter: blur(15px);
+  background: linear-gradient(135deg, #7928ff, #ff0080);
+  animation: float 5s infinite ease-in-out;
 }
 
-.login-icon { 
-  width: 45px; 
-  height: 45px; 
+.icon {
+  width: 70px;
+  height: 70px;
+  background: linear-gradient(135deg, #7928ff, #ff0080);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
 }
 
-/* Header Text */
-.header-text { 
-  text-align: center; 
-  margin-bottom: 20px; 
-}
-
-.header-text h2 { 
+/* Title & subtitle */
+.title {
+  text-align: center;
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 10px;
   background: linear-gradient(45deg, #7928ff, #ff0080);
+  color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
-  color: transparent;
-  font-weight: 700;
-  font-size: 28px;
 }
 
-.header-text p {
+.subtitle {
+  text-align: center;
   color: #333;
-  font-size: 14px;
+  margin-bottom: 20px;
 }
 
-/* Inputs */
+/* Input fields */
 input {
   width: 100%;
   padding: 13px;
-  margin-bottom: 15px;
   border-radius: 12px;
   border: 2px solid #e6d9ff;
   background: rgba(255,255,255,0.75);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+  margin-bottom: 15px;
   transition: 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
 }
 
 input:focus {
@@ -117,8 +129,20 @@ input:focus {
   outline: none;
 }
 
-/* Login Button */
-.btn-login {
+/* Error box */
+#errorBox {
+  background: #ffe5e5;
+  border: 1px solid #ffb2b2;
+  color: #b00000;
+  padding: 10px;
+  border-radius: 12px;
+  margin-bottom: 10px;
+  display: none;
+  box-shadow: 0 5px 15px rgba(255,0,0,0.1);
+}
+
+/* Button */
+.btn {
   width: 100%;
   padding: 13px;
   background: linear-gradient(to right, #7928ff, #ff0080);
@@ -132,37 +156,19 @@ input:focus {
   transition: 0.3s ease;
 }
 
-.btn-login:hover {
+.btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 18px rgba(255,0,128,0.4);
 }
 
-/* Error Box */
-.error {
-  background: #ffe5e5;
-  border: 1px solid #ffb2b2;
-  color: #b00000;
-  padding: 10px;
-  border-radius: 12px;
-  margin-bottom: 10px;
-  display: none;
-  box-shadow: 0 5px 15px rgba(255,0,0,0.1);
+/* Register link */
+.login-link {
+  text-align: center;
+  margin-top: 15px;
 }
 
-/* Demo Box */
-.demo-box {
-  background: rgba(240,240,255,0.7);
-  padding: 18px;
-  margin-top: 20px;
-  border-radius: 18px;
-  border: 1px solid rgba(180,160,255,0.4);
-  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
-}
-
-.demo-item {
-  background: white;
-  padding: 12px;
-  margin-top: 12px;
-  border-radius: 12px;
-  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
-}
+.login-link a {
+  color: #7928ff;
+  font-weight: 600;
+  text-decoration: underline;
+}
\ No newline at end of file