diff --git a/app/Assets/icon.png b/app/Assets/icon.png
new file mode 100644
index 0000000..08bf441
Binary files /dev/null and b/app/Assets/icon.png differ
diff --git a/app/Components/CreateNewTask.php b/app/Components/CreateNewTask.php
index f4045ef..a5ef719 100644
--- a/app/Components/CreateNewTask.php
+++ b/app/Components/CreateNewTask.php
@@ -20,11 +20,11 @@ class CreateNewTask extends Container
         $this->style = 'flex flex-row m-10 rounded';
 
         $this->saveButton = new Button(views: new Views([
-            new \PHPNative\UI\Widget\Icon(icon: Icon::save, style: 'text-white'),
-            new Text(text: 'save Task', style: 'text-2xl text-white ml-5')
-        ]), style: 'flex-none w-190 bg-green-500 rounded-xl p-4 ml-10 hover:bg-green-700');
+            new \PHPNative\UI\Widget\Icon(icon: Icon::save, style: 'text-white ml-10'),
+            new Text(text: 'save Task', style: 'text-2xl text-white ml-20')
+        ]), style: 'flex-none w-190 bg-green-500 rounded p-5 ml-10 hover:bg-green-700');
 
-        $this->textEdit = new TextEdit(style: 'flex-1 text-2xl bg-slate-100 px-10 rounded-xl text-black p-6', placeholder: 'Placeholder');
+        $this->textEdit = new TextEdit(style: 'flex-1 text-2xl bg-slate-100 px-10 rounded-xl text-black p-6 border border-black', placeholder: 'Placeholder');
         $this->views = new Views([
             $this->textEdit,
             $this->saveButton,
diff --git a/app/Components/NoProjectSelectedTaskList.php b/app/Components/NoProjectSelectedTaskList.php
index 2bcd539..0bce6fe 100644
--- a/app/Components/NoProjectSelectedTaskList.php
+++ b/app/Components/NoProjectSelectedTaskList.php
@@ -14,8 +14,8 @@ class NoProjectSelectedTaskList extends Container
 
     public function __construct()
     {
-        $this->style = "flex-1 bg-red-200 flex flex-col";
-        $this->headline = new Text(text: 'Please select Project', style: 'w-full text-4xl bg-lime-400 m-10 p-10 text-black');
+        $this->style = "flex-1 flex flex-col";
+        $this->headline = new Text(text: 'Please select Project', style: 'w-full bg-lime-200 text-2xl md:text-4xl m-10 p-10 text-black');
     }
 
     public function getViews(): ?Views
diff --git a/app/Components/ProjectList.php b/app/Components/ProjectList.php
index 4411d13..0e7911e 100644
--- a/app/Components/ProjectList.php
+++ b/app/Components/ProjectList.php
@@ -28,7 +28,7 @@ class ProjectList extends Container
     public function __construct(private Lifecycle $lifecycle, private \PHPNative\Container\Container $container)
     {
         parent::__construct(id: 'projectlist');
-        $this->style = 'flex-none w-300 flex flex-col bg-green-500';
+        $this->style = 'flex-none w-300 flex flex-col bg-green-500 md:bg-white';
         $this->createButton = new CreateButton("create Project");
         $this->createButton->setOnClick(fn(Worker $worker) => $this->addProject($worker));
         $this->listData = new ProjectListData();
@@ -42,9 +42,9 @@ class ProjectList extends Container
         /** @var DB $db */
         $db = $this->container->get(Storage::class)->loadModel(DB::class);
         foreach($db->getProjects() as $project) {
-            $button = new \PHPNative\UI\Widget\Button(views: new Views([
-                    new Text(text: $project->title,  style: 'w-full p-2 text-2xl pl-10 hover:bg-slate-300')]
-            ));
+            $button = new \PHPNative\UI\Widget\Button(id: $project->uuid ,views: new Views([
+                    new Text(id: 'text_' . $project->uuid, text: $project->title,  style: 'w-full text-2xl hover:bg-slate-300')]
+            ), style: 'bg-slate-200 m-1 p-10');
             $button->setOnClick(function() use ($project) {
                 $this->selectedProject = $project;
             });
diff --git a/app/Components/ProjectListData.php b/app/Components/ProjectListData.php
index 0a8c05f..1a5f856 100644
--- a/app/Components/ProjectListData.php
+++ b/app/Components/ProjectListData.php
@@ -12,7 +12,7 @@ class ProjectListData extends Container
 
     public function __construct()
     {
-        parent::__construct();
+        parent::__construct('projectlistdata');
         $this->views = new Views();
         $this->style = 'flex flex-col overflow-auto';
     }
diff --git a/app/Components/TaskList.php b/app/Components/TaskList.php
index c12eef1..cb06519 100644
--- a/app/Components/TaskList.php
+++ b/app/Components/TaskList.php
@@ -4,10 +4,15 @@ namespace App\Components;
 
 use App\Model\DB;
 use App\Model\Project;
+use App\Model\Task;
+use Joli\JoliNotif\DefaultNotifier;
+use Joli\JoliNotif\Notification;
 use PHPNative\Framework\Lifecycle\Lifecycle;
+use PHPNative\Framework\Parallel\Worker;
 use PHPNative\Storage\Storage;
 use PHPNative\UI\Collection\Views;
 use PHPNative\UI\View;
+use PHPNative\UI\Widget\Checkbox;
 use PHPNative\UI\Widget\Container;
 use PHPNative\UI\Widget\Text;
 
@@ -21,10 +26,11 @@ class TaskList extends Container
 
     public function __construct(private Lifecycle $lifecycle, private \PHPNative\Container\Container $container)
     {
+        parent::__construct(id: 'tasklist');
         $this->style = "flex-1 flex flex-col";
         $this->createNewTask = new CreateNewTask();
         $this->listData = new TaskListData();
-        $this->headline = new Text(text:'', style: 'w-full bg-lime-200 text-4xl m-10 p-10 text-black');
+        $this->headline = new Text(text:'', style: 'w-full bg-lime-200 text-2xl md:text-4xl m-10 p-10 text-black');
     }
 
     public function getViews(): ?Views
@@ -51,11 +57,37 @@ class TaskList extends Container
         /** @var DB $db */
         $db = $this->container->get(Storage::class)->loadModel(DB::class);
         foreach($db->getTasksForProject($this->project) as $task) {
-            $button = new \PHPNative\UI\Widget\Button(views: new Views([
-                    new Text(text: $task->title,  style: 'w-full text-2xl')]
-            ), style: 'bg-slate-200 rounded-xl p-5 m-5');
+            $button = new \PHPNative\UI\Widget\Button(id: $task->uuid, views: new Views([
+                    (new Checkbox(
+                        checked: $task->finished,
+                        style: 'flex-none w-30 h-30 border border-black' . ($task->finished? ' bg-green-500': ' bg-red-500'),
+                    ))->setOnClick(function(Worker $worker) use ($task) {
+                        $this->saveTask($task);
+                    }),
+                    new Text(text: $task->title,  style: 'flex-1 ml-10 text-2xl')
+                ]
+            ), style: 'bg-slate-200 rounded border border-black p-5 m-5 flex flex-row');
 
             $this->listData->views->add($button);
         }
     }
+
+    public function saveTask(Task $task)
+    {
+        $db = $this->container->get(Storage::class)->loadModel(DB::class);
+        $db->changeTask($task);
+        $this->container->get(Storage::class)->saveModel($db);
+
+        $notifier = new DefaultNotifier();
+
+        $notification =
+            (new Notification())
+                ->setTitle('Task saved')
+                ->setBody(sprintf("%s", $task->title))
+        ;
+
+        $notifier->send($notification);
+
+        $this->loadTasks();
+    }
 }
\ No newline at end of file
diff --git a/app/Components/TaskListData.php b/app/Components/TaskListData.php
index 93696fc..6cda810 100644
--- a/app/Components/TaskListData.php
+++ b/app/Components/TaskListData.php
@@ -11,8 +11,8 @@ class TaskListData extends Container
 {
     public function __construct()
     {
-        parent::__construct();
-        $this->style = 'flex flex-col overflow-auto p-5 m-10 bg-white';
+        parent::__construct(id: 'tasklistdata');
+        $this->style = 'flex flex-col overflow-auto p-5 m-10';
         $this->views = new Views();
     }
 
diff --git a/app/Model/DB.php b/app/Model/DB.php
index 72bbedf..5c6dace 100644
--- a/app/Model/DB.php
+++ b/app/Model/DB.php
@@ -23,6 +23,15 @@ class DB
         $this->tasks[] = $task;
     }
 
+    public function changeTask(Task $task): void
+    {
+        array_walk($this->tasks, function (&$value, $key) use ($task) {
+            if ($value->uuid === $task->uuid) {
+                $value = $task;
+            }
+        });
+    }
+
     public function getTasksForProject(Project $project): array
     {
         return array_filter($this->tasks, function (Task $task) use ($project) {
diff --git a/app/Model/Task.php b/app/Model/Task.php
index 6be91ac..bf7b3c6 100644
--- a/app/Model/Task.php
+++ b/app/Model/Task.php
@@ -4,7 +4,8 @@ namespace App\Model;
 
 class Task
 {
-    public function __construct(public string $uuid = "", public string $title = "", public string $project = "")
+    public function __construct(public string $uuid = "", public string $title = "", public string $project = "", public bool $finished = false)
     {
     }
+
 }
\ No newline at end of file
diff --git a/app/View/AddProject.php b/app/View/AddProject.php
index 46ab095..faa76fd 100644
--- a/app/View/AddProject.php
+++ b/app/View/AddProject.php
@@ -21,7 +21,7 @@ class AddProject extends BaseView implements View
     public function __construct(private Storage $storage)
     {
         $this->saveButton = new Button(views: new Views([new Text(text: 'save project', style: 'p-10 text-white text-2xl w-full text-center')]), style: 'w-full bg-lime-700 m-10');
-        $this->editText = new TextEdit(style: 'text-2xl text-black border border-black w-full m-10 p-10', placeholder: 'Please provide any name');
+        $this->editText = new TextEdit(style: 'text-2xl text-black border border-black m-10 p-10', placeholder: 'Please provide any name');
     }
 
     public function getViews(): ?Views
diff --git a/composer.json b/composer.json
index 98a9927..b375283 100644
--- a/composer.json
+++ b/composer.json
@@ -3,7 +3,8 @@
     "type": "project",
     "license": "MIT",
     "require": {
-        "phpnative/framework": "@dev"
+        "phpnative/framework": "@dev",
+        "jolicode/jolinotif": "^3"
     },
     "autoload": {
         "psr-4": {