diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index b4a54b0..2513808 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -4,7 +4,8 @@ on:
   pull_request:
     branches: ["main", "master"]
   push:
-    branches: ["main", "master"]
+    branches: ["**"]
+  workflow_dispatch:
 
 jobs:
   test:
diff --git a/src/components/AuthDialog.tsx b/src/components/AuthDialog.tsx
index f4c2cf9..362022c 100644
--- a/src/components/AuthDialog.tsx
+++ b/src/components/AuthDialog.tsx
@@ -107,14 +107,14 @@ export const AuthDialog: React.FC<{ isOpen: boolean; onClose: () => void }> = ({
               </Button>
             </form>
             {error && (
-              <Alert className="mt-4">
+              <Alert variant="destructive" className="mt-4">
                 <AlertDescription>{error}</AlertDescription>
               </Alert>
             )}
 
             {success && (
-              <Alert className="mt-4">
-                <AlertDescription className="text-green-600">
+              <Alert className="mt-4 border-green-200 bg-green-50">
+                <AlertDescription className="text-green-700">
                   {success}
                 </AlertDescription>
               </Alert>
diff --git a/src/components/CategoryManagement.tsx b/src/components/CategoryManagement.tsx
index 34e35b4..d04997e 100644
--- a/src/components/CategoryManagement.tsx
+++ b/src/components/CategoryManagement.tsx
@@ -24,6 +24,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Plus, Edit, Trash2, Tag } from "lucide-react";
 import { TaskCategory } from "@/config/categories";
 import { useTimeTracking } from "@/hooks/useTimeTracking";
+import { toast } from "@/hooks/use-toast";
 
 interface CategoryManagementProps {
 	isOpen: boolean;
@@ -41,6 +42,7 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 	);
 	const [isAddingNew, setIsAddingNew] = useState(false);
 	const [deleteTargetId, setDeleteTargetId] = useState<string | null>(null);
+	const [isSaving, setIsSaving] = useState(false);
 	const [formData, setFormData] = useState({
 		name: '',
 		description: '',
@@ -61,6 +63,7 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 
 	const handleSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
+		setIsSaving(true);
 
 		const categoryData = {
 			name: formData.name.trim(),
@@ -69,16 +72,23 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 			isBillable: formData.isBillable
 		};
 
-		if (editingCategory) {
-			updateCategory(editingCategory.id, categoryData);
+		const isEditing = !!editingCategory;
+		if (isEditing) {
+			updateCategory(editingCategory!.id, categoryData);
 		} else {
 			addCategory(categoryData);
 		}
 
-		// Save changes to database
 		await forceSyncToDatabase();
+		toast({
+			title: isEditing ? "Category updated" : "Category added",
+			description: isEditing
+				? `"${categoryData.name}" has been updated.`
+				: `"${categoryData.name}" has been added.`
+		});
 
 		resetForm();
+		setIsSaving(false);
 	};
 
 	const handleEdit = (category: TaskCategory) => {
@@ -94,9 +104,16 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 
 	const handleDeleteConfirm = async () => {
 		if (!deleteTargetId) return;
+		setIsSaving(true);
+		const deletedName = categories.find((c) => c.id === deleteTargetId)?.name;
 		deleteCategory(deleteTargetId);
 		await forceSyncToDatabase();
+		toast({
+			title: "Category deleted",
+			description: deletedName ? `"${deletedName}" has been removed.` : undefined
+		});
 		setDeleteTargetId(null);
+		setIsSaving(false);
 	};
 
 	const predefinedColors = [
@@ -146,9 +163,12 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 							<CardContent>
 								<form onSubmit={handleSubmit} className="space-y-4">
 									<div>
-										<Label htmlFor="name">Category Name *</Label>
+										<Label htmlFor="name">
+											Category Name <span className="text-destructive" aria-hidden="true">*</span>
+										</Label>
 										<Input
 											id="name"
+											aria-required="true"
 											value={formData.name}
 											onChange={(e) =>
 												setFormData((prev) => ({
@@ -193,7 +213,7 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 													}
 													className="w-16 h-10"
 												/>
-												<span className="text-sm text-gray-500">
+												<span className="text-sm text-muted-foreground">
 													{formData.color}
 												</span>
 												<div
@@ -204,7 +224,7 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 
 											{/* Predefined Colors */}
 											<div className="flex flex-wrap gap-2">
-												<span className="text-sm text-gray-600 w-full">
+												<span className="text-sm text-muted-foreground w-full">
 													Quick colors:
 												</span>
 												{predefinedColors.map((color) => (
@@ -240,16 +260,18 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 										<Label htmlFor="billable" className="text-sm font-medium">
 											Billable category
 										</Label>
-										<span className="text-xs text-gray-500">
+										<span className="text-xs text-muted-foreground">
 											(Tasks in this category can generate revenue)
 										</span>
 									</div>
 
 									<div className="flex space-x-2">
-										<Button type="submit">
-											{editingCategory ? 'Update' : 'Add'}
+										<Button type="submit" disabled={isSaving}>
+											{isSaving
+												? (editingCategory ? "Updating..." : "Adding...")
+												: (editingCategory ? "Update" : "Add")}
 										</Button>
-										<Button type="button" variant="outline" onClick={resetForm}>
+										<Button type="button" variant="outline" onClick={resetForm} disabled={isSaving}>
 											Cancel
 										</Button>
 									</div>
@@ -267,8 +289,8 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 						{categories.length === 0 ? (
 							<Card>
 								<CardContent className="text-center py-8">
-									<Tag className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-									<p className="text-gray-600">
+									<Tag className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
+									<p className="text-muted-foreground">
 										No categories yet. Add your first category to get started!
 									</p>
 								</CardContent>
@@ -291,19 +313,19 @@ export const CategoryManagement: React.FC<CategoryManagementProps> = ({
 														/>
 														<div>
 															<div className="flex items-center space-x-2">
-																<h4 className="font-semibold text-gray-900">
+																<h4 className="font-semibold text-foreground">
 																	{category.name}
 																</h4>
 																<span className={`px-2 py-1 text-xs rounded-full ${
 																	category.isBillable !== false
 																		? 'bg-green-100 text-green-800'
-																		: 'bg-gray-100 text-gray-800'
+																		: 'bg-muted text-muted-foreground'
 																}`}>
 																	{category.isBillable !== false ? 'Billable' : 'Non-billable'}
 																</span>
 															</div>
 															{category.description && (
-																<p className="text-sm text-gray-600 mt-1">
+																<p className="text-sm text-muted-foreground mt-1">
 																	{category.description}
 																</p>
 															)}
diff --git a/src/components/DaySummary.tsx b/src/components/DaySummary.tsx
index 7a09b6f..bd08e70 100644
--- a/src/components/DaySummary.tsx
+++ b/src/components/DaySummary.tsx
@@ -29,7 +29,7 @@ export const DaySummary: React.FC<DaySummaryProps> = ({
         </CardHeader>
         <CardContent>
           <div className="space-y-4">
-            <div className="text-sm text-gray-600">
+            <div className="text-sm text-muted-foreground">
               <p>{formatDate(dayStartTime)}</p>
               <p>Started at {formatTime(dayStartTime)}</p>
             </div>
@@ -39,16 +39,16 @@ export const DaySummary: React.FC<DaySummaryProps> = ({
               <span className="text-2xl font-bold text-blue-600">
                 {formatDuration(totalDuration)}
               </span>
-              <span className="text-gray-600">total time</span>
+              <span className="text-muted-foreground">total time</span>
             </div>
 
             <div className="space-y-2">
-              <h4 className="font-medium text-gray-900">Tasks completed:</h4>
+              <h4 className="font-medium text-foreground">Tasks completed:</h4>
               <div className="space-y-1">
                 {tasks.map((task) => (
                   <div key={task.id} className="flex justify-between text-sm">
-                    <span className="text-gray-700">{task.title}</span>
-                    <span className="text-gray-600">
+                    <span className="text-foreground">{task.title}</span>
+                    <span className="text-muted-foreground">
                       {formatDuration(task.duration || 0)}
                     </span>
                   </div>
diff --git a/src/components/ExportDialog.tsx b/src/components/ExportDialog.tsx
index 1fb4959..06160dc 100644
--- a/src/components/ExportDialog.tsx
+++ b/src/components/ExportDialog.tsx
@@ -408,7 +408,7 @@ export const ExportDialog: React.FC<ExportDialogProps> = ({
 
                     <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                       <Upload className="w-8 h-8 mx-auto mb-2 text-muted-foreground" />
-                      <p className="text-sm text-gray-600 mb-2">
+                      <p className="text-sm text-muted-foreground mb-2">
                         Click to select a CSV file
                       </p>
                       <Button onClick={handleImport} variant="outline">
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index fee9b58..0426502 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -51,10 +51,10 @@ const SiteNavigationMenu = () => {
       <NavigationMenu className="relative bg-gradient-to-br from-gray-50 to-blue-50 print:hidden block">
         <List className="flex items-center justify-between px-4 py-2 md:px-8 md:py-4 m-0 list-none rounded-md bg-white p-1 shadow-sm">
           <Item className="flex items-center justify-between">
-            <h1 className="text-2xl font-bold text-gray-900 flex">
+            <h1 className="text-2xl font-bold text-foreground flex">
               <Link
                 to="/"
-                className="flex items-center text-gray-900 hover:text-blue-700"
+                className="flex items-center text-foreground hover:text-blue-700"
               >
                 <img
                   src="icon.png"
@@ -65,8 +65,8 @@ const SiteNavigationMenu = () => {
               </Link>
             </h1>
             {isDayStarted && tasks.length > 0 && (
-              <span className="ml-4 text-lg text-gray-900 font-bold inline-flex">
-                <CalendarClock className="mr-1 text-gray-900" />
+              <span className="ml-4 text-lg text-foreground font-bold inline-flex">
+                <CalendarClock className="mr-1 text-foreground" />
                 {formatDuration(runningTime)}
               </span>
             )}
diff --git a/src/components/NewTaskForm.tsx b/src/components/NewTaskForm.tsx
index 3d39c86..1eb7482 100644
--- a/src/components/NewTaskForm.tsx
+++ b/src/components/NewTaskForm.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -28,6 +30,7 @@ interface NewTaskFormProps {
 export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen = false }) => {
   const { projects, categories } = useTimeTracking();
   const [title, setTitle] = useState("");
+  const [titleTouched, setTitleTouched] = useState(false);
   const [description, setDescription] = useState("");
   const [selectedProject, setSelectedProject] = useState<string>("");
   const [selectedCategory, setSelectedCategory] = useState<string>("");
@@ -40,6 +43,7 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    setTitleTouched(true);
     if (title.trim()) {
       onSubmit(
         title.trim(),
@@ -49,6 +53,7 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
         selectedCategoryData?.id
       );
       setTitle("");
+      setTitleTouched(false);
       setDescription("");
       setSelectedProject("");
       setSelectedCategory("");
@@ -56,6 +61,8 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
     }
   };
 
+  const titleError = titleTouched && !title.trim() ? "Task title is required." : "";
+
   if (!isOpen) {
     return (
       <Button
@@ -76,16 +83,34 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
       </CardHeader>
       <CardContent>
         <form onSubmit={handleSubmit} className="space-y-3">
-          <input
-            type="text"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            placeholder="Enter task title"
-            className="w-full p-3 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-            required
-            autoFocus
-          />
+          <div className="space-y-1">
+            <Label htmlFor="new-task-title">
+              Task Title <span className="text-destructive" aria-hidden="true">*</span>
+            </Label>
+            <Input
+              id="new-task-title"
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              onBlur={() => setTitleTouched(true)}
+              placeholder="What are you working on?"
+              aria-required="true"
+              aria-invalid={!!titleError}
+              aria-describedby={titleError ? "new-task-title-error" : undefined}
+              autoFocus
+            />
+            {titleError && (
+              <p id="new-task-title-error" className="text-sm text-destructive" role="alert">
+                {titleError}
+              </p>
+            )}
+          </div>
 
+          <div className="space-y-1">
+            <div className="flex items-center justify-between">
+              <Label>Description</Label>
+              <span className="text-xs text-muted-foreground">Markdown supported</span>
+            </div>
           <Tabs defaultValue="edit" className="w-full">
             <TabsList className="grid w-full grid-cols-2">
               <TabsTrigger value="edit">Edit</TabsTrigger>
@@ -109,14 +134,17 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
               </div>
             </TabsContent>
           </Tabs>
+          </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
             {categories.length > 0 && (
+              <div className="space-y-1">
+                <Label htmlFor="new-task-category">Category</Label>
               <Select
                 value={selectedCategory}
                 onValueChange={setSelectedCategory}
               >
-                <SelectTrigger className="w-full">
+                <SelectTrigger id="new-task-category" className="w-full" aria-label="Select category">
                   <SelectValue placeholder="Select a category" />
                 </SelectTrigger>
                 <SelectContent>
@@ -133,14 +161,17 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
                   ))}
                 </SelectContent>
               </Select>
+              </div>
             )}
 
             {projects.length > 0 && (
+              <div className="space-y-1">
+                <Label htmlFor="new-task-project">Project</Label>
               <Select
                 value={selectedProject}
                 onValueChange={setSelectedProject}
               >
-                <SelectTrigger className="w-full">
+                <SelectTrigger id="new-task-project" className="w-full" aria-label="Select project">
                   <SelectValue placeholder="Select a project" />
                 </SelectTrigger>
                 <SelectContent>
@@ -148,7 +179,7 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
                     <SelectItem key={project.id} value={project.id}>
                       <div className="flex flex-col">
                         <span>{project.name}</span>
-                        <span className="text-sm text-gray-500">
+                        <span className="text-sm text-muted-foreground">
                           {project.client}
                         </span>
                       </div>
@@ -156,6 +187,7 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
                   ))}
                 </SelectContent>
               </Select>
+              </div>
             )}
           </div>
 
@@ -165,6 +197,7 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
               onClick={() => {
                 setIsOpen(false);
                 setTitle("");
+                setTitleTouched(false);
                 setDescription("");
                 setSelectedProject("");
                 setSelectedCategory("");
@@ -173,7 +206,7 @@ export const NewTaskForm: React.FC<NewTaskFormProps> = ({ onSubmit, defaultOpen
             >
               Cancel
             </Button>
-            <Button type="submit" variant="default" disabled={!title.trim()}>
+            <Button type="submit" variant="default">
               Start Task
             </Button>
           </div>
diff --git a/src/components/ProjectManagement.tsx b/src/components/ProjectManagement.tsx
index a8864df..c14e86a 100644
--- a/src/components/ProjectManagement.tsx
+++ b/src/components/ProjectManagement.tsx
@@ -22,6 +22,7 @@ import { Label } from "@/components/ui/label";
 import { Plus, Edit, Trash2, Briefcase, RotateCcw } from "lucide-react";
 import { Project } from "@/contexts/TimeTrackingContext";
 import { useTimeTracking } from "@/hooks/useTimeTracking";
+import { toast } from "@/hooks/use-toast";
 
 interface ProjectManagementProps {
 	isOpen: boolean;
@@ -75,8 +76,16 @@ export const ProjectManagement: React.FC<ProjectManagementProps> = ({
 
 		if (editingProject) {
 			updateProject(editingProject.id, projectData);
+			toast({
+				title: "Project updated",
+				description: `"${projectData.name}" has been updated.`
+			});
 		} else {
 			addProject(projectData);
+			toast({
+				title: "Project added",
+				description: `"${projectData.name}" has been added.`
+			});
 		}
 
 		resetForm();
@@ -95,12 +104,18 @@ export const ProjectManagement: React.FC<ProjectManagementProps> = ({
 
 	const handleDeleteConfirm = () => {
 		if (!deleteTargetId) return;
+		const deletedName = projects.find((p) => p.id === deleteTargetId)?.name;
 		deleteProject(deleteTargetId);
+		toast({
+			title: "Project deleted",
+			description: deletedName ? `"${deletedName}" has been removed.` : undefined
+		});
 		setDeleteTargetId(null);
 	};
 
 	const handleResetConfirm = () => {
 		resetProjectsToDefaults();
+		toast({ title: "Projects reset", description: "Projects have been restored to defaults." });
 		setShowResetDialog(false);
 	};
 
@@ -151,7 +166,9 @@ export const ProjectManagement: React.FC<ProjectManagementProps> = ({
 									<form onSubmit={handleSubmit} className="space-y-4">
 										<div className="grid grid-cols-2 gap-4">
 											<div>
-												<Label htmlFor="name">Project Name *</Label>
+												<Label htmlFor="name">
+													Project Name <span className="text-destructive" aria-hidden="true">*</span>
+												</Label>
 												<Input
 													id="name"
 													value={formData.name}
@@ -162,11 +179,14 @@ export const ProjectManagement: React.FC<ProjectManagementProps> = ({
 														}))
 													}
 													placeholder="Enter project name"
+													aria-required="true"
 													required
 												/>
 											</div>
 											<div>
-												<Label htmlFor="client">Client Name *</Label>
+												<Label htmlFor="client">
+													Client Name <span className="text-destructive" aria-hidden="true">*</span>
+												</Label>
 												<Input
 													id="client"
 													value={formData.client}
@@ -177,6 +197,7 @@ export const ProjectManagement: React.FC<ProjectManagementProps> = ({
 														}))
 													}
 													placeholder="Enter client name"
+													aria-required="true"
 													required
 												/>
 											</div>
@@ -214,7 +235,7 @@ export const ProjectManagement: React.FC<ProjectManagementProps> = ({
 														}
 														className="w-16 h-10"
 													/>
-													<span className="text-sm text-gray-500">
+													<span className="text-sm text-muted-foreground">
 														{formData.color}
 													</span>
 												</div>
diff --git a/src/components/SyncStatus.tsx b/src/components/SyncStatus.tsx
index 3175265..b8f5003 100644
--- a/src/components/SyncStatus.tsx
+++ b/src/components/SyncStatus.tsx
@@ -39,7 +39,7 @@ export const SyncStatus = memo(function SyncStatus({
 
   if (!isAuthenticated) {
     return (
-      <div className="flex items-center gap-2 text-sm text-gray-500">
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
diff --git a/src/components/TaskEditDialog.tsx b/src/components/TaskEditDialog.tsx
index 0a2f364..32bba35 100644
--- a/src/components/TaskEditDialog.tsx
+++ b/src/components/TaskEditDialog.tsx
@@ -24,6 +24,7 @@ import { Clock, Save } from 'lucide-react';
 import { Task } from '@/contexts/TimeTrackingContext';
 import { useTimeTracking } from '@/hooks/useTimeTracking';
 import { formatTime, formatDate } from '@/utils/timeUtil';
+import { toast } from '@/hooks/use-toast';
 
 interface TaskEditDialogProps {
   task: Task;
@@ -150,7 +151,11 @@ export const TaskEditDialog: React.FC<TaskEditDialogProps> = ({
   const handleSave = () => {
     // Validate required fields
     if (!formData.title.trim()) {
-      alert('Task title is required');
+      toast({
+        title: 'Title required',
+        description: 'Please enter a task title before saving.',
+        variant: 'destructive'
+      });
       return;
     }
 
@@ -225,7 +230,7 @@ export const TaskEditDialog: React.FC<TaskEditDialogProps> = ({
                 <CardContent className="space-y-4">
                   <div>
                     <Label htmlFor="title">
-                      Task Title <span className="text-red-700">*</span>
+                      Task Title <span className="text-destructive" aria-hidden="true">*</span>
                     </Label>
                     <Input
                       id="title"
@@ -237,11 +242,15 @@ export const TaskEditDialog: React.FC<TaskEditDialogProps> = ({
                         }))
                       }
                       placeholder="Enter task title"
+                      aria-required="true"
                     />
                   </div>
 
                   <div>
-                    <Label htmlFor="description">Description</Label>
+                    <Label htmlFor="description">
+                      Description{' '}
+                      <span className="text-xs font-normal text-muted-foreground">(supports Markdown)</span>
+                    </Label>
                     <Tabs defaultValue="edit" className="w-full">
                       <TabsList className="grid w-full grid-cols-2">
                         <TabsTrigger value="edit">Edit</TabsTrigger>
@@ -347,7 +356,7 @@ export const TaskEditDialog: React.FC<TaskEditDialogProps> = ({
                                     )?.name
                                   }
                                 </span>
-                                <span className="text-sm text-gray-500">
+                                <span className="text-sm text-muted-foreground">
                                   {
                                     projects.find(
                                       p => p.id === formData.project
@@ -366,7 +375,7 @@ export const TaskEditDialog: React.FC<TaskEditDialogProps> = ({
                             <SelectItem key={project.id} value={project.id}>
                               <div className="flex flex-col">
                                 <span>{project.name}</span>
-                                <span className="text-sm text-gray-500">
+                                <span className="text-sm text-muted-foreground">
                                   {project.client}
                                 </span>
                               </div>
@@ -384,13 +393,13 @@ export const TaskEditDialog: React.FC<TaskEditDialogProps> = ({
               <Card>
                 <CardHeader>
                   <CardTitle className="text-lg">Time Adjustment</CardTitle>
-                  <p className="text-sm text-gray-600">
+                  <p className="text-sm text-muted-foreground">
                     Times are automatically rounded to the nearest 15-minute
                     interval
                   </p>
                 </CardHeader>
                 <CardContent className="space-y-4">
-                  <div className="text-sm text-gray-600 mb-4">
+                  <div className="text-sm text-muted-foreground mb-4">
                     <p>Date: {formatDate(task.startTime)}</p>
                   </div>
 
diff --git a/src/components/TaskItem.tsx b/src/components/TaskItem.tsx
index c7edfd0..e1a4b19 100644
--- a/src/components/TaskItem.tsx
+++ b/src/components/TaskItem.tsx
@@ -4,6 +4,7 @@ import { useTimeTracking } from "@/hooks/useTimeTracking";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { TaskEditDialog } from "@/components/TaskEditDialog";
+import { DeleteConfirmationDialog } from "@/components/DeleteConfirmationDialog";
 import { MarkdownDisplay } from "@/components/MarkdownDisplay";
 import {
   Edit,
@@ -30,6 +31,7 @@ export const TaskItem: React.FC<TaskItemProps> = ({
 }) => {
   const { categories } = useTimeTracking();
   const [showEditDialog, setShowEditDialog] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
   const duration = task.duration || (isActive ? currentDuration : 0);
   const category = categories.find((c) => c.id === task.category);
@@ -53,7 +55,7 @@ export const TaskItem: React.FC<TaskItemProps> = ({
                     title={category.name}
                   />
                 )} */}
-                <h3 className="font-bold text-gray-900">
+                <h3 className="font-bold text-foreground">
                   {task.title}
                 </h3>
                 {isActive && (
@@ -69,7 +71,7 @@ export const TaskItem: React.FC<TaskItemProps> = ({
                 </div>
               )}
 
-              <div className="flex items-center flex-wrap gap-2 text-sm text-gray-600">
+              <div className="flex items-center flex-wrap gap-2 text-sm text-muted-foreground">
                 <span className="flex items-center space-x-1">
                   <ClockPlus className="w-3 h-3" />
                   <span>Started: {formatTime(task.startTime)}</span>
@@ -104,10 +106,11 @@ export const TaskItem: React.FC<TaskItemProps> = ({
 
             <div className="flex space-x-2 ml-4">
               <Button
-                onClick={() => onDelete(task.id)}
+                onClick={() => setShowDeleteDialog(true)}
                 size="sm"
                 variant="outline"
-                className="flex items-center space-x-1 text-red-600 hover:text-red-700 hover:bg-red-50"
+                aria-label={`Delete task: ${task.title}`}
+                className="flex items-center space-x-1 min-h-[44px] min-w-[44px] text-red-600 hover:text-red-700 hover:bg-red-50"
               >
                 <Trash2 className="w-3 h-3" />
                 <span className="hidden sm:block">Delete</span>
@@ -116,7 +119,8 @@ export const TaskItem: React.FC<TaskItemProps> = ({
                 onClick={() => setShowEditDialog(true)}
                 size="sm"
                 variant="outline"
-                className="flex items-center space-x-1"
+                aria-label={`Edit task: ${task.title}`}
+                className="flex items-center space-x-1 min-h-[44px] min-w-[44px]"
               >
                 <Edit className="w-3 h-3" />
                 <span className="hidden sm:block">Edit</span>
@@ -131,6 +135,16 @@ export const TaskItem: React.FC<TaskItemProps> = ({
         isOpen={showEditDialog}
         onClose={() => setShowEditDialog(false)}
       />
+
+      <DeleteConfirmationDialog
+        isOpen={showDeleteDialog}
+        onClose={() => setShowDeleteDialog(false)}
+        onConfirm={() => {
+          onDelete(task.id);
+          setShowDeleteDialog(false);
+        }}
+        taskTitle={task.title}
+      />
     </>
   );
 };
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 94ea7c0..8c77fe0 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -154,7 +154,7 @@ const TimeTrackerContent = () => {
 										)}
 										<p className="text-foreground">
 											{tasks.length === 0
-												? "No tasks tracked yet."
+												? "No tasks tracked yet — go to Tasks to start your first task."
 												: `${tasks.length} task${tasks.length === 1 ? "" : "s"} tracked today.`}
 										</p>
 										<Button asChild className="w-full">
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index cda36da..a2e6e0d 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -12,11 +12,11 @@ const NotFound = () => {
   }, [location.pathname]);
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+    <div className="min-h-screen flex items-center justify-center bg-background">
       <div className="text-center">
         <h1 className="text-4xl font-bold mb-4">404</h1>
-        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
-        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
+        <p className="text-xl text-muted-foreground mb-4">Oops! Page not found</p>
+        <a href="/" className="text-primary hover:text-primary/80 underline">
           Return to Home
         </a>
       </div>
diff --git a/src/pages/TaskList.tsx b/src/pages/TaskList.tsx
index 19b25aa..94faba4 100644
--- a/src/pages/TaskList.tsx
+++ b/src/pages/TaskList.tsx
@@ -98,9 +98,15 @@ const TaskList = () => {
 		>
 			<div className="max-w-4xl mx-auto pt-4 pb-6 px-4 md:p-6 space-y-6">
 				<NewTaskForm onSubmit={handleNewTask} />
-				{tasks.length > 0 && (
+				{tasks.length === 0 ? (
+					<div className="text-center py-8 text-muted-foreground" aria-live="polite">
+						<ClipboardList className="w-10 h-10 mx-auto mb-3 opacity-40" />
+						<p className="font-medium">No tasks yet</p>
+						<p className="text-sm mt-1">Use the button above to start tracking your first task.</p>
+					</div>
+				) : (
 					<div className="space-y-4">
-						<h2 className="flex justify-between text-lg font-semibold text-foreground">
+						<h2 className="flex justify-between text-lg font-semibold text-foreground" aria-live="polite" aria-atomic="true">
 							Tasks ({tasks.length})
 							{dayStartTime && (
 								<p className="text-sm text-muted-foreground">