diff --git a/src/components/outdated-banner.astro b/src/components/outdated-banner.astro
new file mode 100644
index 00000000..9047e79e
--- /dev/null
+++ b/src/components/outdated-banner.astro
@@ -0,0 +1,16 @@
+---
+import { getTranslationUtilities } from '@/lib/site/get-translation-utilities';
+
+const { t } = getTranslationUtilities(Astro.currentLocale);
+---
+
+<div
+  class="mb-8 rounded-md border-l-4 border-yellow-400 bg-yellow-50 px-6 py-4 text-yellow-800"
+>
+  <p class="text-base font-semibold">
+    {t('blog.article.outdated.title')}
+  </p>
+  <p class="mt-1 text-sm">
+    {t('blog.article.outdated.description')}
+  </p>
+</div>
diff --git a/src/content/posts/start-ui/en.md b/src/content/posts/start-ui/en.md
index 3d000822..f49ba079 100644
--- a/src/content/posts/start-ui/en.md
+++ b/src/content/posts/start-ui/en.md
@@ -15,6 +15,7 @@ heroImage: 'images/visuel-article-start-ui-tinified.png'
 metaDescription: 'Start UI [web] is a UI starter with React, Chakra UI, React Query and Formiz — By the BearStudio team'
 authors:
   - yoann-fleury
+outdated: false
 ---
 
 When using User Interface (UI) starters in the past, we found ourselves faced with deciding which technology would be best for us to use. From UI framework, HTTP Client, Routing Library, Style Library, Form Library, to downloading all the configurations and dependencies needed can be very time consuming. To put everything in one place and streamline how we choose these options, we decided to dive into creating our own User Interface Starter called **_Start UI_**_._
diff --git a/src/content/posts/start-ui/fr.md b/src/content/posts/start-ui/fr.md
index 0283b634..64697062 100644
--- a/src/content/posts/start-ui/fr.md
+++ b/src/content/posts/start-ui/fr.md
@@ -14,6 +14,7 @@ heroImage: 'images/visuel-article-start-ui-tinified.png'
 metaDescription: "Start UI [web] est un starter UI avec React, Chakra UI, React Query et Formiz — Par l'équipe BearStudio"
 authors:
   - yoann-fleury
+outdated: false
 ---
 
 Par le passé, lorsque nous utilisions des starters d'Interface Utilisateur (UI), nous nous retrouvions face au choix de la technologie la plus adaptée à nos besoins. Entre le framework UI, le client HTTP, la bibliothèque de routage, la bibliothèque de styles, la bibliothèque de formulaires, et le téléchargement de toutes les configurations et dépendances nécessaires, cela pouvait s'avérer très chronophage. Pour tout centraliser et simplifier nos choix, nous avons décidé de créer notre propre starter d'Interface Utilisateur appelé **_Start UI_**_._
diff --git a/src/i18n/en/blog.json b/src/i18n/en/blog.json
index efa2e00e..24f05071 100644
--- a/src/i18n/en/blog.json
+++ b/src/i18n/en/blog.json
@@ -29,6 +29,10 @@
   "article": {
     "on": "",
     "by": "by",
-    "published": "Published on"
+    "published": "Published on",
+    "outdated": {
+      "title": "This article is outdated",
+      "description": "The information presented here may no longer be valid."
+    }
   }
 }
diff --git a/src/i18n/fr/blog.json b/src/i18n/fr/blog.json
index b51694db..328208d0 100644
--- a/src/i18n/fr/blog.json
+++ b/src/i18n/fr/blog.json
@@ -29,6 +29,10 @@
   "article": {
     "on": "Le",
     "by": "par",
-    "published": "Publié le"
+    "published": "Publié le",
+    "outdated": {
+      "title": "Cet article est peut-être dépassé",
+      "description": "Les informations présentées ici ne sont plus forcément valables."
+    }
   }
 }
diff --git a/src/pages/fr/blog/articles/[id]/index.astro b/src/pages/fr/blog/articles/[id]/index.astro
index f37b2505..dee28876 100644
--- a/src/pages/fr/blog/articles/[id]/index.astro
+++ b/src/pages/fr/blog/articles/[id]/index.astro
@@ -15,6 +15,7 @@ import { breadcrumbEntries } from '@/components/breadcrumb/utils';
 import Container from '@/components/container.astro';
 import HeroContent from '@/components/hero/hero-content.astro';
 import Hero from '@/components/hero/hero.astro';
+import OutdatedBanner from '@/components/outdated-banner.astro';
 import PhotoSwipeImages from '@/components/photo-swipe-images.astro';
 import Prose from '@/components/prose.astro';
 import SEO from '@/components/seo/index.astro';
@@ -175,6 +176,7 @@ const [slugFr, slugEn] = await Promise.all([
   </Hero>
   <Container>
     <PhotoSwipeImages>
+      {post.data.outdated && <OutdatedBanner />}
       <Prose>
         <Content />
       </Prose>
diff --git a/src/schemas/posts.ts b/src/schemas/posts.ts
index c197e89b..94c1ac95 100644
--- a/src/schemas/posts.ts
+++ b/src/schemas/posts.ts
@@ -16,4 +16,5 @@ export const zPost = ({ image }: SchemaContext) =>
     date: z.date(),
     tags: z.array(z.string()).optional(),
     categories: z.array(z.string()).optional(),
+    outdated: z.boolean().optional(),
   });