I don't know what the "Tasks Calendar Analytics" with the "Profile" buttons do. You can delete those. The "set reminder" circle at the bottom of the task doesn't do anything. I'm not sure what the square check box at the top of the task does.

components/navbar.js

@@ -57,24 +57,7 @@ class NavHeader extends HTMLElement {
                         <i data-feather="check-square" class="w-8 h-8 text-primary-500"></i>
                         <span class="logo">TaskMail</span>
                     </div>
-                    
-                    <div class="hidden md:flex items-center gap-6">
-                        <a href="#" class="nav-link text-gray-700 hover:text-primary-500 font-medium">
-                            Tasks
-                        </a>
-                        <a href="#" class="nav-link text-gray-700 hover:text-primary-500 font-medium">
-                            Calendar
-                        </a>
-                        <a href="#" class="nav-link text-gray-700 hover:text-primary-500 font-medium">
-                            Analytics
-                        </a>
-                        <button class="bg-primary-500 text-white px-4 py-2 rounded-lg hover:bg-primary-600 transition-colors flex items-center gap-2">
-                            <i data-feather="user" class="w-4 h-4"></i>
-                            Profile
-                        </button>
-                    </div>
-                    
-                    <button class="md:hidden" id="mobileMenuBtn">
+<button class="md:hidden" id="mobileMenuBtn">
                         <i data-feather="menu" class="w-6 h-6 text-gray-700"></i>
                     </button>
                 </div>

components/task-card.js

@@ -43,7 +43,6 @@ class TaskCard extends HTMLElement {
                     text-decoration: line-through;
                     color: #9ca3af;
                 }
-                
                 .task-checkbox {
                     width: 24px;
                     height: 24px;
@@ -52,6 +51,11 @@ class TaskCard extends HTMLElement {
                     border-radius: 6px;
                     position: relative;
                     transition: all 0.2s ease;
+                    background-color: white;
+                }
+                
+                .task-checkbox:hover {
+                    border-color: #3b82f6;
                 }
                 
                 .task-checkbox.checked {
@@ -60,18 +64,16 @@ class TaskCard extends HTMLElement {
                 }
                 
                 .task-checkbox.checked::after {
-                    content: '';
+                    content: '✓';
                     position: absolute;
-                    left: 7px;
-                    top: 3px;
-                    width: 6px;
-                    height: 12px;
-                    border: solid white;
-                    border-width: 0 2px 2px 0;
-                    transform: rotate(45deg);
-                }
-                
-                .action-btn {
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    color: white;
+                    font-weight: bold;
+                    font-size: 14px;
+                }
+.action-btn {
                     padding: 8px;
                     border-radius: 8px;
                     transition: all 0.2s ease;

script.js

@@ -78,35 +78,49 @@ class TaskManager {
 
         this.showToast('Task added successfully!', 'success');
     }
-
     toggleTask(id) {
         const task = this.tasks.find(t => t.id === id);
         if (task) {
             task.completed = !task.completed;
             task.completedAt = task.completed ? new Date().toISOString() : null;
+            
+            // When task is completed, automatically stop reminders
+            if (task.completed) {
+                task.hasReminder = false;
+                task.reminderStopped = true;
+            }
+            
             this.saveTasks();
             this.renderTasks();
             this.updateStats();
 
             if (task.completed) {
                 this.showToast('Task completed! Great job! 🎉', 'success');
+            } else {
+                // If unchecking a completed task, reset reminder status
+                task.reminderStopped = false;
+                this.showToast('Task marked as incomplete', 'info');
             }
         }
     }
-
     toggleReminder(id) {
         const task = this.tasks.find(t => t.id === id);
         if (task) {
+            if (task.completed) {
+                this.showToast('Cannot set reminder for completed task', 'error');
+                return;
+            }
+            
             if (task.hasReminder && !task.reminderStopped) {
                 // Stop reminder
                 task.hasReminder = false;
                 task.reminderStopped = true;
                 this.showToast('Reminder stopped', 'info');
-            } else if (!task.completed) {
+            } else {
                 // Start reminder
                 task.hasReminder = true;
                 task.reminderStopped = false;
-                this.showToast('Reminder started! You\'ll receive email notifications', 'success');
+                this.showToast('Reminder started! You\'ll receive email notifications every 30 seconds', 'success');
                 this.showEmailPreview(task);
             }
             this.saveTasks();
@@ -114,8 +128,7 @@ class TaskManager {
             this.updateStats();
         }
     }
-
-    deleteTask(id) {
+deleteTask(id) {
         if (confirm('Are you sure you want to delete this task?')) {
             this.tasks = this.tasks.filter(t => t.id !== id);
             this.saveTasks();
@@ -199,7 +212,6 @@ class TaskManager {
         document.getElementById('emailTask').textContent = task.text;
         document.getElementById('emailModal').classList.remove('hidden');
     }
-
     startReminderScheduler() {
         // Simulate sending reminders every 30 seconds for demo
         setInterval(() => {
@@ -207,12 +219,13 @@ class TaskManager {
                 if (task.hasReminder && !task.reminderStopped && !task.completed) {
                     // In a real app, this would send an email
                     console.log(`Sending reminder for task: ${task.text} to ${task.email}`);
+                    // Show a notification in the browser for demo purposes
+                    this.showToast(`Reminder: ${task.text}`, 'info');
                 }
             });
-        }, 30000);
+        }, 30000); // 30 seconds
     }
-
-    showToast(message, type = 'info') {
+showToast(message, type = 'info') {
         const toast = document.createElement('div');
         const bgColor = type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500';