diff --git a/src/css/Components/articledetails.css b/src/css/Components/articledetails.css
index 36a2368..15f0947 100644
--- a/src/css/Components/articledetails.css
+++ b/src/css/Components/articledetails.css
@@ -10,6 +10,18 @@
     flex-direction: column;
 }
 
+#bulleSelect{
+    background-color: rgba(255, 255, 255, 0.719);
+    border-radius: 30px;
+    width:200px;
+    height:200px;
+    margin-top:30px;
+    margin-right:15px;
+    margin-left:15px;
+    display:flex;
+    flex-direction: column;
+}
+
     #imageordescblock{
         width:100%;
         height:145px;
diff --git a/src/css/Components/selected.css b/src/css/Components/selected.css
new file mode 100644
index 0000000..d9581c6
--- /dev/null
+++ b/src/css/Components/selected.css
@@ -0,0 +1,10 @@
+#selectedBox{
+    display: flex;
+}
+
+#selectedTxt{
+    color : white;
+    text-align: center;
+    font-family: 'Wellfleet', cursive;
+    font-size:2vw
+}
\ No newline at end of file
diff --git a/src/css/Views/stock.css b/src/css/Views/stock.css
index 1d54396..d895d16 100644
--- a/src/css/Views/stock.css
+++ b/src/css/Views/stock.css
@@ -7,6 +7,12 @@
     display:flex
 }
 
+#selectedBlock{
+    display:flex;
+    justify-content:center;
+    margin-top:3vh;
+}
+
 #articleBlock{
     display:flex;
     justify-content: center;
diff --git a/src/js/Components/ArticleDetails.js b/src/js/Components/ArticleDetails.js
index aad7737..f52dd7f 100644
--- a/src/js/Components/ArticleDetails.js
+++ b/src/js/Components/ArticleDetails.js
@@ -15,7 +15,8 @@ class ArticleDetails extends React.Component {
             currentArticle:'',
             redirect:false,
             redcrossPressed:false,
-            quantity:this.props.quantity
+            quantity:this.props.quantity,
+            selected:false
         }
         
     }
@@ -81,14 +82,67 @@ class ArticleDetails extends React.Component {
         }
     }
 
-
+    selectArticles = (e) => {
+        console.log(e.target.id)
+        if ((e.target.id !==  "categoryIcon") && (e.target.id !== "penblue") && (e.target.id !== "crossred") && (e.target.id !== "") && (e.target.id !== "bluepen") && (e.target.id !== "redcross") && (e.target.id !== "no")){
+        this.setState({selected:!this.state.selected},()=>{
+            console.log(this.state.selected)
+        })   
+        }
+    }   
 
     render(){
         if (this.state.redirect) {
             return (<Redirect to='/stock'/>)
         }
         return(
-            <div id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
+            this.state.selected ?
+            <div onClick={this.selectArticles} id="bulleSelect" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
+            {this.state.redcrossPressed ?
+            <div id="confirmation">
+                <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
+                <div id="choice">
+                    <div id="yes" onClick={this.deleteArticle}>Oui</div>
+                    <div id="no" onClick={this.handleNoDelete}>Non</div>
+                </div>
+            </div> 
+            : 
+            <>
+            <div id="imageordescblock">
+            {this.state.currentArticle === this.props.id ? 
+            <>
+            <div id="icons">
+                <div id="bluepen" onClick={() => this.props.editArticle(this.props)}>
+                    <Icon id="penblue" icon={editSolid} style={{color: '#ffffff', fontSize: '25px'}} rotate="270deg" />
+                </div>
+                <div id="redcross" onClick={this.handleRedCross}>
+                    <Icon id="crossred" icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '25px'}} />
+                </div>
+            </div>
+            <div id="categoryDiv">
+                <img onClick={() => this.props.handleCategories(this.props.category)} id="categoryIcon" alt="bonjour" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.props.category.icon}`}/>
+            </div>
+            <div id="descandprice">
+                <h1 id="desc">{this.props.desc}</h1>
+                <p id ="price">{this.props.price} €</p>
+            </div>
+            </>
+            : <img id="image" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/img/${this.props.img}`} alt='bonjour'/>
+            }
+            </div>
+                    <h1 id="name">{this.props.name}</h1>
+                    <div id="count">
+                        <Icon onClick={this.minusQuantity} icon={minusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
+                        <div id="countNumber">
+                            <p id="countNumberTxt">{this.state.quantity}</p>
+                        </div>
+                        <Icon onClick={this.plusQuantity} icon={plusIcon} style={{color: '#ffffff', fontSize: '18.558874130249023px',cursor:'pointer'}} />
+                    </div>
+            </>        
+            }
+            </div>
+            : 
+            <div onClick={this.selectArticles} id="bulle" onMouseEnter={this.handleDesc} onMouseLeave={this.handlePhoto}> 
             {this.state.redcrossPressed ?
             <div id="confirmation">
                 <div id="confirmationTxt">Tu veux vraiment supprimer cet article ?</div>
@@ -131,7 +185,7 @@ class ArticleDetails extends React.Component {
                     </div>
             </>        
             }
-                </div>
+            </div>
         )
     }
 
