diff --git a/admin/articles.php b/admin/articles.php
new file mode 100644
index 0000000..fe96e72
--- /dev/null
+++ b/admin/articles.php
@@ -0,0 +1,6 @@
+<?php
+$relativePath = "../";
+
+$pageTitle = "Gestion des articles";
+$script = "<script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/articles.js\"></script>";
+include("template.php");
diff --git a/admin/index.php b/admin/index.php
index 58ec880..87bda95 100644
--- a/admin/index.php
+++ b/admin/index.php
@@ -2,13 +2,23 @@
 $relativePath = "../";
 ob_start();
 ?>
-<div class="admin-container">
-    <a href="stock.php">
-        <button class="btn btn-primary btn-large">Gestion des stocks</button>
-    </a>
-    <a href="categories.php">
-        <button class="btn btn-primary btn-large">Gestion des catégories</button>
-    </a>
+<div class="admin-container" style="display: flex">
+    <div style="margin: auto">
+        <div style="display: flex" class="my-5">
+            <a href="stock.php" style="margin: auto">
+                <button class="btn btn-primary btn-lg">Gestion du stocks</button>
+            </a>
+        </div>
+
+        <div class="my-5" style="display: flex">
+            <a href="articles.php" style="margin: auto" class="mx-1">
+                <button class="btn btn-primary btn-lg">Créer/Éditer des articles</button>
+            </a>
+            <a href="categories.php" style="margin: auto" class="mx-1">
+                <button class="btn btn-primary btn-lg">Créer/Éditer des catégories</button>
+            </a>
+        </div>
+    </div>
 </div>
 
 <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/admin.css" media="screen,projection"/>
diff --git a/admin/stock.php b/admin/stock.php
index fe96e72..dfbd2b3 100644
--- a/admin/stock.php
+++ b/admin/stock.php
@@ -1,6 +1,7 @@
 <?php
 $relativePath = "../";
 
-$pageTitle = "Gestion des articles";
-$script = "<script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/articles.js\"></script>";
+$isStock = true;
+$pageTitle = "Gestion des stocks";
+$script = "<script type=\"text/javascript\" src=\"" . $relativePath . "assets/js/stock.js\"></script>";
 include("template.php");
diff --git a/admin/template.php b/admin/template.php
index fa1b14f..168d0c5 100644
--- a/admin/template.php
+++ b/admin/template.php
@@ -1,35 +1,61 @@
 <?php
 $relativePath = "../";
 
+if (!isset($isStock))
+    $isStock = false;
+
 ob_start();
 ?>
 <div class="admin-container">
 
     <a href="index.php">
-        <button class="btn btn-primary btn-large">Retour</button>
+        <button class="btn btn-primary btn-large">
+            <span class="mdi mdi-chevron-left"></span>
+            Retour
+        </button>
     </a>
 
     <h1 class="text-center"><?= $pageTitle ?></h1>
 
-    <div style="display: flex">
-        <button class="btn btn-success" style="margin: auto" onclick="listManager.showEditPopup(-1)">
-            <i class="mdi mdi-plus"></i>
-        </button>
-    </div>
+    <?php if (!$isStock): ?>
+        <div style="display: flex">
+            <button class="btn btn-success" style="margin: auto" onclick="listManager.showEditPopup(-1)">
+                <i class="mdi mdi-plus"></i>
+            </button>
+        </div>
+        <div id="listContainer">
+            <ul id="dataList">
 
-    <div id="listContainer">
-        <ul id="dataList">
+            </ul>
+        </div>
+    <?php else: ?>
+        <div>
+            <h3 class="text-center">Mode</h3>
+            <div class="button-container">
+                <button id="buyButton" class="btn mr-0">Achat</button>
+                <button id="sellButton" class="btn ml-0">Vente</button>
+            </div>
+        </div>
+        <div id="dataList">
 
-        </ul>
-    </div>
+        </div>
+        <div style="display: flex">
+            <button id="saveButton" style="margin: auto" class="btn btn-lg my-2">Sauvegarder</button>
+        </div>
+    <?php endif; ?>
 
 </div>
 
 
-<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/libs/materialdesignicons.min.css" media="screen,projection"/>
+<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/libs/materialdesignicons.min.css"
+      media="screen,projection"/>
 <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/admin.css" media="screen,projection"/>
-<link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/categories.css" media="screen,projection"/>
 
+<?php if (!$isStock): ?>
+    <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/list.css" media="screen,projection"/>
+<?php else: ?>
+    <link type="text/css" rel="stylesheet" href="<?= $relativePath ?>assets/css/stock.css" media="screen,projection"/>
+<?php endif; ?>
 
 <?php
 $pageContent = ob_get_clean();
