diff --git a/app/page.module.css b/app/page.module.css
index b71b16e..05a49d0 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -1,4 +1,4 @@
-/* Light Canvas Page Layout */
+/* Clean Light Page Layout */
 .mainContainer {
   max-width: 56rem;
   margin: 0 auto;
@@ -11,7 +11,7 @@
   color: #0f172a;
 }
 
-/* Header & Royal Blue Titles */
+/* Header Section */
 .header {
   display: flex;
   flex-direction: column;
@@ -23,7 +23,7 @@
   line-height: 2.5rem;
   font-weight: 800;
   letter-spacing: -0.025em;
-  color: #1d4ed8;
+  color: #0f172a;
 }
 
 .subtitle {
@@ -42,7 +42,7 @@
 .sectionTitle {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #1e40af;
+  color: #1e3a8a;
 }
 
 /* Empty State Card */
diff --git a/app/page.tsx b/app/page.tsx
index 66117f4..b43e478 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -43,7 +43,7 @@ export default async function HomePage({ searchParams }: PageProps) {
         {/* Empty state if no tasks exist */}
         {tasks.length === 0 ? (
           <div className={styles.emptyState}>
-            <p className={styles.emptyText}>No active tasks found. Create one above!</p>
+            <p className={styles.emptyText}>No active tasks found. Create one above.</p>
           </div>
         ) : (
           /* Render grid of task cards */
diff --git a/src/lib/actions.ts b/src/lib/actions.ts
index 8c07813..c313272 100644
--- a/src/lib/actions.ts
+++ b/src/lib/actions.ts
@@ -1,52 +1,52 @@
-'use server';
-import { createTask, updateTask, archiveTask, unarchiveTask } from './tasks';
-import { TaskStatus } from './types';
-import { revalidatePath } from 'next/cache';
-
-// creating tasks
-export async function createTaskAction(formData: FormData) {
-    // get form data
-    const title = formData.get('title') as string;
-    const description = formData.get('description') as string;
-    const due_date = formData.get('due_date') as string;
-
-    const status = (formData.get('status') as TaskStatus) || 'Todo';
-
-    const topic = formData.get('topic') as string;
-    if (!title || !description || !topic || !due_date) {
-        throw new Error('All fields are required');
-    }
-    createTask({ title, description, due_date, topic, status });
-    revalidatePath('/tasks');
-    revalidatePath('/');
-    return { success: true };
-}
-export async function updateTaskAction(id: number, formData: FormData) {
-    const title = formData.get('title') as string;
-    const description = formData.get('description') as string;
-    const due_date = formData.get('due_date') as string;
-    const status = (formData.get('status') as TaskStatus) || 'Todo';
-    const topic = formData.get('topic') as string;
-    if (!title || !description || !topic || !due_date) {
-        throw new Error('All fields are required');
-    }
-    updateTask(id, { title, description, due_date, topic, status });
-    revalidatePath('/tasks');
-    revalidatePath('/');
-    return { success: true };
-}
-export async function archiveTaskAction(id: number) {
-    archiveTask(id);
-    revalidatePath('/tasks');
-    revalidatePath('/');
-    revalidatePath('/archived');
-    return { success: true };
-}
-
-export async function unarchiveTaskAction(id: number) {
-    unarchiveTask(id);
-    revalidatePath('/tasks');
-    revalidatePath('/');
-    revalidatePath('/archived');
-    return { success: true };
-}
\ No newline at end of file
+'use server';
+import { createTask, updateTask, archiveTask, unarchiveTask } from './tasks';
+import { TaskStatus } from './types';
+import { revalidatePath } from 'next/cache';
+
+// Creating tasks
+export async function createTaskAction(formData: FormData) {
+    const title = formData.get('title') as string;
+    const description = formData.get('description') as string;
+    const due_date = formData.get('due_date') as string;
+    const status = (formData.get('status') as TaskStatus) || 'Todo';
+    const topic = formData.get('topic') as string;
+
+    if (!title || !description || !topic || !due_date) {
+        throw new Error('All fields are required');
+    }
+
+    createTask({ title, description, due_date, topic, status });
+    revalidatePath('/');
+    return { success: true };
+}
+
+// Updating tasks
+export async function updateTaskAction(id: number, formData: FormData) {
+    const title = formData.get('title') as string;
+    const description = formData.get('description') as string;
+    const due_date = formData.get('due_date') as string;
+    const status = (formData.get('status') as TaskStatus) || 'Todo';
+    const topic = formData.get('topic') as string;
+
+    if (!title || !description || !topic || !due_date) {
+        throw new Error('All fields are required');
+    }
+
+    updateTask(id, { title, description, due_date, topic, status });
+    revalidatePath('/');
+    return { success: true };
+}
+
+// Archiving tasks
+export async function archiveTaskAction(id: number) {
+    archiveTask(id);
+    revalidatePath('/');
+    return { success: true };
+}
+
+// Unarchiving tasks
+export async function unarchiveTaskAction(id: number) {
+    unarchiveTask(id);
+    revalidatePath('/');
+    return { success: true };
+}
\ No newline at end of file
diff --git a/src/lib/components/ArchivedSection.module.css b/src/lib/components/ArchivedSection.module.css
index 68d0d85..dfdab09 100644
--- a/src/lib/components/ArchivedSection.module.css
+++ b/src/lib/components/ArchivedSection.module.css
@@ -5,18 +5,19 @@
 
 .btnArchived {
   padding: 0.5rem 1rem;
-  background-color: #1e293b;
-  color: #94a3b8;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  color: #2563eb;
+  border: 1px solid #cbd5e1;
   border-radius: 0.5rem;
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   transition: all 0.2s ease;
 }
 
 .btnArchived:hover {
-  color: #f8fafc;
+  background-color: #2563eb;
+  color: #ffffff;
   border-color: #2563eb;
-  background-color: #0f172a;
 }
diff --git a/src/lib/components/ArchivedSection.tsx b/src/lib/components/ArchivedSection.tsx
index 431e908..127d933 100644
--- a/src/lib/components/ArchivedSection.tsx
+++ b/src/lib/components/ArchivedSection.tsx
@@ -15,7 +15,7 @@ export default function ArchivedSection({ archivedTasks }: ArchivedSectionProps)
   return (
     <div className={styles.container}>
       <button onClick={() => setIsOpen(true)} className={styles.btnArchived}>
-        📦 View Archived Tasks ({archivedTasks.length})
+        View Archived Tasks ({archivedTasks.length})
       </button>
 
       {isOpen && (
diff --git a/src/lib/components/ArchivedTasksModal.module.css b/src/lib/components/ArchivedTasksModal.module.css
index a5912c4..d53076a 100644
--- a/src/lib/components/ArchivedTasksModal.module.css
+++ b/src/lib/components/ArchivedTasksModal.module.css
@@ -5,19 +5,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(15, 23, 42, 0.75);
+  background-color: rgba(15, 23, 42, 0.6);
   padding: 1rem;
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(4px);
 }
 
 .dialog {
   width: 100%;
   max-width: 32rem;
   border-radius: 0.875rem;
-  background-color: #1e293b;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
   padding: 1.5rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -28,14 +28,14 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid #334155;
+  border-bottom: 1px solid #e2e8f0;
   padding-bottom: 0.75rem;
 }
 
 .title {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #f8fafc;
+  color: #0f172a;
   margin: 0;
 }
 
@@ -43,13 +43,13 @@
   background: none;
   border: none;
   font-size: 1.25rem;
-  color: #94a3b8;
+  color: #64748b;
   cursor: pointer;
   transition: color 0.2s;
 }
 
 .btnClose:hover {
-  color: #f8fafc;
+  color: #0f172a;
 }
 
 .content {
@@ -59,7 +59,7 @@
 }
 
 .emptyText {
-  color: #94a3b8;
+  color: #64748b;
   text-align: center;
   padding: 2rem 0;
   font-size: 0.875rem;
@@ -75,8 +75,8 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: #0f172a;
-  border: 1px solid #334155;
+  background-color: #f8fafc;
+  border: 1px solid #e2e8f0;
   padding: 0.75rem 1rem;
   border-radius: 0.5rem;
 }
@@ -89,13 +89,13 @@
 
 .taskTitle {
   font-weight: 600;
-  color: #f8fafc;
+  color: #0f172a;
   font-size: 0.9375rem;
 }
 
 .taskTopic {
   font-size: 0.75rem;
-  color: #93c5fd;
+  color: #2563eb;
 }
 
 .btnUnarchive {
@@ -117,22 +117,22 @@
 .footer {
   display: flex;
   justify-content: flex-end;
-  border-top: 1px solid #334155;
+  border-top: 1px solid #e2e8f0;
   padding-top: 0.75rem;
 }
 
 .btnCloseBtn {
   padding: 0.5rem 1rem;
-  background-color: #334155;
-  color: #f8fafc;
+  background-color: #f1f5f9;
+  color: #334155;
   border-radius: 0.5rem;
   font-size: 0.875rem;
   font-weight: 600;
-  border: none;
+  border: 1px solid #cbd5e1;
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
 .btnCloseBtn:hover {
-  background-color: #475569;
+  background-color: #e2e8f0;
 }
diff --git a/src/lib/components/ArchivedTasksModal.tsx b/src/lib/components/ArchivedTasksModal.tsx
index 950461c..238fa03 100644
--- a/src/lib/components/ArchivedTasksModal.tsx
+++ b/src/lib/components/ArchivedTasksModal.tsx
@@ -28,8 +28,8 @@ export default function ArchivedTasksModal({ archivedTasks, onClose }: ArchivedT
     <div className={styles.overlay}>
       <div className={styles.dialog}>
         <div className={styles.header}>
-          <h2 className={styles.title}>📦 Archived Tasks ({archivedTasks.length})</h2>
-          <button onClick={onClose} className={styles.btnClose}>✕</button>
+          <h2 className={styles.title}>Archived Tasks ({archivedTasks.length})</h2>
+          <button onClick={onClose} className={styles.btnClose}>X</button>
         </div>
 
         <div className={styles.content}>
@@ -41,14 +41,14 @@ export default function ArchivedTasksModal({ archivedTasks, onClose }: ArchivedT
                 <div key={task.id} className={styles.taskItem}>
                   <div className={styles.taskInfo}>
                     <span className={styles.taskTitle}>{task.title}</span>
-                    <span className={styles.taskTopic}>#{task.topic} • Due: {task.due_date}</span>
+                    <span className={styles.taskTopic}>#{task.topic} - Due: {task.due_date}</span>
                   </div>
                   <button
                     onClick={() => handleUnarchive(task.id)}
                     disabled={restoringId === task.id}
                     className={styles.btnUnarchive}
                   >
-                    {restoringId === task.id ? 'Restoring...' : '↩ Unarchive'}
+                    {restoringId === task.id ? 'Restoring...' : 'Unarchive'}
                   </button>
                 </div>
               ))}
diff --git a/src/lib/components/TaskCard.module.css b/src/lib/components/TaskCard.module.css
index 072c881..1c3115f 100644
--- a/src/lib/components/TaskCard.module.css
+++ b/src/lib/components/TaskCard.module.css
@@ -1,19 +1,19 @@
-/* Task Card Container - Matching Form UI */
+/* Light White Component Task Card */
 .cardContainer {
   padding: 1.25rem;
   border-radius: 0.875rem;
-  border: 1px solid #334155;
-  background-color: #1e293b;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid #e2e8f0;
+  background-color: #ffffff;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
   gap: 0.875rem;
-  transition: transform 0.2s ease, border-color 0.2s ease;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .cardContainer:hover {
   transform: translateY(-2px);
-  border-color: #475569;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 
 .archiving {
@@ -31,15 +31,15 @@
 .title {
   font-weight: 700;
   font-size: 1.125rem;
-  color: #f8fafc;
+  color: #0f172a;
   margin: 0;
   line-height: 1.4;
 }
 
-/* Unified Status Badges with Subtle Tints */
+/* Status Badge Colors (Green, Orange, Blue) */
 .badge {
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 700;
   padding: 0.25rem 0.625rem;
   border-radius: 9999px;
   text-transform: uppercase;
@@ -47,28 +47,31 @@
   white-space: nowrap;
 }
 
+/* Green Status: Complete */
 .statusComplete {
-  background-color: rgba(16, 185, 129, 0.12);
-  color: #34d399;
-  border: 1px solid rgba(52, 211, 153, 0.25);
+  background-color: #dcfce7;
+  color: #15803d;
+  border: 1px solid #86efac;
 }
 
+/* Orange Status: In-Progress */
 .statusInProgress {
-  background-color: rgba(245, 158, 11, 0.12);
-  color: #fbbf24;
-  border: 1px solid rgba(251, 191, 36, 0.25);
+  background-color: #ffedd5;
+  color: #c2410c;
+  border: 1px solid #fdba74;
 }
 
+/* Blue Status: Todo */
 .statusTodo {
-  background-color: rgba(59, 130, 246, 0.12);
-  color: #60a5fa;
-  border: 1px solid rgba(96, 165, 250, 0.25);
+  background-color: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #93c5fd;
 }
 
 /* Description Text */
 .description {
   font-size: 0.875rem;
-  color: #94a3b8;
+  color: #475569;
   margin: 0;
   line-height: 1.5;
 }
@@ -78,9 +81,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid #334155;
+  border-top: 1px solid #f1f5f9;
   padding-top: 0.75rem;
-  color: #94a3b8;
+  color: #64748b;
   font-size: 0.8125rem;
 }
 
@@ -91,28 +94,23 @@
 }
 
 .topicTag {
-  background-color: #0f172a;
-  color: #93c5fd;
+  background-color: #f1f5f9;
+  color: #2563eb;
   font-weight: 600;
   padding: 0.125rem 0.5rem;
   border-radius: 0.375rem;
-  border: 1px solid #334155;
+  border: 1px solid #cbd5e1;
 }
 
+/* Red Status: Overdue */
 .overdueBadge {
-  background-color: rgba(239, 68, 68, 0.15);
-  color: #f87171;
-  border: 1px solid rgba(248, 113, 113, 0.3);
+  background-color: #fee2e2;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
   padding: 0.15rem 0.5rem;
   border-radius: 9999px;
   font-size: 0.75rem;
   font-weight: 700;
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
 }
 
 /* Action Buttons */
@@ -126,11 +124,11 @@
 .btnEdit {
   padding: 0.375rem 0.875rem;
   border-radius: 0.5rem;
-  background-color: #334155;
-  color: #f8fafc;
+  background-color: #f8fafc;
+  color: #0f172a;
   font-size: 0.8125rem;
   font-weight: 600;
-  border: 1px solid #475569;
+  border: 1px solid #cbd5e1;
   cursor: pointer;
   transition: all 0.2s ease;
 }
@@ -144,18 +142,18 @@
 .btnArchive {
   padding: 0.375rem 0.875rem;
   border-radius: 0.5rem;
-  background-color: #334155;
-  color: #f87171;
+  background-color: #f8fafc;
+  color: #dc2626;
   font-size: 0.8125rem;
   font-weight: 600;
-  border: 1px solid #475569;
+  border: 1px solid #cbd5e1;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .btnArchive:hover {
-  background-color: #ef4444;
-  border-color: #ef4444;
+  background-color: #dc2626;
+  border-color: #dc2626;
   color: #ffffff;
 }
 
diff --git a/src/lib/components/TaskEditModal.module.css b/src/lib/components/TaskEditModal.module.css
index 814483c..befa7f1 100644
--- a/src/lib/components/TaskEditModal.module.css
+++ b/src/lib/components/TaskEditModal.module.css
@@ -6,9 +6,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: rgba(15, 23, 42, 0.7);
+  background-color: rgba(15, 23, 42, 0.6);
   padding: 1rem;
-  backdrop-filter: blur(6px);
+  backdrop-filter: blur(4px);
 }
 
 /* Modal Dialog Box */
@@ -16,10 +16,10 @@
   width: 100%;
   max-width: 32rem;
   border-radius: 0.875rem;
-  background-color: #1e293b;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
   padding: 1.5rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
 }
 
 /* Modal Header */
@@ -33,7 +33,7 @@
 .title {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #f8fafc;
+  color: #0f172a;
   margin: 0;
 }
 
@@ -41,13 +41,13 @@
   background: none;
   border: none;
   font-size: 1.25rem;
-  color: #94a3b8;
+  color: #64748b;
   cursor: pointer;
   transition: color 0.2s;
 }
 
 .btnClose:hover {
-  color: #f8fafc;
+  color: #0f172a;
 }
 
 /* Form Layout */
@@ -72,7 +72,7 @@
   display: block;
   font-size: 0.8125rem;
   font-weight: 600;
-  color: #cbd5e1;
+  color: #334155;
   margin-bottom: 0.375rem;
 }
 
@@ -81,17 +81,17 @@
   padding: 0.625rem 0.875rem;
   font-size: 0.875rem;
   border-radius: 0.5rem;
-  border: 1px solid #334155;
-  background-color: #0f172a;
-  color: #f8fafc;
+  border: 1px solid #cbd5e1;
+  background-color: #f8fafc;
+  color: #0f172a;
   outline: none;
   box-sizing: border-box;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .input:focus, .select:focus, .textarea:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
 }
 
 /* Footer Buttons */
@@ -106,17 +106,16 @@
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   border-radius: 0.5rem;
-  border: 1px solid #334155;
-  background: #0f172a;
-  color: #cbd5e1;
+  border: 1px solid #cbd5e1;
+  background: #f8fafc;
+  color: #334155;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
 .btnCancel:hover {
-  background-color: #334155;
-  color: #f8fafc;
+  background-color: #e2e8f0;
 }
 
 .btnSave {
@@ -129,7 +128,7 @@
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s;
-  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
+  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
 }
 
 .btnSave:hover {
diff --git a/src/lib/components/TaskEditModal.tsx b/src/lib/components/TaskEditModal.tsx
index 9b65647..48bf972 100644
--- a/src/lib/components/TaskEditModal.tsx
+++ b/src/lib/components/TaskEditModal.tsx
@@ -33,7 +33,7 @@ export default function TaskEditModal({ task, onClose }: TaskEditModalProps) {
       <div className={styles.dialog}>
         <div className={styles.header}>
           <h2 className={styles.title}>Edit Task #{task.id}</h2>
-          <button onClick={onClose} className={styles.btnClose}>✕</button>
+          <button onClick={onClose} className={styles.btnClose}>X</button>
         </div>
 
         <form onSubmit={handleSubmit} className={styles.form}>
diff --git a/src/lib/components/TaskFilterToolbar.module.css b/src/lib/components/TaskFilterToolbar.module.css
index b2f227f..2b52dad 100644
--- a/src/lib/components/TaskFilterToolbar.module.css
+++ b/src/lib/components/TaskFilterToolbar.module.css
@@ -2,26 +2,26 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: #1e293b;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
   padding: 1rem 1.25rem;
   border-radius: 0.875rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
 }
 
 .label {
   font-size: 0.875rem;
   font-weight: 600;
-  color: #94a3b8;
+  color: #334155;
 }
 
 .select {
   padding: 0.5rem 0.875rem;
   font-size: 0.875rem;
   border-radius: 0.5rem;
-  border: 1px solid #334155;
-  background-color: #0f172a;
-  color: #60a5fa;
+  border: 1px solid #cbd5e1;
+  background-color: #f8fafc;
+  color: #2563eb;
   font-weight: 600;
   outline: none;
   cursor: pointer;
@@ -29,5 +29,5 @@
 }
 
 .select:focus {
-  border-color: #3b82f6;
+  border-color: #2563eb;
 }
diff --git a/src/lib/components/TaskForm.module.css b/src/lib/components/TaskForm.module.css
index d5586c1..dca485d 100644
--- a/src/lib/components/TaskForm.module.css
+++ b/src/lib/components/TaskForm.module.css
@@ -1,10 +1,10 @@
-/* Dark Sleek Form Card */
+/* Light White Component Form Card */
 .formCard {
-  background-color: #1e293b;
-  border: 1px solid #334155;
+  background-color: #ffffff;
+  border: 1px solid #e2e8f0;
   border-radius: 0.875rem;
   padding: 1.5rem;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
@@ -13,7 +13,7 @@
 .heading {
   font-size: 1.25rem;
   font-weight: 700;
-  color: #f8fafc;
+  color: #0f172a;
   margin: 0;
 }
 
@@ -38,7 +38,7 @@
   display: block;
   font-size: 0.8125rem;
   font-weight: 600;
-  color: #cbd5e1;
+  color: #334155;
   margin-bottom: 0.375rem;
 }
 
@@ -47,17 +47,17 @@
   padding: 0.625rem 0.875rem;
   font-size: 0.875rem;
   border-radius: 0.5rem;
-  border: 1px solid #334155;
-  background-color: #0f172a;
-  color: #f8fafc;
+  border: 1px solid #cbd5e1;
+  background-color: #f8fafc;
+  color: #0f172a;
   outline: none;
   box-sizing: border-box;
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
 .input:focus, .select:focus, .textarea:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+  border-color: #2563eb;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
 }
 
 .actions {
@@ -74,11 +74,10 @@
   font-weight: 600;
   border: none;
   cursor: pointer;
-  transition: background-color 0.2s, transform 0.1s;
-  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
+  transition: background-color 0.2s;
+  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
 }
 
 .btnSubmit:hover {
   background-color: #1d4ed8;
-  transform: translateY(-1px);
 }
diff --git a/src/lib/components/TaskForm.tsx b/src/lib/components/TaskForm.tsx
index 63eb270..5b50b87 100644
--- a/src/lib/components/TaskForm.tsx
+++ b/src/lib/components/TaskForm.tsx
@@ -76,7 +76,7 @@ export default function TaskForm() {
 
       <div className={styles.actions}>
         <button type="submit" disabled={isSubmitting} className={styles.btnSubmit}>
-          {isSubmitting ? 'Adding Task...' : '+ Add Task'}
+          {isSubmitting ? 'Adding Task...' : 'Add Task'}
         </button>
       </div>
     </form>