diff --git a/v0-appel-projet/package-lock.json b/v0-appel-projet/package-lock.json
index af389d5..bfc068f 100644
--- a/v0-appel-projet/package-lock.json
+++ b/v0-appel-projet/package-lock.json
@@ -8,6 +8,7 @@
       "name": "v0-appel-projet",
       "version": "0.0.0",
       "dependencies": {
+        "vite-svg-loader": "^5.1.1",
         "vue": "^3.5.25"
       },
       "devDependencies": {
@@ -990,12 +991,185 @@
       "integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==",
       "license": "MIT"
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "license": "ISC"
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "license": "CC0-1.0"
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/entities": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
@@ -1098,6 +1272,18 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1116,6 +1302,18 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1208,6 +1406,15 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/sax": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.5.0.tgz",
+      "integrity": "sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=11.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1217,6 +1424,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/svgo": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
+      "integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0",
+        "sax": "^1.5.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1309,6 +1541,19 @@
         }
       }
     },
+    "node_modules/vite-svg-loader": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-5.1.1.tgz",
+      "integrity": "sha512-RPzcXA/EpKJA0585x58DBgs7my2VfeJ+j2j1EoHY4Zh82Y7hV4cR1fElgy2aZi85+QSrcLLoTStQ5uZjD68u+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.3.4",
+        "svgo": "^3.3.3"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.13"
+      }
+    },
     "node_modules/vue": {
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.30.tgz",
diff --git a/v0-appel-projet/package.json b/v0-appel-projet/package.json
index f4902a7..1d82068 100644
--- a/v0-appel-projet/package.json
+++ b/v0-appel-projet/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "vite-svg-loader": "^5.1.1",
     "vue": "^3.5.25"
   },
   "devDependencies": {
diff --git a/v0-appel-projet/public/typo/Lineal-Heavy.ttf b/v0-appel-projet/public/typo/Lineal-Heavy.ttf
new file mode 100644
index 0000000..ee6c18d
Binary files /dev/null and b/v0-appel-projet/public/typo/Lineal-Heavy.ttf differ
diff --git a/v0-appel-projet/public/typo/PressStart2P-Regular.ttf b/v0-appel-projet/public/typo/PressStart2P-Regular.ttf
new file mode 100644
index 0000000..2442aff
Binary files /dev/null and b/v0-appel-projet/public/typo/PressStart2P-Regular.ttf differ
diff --git a/v0-appel-projet/public/typo/Velvelyne-Bold.ttf b/v0-appel-projet/public/typo/Velvelyne-Bold.ttf
new file mode 100644
index 0000000..a9a4c84
Binary files /dev/null and b/v0-appel-projet/public/typo/Velvelyne-Bold.ttf differ
diff --git a/v0-appel-projet/public/typo/Velvelyne-Light.ttf b/v0-appel-projet/public/typo/Velvelyne-Light.ttf
new file mode 100644
index 0000000..8601c1d
Binary files /dev/null and b/v0-appel-projet/public/typo/Velvelyne-Light.ttf differ
diff --git a/v0-appel-projet/src/App.vue b/v0-appel-projet/src/App.vue
index 4bf5f0b..667b4ff 100644
--- a/v0-appel-projet/src/App.vue
+++ b/v0-appel-projet/src/App.vue
@@ -1,12 +1,413 @@
+<script setup>
+  import GrainOverlay from './assets/noise.svg?component'
+  import Two from './assets/2.svg?component'
+</script>
+
 <template>
+  <div id="mainContainer">
+    <GrainOverlay name="grain" class="overlay"/>
+    <workshopPannel v-show="workshopActive" @close="workshopToggle" :class="{alonePannel: workshopIsAlone}"></workshopPannel>
+    <aboutPannel v-show="aboutActive" @close="aboutToggle"></aboutPannel>
+    <div id="titleContainer">
+      <div id="windowContainer">
+        <div id="imgContainer">
+
+        </div>
+        <div id="textContainer">
+          <Two name="two" class="numberTwo"/>
+          <div class="titleText" id="drag">
+            <p>DRAGs<b class="smallerText"> AND</b></p>
+          </div>
+          <div class="titleText" id="nerd">
+              <p>NERDs<b class="smallerText">#</b></p>
+          </div>
+          <div class="descText" id="descTextTop">
+            <b id="subtitle">&gt; Appel à Projet</b>
+            <br>
+            Drag shows, musique électronique, synthés vidéos
+            <br class="smallWidthBreaker">
+            et autre performances nerds
+            <br>
+            On recherche actuellement : artistes drags,
+            <br class="smallWidthBreaker">
+            artistes nerds, crafties pour la scéno ...
+          </div>
+          <div id="bottomInfo">
+            <div id="date" class="descText" ><b>22 Mai 2026</b></div>
+            <div id="adress" class="descText" ><b>Grrrnd Zero</b></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="btnContainer">
+      <button type="button" class="btnStyle" id="about" @click="aboutToggle">À PROPOS DE NOUS...</button>
+      <button type="button" class="btnStyle" id="workshop" @click="workshopToggle">ATELIERS PARTICPATIFS</button>
+      <button type="button" class="btnStyle" id="joinUs" @click="contactToggle">JE VEUX PARTICIPER!</button>
+      <contactPannel v-show="contactActive" @close="contactToggle"></contactPannel>
+    </div>
+
+  </div>
 </template>
 
 <style scoped>
+
+  .alonePannel{
+    transform: translate(0);
+  }
+  /*=========Texture grain*/
+  .overlay{
+    inset:0;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    mix-blend-mode: multiply;
+    background-blend-mode: multiply;
+    z-index: 1;
+    opacity:0.333;
+  }
+
+  /*=========Main*/
+  #mainContainer{
+    position: fixed;
+    inset:0;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #titleContainer{
+    position: relative;
+    top: 0;
+    left: 0;
+    background-color: transparent;
+    height: 95%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  #windowContainer{
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 95%;
+    height: 90%;
+    border-style: solid;
+    border-radius: 16.1px;
+    border-color: var(--dark-color);
+    border-width: thin;
+    margin-bottom: 3.33%;
+  }
+
+  #imgContainer{
+    position:relative;
+    z-index:33;
+    width:100%;
+    height:65%;
+    background-color: transparent;
+  }
+
+  #textContainer{
+    position:relative;
+    z-index:33;
+    width:100%;
+    height:44.4%;
+    background-color: var(--dark-color);
+    border-radius: 0 0 16.1px 16.1px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+  }
+
+  /*==============Title*/
+  .titleText{
+    background-color: var(--dark-color);
+    width: 77%;
+    height: 50px;
+    color: var(--light-color);
+    font-family: 'PressStart2P';
+    font-size: 44.4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .numberTwo{
+    position:fixed;
+    top:44.4%;
+    right:3.33%;
+    width:40%;
+    height:auto;
+    fill: currentColor;
+    z-index:35;
+    animation: blink 10s infinite;
+  }
+
+  #drag{
+    position:fixed;
+    justify-content: flex-end;
+    top:40%;
+    right:1%;
+    z-index: 33;
+  }
+  #drag p{
+    position:absolute;
+    margin-top: 16.1px;
+    margin-right: 5px;
+  }
+
+  #nerd{
+    position:fixed;
+    justify-content: flex-start;
+    top:48%;
+    left:1%;
+    z-index: 34;
+  }
+  #nerd p{
+    position:absolute;
+    margin-top: 16.1px;
+    margin-left: 5px;
+  }
+
+  .smallerText{
+    font-family: 'lineal';
+    font-size: 16.1px;
+  }
+
+  /*==============Subitle*/
+  .descText{
+    text-align: left;
+    color: var(--light-color);
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    margin-left: 16.1px;
+    margin-right: 16.1px;
+    align-self: flex-start;
+  }
+
+  #descTextTop{
+    margin-top: 20px;
+  }
+
+  #subtitle{
+    font-size: 20px;
+    margin-left: 20px;
+  }
+
+  /*================Boutons en bas*/
+  #btnContainer{
+    position: relative;
+    background-color: transparent;
+    height: 7%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btnStyle{
+    position: relative;
+    height: 100%;
+    width: 33.3%;
+    border-style: solid;
+    border-width: thin;
+    border-radius: 16.1px;
+    border-color: var(--dark-color);
+    background-color: var(--accent-color-2);
+    color: var(--dark-color);
+    font-family: 'velvelyne';
+    font-weight: bold;
+    font-size: 13.12px;
+    margin-bottom: 3.33%;
+    margin-right: 1.61%;
+    margin-left: 1.61%;
+    cursor: pointer;
+  }
+
+  .btnStyle:hover{
+    background-color: var(--accent-color);
+  }
+
+  #joinUs{
+    animation: float 1s infinite;
+  }
+
+  /*============Format tel*/
+  @media(max-width:999px){
+    #windowContainer{
+      margin-top: 10%;
+      margin-left: 0;
+    }
+
+    #bottomInfo{
+      display: flex;
+      width:100%;
+      margin-left: 16.1px;
+      margin-right: 16.1px;
+      margin-top: 20px;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+  }
+
+  /*============Format pc étroit*/
+  @media(min-width:1000px){
+    .smallWidthBreaker{
+      visibility: hidden;
+    }
+
+    #mainContainer{
+      flex-direction: row;
+    }
+
+    #titleContainer{
+      height: 100%;
+      width: 80%;
+    }
+
+    /*===========Highlight WS*/
+    .alonePannel{
+      transform: translateX(-50%);
+    }
+
+    #windowContainer{
+      margin-top: 5vh;
+      margin-left: 10%;
+      width: 80%;
+      height: 80%;
+    }
+
+    #btnContainer{
+      height: 100%;
+      width: 20%;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 20vh;
+      margin-left: -50px;
+    }
+
+    .btnStyle{
+      height: 5%;
+      width: 80%;
+      margin-bottom: 5vh;
+    }
+
+
+    .titleText{
+      font-size: 75px;
+      width: 44%;
+      height: 77px;
+    }
+
+
+    #drag{
+      top:43%;
+      left:33.3%;
+    }
+    #drag p{
+      position:absolute;
+      margin-top: 16.1px;
+      margin-right: 20px;
+    }
+
+    #nerd{
+      top:54%;
+      left:25%;
+    }
+    #nerd p{
+      position:absolute;
+      margin-top: 16.1px;
+      margin-left: 20px;
+    }
+
+    #bottomInfo{
+      display: flex;
+      width:100%;
+      margin-left: 0;
+      flex-direction: column;
+      justify-content: flex-start;
+      margin-top: 20px;
+    }
+
+    .numberTwo{
+      top:50%;
+      right:21.5%;
+      width:25%;
+    }
+
+  }
+
+  /*============Format pc large*/
+  @media(min-width:1500px){
+    .titleText{
+      font-size: 87px;
+      width: 44%;
+      height: 77px;
+    }
+
+    #drag{
+      top:43%;
+      left:33.3%;
+    }
+    #drag p{
+      position:absolute;
+      margin-top: 16.1px;
+      margin-right: 20px;
+    }
+
+    #nerd{
+      top:55%;
+      left:25%;
+    }
+    #nerd p{
+      position:absolute;
+      margin-top: 16.1px;
+      margin-left: 20px;
+    }
+
+  }
 </style>
 
 <script>
   export default {
     name : 'App',
+    data(){
+      return{
+          aboutActive: false,
+          contactActive: false,
+          workshopActive: true,
+          workshopIsAlone: true
+      }
+    },
+    methods:{
+      aboutToggle(){
+        this.aboutActive = !this.aboutActive;
+        this.checkAlone();
+      },
+      contactToggle(){
+        this.contactActive = !this.contactActive;
+      },
+      workshopToggle(){
+        this.workshopActive = !this.workshopActive;
+      },
+      checkAlone(){
+        if(this.aboutActive === false){
+          this.workshopIsAlone = true;
+        }else{
+          this.workshopIsAlone = false;
+        }
+      }
+    },
     mounted(){
       console.log("Vue root app is fully loaded!");
     }
diff --git a/v0-appel-projet/src/assets/2.svg b/v0-appel-projet/src/assets/2.svg
new file mode 100644
index 0000000..56b506b
--- /dev/null
+++ b/v0-appel-projet/src/assets/2.svg
@@ -0,0 +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 409.66 304.5">
+  <path d="M2.79,304.5l34.12-87h43.5l17.06-43.5h43.5l17.06-43.5h87l17.06-43.5h43.5l17.06-43.5h-130.5l-17.06,43.5h-87l17.06-43.5h43.5L165.72,0h217.5l-17.06,43.5h43.5l-34.12,87h-43.5l-17.06,43.5h-43.5l-17.06,43.5h-87l-17.06,43.5h174l-17.06,43.5H2.79Z"/>
+</svg>
\ No newline at end of file
diff --git a/v0-appel-projet/src/assets/close.svg b/v0-appel-projet/src/assets/close.svg
new file mode 100644
index 0000000..3821cc9
--- /dev/null
+++ b/v0-appel-projet/src/assets/close.svg
@@ -0,0 +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 53.73 53.59">
+  <path d="M26.87,40.16l-13.43,13.43L0,40.16l13.43-13.43L.29,13.43,13.72,0l13.15,13.29L40.01.14l13.43,13.43-13,13.15,13.29,13.29-13.43,13.43-13.43-13.29Z"/>
+</svg>
\ No newline at end of file
diff --git a/v0-appel-projet/src/assets/noise.svg b/v0-appel-projet/src/assets/noise.svg
new file mode 100644
index 0000000..b2671f9
--- /dev/null
+++ b/v0-appel-projet/src/assets/noise.svg
@@ -0,0 +1,12 @@
+<!-- svg: first layer -->
+<svg viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'>
+  <filter id='noiseFilter'>
+    <feTurbulence
+      type='fractalNoise'
+      baseFrequency='333'
+      numOctaves='6'
+      stitchTiles='stitch'/>
+  </filter>
+
+  <rect width='100vw' height='100vh' opacity="1" filter='url(#noiseFilter)'/>
+</svg>
diff --git a/v0-appel-projet/src/assets/style.css b/v0-appel-projet/src/assets/style.css
index e69de29..d424b02 100644
--- a/v0-appel-projet/src/assets/style.css
+++ b/v0-appel-projet/src/assets/style.css
@@ -0,0 +1,164 @@
+/*====================Couleurs*/
+:root{
+  --light-color: #FFFFFFFF;
+  --dark-color: #000000FF;
+  --accent-color: #C303FFFF;
+  --accent-color-2: #00FF76FF;
+}
+
+/*====================Typo*/
+@font-face {
+  font-family: 'lineal';
+  src: url('./typo/Lineal-Heavy.ttf');
+}
+
+@font-face {
+  font-family: 'pressStart2P';
+  src: url('./typo/PressStart2P-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('./typo/Velvelyne-Light.ttf') format('truetype');
+  font-weight:lighter;
+}
+
+@font-face {
+  font-family: 'avara';
+  src: url('./typo/Avara-Black.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('./typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+/*====================App Racine Vue*/
+#app{
+  inset: 0;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  cursor: cell;
+  scrollbar-color: var(--accent-color-2) transparent;
+  scrollbar-width: thin;
+  background-size: 100% 100%;
+  background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
+  background-image:
+    radial-gradient(150px 150px at 15% 80%, var(--dark-color) 18%, var(--accent-color) 87%, transparent 100%),
+    radial-gradient(200px 200px at 33% 50%, var(--dark-color) 20%, var(--accent-color) 93%, transparent 99%),
+    radial-gradient(66% 100% at 0% 0%, var(--dark-color) 15%, var(--accent-color) 45%, var(--light-color) 64%, transparent 81%),
+    radial-gradient(150% 100% at 80% 0%, var(--dark-color) 0%, var(--accent-color) 0%, var(--light-color) 27%, transparent 100%),
+    radial-gradient(142% 91% at -6% 74%, var(--accent-color) 4%, transparent 99%),
+    radial-gradient(142% 200% at 83% 77%, var(--dark-color) 20%, var(--accent-color) 39%, var(--light-color) 69%);
+}
+
+/*===================Desact. Default*/
+input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+a{
+  text-decoration: none;
+}
+
+/*===================Animation*/
+@keyframes blink {
+  0%   { color: var(--accent-color);}
+  15%  { color: var(--accent-color-2);}
+  35%  { color: var(--accent-color-2);}
+  50%  { color: var(--accent-color);}
+  65%  { color: var(--accent-color-2);}
+  85%  { color: var(--accent-color-2);}
+  100%  { color: var(--accent-color);}
+}
+
+@keyframes blinkBack {
+  0%   { background-color: var(--accent-color);}
+  15%  { background-color: var(--accent-color-2);}
+  35%  { background-color: var(--accent-color-2);}
+  50%  { background-color: var(--accent-color);}
+  65%  { background-color: var(--accent-color-2);}
+  85%  { background-color: var(--accent-color-2);}
+  100%  { background-color: var(--accent-color);}
+}
+
+@keyframes float {
+  0%   { transform: translateY(0px); }
+  35%  { transform: translateY(1px); }
+  50%  { transform: translateY(-10px); }
+  65%  { transform: translateY(1px); }
+  100% { transform: translateY(0px); }
+}
+/*===================Classes générales*/
+
+.windowStyle{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: var(--light-color);
+  border-style: solid;
+  border-width: thin;
+  border-radius: 16.1px;
+  border-color: var(--dark-color);
+}
+
+.windowTitle{
+  width:100%;
+  height:50px;
+  background-color: var(--dark-color);
+  border-radius: 16.1px 16.1px 0 0;
+  font-family: 'lineal';
+  font-size: 16.1px;
+  color: var(--light-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.windowTitleLower{
+  font-family: 'velvelyne';
+  font-weight: lighter;
+  font-size: 13.12px;
+}
+
+.closeBtn{
+  color: var(--light-color);
+  background-color: var(--dark-color);
+  border-style: solid;
+  border-width: thin;
+  border-radius: 16.1px;
+  border-color: var(--light-color);
+  width: 50px;
+  height: 33px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.closeBtn:hover{
+  color: var(--dark-color);
+  background-color: var(--light-color);
+}
+
+.icon{
+  height:16.1px;
+  width:auto;
+  fill: currentColor;
+}
+
+.windowContent{
+  height:77%;
+  width:100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
diff --git a/v0-appel-projet/src/components/AboutPannel.vue b/v0-appel-projet/src/components/AboutPannel.vue
new file mode 100644
index 0000000..106c463
--- /dev/null
+++ b/v0-appel-projet/src/components/AboutPannel.vue
@@ -0,0 +1,95 @@
+<script setup>
+  import CloseIcon from '../assets/close.svg'
+</script>
+
+<template>
+  <div id="aboutContainer" class="windowStyle">
+    <div class="windowTitle">
+      <p>
+        <b class="windowTitleLower">À Propos du collectif</b>
+        <br>
+        Drags and Nerds:
+      </p>
+      <button type="button" class="closeBtn" @click="$emit('close')">
+        <CloseIcon name="close" class="icon"/>
+      </button>
+    </div>
+    <div class="windowContent">
+      <div id="aboutText">
+        <div>
+          Nous sommes un collectif antifasciste, nous sommes opposéxs à toute forme d’oppression et <b id="accentAbout">nous condamnons:</b>
+          <p id="accentAbout">
+            &gt; le racisme
+            <br>
+            &gt; la misogynie
+            <br>
+            &gt; les queerphobies
+            <br>
+            &gt; la grossophobie
+            <br>
+            &gt; le validisme
+            <br>
+            &gt; le classisme
+            <br>
+            &gt; la putophobie
+          </p>
+          On veut que nos soirées soient centrées autour de l’inclusivité : chacunx doit s’y sentir bien, nous voulons créer du lien entre les différentes communautés (nerds,  LGBTQIA+, les personnes racisées, les personnes handi, les bricoleuxes, les personnes précaires etc…)
+          <br>
+          Pour cette raison, nous imposons notamment <b id="accentAbout">le port du masque FFP2 pour toutes les activités se déroulant à l'intérieur.</b>
+          <br>
+          On veut aussi que nos soirées soient respectueuses de l’environnement (il faut utiliser un maximum de matériaux de récupérations) et véganes (pas de vente de produits d’origine animale).
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  #aboutContainer{
+    width: 95%;
+    height: 30%;
+    position: fixed;
+    top: 38%;
+    left: 2.5%;
+    z-index: 66;
+    cursor: ns-resize;
+  }
+
+  #aboutText{
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    padding-left: 10px;
+    padding-right: 15px;
+    padding-top: 10px;
+    text-align: left;
+    color: var(--dark-color);
+    font-weight: bold;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+  }
+
+  #accentAbout{
+    font-family: 'lineal';
+    font-size: 21px;
+  }
+  /*=======================Format PC*/
+  @media(min-width: 1000px){
+    #aboutContainer{
+      width: 20%;
+      height: 50%;
+      top: 3.33%;
+      left: 3.33%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'AboutPannel',
+    emits:['close'],
+    mounted(){
+      console.log("About pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v0-appel-projet/src/components/ContactPannel.vue b/v0-appel-projet/src/components/ContactPannel.vue
new file mode 100644
index 0000000..9623d7e
--- /dev/null
+++ b/v0-appel-projet/src/components/ContactPannel.vue
@@ -0,0 +1,131 @@
+<script setup>
+  import CloseIcon from '../assets/close.svg'
+</script>
+
+<template>
+  <div id="contactContainer" class="windowStyle">
+    <div class="windowTitle">
+      <p>Contacts:</p>
+      <button type="button" class="closeBtn" @click="$emit('close')">
+        <CloseIcon name="close" class="icon"/>
+      </button>
+    </div>
+    <div class="windowContent" id="contactContent">
+      <div id="contactCardContainer">
+        <a href="#" class="contactLink">
+          <div class="contactCard">
+            <div id="contactName">Urazoria</div>
+            <div id="contactField">Perf Drag</div>
+          </div>
+        </a>
+        <a href="#" class="contactLink">
+          <div class="contactCard">
+            <div id="contactName">Kiwi</div>
+            <div id="contactField">Perf Nerds</div>
+          </div>
+        </a>
+        <a href="#" class="contactLink">
+          <div class="contactCard">
+            <div id="contactName">Vega</div>
+            <div id="contactField">Scéno</div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+  #contactCardContainer{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    width:95%;
+    height:91%;
+    margin-top: 1%;
+  }
+
+  .contactCard{
+    width:100%;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: left;
+    color: var(--dark-color);
+    font-weight: bold;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+    border-style: solid;
+    border-color: var(--dark-color);
+    border-width: thin;
+    border-radius: 13.12px;
+  }
+
+  .contactCard:hover{
+    animation: blinkBack 10s infinite;
+  }
+
+  .contactLink{
+    position:relative;
+    width: 100%;
+    height:100%;
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-around;
+  }
+
+  #contactContainer{
+    width: 95%;
+    height: 22.2%;
+    position: fixed;
+    top: 68.8%;
+    left: 2.5%;
+    z-index: 66;
+  }
+
+  #contactField{
+    font-family: 'lineal';
+    font-size: 20px;
+  }
+
+  #contactContent{
+    position:relative;
+    height:100%;
+  }
+  /*=======================Format PC*/
+  @media(min-width: 1000px){
+    #contactContainer{
+      width: 20%;
+      height: 55%;
+      top: 40%;
+      left: 79%;
+    }
+
+    #contactCardContainer{
+      flex-direction: column;
+      margin-top: 3.33%;
+    }
+
+    .contactCard{
+      width: 93%;
+    }
+    .contactLink{
+      margin-bottom: 5%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'ContactPannel',
+    emits:['close'],
+    mounted(){
+      console.log("Contact pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v0-appel-projet/src/components/WorkshopPannel.vue b/v0-appel-projet/src/components/WorkshopPannel.vue
new file mode 100644
index 0000000..a855d41
--- /dev/null
+++ b/v0-appel-projet/src/components/WorkshopPannel.vue
@@ -0,0 +1,116 @@
+<script setup>
+  import CloseIcon from '../assets/close.svg'
+</script>
+
+<template>
+  <div id="workshopContainer" class="windowStyle">
+    <div class="windowTitle">
+      <p>
+        Atelier Drags and Nerds 1/3
+      </p>
+      <button type="button" class="closeBtn" @click="$emit('close')">
+        <CloseIcon name="close" class="icon"/>
+      </button>
+    </div>
+    <div class="windowContent">
+      <div id="workshopText">
+          <p>
+              A toutes les drags, tous les nerds et l'ensemble des personnes entre les deux !<br/>
+              Vous êtes invité·es à participer aux ateliers meetup Drags&Nerds !
+          </p>
+          <p>
+              Le premier atelier meetup c'est le <strong id="accentWS"><time datetime="2026-03-21">21 Mars 2026</time> <br>
+                au <a href="https://labolyon.fr">Laboratoire Ouvert Lyonnais</a></strong><br>7 Place Louis Chazette 69001 Lyon
+          </p>
+          <p>
+              Que vous aimiez dessiner, coudre et crafter des costumes à paillettes.
+              Coder, souder, clouer, imprimer en 3D ou en 2D...
+              Que votre truc ce soit d'écrire des histoires toutes plus queer les unes que les autres, des poèmes lyriques ou encore du code source.
+              Drags&Nerds c'est tout ça et bien plus.
+          </p>
+          <p>
+              Pendant les ateliers, on prépare nos performances pour le grand drag show du <time datetime="2026-05-22">22 Mai 2026</time> au Grrrnd Zero.<br/>
+              On construit des scenes, des histoires, des makeups et des costumes.
+              On met tout en place pour que le 22 mai prochain, on puisse briller sur la grande scène du Grrrnd Zero.
+          </p>
+          <p>
+              Tu as envie de faire du lips sync ? De jouer de ton synthé ?
+              Ou juste de donner un coup de pouce a des drags pour leurs show.
+              Il y a une place pour toi.
+          </p>
+          <p>
+              <strong id="accentWS">Venez, quelque soit votre intérêt spécifique.</strong>
+          </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  /*
+  <div style="margin-left: -3rem; width: calc(100% + 3rem); text-align: center; margin-top: 3rem;">
+      <p style="font-size: 1.2em; font-weight: bold; padding: 0;">
+          <a style="display: block; text-align: center;" href="https://drags-nerds.net/">drags-nerds.net</a>
+      </p>
+      <script type="module" src="https://esm.sh/webcomponent-qr-code"></script>
+      <qr-code data="https://drags-nerds.net/"></qr-code>
+  </div>
+  */
+  #workshopContainer{
+    width: 95%;
+    height: 36%;
+    position: fixed;
+    top: 1.61%;
+    left: 2.5%;
+    z-index: 66;
+    cursor: ns-resize;
+  }
+  a{
+    color: var(--accent-color);
+    cursor: pointer;
+  }
+
+  #workshopText{
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    padding-left: 10px;
+    padding-right: 15px;
+    text-align: left;
+    color: var(--dark-color);
+    font-weight: bold;
+    font-family: 'velvelyne';
+    font-size: 16.1px;
+  }
+
+  #accentWS{
+    font-family: 'lineal';
+    font-size: 21px;
+  }
+
+  #workshopText > p:first-of-type {
+      background: black;
+      color: var(--dark-color);
+      margin-top: 3.33px;
+      padding-left: 3.33px;
+      animation: blinkBack 10s infinite;
+  }
+  /*=======================Format PC*/
+  @media(min-width: 1000px){
+    #workshopContainer{
+      width: 44.4%;
+      height: 33.3%;
+      top: 3.33%;
+      left: 25%;
+    }
+  }
+</style>
+
+<script>
+  export default {
+    name : 'WorkshopPannel',
+    emits:['close'],
+    mounted(){
+      console.log("Workshop pannel pannel is loaded!");
+    }
+  };
+</script>
diff --git a/v0-appel-projet/src/main.js b/v0-appel-projet/src/main.js
index 734ff1b..8d9b7d5 100644
--- a/v0-appel-projet/src/main.js
+++ b/v0-appel-projet/src/main.js
@@ -4,13 +4,18 @@ import './assets/style.css'
 // import app vue racine
 import App from './App.vue'
 // import composants
-
+import AboutPannel from './components/AboutPannel.vue'
+import ContactPannel from './components/ContactPannel.vue'
+import WorkshopPannel from './components/WorkshopPannel.vue'
 
 
 // création app racine
 const app = createApp(App);
 
 //Composants
+app.component('aboutPannel', AboutPannel);
+app.component('contactPannel', ContactPannel);
+app.component('workshopPannel', WorkshopPannel);
 
 
 
diff --git a/v0-appel-projet/vite.config.js b/v0-appel-projet/vite.config.js
index e21a0ad..7a24acc 100644
--- a/v0-appel-projet/vite.config.js
+++ b/v0-appel-projet/vite.config.js
@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import svgLoader from 'vite-svg-loader'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), svgLoader()],
   server: {
     host: '0.0.0.0',
     port: 8080,