diff --git a/src/App.vue b/src/App.vue
index 97c3460..8bad7d2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,8 @@
+<script setup>
+  import PlayerIcon from './assets/icons/play.svg'
+  import LinkIcon from './assets/icons/folder.svg'
+</script>
+
 <template>
   <Teleport to="#topBar .left" defer>
     <lolStatusDiv></lolStatusDiv>
@@ -6,15 +11,86 @@
     <lolStatusDiv></lolStatusDiv>
   </Teleport>
   <eventDiv></eventDiv>
-  <eventPannel class="zFocus"></eventPannel>  
+  <eventPannel
+      v-show="pannelStatus.activePannels.includes('event')"
+      @focus="focusPannel('event')"
+      @close="closePannel('event')"
+      :class="{zBase: pannelStatus.focus !== 'event', zFocus: pannelStatus.focus === 'event'}"
+    ></eventPannel>
+  <playerPannel
+      v-show="pannelStatus.activePannels.includes('player')"
+      @focus="focusPannel('player')"
+      @close="closePannel('player')"
+      :class="{zBase: pannelStatus.focus !== 'player', zFocus: pannelStatus.focus === 'player'}"
+    ></playerPannel>
+  <linkPannel
+      v-show="pannelStatus.activePannels.includes('link')"
+      @focus="focusPannel('link')"
+      @close="closePannel('link')"
+      :class="{zBase: pannelStatus.focus !== 'link', zFocus: pannelStatus.focus === 'link'}"
+    ></linkPannel>
+    <Teleport to="#openingHours" defer>
+      <div id="btnContainer">
+        <button type="button" name="link" class="iconBtnStyle" @click="openPannel('link')">
+          <LinkIcon name="close" class="icon"/>
+        </button>
+        <button type="button" name="player" class="iconBtnStyle" @click="openPannel('player')">
+          <PlayerIcon name="close" class="icon"/>
+        </button>
+      </div>
+    </Teleport>
 </template>
 
 <style scoped>
+  #btnContainer{
+    position: absolute;
+    left: 7.77px;
+    display: flex;
+    flex-direction: column;
+    gap: 7.77px;
+    margin-top: -88px;
+
+    .iconBtnStyle{
+      width: 33px;
+      height: 33px;
+      border-radius: 16.1px;
+    }
+  }
 </style>
 
 <script>
