diff --git a/buy-list.js b/buy-list.js
new file mode 100644
index 00000000..5e767b93
--- /dev/null
+++ b/buy-list.js
@@ -0,0 +1,196 @@
+//2 
+let products = [
+    {
+        id: 1, name: "Помідори", amount: 2, isBought:true
+    },
+    {
+        id: 2, name: "Печиво", amount: 2, isBought:false
+    },
+    {
+        id: 3, name: "Сир", amount: 1, isBought:false
+    }
+];
+
+const addItem = document.getElementById("add-item");
+const item = document.getElementById("item");
+const productListItems = document.getElementById("product-list-items");
+const leftList = document.getElementById("left-list");
+const boughtList = document.getElementById("bought-list");
+
+//1
+addItem.addEventListener("submit", (e)=>{
+    e.preventDefault();
+
+    const name = item.value.trim();
+    if(!name )
+        return;
+
+    const newItem={
+        id: Date.now(),
+        name: name,
+        amount: 1,
+        isBought: false
+    };
+
+    products.push(newItem);
+
+    item.value="";
+    item.focus();
+    render();
+});
+
+function render(){
+
+    productListItems.innerHTML = "";
+    leftList.innerHTML = "";
+    boughtList.innerHTML = "";
+
+    products.forEach(product => {
+       
+        const li = document.createElement('li');
+
+        //5
+        const nameSpan = document.createElement('span');
+        nameSpan.className = 'product-item';
+        nameSpan.textContent = product.name;
+        
+        if (product.isBought) {
+            nameSpan.style.textDecoration = 'line-through';
+        } 
+        else 
+        {
+            nameSpan.style.cursor = 'pointer';
+            nameSpan.addEventListener('click', () => {
+
+                const inputEdit = document.createElement('input');
+                inputEdit.type = 'text';
+                inputEdit.value = product.name;
+                inputEdit.className = 'product-item-input'; 
+                
+                li.replaceChild(inputEdit, nameSpan);
+                inputEdit.focus();
+
+                const saveName = () => {
+                    const newName = inputEdit.value.trim();
+                    if (newName) {
+                        product.name = newName;
+                    }
+                    
+                    render();
+                };
+
+                inputEdit.addEventListener('blur', saveName);
+                inputEdit.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter') saveName();
+                });
+            });
+        }
+
+        li.appendChild(nameSpan);
+
+    //6
+    if (!product.isBought) {
+        const btnMinus = document.createElement('button');
+        btnMinus.className = 'btn-minus';
+        btnMinus.textContent = '-';
+        btnMinus.setAttribute('data-tooltip', 'Зменшити кількість');
+            
+        if (product.amount <= 1) {
+            btnMinus.style.opacity = '0.6';
+            btnMinus.disabled = true;
+            btnMinus.style.cursor = 'not-allowed';
+        } 
+        else 
+        {
+            btnMinus.addEventListener('click', () => {
+            product.amount--;
+            render();
+        });
+        }
+        li.appendChild(btnMinus);
+
+        const amountSpan = document.createElement('span');
+        amountSpan.className = 'amount';
+        amountSpan.textContent = product.amount;
+        li.appendChild(amountSpan);
+
+        const btnPlus = document.createElement('button');
+        btnPlus.className = 'btn-plus';
+        btnPlus.textContent = '+';
+        btnPlus.setAttribute('data-tooltip', 'Збільшити кількість');
+        btnPlus.addEventListener('click', () => {
+            product.amount++;
+            render();
+        });
+
+        li.appendChild(btnPlus);
+
+    } 
+    else
+    {
+        const amountSpan = document.createElement('span');
+        amountSpan.className = 'amount';
+        amountSpan.textContent = product.amount;
+        amountSpan.style.marginLeft = 'auto'; 
+        li.appendChild(amountSpan);
+    }
+
+    //4
+    const btnBought = document.createElement("button")
+    btnBought.className = "btn-bought";
+    btnBought.textContent = product.isBought ? "Куплено" : "Не куплено";
+    btnBought.setAttribute("data-tooltip", product.isBought ? "Призначити як не куплене" : "Призначити як куплене");
+    btnBought.addEventListener("click", ()=> {
+            product.isBought = !product.isBought;
+            render();
+        });
+
+        li.appendChild(btnBought);
+
+    //3
+    if(!product.isBought){
+        const btnRemove = document.createElement("button");
+
+        btnRemove.className = "btn-remove";
+        btnRemove.textContent = "x";
+        btnRemove. setAttribute("data-tooltip", "Прибрати товар");
+        btnRemove.addEventListener("click", ()=> {
+            products = products.filter(products => products.id !==product.id);
+            render();
+        });
+
+        li.appendChild(btnRemove);
+    }
+
+    productListItems.appendChild(li);
+
+    //7
+    if(!product.isBought){
+        const lItem = document.createElement("li");
+        lItem.className="l-item";
+        lItem.textContent=product.name;
+
+        const lAmount = document.createElement("span");
+        lAmount.className="l-amount";
+        lAmount.textContent=product.amount;
+
+        lItem.appendChild(lAmount);
+        leftList.appendChild(lItem);
+    }
+    else
+    {
+        const bItem = document.createElement("li");
+        bItem.className = "b-item";
+        bItem.textContent=product.name;
+
+        const bAmount = document.createElement("span");
+        bAmount.className="b-amount";
+        bAmount.textContent=product.amount;
+
+        bItem.appendChild(bAmount);
+        boughtList.appendChild(bItem);
+    }
+});
+}
+
+render();
\ No newline at end of file
diff --git a/index.html b/index.html
index 5971bf7d..5bbe36b9 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,69 @@
 <!DOCTYPE html>
