diff --git a/index.html b/index.html
index 927edbd..d7d72c9 100644
--- a/index.html
+++ b/index.html
@@ -113,8 +113,6 @@
           <div class="uiStyle" id="title">
             évènements<br>&emsp;&emsp; &rarr; &rarr; &rarr; à venir :
           </div>
-          <div id="eventList">
-          </div>
         </div>
       </div>
     </div>
diff --git a/public/typo/Velvelyne-Book.ttf b/public/typo/Velvelyne-Book.ttf
new file mode 100644
index 0000000..7a4dd9e
Binary files /dev/null and b/public/typo/Velvelyne-Book.ttf differ
diff --git a/src/App.vue b/src/App.vue
index b324744..97c3460 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,8 @@
   <Teleport to="#lolOpener.uiStyle" defer>
     <lolStatusDiv></lolStatusDiv>
   </Teleport>
-
+  <eventDiv></eventDiv>
+  <eventPannel class="zFocus"></eventPannel>  
 </template>
 
 <style scoped>
diff --git a/src/components/EventContent.vue b/src/components/EventContent.vue
new file mode 100644
index 0000000..74d712b
--- /dev/null
+++ b/src/components/EventContent.vue
@@ -0,0 +1,137 @@
+<template>
+  <Teleport to="#eventSection" defer>
+    <div id="eventContainer">
+      <div class="eventEntry" v-for="item of displayedEvents" :key="item.title" @click="openEvent(item)">
+        <div class="titleSection">
+          <p class="title">{{item.title}}</p>
+          <p class="date">{{item.date}} &rarr; {{item.time}}</p>
+        </div>
+        <div class="subtitleSection">
+          <p class="subtitle">{{item.subtitle}}</p>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+  #eventContainer{
+    width:100%;
+    height: auto;
+    max-height: 90vh;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 7.77px;
+    padding-top: 7.77px;
+    box-sizing: border-box;
+
+    @media(min-width: 700px){
+      max-height: 50vh;
+    }
+    @media(min-width: 1300px){
+      max-height: 46.5vh;
+    }
+
+          .eventEntry{
+            width: 90%;
+            height: auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            border-color: var(--back-color);
+            border-style: solid;
+            border-width: thin;
+            border-radius: 16.1px;
+            flex-shrink: 0;
+            gap: 0;
+
+                  .titleSection{
+                    width: 100%;
+                    height: 44px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: flex-start;
+                    align-items: center;
+                    box-sizing: border-box;
+                    padding-top: 7.77px;
+                    pointer-events: none;
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-size: 16.1px;
+                      font-weight: bold;
+                      color: var(--back-color);
+                      height: 50%;
+                      margin: 0;
+                      padding: 0;
+                      text-transform: uppercase;
+                    }
+
+                    p.date{
+                      font-family: 'karrik';
+                      font-weight: normal;
+                      font-size: 9px;
+                      text-transform: none;
+                    }
+
+            }
+
+            .subtitleSection{
+              width: 100%;
+              height: auto;
+              padding-right: 16.1px;
+              padding-left: 16.1px;
+              box-sizing: border-box;
+              position: relative;
+              margin-top: 0;
+              padding-top: 0;
+              pointer-events: none;
+
+                    p{
+                      font-family: 'velvelyne';
+                      font-size: 13.12px;
+                      font-weight: normal;
+                      color: var(--back-color);
+                      white-space: pre-line;
+                    }
+            }
+    }
+
+    .eventEntry:hover{
+      background-color: var(--back-color);
+      color: var(--main-color);
+
+      p{
+        color: var(--main-color);
+      }
+    }
+  }
+
+</style>
+
+<script>
+  import { watch } from 'vue'
+  import { lolEventsList } from '../lolEvents.js'
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'EventContent',
+    methods: {
+      openEvent(obj){
+        console.log('updating...')
+        dataStorage.selectedEvent = obj;
+        dataStorage.eventInfoActive = true;
+      }
+    },
+    computed: {
+      displayedEvents(){
+        return lolEventsList
+      }
+    },
+    mounted(){
+      console.log("Event list is loaded!");
+    }
+  };
+</script>
diff --git a/src/components/EventInfoPannel.vue b/src/components/EventInfoPannel.vue
new file mode 100644
index 0000000..90de6a8
--- /dev/null
+++ b/src/components/EventInfoPannel.vue
@@ -0,0 +1,111 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+</script>
+
+<template>
+    <div id="eventPannel" class="windowStyle" ref="eventPannel" v-show="isActive">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          {{displayedEvent.title}}
+        </p>
+        <button type="button" class="closeBtn" @mousedown.stop="closePannel" @touchstart.stop="closePannel">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent" id="eventContent">
+        <p class="date">
+          {{displayedEvent.date}} &rarr; {{displayedEvent.time}}
+        </p>
+        <p>{{displayedEvent.desc}}</p>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+
+  #eventPannel{
+    position: fixed;
+    width: 250px;
+    height: auto;
+    max-height: 250px;
+    top: 222px;
+    left: 117px;
+    padding-bottom: 3.33px;
+
+
+          #eventContent{
+            padding: 7.77px;
+            align-items: flex-start;
+            justify-content: start;
+            overflow-y: scroll;
+
+                  p{
+                    font-family: 'velvelyne';
+                    font-weight: normal;
+                    font-size: 13.12;
+                    color: var(--main-color);
+                    margin: 0;
+                    padding: 0;
+                    margin-bottom: 3.33px;
+                    margin-left: 7.77px;
+                    margin-right: 13.12px;
+                    white-space: pre-line;
+                  }
+
+                  p.date{
+                    font-family: 'karrik';
+                  }
+          }
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:650px){
+    #eventPannel{
+      left: 477px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'EventInfoPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      displayedEvent(){
+        return dataStorage.selectedEvent
+      },
+      isActive(){
+        return dataStorage.eventInfoActive
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      closePannel(){
+        dataStorage.eventInfoActive = false;
+      }
+    },
+    mounted(){
+      this.target = this.$refs.eventPannel;
+      console.log("Event info pannel is loaded!");
+    }
+  };
+</script>
diff --git a/src/dataExchange.js b/src/dataExchange.js
new file mode 100644
index 0000000..7042d10
--- /dev/null
+++ b/src/dataExchange.js
@@ -0,0 +1,12 @@
+import { reactive } from 'vue'
+
+export const dataStorage = reactive({
+  selectedEvent: {
+    title: '',
+    date: '',
+    time: '',
+    subtitle: '',
+    desc: ''
+  },
+  eventInfoActive: false
+})
diff --git a/src/lolEvents.js b/src/lolEvents.js
new file mode 100644
index 0000000..13a2748
--- /dev/null
+++ b/src/lolEvents.js
@@ -0,0 +1,34 @@
+import { reactive } from 'vue'
+
+export const lolEventsList = reactive(
+  [
+    {
+      title: 'test-01',
+      date: '13/12/26',
+      time: '13h12',
+      subtitle: 'test event 001',
+      desc: 'ça marche !'
+    },
+    {
+      title: 'test-02',
+      date: '13/12/26',
+      time: '13h12',
+      subtitle: 'test event 002',
+      desc: 'oui je crois bien'
+    },
+    {
+      title: 'test-333',
+      date: '13/12/26',
+      time: '13h12',
+      subtitle: 'test event 333 \n test event 333 \n test event 333 \n test event 333',
+      desc: 'super !'
+    },
+    {
+      title: 'test-004',
+      date: '13/12/26',
+      time: '13h12',
+      subtitle: 'test event 004',
+      desc: 'test de très longue description: \n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+    }
+  ]
+)
diff --git a/src/main.js b/src/main.js
index 91dace5..a12480a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,11 +5,17 @@ import './style.css'
 import App from './App.vue'
 // import composants
 import lolStatus from './components/lolStatus.vue'
+import EventContent from './components/EventContent.vue'
+
+import EventInfoPannel from './components/EventInfoPannel.vue'
 // création app racine
 const app = createApp(App);
 
 //Composants
 app.component('lolStatusDiv', lolStatus);
+app.component('eventDiv', EventContent);
+
+app.component('eventPannel', EventInfoPannel);
 
 //Démarrage dans div#app de index.html
 app.mount('#app');
diff --git a/src/style.css b/src/style.css
index 96785ef..5eccf1b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -23,7 +23,7 @@
 
 @font-face {
   font-family: 'velvelyne';
-  src: url('./typo/Velvelyne-Light.ttf') format('truetype');
+  src: url('./typo/Velvelyne-Book.ttf') format('truetype');
   font-weight: normal;
 }
 
@@ -189,6 +189,82 @@ html, body{
   color: var(--back-color);
 }
 
+/*==============FENETRES*/
+.windowStyle{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: var(--back-color);
+  border-style: solid;
+  border-width: thin;
+  border-radius: 16.1px;
+  border-color: var(--main-color);
+  overflow: hidden;
+}
+
+.zBase{
+  z-index: 33;
+}
+
+.zFocus{
+  z-index: revert;
+  z-index: 1312;
+}
+
+.windowTitle{
+  width:100%;
+  height:50px;
+  background-color: var(--main-color);
+  border-radius: 0;
+  font-family: 'velvelyne';
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 22px;
+  color: var(--back-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-left: 10px;
+  padding-right: 10px;
+  cursor: move;
+}
+
+
+.windowTitleLower{
+  font-family: 'velvelyne';
+  font-weight: bold;
+  font-size: 13.12px;
+}
+
+.closeBtn{
+  color: var(--back-color);
+  background-color: var(--main-color);
+  border-style: solid;
+  border-width: thin;
+  border-radius: 16.1px;
+  border-color: var(--back-color);
+  width: 33px;
+  height: 33px;
+  align-items: center;
+}
+
+.closeBtn:hover{
+  color: var(--main-color);
+  background-color: var(--back-color);
+}
+
+.windowContent{
+  height:77%;
+  width:100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
 /*=============INTERFACE*/
 .uiStyle{
   background-color: var(--back-color);
@@ -569,26 +645,39 @@ html, body{
   align-items: flex-start;
   justify-content: flex-start;
   box-sizing: border-box;
+  height: 50vh;
 
         #aboutText{
           width: 60%;
-          height: 100%;
-          overflow-y: scroll;
+          height: auto;
           padding-left: 4.44px;
           padding-right: 13.12px;
-          box-sizing: border-box;
+          padding-bottom: 13.12px;
+          overflow-y: scroll;
+
+          @media(min-width: 700px){
+            height: 50vh;
+          }
+          @media(min-width: 1300px){
+            height: 50vh;
+          }
 
                 p{
                   font-family: 'velvelyne';
                   font-weight: normal;
                   font-size: 13.12px;
                   color: var(--main-color);
+
+                  @media(min-width: 1300px){
+                    font-size: 20px;
+                  }
                 }
         }
 
         #eventSection{
           width: 40%;
-          height: auto;
+          height: 100%;
+          position: relative;
 
                 #title{
                   height: 44px;