diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
new file mode 100644
index 0000000..9a2b6a4
--- /dev/null
+++ b/app/Http/Controllers/DashboardController.php
@@ -0,0 +1,114 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+
+class DashboardController extends Controller
+{
+    public function index()
+    {
+        $data = $this->all_incomplete_todos();
+
+        $todos = $data['todos'];
+        $incomplete_count = $data['incomplete_count'];
+        // Convert all todo to Todo model
+        $todos->transform(function ($todo) {
+            return \App\Models\Todo::find($todo->id);
+        });
+
+        $projects = $this->projects();
+        $project_count = $projects['project_count'];
+        $ave_todo_count = $projects['ave_todo_count'];
+
+        $todo_completed_count = $this->all_completed_todos()['completed_count'];
+
+        return view('dashboard', compact(
+            'todos',
+            'incomplete_count',
+            'project_count',
+            'ave_todo_count',
+            'todo_completed_count'
+        ));
+    }
+
+    public function all_incomplete_todos(): array
+    {
+        $user = auth()->user();
+        // Join project_todo first and project_user tables, paginate the results
+        $todos = DB::table('todos')
+            ->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
+            ->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
+            ->where('project_user.user_id', '=', $user->id)
+            ->whereDate('due_end', '<=', strtotime('today midnight'))
+            ->whereNull('completed_at')
+            ->orderBy('due_end', 'asc')
+            ->paginate(5);
+
+        $all_incomplete_count = DB::table('todos')
+            ->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
+            ->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
+            ->where('project_user.user_id', '=', $user->id)
+            ->whereDate('due_end', '<=', strtotime('today midnight'))
+            ->whereNull('completed_at')
+            ->count();
+
+        $all_incomplete_count = max($all_incomplete_count, 0);
+
+        return [
+            'todos' => $todos,
+            'incomplete_count' => $all_incomplete_count,
+        ];
+    }
+
+    public function projects(): array
+    {
+        $user = auth()->user();
+        $projects = $user->projects;
+        $project_count = $projects->count();
+
+        // Average number of todos per project
+        $ave_todo_count = function ($projects) {
+            $todo_count = 0;
+            foreach ($projects as $project) {
+                $todo_count += $project->todos->count();
+            }
+            return $todo_count / $projects->count();
+        };
+
+        return [
+            'projects' => $projects,
+            'project_count' => $project_count,
+            'ave_todo_count' => $ave_todo_count($projects),
+        ];
+    }
+
+    public function all_completed_todos(): array
+    {
+        $user = auth()->user();
+        // Join project_todo first and project_user tables, paginate the results
+        $todos = DB::table('todos')
+            ->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
+            ->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
+            ->where('project_user.user_id', '=', $user->id)
+            ->whereDate('due_end', '<=', strtotime('today midnight'))
+            ->whereNotNull('completed_at')
+            ->paginate(5);
+
+        $all_completed_count = DB::table('todos')
+            ->join('project_todo', 'todos.id', '=', 'project_todo.todo_id')
+            ->join('project_user', 'project_todo.project_id', '=', 'project_user.project_id')
+            ->where('project_user.user_id', '=', $user->id)
+            ->whereDate('due_end', '<=', strtotime('today midnight'))
+            ->whereNotNull('completed_at')
+            ->count();
+
+        $all_completed_count = max($all_completed_count, 0);
+
+        return [
+            'todos' => $todos,
+            'completed_count' => $all_completed_count,
+        ];
+    }
+}
diff --git a/app/Http/Controllers/ProjectTodoController.php b/app/Http/Controllers/ProjectTodoController.php
index 42f319d..0b70a07 100644
--- a/app/Http/Controllers/ProjectTodoController.php
+++ b/app/Http/Controllers/ProjectTodoController.php
@@ -28,8 +28,7 @@ class ProjectTodoController extends Controller
 
         if (!$project || $project->user->id !== auth()->user()->id)
             return back()
-                ->with('error', 'Project not found')
-                ->setStatusCode(404);
+                ->with('error', 'Project not found');
 
         $todos = $project->todos;
 
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index adb0558..da76199 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -5,14 +5,185 @@
         </h2>
     </x-slot>
 