+  import { dataStorage } from './dataExchange.js'
   export default {
     name : 'App',
+    computed: {
+      pannelStatus(){
+        return dataStorage
+      }
+    },
+    methods: {
+      focusPannel(str){
+        if(this.pannelStatus.activePannels.includes(str)){
+          this.pannelStatus.focus = str
+        }
+      },
+      closePannel(str){
+        console.log('closing...')
+        const index = this.pannelStatus.activePannels.indexOf(str)
+        if( index !== -1){
+          this.pannelStatus.activePannels.splice(index, 1)
+          if(this.pannelStatus.focus === str){
+            this.pannelStatus.focus = null
+          }
+        }
+      },
+      openPannel(str){
+        if(!(this.pannelStatus.activePannels.includes(str))){
+          this.pannelStatus.activePannels.push(str)
+        } else {
+          this.focusPannel(str)
+        }
+      }
+    },
     mounted(){
       console.log("Vue root app is fully loaded!");
     }
diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg
new file mode 100644
index 0000000..ec47557
--- /dev/null
+++ b/src/assets/icons/pause.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.67 16.63">
+  <path d="M5.28,0v16.63H0V0h5.28Z"/>
+  <path d="M13.67,0v16.63h-5.28V0h5.28Z"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg
index 35f115d..bf16538 100644
--- a/src/assets/icons/play.svg
+++ b/src/assets/icons/play.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73.5 73.4">
-  <path d="M18.1,68.55c-5.6-3.23-10.02-7.63-13.25-13.2C1.62,49.78,0,43.57,0,36.7s1.62-13.08,4.85-18.65c3.23-5.57,7.65-9.97,13.25-13.2C23.7,1.62,29.93,0,36.8,0s13,1.62,18.6,4.85c5.6,3.23,10.02,7.65,13.25,13.25,3.23,5.6,4.85,11.8,4.85,18.6s-1.62,13-4.85,18.6c-3.23,5.6-7.65,10.02-13.25,13.25-5.6,3.23-11.8,4.85-18.6,4.85s-13.1-1.62-18.7-4.85ZM47.2,54.5c3.13-1.8,5.6-4.27,7.4-7.4,1.8-3.13,2.7-6.6,2.7-10.4s-.9-7.27-2.7-10.4c-1.8-3.13-4.27-5.6-7.4-7.4-3.13-1.8-6.6-2.7-10.4-2.7s-7.37.9-10.5,2.7c-3.13,1.8-5.6,4.27-7.4,7.4-1.8,3.13-2.7,6.6-2.7,10.4s.9,7.27,2.7,10.4c1.8,3.13,4.27,5.6,7.4,7.4,3.13,1.8,6.63,2.7,10.5,2.7s7.27-.9,10.4-2.7Z"/>
+<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.25 17.52">
+  <path d="M0,17.52v-5.94l6.37-2.84L0,5.94V0l18.25,8.71v.07L0,17.52Z"/>
 </svg>
\ No newline at end of file
diff --git a/src/assets/icons/saved.svg b/src/assets/icons/saved.svg
new file mode 100644
index 0000000..91c547c
--- /dev/null
+++ b/src/assets/icons/saved.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.6 133.47">
+  <g id="Calque_1-2" data-name="Calque 1">
+    <path d="M78.6,113.9V0H0v113.9h0l.07,19.57,39.15-38.87,39.16,38.73.21-19.43h0ZM39.08,78.6l-23.08,20.85V16h46.6v83.5l-23.23-20.9h-.3Z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/EventContent.vue b/src/components/EventContent.vue
index 21be942..dcab665 100644
--- a/src/components/EventContent.vue
+++ b/src/components/EventContent.vue
@@ -122,7 +122,12 @@
       openEvent(obj){
         console.log('updating...')
         dataStorage.selectedEvent = obj;
-        dataStorage.eventInfoActive = true;
+        if (dataStorage.activePannels.includes('event')){
+          dataStorage.focus = 'event'
+        } else {
+          dataStorage.activePannels.push('event')
+          dataStorage.focus = 'event'
+        }
       }
     },
     computed: {
diff --git a/src/components/EventInfoPannel.vue b/src/components/EventInfoPannel.vue
index ed55f3e..d3daaf8 100644
--- a/src/components/EventInfoPannel.vue
+++ b/src/components/EventInfoPannel.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-    <div id="eventPannel" class="windowStyle" ref="eventPannel" v-show="isActive">
+    <div id="eventPannel" class="windowStyle" ref="eventPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
       <Moveable
           className="moveable"
           :target="target"
@@ -100,7 +100,7 @@
         target.style.transform = transform;
       },
       closePannel(){
-        dataStorage.eventInfoActive = false;
+        this.$emit('close')
       }
     },
     mounted(){
diff --git a/src/components/LinkPannel.vue b/src/components/LinkPannel.vue
new file mode 100644
index 0000000..e441b7d
--- /dev/null
+++ b/src/components/LinkPannel.vue
@@ -0,0 +1,116 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="linkPannel" class="windowStyle" ref="linkPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          Liens utiles
+        </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')" data-tooltip="fermer">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent" id="linkContent">
+        <a id="linkItem" v-for="item of displayedLinks" :href="item.href" class="textBtnStyle">
+          <p><strong>{{item.title}}</strong><br>{{item.desc}}</p>
+        </a>
+      </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){}
+  */
+
+  #linkPannel{
+    position: fixed;
+    width: 222px;
+    height: 333px;
+    top: 222px;
+    left: 117px;
+  }
+
+  #linkContent{
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
+
+  #linkItem{
+    width: 100%;
+    padding-right: 13.12px;
+    padding-left: 13.12px;
+    font-family: 'velvelyne';
+    font-size: 13.12px;
+    border-radius: 0;
+    border-width: 0 0 1.61px 0;
+    text-align: left;
+    justify-content: flex-start;
+    box-sizing: border-box;
+
+    strong{
+      text-transform: uppercase;
+      font-family: 'karrik';
+      font-weight: normal;
+      font-size: 16.1px;
+    }
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:650px){
+    #linkPannel{
+      left: 477px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { lolLinkList } from '../lolLinks.js'
+
+  export default {
+    name : 'LinkPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      displayedLinks(){
+        return lolLinkList
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.linkPannel;
+      console.log("Link pannel is loaded!");
+    }
+  };
+</script>
diff --git a/src/components/PlayerPannel.vue b/src/components/PlayerPannel.vue
new file mode 100644
index 0000000..0b1fa24
--- /dev/null
+++ b/src/components/PlayerPannel.vue
@@ -0,0 +1,198 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+
+    import PlayIcon from '../assets/icons/play.svg'
+    import PauseIcon from '../assets/icons/pause.svg'
+    import NextIcon from '../assets/icons/next.svg'
+    import PrevIcon from '../assets/icons/prev.svg'
+    import { loadAudioData } from '@/data/audioData.js'
+</script>
+
+<template>
+    <div id="playerPannel" class="windowStyle" ref="playerPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
+        <CloseIcon name="close" class="icon"/>
+      </button>
+      <div class="windowContent" id="playerContent">
+        <div id="credits">
+          <marquee direction="left" behavior="scroll" scrollamount="7" width="100%">{{selectedSong.track}} — {{selectedSong.artist}}</marquee>
+        </div>
+        <div id="controls">
+          <button type="button" class="iconBtnStyle" @click="prevTrack" data-tooltip="précédente">
+            <PrevIcon name="prev" class="icon"/>
+          </button>
+          <button type="button" class="iconBtnStyle" @click="toggleAudio" data-tooltip="lancer">
+            <component :is="isPlaying? PauseIcon : PlayIcon" class="icon"/>
+          </button>
+          <button type="button" class="iconBtnStyle" @click="nextTrack" data-tooltip="suivante">
+            <NextIcon name="next" class="icon"/>
+          </button>
+        </div>
+
+        <audio ref="selectedAudio" @ended="nextTrack">
+          <source :src="audioFile" type="audio/mpeg">
+        </audio>
+
+      </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){}
+  */
+
+  #playerPannel{
+    position: fixed;
+    width: 222px;
+    height: auto;
+    top: 222px;
+    left: 117px;
+    box-sizing: border-box;
+    cursor: move;
+
+    .closeBtn{
+      position: absolute;
+      align-self: flex-end;
+      margin-right: 3.33px;
+      margin-top: 3.33px;
+    }
+  }
+
+  #playerContent{
+    margin-top: 40px;
+
+          #credits{
+            width: 100%;
+            height: 44px;
+            background-color: var(--main-color);
+            padding-left: 7.77px;
+            padding-right: 7.77px;
+            padding-top: 13.12px;
+            margin-bottom: 13.12px;
+
+                  marquee{
+                    color: var(--back-color);
+                    font-family: 'pressStart2P';
+                    font-size: 22px;
+                    font-weight: normal;
+                  }
+          }
+
+          #controls{
+            width: 100%;
+            height: auto;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            margin-bottom: 13.12px;
+
+            .iconBtnStyle{
+              width: 33px;
+              height: 33px;
+            }
+
+          }
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:650px){
+    #playerPannel{
+      left: 477px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+
+  export default {
+    name : 'PlayerPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null,
+        audioTarget: null,
+        audioData: [],
+        selectedSong:{
+          track: "",
+          artist: "",
+          src: ""
+        },
+        audioFile:"",
+        audioCredits:"",
+        trackCount: 0,
+        isPlaying: false
+      }
+    },
+    emits: ['close','focus'],
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      loadAudio(){
+        //console.log(this.target);
+        this.audioTarget.pause();
+        this.selectedSong = this.audioData[this.trackCount];
+        this.audioFile = this.selectedSong.src;
+        this.audioCredits = ' ' + this.selectedSong.track +' - '+ this.selectedSong.artist;
+        this.audioTarget.volume = 1;
+        this.audioTarget.load();
+        if(this.isPlaying){
+          this.audioTarget.play();
+        }
+      },
+      toggleAudio(){
+        if(this.isPlaying){
+        this.audioTarget.pause();
+        }else{
+          this.audioTarget.play();
+        }
+        this.isPlaying = !this.isPlaying;
+      },
+      prevTrack(){
+        this.trackCount -= 1;
+        if (this.trackCount<0){
+          this.trackCount = this.audioData.length - 1;
+        }
+        //console.log('prev:', this.trackCount);
+        this.loadAudio();
+      },
+      nextTrack(){
+        this.trackCount += 1;
+        if (this.trackCount>=this.audioData.length){
+          this.trackCount = 0;
+        }
+        //console.log('next:', this.trackCount);
+        this.loadAudio();
+      }
+    },
+    async mounted(){
+      this.target = this.$refs.playerPannel;
+
+      this.audioData = await loadAudioData();
+      this.audioTarget = this.$refs.selectedAudio;
+      //console.log('AUDIO/', this.audioData);
+      this.loadAudio();
+
+      console.log("Player pannel is loaded!");
+    }
+  };
+</script>
diff --git a/src/data/audioData.js b/src/data/audioData.js
new file mode 100644
index 0000000..4281640
--- /dev/null
+++ b/src/data/audioData.js
@@ -0,0 +1,25 @@
+import audio01 from './juste-tek.mp3'
+import audio02 from './sinking-into-.mp3'
+import audio03 from './technoloooogia.mp3'
+
+export async function loadAudioData() {
+  let audioFiles = [
+      {
+        track: 'the sink',
+        artist: '333',
+        src: audio02
+      },
+      {
+        track: 'just tek',
+        artist: '333',
+        src: audio01
+      },
+      {
+        track: 'Technolooooogia',
+        artist: '333',
+        src: audio03
+      }
+    ]
+  //console.log(audioFiles);
+  return audioFiles
+}
diff --git a/src/data/juste-tek.mp3 b/src/data/juste-tek.mp3
new file mode 100644
index 0000000..4c2e954
Binary files /dev/null and b/src/data/juste-tek.mp3 differ
diff --git a/src/data/sinking-into-.mp3 b/src/data/sinking-into-.mp3
new file mode 100644
index 0000000..f7e847f
Binary files /dev/null and b/src/data/sinking-into-.mp3 differ
diff --git a/src/data/technoloooogia.mp3 b/src/data/technoloooogia.mp3
new file mode 100644
index 0000000..cbb0311
Binary files /dev/null and b/src/data/technoloooogia.mp3 differ
diff --git a/src/dataExchange.js b/src/dataExchange.js
index 7042d10..3c4a8db 100644
--- a/src/dataExchange.js
+++ b/src/dataExchange.js
@@ -8,5 +8,6 @@ export const dataStorage = reactive({
     subtitle: '',
     desc: ''
   },
-  eventInfoActive: false
+  activePannels: [],
+  focus: ''
 })