-<html>
-<head lang="uk">
+<html lang="uk">
+<head>
     <meta charset="UTF-8">
-    <title>My Page</title>
-
-
+    <title>Veronika Burmetska</title>
     <link rel="stylesheet" type="text/css" href="main.css" />
 </head>
 <body>
-	<span class="product-item">
-		Apple
-		<span class="amount">4</span>
-	</span>
+	<main class="app-container">
+
+		<section class="product-list">
+			<form class="add-item" id="add-item">
+				<input type="text" id="item" placeholder="Назва товару">
+				<button class="btn-add" type="submit" data-tooltip="Додати товар">Додати</button>
+			</form>
+			<ul class="product-list-items" id="product-list-items">
+				<!-- <li>
+					<span class="product-item">Помідори</span>
+					<button class="btn-minus" data-tooltip="Зменшити кількість">-</button>
+					<span class="amount">2</span> 
+					<button class="btn-plus" data-tooltip="Збільшити кількість">+</button>
+					<button class="btn-bought" data-tooltip="Призначити як куплене">Куплено</button>
+					<button class="btn-remove" data-tooltip="Прибрати товар">x</button>
+				</li>
+				<li>
+					<span class="product-item">Печиво</span>
+					<button class="btn-minus" data-tooltip="Зменшити кількість">-</button>
+					<span class="amount">2</span> 
+					<button class="btn-plus" data-tooltip="Збільшити кількість">+</button>
+					<button class="btn-bought" data-tooltip="Призначити як куплене">Куплено</button>
+					<button class="btn-remove" data-tooltip="Прибрати товар">x</button>
+				</li>
+				<li>
+					<span class="product-item">Сир</span>
+					<button class="btn-minus" data-tooltip="Зменшити кількість">-</button>
+					<span class="amount">1</span> 
+					<button class="btn-plus" data-tooltip="Збільшити кількість">+</button>
+					<button class="btn-bought" data-tooltip="Призначити як куплене">Куплено</button>
+					<button class="btn-remove" data-tooltip="Прибрати товар">x</button>
+				</li> -->
+			</ul>
+		</section>
+
+		<section class="panel">
+			<section class="left-items-panel">
+				<h2>Залишилося</h2>
+				<ul class="left-list" id="left-list">
+					<!-- <li class="l-item">Печиво<span class="l-amount">2</span></li>
+					<li class="l-item">Сир<span class="l-amount">1</span></li> -->
+				</ul>
+			</section>
+
+			<section class="bought-items-panel">
+				<h2>Куплено</h2>
+				<ul class="bought-list" id="bought-list">
+					<!-- <li class="b-item">Помідори<span class="b-amount">2</span></li> -->
+				</ul>
+			</section>
+		</section>
+		
+	</main>
+
+	<aside class="badge">
+		<p class="badge-label">Buy List</p>
+		<p class="badge-author">Created by: Veronika Burmetska</p>
+	</aside>
+	<script src="buy-list.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/main.css b/main.css
index 00bc872e..3f8f1a4f 100644
--- a/main.css
+++ b/main.css
@@ -1,17 +1,266 @@
+* {
+    box-sizing: border-box;
+	padding: 0;
+    margin: 0;
+}
+
+body {
+	font-family: Arial, Helvetica, sans-serif;
+	padding: 18px;
+    background-color: #d1d1d1;
+    min-height: 100vh;
+}
+
+.app-container {
+    display: grid;
+	grid-template-columns: 2fr 1fr;
+    gap: 30px;
+    max-width: 900px;
+    margin: 0 auto;
+    padding-bottom: 440px; 
+}
+
+.add-item {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 18px;
+}
+
+.add-item input {
+    flex: 1;
+    padding: 12px;
+    border: 1px solid #b5b9c0;
+    border-radius: 6px;
+    font-size: 1rem;
+    outline: none;
+}
+
+.add-item input:focus {
+    border-color: #244ed7;
+}
+
+button {
+    border: none;
+    border-radius: 6px;
+    font-size: 1rem;
+    position: relative; 
+}
+
+.btn-add {
+    background-color: #1f7bd2;
+    color: white;
+    padding: 12px 24px;
+    font-weight: bold;
+}
+
+.btn-add:hover { 
+	background-color: hsl(221, 80%, 39%); 
+}
+
+.product-list {
+    flex: 2;
+    background: #ffffff;
+    padding: 20px;
+    border-radius: 6px;
+}
+
+.product-list-items li {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px;
+    border-bottom: 1px solid #cdcfd2;
+}
+
 .product-item {
-	background-color: gray;
-	display: inline-block;
-	height: 25px;
-	padding: 5px;
-	border-radius: 5px;
+    flex: 1;
+    font-size: 1.1rem;
+}
+
+.btn-minus {
+    background-color: #e02222;
+    color: #ffffff;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.btn-minus:hover{ 
+	background-color: #da8e8e;
+}
+
+.btn-plus {
+    background-color: #27d75f;
+    color: #ffffff;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    font-size: 1.2rem;
+    font-weight: bold;
+}
+
+.btn-plus:hover { 
+	background-color: #99dfa1; 
 }
 
 .amount {
-	background-color: yellow;
-	border-radius: 10px;
-	
-	display: inline-block;
-	height: 20px;
-	width: 20px;
-	text-align: center;
+	min-width: 20px;
+    text-align: center;
+    font-size: 16px;
+    background-color: #dbd9d9;
+    color: #363636;
+    border-radius: 6px;
+    padding: 5px 10px;
+}
+
+.btn-bought {
+	background: #eee;
+    border: 1px solid #d6d3d3;
+    border-bottom: #b3b2b2 solid 2px;
+    border-radius: 6px;
+    padding: 5px 16px;
+    font-size: 16px;
+    cursor: pointer;
+    position: relative;
+}
+
+.btn-bought:hover { 
+	background-color: #ced1d4; 
+}
+
+.btn-remove {
+    background-color: #d32c2c;
+    color: white;
+    width: 36px;
+    height: 36px;
+    font-weight: bold;
+}
+
+.btn-remove:hover { 
+	background-color: #df9097; 
+}
+
+h2 {
+    font-size: 1.3rem;
+    margin-bottom: 18px;
+}
+
+.panel {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;               
+    background: #ffffff;    
+    padding: 8px;          
+    border-radius: 6px;     
+}
+
+.left-items-panel, .bought-items-panel {
+    background: #ffffff;
+    padding: 18px;
+    border-radius: 6px;
+}
+
+.left-list, .bought-list {
+    display: flex;
+    gap: 6px;
+}
+
+.l-item, .b-item {
+    display: inline-flex;
+    align-items: center;
+    background-color: #f1f3f5;
+    padding: 12px 14px;
+    border-radius: 6px;
+    font-size: 0.9rem;
+}
+
+.l-amount, .b-amount {
+    background-color: #f37a1e;
+    color: white;
+    font-size: 0.8rem;
+    padding: 3px 7px;
+    border-radius: 10px;
+    margin-left: 4px;
+}
+
+.bought-items-panel .b-item {
+    text-decoration: line-through;
+    color: #131313;
+    background-color: #e9ecef;
+}
+
+@media (max-width: 650px) {
+    .app-container{
+        grid-template-columns: 1fr;
+    }
+}
+
+[data-tooltip] {
+    position: relative;
+}
+
+[data-tooltip]::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%) scale(0.7);
+    transform-origin: bottom center;
+    background: #5f13a1;
+    color: #fff;
+    white-space: nowrap;
+    padding: 8px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    opacity: 0;
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    z-index: 100;
+}
+
+[data-tooltip]:hover::after {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+}
+
+.badge {
+    position: fixed;
+    bottom: 0;
+    left: 16px;
+    width: 120px;
+    border-radius: 6px 6px 0 0;
+    background: #6935c9;
+    color: #fff;
+    overflow: hidden;
+    z-index: 200;
+    cursor: default;
+    transform: translateY(calc(100% - 42px));
+    transition: transform 0.3s ease, background 0.3s ease;
+}
+
+.badge:hover {
+    transform: translateY(0);
+    background: #450ccc;
+}
+
+.badge-label {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	font-weight: bold;
+    font-size: 16px;
+}
+
+.badge-author {
+    height: 70px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    text-align: center;
+    padding: 10px;
+	font-weight: bold;
 }
\ No newline at end of file