diff --git a/assets/css/style.css b/assets/css/style.css
index 8e0aae5..426f502 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -20,7 +20,8 @@ Author: Aroy (https://aroy-art.com)
     --neon-color: #39ff14;
     --neon-pink-color: #ff00d4;
 
-
+    --bg-light: #0f1e31;
+    --bg-dark: #040b1e;
 }
 
 
@@ -491,7 +492,7 @@ ol li::marker {
 }
 
 .breadcrumb {
-    background-color: #0f1e31;
+    background-color: var(--bg-dark, #040b1e);
 }
 
 nav[aria-label="breadcrumb"] li:last-child a{
diff --git a/layouts/partials/bradcrumb.html b/layouts/partials/bradcrumb.html
index 3a680e9..a79b75a 100644
--- a/layouts/partials/bradcrumb.html
+++ b/layouts/partials/bradcrumb.html
@@ -1,25 +1,14 @@
 {{ if site.Params.breadcrumbs }}
 {{"<!-- Bradcrumb Section -->" | safeHTML}}
-{{ $siteUrl := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
-{{ $.Scratch.Add "sitePath" .Site.BaseURL }}
-
-{{ $.Scratch.Add "siteBreadcrumbs" (slice (dict "url" .Site.BaseURL "name" "home" "position" 1 )) }}
-{{ range $index, $element := split $siteUrl "/" }}
-{{ $.Scratch.Add "sitePath" $element }}
-{{ $.Scratch.Add "sitePath" "/" }}
-{{ if ne $element "" }}
-{{ $.Scratch.Add "siteBreadcrumbs" (slice (dict "url" ($.Scratch.Get "sitePath") "name" . "position" (add $index 2))) }}
-{{ end }}
-{{ end }}
-
 <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
         <nav aria-label="breadcrumb">
             <!-- <p> You are hear ↓↓↓</p> -->
             <ol class="breadcrumb">
-                {{ range $.Scratch.Get "siteBreadcrumbs" }}          
-                <li class="breadcrumb-item"><a href="{{ .url }}">{{ .name }}</a></li>
-                {{ end }}
+                {{- range .Ancestors.Reverse }}
+                <li class="breadcrumb-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+                {{- end }}
+                <li class="breadcrumb-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
             </ol>
         </nav>
     </div>