diff --git a/README.md b/README.md
index c15c1d3..0f9c004 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,16 @@
-# todolist
+# Todolist
+
+# Projet Todo List en Vue.js 3
+
+Ce projet est une application simple de liste de tâches (Todo List) développée avec Vue.js 3. Il a été créé dans le but d'apprendre et de pratiquer les concepts fondamentaux de Vue.js, tels que la gestion des données réactives, les directives, et les méthodes.
+
+## Fonctionnalités
+
+- **Ajouter une tâche** : Vous pouvez ajouter une nouvelle tâche en saisissant du texte dans le champ prévu à cet effet et en cliquant sur le bouton "Ajouter".
+- **Afficher les tâches** : Les tâches sont affichées dans une liste, avec une checkbox pour marquer une tâche comme complétée.
+- **Masquer les tâches complétées** : Une option permet de masquer les tâches qui ont été marquées comme complétées.
+- **Tri des tâches** : Les tâches sont automatiquement triées pour afficher les tâches non complétées en premier.
 
-This template should help get you started developing with Vue 3 in Vite.
 
 ## Recommended IDE Setup
 
diff --git a/index.html b/index.html
index 99f583a..a5dbac1 100644
--- a/index.html
+++ b/index.html
@@ -3,11 +3,16 @@
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
+    <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Todolist</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div class="container" style="margin-block: 2rem;" id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
+ 
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 633a5df..723f85d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,64 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <form action="" @submit.prevent="addTodo"> 
+    <fieldset role="group">
+      <input v-model="newTodo" type="text" placeholder="Tâche à effectuer">
+      <button :disabled="newTodo.length === 0">Ajouter</button>
+    </fieldset>
+  </form>
+
+  <div v-if="todos.length === 0">
+    Vous n'avez pas de tâches à faire
+  </div>
+
+  <div v-else>
+    <ul>
+      <li v-for="todo in sortedTodos()" :key="todo.date" :class="{completed: todo.completed}">
+        <label>
+          <input type="checkbox" v-model="todo.completed">
+          {{ todo.title }}
+
+        </label>
+      </li>
+    </ul>
+
+    <div>
+      <label >
+        <input type="checkbox" name="" id="" v-model="hideCompleted">
+        Masquer les tâche complétées
+      </label>
     </div>
-  </header>
 
-  <main>
-    <TheWelcome />
-  </main>
+  </div>
+
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
+<script setup>
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+import { ref } from 'vue';
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
+
+const hideCompleted = ref(false)
+const newTodo = ref('');
+const todos = ref([])
+
+const addTodo = () => {
+  todos.value.push({
+    title: newTodo.value,
+    completed: false,
+    date: Date.now()  
+  });
+
+  newTodo.value = '';
+};
+
+const sortedTodos = () => {
+  const sortedTodo =  todos.value.toSorted((a, b) => a.completed > b.completed ? 1 : -1);
+  if (hideCompleted.value === true){
+    return sortedTodo.filter(t => t.completed === false)
   }
+  return sortedTodo
+};
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+</script>
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
diff --git a/src/assets/main.css b/src/assets/main.css
index 36fb845..91ab347 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,35 +1,4 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
+.completed {
+  opacity: .5;
+  text-decoration: line-through;
+}
\ No newline at end of file