-    <div class="py-12">
-        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
-                <div class="p-6 text-gray-900 dark:text-gray-100">
-                    {{ __("You're logged in!") }}
-                </div>
+    <!-- Display Statistics of Todo Completion -->
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
+        <h2 class="text-2xl font-semibold mb-4 text-indigo-500 dark:text-indigo-400">
+            <!-- Icon for Target board -->
+            <svg class="inline-block h-6 w-6 text-indigo-500 dark:text-indigo-400"
+                 xmlns="http://www.w3.org/2000/svg"
+                 fill="none"
+                 viewBox="0 0 24 24"
+                 stroke="currentColor">
+                <path stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M9 9v6m0 0v6m0-6h6m-6 0H3"/>
+            </svg>
+            Your Stats
+        </h2>
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
+                <h3 class="text-xl font-semibold mb-4 text-red-500 dark:text-red-400">
+                    <!-- SVG for Incomplete Todos -->
+                    <svg class="inline-block h-6 w-6 text-red-500 dark:text-red-400"
+                         xmlns="http://www.w3.org/2000/svg"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M6 18L18 6M6 6l12 12"/>
+                    </svg>
+                    Total incomplete Todos
+                </h3>
+                <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
+                    {{ $incomplete_count }}
+                </p>
             </div>
+
+            <!-- Todo Completed Count -->
+            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
+                <h3 class="text-xl font-semibold mb-4 text-green-500 dark:text-green-400">
+                    <!-- SVG for Completed Todos -->
+                    <svg class="inline-block h-6 w-6 text-green-500 dark:text-green-400"
+                         xmlns="http://www.w3.org/2000/svg"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M5 13l4 4L19 7"/>
+                    </svg>
+                    Total Completed Todos
+                </h3>
+                <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
+                    {{ $todo_completed_count }}
+                </p>
+            </div>
+
+            <!-- Average Todo Count per Project -->
+            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
+                <h3 class="text-xl font-semibold mb-4 text-yellow-500 dark:text-yellow-400">
+                    <!-- SVG for Average Todos -->
+                    <svg class="inline-block h-6 w-6 text-yellow-500 dark:text-yellow-400"
+                         xmlns="http://www.w3.org/2000/svg"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+                    </svg>
+                    Average Todos per Project
+                </h3>
+                <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
+                    {{ $ave_todo_count }}
+                </p>
+            </div>
+
+            <!-- Project Count -->
+            <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
+                <h3 class="text-xl font-semibold mb-4 text-blue-500 dark:text-blue-400">
+                    <!-- SVG for Project Count -->
+                    <svg class="inline-block h-6 w-6 text-blue-500 dark:text-blue-400"
+                         xmlns="http://www.w3.org/2000/svg"
+                         fill="none"
+                         viewBox="0 0 24 24"
+                         stroke="currentColor">
+                        <path stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+                    </svg>
+                    Total Projects
+                </h3>
+                <p class="text-3xl font-bold text-gray-800 dark:text-gray-100">
+                    {{ $project_count }}
+                </p>
+            </div>
+
+        </div>
+
+    </div>
+
+
+    <!-- List out Todos and their details (time left/ago) + checkbox in form to toggle completed -->
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
+        <h2 class="text-2xl font-semibold mb-4 text-green-500 dark:text-green-400">
+            Today's Todos
+            ({{ $incomplete_count }})
+        </h2>
+        <div class="space-y-4">
+            @foreach ($todos as $todo)
+            <a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
+                <div
+                    class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
+                    <div class="flex items-center">
+                        <form action="{{ route('project.todo.update', [$todo->project->id, $todo->id]) }}"
+                              method="POST"
+                              class="toggle-completed-form">
+                            @csrf
+                            @method('PUT')
+                            <label class="flex items-center cursor-pointer">
+                                <input type="checkbox" name="completed_at" id="completed_at_{{ $todo->id }}"
+                                       class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                                       onchange="this.form.submit()" {{ $todo->completed_at ? 'checked' : ''
+                                }}>
+                                <span class="ml-2 text-sm text-gray-700"></span>
+                            </label>
+                        </form>
+                        <span
+                            class="ml-2 text-2xl font-bold text-gray-800 dark:text-gray-100">
+                                        {{ $todo->title }}
+                                    </span>
+
+                    </div>
+                    <div>
+                        @php
+                        if ($todo->due_start && $todo->due_end) {
+                        $due = \Carbon\Carbon::parse($todo->due_end);
+                        $now = now();
+                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                        $due->diffForHumans($now,
+                        true);
+                        } elseif ($todo->due_start) {
+                        $due = \Carbon\Carbon::parse($todo->due_start);
+                        $now = now();
+                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                        $due->diffForHumans($now,
+                        true);
+                        } elseif ($todo->due_end) {
+                        $due = \Carbon\Carbon::parse($todo->due_end);
+                        $now = now();
+                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                        $due->diffForHumans($now,
+                        true);
+                        } else {
+                        // If there is no due_start or due_end, set $timeRemaining to null
+                        $timeRemaining = null;
+                        }
+                        @endphp
+
+                        @if ($timeRemaining !== null)
+                        @if ($due->isFuture())
+                        <p class="text-sm text-green-600">{{ $timeRemaining }} remaining</p>
+                        @else
+                        <p class="text-sm text-red-600">{{ $timeRemaining }} ago</p>
+                        @endif
+                        @endif
+                    </div>
+                </div>
+            </a>
+            @endforeach
         </div>
     </div>
 
