diff --git a/v1-com-officielle/index.html b/v1-com-officielle/index.html
index 492c01c..6f94cf9 100644
--- a/v1-com-officielle/index.html
+++ b/v1-com-officielle/index.html
@@ -16,6 +16,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
   </head>
   <body>
+    <!--TEST REFERENCE-->
     <h1 class="referenceText">
       <strong>drags and nerds</strong>
       <p>
diff --git a/v1-com-officielle/src/App.vue b/v1-com-officielle/src/App.vue
index 06f389b..bbfa2a8 100644
--- a/v1-com-officielle/src/App.vue
+++ b/v1-com-officielle/src/App.vue
@@ -1,21 +1,49 @@
-<script setup>
-</script>
-
 <template>
     <div id="mainContainer">
-
+      <TitleDiv></TitleDiv>
+      <InfoDiv></InfoDiv>
     </div>
 </template>
 
 <style scoped>
-  /*CSS général app*/
+  /*================= 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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #mainContainer{
+    background-color: transparent;
+    width:100%;
+    position:absolute;
+    inset:0;
+    height:200%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #mainContainer{
+      flex-direction: row;
+      height:100%;
+    }
+  }
 </style>
 
 <script>
   export default {
     name : 'App',
     mounted(){
-      document.documentElement.setAttribute("data-theme", "dark");
+      document.documentElement.setAttribute("data-theme", "light");
       console.log("Vue root app is fully loaded!");
     }
   };
diff --git a/v1-com-officielle/src/assets/style.css b/v1-com-officielle/src/assets/style.css
index 44e72b8..b5607af 100644
--- a/v1-com-officielle/src/assets/style.css
+++ b/v1-com-officielle/src/assets/style.css
@@ -1,15 +1,15 @@
 /*=============Gamme colorée*/
 
 :root[data-theme="dark"]{
-  --dark-color: #380052;
-  --light-color: #C303FF;
+  --back-color: black;
+  --main-color: white;
   --accent-color: #00FF76;
 }
 
 :root[data-theme="light"]{
-  --dark-color: #380052;
-  --light-color: #C303FF;
-  --accent-color: #00FF76;
+  --back-color: white;
+  --main-color: black;
+  --accent-color: #C303FF;
 }
 
 /*=============Typo*/
