diff --git a/src/assets/style.css b/src/assets/style.css
index 5cfb969..6e16fdf 100644
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -53,8 +53,10 @@
   inset:0;
   position: fixed;
   background: #002613;
-  background: linear-gradient(200deg,var(--dark-color) 0%, var(--darker-color) 100%);
+  background: linear-gradient(200deg,var(--dark-color) 0%, var(--darker-color) 77%);
   cursor:cell;
+  scrollbar-color: var(--light-color) transparent;
+  scrollbar-width: thin;
 }
 
 /*===================Desact. Default*/
@@ -113,6 +115,7 @@ p{
 }
 
 .titleContent{
+  position:absolute;
   box-sizing: border-box;
   padding-left: 16.1px;
   display: flex;
@@ -215,6 +218,8 @@ p{
   pointer-events: none;
   opacity: 0.0333;
   z-index:333;
+  margin-top:-5px;
+  margin-left:-13px;
 }
 
 #denimOver{
diff --git a/src/components/LinkPannel.vue b/src/components/LinkPannel.vue
index f69199f..935696d 100644
--- a/src/components/LinkPannel.vue
+++ b/src/components/LinkPannel.vue
@@ -16,34 +16,51 @@
     <!--TITRE-->
     <div class="windowTitle">
       <div class="titleContent">
-        <p>./ExternalLinks.333</p>
-        <button type="button" class="titleBtn" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="dataFirstLoad" @click="dataFirstLoad">
-          <ReloadIcon name="close" class="icon"/>
-        </button>
-        <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
-          <CloseIcon name="close" class="icon"/>
-        </button>
+        <p>./{{fileName}}</p>
+        <div class="multiBtnContainer">
+          <button type="button" class="titleBtn" id="rootBtn" v-show="isNotRoot" @mousedown.stop @touchstart="dataFirstLoad" @click="dataFirstLoad">
+            <ReloadIcon name="close" class="icon"/>
+          </button>
+          <button type="button" class="titleBtn" @mousedown.stop @touchstart="$emit('close')" @click="closeClicked">
+            <CloseIcon name="close" class="icon"/>
+          </button>
+        </div>
       </div>
     </div>
     <!--CONTENU-->
-    <p id="emptyFolderText" class="itemCaption" v-show="emptyFolder">Oops! There is nothing to display here...</p>
-    <div class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
-      <div class="itemStyle" v-for="item in displayedItems" :key="item.caption" @click="openClickedFile(item)">
+    <p id="emptyFolderText" v-show="emptyFolder">Oops! There is nothing to display here...</p>
+    <div v-show="displayedItems" class="theMatrix" @mousedown.stop @touchstart.stop @reload="dataFirstLoad">
+      <div class="itemStyle" v-for="item in displayedItems" :class="{selectedStyle:item.isSelected, displayStyle: !item.isSelected}" :key="item.caption" @click="itemIsClicked(item)">
         <component :is="item.type==='folder'? FolderIcon : FileIcon" class="icon"/>
         <p class="itemCaption">{{item.caption}}</p>
       </div>
     </div>
+    <div v-show="displayedItems" class="itemDesc" @touchstart.stop>
+      <p>{{displayedDescription}}</p>
+    </div>
   </div>
 </template>
 
 <style scoped>
   /*=====================LinkPannel CSS*/
-  #rootBtn{
-    margin-left: 60%;
+  .multiBtnContainer{
+    align-self: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    height: 100%;
+    align-items: center;
+    width:auto;
   }
 
   #emptyFolderText{
+    align-self:center;
+    margin-top: 33px;
     pointer-events: none;
+    color: var(--accent-color);
+    font-family: 'lineal';
+    font-weight: lighter;
+    font-size: 16.1px;
   }
 
   .theMatrix{
@@ -51,11 +68,33 @@
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     grid-auto-rows: 180px;
     gap: 10px;
-    width: 100%;
-    height: 100%;
+    width: 97%;
+    height: 70%;
     overflow-y: auto;
     align-items: center;
-    margin-left: 10px;
+    margin-left: 5px;
+  }
+
+  .itemDesc{
+    width: 90%;
+    height: 21%;
+    border-radius: 16.1px;
+    border-color: var(--accent-color);
+    border-style: solid;
+    border-width: thin;
+    margin-top: 2%;
+
+    color: var(--light-color);
+    font-family: 'velvelyne';
+    font-weight: lighter;
+    font-size: 16.1px;
+    pointer-events: all;
+    cursor:inherit;
+
+    align-self: center;
+    padding-left: 2%;
+    padding-right: 3.33%;
+    overflow-y: scroll;
   }
 
   .itemStyle{
@@ -66,34 +105,61 @@
     border-radius: 8px;
     width:90%;
     height: auto;
-    color: var(--light-color);
     border-style: solid;
     border-width: thin;
     border-color: transparent;
-  }
-
-  .itemStyle .icon{
-    height:auto;
-    width:50%;
-    fill: currentColor;
-  }
-
-  .itemStyle:hover{
-    color: var(--accent-color);
-    border-color: var(--accent-color);
     cursor: pointer;
   }
 