diff --git a/src/js/Components/Articles.js b/src/js/Components/Articles.js
index b3b33d7..614fe0e 100644
--- a/src/js/Components/Articles.js
+++ b/src/js/Components/Articles.js
@@ -12,9 +12,8 @@ class Articles extends React.Component {
 
     componentDidMount(){
       
-    }
+    } 
 
-    
     render() {
       return (
           <div id="articleContainer">
diff --git a/src/js/Components/Categories.js b/src/js/Components/Categories.js
index e3dac48..7b34395 100644
--- a/src/js/Components/Categories.js
+++ b/src/js/Components/Categories.js
@@ -87,7 +87,7 @@ class Categories extends Component {
                                 </div>
                             </div>
                             <div id="catBigIconBlock">
-                                <img id="catBigIcon" src={`https://etud.insa-toulouse.fr/~proximo/v2/storage/icon/${this.state.categoryFocused.icon}`} alt="bonjour"/>
+                                <img id="catBigIcon" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${this.state.categoryFocused.icon}`} alt="bonjour"/>
                             </div>
                             <div id="redCrossBlock">
                                 <div onClick={this.handleDisplayConfirmation} id="redCross">
@@ -106,7 +106,7 @@ class Categories extends Component {
                             {if (category.id !== this.state.categoryFocused.id){
                             return(<div onClick={() => this.handleSwitchCategory(category)} key={category.id} id="categoryItem">
                                 <div id="categoryItemIcon">
-                                    <img id="categoryItemIconImg" src={`https://etud.insa-toulouse.fr/~proximo/v2/storage/icon/${category.icon}`} alt='bonjour'/>
+                                    <img id="categoryItemIconImg" src={`https://etud.insa-toulouse.fr/~proximo/api_proximo/storage/app/public/icon/${category.icon}`} alt='bonjour'/>
                                 </div>
                                 <div id="categoryItemName">
                                     {category.name}
diff --git a/src/js/Components/EditArticle.js b/src/js/Components/EditArticle.js
index c312a99..137c144 100644
--- a/src/js/Components/EditArticle.js
+++ b/src/js/Components/EditArticle.js
@@ -143,10 +143,7 @@ class EditArticle extends React.Component {
         this.setState({onNewCategory:false})
     }
 
-
     render(){
-        console.log(this.props.article);
-        console.log(this.state);
         if (this.state.onNewCategory){
             return <CreateCategory reload={false} handleCloseAbove={this.handleCloseNewCategory}/>
         } else {
diff --git a/src/js/Components/Selected.js b/src/js/Components/Selected.js
new file mode 100644
index 0000000..a718e4b
--- /dev/null
+++ b/src/js/Components/Selected.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import '../../css/Components/selected.css'
+
+class Selected extends Component {
+
+    constructor(props){
+        super(props)
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div id="selectedBox">
+                <p id="selectedTxt">Vous avez sélectionné 3 articles</p>
+            </div>
+        );
+    }
+}
+
+export default Selected;
\ No newline at end of file
diff --git a/src/js/Views/Stock.js b/src/js/Views/Stock.js
index 0b70bbe..378de13 100644
--- a/src/js/Views/Stock.js
+++ b/src/js/Views/Stock.js
@@ -16,6 +16,7 @@ import Categories from '../Components/Categories';
 import EditCategory from '../Components/EditCategory';
 import Sort from '../Components/Sort';
 import { Link } from 'react-router-dom';
+import Selected from '../Components/Selected';
 
 export default class Stock extends React.Component {
 
@@ -32,18 +33,22 @@ export default class Stock extends React.Component {
       articles:[],
       categoryToModify:'',
       categorySorted:false,
-      dividedArticles:[],
       onSortedCategories:false,
       onSearch:false,
+<<<<<<< HEAD
       sortOrder: 0
+=======
+      selectedArticles:[]
+      sortOrder: 0
+>>>>>>> a7884d9a3b4883254a979124e14663b887b85821
     }
   }
 
   componentDidMount() {
     this.getArticles()
-    
 }
 
+<<<<<<< HEAD
 // Implémenter la fonction sortArticles :
   sortArticles = (sortType) => {
     let sorted;
@@ -67,16 +72,42 @@ export default class Stock extends React.Component {
         this.setState({onSortedCategories:true})
       })
     }else{
-      this.setState({articles:sorted},() => {
-        console.log(this.state.articles)
-        this.setState({onSortedCategories:false})
-      })
+=======
+
+  sortArticles = (sortType) => {
+    
+    let sorted;
+    if (sortType === "name"){
+      this.setState({orderIsVisible: false})
+      if (this.state.sortOrder === 0) {
+        //ordre alphabétique croissant
+        sorted = [...this.state.articles].sort((a, b) => a.name.localeCompare(b.name))
+      } else {
+        //ordre alphabétique décroissant
+        sorted = [...this.state.articles].sort((a, b) => b.name.localeCompare(a.name))
+      }
+    } else {
+      this.setState({orderIsVisible: true})
+      this.setState({sortOrder: 0})
+      sorted = [...this.state.articles].sort((a, b) => b[sortType] - a[sortType]);
     }
 
-   
-    
+    if (sortType === 'category_id'){
+>>>>>>> a7884d9a3b4883254a979124e14663b887b85821
+      this.setState({articles:sorted},() => {
+        this.setState({onSortedCategories:true})
+      })
+  }else{
+    this.setState({articles:sorted},() => {
+      console.log(this.state.articles)
+      this.setState({onSortedCategories:false})
+    })
   }
 
+  
+  
+}
+
   getArticles = () => {
     axios.get('https://etud.insa-toulouse.fr/~proximo/v2/api/articles')
         .then(res => {
@@ -184,20 +215,37 @@ export default class Stock extends React.Component {
   }
 
   handleSubmit = event => {
+<<<<<<< HEAD
     event.preventDefault()
     this.searchArticles();
+=======
+    event.preventDefault()
+    this.searchArticles();
+    } 
+
+    closeWithEscape = (e) => {
+      if (e.keyCode === 27){
+      if (this.state.onEditArticle){
+        this.handleCloseEditArticle()
+      } else if(this.state.onNewArticle){
+        this.handleCloseNewArticle()
+      } else if(this.state.onNewCategory){
+        this.handleCloseNewCategory()
+      } else if(this.state.onEditCategory){
+        this.handleCloseEditCategory()
+      } else if(this.state.onCategories){
+        this.handleCloseCategories()
+      }
+    }
+>>>>>>> a7884d9a3b4883254a979124e14663b887b85821
   }
 
-
-  
-
-
     render() {
       if (!sessionStorage.getItem('token')){
         return (<div id="errorRouteBlock"><div id="errorRouteTitle">ERREUR </div><br/><div id="errorRouteTxt">Vous n'êtes pas connecté</div><br/><Link id="link" to='/'>Retourner à l'Accueil</Link></div>)
       } else {
       return (
-          <div id="stock">
+          <div id="stock" tabIndex={-1} onKeyDown={this.closeWithEscape}>
               <Header title='Le Stock'/>
               <Navbar handleNewArticle={this.handleNewArticle} handleNewCategory={this.handleNewCategory} right="Le Ticket de Caisse" left="Créer" leftLeft="Article" leftMiddle="|" leftRight="Catégorie" redirect="/ticket"/>
               {this.state.onNewArticle ?
@@ -207,6 +255,9 @@ export default class Stock extends React.Component {
               <div id="sortBlock">
                 <Sort handleChangeSortType={this.handleChangeSortType} handleChangeSortOrder={this.handleChangeSortOrder} orderIsVisible={this.state.orderIsVisible}/>
               </div>
+              <div id="selectedBlock">
+                <Selected/>
+              </div>
               <div id="articleBlock">
               {this.state.articles && this.state.articles[0] ? 
                 this.state.onSortedCategories ?