diff --git a/src/components/layout/PostLayout.jsx b/src/components/layout/PostLayout.jsx
index 232808b..561b32f 100644
--- a/src/components/layout/PostLayout.jsx
+++ b/src/components/layout/PostLayout.jsx
@@ -2,30 +2,32 @@ import * as React from 'react';
 import '../../css/post.css';
 import Header from '../fragment/Header';
 import Footer from '../fragment/Footer';
+import { getSiteUrl } from '../utils/url-generator';
 
-export function PostLayout(props) {
-  const { title, children } = props;
-  console.log(props);
+export function PostLayout({ title, children }) {
+  const { frontmatter } = children.props.pageContext;
   return (
     <>
       <Header />
-      <Breadcrumb />
+      <Breadcrumb title={frontmatter.title} />
       <div className="page">
         <article>
           <div className="post-header">
             <div className="post-tags">
-              <span className="tag">Node.js</span>
-              <span className="tag">Express</span>
-              <span className="tag">REST API</span>
+              {frontmatter.tags.map((tag, index) => (
+                <span className="tag" key={index}>
+                  {tag}
+                </span>
+              ))}
             </div>
             <h1 className="post-title">{title}</h1>
             <div className="post-meta">
               <div className="author">
-                <div className="avatar">JD</div>
-                <span>Jane Doe</span>
+                <div className="avatar">LK</div>
+                <span>{frontmatter.author}</span>
               </div>
               <div className="dot"></div>
-              <span>March 18, 2026</span>
+              <time dateTime={frontmatter.date}>March 18, 2026</time>
               <div className="dot"></div>
               <span>8 min read</span>
             </div>
@@ -38,17 +40,15 @@ export function PostLayout(props) {
   );
 }
 
-function Breadcrumb() {
+function Breadcrumb({ title }) {
   return (
     <div className="breadcrumb-bar">
       <div className="breadcrumb">
-        <a href="prototype-1-minimal.html">Home</a>
+        <a href={getSiteUrl()}>Accueil</a>
         <span className="sep">›</span>
-        <a href="prototype-1-minimal.html">Tutorials</a>
+        <a href={getSiteUrl()}>Tutoriels</a>
         <span className="sep">›</span>
-        <span className="current">
-          Building a REST API with Node.js and Express
-        </span>
+        <span className="current">{title}</span>
       </div>
     </div>
   );
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index c54922d..069a229 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -23,14 +23,14 @@ const IndexPage = ({ data }) => {
 
       <div className="list">
         {posts.map((post, index) => (
-          <PostDatails key={index} pos={post} />
+          <PostDetails key={index} pos={post} />
         ))}
       </div>
     </IndexLayout>
   );
 };
 
-function PostDatails(post) {
+function PostDetails(post) {
   const { frontmatter } = post.pos;
 
   return (