+    <!-- Pagination with CSS -->
+    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4 pb-4">
+        {{ $todos->links() }}
+    </div>
+
 </x-app-layout>
diff --git a/resources/views/project/index.blade.php b/resources/views/project/index.blade.php
index 391e8b5..fe4a90b 100644
--- a/resources/views/project/index.blade.php
+++ b/resources/views/project/index.blade.php
@@ -74,116 +74,7 @@
         });
     </script>
 
+    @include('todo.todo_list')
 
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
-        <h2 class="text-2xl font-semibold mb-4 text-red-500 dark:text-red-400">
-            Not Completed ({{ $todos->count() }})
-        </h2>
-        <div class="space-y-4">
-            @foreach ($todos as $todo)
-            @if (!$todo->completed_at)
-            <a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
-                <div
-                    class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
-                    <div class="flex items-center">
-                        <!-- Checkbox to toggle completed at -->
-                        <form action="{{ route('project.todo.update', [$todo->project->id, $todo->id]) }}"
-                              method="POST"
-                              class="toggle-completed-form">
-                            @csrf
-                            @method('PUT')
-                            <label class="flex items-center cursor-pointer">
-                                <input type="checkbox" name="completed_at"
-                                       class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                                       onclick="this.form.submit()" {{ $todo->completed_at ? 'checked' : ''
-                                }}>
-                                <span class="ml-2 text-sm text-gray-700"></span>
-                            </label>
-                        </form>
-                        <span
-                            class="ml-2 text-xl font-bold text-gray-800 dark:text-gray-100">{{ $todo->title }}
-                            <!-- Project name and link to project beside todo title as a badge with a blue background -->
-                            <span
-                                class="ml-2 text-sm font-semibold text-blue-600 bg-blue-100 rounded-full px-2 py-1">{{ $todo->project->name }}</span>
-                            </span>
-                    </div>
-                    <div>
-                        @php
-                        if ($todo->due_start && $todo->due_end) {
-                        $due = \Carbon\Carbon::parse($todo->due_end);
-                        $now = now();
-                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
-                        $due->diffForHumans($now,
-                        true);
-                        } elseif ($todo->due_start) {
-                        $due = \Carbon\Carbon::parse($todo->due_start);
-                        $now = now();
-                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
-                        $due->diffForHumans($now,
-                        true);
-                        } elseif ($todo->due_end) {
-                        $due = \Carbon\Carbon::parse($todo->due_end);
-                        $now = now();
-                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
-                        $due->diffForHumans($now,
-                        true);
-                        } else {
-                        // If there is no due_start or due_end, set $timeRemaining to null
-                        $timeRemaining = null;
-                        }
-                        @endphp
-
-                        @if ($timeRemaining !== null)
-                        @if ($due->isFuture())
-                        <p class="text-sm text-green-600">{{ $timeRemaining }} remaining</p>
-                        @else
-                        <p class="text-sm text-red-600">{{ $timeRemaining }} ago</p>
-                        @endif
-                        @endif
-                    </div>
-
-                </div>
-            </a>
-            @endif
-            @endforeach
-        </div>
-    </div>
-
-
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
-        <h2 class="text-2xl font-semibold mb-4 text-green-500 dark:text-green-400">
-            Completed Today
-            ({{ $completed->count() }})
-        </h2>
-        <div class="space-y-4">
-            @foreach ($completed as $todo)
-            <a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}"
-               class="block">
-                <div
-                    class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
-                    <div class="flex items-center">
-                        <form action="{{ route('project.todo.update', [$todo->project->id, $todo->id]) }}"
-                              method="POST"
-                              class="toggle-completed-form">
-                            @csrf
-                            @method('PUT')
-                            <label class="flex items-center cursor-pointer">
-                                <input type="checkbox" name="completed_at" id="completed_at_{{ $todo->id }}"
-                                       class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                                       onchange="this.form.submit()" {{ $todo->completed_at ? 'checked' : ''
-                                }}>
-                                <span class="ml-2 text-sm text-gray-700"></span>
-                            </label>
-                        </form>
-                        <span
-                            class="ml-2 text-2xl font-bold text-gray-800 dark:text-gray-100">
-                                        {{ $todo->title }}
-                                    </span>
-                    </div>
-                </div>
-            </a>
-            @endforeach
-        </div>
-    </div>
 
 </x-app-layout>