+  .itemStyle:hover{
+    border-color: var(--accent-color);
+  }
+    /*===============Not selected Item*/
+    .displayStyle{
+      color: var(--light-color);
+      border-style: solid;
+      border-width: thin;
+      border-color: transparent;
+    }
+
+    .displayStyle .icon{
+      height:auto;
+      width:50%;
+      fill: currentColor;
+    }
+
+    /*===============Seleted Item*/
+    .selectedStyle{
+      color: var(--accent-color);
+      border-style: solid;
+      border-width: thin;
+      border-color: transparent;
+    }
+
+    .selectedStyle .icon{
+      height:auto;
+      width:50%;
+      fill: currentColor;
+    }
+
   .itemCaption{
     text-align: center;
-    color: var(--light-color);
-    font-family: 'velvelyne';
     font-weight: lighter;
     font-size: 16.1px;
     pointer-events: all;
     cursor:inherit;
   }
 
+  .displayStyle .itemCaption{
+    color: var(--light-color);
+    font-family: 'velvelyne';
+  }
+
+  .selectedStyle .itemCaption{
+    color: var(--accent-color);
+    font-family: 'lineal'
+  }
+
   .itemCaption:hover{
     color: var(--accent-color);
   }
@@ -102,8 +168,9 @@
     background-color: var(--dark-color);
     cursor:grab;
     display: flex;
-    align-items: center;
-    justify-content: space-around;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
   }
 
   /*=====================format pc*/
@@ -113,9 +180,6 @@
       height:666px;
       margin-left: -333px;
     }
-    #rootBtn{
-      margin-left: 390px;
-    }
     .theMatrix{
       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       grid-auto-rows: 180px;
@@ -129,9 +193,6 @@
       width:333px;
       height:666px;
     }
-    #rootBtn{
-      margin-left: 59px;
-    }
     .theMatrix{
       grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
       grid-auto-rows: 180px;
@@ -144,36 +205,50 @@
   const linksData = [
     {
       type: "folder",
+      isSelected: false,
       caption: "Folder001",
+      description: "Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.",
       children: [{
         type: "folder",
+        isSelected: false,
         caption: "test-open",
+        description: "Nothing for now x333",
         children: []
       },
       {
         type: "file",
+        isSelected: false,
         caption: "READ-ME002.txt",
+        description: "Nothing for now x333",
         src: ""
       }]
     },
     {
       type: "folder",
+      isSelected: false,
       caption: "Folder002",
+      description: "Nothing for now x333",
       children: []
     },
     {
       type: "folder",
+      isSelected: false,
       caption: "Folder333",
+      description: "Nothing for now x333",
       children: []
     },
     {
       type: "folder",
+      isSelected: false,
       caption: "test",
+      description: "Nothing for now x333",
       children: []
     },
     {
       type: "file",
+      isSelected: false,
       caption: "READ-ME.txt",
+      description: "Nothing for now x333",
       src: ""
     }
   ]
@@ -215,19 +290,57 @@
         console.log(this.displayedItems);
         this.isNotRoot = false;
         this.checkEmptyFolder();
+        this.displayedItems.forEach(it => {
+          it.isSelected = false;
+        });
+        this.displayedDescription = "Click an item to get more info !";
+        this.fileName = "ExternalLinks.333";
       },
-      openClickedFile(e){
+      openFile(e){
+        this.$emit('focus');
         if(e.type === 'folder'){
           this.displayedItems = [...e.children];
           this.checkEmptyFolder();
           this.isNotRoot = true;
+          this.displayedDescription = e.description
+          if (this.bodyWidth>this.bodyHeight){
+            console.log('container dimensions:', this.bodyWidth, this.bodyHeight);
+            this.fileName =".../"+ e.caption;
+          }else{
+            this.fileName += "/" + e.caption;
+          }
         } else {
 
         }
       },
+      selectFile(e){
+        this.$emit('focus');
+        this.displayedItems.forEach(it => {
+          it.isSelected = false;
+        })
+        e.isSelected = true;
+        this.displayedDescription = e.description;
+      },
+      itemIsClicked(e){
+        if (!this.dblClickTimer || this.lastClickedItem !== e){
+          clearTimeout(this.dblClickTimer);
+          this.lastClickedItem = e;
+          this.dblClickTimer = setTimeout(() => {
+            this.selectFile(e);
+            this.dblClickTimer = null;
+            this.lastClickedItem = null;
+          }, 200);
+        }else{
+          clearTimeout(this.dblClickTimer);
+          this.dblClickTimer = null;
+          this.lastClickedItem = null;
+          this.openFile(e);
+        }
+      },
       checkEmptyFolder(){
         if (this.displayedItems.length === 0){
           this.emptyFolder = true;
+          this.displayedItems = null;
         }else{
           this.emptyFolder = false;
         }
@@ -239,12 +352,16 @@
   },
   data(){
     return {
+      lastClickedItem: null,
+      dblClickTimer: null,
       bodyHeight:0,
       bodyWidth:0,
       coordX:0,
       coordY:0,
-      displayedItems:[],
+      displayedItems: null,
       emptyFolder: false,
+      displayedDescription: "",
+      fileName: "",
       isNotRoot : false
     }
   },
@@ -252,7 +369,6 @@
     this.$nextTick(() => {
         this.observeContainer()
     });
-    console.log('coord:', this.coordX, this.coordY);
     this.dataFirstLoad();
     console.log("Contact pannel is loaded!");
   }