diff --git a/settings/Modules.ts b/settings/Modules.ts
index a8b7f60..1b0d5b6 100644
--- a/settings/Modules.ts
+++ b/settings/Modules.ts
@@ -32,7 +32,7 @@ const i18n = {
 
 const content = {
   apiPrefix: 'api',
-  nestedProperties: ['categories.slug'],
+  nestedProperties: ['skills.slug'],
   markdown: {
     prism: {
       theme: 'prism-themes/themes/prism-darcula.css'
diff --git a/src/assets/images/works/artapi.png b/src/assets/images/projects/artapi.png
similarity index 100%
rename from src/assets/images/works/artapi.png
rename to src/assets/images/projects/artapi.png
diff --git a/src/assets/images/works/artclick.png b/src/assets/images/projects/artclick.png
similarity index 100%
rename from src/assets/images/works/artclick.png
rename to src/assets/images/projects/artclick.png
diff --git a/src/assets/images/works/artsite.png b/src/assets/images/projects/artsite.png
similarity index 100%
rename from src/assets/images/works/artsite.png
rename to src/assets/images/projects/artsite.png
diff --git a/src/assets/images/works/erisium.png b/src/assets/images/projects/erisium.png
similarity index 100%
rename from src/assets/images/works/erisium.png
rename to src/assets/images/projects/erisium.png
diff --git a/src/components/AdHome.vue b/src/components/AdHome.vue
index 8ef8e5e..976a2dc 100644
--- a/src/components/AdHome.vue
+++ b/src/components/AdHome.vue
@@ -4,7 +4,7 @@
       <nuxt-link to="/uses" class="h-48 md:w-1/3">
         <Ad color="rose" class="h-full w-full flex flex-col justify-between">
           <div>
-            <h1 class="font-bold text-black text-3xl">
+            <h1 class="font-bold text-black text-4xl">
               Usages
             </h1>
             <p class="text-lg text-gray-700 mt-4">
diff --git a/src/components/Post.vue b/src/components/Post.vue
index a299ca4..aec2842 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -1,6 +1,6 @@
 <template>
   <nuxt-link :to="`/blog/${slug}`">
-    <div class="rounded-lg shadow-lg h-116 w-full lg:w-100 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
+    <div class="rounded-lg shadow-xl h-116 w-full lg:w-100 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
       <div class="h-2/5 post rounded-t-lg"
            :style="{ backgroundImage: `url(${getBackgroundCover})` }">
       </div>
diff --git a/src/components/Project.vue b/src/components/Project.vue
index d18ca3a..f9b6e6b 100644
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -1,17 +1,21 @@
 <template>
   <nuxt-link :to="`/projects/${slug}`">
-    <div class="rounded-lg shadow-lg w-full md:w-72 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-4 lg:mb-0">
-      <div class="h-40 post rounded-t-lg"
-           :style="{ backgroundImage: `url(${getBackgroundCover})` }">
+    <div class="rounded-lg shadow-xl h-94 w-full lg:w-84 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 lg:mb-0">
+      <div class="h-2/5 post rounded-t-lg flex justify-center">
+        <img :src="getCover" alt="Project Image" class="h-full"/>
       </div>
-      <div class="p-4 flex flex-col justify-between">
-        <h1 class="text-xl font-bold">
-          {{ title }}
-        </h1>
-        <div class="flex space-x-2 mt-2">
-          <div v-for="tag in tags">
-            <Tag :content="tag" :pill="false"/>
+      <div class="h-3/5 p-4 flex flex-col justify-between">
+        <div>
+          <div class="flex space-x-2 mb-2">
+            <div v-for="tag in tags">
+              <Tag :content="tag" :pill="false"/>
+            </div>
           </div>
+          <h1 class="text-2xl font-bold">{{ title }}</h1>
+          <p class="text-base mt-3 text-gray-700 dark:text-gray-400 text-justify">{{ $t(description) }}</p>
+        </div>
+        <div class="flex justify-between">
+          <h5 class="text-base text-gray-700 dark:text-gray-400">{{ company }}</h5>
         </div>
       </div>
     </div>
@@ -24,11 +28,11 @@ import {computed} from "@nuxtjs/composition-api";
 
 interface ProjectProp {
   title: string,
-  description: string,
   cover: string,
   slug: string,
-  color: string,
-  url: string
+  company: string,
+  tags: Array<String>,
+  description: string,
 }
 
 export default {
@@ -46,9 +50,13 @@ export default {
       type: String,
       default: "slug"
     },
-    color: {
+    description: {
       type: String,
-      default: "red"
+      default: "Description"
+    },
+    company: {
+      type: String,
+      default: "Company"
     },
     tags: {
       type: Array,
@@ -56,10 +64,10 @@ export default {
     }
   },
   setup(props: ProjectProp) {
-    const getBackgroundCover = computed(() => require(`@/assets/images/works/artapi.png`))
+    const getCover = computed(() => require(`@/assets/images/projects/${props.cover}`))
 
     return {
-      getBackgroundCover
+      getCover
     }
   }
 }
@@ -69,6 +77,7 @@ export default {
 .project {
   background-position: center;
   background-size: cover;
+  background-repeat: no-repeat;
   @apply bg-opacity-50;
 }
 </style>
diff --git a/src/components/ProjectsHome.vue b/src/components/ProjectsHome.vue
index 54a4db2..4b02ae8 100644
--- a/src/components/ProjectsHome.vue
+++ b/src/components/ProjectsHome.vue
@@ -13,9 +13,11 @@
         <div v-for="project in projects">
           <Project
             :title="project.title"
-            :description="project.description"
-            :color="project.color"
             :cover="project.cover"
+            :description="project.description"
+            :slug="project.slug"
+            :tags="project.tags"
+            :company="project.company"
           />
         </div>
       </div>
diff --git a/src/components/StrategyHome.vue b/src/components/StrategyHome.vue
index e148d0a..e10f713 100644
--- a/src/components/StrategyHome.vue
+++ b/src/components/StrategyHome.vue
@@ -16,20 +16,20 @@
         <div class="flex justify-center w-full md:w-1/2">
           <div class="flex flex-col space-y-6 w-full">
             <StrategyPart
-              title="#1. Brainstorming"
-              description="Je realise blablabla Je realise blablabla Je realise blablabla Je realise blablabla"
+              title="home.strategy.1.title"
+              description="home.strategy.1.description"
             />
             <StrategyPart
-              title="#2. Conception"
-              description="Je realise blablabla"
+              title="home.strategy.2.title"
+              description="home.strategy.2.description"
             />
             <StrategyPart
-              title="#3. Developpement"
-              description="Je realise blablabla"
+              title="home.strategy.3.title"
+              description="home.strategy.3.description"
             />
             <StrategyPart
-              title="#4. Livraison"
-              description="Je realise blablabla"
+              title="home.strategy.4.title"
+              description="home.strategy.4.description"
             />
           </div>
         </div>
diff --git a/src/components/StrategyPart.vue b/src/components/StrategyPart.vue
index 79a0fd4..74ff30d 100644
--- a/src/components/StrategyPart.vue
+++ b/src/components/StrategyPart.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <h1 class="font-bold text-2xl">
-      {{ title }}
+      {{ $t(title) }}
     </h1>
     <p class="text-gray-700 dark:text-gray-400 text-base text-justify">
-      {{ description }}
+      {{ $t(description) }}
     </p>
   </div>
 </template>
diff --git a/src/locales/en-EN.ts b/src/locales/en-EN.ts
index 9fc6d71..8b5b9a2 100644
--- a/src/locales/en-EN.ts
+++ b/src/locales/en-EN.ts
@@ -28,7 +28,7 @@ export default {
     blog: 'My Blog',
     work: 'My Work',
     contact: 'Contact me',
-    about_description: 'Learn more about me, how I work and who I am',
+    about_description: 'Learn more about me, how I projects and who I am',
     blog_description: 'I write articles about my life, development and my passions',
     work_description: 'Discover my creations to get an idea of my skills',
     contact_description: 'Find all my social networks to contact me'
@@ -40,6 +40,24 @@ export default {
       hello: 'Hello, I am',
       description: 'I am a {age} year old self-taught developer. I live in Paris 🇫🇷. I love creating more or less useful applications and software. I use modern technologies to get the best possible result ✨',
     },
+    strategy: {
+      1: {
+        title: '#1. Brainstorming',
+        description: 'Test 1'
+      },
+      2: {
+        title: '#2. Design',
+        description: 'Test 2'
+      },
+      3: {
+        title: '#3. Development',
+        description: 'Test 3'
+      },
+      4: {
+        title: '#4. Delivery',
+        description: 'Test 4'
+      }
+    }
   },
 
   blog: {
@@ -154,13 +172,13 @@ export default {
     },
     how_to: {
       title: 'How to contact me? ✉',
-      description: 'Please don\'t hesitate to contact me if you have any questions, think we could work together or if you just want to chat ✌️'
+      description: 'Please don\'t hesitate to contact me if you have any questions, think we could projects together or if you just want to chat ✌️'
     },
     available: {
       title: 'Am I available? 🚩',
-      description: 'This status will be updated in real time to let you know if I am available for work.',
+      description: 'This status will be updated in real time to let you know if I am available for projects.',
       start: 'I am currently',
-      end: 'for work'
+      end: 'for projects'
     }
   },
 
diff --git a/src/locales/fr-FR.ts b/src/locales/fr-FR.ts
index 920c850..12164df 100644
--- a/src/locales/fr-FR.ts
+++ b/src/locales/fr-FR.ts
@@ -26,11 +26,12 @@ export default {
   part: {
     about: 'A Propos',
     blog: 'Mon Blog',
-    work: 'Mon Travail',
+    projects: 'Mes Projets',
     contact: 'Me Contacter',
+    uses: 'Mes Usages',
     about_description: 'Apprenez en plus à mon propos, comment je travaille et qui je suis',
     blog_description: 'Je rédige des articles concernant ma vie, le développement et mes passions',
-    work_description: 'Découvrez mes créations pour avoir une idée de mes compétences',
+    projects_description: 'Découvrez mes créations pour avoir une idée de mes compétences',
     contact_description: 'Retrouvez tous mes réseaux sociaux pour me contacter'
   },
 
@@ -40,6 +41,24 @@ export default {
       hello: 'Bonjour, je suis',
       description: 'Je suis un jeune développeur autodidacte de {age} ans. J\'habite à Paris 🇫🇷. J\'adore créer des applications et des logiciels plus ou moins utiles. J\'utilise des technologies modernes pour obtenir le meilleur résultat possible ✨',
     },
+    strategy: {
+      1: {
+        title: '#1. Brainstorming',
+        description: 'Test 1'
+      },
+      2: {
+        title: '#2. Conception',
+        description: 'Test 2'
+      },
+      3: {
+        title: '#3. Developpement',
+        description: 'Test 3'
+      },
+      4: {
+        title: '#4. Livraison',
+        description: 'Test 4'
+      }
+    }
   },
 
   blog: {
@@ -132,8 +151,8 @@ export default {
     }
   },
 
-  work: {
-    no_work: 'Malheureusement il n\'y a pas encore de projets disponibles. Reviens plus tard 😉',
+  projects: {
+    no_project: 'Malheureusement il n\'y a pas encore de projets disponibles. Reviens plus tard 😉',
     description: 'Voici les différents projets auxquels j\'ai pu participer dans mon passé !',
     tech_used: 'Listes des compétences utilisées',
     go_back: 'Retour en arrière'
diff --git a/src/pages/about.vue b/src/pages/about.vue
index 28b123b..f455536 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -19,12 +19,17 @@
 
 <script lang="ts">
 
+import {useContext, useMeta} from "@nuxtjs/composition-api";
+
 export default {
   name: "about",
-  head() {
-    return {
-      title: 'About me - Arthur Danjou'
-    }
+  head() {},
+  setup() {
+    const { i18n } = useContext()
+
+    useMeta({
+      title: `${i18n.t('header.about')} - Arthur Danjou`
+    })
   }
 }
 </script>
diff --git a/src/pages/work/_slug.vue b/src/pages/projects/_slug.vue
similarity index 62%
rename from src/pages/work/_slug.vue
rename to src/pages/projects/_slug.vue
index 7a26ae9..8fba9da 100644
--- a/src/pages/work/_slug.vue
+++ b/src/pages/projects/_slug.vue
@@ -1,40 +1,40 @@
 <template>
-  <main class="px-5 xl:px-64 mb-16 md:mb-32">
+  <main v-if="project" class="px-5 xl:px-64 mb-16 md:mb-32">
     <div class="w-full flex flex-col lg:flex-row items-center md:items-start mt-8 md:mt-32">
       <div class="w-full lg:w-1/2 flex flex-col items-center">
         <div class="md:mb-24">
           <div class="mb-4 flex">
-            <nuxt-link to="/work" class="back-arrow flex">
+            <nuxt-link to="/projects" class="back-arrow flex">
               <div class="duration-300 arrow">
                 <svg height="25" width="25" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                 </svg>
               </div>
               <div class="ml-2">
-                {{ $t('work.go_back') }}
+                {{ $t('projects.go_back') }}
               </div>
             </nuxt-link>
           </div>
         </div>
-        <img class="w-72 rounded-xl" :src="require(`@/assets/images/works/${work.cover}.png`)" alt="Project Img" />
+        <img class="w-72 rounded-xl" :src="require(`@/assets/images/projects/${project.cover}`)" alt="Project Img" />
         <a
           class="mt-4 py-3 px-6 rounded-full cursor-pointer duration-300 mb-10 lg:mb-0"
           :class="getColor"
-          :href="work.url"
-        >{{work.url.replace('https://', '').replace('http://', '')}}</a>
+          :href="project.url"
+        >{{project.url.replace('https://', '').replace('http://', '')}}</a>
       </div>
       <div class="w-full lg:w-1/2 ml-5 ">
-        <h1 class="text-xl lg:text-3xl font-bold">
-          {{ work.title }}
+        <h1 @click="debug" class="text-xl lg:text-3xl font-bold">
+          {{ project.title }}
         </h1>
         <p class="mt-5 mb-10 text-md lg:text-lg text-gray-900 dark:text-dark-100">
-          {{ $t(work.description) }}
+          {{ $t(project.description) }}
         </p>
         <div>
           <h3 class="text-md lg:text-lg font-bold">
-            {{ $t('work.tech_used') }}
+            {{ $t('projects.tech_used') }}
           </h3>
-          <div class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
+          <div v-if="skills && skills.length > 0" class="flex flex-row w-full overflow-x-auto md:overflow-x-hidden md:flex-wrap space-x-4 md:space-x-0 md:justify-start">
             <div v-for="skill in skills">
               <WorkSkill
                 :skill="skill.title"
@@ -49,42 +49,55 @@
   </main>
 </template>
 
-<script>
-import WorkSkill from "~/components/WorkSkill";
+<script lang="ts">
+import {
+  computed, onUpdated, useAsync, useContext,
+  useMeta,
+  useRoute,
+  useStatic, watch, watchEffect,
+} from "@nuxtjs/composition-api";
+import {Project, Skill} from "../../../@types/types";
+import {IContentDocument} from "@nuxt/content/types/content";
 
 export default {
-  components: {WorkSkill},
-  head() {
-    return {
-      title: 'Work - Arthur Danjou'
-    }
-  },
-  data() {
-    return {
-      work: null
-    }
-  },
-  async asyncData({ params, $content, error }) {
-    const work = await $content('works', params.slug)
-      .fetch()
-      .catch(() => {
-        error({
-          statusCode: 404,
-          message: 'Work not found',
+  head: {},
+  setup() {
+    const {$content, app, i18n} = useContext()
+    const route = useRoute()
+    const slug = computed(() => route.value.params.slug)
+
+    const project = useStatic((slug) => {
+      return $content('projects', slug)
+        .fetch<Project>()
+        .catch(() => {
+          app.error({statusCode: 404, message: "Project not found"})
+        }) as Promise<Project>
+    }, slug, 'projects')
+
+    const skills = useAsync(() => {
+      return $content('skills')
+        .where({
+          slug: {
+            $in: project.value?.skills
+          }
         })
-      });
-    let skills = []
-    if (work) {
-      skills = await $content('skills').where({ slug: { $in: work.skills } }).fetch()
+        .fetch<Skill>()
+        .catch(() => {
+          app.error({statusCode: 404, message: "Skills in project not found"});
+        }) as Promise<Skill>
+    })
+
+    useMeta({
+      title: `${i18n.t('header.projects')} - Arthur Danjou - ${project.value?.title}`
+    })
+
+    const debug = () => {
+      console.log(project)
+      console.log(skills)
     }
-    return {
-      work,
-      skills
-    }
-  },
-  computed: {
-    getColor() {
-      switch (this.work.color) {
+
+    const getColor = computed(() => {
+      switch (project.value?.color) {
         case 'red':
           return 'bg-red-400 hover:bg-red-600'
         case 'orange':
@@ -134,6 +147,13 @@ export default {
         case 'coolGray':
           return 'bg-coolGray-400 hover:bg-coolGray-600'
       }
+    })
+
+    return {
+      project,
+      skills,
+      getColor,
+      debug
     }
   }
 }
diff --git a/src/pages/projects/index.vue b/src/pages/projects/index.vue
new file mode 100644
index 0000000..2570ff5
--- /dev/null
+++ b/src/pages/projects/index.vue
@@ -0,0 +1,57 @@
+<template>
+  <main v-if="projects" class="work flex flex-col items-center">
+    <PageTitle
+      title="part.projects"
+    >
+      <svg class="inline-block icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+      </svg>
+    </PageTitle>
+    <h1 v-if="projects.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('projects.no_project') }}</h1>
+    <div v-else class="flex flex-col justify-around items-center py-10 w-full">
+      <h1 class="text-xl font-bold text-center mb-8">{{ $t('projects.description') }}</h1>
+      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
+        <div class="flex py-8 w-full flex-wrap" >
+          <div class="md:mx-3 my-2" v-for="project in projects">
+            <Project
+              :title="project.title"
+              :cover="project.cover"
+              :description="project.description"
+              :slug="project.slug"
+              :tags="project.tags"
+              :company="project.company"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import {useAsync, useContext, useMeta} from "@nuxtjs/composition-api";
+import {Project} from "../../../@types/types";
+
+export default {
+  name: "index",
+  head: {},
+  setup() {
+    const { $content, i18n } = useContext()
+
+    const projects = useAsync(() => {
+      return $content('projects').fetch<Project>()
+    })
+
+    useMeta({
+      title: `${i18n.t('header.projects')} - Arthur Danjou`
+    })
+
+    return {
+      projects
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/pages/uses.vue b/src/pages/uses.vue
index 37593e4..4b5a6e1 100644
--- a/src/pages/uses.vue
+++ b/src/pages/uses.vue
@@ -77,7 +77,12 @@
 
 <script>
 export default {
-name: "uses"
+  name: "uses",
+  head() {
+    return {
+      title: `${this.$i18n.t('header.uses')} - Arthur Danjou`
+    }
+  }
 }
 </script>
 
diff --git a/src/pages/work/index.vue b/src/pages/work/index.vue
deleted file mode 100644
index 5b8c8c5..0000000
--- a/src/pages/work/index.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <main class="work flex flex-col items-center px-5 xl:px-64">
-    <PageTitle
-      title="part.work"
-      color="blue"
-    >
-      <svg class="inline-block icon" height="40" width="40" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-      </svg>
-    </PageTitle>
-    <h1 v-if="works.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('work.no_work') }}</h1>
-    <div v-else class="flex flex-col justify-around items-center py-10 w-full">
-      <h1 class="text-xl font-bold text-center mb-8">{{ $t('work.description') }}</h1>
-      <div class="flex flex-col items-center md:items-start md:flex-row flex-wrap w-full space-y-3 md:space-y-0">
-        <div v-for="work in works">
-          <nuxt-link :to="'/work/' + work.slug">
-            <Work
-              :title="work.title"
-              :url="work.url"
-              :color="work.color"
-              :cover="work.cover"
-            />
-          </nuxt-link>
-        </div>
-      </div>
-    </div>
-  </main>
-</template>
-
-<script>
-import PageTitle from "~/components/PageTitle";
-import Work from "~/components/Work";
-export default {
-  name: "index",
-  components: {Work, PageTitle},
-  head() {
-    return {
-      title: 'Work - Arthur Danjou'
-    }
-  },
-  async asyncData({ $content }) {
-    const works = await $content('works').fetch()
-    return {
-      works
-    }
-  }
-}
-</script>
-
-<style scoped lang="scss">
-</style>