diff --git a/assets/scss/_mixins.scss b/assets/scss/_mixins.scss
index f5de23e..e5b02fe 100644
--- a/assets/scss/_mixins.scss
+++ b/assets/scss/_mixins.scss
@@ -162,40 +162,30 @@ body .toc a {
   display: block;
   text-decoration: none;
   color: #000 !important;
-  /* Dark black text color with !important */
   font-weight: bold !important;
-  /* Make the text bold with !important */
   cursor: pointer;
   margin-left: 10px;
-  /* Adjust the margin to control the indentation */
   margin-bottom: 5px;
-  /* Reduce space between headings */
 }
 
 body .toc a:hover {
   color: #4CAF50 !important;
-  /* Light green text color on hover with !important */
 }
 
-/* --- 992–1200px squeeze zone fixes --- */
+/* --- 992-1200px squeeze zone fixes --- */
 @media (min-width: 992px) and (max-width: 1199.98px) {
   .banner .illustration {
     max-width: 540px !important;
-    /* ensure image size sticks */
     right: 15px !important;
-    /* prevent overlap */
   }
 }
 
-/* In the squeeze band, cap the image and give the text a nudge */
 @media (min-width: 992px) and (max-width: 1199.98px) {
   .section.pt-0 .row.shadow.bg-white.p-5>div:first-child img {
     width: 180px !important;
-    /* 320–360 works well */
   }
 }
 
-// --- Button hover color overrides for CircuitVerse theme ---
 .btn-primary:active,
 .btn-primary:hover,
 .btn-primary.focus,
@@ -212,4 +202,43 @@ input.form-control:focus,
 textarea.form-control:focus {
   border-color: #40ba84;
   box-shadow: 0 0 0 0.2rem rgba(64, 186, 132, 0.25);
+}
+
+// Search bar
+.search-wrapper {
+  top: 0 !important;
+  bottom: 0 !important;
+  padding: 0 60px 0 24px;
+  background: #fff;
+  transition: opacity 0.2s ease, visibility 0.2s ease !important;
+}
+
+.search-wrapper form {
+  position: absolute;
+  top: 50%;
+  left: 24px;
+  right: 60px;
+  transform: translateY(-50%);
+}
+
+.search-box {
+  height: 42px !important;
+  width: 100% !important;
+  font-size: 15px;
+  border: 1.5px solid #e0e0e0 !important;
+  border-radius: 4px !important;
+  padding: 0 16px !important;
+
+  &:focus {
+    border-color: #40ba84 !important;
+    box-shadow: 0 0 0 3px rgba(64, 186, 132, 0.15) !important;
+    outline: 0;
+  }
+}
+
+.search-close {
+  top: 50% !important;
+  right: 16px !important;
+  transform: translateY(-50%) !important;
+  font-size: 16px !important;
 }
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
new file mode 100644
index 0000000..fba7080
--- /dev/null
+++ b/layouts/_default/single.html
@@ -0,0 +1,45 @@
+{{ define "main" }}
+
+<section class="section">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 mx-auto block shadow mb-5">
+        <h2>{{ .Title | markdownify }}</h2>
+        <div class="mb-3 post-meta">
+          <a href="{{ `author/` | relLangURL }}{{ .Params.Author | urlize | lower }}/">{{ .Params.Author | title }}</a>,
+          {{ .PublishDate.Format "Jan 2, 2006" }}, {{ range .Params.Categories }}
+          <a href="{{ `categories/` | relLangURL }}{{ . | urlize | lower }}/">{{ . | title }}</a>
+          {{ end }}
+        </div>
+        {{ if .Params.Image }}
+        <img src="{{ .Params.Image | relURL }}" class="img-fluid w-100 mb-4" alt="{{ .Title | markdownify }}">
+        {{ end }}
+        <div class="content mb-5">
+          {{ .Content }}
+        </div>
+        <div class="mb-3 post-meta">
+          {{range .Params.Tags }} <a href="{{ `tags/` | relLangURL}}{{ . | urlize | lower }}/">#{{ . | title }}</a>,  {{ end }}
+        </div>
+      </div>
+      <div class="col-lg-8 mx-auto block shadow">
+        {{ $related := .Site.RegularPages.Related . | first 5 }}
+        {{ with $related }}
+        <h3>See Also</h3>
+        <ul>
+          {{ range . }}
+          <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+          {{ end }}
+        </ul>
+        {{ end }}
+      </div>
+      {{ if site.Config.Services.Disqus.Shortname}}
+      <div class="col-lg-8 mx-auto block shadow">
+        <!-- comments -->
+        {{ template "_internal/disqus.html" . }}
+      </div>
+      {{ end }}
+    </div>
+  </div>
+</section>
+
+{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
new file mode 100644
index 0000000..db66ffe
--- /dev/null
+++ b/layouts/partials/header.html
@@ -0,0 +1,80 @@
+<header class="fixed-top navigation">
+  <div class="container">
+    <nav class="navbar px-0 navbar-expand-lg navbar-light bg-transparent">
+      <a class="navbar-brand" href="{{ .Site.BaseURL }}">
+        <img
+          class="img-fluid"
+          src="{{ .Site.Params.logo | relURL }}"
+          alt="{{ .Site.Title }}"
+        />
+      </a>
+      <button
+        class="navbar-toggler border-0 px-0"
+        type="button"
+        data-toggle="collapse"
+        data-target="#navigation"
+        aria-label="Toggle navigation"
+      >
+        <i class="ti-menu text-dark h3"></i>
+      </button>
+
+      <div class="collapse navbar-collapse text-center" id="navigation">
+        <ul class="navbar-nav ml-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="{{ .Site.BaseURL }}"
+              >{{ with .Site.Params.Home }} {{ . }} {{ end }}</a
+            >
+          </li>
+          {{ range .Site.Menus.main }} {{ if .HasChildren }}
+          <li class="nav-item dropdown">
+            
+              <a
+            
+              class="nav-link dropdown-toggle"
+              href="#"
+              role="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+            >
+              {{ .Name }}
+            </a>
+            <div class="dropdown-menu">
+              {{ range .Children }}
+              <a class="dropdown-item" href="{{ .URL | absURL }}"
+                >{{ .Name }}</a
+              >
+              {{ end }}
+            </div>
+          </li>
+          {{ else }}
+          <li class="nav-item">
+            <a class="nav-link" href="{{ .URL | absURL }}">{{ .Name }}</a>
+          </li>
+          {{ end }} {{ end }}
+        </ul>
+        {{ if .Site.Params.search.enable }} {{ "<!-- search -->" | safeHTML }}
+        <div class="search">
+          <button id="searchOpen" class="search-btn" aria-label="Open search">
+            <i class="ti-search"></i>
+          </button>
+          <div class="search-wrapper">
+            <form action="{{ `search` | absURL }}">
+              <input
+                class="search-box"
+                id="search-query"
+                name="s"
+                type="search"
+                placeholder="Search posts..."
+              />
+            </form>
+            <button id="searchClose" class="search-close" aria-label="Close search">
+              <i class="ti-close text-dark"></i>
+            </button>
+          </div>
+        </div>
+        {{ end }}
+      </div>
+    </nav>
+  </div>
+</header>