diff --git a/bun.lock b/bun.lock
index 89a91da..8b38ef9 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,6 +5,7 @@
     "": {
       "name": "tout-doux",
       "dependencies": {
+        "@lucide/vue": "^1.23.0",
         "vue": "^3.5.38",
       },
       "devDependencies": {
@@ -141,6 +142,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@lucide/vue": ["@lucide/vue@1.23.0", "", { "peerDependencies": { "vue": ">=3.0.1" } }, "sha512-9SIYeY5K+R1iv8F8JUKMGSL7Pck/86BJ8djtZz/lnYsoHtKFUj1H2z6+PvKnC/8blZ8tqTDeDXAoTKobuX80hg=="],
+
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.6", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg=="],
 
     "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
diff --git a/index.html b/index.html
index 838bb79..5bc66e1 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,7 @@
 <!doctype html>
 <html lang="en">
     <head>
-        <!-- TODO: 1. rename app -->
-        <title>Change this you moron</title>
+        <title>Tout Doux</title>
         <link rel="stylesheet" href="/resources/css/style.css" />
         <!-- <link rel="icon" href="/favicon.ico"> -->
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/package.json b/package.json
index 0440425..4dcf033 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
         "lint-fix:oxlint": "oxlint . --fix"
     },
     "dependencies": {
+        "@lucide/vue": "^1.23.0",
         "vue": "^3.5.38"
     },
     "devDependencies": {
diff --git a/resources/css/style.css b/resources/css/style.css
index 4c1b0c2..08b5a34 100644
--- a/resources/css/style.css
+++ b/resources/css/style.css
@@ -1,2 +1,12 @@
+@import url("https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap");
 @import "tailwindcss";
-@plugin "daisyui";
+@plugin "daisyui" {
+    themes: cupcake --default;
+}
+
+body {
+    font-family: "Sour Gummy", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings: "wdth" 100;
+}
diff --git a/resources/ts/App.vue b/resources/ts/App.vue
index 3334e1b..f690878 100644
--- a/resources/ts/App.vue
+++ b/resources/ts/App.vue
@@ -1,36 +1,45 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeMount } from "vue";
-import { getComments, postComment } from "@/api/comments";
-import type { Comment } from "@/types";
+import type { Task } from "@/types";
+import { getTasks, createTask } from "./api/tasks";
+import { CirclePlus } from "@lucide/vue";
+import TaskItem from "@/components/TaskItem.vue";
 
 const visible = ref<boolean>(false);
-const comments = ref<Comment[]>([]);
-const commentInput = ref<string>("");
+const taskInput = ref<string>("");
+const tasks = ref<Task[]>([]);
+const list = ref<string>("test");
 