diff --git a/assets/css/categories.css b/assets/css/list.css
similarity index 84%
rename from assets/css/categories.css
rename to assets/css/list.css
index 1fda380..5395501 100644
--- a/assets/css/categories.css
+++ b/assets/css/list.css
@@ -33,13 +33,13 @@
     margin: 20px 0 20px 0;
 }
 
-.mdi {
+#listContainer .mdi {
     font-size: 2rem;
 }
 
 .list-name {
     font-weight: bold;
-    width: 150px;
+    width: 200px;
     height: 50px;
     overflow: hidden;
 }
@@ -61,7 +61,15 @@
     text-align: right;
 }
 
-.list-image img  {
+.list-image  {
     width: 50px;
     height: 50px;
+    display: flex;
+}
+
+
+.list-image img {
+    width: 45px;
+    height: 45px;
+    margin: auto;
 }
diff --git a/assets/css/stock.css b/assets/css/stock.css
index 52c0129..a759f04 100644
--- a/assets/css/stock.css
+++ b/assets/css/stock.css
@@ -1,33 +1,43 @@
-
-.name-column {
-    width: 200px;
+#dataList {
+    display: grid;
+    grid-template-columns: auto auto ;
+    width: 100%;
 }
 
-.quantity-column, .price-column {
-    width: 150px;
+.img-container {
+    display: flex;
+    width: 100%;
 }
 
-.code-column {
-    width: 200px;
+.grid-item {
+    display: flex;
+    padding: 5px;
 }
 
-.type-column {
-    width: 200px;
-    overflow-x: auto;
+
+.grid-container {
+    width: 100px;
+    margin: auto;
+    display: block;
 }
 
-.image-column {
-    width: 150px;
-}
-
-.actions-column {
+.grid-container input {
     width: 100px;
 }
 
-#stockTable tr {
-    border-bottom: 1px solid #dedede;
+.grid-container p {
+    text-align: center;
 }
 
-.row-img {
-    height: 50px;
+.grid-container img {
+    width : 100px;
+    margin: auto;
+}
+
+.button-container {
+    display: flex;
+}
+
+.button-container button {
+    margin: auto;
 }
diff --git a/assets/js/ajaxManager.js b/assets/js/ajaxManager.js
index ddf9599..1882d83 100644
--- a/assets/js/ajaxManager.js
+++ b/assets/js/ajaxManager.js
@@ -78,6 +78,23 @@ class AjaxManager {
         } else
             return 1;
     }
+
+    static async saveStockChange(data, isSell) {
+        let formattedData = {
+            type: 'stock',
+            action: isSell ? 'sell' : 'buy',
+            data: data,
+        };
+        let response = await $.ajax({
+            type: "POST",
+            url: "json_ajax.php",
+            data: JSON.stringify(formattedData),
+            dataType: "json",
+            contentType: "application/json; charset=utf-8",
+        });
+        console.log(response);
+        return response['data'];
+    }
 }
 
 
diff --git a/assets/js/jquery-confirm-defaults.js b/assets/js/jquery-confirm-defaults.js
index ff485da..2b6be37 100644
--- a/assets/js/jquery-confirm-defaults.js
+++ b/assets/js/jquery-confirm-defaults.js
@@ -1,7 +1,7 @@
 jconfirm.defaults = {
     title: 'Title',
     titleClass: '',
-    type: 'red',
+    type: 'blue',
     typeAnimated: true,
     draggable: false,
     dragWindowGap: 15,
diff --git a/assets/js/listManager.js b/assets/js/listManager.js
index fb5fe61..5784de4 100644
--- a/assets/js/listManager.js
+++ b/assets/js/listManager.js
@@ -138,7 +138,9 @@ class ListManager {
     }
 
     getImagePicker(id, index) {
-        let imageSrc = $(this.displayedData[index].find("img")[0]).attr('src');
+        let imageSrc = undefined;
+        if (index !== -1)
+            imageSrc = $(this.displayedData[index].find("img")[0]).attr('src');
         return (
             '<img style="width: 50px; height: 50px" src="' + imageSrc + '" id="image_' + id + '"/>' +
             '<div class="custom-file">\n' +
diff --git a/assets/js/stock.js b/assets/js/stock.js
new file mode 100644
index 0000000..720ae3e
--- /dev/null
+++ b/assets/js/stock.js
@@ -0,0 +1,106 @@
+let listContainer = $("#dataList");
+let displayedItems = [];
+let fetchedData = {};
+
+let currentMode = "sell";
+
+let sellCLass = 'btn-danger';
+let buyClass = 'btn-success';
+
+$(document).ready(async function () {
+    fetchedData = await AjaxManager.getAll();
+
+    $('#sellButton').addClass(sellCLass);
+    $('#saveButton').addClass(sellCLass);
+
+    generateList();
+    $('#buyButton').on('click', function () {
+        if (!$(this).hasClass(buyClass)) {
+            $(this).addClass(buyClass);
+            $('#sellButton').removeClass(sellCLass);
+            $('#saveButton').removeClass(sellCLass).addClass(buyClass);
+            currentMode = "buy";
+        }
+    });
+    $('#sellButton').on('click', function () {
+        if (!$(this).hasClass(sellCLass)) {
+            $(this).addClass(sellCLass);
+            $('#buyButton').removeClass(buyClass);
+            $('#saveButton').removeClass(buyClass).addClass(sellCLass);
+            currentMode = "sell";
+        }
+    });
+    $('#saveButton').on('click', function () {
+        let values = getValues();
+        let message = 'Voulez vous vraimer ajouter ces articles au stock ?<br><ul>';
+        let color = 'green';
+        if (currentMode === "sell"){
+            message = 'Voulez vous vraiment supprimer ces articles du stock ?<br><ul>';
+            color = 'red';
+        }
+        for (let  i = 0; i < values.length; i++) {
+            if (values[i]['value'] > 0){
+                message += '<li>' + fetchedData['articles'][i]['name'] + ' : ' + values[i]['value'] + '</li>'
+            }
+        }
+        message += '</ul>';
+        $.confirm({
+            title: 'Confirmer',
+            content: message,
+            type: color,
+            buttons: {
+                formSubmit: {
+                    text: 'Confirmer',
+                    action: function () {
+                        window.location.reload();
+                    }
+                },
+                cancel: {
+                    text: 'Annuler',
+                }
+            }
+        });
+        AjaxManager.saveStockChange(getFormattedValues(values), currentMode === "sell");
+    });
+});
+
+function getListItem(item) {
+    return (
+        '<div class="grid-item">' +
+        '<div class="grid-container">' +
+        '<img class="list-image" src="../uploaded_images/' + item['id'] + '.jpg"/>' +
+        '<p>' + item['name'] + '</p>' +
+        '<p>Quantité : ' + item['quantity'] + '</p>' +
+        '<input placeholder="Nombre" type="number" value="0" class="form-control"/>' +
+        '</div>' +
+        '</div>');
+}
+
+
+function generateList() {
+    for (let i = 0; i < fetchedData['articles'].length; i++) {
+        let listItem = getListItem(fetchedData['articles'][i]);
+        displayedItems.push($(listItem));
+        listContainer.append(displayedItems[i]);
+    }
+}
+
+
+function getValues() {
+    let values = [];
+    for (let  i = 0; i < displayedItems.length; i++) {
+        let value = displayedItems[i].find('input').val();
+        let id = fetchedData['articles'][i]['id'];
+        values.push({id: id, value: value});
+    }
+    return values;
+}
+
+function getFormattedValues(values) {
+    let newValues = [];
+    for (let  i = 0; i < values.length; i++) {
+        if (values[i]['value'] > 0)
+            newValues.push(values[i]);
+    }
+    return newValues;
+}
diff --git a/classes/dao.php b/classes/dao.php
index 9a70b92..37bd76d 100644
--- a/classes/dao.php
+++ b/classes/dao.php
@@ -137,4 +137,12 @@ class Dao
         } else
             return 0;
     }
+
+    public function update_article_stock($articleid, $diff)
+    {
+        $sql = 'UPDATE articles SET quantity=quantity+? WHERE id=?';
+        $cursor = $this->conn->prepare($sql);
+        $data = [$diff, $articleid];
+        return $cursor->execute($data);
+    }
 }
diff --git a/classes/postHandler.php b/classes/postHandler.php
index b9b7ab3..873070d 100644
--- a/classes/postHandler.php
+++ b/classes/postHandler.php
@@ -3,8 +3,8 @@ require_once 'dao.php';
 
 class PostHandler
 {
-    private $valid_types = ["article", "category", "article_categories", 'image'];
-    private $valid_actions = ["create", "update", "remove", "get"];
+    private $valid_types = ["article", "category", "article_categories", "image", "stock"];
+    private $valid_actions = ["create", "update", "remove", "get", "buy", "sell"];
 
     private $action;
     private $type;
@@ -35,6 +35,8 @@ class PostHandler
         $result = -1;
         if ($this->type == "image") {
             $result = $this->save_image();
+        } else if ($this->type == "stock") {
+            $result = $this->updateStock();
         } else if (count($this->data) > 0) {
             if ($this->action == "create")
                 $result = $this->create();
@@ -151,6 +153,19 @@ class PostHandler
         return $result;
     }
 
+    function updateStock() {
+        $result = 0;
+        foreach ($this->data as $row) {
+            $value = $row["value"];
+            if ($this->action == "sell")
+                $value = -$value;
+            $result = $this->dao->update_article_stock($row["id"], $value);
+            if (!$result)
+                break;
+        }
+        return $result;
+    }
+
     function setUnknownTypeResponse()
     {
         $this->responseArray["status"] = 1;