diff --git a/chat-page/index.html b/chat-page/index.html
index e630bb9..7dd77e1 100644
--- a/chat-page/index.html
+++ b/chat-page/index.html
@@ -67,7 +67,7 @@
             </div>
             
             <button class="send-btn">
-                <i class="bi bi-send"></i>
+                <i class="bi bi-arrow-right-circle"></i>
             </button>
         </div>
     </div>
diff --git a/chat-page/style.css b/chat-page/style.css
index fedd3d5..d45d9e3 100644
--- a/chat-page/style.css
+++ b/chat-page/style.css
@@ -83,6 +83,7 @@ body {
     font-weight: bold;
 }
 
+/* Enhanced floating circles background */
 .floating-circles {
     position: absolute;
     top: 0;
@@ -104,21 +105,110 @@ body {
     bottom: -150px;
     border-radius: 50%;
     z-index: 1;
-    animation-fill-mode: both; /* Smoother animation */
+    animation-fill-mode: both;
 }
 
-/* Konfigurasi floating circles... */
+.floating-circles li:nth-child(1) {
+    left: 25%;
+    width: 80px;
+    height: 80px;
+    animation-delay: 0s;
+    animation-duration: 20s;
+}
 
+.floating-circles li:nth-child(2) {
+    left: 10%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 2s;
+    animation-duration: 22s;
+}
+
+.floating-circles li:nth-child(3) {
+    left: 70%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 4s;
+    animation-duration: 18s;
+}
+
+.floating-circles li:nth-child(4) {
+    left: 40%;
+    width: 60px;
+    height: 60px;
+    animation-delay: 0s;
+    animation-duration: 24s;
+}
+
+.floating-circles li:nth-child(5) {
+    left: 65%;
+    width: 20px;
+    height: 20px;
+    animation-delay: 0s;
+    animation-duration: 16s;
+}
+
+.floating-circles li:nth-child(6) {
+    left: 75%;
+    width: 110px;
+    height: 110px;
+    animation-delay: 3s;
+    animation-duration: 26s;
+}
+
+.floating-circles li:nth-child(7) {
+    left: 35%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 7s;
+    animation-duration: 30s;
+}
+
+.floating-circles li:nth-child(8) {
+    left: 50%;
+    width: 25px;
+    height: 25px;
+    animation-delay: 15s;
+    animation-duration: 45s;
+}
+
+.floating-circles li:nth-child(9) {
+    left: 20%;
+    width: 15px;
+    height: 15px;
+    animation-delay: 2s;
+    animation-duration: 35s;
+}
+
+.floating-circles li:nth-child(10) {
+    left: 85%;
+    width: 150px;
+    height: 150px;
+    animation-delay: 0s;
+    animation-duration: 28s;
+}
+
+/* Enhanced floating animation with horizontal movement */
 @keyframes floating {
     0% {
-        transform: translateY(0) rotate(0deg);
+        transform: translate(0, 0) rotate(0deg);
         opacity: 0.7;
-        border-radius: 50%;
+    }
+    25% {
+        transform: translate(-50px, -250px) rotate(90deg);
+        opacity: 0.5;
+    }
+    50% {
+        transform: translate(50px, -500px) rotate(180deg);
+        opacity: 0.3;
+    }
+    75% {
+        transform: translate(-30px, -750px) rotate(270deg);
+        opacity: 0.5;
     }
     100% {
-        transform: translateY(-1000px) rotate(720deg);
+        transform: translate(0, -1000px) rotate(360deg);
         opacity: 0;
-        border-radius: 50%;
     }
 }
 
@@ -224,6 +314,10 @@ body {
     width: 100%;
 }
 
+.message-input:focus {
+    outline: none; /* Remove focus outline */
+}
+
 .send-btn {
     background: #0096c7;
     border: none;
@@ -378,17 +472,19 @@ body {
 }
 
 @media (max-width: 768px) {
+    body {
+        align-items: flex-start; /* Header menempel di atas */
+        padding: 0;
+    }
+    
     .chat-container {
-        height: 100vh;
+        height: 100vh; /* Kembali ke viewport height normal */
         max-height: none;
         border-radius: 0;
+        margin-top: 0;
     }
     
     .message {
         max-width: 85%;
     }
-    
-    body {
-        padding: 0;
-    }
 }
diff --git a/login-page/style.css b/login-page/style.css
index 492b6d5..d7d9673 100644
--- a/login-page/style.css
+++ b/login-page/style.css
@@ -29,22 +29,19 @@ body {
 
 .background-animation i {
     position: absolute;
-    background: rgba(72, 202, 228, 0.4); /* #48cae4 with transparency */
+    background: rgba(72, 202, 228, 0.6); /* More visible */
     border-radius: 50%;
     animation: float linear infinite;
-    opacity: 0;
+    opacity: 0.8; /* Always visible */
     right: -100px;
     top: var(--y-offset);
     --wave-amplitude: 50px;
 }
 
-/* Waveform animation keyframes */
+/* Continuous floating animation */
 @keyframes float {
     0% {
         transform: translate(0, 0);
-        opacity: 0;
-    }
-    10% {
         opacity: 0.8;
     }
     25% {
@@ -56,12 +53,9 @@ body {
     75% {
         transform: translate(-75vw, calc(var(--wave-amplitude) * -1));
     }
-    90% {
-        opacity: 0.8;
-    }
     100% {
         transform: translate(calc(-100vw - 100px), var(--wave-amplitude));
-        opacity: 0;
+        opacity: 0.8;
     }
 }
 
@@ -87,37 +81,33 @@ body {
 .background-animation i:nth-child(19) { width: 14px; height: 14px; --y-offset: 75px; --wave-amplitude: 35px; animation-duration: 16s; animation-delay: 9s; }
 .background-animation i:nth-child(20) { width: 16px; height: 16px; --y-offset: 125px; --wave-amplitude: 55px; animation-duration: 23s; animation-delay: 3s; }
 
-/* Login container styling */
+/* Login container styling with enhanced frosted glass effect */
 .login-container {
-    background: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
+    background: rgba(255, 255, 255, 0.2); /* More transparency */
     backdrop-filter: blur(20px); /* Frosted glass effect */
     -webkit-backdrop-filter: blur(20px);
     border-radius: 20px;
-    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+    box-shadow: 
+        0 15px 35px rgba(0, 0, 0, 0.1),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.3); /* Inner glow */
     padding: 40px;
     width: 90%;
     max-width: 450px;
-    transform: perspective(1000px) rotateY(5deg);
-    transition: transform 0.5s ease;
     position: relative;
     z-index: 1;
     overflow: hidden;
 }
 
-.login-container:hover {
-    transform: perspective(1000px) rotateY(0deg);
-}
-
 .logo-placeholder {
     height: 80px;
     margin-bottom: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #6a11cb;
+    color: #0096c7; /* New blue from palette */
     font-size: 24px;
     font-weight: bold;
-    border: 2px dashed #6a11cb;
+    border: 2px dashed #0096c7; /* New blue from palette */
     border-radius: 10px;
 }
 
@@ -170,11 +160,11 @@ body {
 }
 
 .input-group input:focus,
-.phone-input-wrapper:极focus-within {
-    border-color: #48cae4;
-    box-shadow: 0 0 0 3px rgba(72, 202, 228, 0.2);
+.phone-input-wrapper:focus-within {
     transform: translateY(-2px);
     outline: none;
+    border-color: transparent; /* Remove border */
+    box-shadow: none; /* Remove shadow */
 }
 
 /* Phone input styling */
@@ -239,7 +229,7 @@ body {
 
 .login-btn:hover {
     transform: translateY(-3px);
-    box-shadow: 0 8px 20px rgba(37, 117, 252, 0.6);
+    box-shadow: 0 8px 20px rgba(0, 150, 199, 0.6); /* New blue from palette */
 }
 
 .login-btn:active {
@@ -261,7 +251,7 @@ body {
 }
 
 .links a:hover {
-    color: #03045e; /* Darkest blue from palette */
+    color: #023e8a; /* Dark blue from palette */
     text-decoration: underline;
 }