diff --git a/apps/front/components.d.ts b/apps/front/components.d.ts
index 4edc351..4a30504 100644
--- a/apps/front/components.d.ts
+++ b/apps/front/components.d.ts
@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    Panel: typeof import('primevue/panel')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/apps/front/src/component/Hero/Hero.vue b/apps/front/src/component/Hero/Hero.vue
index 8cfe4e9..5f05c4c 100644
--- a/apps/front/src/component/Hero/Hero.vue
+++ b/apps/front/src/component/Hero/Hero.vue
@@ -26,10 +26,12 @@ const indexStore = useIndexStore();
 </template>
 
 <style lang="scss">
+@import '../../var.scss';
+
 .coverPage {
     height: 100vh;
-    background-color: #1b203a;
-    color: #f2f4f3;
+    background-color: $color-bgCover;
+    color: $color-textCover;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -56,9 +58,9 @@ const indexStore = useIndexStore();
 
 .ico-cover {
     font-size: 38px;
-    color: #f2f4f3;
+    color: $color-textCover;
     border-radius: 50%;
-    border: 1px solid #f2f4f3;
+    border: 1px solid $color-textCover;
     padding: 5px;
     margin: 5px;
 }
@@ -72,6 +74,6 @@ const indexStore = useIndexStore();
     margin-right: auto;
     width: 30px;
     font-size: 30px;
-    color: #f2f4f3;
+    color: $color-textCover;
 }
 </style>
\ No newline at end of file
diff --git a/apps/front/src/helper/index.ts b/apps/front/src/helper/index.ts
index 2df70a9..01df39b 100644
--- a/apps/front/src/helper/index.ts
+++ b/apps/front/src/helper/index.ts
@@ -1,2 +1,6 @@
 export const AreWeHome = () =>
   window.location.pathname === '/' ? true : false;
+
+export const getMediaApiUrl = (path: string) => {
+  return `${import.meta.env.VITE_API_URL as string}/api/media?path=${path}`;
+};
diff --git a/apps/front/src/main.ts b/apps/front/src/main.ts
index 5f54487..75a41a4 100644
--- a/apps/front/src/main.ts
+++ b/apps/front/src/main.ts
@@ -1,3 +1,4 @@
+import './styles.scss';
 import { createApp, markRaw } from 'vue';
 import { createPinia } from 'pinia';
 import type { Router } from 'vue-router';
@@ -7,7 +8,6 @@ import Aura from '@primevue/themes/aura';
 import App from './views/App.vue';
 import router from './router';
 import { client } from '@portfolio/api-client';
-import './styles.scss';
 
 client.setConfig({
   baseURL: import.meta.env.VITE_API_URL as string,
diff --git a/apps/front/src/styles.scss b/apps/front/src/styles.scss
index 74795ce..14820b4 100644
--- a/apps/front/src/styles.scss
+++ b/apps/front/src/styles.scss
@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import './var.scss';
+
 html, body, #root {
   margin: 0;
 }
@@ -23,4 +25,4 @@ html{
 .ico-template {
   font-size: 32px;
   color: black;
-}
+}
\ No newline at end of file
diff --git a/apps/front/src/var.scss b/apps/front/src/var.scss
new file mode 100644
index 0000000..349d2c6
--- /dev/null
+++ b/apps/front/src/var.scss
@@ -0,0 +1,23 @@
+// Color
+
+$color-bgCover: #1b203a;
+$color-bgCoverTransparent: #1b203a8a;
+$color-bgCoverLighter: #21284d ;
+$color-textCover: #f2f4f3;
+$color-textCoverDarker: #b5bdb9;
+
+// Breakpoint
+
+$md: 768px;
+
+// Nav position
+$anime-timer: 0.3s;
+$anime-timerBurger: 0.3s;
+$spinInDeg: 180deg;
+$spinOutDeg: 0deg;
+
+$inPosition: 3%;
+$outPosition: -50%;
+
+$margin: 5%;
+$size: 80%;
\ No newline at end of file
diff --git a/apps/front/src/views/HomeView.vue b/apps/front/src/views/HomeView.vue
index 3c578fd..9727667 100644
--- a/apps/front/src/views/HomeView.vue
+++ b/apps/front/src/views/HomeView.vue
@@ -1,9 +1,38 @@
 <script setup lang="ts">
-
+import { useIndexStore } from '../stores';
+import { getMediaApiUrl } from '../helper/index.ts';
+import IcoOrMedia from '../component/helper/IcoOrMedia.vue';
+const indexStore = useIndexStore();
 </script>
 
 <template>
-    <div class="container">
-        <h1 v-for="truc in [...Array(100).keys()]" :key="truc">Home {{ truc }}</h1>
+    <div v-if="indexStore.inited" class="homePageContainer">
+        <Panel header="Qui suis je ?">
+            <p class="m-0">{{ indexStore.homeContent.presentation }}</p>
+        </Panel>
+        <div class="homePageCvContainer">
+            <a :href="getMediaApiUrl(indexStore.homeContent.cvUrl)" target="_blank" rel="noreferrer" class="homePageCV">
+                Mon CV
+                <IcoOrMedia media="ico#download" className="ml-2" />
+            </a>
+        </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
+<style lang="scss">
+@import '../var.scss';
+
+.homePageContainer {
+    @apply flex justify-center flex-col;
+}
+
+.homePageCV {
+    @apply border-2 rounded-full px-5 py-2;
+    background-color: $color-bgCover;
+    color: $color-textCover;
+}
+
+.homePageCvContainer {
+    @apply my-8 flex justify-center;
+}
+</style>
\ No newline at end of file
diff --git a/folio_content/content/home.yaml b/folio_content/content/home.yaml
index 2f6b0da..0ef6a71 100644
--- a/folio_content/content/home.yaml
+++ b/folio_content/content/home.yaml
@@ -14,7 +14,7 @@ coverTitle:
 - Architecture.
 - Too much coffee.
 - And lot's more.
-cvUrl: /media/cv.pdf
+cvUrl: cv.pdf
 url:
 - name: GitHub
   url: https://github.com/batleforc
diff --git a/folio_content/media/cv.pdf b/folio_content/media/cv.pdf
new file mode 100644
index 0000000..791f10f
Binary files /dev/null and b/folio_content/media/cv.pdf differ