diff --git a/resources/views/todo/index.blade.php b/resources/views/todo/index.blade.php
index 90a783a..e063eec 100644
--- a/resources/views/todo/index.blade.php
+++ b/resources/views/todo/index.blade.php
@@ -41,105 +41,6 @@
         </form>
     </div>
 
+    @include('todo.todo_list')
 
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
-        <h2 class="text-2xl font-semibold mb-4 text-red-500 dark:text-red-400">
-            Not Completed ({{ $todos->count() }})
-        </h2>
-        <div class="space-y-4">
-            @foreach ($todos as $todo)
-            @if (!$todo->completed_at)
-            <a href="{{ route('project.todo.edit', [$project->id, $todo->id]) }}" class="block">:
-                <div
-                    class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
-                    <div class="flex items-center">
-                        <!-- Checkbox to toggle completed at -->
-                        <form action="{{ route('project.todo.update', [$project->id, $todo->id]) }}"
-                              method="POST"
-                              class="toggle-completed-form">
-                            @csrf
-                            @method('PUT')
-                            <label class="flex items-center cursor-pointer">
-                                <input type="checkbox" name="completed_at"
-                                       class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                                       onclick="this.form.submit()" {{ $todo->completed_at ? 'checked' : '' }}>
-                                <span class="ml-2 text-sm text-gray-700"></span>
-                            </label>
-                        </form>
-                        <span class="ml-2 text-xl font-bold text-gray-800 dark:text-gray-100">{{ $todo->title }}</span>
-                    </div>
-                    <div>
-                        @php
-                        if ($todo->due_start && $todo->due_end) {
-                        $due = \Carbon\Carbon::parse($todo->due_end);
-                        $now = now();
-                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) : $due->diffForHumans($now,
-                        true);
-                        } elseif ($todo->due_start) {
-                        $due = \Carbon\Carbon::parse($todo->due_start);
-                        $now = now();
-                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) : $due->diffForHumans($now,
-                        true);
-                        } elseif ($todo->due_end) {
-                        $due = \Carbon\Carbon::parse($todo->due_end);
-                        $now = now();
-                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) : $due->diffForHumans($now,
-                        true);
-                        } else {
-                        // If there is no due_start or due_end, set $timeRemaining to null
-                        $timeRemaining = null;
-                        }
-                        @endphp
-
-                        @if ($timeRemaining !== null)
-                        @if ($due->isFuture())
-                        <p class="text-sm text-green-600">{{ $timeRemaining }} remaining</p>
-                        @else
-                        <p class="text-sm text-red-600">{{ $timeRemaining }} ago</p>
-                        @endif
-                        @endif
-                    </div>
-
-                </div>
-            </a>
-            @endif
-            @endforeach
-        </div>
-    </div>
-
-
-    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 mt-4">
-        <h2 class="text-2xl font-semibold mb-4 text-green-500 dark:text-green-400">
-            Completed Today
-            ({{ $completed->count() }})
-        </h2>
-        <div class="space-y-4">
-            @foreach ($completed as $todo)
-            <a href="{{ route('project.todo.edit', [$project->id, $todo->id]) }}" class="block">
-                <div
-                    class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6 flex items-center justify-between">
-                    <div class="flex items-center">
-                        <form action="{{ route('project.todo.update', [$project->id, $todo->id]) }}"
-                              method="POST"
-                              class="toggle-completed-form">
-                            @csrf
-                            @method('PUT')
-                            <label class="flex items-center cursor-pointer">
-                                <input type="checkbox" name="completed_at" id="completed_at_{{ $todo->id }}"
-                                       class="w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
-                                       onchange="this.form.submit()" {{ $todo->completed_at ? 'checked' : ''
-                                }}>
-                                <span class="ml-2 text-sm text-gray-700"></span>
-                            </label>
-                        </form>
-                        <span
-                            class="ml-2 text-2xl font-bold text-gray-800 dark:text-gray-100">
-                                        {{ $todo->title }}
-                                    </span>
-                    </div>
-                </div>
-            </a>
-            @endforeach
-        </div>
-    </div>
 </x-app-layout>