-function fetchComments() {
-    getComments()
-        .then((data: Comment[]) => {
-            comments.value = data;
+function fetchTasks() {
+    getTasks(list.value)
+        .then((data: Task[]) => {
+            tasks.value = data;
+            setTimeout(fetchTasks, 10000);
         })
         .catch(() => {
-            //ignore
+            // ignore
         });
 }
 
-function sendComment() {
-    if (commentInput.value.trim()) {
-        postComment(commentInput.value.trim())
-            .finally(() => {
-                commentInput.value = "";
-                fetchComments();
+function newTask() {
+    if (taskInput.value.trim()) {
+        createTask(list.value, {
+            name: taskInput.value.trim(),
+            reset_cron: null,
+        })
+            .then((data: Task) => {
+                tasks.value.push(data);
             })
             .catch(() => {
                 //ignore
+            })
+            .finally(() => {
+                taskInput.value = "";
             });
     }
 }
 
-onBeforeMount(fetchComments);
+onBeforeMount(fetchTasks);
 
 onMounted(() => {
     setTimeout(() => {
@@ -43,52 +52,34 @@ onMounted(() => {
     <main :style="{ display: visible ? 'inherit' : 'none' }">
         <div class="hero bg-base-200 min-h-screen">
             <div class="hero-content text-center">
-                <div class="max-w-md">
+                <div class="max-w-md min-w-96">
                     <ul class="list bg-base-100 rounded-box shadow-md">
-                        <li class="p-4 pb-2 text-xl opacity-60 tracking-wide">
-                            Comments
+                        <li
+                            class="p-4 pb-2 text-4xl font-bold opacity-60 tracking-wide select-none"
+                        >
+                            Tout Doux
                         </li>
 
-                        <li
-                            v-for="comment in comments"
-                            :key="comment.id"
-                            class="list-row"
-                        >
-                            <div class="avatar avatar-placeholder">
-                                <div
-                                    class="bg-neutral text-neutral-content size-10 rounded-box"
-                                >
-                                    <span class="text-xs">{{
-                                        comment.content[0]
-                                    }}</span>
-                                </div>
-                            </div>
-                            <div>
-                                <div class="text-xs opacity-60">
-                                    {{ comment.created_at }}
-                                </div>
-                                <div class="font-semibold">
-                                    {{ comment.content }}
-                                </div>
-                            </div>
+                        <li v-for="(task, i) in tasks" :key="task.id">
+                            <TaskItem v-if="tasks[i]" v-model="tasks[i]" />
                         </li>
                         <li class="list-row">
-                            <div>
+                            <div class="list-col-grow">
                                 <input
-                                    v-model="commentInput"
+                                    v-model="taskInput"
                                     type="text"
-                                    placeholder="Type here"
+                                    placeholder="New Task"
                                     class="input"
-                                    @keyup.enter="sendComment"
+                                    @keyup.enter="newTask"
                                 />
                             </div>
                             <div>
                                 <button
-                                    class="btn"
-                                    :disabled="commentInput.trim().length === 0"
-                                    @click="sendComment"
+                                    class="btn btn-square"
+                                    :disabled="taskInput.trim().length === 0"
+                                    @click="newTask"
                                 >
-                                    Send
+                                    <CirclePlus />
                                 </button>
                             </div>
                         </li>
diff --git a/resources/ts/api/tasks.ts b/resources/ts/api/tasks.ts
index a827827..59b6d05 100644
--- a/resources/ts/api/tasks.ts
+++ b/resources/ts/api/tasks.ts
@@ -1,32 +1,44 @@
-import type { RawTask, TaskCreateData, TaskUpdateData } from "@/types";
+import type { RawTask, Task, TaskCreateData, TaskUpdateData } from "@/types";
 
-export async function getTasks(list: string): Promise<RawTask[]> {
+function parseTask(task: RawTask): Task {
+    return {
+        id: task.id,
+        name: task.name,
+        reset_cron: task.reset_cron,
+        check_date: task.check_date ? new Date(task.check_date) : null,
+        previous_check_date: task.previous_check_date
+            ? new Date(task.previous_check_date)
+            : null,
+    };
+}
+
+export async function getTasks(list: string): Promise<Task[]> {
     const response = await fetch(`/api/lists/${list}/tasks`);
-    return await response.json();
+    return (await response.json()).map(parseTask);
 }
 
 export async function createTask(
     list: string,
     data: TaskCreateData,
-): Promise<RawTask> {
+): Promise<Task> {
     const response = await fetch(`/api/lists/${list}/tasks`, {
         method: "POST",
         body: JSON.stringify({ ...data }),
         headers: { "Content-Type": "application/json" },
     });
-    return await response.json();
+    return parseTask(await response.json());
 }
 
 export async function updateTask(
     taskId: string,
     data: TaskUpdateData,
-): Promise<RawTask> {
+): Promise<Task> {
     const response = await fetch(`/api/tasks/${taskId}`, {
         method: "PUT",
         body: JSON.stringify({ ...data }),
         headers: { "Content-Type": "application/json" },
     });
-    return await response.json();
+    return parseTask(await response.json());
 }
 
 export async function deleteTask(taskId: string): Promise<void> {
diff --git a/resources/ts/types.ts b/resources/ts/types.ts
index 15d2764..ea147ac 100644
--- a/resources/ts/types.ts
+++ b/resources/ts/types.ts
@@ -16,6 +16,14 @@ export interface RawTask {
     previous_check_date: string | null;
 }
 
+export interface Task {
+    id: string;
+    name: string;
+    reset_cron: string | null;
+    check_date: Date | null;
+    previous_check_date: Date | null;
+}
+
 export interface TaskCreateData {
     name: string;
     reset_cron: string | null;
