diff --git a/package.json b/package.json
index b8898b3..630a6a2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lucaswerey/dslib-pfe",
-  "version": "0.0.67",
+  "version": "0.0.68",
   "private": false,
   "main": "./lib/index.umd.js",
   "module": "./lib/index.mjs",
diff --git a/src/App.vue b/src/App.vue
index 69006cb..1489502 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,46 +1,20 @@
 <script setup lang="ts">
 import './assets/index.css'
-
-import RankingContainer from './components/Containment/RankingContainer'
+const names = ['Lucas', 'Baptiste', 'Rose', 'Marine']
 </script>
 
 <template>
   <div class="flex h-[100vh] w-[100vw] flex-col gap-5 bg-basic-lightgrey p-2">
-    <RankingContainer title="Mots clés" :labels="['Yo', 'Suuuu']" />
-    <RankingContainer
-      title="Transports utilisés"
-      :labels="[
-        'Yo',
-        'Suuuu',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo',
-        'Yo'
-      ]"
-      top-rank
-      draggable
+    <OfferCard type="empty" />
+    <OfferCard
+      type="fill"
+      contractDuration="2 mois"
+      contractType="stage"
+      title="Dév web"
+      location="Paris"
+      :nCandidates="38"
+      :studentNames="names"
+      desktopColor="warning"
     />
   </div>
 </template>
