diff --git a/lib/main.dart b/lib/main.dart
index 31c85d63..8b53d1b7 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,12 +1,14 @@
 import 'package:flutter/material.dart';
 import 'views/main_layout.dart';
+import 'package:provider/provider.dart';
+import 'package:auto_gpt_flutter_client/viewmodels/task_viewmodel.dart';
 
 void main() {
   runApp(const MyApp());
 }
 
 class MyApp extends StatelessWidget {
-  const MyApp({super.key});
+  const MyApp({Key? key}) : super(key: key); // Corrected the constructor
 
   @override
   Widget build(BuildContext context) {
@@ -15,7 +17,10 @@ class MyApp extends StatelessWidget {
       theme: ThemeData(
         primarySwatch: Colors.blue,
       ),
-      home: const MainLayout(), // Set MainLayout as the home screen of the app
+      home: ChangeNotifierProvider(
+        create: (context) => TaskViewModel(),
+        child: const MainLayout(),
+      ), // Set MainLayout as the home screen of the app
     );
   }
 }
diff --git a/lib/views/main_layout.dart b/lib/views/main_layout.dart
index 655e6749..3639d978 100644
--- a/lib/views/main_layout.dart
+++ b/lib/views/main_layout.dart
@@ -1,21 +1,30 @@
 import 'package:auto_gpt_flutter_client/views/task_view.dart';
 import 'package:auto_gpt_flutter_client/views/chat_view.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:auto_gpt_flutter_client/viewmodels/task_viewmodel.dart'; // Importing the TaskViewModel
+import 'package:provider/provider.dart'; // Required for accessing the ViewModel
 
 class MainLayout extends StatelessWidget {
-  const MainLayout({super.key});
+  const MainLayout({Key? key}) : super(key: key); // Corrected the constructor
 
   @override
   Widget build(BuildContext context) {
     // Get the screen width
     double width = MediaQuery.of(context).size.width;
 
+    // Access the TaskViewModel from the context
+    final taskViewModel = Provider.of<TaskViewModel>(context);
+
     // Check the screen width and return the appropriate layout
     if (width > 800) {
       // For larger screens, return a side-by-side layout
-      return const Row(
+      return Row(
         children: [
-          SizedBox(width: 280, child: TaskView()),
+          SizedBox(
+              width: 280,
+              child: TaskView(
+                  viewModel:
+                      taskViewModel)), // Pass the viewModel to the TaskView
           Expanded(child: ChatView()),
         ],
       );
@@ -40,8 +49,10 @@ class MainLayout extends StatelessWidget {
           switch (index) {
             case 0:
               returnValue = CupertinoTabView(builder: (context) {
-                return const CupertinoPageScaffold(
-                  child: TaskView(),
+                return CupertinoPageScaffold(
+                  child: TaskView(
+                      viewModel:
+                          taskViewModel), // Pass the viewModel to the TaskView
                 );
               });
               break;
diff --git a/lib/views/task_view.dart b/lib/views/task_view.dart
index 52a4c378..9295e9a2 100644
--- a/lib/views/task_view.dart
+++ b/lib/views/task_view.dart
@@ -1,17 +1,74 @@
+import 'package:auto_gpt_flutter_client/views/new_task_button.dart';
+import 'package:auto_gpt_flutter_client/views/task_list_tile.dart';
 import 'package:flutter/material.dart';
+import 'package:auto_gpt_flutter_client/viewmodels/task_viewmodel.dart';
 
-class TaskView extends StatelessWidget {
-  const TaskView({super.key});
+class TaskView extends StatefulWidget {
+  final TaskViewModel viewModel;
+
+  const TaskView({Key? key, required this.viewModel}) : super(key: key);
+
+  @override
+  _TaskViewState createState() => _TaskViewState();
+}
+
+class _TaskViewState extends State<TaskView> {
+  @override
+  void initState() {
+    super.initState();
+
+    // Schedule the fetchTasks call for after the initial build
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      widget.viewModel.fetchTasks();
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      color: Colors.blue,
-      child: const Center(
-        child: Text(
-          'Tasks',
-          style: TextStyle(fontSize: 24, color: Colors.white),
-        ),
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Column(
+        children: [
+          // Title and New Task button
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Column(
+              children: [
+                Text(
+                  'Tasks',
+                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.normal),
+                ),
+                SizedBox(height: 8),
+                NewTaskButton(
+                  onPressed: () {
+                    // TODO: Implement add new task action
+                    print('Add new task button pressed');
+                  },
+                )
+              ],
+            ),
+          ),
+          // Task List
+          Expanded(
+            child: ListView.builder(
+              itemCount: widget.viewModel.tasks.length,
+              itemBuilder: (context, index) {
+                final task = widget.viewModel.tasks[index];
+                return TaskListTile(
+                  task: task,
+                  onTap: () {
+                    // TODO: Implement the action when a task is tapped. This should trigger the TaskView to update.
+                    print('Task ${task.title} tapped');
+                  },
+                  onDelete: () {
+                    // TODO: Implement the action when a task is needing to be deleted. This should trigger the TaskView to update.
+                    print('Task ${task.title} delete button tapped');
+                  },
+                );
+              },
+            ),
+          ),
+        ],
       ),
     );
   }