diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 40fec0c..1b7bf96 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -35,10 +35,6 @@ jobs:
         run: |
           aws s3 cp s3://jobshop.works/production.env ./src/.env
 
-      - name: Sync production.env configuration file
-        run: |
-          aws s3 cp s3://jobshop.works/production.env ./src/production.env
-
       - name: Build, tag and push latest docker images
         run: ENV=prod docker buildx bake --push
 
diff --git a/src/CHANGELOG.md b/src/CHANGELOG.md
index 38d2803..7e7cc4f 100644
--- a/src/CHANGELOG.md
+++ b/src/CHANGELOG.md
@@ -2,10 +2,15 @@
 
 All notable changes to this project will be documented in this file. Dates are displayed in UTC.
 
-Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
-
 #### 1.0.1
 
+- AutoChangelog HOTFIX [`#22`](https://github.com/eknowlton/simpletaskmanager/pull/22)
+- Develop [`#21`](https://github.com/eknowlton/simpletaskmanager/pull/21)
+- Auto Changelog & Feature Page [`#20`](https://github.com/eknowlton/simpletaskmanager/pull/20)
+- Release [`#19`](https://github.com/eknowlton/simpletaskmanager/pull/19)
+- Updates [`#18`](https://github.com/eknowlton/simpletaskmanager/pull/18)
+- Release [`#17`](https://github.com/eknowlton/simpletaskmanager/pull/17)
+- Version [`#16`](https://github.com/eknowlton/simpletaskmanager/pull/16)
 - Develop [`#15`](https://github.com/eknowlton/simpletaskmanager/pull/15)
 - Develop [`#13`](https://github.com/eknowlton/simpletaskmanager/pull/13)
 - added laravel bug tracking [`#12`](https://github.com/eknowlton/simpletaskmanager/pull/12)
@@ -13,6 +18,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Adding more tests [`#8`](https://github.com/eknowlton/simpletaskmanager/pull/8)
 - Create tasks from inbox #1 [`#11`](https://github.com/eknowlton/simpletaskmanager/pull/11)
 - finished add and update task on inbox [`#10`](https://github.com/eknowlton/simpletaskmanager/pull/10)
+- Fixes #24 [`#24`](https://github.com/eknowlton/simpletaskmanager/issues/24)
 - initial commit [`998c687`](https://github.com/eknowlton/simpletaskmanager/commit/998c687056248b0c7bdb5d33576f616ae6c31cda)
 - closer to working product [`c75cff3`](https://github.com/eknowlton/simpletaskmanager/commit/c75cff3e629365dae394a187a0c19d78a9979283)
 - lets get the deploy build working [`1ffd542`](https://github.com/eknowlton/simpletaskmanager/commit/1ffd5424601b0b4baf47f0bdff0191b752ff0674)
diff --git a/src/resources/js/components/ui/task-list-item.tsx b/src/resources/js/components/ui/task-list-item.tsx
new file mode 100644
index 0000000..b1d899a
--- /dev/null
+++ b/src/resources/js/components/ui/task-list-item.tsx
@@ -0,0 +1,48 @@
+import { Calendar, ChartNoAxesCombined, Sparkles, Check, Square, SquareCheck } from 'lucide-react';
+
+export default function TaskListItem({ item: task, onClick }: { item: Shared.Data.Task, onClick: () => void }) {
+    return (
+        <div
+            key={task.id}
+            className="mb-2 flex flex-col justify-between rounded-md border hover:border-gray-300 dark:hover:border-gray-700 p-2 hover:bg-gray-100 dark:hover:bg-white/3"
+        >
+            <div className="flex flex-grow justify-between bg-gray-200 dark:bg-gray-900 px-3 py-2 rounded mb-2">
+                <button onClick={onClick} className="flex-grow text-left flex flex-row items-center gap-2">
+                    {task.status.value != "completed" as Shared.TaskStatus ? <Square className={"w-4 h-4"} /> : <SquareCheck className={"w-4 h-4"} />} {task.title}
+                </button>
+                <div className="flex items-center gap-2">
+                    <span className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
+                        <ChartNoAxesCombined className="h-4 w-4" /> {task.status.label}
+                    </span>
+                    <span className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
+                        <Sparkles className="h-4 w-4" /> {task.priority}
+                    </span>
+                </div>
+            </div>
+            <div className="flex flex-grow">
+                <div className="flex-grow text-gray-700 dark:text-gray-400 p-2">{task.description}</div>
+                {task.due_date && (
+                    <div className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
+                        <Calendar className="h-4 w-4" />
+                        <span className="">{task.due_date ? new Date(task.due_date).toLocaleString() : null}</span>
+                    </div>
+                )}
+            </div>
+            <div className="flex flex-grow pt-2 bg-gray-50py-2">
+                <div className="flex-grow"></div>
+                <div className="text-gray-700 dark:text-gray-400">
+                    {task.tags &&
+                        task.tags.length > 0 &&
+                        task.tags.map(({ label, value }: Shared.Data.Tag) => (
+                            <span
+                                key={value}
+                                className="ml-2 inline-block rounded bg-gray-200 px-2 py-1 text-xs text-gray-700 dark:bg-gray-600 dark:text-gray-200"
+                            >
+                                {label}
+                            </span>
+                        ))}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/src/resources/js/components/ui/task-list.tsx b/src/resources/js/components/ui/task-list.tsx
new file mode 100644
index 0000000..b5948c2
--- /dev/null
+++ b/src/resources/js/components/ui/task-list.tsx
@@ -0,0 +1,9 @@
+import React, { JSX } from 'react';
+
+export default function TaskList({ children}: React.PropsWithChildren){
+    return (
+        <div className={`flex flex-col gap-2`}>
+            {children}
+        </div>
+    );
+}
diff --git a/src/resources/js/pages/inbox.tsx b/src/resources/js/pages/inbox.tsx
index 52090d8..681b92e 100755
--- a/src/resources/js/pages/inbox.tsx
+++ b/src/resources/js/pages/inbox.tsx
@@ -10,6 +10,8 @@ import { type BreadcrumbItem } from '@/types';
 import { Head } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
+import TaskList from '@/components/ui/task-list';
+import TaskListItem from '@/components/ui/task-list-item';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -39,37 +41,14 @@ export default function Inbox({ inbox, twoMinute }: { inbox: Shared.Data.Task[];
                     <ContentBody>
                         {inbox.length > 0 ? (
                             <div className="p-4">
-                                {inbox.map((task) => (
-                                    <div
-                                        key={task.id}
-                                        className="mb-2 flex flex-col justify-between rounded-md border p-2 hover:bg-gray-100 dark:hover:bg-white/3"
-                                    >
-                                        <div className="flex flex-grow">
-                                            <button
-                                                onClick={() => {
-                                                    setTask(task);
-                                                    setView('edit');
-                                                }}
-                                                className="flex-grow text-left"
-                                            >
-                                                {task.title}
-                                            </button>
-                                            <div>
-                                                {task.status.label}{' '}
-                                                <span className="text-sm text-gray-700 dark:text-gray-400">( {task.priority} )</span>
-                                            </div>
-                                        </div>
-                                        <div className="flex flex-grow">
-                                            <div className="flex-grow text-gray-700 dark:text-gray-400">{task.description}</div>
-                                            {task.due_date && (
-                                                <div>
-                                                    <span className="bold text-sm text-gray-700 dark:text-gray-400">Due On</span>
-                                                    <span className="pl-4">{task.due_date && new Date(task.due_date).toLocaleString()}</span>
-                                                </div>
-                                            )}
-                                        </div>
-                                    </div>
-                                ))}
+                                <TaskList>
+                                    {inbox.map((task) => (
+                                        <TaskListItem item={task} onClick={() => {
+                                            setTask(task);
+                                            setView('edit');
+                                        }} />
+                                    ))}
+                                </TaskList>
                             </div>
                         ) : (
                             <p className="p-4">No upcoming tasks.</p>
@@ -80,39 +59,14 @@ export default function Inbox({ inbox, twoMinute }: { inbox: Shared.Data.Task[];
                     <ContentHeader title="2-Minute Tasks" />
                     <ContentBody>
                         {twoMinute.length > 0 ? (
-                            <div className="p-4">
+                            <TaskList>
                                 {twoMinute.map((task) => (
-                                    <div
-                                        key={task.id}
-                                        className="mb-2 flex flex-col justify-between rounded-md border p-2 hover:bg-gray-100 dark:hover:bg-white/3"
-                                    >
-                                        <div className="flex flex-grow">
-                                            <button
-                                                onClick={() => {
-                                                    setTask(task);
-                                                    setView('edit');
-                                                }}
-                                                className="flex-grow text-left"
-                                            >
-                                                {task.title}
-                                            </button>
-                                            <div>
-                                                {task.status.label}{' '}
-                                                <span className="text-sm text-gray-700 dark:text-gray-400">( {task.priority} )</span>
-                                            </div>
-                                        </div>
-                                        <div className="flex flex-grow">
-                                            <div className="flex-grow text-gray-700 dark:text-gray-400">{task.description}</div>
-                                            {task.due_date && (
-                                                <div>
-                                                    <span className="bold text-sm text-gray-700 dark:text-gray-400">Due On</span>
-                                                    <span className="pl-4">{task.due_date && new Date(task.due_date).toLocaleString()}</span>
-                                                </div>
-                                            )}
-                                        </div>
-                                    </div>
+                                    <TaskListItem item={task} onClick={() => {
+                                        setTask(task);
+                                        setView('edit');
+                                    }} />
                                 ))}
-                            </div>
+                            </TaskList>
                         ) : (
                             <p className="p-4">No two minute tasks.</p>
                         )}
diff --git a/src/resources/js/pages/projects/inbox.tsx b/src/resources/js/pages/projects/inbox.tsx
index bc1ad21..2e654d2 100755
--- a/src/resources/js/pages/projects/inbox.tsx
+++ b/src/resources/js/pages/projects/inbox.tsx
@@ -6,10 +6,12 @@ import { ProjectView } from '@/components/project-view';
 import { TaskView } from '@/components/task-view';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent } from '@/components/ui/sheet';
+import TaskList from '@/components/ui/task-list';
+import TaskListItem from '@/components/ui/task-list-item';
 import AppLayout from '@/layouts/app-layout';
 import { type BreadcrumbItem } from '@/types';
 import { Head } from '@inertiajs/react';
-import { ChartNoAxesCombined, Plus, Sparkles } from 'lucide-react';
+import { Plus } from 'lucide-react';
 import { useState } from 'react';
 
 const breadcrumbs: BreadcrumbItem[] = [
@@ -42,60 +44,17 @@ export default function Show({ project, tasks }: { project: Shared.Data.Project;
                     <ContentHeader title={project.title} description={`Inbox`} />
                     <ContentBody>
                         {tasks.length > 0 ? (
-                            <>
-                                <div className="p-4">
-                                    {tasks.map((task) => (
-                                        <div
-                                            key={task.id}
-                                            className="mb-2 flex flex-col justify-between rounded-md border p-2 hover:bg-gray-100 dark:hover:bg-white/3"
-                                        >
-                                            <div className="flex flex-grow">
-                                                <button
-                                                    className="flex-grow text-left text-lg"
-                                                    onClick={() => {
-                                                        setTask(task);
-                                                        setView('edit-task');
-                                                    }}
-                                                >
-                                                    {task.title}
-                                                </button>
-                                                <div className="flex items-center gap-2">
-                                                    <span className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
-                                                        <ChartNoAxesCombined className="h-4 w-4" /> {task.status.label}
-                                                    </span>
-                                                    <span className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
-                                                        <Sparkles className="h-4 w-4" /> {task.priority}
-                                                    </span>
-                                                </div>
-                                            </div>
-                                            <div className="flex flex-grow">
-                                                <div className="flex-grow text-gray-700 dark:text-gray-400">{task.description}</div>
-                                                {task.due_date && (
-                                                    <div>
-                                                        <span className="bold text-sm text-gray-700 dark:text-gray-400">Due On</span>
-                                                        <span className="pl-4">{task.due_date && new Date(task.due_date).toLocaleString()}</span>
-                                                    </div>
-                                                )}
-                                            </div>
-                                            <div className="flex flex-grow pt-2">
-                                                <div className="flex-grow"></div>
-                                                <div className="text-gray-700 dark:text-gray-400">
-                                                    {task.tags &&
-                                                        task.tags.length > 0 &&
-                                                        task.tags.map(({ label, value }) => (
-                                                            <span
-                                                                key={value}
-                                                                className="ml-2 inline-block rounded bg-gray-200 px-2 py-1 text-xs text-gray-700 dark:bg-gray-600 dark:text-gray-200"
-                                                            >
-                                                                {label}
-                                                            </span>
-                                                        ))}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    ))}
-                                </div>
-                            </>
+                            <TaskList>
+                                {tasks.map((task) => (
+                                    <TaskListItem
+                                        item={task}
+                                        onClick={() => {
+                                            setTask(task);
+                                            setView('edit');
+                                        }}
+                                    />
+                                ))}
+                            </TaskList>
                         ) : (
                             <p className="p-6">No tasks in project.</p>
                         )}
diff --git a/src/resources/js/pages/projects/show.tsx b/src/resources/js/pages/projects/show.tsx
index 4f58341..d4673b7 100755
--- a/src/resources/js/pages/projects/show.tsx
+++ b/src/resources/js/pages/projects/show.tsx
@@ -10,8 +10,10 @@ import { Sheet, SheetContent } from '@/components/ui/sheet';
 import AppLayout from '@/layouts/app-layout';
 import { type BreadcrumbItem } from '@/types';
 import { Head } from '@inertiajs/react';
-import { ChartNoAxesCombined, Plus, Sparkles } from 'lucide-react';
 import { useState } from 'react';
+import TaskList from '@/components/ui/task-list';
+import TaskListItem from '@/components/ui/task-list-item';
+import { Plus } from 'lucide-react';
 
 const breadcrumbs: BreadcrumbItem[] = [
     {
@@ -44,58 +46,14 @@ export default function Show({ project, tasks }: { project: Shared.Data.Project;
                     <ContentBody>
                         {tasks.data.length > 0 ? (
                             <>
-                                <div className="p-4">
+                                <TaskList>
                                     {tasks.data.map((task) => (
-                                        <div
-                                            key={task.id}
-                                            className="mb-2 flex flex-col justify-between rounded-md border p-2 hover:bg-gray-100 dark:hover:bg-white/3"
-                                        >
-                                            <div className="flex flex-grow">
-                                                <button
-                                                    className="flex-grow text-left text-lg"
-                                                    onClick={() => {
-                                                        setTask(task);
-                                                        setView('edit-task');
-                                                    }}
-                                                >
-                                                    {task.title}
-                                                </button>
-                                                <div className="flex items-center gap-2">
-                                                    <span className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
-                                                        <ChartNoAxesCombined className="h-4 w-4" /> {task.status.label}
-                                                    </span>
-                                                    <span className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
-                                                        <Sparkles className="h-4 w-4" /> {task.priority}
-                                                    </span>
-                                                </div>
-                                            </div>
-                                            <div className="flex flex-grow">
-                                                <div className="flex-grow text-gray-700 dark:text-gray-400">{task.description}</div>
-                                                {task.due_date && (
-                                                    <div>
-                                                        <span className="bold text-sm text-gray-700 dark:text-gray-400">Due On</span>
-                                                        <span className="pl-4">{task.due_date && new Date(task.due_date).toLocaleString()}</span>
-                                                    </div>
-                                                )}
-                                            </div>
-                                            <div className="flex flex-grow pt-2">
-                                                <div className="flex-grow"></div>
-                                                <div className="text-gray-700 dark:text-gray-400">
-                                                    {task.tags &&
-                                                        task.tags.length > 0 &&
-                                                        task.tags.map(({ label, value }) => (
-                                                            <span
-                                                                key={value}
-                                                                className="ml-2 inline-block rounded bg-gray-200 px-2 py-1 text-xs text-gray-700 dark:bg-gray-600 dark:text-gray-200"
-                                                            >
-                                                                {label}
-                                                            </span>
-                                                        ))}
-                                                </div>
-                                            </div>
-                                        </div>
+                                        <TaskListItem item={task} onClick={() => {
+                                            setTask(task);
+                                            setView('edit-task');
+                                        }} />
                                     ))}
-                                </div>
+                                </TaskList>
                                 <PaginatedCollectionPaging collection={tasks} />
                             </>
                         ) : (
diff --git a/src/resources/js/pages/tasks/index.tsx b/src/resources/js/pages/tasks/index.tsx
index a9727ae..d8d874a 100755
--- a/src/resources/js/pages/tasks/index.tsx
+++ b/src/resources/js/pages/tasks/index.tsx
@@ -6,10 +6,11 @@ import { PaginatedCollectionPaging } from '@/components/paginated-collection-pag
 import { TaskView } from '@/components/task-view';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent } from '@/components/ui/sheet';
+import TaskList from '@/components/ui/task-list';
+import TaskListItem from '@/components/ui/task-list-item';
 import AppLayout from '@/layouts/app-layout';
 import { type BreadcrumbItem } from '@/types';
 import { Head } from '@inertiajs/react';
-import { Calendar, ChartNoAxesCombined, Sparkles } from 'lucide-react';
 import { useState } from 'react';
 
 const breadcrumbs: BreadcrumbItem[] = [
@@ -37,52 +38,11 @@ export default function Index({ tasks }: { tasks: PaginatedCollection<Shared.Dat
                     <ContentBody>
                         {tasks.data.length > 0 ? (
                             <>
-                                <div className="p-4">
+                                <TaskList>
                                     {tasks.data.map((task) => (
-                                        <div
-                                            key={task.id}
-                                            className="mb-2 flex flex-col justify-between rounded-md border p-2 hover:bg-gray-100 dark:hover:bg-white/3"
-                                        >
-                                            <div className="flex flex-grow justify-between">
-                                                <button onClick={() => setTask(task)} className="flex-grow text-left">
-                                                    {task.title}
-                                                </button>
-                                                <div className="flex items-center gap-2">
-                                                    <span className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
-                                                        <ChartNoAxesCombined className="h-4 w-4" /> {task.status.label}
-                                                    </span>
-                                                    <span className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
-                                                        <Sparkles className="h-4 w-4" /> {task.priority}
-                                                    </span>
-                                                </div>
-                                            </div>
-                                            <div className="flex flex-grow">
-                                                <div className="flex-grow text-gray-700 dark:text-gray-400">{task.description}</div>
-                                                {task.due_date && (
-                                                    <div className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
-                                                        <Calendar className="h-4 w-4" />
-                                                        <span className="">{task.due_date ? new Date(task.due_date).toLocaleString() : null}</span>
-                                                    </div>
-                                                )}
-                                            </div>
-                                            <div className="flex flex-grow pt-2">
-                                                <div className="flex-grow"></div>
-                                                <div className="text-gray-700 dark:text-gray-400">
-                                                    {task.tags &&
-                                                        task.tags.length > 0 &&
-                                                        task.tags.map(({ label, value }: Shared.Data.Tag) => (
-                                                            <span
-                                                                key={value}
-                                                                className="ml-2 inline-block rounded bg-gray-200 px-2 py-1 text-xs text-gray-700 dark:bg-gray-600 dark:text-gray-200"
-                                                            >
-                                                                {label}
-                                                            </span>
-                                                        ))}
-                                                </div>
-                                            </div>
-                                        </div>
+                                        <TaskListItem item={task} onClick={() => setTask(task)} />
                                     ))}
-                                </div>
+                                </TaskList>
                                 <PaginatedCollectionPaging collection={tasks} />
                             </>
                         ) : (
diff --git a/src/resources/js/pages/welcome.tsx b/src/resources/js/pages/welcome.tsx
index 4865baf..2e1abbe 100755
--- a/src/resources/js/pages/welcome.tsx
+++ b/src/resources/js/pages/welcome.tsx
@@ -30,8 +30,6 @@ const useInView = (options) => {
     return [ref, inView];
 };
 
-// --- SVG Icon Components (HeroIcons & Custom) ---
-
 const MenuIcon = () => (
     <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
@@ -90,24 +88,20 @@ const AnimatedAppPreview = ({ theme }) => (
         <rect width="800" height="450" rx="8" fill="url(#app-bg-gradient)" />
         <rect x="1" y="1" width="798" height="448" rx="7" fill="none" stroke={theme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'} />
 
-        {/* Sidebar */}
         <rect x="0" y="0" width="150" height="450" fill={theme === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.02)'} />
         <circle cx="30" cy="30" r="10" fill="#3B82F6" />
         <rect x="50" y="25" width="70" height="10" rx="3" fill={theme === 'dark' ? '#4B5563' : '#E5E7EB'} />
-        {/* Sidebar links */}
+
         <rect x="20" y="70" width="110" height="15" rx="4" fill={theme === 'dark' ? '#374151' : '#E5E7EB'} />
         <rect x="20" y="100" width="90" height="15" rx="4" fill={theme === 'dark' ? '#374151' : '#E5E7EB'} />
         <rect x="20" y="130" width="110" height="15" rx="4" fill={theme === 'dark' ? '#4B5563' : '#D1D5DB'} />
         <rect x="20" y="160" width="80" height="15" rx="4" fill={theme === 'dark' ? '#374151' : '#E5E7EB'} />
 
-        {/* Main Content Area - Kanban Board */}
         <g>
-            {/* Columns */}
             <rect x="180" y="20" width="190" height="410" rx="6" fill={theme === 'dark' ? '#111827' : '#F3F4F6'} />
             <rect x="390" y="20" width="190" height="410" rx="6" fill={theme === 'dark' ? '#111827' : '#F3F4F6'} />
             <rect x="600" y="20" width="190" height="410" rx="6" fill={theme === 'dark' ? '#111827' : '#F3F4F6'} />
 
-            {/* Column Headers */}
             <text x="190" y="45" fontFamily="sans-serif" fontSize="14" fontWeight="600" fill={theme === 'dark' ? '#D1D5DB' : '#4B5563'}>
                 To Do
             </text>
@@ -603,7 +597,6 @@ export default function App() {
                 </div>
             </main>
 
-            {/* Footer */}
             <footer className="bg-gray-900 dark:bg-black" aria-labelledby="footer-heading">
                 <h2 id="footer-heading" className="sr-only">
                     Footer