diff --git a/Frontend-Learner/pages/auth/login.vue b/Frontend-Learner/pages/auth/login.vue
index 280273eb..e30602df 100644
--- a/Frontend-Learner/pages/auth/login.vue
+++ b/Frontend-Learner/pages/auth/login.vue
@@ -208,11 +208,14 @@ onMounted(() => {
 
           <!-- Options -->
           <div class="flex items-center justify-between mt-1">
-             <label class="flex items-center gap-2 cursor-pointer group select-none">
+             <label class="flex items-center gap-2.5 cursor-pointer group select-none">
                <div class="relative flex items-center">
-                 <input type="checkbox" v-model="rememberMe" class="peer sr-only">
-                 <div class="w-5 h-5 border-2 border-slate-300 rounded-md peer-checked:bg-blue-600 peer-checked:border-blue-600 transition-all bg-white flex items-center justify-center">
-                    <svg class="w-3.5 h-3.5 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+                 <input type="checkbox" v-model="rememberMe" class="sr-only">
+                 <div 
+                   class="w-5 h-5 border-2 rounded-md transition-all flex items-center justify-center group-hover:border-blue-400"
+                   :class="rememberMe ? 'bg-blue-600 border-blue-600' : 'bg-white border-slate-300'"
+                 >
+                    <svg v-show="rememberMe" class="w-3.5 h-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                     </svg>
                  </div>