diff --git a/src/lib/buttons/Login.svelte b/src/lib/buttons/Login.svelte
index d385822..9bd36cb 100644
--- a/src/lib/buttons/Login.svelte
+++ b/src/lib/buttons/Login.svelte
@@ -6,24 +6,27 @@
     }
 </script>
 
-<button on:click={handleLogin} class="keycloak">
+<button on:click={handleLogin} class="login-keycloak">
     Login with FJLA
 </button>
 
 <style>
-    .keycloak {
-        width: 70%;
-        height: 35px;
-        border: none;
-        border-radius: 3px;
-        background-color: blue;
-        color: whitesmoke;
-        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-        font-size: 15px;
-        cursor: pointer;
-    }
+.login-keycloak {
+    width: 70%;
+    height: 35px;
+    border: none;
+    border-radius: 3px;
+    background-color: blue;
+    color: whitesmoke;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-size: 15px;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* subtle base shadow */
+    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
 
-    .keycloak:hover {
-        background-color: rgb(52, 52, 252);
-    }
+.login-keycloak:hover {
+    background-color: rgb(0, 0, 193);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* stronger shadow on hover */
+}
 </style>
\ No newline at end of file