diff --git a/src/components/ServicePart.vue b/src/components/ServicePart.vue
index c8b1198..00adb5e 100644
--- a/src/components/ServicePart.vue
+++ b/src/components/ServicePart.vue
@@ -1,15 +1,13 @@
 <template>
-  <div class="relative lg:(w-1/2 m-8) mt-8">
-    <div class="absolute right-0 top-0 bg-indigo-600 text-white rounded-xl p-3">
-      <slot />
+  <div>
+    <div>
+      <slot name="icon" />
     </div>
-    <div class="rounded-lg mt-8 md:mr-8 pt-4 md:p-8">
-      <h1 class="font-bold capitalize text-4xl mb-4">
+    <div class="mt-8">
+      <h1 class="font-bold text-3xl mb-4">
         {{ $t(title) }}
       </h1>
-      <p class="text-gray-600 text-lg text-justify leading-5 ">
-        {{ $t(content) }}
-      </p>
+      <slot name="content"/>
     </div>
   </div>
 </template>
@@ -21,10 +19,6 @@ export default {
     title: {
       type: String,
       default: 'services.1.title'
-    },
-    content: {
-      type: String,
-      default: 'services.1.content'
     }
   }
 }
diff --git a/src/components/icons/CodeIcon.vue b/src/components/icons/CodeIcon.vue
index 8b74ec1..25b9669 100644
--- a/src/components/icons/CodeIcon.vue
+++ b/src/components/icons/CodeIcon.vue
@@ -1,11 +1,7 @@
 <template>
-  <svg class="inline" width="2rem" height="2rem" viewBox="0 0 24 24" focusable="false">
+  <svg class="inline" width="3.5rem" height="3.5rem" viewBox="0 0 1024 1024" focusable="false">
     <path
-      d="M20 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM4 19V7h16l.002 12H4z"
-      fill="currentColor"
-    />
-    <path
-      d="M9.293 9.293L5.586 13l3.707 3.707l1.414-1.414L8.414 13l2.293-2.293zm5.414 0l-1.414 1.414L15.586 13l-2.293 2.293l1.414 1.414L18.414 13z"
+      d="M516 673c0 4.4 3.4 8 7.5 8h185c4.1 0 7.5-3.6 7.5-8v-48c0-4.4-3.4-8-7.5-8h-185c-4.1 0-7.5 3.6-7.5 8v48zm-194.9 6.1l192-161c3.8-3.2 3.8-9.1 0-12.3l-192-160.9A7.95 7.95 0 0 0 308 351v62.7c0 2.4 1 4.6 2.9 6.1L420.7 512l-109.8 92.2a8.1 8.1 0 0 0-2.9 6.1V673c0 6.8 7.9 10.5 13.1 6.1zM880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"
       fill="currentColor" />
   </svg>
 </template>
