diff --git a/assets/css/about.css b/assets/css/about.css
index 3d92862..2ab6b0e 100644
--- a/assets/css/about.css
+++ b/assets/css/about.css
@@ -8,11 +8,11 @@ main p {
 }
 
 section img {
-    float: right;
+  float: right;
 }
 
 @media only screen and (max-width: 1024px) {
-    section img {
-        display: none;
-    }
-}
\ No newline at end of file
+  section img {
+    display: none;
+  }
+}
diff --git a/assets/css/partials/breadcrumb.css b/assets/css/partials/breadcrumb.css
new file mode 100644
index 0000000..5f5ddd4
--- /dev/null
+++ b/assets/css/partials/breadcrumb.css
@@ -0,0 +1,19 @@
+.breadcrumb {
+  margin-bottom: 0.5rem;
+}
+
+.breadcrumb ol {
+  padding-left: 0;
+}
+
+.breadcrumb li {
+  display: inline;
+}
+
+.breadcrumb li:not(:last-child)::after {
+  content: '›';
+}
+
+.breadcrumb a {
+  text-transform: capitalize;
+}
diff --git a/assets/css/partials/header.css b/assets/css/partials/header.css
index 54e93a4..e1ff25f 100644
--- a/assets/css/partials/header.css
+++ b/assets/css/partials/header.css
@@ -23,7 +23,7 @@ header {
   justify-content: space-between;
 }
 
-nav {
+nav:not(.breadcrumb) {
   background-color: var(--nav-background);
   display: none;
   position: fixed;
@@ -40,7 +40,7 @@ header #header-face h3 {
   font-weight: 600;
 }
 
-header #menus a, nav #menus a {
+header #menus a, nav:not(.breadcrumb) #menus a {
   text-decoration: none;
   font-weight: 600;
   font-size: 15px;
@@ -52,7 +52,7 @@ header #menus {
   column-gap: 1.563rem;
 }
 
-nav #menus {
+nav:not(.breadcrumb) #menus {
   display: flex;
   flex-direction: column;
   align-items: end;
@@ -60,7 +60,7 @@ nav #menus {
   row-gap: 3.125rem;
 }
 
-nav hr {
+nav:not(.breadcrumb) hr {
   margin-top: 3.125rem;
   margin-bottom: 1.25rem;
 }
@@ -71,13 +71,13 @@ header #links {
   column-gap: 1.5rem;
 }
 
-nav #links {
+nav:not(.breadcrumb) #links {
   display: flex;
   justify-content: end;
   column-gap: 1.5rem;
 }
 
-nav #links .theme-toggler {
+nav:not(.breadcrumb) #links .theme-toggler {
   margin-right: auto;
 }
 
@@ -90,7 +90,7 @@ header #nav-toggler {
 }
 
 @media only screen and (max-width: 1024px) {
-  header, nav {
+  header, nav:not(.breadcrumb) {
     margin: 1.5rem auto;
     padding: 0.938rem 1.25rem;
   }
diff --git a/content/_index.md b/content/_index.md
index 43ea105..4879110 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,4 +1,4 @@
 ---
-title: "Hazem Krimi"
+title: "Home"
 date: 2023-10-18T20:03:43+01:00
 ---
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index eb63d32..2da2ce0 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -5,6 +5,8 @@
 {{ end }}
 
 {{ define "main" }}
+    {{ partial "breadcrumb.html" . }}
+
     {{ $faceImage := resources.Get "images/big-face.png" }}
     
     <section>
diff --git a/layouts/_default/contact.html b/layouts/_default/contact.html
index 940882b..d39d611 100644
--- a/layouts/_default/contact.html
+++ b/layouts/_default/contact.html
@@ -5,6 +5,8 @@
 {{ end }}
 
 {{ define "main" }}
+    {{ partial "breadcrumb.html" . }}
+
     {{ .Content }}
     
     {{ partial "contact-form.html" . }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 54d1c3d..c0f696f 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -5,6 +5,8 @@
 {{ end }}
 
 {{ define "main" }}
+    {{ partial "breadcrumb.html" . }}
+    
     {{ .Content }}
 
     <section>
diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
new file mode 100644
index 0000000..6b50b7f
--- /dev/null
+++ b/layouts/partials/breadcrumb.html
@@ -0,0 +1,16 @@
+{{ $styles := resources.Get "css/partials/breadcrumb.css" | toCSS | minify }}
+
+<link rel="stylesheet" href="{{ $styles.Permalink }}" />
+
+<nav aria-label="breadcrumb" class="breadcrumb">
+  <ol>
+    {{ range .Ancestors.Reverse }}
+    <li>
+      <a href="{{ .Permalink }}">{{ .Title }}</a>
+    </li>
+    {{ end }}
+    <li class="active">
+      <a aria-current="page" href="{{ .Permalink }}">{{ .Title }}</a>
+    </li>
+  </ol>
+</nav>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 9c6e127..c4887e8 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -34,6 +34,6 @@
   <script>
     const copyright = (document.querySelector(
       '#copyright'
-    ).innerHTML = `&copy ${new Date().getFullYear()} Hazem Krimi`);
+    ).innerHTML = `Hazem Krimi &copy ${new Date().getFullYear()}`);
   </script>
 </footer>