diff --git a/v1-com-officielle/public/DATA/Images/ura-bleu.png b/v1-com-officielle/public/DATA/Images/ura-bleu.png
new file mode 100644
index 0000000..40f15ca
Binary files /dev/null and b/v1-com-officielle/public/DATA/Images/ura-bleu.png differ
diff --git a/v1-com-officielle/public/DATA/Images/ura-vert.png b/v1-com-officielle/public/DATA/Images/ura-vert.png
new file mode 100644
index 0000000..4d8e40f
Binary files /dev/null and b/v1-com-officielle/public/DATA/Images/ura-vert.png differ
diff --git a/v1-com-officielle/public/DATA/peopleData.json b/v1-com-officielle/public/DATA/peopleData.json
new file mode 100644
index 0000000..063f61d
--- /dev/null
+++ b/v1-com-officielle/public/DATA/peopleData.json
@@ -0,0 +1,94 @@
+[
+  {
+    "type": "folder",
+    "isSelected": false,
+    "caption": "Artistes DRAGs",
+    "description": "Si tu veux en savoir plus sur nos artistes drags, c'est par ici !",
+    "children": [
+      {
+        "type": "folder",
+        "isSelected": false,
+        "caption": "Urazoria",
+        "description": "Urazoria est une Drag Creature de Limoges, et aussi une des fondatrice de drags & nerds, host de la 1ère édition",
+        "children": [
+          {
+            "type": "image",
+            "isSelected": false,
+            "caption": "Urazoria003.star",
+            "description": "Urazoria dans son show à XXXX pour XXXX en 2025",
+            "src":"./DATA/Images/ura-bleu.png"
+          },
+          {
+            "type": "text",
+            "isSelected": false,
+            "caption": "Urazoria.loveMsg",
+            "description": "Coucou !"
+          }
+        ]
+      },
+      {
+        "type": "text",
+        "isSelected": false,
+        "caption": "Urazoria.loveMsg",
+        "description": "Coucou !"
+      }
+    ]
+  },
+  {
+    "type": "folder",
+    "isSelected": false,
+    "caption": "Artistes NERDs",
+    "description": "Si tu veux en savoir plus sur nos artistes nerds, c'est par là !",
+    "children": [
+      {
+        "type": "folder",
+        "isSelected": false,
+        "caption": "Théo",
+        "description": "Theo est un musicien qui construit des synthés modulaires",
+        "children": [
+          {
+            "type": "link",
+            "isSelected": false,
+            "caption": "Theo.web",
+            "description": "Site internet de Theo",
+            "url":"https://drags-nerds.net"
+          },
+          {
+            "type": "text",
+            "isSelected": false,
+            "caption": "Theo.loveMsg",
+            "description": "Hello !"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "type": "folder",
+    "isSelected": false,
+    "caption": "Autres",
+    "description": "Dans ce dossier on met en vrac plein de trucs, qu'on trouve cool, sur nous (ou pas), nos valeurs etc. Allez fouiller si vous avez le temps ^^",
+    "children": [
+      {
+        "type": "link",
+        "isSelected": false,
+        "caption": "Background.web",
+        "description": "Site internet du fond animé, en open source, allez checker ça l'équipe ! (et payer un café à son créateur si vous pouvez hihi)",
+        "url":"https://collidingscopes.github.io/liquid-shape-distortions"
+      },
+      {
+        "type": "text",
+        "isSelected": false,
+        "caption": "DNN.loveMsg",
+        "description": "Hello again!"
+      },
+      {
+        "type": "image",
+        "isSelected": false,
+        "caption": "Urazoria003.star",
+        "description": "Urazoria dans son show à XXXX pour XXXX en 2025",
+        "src":"./DATA/Images/ura-vert.png"
+      }
+    ]
+  }
+]
diff --git a/v1-com-officielle/src/data/peopleData.js b/v1-com-officielle/src/data/peopleData.js
new file mode 100644
index 0000000..3b97fa9
--- /dev/null
+++ b/v1-com-officielle/src/data/peopleData.js
@@ -0,0 +1,4 @@
+export async function loadPeopleData() {
+  const pData = await fetch('/DATA/peopleData.json');
+  return await pData.json();
+}
diff --git a/v1-com-officielle/src/dataExchange.js b/v1-com-officielle/src/dataExchange.js
index b232702..300a57f 100644
--- a/v1-com-officielle/src/dataExchange.js
+++ b/v1-com-officielle/src/dataExchange.js
@@ -12,5 +12,9 @@ export const dataStorage = reactive({
     wasRead: false,
     isSelected: false,
     isEvent: false
+  },
+  selectedImg: {
+    src: "",
+    caption: ""
   }
 })
diff --git a/v1-com-officielle/src/indieComponents/ArtistPannel.vue b/v1-com-officielle/src/indieComponents/ArtistPannel.vue
index 6250ea5..a50776f 100644
--- a/v1-com-officielle/src/indieComponents/ArtistPannel.vue
+++ b/v1-com-officielle/src/indieComponents/ArtistPannel.vue
@@ -4,6 +4,7 @@
   import FileIcon from '../assets/icons/file.svg'
   import ReloadIcon from '../assets/icons/reload.svg'
   import BackIcon from '../assets/icons/back.svg'
+  import { loadPeopleData } from '@/data/peopleData.js'
 </script>
 
 <template>
@@ -16,9 +17,9 @@
       />
       <div class="windowTitle">
         <p>
-          <b class="windowTitleLower">À PROPOS DE</b>
+          <b class="windowTitleLower">À PROPOS DE NOUS</b>
           <br>
-          Nous, Nos Artistes, etc.
+          {{fileName}}
         </p>
         <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
         <div class="dblBtnContainer">
@@ -141,6 +142,8 @@
     padding-left: 2%;
     padding-right: 3.33%;
     overflow-y: scroll;
+
+    white-space: pre-line;
   }
 
   .itemStyle{
@@ -221,56 +224,7 @@
 
 <script>
   import Moveable from 'vue3-moveable';
-  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: ""
-    }
-  ]
+  import { dataStorage } from '../dataExchange.js'
 
   export default {
     name : 'ArtistPannel',
@@ -280,6 +234,7 @@
     data(){
       return{
         target: null,
+        linksData: [],
         lastClickedItem: null,
         dblClickTimer: null,
         displayedItems: null,
@@ -290,39 +245,40 @@
         isNotRoot : false
       }
     },
-    emits: ['close','focus'],
+    emits: ['close','focus','openImg'],
     methods:{
       onDrag({ target, transform }) {
         target.style.transform = transform;
       },
       dataFirstLoad(){
-        this.displayedItems = [...linksData];
+        this.displayedItems = [...this.linksData];
         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";
+        this.displayedDescription = "1x click pour plus d'infos \n 2x click pour accéder au contenu";
+        this.fileName = "./";
       },
       openFile(e){
         this.$emit('focus');
         if(e.type === 'folder'){
-          this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName});
+          this.rootFolderContent.push({content:[...this.displayedItems], directory:this.fileName, description: this.displayedDescription});
           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 {
-
+          this.fileName += e.caption + '/';
         }
+        if(e.type === 'image'){
+            this.$emit('openImg');
+            dataStorage.selectedImg = {
+              src: e.src,
+              caption: e.caption
+            }
+        }
+
       },
       selectFile(e){
         this.$emit('focus');
@@ -360,6 +316,7 @@
         let rootDepth = this.rootFolderContent.length-1;
         this.displayedItems = this.rootFolderContent[rootDepth].content;
         this.fileName = this.rootFolderContent[rootDepth].directory;
+        this.displayedDescription = this.rootFolderContent[rootDepth].description;
         this.rootFolderContent.splice(rootDepth,1);
         rootDepth = this.rootFolderContent.length
         if (rootDepth === 0){
@@ -372,7 +329,8 @@
         this.$emit('close');
       }
     },
-    mounted(){
+    async mounted(){
+      this.linksData = await loadPeopleData();
       this.target = this.$refs.artistPannel;
       this.dataFirstLoad();
       console.log("Artist pannel is loaded!");
diff --git a/v1-com-officielle/src/indieComponents/VisualizerPannel.vue b/v1-com-officielle/src/indieComponents/VisualizerPannel.vue
new file mode 100644
index 0000000..01d2e05
--- /dev/null
+++ b/v1-com-officielle/src/indieComponents/VisualizerPannel.vue
@@ -0,0 +1,97 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="visualizerPannel" class="windowStyle" ref="visualizerPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          {{selectedImg.caption}}
+        </p>
+        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent" id="visualizerContent">
+        <img :src="selectedImg.src" id="displayedImgStyle">
+      </div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #visualizerPannel{
+    position: fixed;
+    width: 333px;
+    height: auto;
+    top: 500px;
+    left: 16.1px;
+    border-radius: 16.1px 16.1px 0 0;
+  }
+
+  #displayedImgStyle{
+    width:100%;
+    height:auto;
+    margin: 0;
+    padding: 0;
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #visualizerPannel{
+      top: 333px;
+      left: 161px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'VisualizerPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      selectedImg(){
+        return dataStorage.selectedImg
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.visualizerPannel;
+      console.log("Visualizer pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/infoComponents/InfoMenu.vue b/v1-com-officielle/src/infoComponents/InfoMenu.vue
index 3276eee..6c7cd4a 100644
--- a/v1-com-officielle/src/infoComponents/InfoMenu.vue
+++ b/v1-com-officielle/src/infoComponents/InfoMenu.vue
@@ -32,6 +32,7 @@
     <InboxDiv @open="openPannel('msg')"></InboxDiv>
     <ArtistPan
       v-show="isActive.includes('artist')"
+      @openImg = "openPannel('visual')"
       @close="closePannel('artist')"
       @focus="focusPannel('artist')"
       :class="{zBase: isFocused!=='artist', zFocus: isFocused==='artist'}">
@@ -66,6 +67,12 @@
       @focus="focusPannel('follow')"
       :class="{zBase: isFocused!=='follow', zFocus: isFocused==='follow'}">
     </FollowPan>
+    <VisualizerPan
+      v-show="isActive.includes('visual')"
+      @close="closePannel('visual')"
+      @focus="focusPannel('visual')"
+      :class="{zBase: isFocused!=='visual', zFocus: isFocused==='visual'}">
+    </VisualizerPan>
 </template>
 
 <style scoped>
@@ -146,7 +153,7 @@
   /*================ MID FORMAT*/
   @media(min-width:500px){
     #welcomeText{
-      height:75%;
+      height:72%;
     }
 
     #btnColumn .iconBtnStyle{
@@ -183,6 +190,7 @@
     },
     methods:{
       openPannel(name){
+        console.log(name);
         if(!this.isActive.includes(name)){
           this.isActive.push(name);
         }
diff --git a/v1-com-officielle/src/main.js b/v1-com-officielle/src/main.js
index 6384b98..75ac251 100644
--- a/v1-com-officielle/src/main.js
+++ b/v1-com-officielle/src/main.js
@@ -20,6 +20,8 @@ import ContactPannel from './indieComponents/ContactPannel.vue'
 import InstaPannel from './indieComponents/InstaPannel.vue'
 import MessagePannel from './indieComponents/MessagePannel.vue'
 import FollowPannel from './indieComponents/FollowPannel.vue'
+import VisualizerPannel from './indieComponents/VisualizerPannel.vue'
+
 
 // création app racine
 const app = createApp(App);
@@ -41,6 +43,7 @@ app.component('ContactPan', ContactPannel);
 app.component('InstaPan', InstaPannel);
 app.component('MessagePan', MessagePannel);
 app.component('FollowPan', FollowPannel);
+app.component('VisualizerPan', VisualizerPannel);
 
 //Montage dans div#app de index.html
 app.mount('#app');