diff --git a/src/components/icons/CompassIcon.vue b/src/components/icons/CompassIcon.vue
new file mode 100644
index 0000000..d79722f
--- /dev/null
+++ b/src/components/icons/CompassIcon.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg class="inline" width="3.5rem" height="3.5rem" viewBox="0 0 24 24" focusable="false">
+    <path
+      d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10zm0-2a8 8 0 1 0 0-16a8 8 0 0 0 0 16zm3.5-11.5l-2 5l-5 2l2-5l5-2z"
+      fill="currentColor" />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "CompassIcon"
+}
+</script>
diff --git a/src/components/icons/DesignIcon.vue b/src/components/icons/DesignIcon.vue
new file mode 100644
index 0000000..77d0f89
--- /dev/null
+++ b/src/components/icons/DesignIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg class="inline" width="3.5rem" height="3.5rem" viewBox="0 0 48 48" focusable="false">
+    <g fill="none" stroke="currentColor" stroke-width="4" stroke-linejoin="round">
+      <path
+        d="M19 32c-7.732 0-14-6.268-14-14S11.268 4 19 4s14 6.268 14 14" />
+      <path
+        d="M18 18h26v26H18z" />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: "DesignIcon"
+}
+</script>
diff --git a/src/components/icons/GlassIcon.vue b/src/components/icons/GlassIcon.vue
deleted file mode 100644
index 2600680..0000000
--- a/src/components/icons/GlassIcon.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-<template>
-  <svg class="inline" width="2rem" height="2rem" viewBox="0 0 512 512" focusable="false">
-    <path
-      fill="currentColor"
-      d="M479.6 399.716l-81.084-81.084l-62.368-25.767A175.014 175.014 0 0 0 368 192c0-97.047-78.953-176-176-176S16 94.953 16 192s78.953 176 176 176a175.034 175.034 0 0 0 101.619-32.377l25.7 62.2l81.081 81.088a56 56 0 1 0 79.2-79.195zM48 192c0-79.4 64.6-144 144-144s144 64.6 144 144s-64.6 144-144 144S48 271.4 48 192zm408.971 264.284a24.028 24.028 0 0 1-33.942 0l-76.572-76.572l-23.894-57.835l57.837 23.894l76.573 76.572a24.028 24.028 0 0 1-.002 33.941z" />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "GlassIcon"
-}
-</script>
diff --git a/src/components/icons/NetworkIcon.vue b/src/components/icons/NetworkIcon.vue
deleted file mode 100644
index 17e19b8..0000000
--- a/src/components/icons/NetworkIcon.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <svg class="inline" width="2rem" height="2rem" viewBox="0 0 32 32" focusable="false">
-    <path
-      d="M17 17h5.142a4 4 0 1 0 0-2H17V7h5.142a4 4 0 1 0 0-2H17a2.002 2.002 0 0 0-2 2v8H9.858a4 4 0 1 0 0 2H15v8a2.002 2.002 0 0 0 2 2h5.142a4 4 0 1 0 0-2H17zm9-3a2 2 0 1 1-2 2a2.002 2.002 0 0 1 2-2zm0-10a2 2 0 1 1-2 2a2.002 2.002 0 0 1 2-2zM6 18a2 2 0 1 1 2-2a2.002 2.002 0 0 1-2 2zm20 6a2 2 0 1 1-2 2a2.002 2.002 0 0 1 2-2z"
-      fill="currentColor"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "NetworkIcon"
-}
-</script>
diff --git a/src/components/icons/SupportIcon.vue b/src/components/icons/SupportIcon.vue
deleted file mode 100644
index 21fb61c..0000000
--- a/src/components/icons/SupportIcon.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <svg class="inline" width="2  rem" height="2rem" viewBox="0 0 24 24" focusable="false">
-    <g fill="none">
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M12.26 21.997a10.276 10.276 0 0 1-.52 0a10.004 10.004 0 0 1-8.983-6.173a10.034 10.034 0 0 1 .017-7.69A10.015 10.015 0 0 1 4.908 4.95l.042-.042a10.015 10.015 0 0 1 3.167-2.126a10.034 10.034 0 0 1 7.753-.006a10.015 10.015 0 0 1 3.186 2.138l.03.03c.913.917 1.65 2.01 2.153 3.223a10.012 10.012 0 0 1 .76 3.985a10.004 10.004 0 0 1-6.226 9.112a10.013 10.013 0 0 1-3.512.733zm1.772-6.55l2.874 2.873a8.004 8.004 0 0 1-9.812 0l2.874-2.874a4.007 4.007 0 0 0 4.064 0zm-5.478-1.415L5.68 16.906a8.004 8.004 0 0 1 0-9.812l2.874 2.874a4.007 4.007 0 0 0 0 4.064zm1.528-1.463a2.01 2.01 0 0 1-.014-1.087a1.99 1.99 0 0 1 .518-.896a1.99 1.99 0 0 1 1.932-.518c.328.088.639.26.896.518a1.99 1.99 0 0 1 .518 1.932c-.088.328-.26.639-.518.896a1.99 1.99 0 0 1-1.932.518a1.991 1.991 0 0 1-.896-.518a1.99 1.99 0 0 1-.504-.845zm3.95-4.015a4.007 4.007 0 0 0-4.064 0L7.094 5.68a8.004 8.004 0 0 1 9.812 0l-2.874 2.874zm4.288 8.352a8.004 8.004 0 0 0 0-9.812l-2.874 2.874a4.007 4.007 0 0 1 0 4.064l2.874 2.874z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: "SupportIcon"
-}
-</script>
diff --git a/src/locales/fr-FR.ts b/src/locales/fr-FR.ts
index cb60532..1a2ee78 100755
--- a/src/locales/fr-FR.ts
+++ b/src/locales/fr-FR.ts
@@ -29,21 +29,14 @@ const translations = {
   services: {
     description: 'Je fourni tout ce dont vous avez besoin pour créer votre site internet parfait',
     1: {
-      title: "Développement d'application",
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate quam vel maximus pulvinar. Aliquam vitae risus at sem varius pulvinar. Vivamus pulvinar tortor sit amet condimentum aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse finibus, metus eu dictum aliquet, tellus libero aliquam libero, eu lacinia dui mauris congue dolor. Nunc a lacinia ligula. Mauris bibendum orci eget pretium consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus porttitor finibus odio.'
+      title: "Stratégie",
     },
     2: {
-      title: "Installation d'infrastructure",
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate quam vel maximus pulvinar. Aliquam vitae risus at sem varius pulvinar. Vivamus pulvinar tortor sit amet condimentum aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse finibus, metus eu dictum aliquet, tellus libero aliquam libero, eu lacinia dui mauris congue dolor. Nunc a lacinia ligula. Mauris bibendum orci eget pretium consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus porttitor finibus odio.'
+      title: "Illustration",
     },
     3: {
-      title: "Conseil dans l'informatique",
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate quam vel maximus pulvinar. Aliquam vitae risus at sem varius pulvinar. Vivamus pulvinar tortor sit amet condimentum aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse finibus, metus eu dictum aliquet, tellus libero aliquam libero, eu lacinia dui mauris congue dolor. Nunc a lacinia ligula. Mauris bibendum orci eget pretium consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus porttitor finibus odio.'
-    },
-    4: {
-      title: "Revue de vos applications",
-      content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vulputate quam vel maximus pulvinar. Aliquam vitae risus at sem varius pulvinar. Vivamus pulvinar tortor sit amet condimentum aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse finibus, metus eu dictum aliquet, tellus libero aliquam libero, eu lacinia dui mauris congue dolor. Nunc a lacinia ligula. Mauris bibendum orci eget pretium consequat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus porttitor finibus odio.'
-    },
+      title: "Développement",
+    }
   },
 
   footer: {
diff --git a/src/pages/services.vue b/src/pages/services.vue
index 2a631f1..0559f1b 100644
--- a/src/pages/services.vue
+++ b/src/pages/services.vue
@@ -2,21 +2,43 @@
   <main class="flex flex-col items-center px-4 xl:px-32">
     <PageTitle title="part.services" />
     <p class="text-justify text-gray-700 dark:text-gray-400 text-xl my-8">{{ $t('services.description') }}</p>
-    <div class="flex flex-col justify-around items-center py-10 w-full">
-      <div class="flex flex-col lg:(flex-row justify-around mb-16) w-full">
-        <ServicePart title="services.1.title" content="services.1.content" >
-          <CodeIcon />
+    <div class="flex flex-col lg:(flex-row) justify-around items-center pt-10 w-full">
+      <div class="grid grid-cols-1 gap-x-12 mb-20 sm:grid-cols-3 w-full">
+        <ServicePart title="services.1.title">
+          <template v-slot:icon>
+            <CompassIcon />
+          </template>
+          <template v-slot:content>
+            <div class="flex flex-col space-y-4">
+              <p>Développement</p>
+              <p>Architecture</p>
+              <p>Test</p>
+            </div>
+          </template>
         </ServicePart>
-        <ServicePart title="services.2.title" content="services.2.content">
-          <NetworkIcon />
+        <ServicePart title="services.2.title">
+          <template v-slot:icon>
+            <DesignIcon />
+          </template>
+          <template v-slot:content>
+            <div class="flex flex-col space-y-4">
+              <p>Développement</p>
+              <p>Architecture</p>
+              <p>Test</p>
+              <p>Test</p>
+            </div>
+          </template>
         </ServicePart>
-      </div>
-      <div class="flex flex-col lg:(flex-row justify-around) w-full">
-        <ServicePart title="services.3.title" content="services.3.content">
-          <SupportIcon />
-        </ServicePart>
-        <ServicePart title="services.4.title" content="services.4.content">
-          <GlassIcon />
+        <ServicePart title="services.3.title">
+          <template v-slot:icon>
+            <CodeIcon />
+          </template>
+          <template v-slot:content>
+            <div class="flex flex-col space-y-4">
+              <p>Développement</p>
+              <p>Architecture</p>
+            </div>
+          </template>
         </ServicePart>
       </div>
     </div>