diff --git a/css/styles.css b/css/styles.css
index 3ad374a..cec25fd 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -642,6 +642,7 @@ html, body {
 .project-card {
     background: white;
     border: 1px solid var(--border-color);
+    border-top: 4px solid #3b82f6;
     border-radius: 0.5rem;
     padding: 1.5rem;
     cursor: pointer;
diff --git a/e2e/app.spec.ts b/e2e/app.spec.ts
index 9cfde54..57505ac 100644
--- a/e2e/app.spec.ts
+++ b/e2e/app.spec.ts
@@ -145,7 +145,7 @@ test.describe('Task Manager App', () => {
             await page.click('#addProjectBtn');
             await page.fill('#projectName', 'Website Redesign');
             await page.fill('#projectDescription', 'Redo the company website');
-            await page.selectOption('#projectColor', 'green');
+            await page.fill('#projectColor', '#10b981');
             await page.click('#projectForm button[type="submit"]');
 
             await expect(page.locator('#projectModal')).not.toHaveClass(/active/);
diff --git a/index.html b/index.html
index 5d6c76e..e5f3534 100644
--- a/index.html
+++ b/index.html
@@ -295,13 +295,7 @@ <h3>Project Details</h3>
                             </div>
                             <div class="form-group">
                                 <label for="projectColor">Color Tag</label>
-                                <select id="projectColor">
-                                    <option value="blue">Blue</option>
-                                    <option value="red">Red</option>
-                                    <option value="green">Green</option>
-                                    <option value="yellow">Yellow</option>
-                                    <option value="purple">Purple</option>
-                                </select>
+                                <input type="color" id="projectColor" value="#3b82f6">
                             </div>
                             <div class="form-actions">
                                 <button type="submit" class="btn btn-primary">Save Project</button>
diff --git a/src/app.ts b/src/app.ts
index de6e6b2..86fa4a5 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -965,13 +965,29 @@ class TaskManager {
         });
     }
 
+    normalizeColor(color: string | undefined): string {
+        const colorMap: Record<string, string> = {
+            blue: '#3b82f6',
+            red: '#ef4444',
+            green: '#10b981',
+            yellow: '#f59e0b',
+            purple: '#a855f7'
+        };
+        const defaultColor = '#3b82f6';
+        if (!color) return defaultColor;
+        const resolved = colorMap[color] || color;
+        return /^#[0-9a-fA-F]{3,6}$/.test(resolved) ? resolved : defaultColor;
+    }
+
     renderProjectCard(project: { id: string; name: string; description?: string; color?: string }): string {
         const tasks = storage.getTasks().filter(t => t.projectId === project.id);
         const completed = tasks.filter(t => t.completed).length;
         const percentage = tasks.length === 0 ? 0 : Math.round((completed / tasks.length) * 100);
 
+        const borderColor = this.normalizeColor(project.color);
+
         return `
-            <div class="project-card ${project.color || 'blue'}" data-project-id="${project.id}">
+            <div class="project-card" style="border-top-color: ${borderColor}" data-project-id="${project.id}">
                 <div class="project-title">${project.name}</div>
                 ${project.description ? `<div class="project-description">${project.description}</div>` : ''}
                 <div class="project-stats">
@@ -1009,7 +1025,7 @@ class TaskManager {
             if (project) {
                 (document.getElementById('projectName') as HTMLInputElement).value = project.name;
                 (document.getElementById('projectDescription') as HTMLTextAreaElement).value = project.description || '';
-                (document.getElementById('projectColor') as HTMLSelectElement).value = project.color || 'blue';
+                (document.getElementById('projectColor') as HTMLInputElement).value = this.normalizeColor(project.color || 'blue');
                 deleteBtn.style.display = 'block';
             }
         }
@@ -1028,7 +1044,7 @@ class TaskManager {
         const project = {
             name: (document.getElementById('projectName') as HTMLInputElement).value,
             description: (document.getElementById('projectDescription') as HTMLTextAreaElement).value,
-            color: (document.getElementById('projectColor') as HTMLSelectElement).value
+            color: (document.getElementById('projectColor') as HTMLInputElement).value
         };
 
         if (this.currentEditingProjectId) {