diff --git a/TP5.html b/TP5.html
new file mode 100644
index 0000000..cb7bcaf
--- /dev/null
+++ b/TP5.html
@@ -0,0 +1,27 @@
+<head>
+  <meta name="Acceuil">
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="static/style.css"> 
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+</head>
+<body onload="restoreList()">
+  <i class="fa-solid fa-trash"></i>
+  <div id="main">
+    <h1>Grocery list</h1>
+    <div>
+      <button id="clear_button" type="button" onclick="clear_input()"><i class="bi bi-eraser"></i></button>
+      <input type="text" id="new_item_input" placeholder="A new pair of Jordans">
+      <input type="number" id="new_item_quantity" value="1" min="0">
+      <select id="new_item_unit">
+        <option value="unit">unit</option>
+        <option value="L">L</option>
+        <option value="KG">KG</option>
+      </select>
+    </div>
+    <div id="grocery_list">
+    </div>
+  </div>
+</body>
+
+
+<script src="static/js/TP5.js" defer></script> 
diff --git a/static/js/TP5.js b/static/js/TP5.js
new file mode 100644
index 0000000..e08876e
--- /dev/null
+++ b/static/js/TP5.js
@@ -0,0 +1,83 @@
+var grocery_array = []
+
+function clear_input(){
+  document.getElementById("new_item_input").value = ""; 
+}
+
+function addItemToList(item){
+  grocery_array.push(item)
+  localStorage.setItem("grocery_list",JSON.stringify(grocery_array))
+
+  let item_box = document.createElement("div");
+  item_box.classList.add("grocery_item")
+
+  let item_name_container = document.createElement("span");
+  item_name_container.classList.add("grocery_item_name");
+
+  item_name_container.textContent = item;
+
+  let item_button = document.createElement("button");
+  item_button.innerHTML = "<i class='bi bi-trash'></i>"
+  item_button.onclick = (ev) =>{
+    let parent_div = ev.target.parentElement.closest('div'); 
+    let item_name;
+    var children = parent_div.childNodes;
+    for (var i=0; i < children.length; i++) {
+      console.log(children[i]);
+      if (children[i].tagName == "SPAN") {
+        item_name = children[i].textContent;
+        break;
+      }
+    }
+    grocery_array = grocery_array.filter((value) => value != item_name );
+    localStorage.setItem("grocery_list",JSON.stringify(grocery_array))
+    parent_div.remove();
+  }
+
+  item_box.appendChild(item_button);
+  item_box.appendChild(item_name_container);
+
+
+  document.getElementById("grocery_list").appendChild(item_box);
+} 
+
+
+function addNewItemToList(){
+  let input = document.getElementById("new_item_input") 
+  if (input.value === "") return;
+  let item = input.value;
+  input.value = "";
+
+  // quantity
+  let quantity = document.getElementById("new_item_quantity").value
+
+  // unit
+  let e = document.getElementById("new_item_unit");
+  let text = e.options[e.selectedIndex].text;
+
+  switch(text){
+    case 'L':
+      item = ""+ quantity + (quantity == 1 ? " liter of ":" liters of ") + item;
+      break;
+    case 'KG':
+      item = ""+ quantity + (quantity == 1 ? " kilogram of":" kilograms of ") + item;
+      break;
+    default:
+      item = "" + quantity + " " + item;
+  }
+
+  addItemToList(item)
+}
+
+
+function restoreList(){
+  JSON.parse(localStorage.getItem("grocery_list")).forEach(element => {
+    addItemToList(element);
+  });
+}
+
+document.addEventListener('keydown', function(event) {
+  if (event.key === 'Enter') {
+    addNewItemToList();
+  }
+});
diff --git a/static/style.css b/static/style.css
index 02d4eef..28268af 100644
--- a/static/style.css
+++ b/static/style.css
@@ -19,6 +19,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: column;
 }
 
 #pokemon_team{
@@ -28,6 +29,12 @@ body {
   flex-direction: column;
 }
 
+#grocery_list {
+  display: flex;
+  flex-direction: column;
+}
+
+
 #header {
   display: flex;
   flex-direction: column;
@@ -99,15 +106,28 @@ button:hover {
   display: none;
 }
 
-#player_input {
+input {
   color: #F8F8F2;
   border-radius: 30px;
   border: none;
   padding: 10px;
   background-color: #44475A;
+  margin: 10px;
 }
 
 #pokemon_frame{
   width: 200px;
   height: 200px;
 }
+
+.grocery_item{
+  margin: 15px;
+}
+
+.grocery_item_name{
+  padding: 10px;
+  background-color:#44475A;
+  border-color: #BD93F9;
+  border-radius: 10px;
+  margin: 10px;
+}
