diff --git a/.kiro/specs/ultimate-lists-app/tasks.md b/.kiro/specs/ultimate-lists-app/tasks.md
index d572aaa..1c2645d 100644
--- a/.kiro/specs/ultimate-lists-app/tasks.md
+++ b/.kiro/specs/ultimate-lists-app/tasks.md
@@ -184,7 +184,7 @@
   - Test "Add to Home Screen" functionality in Safari
   - _Requirements: 4.1, 4.2_
 
-- [ ] 14. Implement responsive design enhancements
+- [x] 14. Implement responsive design enhancements
   - Ensure all components are mobile-responsive
   - Add touch-optimized controls (larger tap targets)
   - Test on various screen sizes
diff --git a/app/globals.css b/app/globals.css
index 8136de0..5c9332e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -9,4 +9,48 @@ mark {
   padding: 0 2px;
   border-radius: 2px;
   font-weight: 500;
+}
+
+/* Touch-optimized tap targets - minimum 44x44px for iOS */
+@layer utilities {
+  .tap-target {
+    min-width: 44px;
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .tap-target-sm {
+    min-width: 40px;
+    min-height: 40px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* Smooth scrolling for better mobile experience */
+@layer base {
+  html {
+    -webkit-tap-highlight-color: transparent;
+    scroll-behavior: smooth;
+  }
+  
+  /* Improve touch scrolling on iOS */
+  body {
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  /* Better focus states for accessibility */
+  *:focus-visible {
+    outline: 2px solid #3B82F6;
+    outline-offset: 2px;
+  }
+  
+  /* Prevent text selection on buttons for better mobile UX */
+  button {
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+  }
 }
\ No newline at end of file
diff --git a/app/list/[id]/item/[itemId]/edit/page.tsx b/app/list/[id]/item/[itemId]/edit/page.tsx
index c26fbc6..4cccfc4 100644
--- a/app/list/[id]/item/[itemId]/edit/page.tsx
+++ b/app/list/[id]/item/[itemId]/edit/page.tsx
@@ -19,21 +19,21 @@ export default async function EditItemPage({ params }: PageProps) {
   }
 
   return (
-    <main className="container mx-auto px-4 py-8 max-w-2xl">
+    <main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-3xl">
       {/* Header */}
-      <div className="flex items-center gap-4 mb-6">
+      <div className="flex items-center gap-3 sm:gap-4 mb-6">
         <Link
           href={`/list/${params.id}/item/${params.itemId}`}
-          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
+          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black transition-colors tap-target-sm text-sm sm:text-base"
         >
-          <ArrowLeft size={20} />
+          <ArrowLeft size={20} className="flex-shrink-0" />
           <span>Back</span>
         </Link>
-        <h1 className="text-2xl font-bold text-gray-900">Edit Task</h1>
+        <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900">Edit Task</h1>
       </div>
 
       {/* Form */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-6 lg:p-8">
         <ItemForm listId={params.id} item={item} mode="edit" />
       </div>
     </main>
diff --git a/app/list/[id]/item/[itemId]/page.tsx b/app/list/[id]/item/[itemId]/page.tsx
index 27a988b..bf4787e 100644
--- a/app/list/[id]/item/[itemId]/page.tsx
+++ b/app/list/[id]/item/[itemId]/page.tsx
@@ -2,7 +2,7 @@ import { notFound } from 'next/navigation'
 import { getItem } from '@/lib/actions'
 import ItemDetail from '@/components/ItemDetail'
 import Link from 'next/link'
-import { ArrowLeft, Edit, Trash2 } from 'lucide-react'
+import { ArrowLeft, Edit } from 'lucide-react'
 import DeleteItemButton from '@/components/DeleteItemButton'
 import ToggleItemButton from '@/components/ToggleItemButton'
 
@@ -21,24 +21,24 @@ export default async function ItemDetailPage({ params }: PageProps) {
   }
 
   return (
-    <main className="container mx-auto px-4 py-8 max-w-3xl">
+    <main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-4xl">
       {/* Header Actions */}
-      <div className="flex items-center justify-between mb-6">
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
         <Link
           href={`/list/${params.id}`}
-          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 transition-colors"
+          className="flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black transition-colors tap-target-sm text-sm sm:text-base"
         >
-          <ArrowLeft size={20} />
+          <ArrowLeft size={20} className="flex-shrink-0" />
           <span>Back to List</span>
         </Link>
 
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 w-full sm:w-auto">
           <ToggleItemButton itemId={item.id} completed={item.completed} />
           <Link
             href={`/list/${params.id}/item/${params.itemId}/edit`}
-            className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors"
+            className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
           >
-            <Edit size={18} />
+            <Edit size={18} className="flex-shrink-0" />
             <span>Edit</span>
           </Link>
           <DeleteItemButton itemId={item.id} listId={params.id} />
@@ -46,7 +46,7 @@ export default async function ItemDetailPage({ params }: PageProps) {
       </div>
 
       {/* Item Detail */}
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-6 lg:p-8">
         <ItemDetail item={item} listTitle={item.list.title} />
       </div>
     </main>
diff --git a/app/list/[id]/page.tsx b/app/list/[id]/page.tsx
index 381bb93..8b20fe7 100644
--- a/app/list/[id]/page.tsx
+++ b/app/list/[id]/page.tsx
@@ -15,32 +15,32 @@ export default async function ListDetailPage({ params }: { params: { id: string
   const completedItems = list.items.filter(item => item.completed)
 
   return (
-    <main className="container mx-auto px-4 py-8 max-w-4xl">
+    <main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-6xl">
       {/* Header */}
-      <div className="mb-8">
+      <div className="mb-6 sm:mb-8">
         <Link 
           href="/" 
-          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 mb-4 transition-colors"
+          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black mb-4 transition-colors tap-target-sm text-sm sm:text-base"
         >
-          <ArrowLeft size={20} />
+          <ArrowLeft size={20} className="flex-shrink-0" />
           <span>Back to Lists</span>
         </Link>
         
-        <div className="flex items-center gap-3 mb-2">
+        <div className="flex items-center gap-2 sm:gap-3 mb-2">
           <div 
-            className="w-6 h-6 rounded-full flex-shrink-0" 
+            className="w-5 h-5 sm:w-6 sm:h-6 rounded-full flex-shrink-0" 
             style={{ backgroundColor: list.color }}
           />
-          <h1 className="text-3xl font-bold text-gray-900">{list.title}</h1>
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{list.title}</h1>
         </div>
         
-        <p className="text-gray-600">
+        <p className="text-gray-600 text-sm sm:text-base">
           {completedItems.length} of {list.items.length} tasks completed
         </p>
       </div>
 
       {/* Inline Item Creation */}
-      <div className="mb-6">
+      <div className="mb-6 sm:mb-8">
         <InlineItemCreate listId={list.id} />
       </div>
 
diff --git a/app/page.tsx b/app/page.tsx
index 253fd80..1949114 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,27 +7,27 @@ export default async function Home() {
   const lists = await getLists()
 
   return (
-    <main className="container mx-auto px-4 py-8 max-w-4xl">
-      <div className="flex items-center justify-between mb-8">
-        <h1 className="text-3xl font-bold text-gray-900">Ultimate Lists</h1>
+    <main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-7xl">
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 sm:mb-8">
+        <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900">Ultimate Lists</h1>
         <NewListButton />
       </div>
 
       {/* Global Search */}
-      <div className="mb-8">
+      <div className="mb-6 sm:mb-8">
         <GlobalSearch />
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6">
         {lists.map((list) => (
           <ListCard key={list.id} list={list} />
         ))}
       </div>
 
       {lists.length === 0 && (
-        <div className="text-center py-12">
-          <p className="text-gray-500 text-lg mb-4">No lists yet</p>
-          <p className="text-gray-400">Create your first list to get started</p>
+        <div className="text-center py-12 sm:py-16">
+          <p className="text-gray-500 text-base sm:text-lg mb-3 sm:mb-4">No lists yet</p>
+          <p className="text-gray-400 text-sm sm:text-base">Create your first list to get started</p>
         </div>
       )}
     </main>
diff --git a/components/DeleteItemButton.tsx b/components/DeleteItemButton.tsx
index a241778..55aa840 100644
--- a/components/DeleteItemButton.tsx
+++ b/components/DeleteItemButton.tsx
@@ -52,14 +52,14 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
         <button
           onClick={handleDelete}
           disabled={isDeleting}
-          className="px-3 py-2 bg-red-500 hover:bg-red-600 disabled:bg-red-300 text-white rounded-lg text-sm transition-colors"
+          className="px-3 sm:px-4 py-2 sm:py-2.5 bg-red-500 hover:bg-red-600 active:bg-red-700 disabled:bg-red-300 text-white rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
         >
           {isDeleting ? 'Deleting...' : 'Confirm'}
         </button>
         <button
           onClick={handleCancel}
           disabled={isDeleting}
-          className="px-3 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-sm transition-colors"
+          className="px-3 sm:px-4 py-2 sm:py-2.5 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
         >
           Cancel
         </button>
@@ -71,7 +71,7 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
     return (
       <button
         onClick={handleShowConfirm}
-        className="text-gray-400 hover:text-red-600 transition-colors p-2 hover:bg-red-50 rounded-lg"
+        className="text-gray-400 hover:text-red-600 active:text-red-700 transition-colors tap-target-sm hover:bg-red-50 active:bg-red-100 rounded-lg"
         aria-label="Delete item"
       >
         <Trash2 size={18} />
@@ -82,9 +82,9 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
   return (
     <button
       onClick={handleShowConfirm}
-      className="flex items-center gap-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
+      className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
     >
-      <Trash2 size={18} />
+      <Trash2 size={18} className="flex-shrink-0" />
       <span>Delete</span>
     </button>
   )
diff --git a/components/DeleteListButton.tsx b/components/DeleteListButton.tsx
index c5ac822..03e604c 100644
--- a/components/DeleteListButton.tsx
+++ b/components/DeleteListButton.tsx
@@ -45,7 +45,7 @@ export default function DeleteListButton({
     <>
       <button
         onClick={() => setIsConfirmOpen(true)}
-        className="text-red-600 hover:text-red-700 transition-colors p-2 hover:bg-red-50 rounded-lg"
+        className="text-red-600 hover:text-red-700 active:text-red-800 transition-colors tap-target-sm hover:bg-red-50 active:bg-red-100 rounded-lg"
         aria-label="Delete list"
       >
         <Trash2 size={20} />
@@ -57,26 +57,26 @@ export default function DeleteListButton({
         title="Delete List"
       >
         <div className="space-y-4">
-          <p className="text-gray-700">
+          <p className="text-gray-700 text-sm sm:text-base">
             Are you sure you want to delete <strong>{listTitle}</strong>?
           </p>
           {itemCount > 0 && (
-            <p className="text-red-600 text-sm">
+            <p className="text-red-600 text-xs sm:text-sm font-medium">
               This will permanently delete {itemCount} {itemCount === 1 ? 'item' : 'items'}.
             </p>
           )}
-          <div className="flex gap-2 justify-end pt-2">
+          <div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3 justify-end pt-2">
             <button
               onClick={() => setIsConfirmOpen(false)}
               disabled={isDeleting}
-              className="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50"
+              className="w-full sm:w-auto px-4 sm:px-5 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 rounded-lg transition-colors disabled:opacity-50 tap-target font-medium text-sm sm:text-base"
             >
               Cancel
             </button>
             <button
               onClick={handleDelete}
               disabled={isDeleting}
-              className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors disabled:opacity-50"
+              className="w-full sm:w-auto px-4 sm:px-5 py-3 bg-red-600 hover:bg-red-700 active:bg-red-800 text-white rounded-lg transition-colors disabled:opacity-50 tap-target font-medium text-sm sm:text-base"
             >
               {isDeleting ? 'Deleting...' : 'Delete'}
             </button>
diff --git a/components/FilterPanel.tsx b/components/FilterPanel.tsx
index 7b79fde..81554f8 100644
--- a/components/FilterPanel.tsx
+++ b/components/FilterPanel.tsx
@@ -92,27 +92,27 @@ export default function FilterPanel({
       {/* Header */}
       <button
         onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
+        className="w-full flex items-center justify-between p-4 sm:p-5 hover:bg-gray-50 active:bg-gray-100 transition-colors tap-target"
       >
-        <div className="flex items-center gap-2">
-          <Filter size={20} className="text-gray-600" />
-          <span className="font-medium text-gray-900">Filters & Sort</span>
+        <div className="flex items-center gap-2 sm:gap-3">
+          <Filter size={20} className="text-gray-600 flex-shrink-0" />
+          <span className="font-medium text-gray-900 text-sm sm:text-base">Filters & Sort</span>
           {hasActiveFilters && (
-            <span className="bg-blue-100 text-blue-700 text-xs font-medium px-2 py-1 rounded">
+            <span className="bg-blue-100 text-blue-700 text-xs font-medium px-2 py-1 rounded whitespace-nowrap">
               Active
             </span>
           )}
         </div>
         {isExpanded ? (
-          <ChevronUp size={20} className="text-gray-400" />
+          <ChevronUp size={20} className="text-gray-400 flex-shrink-0" />
         ) : (
-          <ChevronDown size={20} className="text-gray-400" />
+          <ChevronDown size={20} className="text-gray-400 flex-shrink-0" />
         )}
       </button>
 
       {/* Filter Controls */}
       {isExpanded && (
-        <div className="p-4 border-t border-gray-200 space-y-4">
+        <div className="p-4 sm:p-5 border-t border-gray-200 space-y-4 sm:space-y-5">
           {/* Sort Controls */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-2">
@@ -122,7 +122,7 @@ export default function FilterPanel({
               <select
                 value={filters.sortBy}
                 onChange={(e) => handleSortByChange(e.target.value as FilterState['sortBy'])}
-                className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="flex-1 px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base tap-target"
               >
                 <option value="createdAt">Created Date</option>
                 <option value="dueDate">Due Date</option>
@@ -131,8 +131,9 @@ export default function FilterPanel({
               </select>
               <button
                 onClick={handleSortOrderToggle}
-                className="px-3 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+                className="px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 active:bg-gray-100 transition-colors tap-target text-lg font-medium"
                 title={filters.sortOrder === 'asc' ? 'Ascending' : 'Descending'}
+                aria-label={filters.sortOrder === 'asc' ? 'Sort ascending' : 'Sort descending'}
               >
                 {filters.sortOrder === 'asc' ? '↑' : '↓'}
               </button>
@@ -144,43 +145,43 @@ export default function FilterPanel({
             <label className="block text-sm font-medium text-gray-700 mb-2">
               Priority
             </label>
-            <div className="flex gap-2">
+            <div className="grid grid-cols-4 gap-2">
               <button
                 onClick={() => handlePriorityChange(null)}
-                className={`flex-1 px-3 py-2 rounded-lg border transition-colors ${
+                className={`px-2 sm:px-3 py-2.5 sm:py-3 rounded-lg border transition-colors tap-target text-xs sm:text-sm font-medium ${
                   filters.priority === null
                     ? 'bg-blue-50 border-blue-500 text-blue-700'
-                    : 'border-gray-300 hover:bg-gray-50'
+                    : 'border-gray-300 hover:bg-gray-50 active:bg-gray-100'
                 }`}
               >
                 All
               </button>
               <button
                 onClick={() => handlePriorityChange('low')}
-                className={`flex-1 px-3 py-2 rounded-lg border transition-colors ${
+                className={`px-2 sm:px-3 py-2.5 sm:py-3 rounded-lg border transition-colors tap-target text-xs sm:text-sm font-medium ${
                   filters.priority === 'low'
                     ? 'bg-green-50 border-green-500 text-green-700'
-                    : 'border-gray-300 hover:bg-gray-50'
+                    : 'border-gray-300 hover:bg-gray-50 active:bg-gray-100'
                 }`}
               >
                 Low
               </button>
               <button
                 onClick={() => handlePriorityChange('medium')}
-                className={`flex-1 px-3 py-2 rounded-lg border transition-colors ${
+                className={`px-2 sm:px-3 py-2.5 sm:py-3 rounded-lg border transition-colors tap-target text-xs sm:text-sm font-medium ${
                   filters.priority === 'medium'
                     ? 'bg-yellow-50 border-yellow-500 text-yellow-700'
-                    : 'border-gray-300 hover:bg-gray-50'
+                    : 'border-gray-300 hover:bg-gray-50 active:bg-gray-100'
                 }`}
               >
-                Medium
+                Med
               </button>
               <button
                 onClick={() => handlePriorityChange('high')}
-                className={`flex-1 px-3 py-2 rounded-lg border transition-colors ${
+                className={`px-2 sm:px-3 py-2.5 sm:py-3 rounded-lg border transition-colors tap-target text-xs sm:text-sm font-medium ${
                   filters.priority === 'high'
                     ? 'bg-red-50 border-red-500 text-red-700'
-                    : 'border-gray-300 hover:bg-gray-50'
+                    : 'border-gray-300 hover:bg-gray-50 active:bg-gray-100'
                 }`}
               >
                 High
@@ -193,36 +194,36 @@ export default function FilterPanel({
             <label className="block text-sm font-medium text-gray-700 mb-2">
               Status
             </label>
-            <div className="flex gap-2">
+            <div className="grid grid-cols-3 gap-2">
               <button
                 onClick={() => handleCompletedChange(null)}
-                className={`flex-1 px-3 py-2 rounded-lg border transition-colors ${
+                className={`px-3 py-2.5 sm:py-3 rounded-lg border transition-colors tap-target text-xs sm:text-sm font-medium ${
                   filters.completed === null
                     ? 'bg-blue-50 border-blue-500 text-blue-700'
-                    : 'border-gray-300 hover:bg-gray-50'
+                    : 'border-gray-300 hover:bg-gray-50 active:bg-gray-100'
                 }`}
               >
                 All
               </button>
               <button
                 onClick={() => handleCompletedChange(false)}
-                className={`flex-1 px-3 py-2 rounded-lg border transition-colors ${
+                className={`px-3 py-2.5 sm:py-3 rounded-lg border transition-colors tap-target text-xs sm:text-sm font-medium ${
                   filters.completed === false
                     ? 'bg-blue-50 border-blue-500 text-blue-700'
-                    : 'border-gray-300 hover:bg-gray-50'
+                    : 'border-gray-300 hover:bg-gray-50 active:bg-gray-100'
                 }`}
               >
                 Incomplete
               </button>
               <button
                 onClick={() => handleCompletedChange(true)}
-                className={`flex-1 px-3 py-2 rounded-lg border transition-colors ${
+                className={`px-3 py-2.5 sm:py-3 rounded-lg border transition-colors tap-target text-xs sm:text-sm font-medium ${
                   filters.completed === true
                     ? 'bg-blue-50 border-blue-500 text-blue-700'
-                    : 'border-gray-300 hover:bg-gray-50'
+                    : 'border-gray-300 hover:bg-gray-50 active:bg-gray-100'
                 }`}
               >
-                Completed
+                Complete
               </button>
             </div>
           </div>
@@ -238,10 +239,10 @@ export default function FilterPanel({
                   <button
                     key={tag}
                     onClick={() => handleTagToggle(tag)}
-                    className={`px-3 py-1 rounded-full text-sm border transition-colors ${
+                    className={`px-3 py-2 rounded-full text-xs sm:text-sm border transition-colors tap-target-sm font-medium ${
                       filters.tags.includes(tag)
                         ? 'bg-blue-50 border-blue-500 text-blue-700'
-                        : 'border-gray-300 hover:bg-gray-50'
+                        : 'border-gray-300 hover:bg-gray-50 active:bg-gray-100'
                     }`}
                   >
                     {tag}
@@ -256,23 +257,23 @@ export default function FilterPanel({
             <label className="block text-sm font-medium text-gray-700 mb-2">
               Due Date Range
             </label>
-            <div className="grid grid-cols-2 gap-2">
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <div>
-                <label className="block text-xs text-gray-500 mb-1">From</label>
+                <label className="block text-xs text-gray-500 mb-1.5">From</label>
                 <input
                   type="date"
                   value={filters.dueDateRange.start ? filters.dueDateRange.start.toISOString().split('T')[0] : ''}
                   onChange={(e) => handleDueDateStartChange(e.target.value)}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base tap-target"
                 />
               </div>
               <div>
-                <label className="block text-xs text-gray-500 mb-1">To</label>
+                <label className="block text-xs text-gray-500 mb-1.5">To</label>
                 <input
                   type="date"
                   value={filters.dueDateRange.end ? filters.dueDateRange.end.toISOString().split('T')[0] : ''}
                   onChange={(e) => handleDueDateEndChange(e.target.value)}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base tap-target"
                 />
               </div>
             </div>
@@ -282,9 +283,9 @@ export default function FilterPanel({
           {hasActiveFilters && (
             <button
               onClick={handleClearFilters}
-              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors"
+              className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
             >
-              <X size={16} />
+              <X size={16} className="flex-shrink-0" />
               Clear All Filters
             </button>
           )}
diff --git a/components/InlineItemCreate.tsx b/components/InlineItemCreate.tsx
index e2e4139..72b8730 100644
--- a/components/InlineItemCreate.tsx
+++ b/components/InlineItemCreate.tsx
@@ -51,16 +51,16 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
     return (
       <button
         onClick={() => setIsCreating(true)}
-        className="w-full flex items-center gap-2 px-4 py-3 bg-white border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-colors"
+        className="w-full flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-3 sm:py-4 bg-white border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-blue-400 hover:text-blue-600 active:border-blue-500 active:text-blue-700 transition-colors tap-target text-sm sm:text-base font-medium"
       >
-        <Plus size={20} />
+        <Plus size={20} className="flex-shrink-0" />
         <span>Add a task</span>
       </button>
     )
   }
 
   return (
-    <form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4">
+    <form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4 sm:p-5 shadow-sm">
       <input
         type="text"
         value={title}
@@ -68,23 +68,23 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
         onKeyDown={handleKeyDown}
         placeholder="Enter task title..."
         autoFocus
-        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3"
+        className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3 sm:mb-4 text-sm sm:text-base"
       />
-      <div className="flex gap-2">
-        <button
-          type="submit"
-          disabled={!title.trim() || isSubmitting}
-          className="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white rounded-lg transition-colors text-sm"
-        >
-          {isSubmitting ? 'Adding...' : 'Add Task'}
-        </button>
+      <div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3">
         <button
           type="button"
           onClick={handleCancel}
-          className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors text-sm"
+          className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
         >
           Cancel
         </button>
+        <button
+          type="submit"
+          disabled={!title.trim() || isSubmitting}
+          className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-blue-300 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
+        >
+          {isSubmitting ? 'Adding...' : 'Add Task'}
+        </button>
       </div>
     </form>
   )
diff --git a/components/ItemCard.tsx b/components/ItemCard.tsx
index 902b765..d4de6be 100644
--- a/components/ItemCard.tsx
+++ b/components/ItemCard.tsx
@@ -1,8 +1,7 @@
 'use client'
 
-import { useState } from 'react'
 import Link from 'next/link'
-import { Calendar, Tag, AlertCircle, Trash2 } from 'lucide-react'
+import { Calendar, Tag, AlertCircle } from 'lucide-react'
 import ToggleItemButton from './ToggleItemButton'
 import DeleteItemButton from './DeleteItemButton'
 
@@ -33,24 +32,24 @@ export default function ItemCard({ item, listId }: ItemCardProps) {
   const priorityColor = priorityColors[item.priority as keyof typeof priorityColors] || priorityColors.medium
 
   return (
-    <div className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow group">
-      <div className="flex items-start gap-3">
+    <div className="bg-white rounded-lg border border-gray-200 p-4 sm:p-5 hover:shadow-md active:shadow-lg transition-all group">
+      <div className="flex items-start gap-3 sm:gap-4">
         {/* Completion Toggle */}
-        <div className="pt-1">
+        <div className="pt-0.5 sm:pt-1 flex-shrink-0">
           <ToggleItemButton itemId={item.id} completed={item.completed} variant="icon" />
         </div>
 
         {/* Content */}
         <div className="flex-1 min-w-0">
           <Link href={`/list/${listId}/item/${item.id}`} className="block">
-            <h3 className={`font-medium mb-1 ${
+            <h3 className={`font-medium mb-1 text-sm sm:text-base ${
               item.completed ? 'text-gray-500 line-through' : 'text-gray-900'
             }`}>
               {item.title}
             </h3>
             
             {item.description && (
-              <p className={`text-sm mb-2 line-clamp-2 ${
+              <p className={`text-xs sm:text-sm mb-2 line-clamp-2 ${
                 item.completed ? 'text-gray-400' : 'text-gray-600'
               }`}>
                 {item.description}
@@ -58,34 +57,36 @@ export default function ItemCard({ item, listId }: ItemCardProps) {
             )}
 
             {/* Metadata */}
-            <div className="flex flex-wrap items-center gap-2 mt-2">
+            <div className="flex flex-wrap items-center gap-1.5 sm:gap-2 mt-2">
               {/* Priority Badge */}
               <span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs font-medium border ${priorityColor}`}>
-                <AlertCircle size={12} />
-                {item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}
+                <AlertCircle size={12} className="flex-shrink-0" />
+                <span className="hidden xs:inline sm:inline">{item.priority.charAt(0).toUpperCase() + item.priority.slice(1)}</span>
+                <span className="xs:hidden sm:hidden">{item.priority.charAt(0).toUpperCase()}</span>
               </span>
 
               {/* Due Date */}
               {item.dueDate && (
-                <span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs ${
+                <span className={`inline-flex items-center gap-1 px-2 py-1 rounded text-xs whitespace-nowrap ${
                   isOverdue 
                     ? 'bg-red-100 text-red-700 border border-red-200 font-semibold' 
                     : 'bg-gray-100 text-gray-700'
                 }`}>
-                  <Calendar size={12} />
+                  <Calendar size={12} className="flex-shrink-0" />
                   {new Date(item.dueDate).toLocaleDateString('en-US', {
                     month: 'short',
                     day: 'numeric',
                   })}
-                  {isOverdue && ' (Overdue)'}
+                  {isOverdue && <span className="hidden sm:inline"> (Overdue)</span>}
+                  {isOverdue && <span className="sm:hidden">!</span>}
                 </span>
               )}
 
               {/* Tags */}
               {tags.length > 0 && (
                 <div className="inline-flex items-center gap-1">
-                  <Tag size={12} className="text-gray-400" />
-                  <span className="text-xs text-gray-600">
+                  <Tag size={12} className="text-gray-400 flex-shrink-0" />
+                  <span className="text-xs text-gray-600 truncate max-w-[120px] sm:max-w-none">
                     {tags.slice(0, 2).join(', ')}
                     {tags.length > 2 && ` +${tags.length - 2}`}
                   </span>
@@ -96,7 +97,7 @@ export default function ItemCard({ item, listId }: ItemCardProps) {
         </div>
 
         {/* Delete Button */}
-        <div className="opacity-0 group-hover:opacity-100 transition-opacity">
+        <div className="opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity flex-shrink-0">
           <DeleteItemButton itemId={item.id} variant="icon" />
         </div>
       </div>
diff --git a/components/ItemForm.tsx b/components/ItemForm.tsx
index af5a420..8e691ed 100644
--- a/components/ItemForm.tsx
+++ b/components/ItemForm.tsx
@@ -112,10 +112,10 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
+    <form onSubmit={handleSubmit} className="space-y-5 sm:space-y-6">
       {/* Title */}
       <div>
-        <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+        <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-2">
           Title *
         </label>
         <input
@@ -123,19 +123,19 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
           id="title"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+          className={`w-full px-3 sm:px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base ${
             errors.title ? 'border-red-500' : 'border-gray-300'
           }`}
           placeholder="Enter task title"
         />
         {errors.title && (
-          <p className="mt-1 text-sm text-red-600">{errors.title}</p>
+          <p className="mt-1.5 text-xs sm:text-sm text-red-600">{errors.title}</p>
         )}
       </div>
 
       {/* Description */}
       <div>
-        <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
+        <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-2">
           Description
         </label>
         <textarea
@@ -143,21 +143,21 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           rows={3}
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base resize-y"
           placeholder="Add a description"
         />
       </div>
 
       {/* Priority */}
       <div>
-        <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
+        <label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-2">
           Priority
         </label>
         <select
           id="priority"
           value={priority}
           onChange={(e) => setPriority(e.target.value as 'low' | 'medium' | 'high')}
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base tap-target"
         >
           <option value="low">Low</option>
           <option value="medium">Medium</option>
@@ -167,7 +167,7 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
 
       {/* Due Date */}
       <div>
-        <label htmlFor="dueDate" className="block text-sm font-medium text-gray-700 mb-1">
+        <label htmlFor="dueDate" className="block text-sm font-medium text-gray-700 mb-2">
           Due Date
         </label>
         <input
@@ -175,29 +175,29 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
           id="dueDate"
           value={dueDate}
           onChange={(e) => setDueDate(e.target.value)}
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base tap-target"
         />
       </div>
 
       {/* Tags */}
       <div>
-        <label htmlFor="tags" className="block text-sm font-medium text-gray-700 mb-1">
+        <label htmlFor="tags" className="block text-sm font-medium text-gray-700 mb-2">
           Tags
         </label>
-        <div className="flex gap-2 mb-2">
+        <div className="flex gap-2 mb-2 sm:mb-3">
           <input
             type="text"
             id="tags"
             value={tagInput}
             onChange={(e) => setTagInput(e.target.value)}
             onKeyDown={handleKeyDown}
-            className="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="flex-1 px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"
             placeholder="Add a tag"
           />
           <button
             type="button"
             onClick={handleAddTag}
-            className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors"
+            className="px-4 sm:px-5 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
           >
             Add
           </button>
@@ -207,13 +207,14 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
             {tags.map((tag) => (
               <span
                 key={tag}
-                className="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm"
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-100 text-blue-800 rounded-full text-xs sm:text-sm"
               >
                 {tag}
                 <button
                   type="button"
                   onClick={() => handleRemoveTag(tag)}
-                  className="hover:text-blue-600"
+                  className="hover:text-blue-600 active:text-blue-700 tap-target-sm text-lg leading-none"
+                  aria-label={`Remove ${tag} tag`}
                 >
                   ×
                 </button>
@@ -225,7 +226,7 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
 
       {/* Notes */}
       <div>
-        <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">
+        <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-2">
           Notes
         </label>
         <textarea
@@ -233,34 +234,34 @@ export default function ItemForm({ listId, item, mode = 'edit' }: ItemFormProps)
           value={notes}
           onChange={(e) => setNotes(e.target.value)}
           rows={5}
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base resize-y"
           placeholder="Add additional notes"
         />
       </div>
 
       {/* Error message */}
       {errors.submit && (
-        <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
-          <p className="text-sm text-red-600">{errors.submit}</p>
+        <div className="p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg">
+          <p className="text-xs sm:text-sm text-red-600">{errors.submit}</p>
         </div>
       )}
 
       {/* Actions */}
-      <div className="flex gap-3">
-        <button
-          type="submit"
-          disabled={isSubmitting}
-          className="flex-1 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white px-4 py-2 rounded-lg transition-colors"
-        >
-          {isSubmitting ? 'Saving...' : mode === 'create' ? 'Create Task' : 'Save Changes'}
-        </button>
+      <div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3 pt-2">
         <button
           type="button"
           onClick={() => router.back()}
-          className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors"
+          className="w-full sm:w-auto px-4 sm:px-5 py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors tap-target font-medium text-sm sm:text-base"
         >
           Cancel
         </button>
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="w-full sm:flex-1 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-blue-300 text-white px-4 sm:px-5 py-3 rounded-lg transition-colors tap-target font-medium text-sm sm:text-base"
+        >
+          {isSubmitting ? 'Saving...' : mode === 'create' ? 'Create Task' : 'Save Changes'}
+        </button>
       </div>
     </form>
   )
diff --git a/components/ListCard.tsx b/components/ListCard.tsx
index c8fdfd9..435925d 100644
--- a/components/ListCard.tsx
+++ b/components/ListCard.tsx
@@ -37,19 +37,19 @@ export default function ListCard({ list }: { list: List }) {
   return (
     <>
       <Link href={`/list/${list.id}`}>
-        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer group">
-          <div className="flex items-center justify-between mb-4">
-            <div className="flex items-center gap-3 flex-1 min-w-0">
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-5 sm:p-6 hover:shadow-md active:shadow-lg transition-all cursor-pointer group min-h-[140px] sm:min-h-[160px]">
+          <div className="flex items-start justify-between mb-4 gap-2">
+            <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
               <div 
-                className="w-4 h-4 rounded-full flex-shrink-0" 
+                className="w-3 h-3 sm:w-4 sm:h-4 rounded-full flex-shrink-0" 
                 style={{ backgroundColor: list.color }}
               />
-              <h3 className="font-semibold text-gray-900 truncate">{list.title}</h3>
+              <h3 className="font-semibold text-gray-900 truncate text-base sm:text-lg">{list.title}</h3>
             </div>
-            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={handleDeleteClick}>
+            <div className="flex items-center gap-0.5 sm:gap-1 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity flex-shrink-0" onClick={handleDeleteClick}>
               <button
                 onClick={handleEditClick}
-                className="text-gray-600 hover:text-gray-900 transition-colors p-2 hover:bg-gray-100 rounded-lg"
+                className="text-gray-600 hover:text-gray-900 active:text-black transition-colors tap-target-sm hover:bg-gray-100 active:bg-gray-200 rounded-lg"
                 aria-label="Edit list"
               >
                 <Edit2 size={18} />
@@ -62,15 +62,15 @@ export default function ListCard({ list }: { list: List }) {
             </div>
           </div>
           
-          <div className="space-y-3">
-            <div className="flex items-center justify-between text-sm text-gray-600">
+          <div className="space-y-2.5 sm:space-y-3">
+            <div className="flex items-center justify-between text-xs sm:text-sm text-gray-600">
               <span>{completedCount} of {totalCount} completed</span>
-              <span>{Math.round(progress)}%</span>
+              <span className="font-medium">{Math.round(progress)}%</span>
             </div>
             
-            <div className="w-full bg-gray-200 rounded-full h-2">
+            <div className="w-full bg-gray-200 rounded-full h-2 sm:h-2.5">
               <div 
-                className="h-2 rounded-full transition-all duration-300"
+                className="h-2 sm:h-2.5 rounded-full transition-all duration-300"
                 style={{ 
                   width: `${progress}%`,
                   backgroundColor: list.color 
diff --git a/components/ListForm.tsx b/components/ListForm.tsx
index cf0a44a..66a79e9 100644
--- a/components/ListForm.tsx
+++ b/components/ListForm.tsx
@@ -66,9 +66,9 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
       <div>
-        <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
+        <label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-2">
           List Title
         </label>
         <input
@@ -76,7 +76,7 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
           id="title"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"
           placeholder="Enter list title"
           disabled={isSubmitting}
           autoFocus
@@ -84,19 +84,19 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
       </div>
 
       <div>
-        <label className="block text-sm font-medium text-gray-700 mb-2">
+        <label className="block text-sm font-medium text-gray-700 mb-2 sm:mb-3">
           Color
         </label>
-        <div className="flex gap-2 flex-wrap">
+        <div className="flex gap-2 sm:gap-3 flex-wrap">
           {PRESET_COLORS.map((presetColor) => (
             <button
               key={presetColor}
               type="button"
               onClick={() => setColor(presetColor)}
-              className={`w-10 h-10 rounded-lg transition-all ${
+              className={`w-11 h-11 sm:w-12 sm:h-12 rounded-lg transition-all tap-target-sm ${
                 color === presetColor
                   ? 'ring-2 ring-offset-2 ring-gray-400 scale-110'
-                  : 'hover:scale-105'
+                  : 'hover:scale-105 active:scale-95'
               }`}
               style={{ backgroundColor: presetColor }}
               disabled={isSubmitting}
@@ -107,16 +107,16 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
       </div>
 
       {error && (
-        <div className="text-red-600 text-sm">{error}</div>
+        <div className="text-red-600 text-xs sm:text-sm font-medium">{error}</div>
       )}
 
-      <div className="flex gap-2 justify-end pt-2">
+      <div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3 justify-end pt-2">
         {onCancel && (
           <button
             type="button"
             onClick={onCancel}
             disabled={isSubmitting}
-            className="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50"
+            className="w-full sm:w-auto px-4 sm:px-5 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 rounded-lg transition-colors disabled:opacity-50 tap-target font-medium text-sm sm:text-base"
           >
             Cancel
           </button>
@@ -124,7 +124,7 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
         <button
           type="submit"
           disabled={isSubmitting}
-          className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors disabled:opacity-50"
+          className="w-full sm:w-auto px-4 sm:px-5 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50 tap-target font-medium text-sm sm:text-base"
         >
           {isSubmitting ? 'Saving...' : list ? 'Update List' : 'Create List'}
         </button>
diff --git a/components/Modal.tsx b/components/Modal.tsx
index b6ab376..8d459dc 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -42,27 +42,27 @@ export default function Modal({ isOpen, onClose, title, children }: ModalProps)
   if (!isOpen) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
       {/* Backdrop */}
       <div 
-        className="absolute inset-0 bg-black bg-opacity-50"
+        className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
         onClick={onClose}
       />
       
       {/* Modal */}
-      <div className="relative bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-4 border-b border-gray-200">
-          <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
+      <div className="relative bg-white rounded-t-2xl sm:rounded-lg shadow-xl max-w-md w-full mx-0 sm:mx-4 max-h-[90vh] overflow-y-auto transform transition-transform">
+        <div className="flex items-center justify-between p-4 sm:p-5 border-b border-gray-200 sticky top-0 bg-white z-10">
+          <h2 className="text-lg sm:text-xl font-semibold text-gray-900">{title}</h2>
           <button
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 transition-colors"
+            className="text-gray-400 hover:text-gray-600 active:text-gray-700 transition-colors tap-target-sm -mr-2"
             aria-label="Close modal"
           >
             <X size={24} />
           </button>
         </div>
         
-        <div className="p-4">
+        <div className="p-4 sm:p-5">
           {children}
         </div>
       </div>
diff --git a/components/NewListButton.tsx b/components/NewListButton.tsx
index 209a1bd..9f6d526 100644
--- a/components/NewListButton.tsx
+++ b/components/NewListButton.tsx
@@ -12,10 +12,11 @@ export default function NewListButton() {
     <>
       <button 
         onClick={() => setIsModalOpen(true)}
-        className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
+        className="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white px-4 sm:px-6 py-3 rounded-lg flex items-center gap-2 transition-colors tap-target shadow-sm hover:shadow-md text-sm sm:text-base font-medium"
       >
-        <PlusIcon size={20} />
-        New List
+        <PlusIcon size={20} className="flex-shrink-0" />
+        <span className="hidden xs:inline sm:inline">New List</span>
+        <span className="xs:hidden sm:hidden">New</span>
       </button>
 
       <Modal
diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx
index de81c67..a949bf3 100644
--- a/components/SearchBar.tsx
+++ b/components/SearchBar.tsx
@@ -25,7 +25,7 @@ export default function SearchBar({
     <div className="relative">
       <div className="relative">
         <Search 
-          className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" 
+          className="absolute left-3 sm:left-4 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" 
           size={20} 
         />
         <input
@@ -33,19 +33,19 @@ export default function SearchBar({
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           placeholder={placeholder}
-          className="w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          className="w-full pl-10 sm:pl-12 pr-10 sm:pr-12 py-3 sm:py-3.5 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm sm:text-base transition-shadow"
         />
         {query && (
           <button
             onClick={clearSearch}
-            className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
+            className="absolute right-3 sm:right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 active:text-gray-700 transition-colors tap-target-sm"
             aria-label="Clear search"
           >
             <X size={20} />
           </button>
         )}
         {isDebouncing && (
-          <div className="absolute right-10 top-1/2 -translate-y-1/2">
+          <div className="absolute right-12 sm:right-14 top-1/2 -translate-y-1/2">
             <div className="w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" />
           </div>
         )}
diff --git a/components/ToggleItemButton.tsx b/components/ToggleItemButton.tsx
index 12cd730..c7116ea 100644
--- a/components/ToggleItemButton.tsx
+++ b/components/ToggleItemButton.tsx
@@ -31,13 +31,13 @@ export default function ToggleItemButton({ itemId, completed, variant = 'full' }
       <button
         onClick={handleToggle}
         disabled={isToggling}
-        className="hover:scale-110 transition-transform disabled:opacity-50"
+        className="hover:scale-110 active:scale-95 transition-transform disabled:opacity-50 tap-target-sm"
         aria-label={completed ? 'Mark incomplete' : 'Mark complete'}
       >
         {completed ? (
-          <CheckCircle2 size={20} className="text-green-500" />
+          <CheckCircle2 size={22} className="text-green-500" />
         ) : (
-          <Circle size={20} className="text-gray-400 hover:text-gray-600" />
+          <Circle size={22} className="text-gray-400 hover:text-gray-600 active:text-gray-700" />
         )}
       </button>
     )
@@ -47,16 +47,16 @@ export default function ToggleItemButton({ itemId, completed, variant = 'full' }
     <button
       onClick={handleToggle}
       disabled={isToggling}
-      className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors"
+      className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
     >
       {completed ? (
         <>
-          <CheckCircle2 size={18} className="text-green-500" />
+          <CheckCircle2 size={18} className="text-green-500 flex-shrink-0" />
           <span>Mark Incomplete</span>
         </>
       ) : (
         <>
-          <Circle size={18} />
+          <Circle size={18} className="flex-shrink-0" />
           <span>Mark Complete</span>
         </>
       )}
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..047f1e0
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-32.png b/public/favicon-32.png
new file mode 100644
index 0000000..53fd869
Binary files /dev/null and b/public/favicon-32.png differ
diff --git a/public/icon-192.png b/public/icon-192.png
new file mode 100644
index 0000000..43a58d5
Binary files /dev/null and b/public/icon-192.png differ
diff --git a/public/icon-512.png b/public/icon-512.png
new file mode 100644
index 0000000..a689f85
Binary files /dev/null and b/public/icon-512.png differ