diff --git a/db.php b/db.php
index c8fb1ca..3d483a8 100644
--- a/db.php
+++ b/db.php
@@ -1,5 +1,5 @@
 <?php
-$host = '192.168.0.201';
+$host = 'localhost';
 $db   = 'tinytask';
 $user = 'tinytask'; // change this if needed
 $pass = 'GD3AVEZRNnE@A3P]';     // change this if needed
diff --git a/index.php b/index.php
index 1d2a36d..b5db406 100644
--- a/index.php
+++ b/index.php
@@ -46,19 +46,19 @@
     font-size: 1.4rem;	
   }
 
-.modal {
-  padding: 2rem; /* or try 3rem or a % like 5% */
-}
+  .modal {
+    padding: 2rem; /* or try 3rem or a % like 5% */
+  }
 
-.modal.show {
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-}
+  .modal.show {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+  }
 
-.modal-dialog {
-  margin: 0;
-}
+  .modal-dialog {
+    margin: 0;
+  }
 
   .modal-content {
     font-size: 2.0rem; /* slightly larger than Bootstrap's default (~0.875rem) */ 
@@ -104,6 +104,11 @@
     background-color: #transparent;
   }
 
+  .completed {
+    text-decoration: line-through;
+    opacity: 0.5;
+  }
+
   .btn-icon {
     width: 20px;
     height: 20px;
@@ -154,9 +159,9 @@
   .project-color-9 .project-header { background-color: #d0e4ff; } 
  
  
-.project-column {
-  width: 100%; /* 1 per row */
-}
+  .project-column {
+    width: 100%; /* 1 per row */
+  }
 
  
 /* Small devices (landscape phones, ≥576px) */
@@ -458,7 +463,8 @@
 				<div class="project-body">
 				  ${project.tasks.map(task => `
 					<div class="d-flex justify-content-between align-items-center small-text mb-1 task-text">
-					  <span class="${task.highlighted ? 'highlighted' : ''}" data-task-id="${task.id}">${task.name}</span>
+					  <span class="${task.highlighted == 1 ? 'highlighted' : ''} ${task.highlighted == 2 ? 'completed' : ''}".trim()
+      data-task-id="${task.id}">${task.name}</span>
 					  <div class="d-flex">
 						<button class="btn-icon add-subtask-btn" data-task-id="${task.id}" title="Add Subtask">
 						  <i class="bi bi-plus"></i>
@@ -471,7 +477,8 @@
 					<div class="ms-3">
 					  ${task.subtasks.map(sub => `
 						<div class="d-flex justify-content-between align-items-center small-text mb-1">
-						  <span class="${sub.highlighted ? 'highlighted' : ''}" data-subtask-id="${sub.id}">${sub.name}</span>
+						  <span class="${sub.highlighted == 1 ? 'highlighted' : ''} ${sub.highlighted == 2 ? 'completed' : ''}".trim()
+      data-subtask-id="${sub.id}">${sub.name}</span>
 						  <button class="btn-icon text-danger delete-subtask-btn" data-subtask-id="${sub.id}" title="Delete Subtask">
 							<i class="bi bi-dash"></i>
 						  </button>
@@ -615,31 +622,43 @@ document.querySelectorAll('.project-column').forEach(col => {
 		    });
 		  });
 
-		  document.querySelectorAll('[data-task-id]').forEach(span => {
-		    span.addEventListener('click', () => {
-		  	  const taskId = span.dataset.taskId;
-			  const isHighlighted = span.classList.toggle('highlighted');
+      document.querySelectorAll('[data-task-id]').forEach(span => {
+        span.addEventListener('click', () => {
+          const taskId = span.dataset.taskId;
 
-			  fetch('toggle_highlight.php', {
-			    method: 'POST',
-			    headers: { 'Content-Type': 'application/json' },
-			    body: JSON.stringify({ type: 'task', id: taskId, highlighted: isHighlighted })
-			  });
-		    });
-		  });
+          fetch('toggle_highlight.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ type: 'task', id: taskId })
+          })
+          .then(res => res.json())
+          .then(data => {
+            if (!data.success) return;
 
-  		  document.querySelectorAll('[data-subtask-id]').forEach(span => {
-		    span.addEventListener('click', () => {
-			  const subtaskId = span.dataset.subtaskId;
-			  const isHighlighted = span.classList.toggle('highlighted');
+            span.classList.toggle('highlighted', data.highlighted === 1);
+            span.classList.toggle('completed',  data.highlighted === 2);
+          });
+        });
+      });
 
-			  fetch('toggle_highlight.php', {
-			    method: 'POST',
-			    headers: { 'Content-Type': 'application/json' },
-			    body: JSON.stringify({ type: 'subtask', id: subtaskId, highlighted: isHighlighted })
-			  });
-		    });
-		  });
+      document.querySelectorAll('[data-subtask-id]').forEach(span => {
+        span.addEventListener('click', () => {
+          const subtaskId = span.dataset.subtaskId;
+
+          fetch('toggle_highlight.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ type: 'subtask', id: subtaskId })
+          })
+          .then(res => res.json())
+          .then(data => {
+            if (!data.success) return;
+
+            span.classList.toggle('highlighted', data.highlighted === 1);
+            span.classList.toggle('completed',  data.highlighted === 2);
+          });
+        });
+      });
 
 		  let itemToDelete = null;
 
diff --git a/toggle_highlight.php b/toggle_highlight.php
index 5494b35..b16562f 100644
--- a/toggle_highlight.php
+++ b/toggle_highlight.php
@@ -3,19 +3,28 @@ require 'db.php';
 
 $data = json_decode(file_get_contents('php://input'), true);
 
-$type = $data['type'];
-$id = intval($data['id']);
-$highlighted = isset($data['highlighted']) && $data['highlighted'] ? 1 : 0;
+$type = $data['type'] ?? '';
+$id   = intval($data['id'] ?? 0);
+
+if ($id <= 0 || ($type !== 'task' && $type !== 'subtask')) {
+    echo json_encode(['success' => false, 'error' => 'Invalid request']);
+    exit;
+}
 
 if ($type === 'task') {
-    $stmt = $pdo->prepare("UPDATE tasks SET highlighted = ? WHERE id = ?");
-    $stmt->execute([$highlighted, $id]);
-    echo json_encode(['success' => true]);
-} elseif ($type === 'subtask') {
-    $stmt = $pdo->prepare("UPDATE subtasks SET highlighted = ? WHERE id = ?");
-    $stmt->execute([$highlighted, $id]);
-    echo json_encode(['success' => true]);
+    $stmt = $pdo->prepare("UPDATE tasks SET highlighted = (highlighted + 1) % 3 WHERE id = ?");
+    $stmt->execute([$id]);
+
+    $stmt = $pdo->prepare("SELECT highlighted FROM tasks WHERE id = ?");
+    $stmt->execute([$id]);
+    $newState = intval($stmt->fetchColumn());
 } else {
-    echo json_encode(['success' => false, 'error' => 'Invalid type']);
+    $stmt = $pdo->prepare("UPDATE subtasks SET highlighted = (highlighted + 1) % 3 WHERE id = ?");
+    $stmt->execute([$id]);
+
+    $stmt = $pdo->prepare("SELECT highlighted FROM subtasks WHERE id = ?");
+    $stmt->execute([$id]);
+    $newState = intval($stmt->fetchColumn());
 }
-?>
+
+echo json_encode(['success' => true, 'highlighted' => $newState]);