diff --git a/public/css/styles.css b/public/css/styles.css
index ed5b7a58d439a738660d5107a7fd5e32368dc0c9..19e669e6ebc947152707709415b10d1495e1eb34 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -41,17 +41,27 @@ nav a:hover {
   background: rgba(255, 255, 255, 0.5);
 }
 
-.btn-login {
-  background-color: #4CAF50;
+.login-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: transparent;
   color: white;
+  border: 2px solid white;
   padding: 10px 20px;
-  border-radius: 5px;
-  text-decoration: none;
+  font-size: 16px;
   font-weight: bold;
+  cursor: pointer;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.login-btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
-.btn-login:hover {
-  background-color: #45a049;
+.login-btn i {
+  font-size: 18px;
 }
 
 /* SEARCH BAR */
diff --git a/views/index.ejs b/views/index.ejs
index 94bfbee9692556a5667dc17ce6142c9fdca6ac0c..dcae4db1a200bf1bbb3846f698d64691ff2ceed5 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -22,7 +22,7 @@
         <a><%= session.userName %></a>  <!-- แสดงชื่อผู้ใช้ -->
         <a href="/logout">Logout</a>
       <% } else { %>
-        <a href="/login" class="btn-login">Login</a> <!-- ถ้ายังไม่ได้ login -->
+        <a href="/login" class="login-btn">Login</a> <!-- ถ้ายังไม่ได้ login -->
       <% } %>
     </nav>
   </header>