diff --git a/src/lolLinks.js b/src/lolLinks.js
new file mode 100644
index 0000000..bc128b0
--- /dev/null
+++ b/src/lolLinks.js
@@ -0,0 +1,31 @@
+import { reactive } from 'vue'
+
+export const lolLinkList = reactive(
+  [
+    {
+      title: 'test',
+      desc: 'blah blah description du truc test',
+      href: '#'
+    },
+    {
+      title: 'test 0002',
+      desc: 'blah blah description du truc test',
+      href: '#'
+    },
+    {
+      title: 'test 333',
+      desc: 'encore une autre description du truc test',
+      href: '#'
+    },
+    {
+      title: 'test 0002',
+      desc: 'blah blah description du truc test',
+      href: '#'
+    },
+    {
+      title: 'test 333',
+      desc: 'encore une autre description du truc test',
+      href: '#'
+    }
+  ]
+)
diff --git a/src/main.js b/src/main.js
index a12480a..c7c79d1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,8 @@ import lolStatus from './components/lolStatus.vue'
 import EventContent from './components/EventContent.vue'
 
 import EventInfoPannel from './components/EventInfoPannel.vue'
+import PlayerPannel from './components/PlayerPannel.vue'
+import LinkPannel from './components/LinkPannel.vue'
 // création app racine
 const app = createApp(App);
 
@@ -16,6 +18,8 @@ app.component('lolStatusDiv', lolStatus);
 app.component('eventDiv', EventContent);
 
 app.component('eventPannel', EventInfoPannel);
+app.component('playerPannel', PlayerPannel);
+app.component('linkPannel', LinkPannel);
 
 //Démarrage dans div#app de index.html
 app.mount('#app');
diff --git a/src/style.css b/src/style.css
index 8f66ea2..0478f4b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -204,7 +204,7 @@ html, body{
 }
 
 .zBase{
-  z-index: 33;
+  z-index: 333;
 }
 
 .zFocus{
@@ -329,7 +329,7 @@ html, body{
           height: 200px;
           position: absolute;
           top: 55px;
-          right: 7.77px;
+          right: 3.33px;
           z-index: 3;
 
                 .textBtnStyle{