@@ -49,7 +49,7 @@ a{
 .referenceText{
   position:absolute;
   z-index: -33;
-  color: var(--light-color);
+  color: var(--dark-color);
 }
 
 /*=============Body & background*/
@@ -57,7 +57,7 @@ html, body{
   margin: 0;
   padding: 0;
   position: absolute;
-  background-color: #000000;
+  background-color: var(--dark-color);
   width: 100%;
   height:100%;
   position: fixed;
@@ -83,3 +83,34 @@ canvas {
   height: 0;
   overflow: hidden;
 }
+
+/*================= 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:500px){}
+    ================ PC LARGE
+    @media(min-width:1000px){}
+*/
+
+/*=============Vue root app */
+
+#app{
+  position:absolute;
+  inset:0;
+  width:100%;
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.uiStyle{
+  background-color: var(--back-color);
+  border-style: solid;
+  border-color: var(--main-color);
+  border-width: thin;
+  border-radius: 0;
+}
diff --git a/v1-com-officielle/src/components/HelloWorld.vue b/v1-com-officielle/src/components/HelloWorld.vue
deleted file mode 100644
index 546ebbc..0000000
--- a/v1-com-officielle/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/v1-com-officielle/src/components/Info/InboxContent.vue b/v1-com-officielle/src/components/Info/InboxContent.vue
new file mode 100644
index 0000000..181fc31
--- /dev/null
+++ b/v1-com-officielle/src/components/Info/InboxContent.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="inboxContainer" class="uiStyle">
+
+    </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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #inboxContainer{
+    width:100%;
+    position:relative;
+    height:50%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){}
+</style>
+
+<script>
+  export default {
+    name : 'InboxContent',
+    mounted(){
+      console.log("Inbox content is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/components/Info/InfoMenu.vue b/v1-com-officielle/src/components/Info/InfoMenu.vue
new file mode 100644
index 0000000..549fc14
--- /dev/null
+++ b/v1-com-officielle/src/components/Info/InfoMenu.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="infoMenuContainer" class="uiStyle">
+
+    </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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #infoMenuContainer{
+    width:100%;
+    position:relative;
+    height:40%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){}
+</style>
+
+<script>
+  export default {
+    name : 'InfoMenu',
+    mounted(){
+      console.log("Info menu is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/components/InfoContent.vue b/v1-com-officielle/src/components/InfoContent.vue
new file mode 100644
index 0000000..f3b5957
--- /dev/null
+++ b/v1-com-officielle/src/components/InfoContent.vue
@@ -0,0 +1,48 @@
+<template>
+    <div id="infoContainer">
+      <InfoMenuDiv></InfoMenuDiv>
+      <InboxDiv></InboxDiv>
+    </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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #infoContainer{
+    background-color: transparent;
+    width:100%;
+    position:relative;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #infoContainer{
+      height: 100%;
+      width: 33.3%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'InfoContent',
+    mounted(){
+      console.log("Info content is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/components/Title/GeneratedContent.vue b/v1-com-officielle/src/components/Title/GeneratedContent.vue
new file mode 100644
index 0000000..8d7255f
--- /dev/null
+++ b/v1-com-officielle/src/components/Title/GeneratedContent.vue
@@ -0,0 +1,42 @@
+<template>
+    <div id="generatedContainer">
+
+    </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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #generatedContainer{
+    background-color: transparent;
+    width:100%;
+    position:relative;
+    height:70%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #generatedContainer{
+      height: 67%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'GeneratedContent',
+    mounted(){
+      console.log("Generated content is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/components/Title/MusicPlayer.vue b/v1-com-officielle/src/components/Title/MusicPlayer.vue
new file mode 100644
index 0000000..0684756
--- /dev/null
+++ b/v1-com-officielle/src/components/Title/MusicPlayer.vue
@@ -0,0 +1,41 @@
+<template>
+    <div id="playerContainer" class="uiStyle">
+
+    </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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #playerContainer{
+    width:100%;
+    position:relative;
+    height:10%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #playerContainer{
+      height: 13%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'MusicPlayer',
+    mounted(){
+      console.log("Music player is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/components/Title/TitleText.vue b/v1-com-officielle/src/components/Title/TitleText.vue
new file mode 100644
index 0000000..92060ac
--- /dev/null
+++ b/v1-com-officielle/src/components/Title/TitleText.vue
@@ -0,0 +1,37 @@
+<template>
+    <div id="titleTextContainer" class="uiStyle">
+
+    </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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #titleTextContainer{
+    width:100%;
+    position:relative;
+    height:20%;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){}
+</style>
+
+<script>
+  export default {
+    name : 'TitleText',
+    mounted(){
+      console.log("Title text is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/components/TitleContent.vue b/v1-com-officielle/src/components/TitleContent.vue
new file mode 100644
index 0000000..7972ed5
--- /dev/null
+++ b/v1-com-officielle/src/components/TitleContent.vue
@@ -0,0 +1,49 @@
+<template>
+    <div id="titleContainer">
+      <PlayerDiv></PlayerDiv>
+      <GeneratedDiv></GeneratedDiv>
+      <TitleTextDiv></TitleTextDiv>
+    </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:500px){}
+      ================ PC LARGE
+      @media(min-width:1000px){}
+  */
+
+  #titleContainer{
+    background-color: transparent;
+    width:100%;
+    position: relative;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  /*================ PC LARGE*/
+  @media(min-width:1000px){
+    #titleContainer{
+      height:100%;
+      width:66.7%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'TitleContent',
+    mounted(){
+      console.log("Title content is loaded!");
+    }
+  };
+</script>
diff --git a/v1-com-officielle/src/main.js b/v1-com-officielle/src/main.js
index c433840..983034a 100644
--- a/v1-com-officielle/src/main.js
+++ b/v1-com-officielle/src/main.js
@@ -4,13 +4,25 @@ import './assets/style.css'
 // import app vue racine
 import App from './App.vue'
 // import composants
-//import MainContent from './components/MainContent.vue'
+import TitleContent from './components/TitleContent.vue'
+import InfoContent from './components/InfoContent.vue'
+import TitleText from './components/Title/TitleText.vue'
+import GeneratedContent from './components/Title/GeneratedContent.vue'
+import MusicPlayer from './components/Title/MusicPlayer.vue'
+import InfoMenu from './components/Info/InfoMenu.vue'
+import InboxContent from './components/Info/InboxContent.vue'
 
 // création app racine
 const app = createApp(App);
 
 //Composants
-//app.component('mainDiv',MainContent);
+app.component('TitleDiv', TitleContent);
+app.component('InfoDiv', InfoContent);
+app.component('PlayerDiv', MusicPlayer);
+app.component('TitleTextDiv', TitleText);
+app.component('GeneratedDiv',GeneratedContent);
+app.component('InfoMenuDiv', InfoMenu);
+app.component('InboxDiv', InboxContent);
 
 //Montage dans div#app de index.html
 app.mount('#app');