diff --git a/src/assets/icons/desktop.vue b/src/assets/icons/desktop.vue
new file mode 100644
index 0000000..a6b0741
--- /dev/null
+++ b/src/assets/icons/desktop.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="33" height="33" rx="5" :fill="color" fill-opacity="0.1" />
+    <path
+      d="M23.4064 19.3845V11.3803C23.4064 10.9085 23.2172 10.4561 22.8806 10.1225C22.5439 9.78896 22.0873 9.60156 21.6112 9.60156H10.8403C10.3642 9.60156 9.9076 9.78896 9.57094 10.1225C9.23429 10.4561 9.04516 10.9085 9.04516 11.3803V19.3845M23.4064 19.3845H9.04516M23.4064 19.3845L24.5553 21.6524C24.6245 21.7885 24.6572 21.9398 24.6504 22.0921C24.6436 22.2443 24.5974 22.3922 24.5163 22.5216C24.4352 22.6511 24.3219 22.7577 24.1873 22.8313C24.0527 22.9049 23.9012 22.943 23.7474 22.942H8.70408C8.55031 22.943 8.39885 22.9049 8.26421 22.8313C8.12958 22.7577 8.01628 22.6511 7.93519 22.5216C7.8541 22.3922 7.80793 22.2443 7.80111 22.0921C7.7943 21.9398 7.82706 21.7885 7.89626 21.6524L9.04516 19.3845"
+      :stroke="color"
+      stroke-width="1.3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#000000'
+  }
+})
+</script>
diff --git a/src/components.d.ts b/src/components.d.ts
index ecfe331..74901fb 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -28,6 +28,8 @@ declare module 'vue' {
     'InputField.story': typeof import('./components/CTA/InputField/InputField.story.vue')['default']
     Loader: typeof import('./components/Indicators/Loader/Loader.vue')['default']
     'Loader.story': typeof import('./components/Indicators/Loader/Loader.story.vue')['default']
+    OfferCard: typeof import('./components/Containment/OfferCard/OfferCard.vue')['default']
+    'OfferCard.story': typeof import('./components/Containment/OfferCard/OfferCard.story.vue')['default']
     RankingContainer: typeof import('./components/Containment/RankingContainer/RankingContainer.vue')['default']
     'RankingContainer.story': typeof import('./components/Containment/RankingContainer/RankingContainer.story.vue')['default']
     SelectField: typeof import('./components/CTA/SelectField/SelectField.vue')['default']
diff --git a/src/components/Containment/OfferCard/OfferCard.model.ts b/src/components/Containment/OfferCard/OfferCard.model.ts
new file mode 100644
index 0000000..36fe20d
--- /dev/null
+++ b/src/components/Containment/OfferCard/OfferCard.model.ts
@@ -0,0 +1,34 @@
+/*
+            Avaible colors:
+
+                  basic:
+                    black: '#1B1B1E',
+                    darkgrey: '#787878',
+                    grey: '#CDCDCD',
+                    lightgrey: '#ECECEC',
+                    verylightgrey: '#F6F6F6',
+                    white: '#FAFAFA'
+                  primary:
+                    DEFAULT: '#000000',
+                    light: '#00F2A5',
+                    charcoal: '#373F51',
+                    moonstone: '#58A4B0',
+                    powder: '#A9BCD0',
+                    platinum: '#D8DBE2'
+                  transparent: 'transparent',
+                  current: 'currentColor',
+                  inherit: 'inherit',
+                  error: '#FF5656',
+                  warning: '#FFC85C',
+                  success: '#7BC079',
+                  info: '#333333'
+            */
+
+export const OFFER_CARD_TYPE = {
+  fill: 'fill',
+  empty: 'empty'
+} as const
+
+export const OFFER_CARD_TYPES = Object.values(OFFER_CARD_TYPE)
+export type OfferCardType = (typeof OFFER_CARD_TYPES)[number]
+export const OFFER_CARD_TYPE_DEFAULT = OFFER_CARD_TYPE.empty
diff --git a/src/components/Containment/OfferCard/OfferCard.spec.ts b/src/components/Containment/OfferCard/OfferCard.spec.ts
new file mode 100644
index 0000000..66bc520
--- /dev/null
+++ b/src/components/Containment/OfferCard/OfferCard.spec.ts
@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils'
+import { it, describe, expect } from 'vitest'
+import OfferCard from './OfferCard.vue'
+
+describe('OfferCard.vue', () => {
+  it('renders correctly when type is empty', () => {
+    const wrapper = mount(OfferCard, {
+      props: {
+        type: 'empty',
+        title: '',
+        location: '',
+        nCandidates: 0,
+        contractType: '',
+        contractDuration: '',
+        id: '',
+        studentNames: [],
+        desktopColor: 'transparent'
+      }
+    })
+    expect(wrapper.find('.h-60').exists()).toBe(true)
+    expect(wrapper.find('[data-test="create-offer"]').exists()).toBe(true)
+  })
+
+  it('renders correctly when type is fill', () => {
+    const wrapper = mount(OfferCard, {
+      props: {
+        type: 'fill',
+        title: 'Test Title',
+        location: 'Test Location',
+        nCandidates: 5,
+        contractType: 'Test Contract Type',
+        contractDuration: 'Test Contract Duration',
+        id: '1',
+        studentNames: ['John', 'Doe'],
+        desktopColor: 'error'
+      }
+    })
+    expect(wrapper.find('.h-60').exists()).toBe(true)
+    expect(wrapper.find('h4').text()).toBe('Test Title')
+    expect(wrapper.find('p').text()).toBe('Test Location')
+    expect(wrapper.findAll('[data-test="avatar"]').length).toBe(2)
+  })
+
+  it('emits seeOffer event', async () => {
+    const wrapper = mount(OfferCard, {
+      props: {
+        type: 'fill',
+        title: 'Test Title',
+        location: 'Test Location',
+        nCandidates: 5,
+        contractType: 'Test Contract Type',
+        contractDuration: 'Test Contract Duration',
+        id: '1',
+        studentNames: ['John', 'Doe'],
+        desktopColor: 'error'
+      }
+    })
+    await wrapper.find('button').trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('seeOffer')
+    expect(wrapper.emitted().seeOffer[0]).toEqual(['1'])
+  })
+
+  it('emits createOffer event', async () => {
+    const wrapper = mount(OfferCard, {
+      props: {
+        type: 'empty',
+        title: '',
+        location: '',
+        nCandidates: 0,
+        contractType: '',
+        contractDuration: '',
+        id: '',
+        studentNames: [],
+        desktopColor: 'error'
+      }
+    })
+    await wrapper.find('[data-test="create-offer"]').trigger('click')
+    expect(wrapper.emitted()).toHaveProperty('createOffer')
+  })
+})
diff --git a/src/components/Containment/OfferCard/OfferCard.story.vue b/src/components/Containment/OfferCard/OfferCard.story.vue
new file mode 100644
index 0000000..430e785
--- /dev/null
+++ b/src/components/Containment/OfferCard/OfferCard.story.vue
@@ -0,0 +1,91 @@
+<template>
+  <Story
+    title="Offer Card"
+    group="containment"
+    :layout="{
+      type: 'grid',
+      width: '50%'
+    }"
+  >
+    <template #controls>
+      <ControlDescription>
+        <HstSelect v-model="controls.type" :options="Object.values(OFFER_CARD_TYPE)" title="Type" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.title" title="Title" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.location" title="Location" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstNumber v-model="controls.nCandidates" title="Number of candidates" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.contractType" title="Contract type" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.contractDuration" title="Contract duration" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.id" title="Id" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstText v-model="controls.studentNames" title="Student names" />
+      </ControlDescription>
+      <ControlDescription>
+        <HstSelect
+          v-model="controls.desktopColor"
+          :options="Object.keys(colorsPalette)"
+          title="Desktop color"
+        />
+      </ControlDescription>
+    </template>
+
+    <template #default>
+      <OfferCard
+        :type="controls.type"
+        :title="controls.title"
+        :location="controls.location"
+        :n-candidates="controls.nCandidates"
+        :contract-type="controls.contractType"
+        :contract-duration="controls.contractDuration"
+        :id="controls.id"
+        :student-names="controls.studentNames"
+        :desktop-color="controls.desktopColor"
+        @seeOffer="() => {}"
+        @createOffer="() => {}"
+      />
+    </template>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { OFFER_CARD_TYPE_DEFAULT, OFFER_CARD_TYPE } from './OfferCard.model'
+import { colorsPalette } from '../../../tailwind/presetConfig'
+import type { OfferCardType } from './OfferCard.model'
+import type { IconsColor } from '../../Media/IconsBase/IconsBase.model'
+
+interface Controls {
+  type: OfferCardType
+  title: string
+  location: string
+  nCandidates: number
+  contractType: string
+  contractDuration: string
+  id: string
+  studentNames: string[]
+  desktopColor: IconsColor
+}
+
+const controls = reactive<Controls>({
+  type: OFFER_CARD_TYPE_DEFAULT,
+  title: 'default',
+  location: 'default',
+  nCandidates: 0,
+  contractType: 'default',
+  contractDuration: 'default',
+  id: '2323232',
+  studentNames: ['Pierre', 'Paul', 'Jacques', 'Thiery'],
+  desktopColor: 'warning'
+})
+</script>
diff --git a/src/components/Containment/OfferCard/OfferCard.vue b/src/components/Containment/OfferCard/OfferCard.vue
new file mode 100644
index 0000000..9fc385e
--- /dev/null
+++ b/src/components/Containment/OfferCard/OfferCard.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="h-60 max-h-60 w-80 max-w-80 overflow-hidden">
+    <div
+      v-if="isEmpty"
+      class="flex h-full w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-primary-moonstone bg-primary-lightmoonstone text-primary-moonstone"
+      data-test="create-offer"
+      @click="emit('createOffer')"
+    >
+      <IconsBase name="plus" color="moonstone" size="large" />
+      <h5 class="text-center uppercase">ajouter une offre</h5>
+    </div>
+    <div
+      v-if="!isEmpty"
+      class="flex h-full w-full flex-col items-center justify-between rounded-xl bg-basic-white p-4"
+    >
+      <div class="flex w-full flex-col gap-1">
+        <IconsBase name="desktop" :color="desktopColor" />
+        <h4 class="font-eina1 text-5 font-bold text-basic-black">{{ title }}</h4>
+        <div class="flex w-full items-center gap-3 text-basic-black">
+          <p>{{ location }}</p>
+          <div class="flex gap-2">
+            <ChipContainer :label="contractType" />
+            <ChipContainer :label="contractDuration" />
+          </div>
+        </div>
+      </div>
+      <div class="flex w-full flex-col gap-2">
+        <div class="flex w-full items-center justify-between">
+          <div class="relative flex -space-x-5">
+            <Avatar
+              v-for="(name, i) in studentNames.slice(0, studentNames.length)"
+              :key="i"
+              data-test="avatar"
+              :type="'photo'"
+              :size="'small'"
+              :src="`https://api.dicebear.com/7.x/micah/svg?seed=${name}&radius=50&mouth=pucker,smile,smirk,laughing&backgroundColor=b6e3f4,ffd5dc,d1d4f9,c0aede,ffdfbf`"
+              alt="'avatar'"
+              class="z-10 rounded-full border-2 border-basic-white"
+            />
+          </div>
+          <p class="font-eina1 text-3 font-semibold text-basic-black">
+            {{ nCandidates }} candidats
+          </p>
+        </div>
+        <Button
+          :type="'default'"
+          :state="'active'"
+          class="w-full uppercase"
+          :styled="'fill'"
+          @click="emit('seeOffer', id)"
+        >
+          Consulter l’espace de l’offre
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { OFFER_CARD_TYPE_DEFAULT, OFFER_CARD_TYPE } from './OfferCard.model'
+import type { OfferCardType } from './OfferCard.model'
+import type { IconsColor } from '../../Media/IconsBase/IconsBase.model'
+const props = defineProps({
+  type: {
+    type: String as PropType<OfferCardType>,
+    required: true,
+    default: OFFER_CARD_TYPE_DEFAULT,
+    validator: (value: OfferCardType) => {
+      return Object.values(OFFER_CARD_TYPE).includes(value)
+    }
+  },
+  title: {
+    type: String as PropType<string>
+  },
+  location: {
+    type: String as PropType<string>
+  },
+  nCandidates: {
+    type: Number as PropType<number>,
+    validator: (value: number) => {
+      return value >= 0
+    }
+  },
+  contractType: {
+    type: String as PropType<string>
+  },
+  contractDuration: {
+    type: String as PropType<string>
+  },
+  id: {
+    type: String as PropType<string>
+  },
+  studentNames: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  desktopColor: {
+    type: String as PropType<IconsColor>
+  }
+})
+
+const isEmpty = computed(() => props.type === OFFER_CARD_TYPE.empty)
+const title = computed(() => props.title)
+const location = computed(() => props.location)
+const nCandidates = computed(() => props.nCandidates)
+const contractType = computed(() => props.contractType)
+const contractDuration = computed(() => props.contractDuration)
+const id = computed(() => props.id)
+const studentNames = computed(() => props.studentNames)
+const desktopColor = computed(() => props.desktopColor)
+
+const emit = defineEmits(['seeOffer', 'createOffer'])
+</script>
diff --git a/src/components/Containment/OfferCard/index.ts b/src/components/Containment/OfferCard/index.ts
new file mode 100644
index 0000000..62acf6f
--- /dev/null
+++ b/src/components/Containment/OfferCard/index.ts
@@ -0,0 +1 @@
+export { default } from './OfferCard.vue';
diff --git a/src/components/Media/IconsBase/IconsBase.model.ts b/src/components/Media/IconsBase/IconsBase.model.ts
index c9b2f87..91949da 100644
--- a/src/components/Media/IconsBase/IconsBase.model.ts
+++ b/src/components/Media/IconsBase/IconsBase.model.ts
@@ -48,7 +48,8 @@ export const ICONS_NAME = {
   userCog: 'userCog',
   userRoundx: 'userRoundx',
   video: 'video',
-  dribble: 'dribble'
+  dribble: 'dribble',
+  desktop: 'desktop'
 } as const
 
 export const ICONS_NAMES = Object.values(ICONS_NAME)
