diff --git a/Frontend-Learner/components/layout/LandingHeader.vue b/Frontend-Learner/components/layout/LandingHeader.vue
index 60a0d275..abb1f85d 100644
--- a/Frontend-Learner/components/layout/LandingHeader.vue
+++ b/Frontend-Learner/components/layout/LandingHeader.vue
@@ -86,8 +86,8 @@ onMounted(() => {
         <template v-if="!isAuthenticated">
           <NuxtLink 
             to="/auth/login" 
-            class="text-sm font-bold px-4 py-2 transition-colors"
-            :class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
+            class="btn-secondary-premium shadow-sm"
+            :class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'bg-blue-50 border-blue-100 text-blue-600 hover:bg-blue-100 hover:border-blue-200']"
           >
             {{ $t('auth.login') }}
           </NuxtLink>
@@ -145,6 +145,23 @@ onMounted(() => {
   box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
 }
 
+/* Secondary Premium Button Styling */
+.btn-secondary-premium {
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 800;
+  border: 1.5px solid;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn-secondary-premium:hover {
+  transform: translateY(-2px);
+}
+
 @media (max-width: 768px) {
   .container {
     padding: 0 16px;