diff --git a/resources/views/todo/todo_list.blade.php b/resources/views/todo/todo_list.blade.php
new file mode 100644
index 0000000..3b3fccb
--- /dev/null
+++ b/resources/views/todo/todo_list.blade.php
@@ -0,0 +1,150 @@
+<div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-4">
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 py-4">
+        <!-- Incomplete Todos Section -->
+        <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
+            <h2 class="text-2xl font-semibold mb-4 text-red-500 dark:text-red-400 px-6 pt-6">
+                Not Completed ({{ $todos->count() }})
+            </h2>
+            <div class="space-y-4 mb-4">
+                @foreach ($todos as $todo)
+                @if (!$todo->completed_at)
+                <a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
+                    <div class="p-6 bg-white dark:bg-gray-800 shadow-sm rounded-lg flex items-center">
+                        <!-- Checkbox to toggle completed at -->
+                        <form action="{{ route('project.todo.update', [$todo->project->id, $todo->id]) }}"
+                              method="POST"
+                              class="toggle-completed-form">
+                            @csrf
+                            @method('PUT')
+                            <label class="flex items-center cursor-pointer">
+                                <!-- Larger Checkbox -->
+                                <input type="checkbox" name="completed_at"
+                                       class="w-6 h-6 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                                       onclick="this.form.submit()" {{ $todo->completed_at ? 'checked' : '' }}>
+                                <span class="ml-2 text-sm text-gray-700"></span>
+                            </label>
+                        </form>
+                        <span
+                            class="ml-2 text-xl font-bold text-gray-800 dark:text-gray-100">{{ $todo->title }}</span>
+                        <!-- Badge smaller width, below the title -->
+                        <div
+                            class="ml-8 mt-2 py-1 px-2 text-sm font-semibold text-blue-600 bg-blue-100 rounded-full w-64 truncate">
+                            {{ $todo->project->name }}
+                        </div>
+                    </div>
+
+                    <!-- Date -->
+                    <div class="relative px-6 pb-6">
+                        @php
+                        if ($todo->due_start && $todo->due_end) {
+                        $due = \Carbon\Carbon::parse($todo->due_end);
+                        $now = now();
+                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                        $due->diffForHumans($now,
+                        true);
+                        } elseif ($todo->due_start) {
+                        $due = \Carbon\Carbon::parse($todo->due_start);
+                        $now = now();
+                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                        $due->diffForHumans($now,
+                        true);
+                        } elseif ($todo->due_end) {
+                        $due = \Carbon\Carbon::parse($todo->due_end);
+                        $now = now();
+                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                        $due->diffForHumans($now,
+                        true);
+                        } else {
+                        // If there is no due_start or due_end, set $timeRemaining to null
+                        $timeRemaining = null;
+                        }
+                        @endphp
+
+                        @if ($timeRemaining !== null)
+                        @if ($due->isFuture())
+                        <p class="text-sm text-green-600">{{ $timeRemaining }} remaining</p>
+                        @else
+                        <p class="text-sm text-red-600">{{ $timeRemaining }} ago</p>
+                        @endif
+                        @endif
+                    </div>
+                </a>
+                @endif
+                @endforeach
+            </div>
+        </div>
+
+        <!-- Completed Todos Section -->
+        <div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg">
+            <h2 class="text-2xl font-semibold mb-4 text-green-500 dark:text-green-400 px-6 pt-6">
+                Completed Today ({{ $completed->count() }})
+            </h2>
+            <div class="space-y-4">
+                @foreach ($completed as $todo)
+                <a href="{{ route('project.todo.edit', [$todo->project->id, $todo->id]) }}" class="block">
+                    <div class="p-6 bg-white dark:bg-gray-800 shadow-sm rounded-lg flex items-center">
+                        <form action="{{ route('project.todo.update', [$todo->project->id, $todo->id]) }}"
+                              method="POST"
+                              class="toggle-completed-form">
+                            @csrf
+                            @method('PUT')
+                            <label class="flex items-center cursor-pointer">
+                                <!-- Larger checkbox for completed -->
+                                <input type="checkbox" name="completed_at" id="completed_at_{{ $todo->id }}"
+                                       class="w-6 h-6 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500 dark:focus:ring-green-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                                       onchange="this.form.submit()" {{ $todo->completed_at ? 'checked' : '' }}>
+                                <span class="ml-2 text-sm text-gray-700"></span>
+                            </label>
+                        </form>
+                        <span class="ml-2 text-xl font-bold text-gray-800 dark:text-gray-100">
+                                {{ $todo->title }}
+                            </span>
+                        <!-- Badge -->
+                        <div
+                            class="ml-8 mt-2 py-1 px-2 text-sm font-semibold text-green-600 bg-green-100 rounded-full w-64 truncate">
+                            {{ $todo->project->name }}
+                        </div>
+                    </div>
+
+                    <!-- Date all Green -->
+                    <div class="relative px-6 pb-6">
+                        @php
+                        if ($todo->due_start && $todo->due_end) {
+                        $due = \Carbon\Carbon::parse($todo->due_end);
+                        $now = now();
+                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                        $due->diffForHumans($now,
+                        true);
+                        } elseif ($todo->due_start) {
+                        $due = \Carbon\Carbon::parse($todo->due_start);
+                        $now = now();
+                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                        $due->diffForHumans($now,
+                        true);
+                        } elseif ($todo->due_end) {
+                        $due = \Carbon\Carbon::parse($todo->due_end);
+                        $now = now();
+                        $timeRemaining = $due->isFuture() ? $now->diffForHumans($due, true) :
+                        $due->diffForHumans($now,
+                        true);
+                        } else {
+                        // If there is no due_start or due_end, set $timeRemaining to null
+                        $timeRemaining = null;
+                        }
+                        @endphp
+
+                        @if ($timeRemaining !== null)
+                        @if ($due->isFuture())
+                        <p class="text-sm text-green-600">{{ $timeRemaining }} remaining</p>
+                        @else
+                        <p class="text-sm text-green-600">{{ $timeRemaining }} ago</p>
+                        @endif
+                        @endif
+                    </div>
+
+                </a>
+                @endforeach
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/routes/web.php b/routes/web.php
index c65c3a7..4a674ee 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\DashboardController;
 use App\Http\Controllers\ProfileController;
 use App\Http\Controllers\ProjectController;
 use App\Http\Controllers\ProjectTodoController;
@@ -20,9 +21,8 @@ Route::get('/', function () {
     return redirect(route('project.index'));
 });
 
-Route::get('/dashboard', function () {
-    return view('dashboard');
-})->middleware(['auth', 'verified'])
+Route::get('/dashboard', [DashboardController::class, 'index'])
+    ->middleware(['auth', 'verified'])
     ->name('dashboard');
 
 Route::resource('project.todo', ProjectTodoController::class)