diff --git a/src/components/Media/IconsBase/IconsBase.story.vue b/src/components/Media/IconsBase/IconsBase.story.vue
index 7bd279f..ee091e2 100644
--- a/src/components/Media/IconsBase/IconsBase.story.vue
+++ b/src/components/Media/IconsBase/IconsBase.story.vue
@@ -173,6 +173,9 @@
     <Variant title="video" auto-props-disabled>
       <IconsBase name="video" color="moonstone" :size="controls.size" />
     </Variant>
+    <Variant title="desktop" auto-props-disabled>
+      <IconsBase name="desktop" color="moonstone" :size="controls.size" />
+    </Variant>
 
     <Variant title="linkedin" auto-props-disabled>
       <IconsBase name="linkedin" :size="controls.size" />
diff --git a/src/index.ts b/src/index.ts
index d8dad39..8b390d2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,3 +17,4 @@ export { default as CertifContainer } from './components/Containment/CertifConta
 export { default as DeleteModal } from './components/Indicators/DeleteModal'
 export { default as RankingContainer } from './components/Containment/RankingContainer'
 export { default as SelectField } from './components/CTA/SelectField'
+export { default as  OfferCard } from './components/Containment/OfferCard';
diff --git a/src/tailwind/presetConfig.ts b/src/tailwind/presetConfig.ts
index 20e413b..ec39ca1 100644
--- a/src/tailwind/presetConfig.ts
+++ b/src/tailwind/presetConfig.ts
@@ -128,5 +128,7 @@ export const colorsPalette = {
   powder: '#A9BCD0',
   platinum: '#D8DBE2',
   error: '#F22B00',
-  'error-light': '#00F2A5'
+  errorLight: '#00F2A5',
+  lightmoonstone: '#58A4B01A',
+  warning: '#FFC85C'
 }