diff --git a/package.json b/package.json
index 75d0d1e..d771a2e 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "astroplate",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Astro and Tailwindcss boilerplate",
   "author": "zeon.studio",
   "license": "MIT",
diff --git a/src/layouts/partials/Header.astro b/src/layouts/partials/Header.astro
index 1f70aad..1b7bf04 100755
--- a/src/layouts/partials/Header.astro
+++ b/src/layouts/partials/Header.astro
@@ -119,13 +119,13 @@ const { pathname } = Astro.url;
     <div class="order-1 ml-auto flex items-center md:order-2 lg:ml-0">
       {
         settings.search && (
-          <span
-            class="mr-5 inline-block border-r border-border pr-5 text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white cursor-pointer"
+          <button
+            class="border-border text-dark hover:text-primary dark:border-darkmode-border mr-5 inline-block border-r pr-5 text-xl dark:text-white dark:hover:text-darkmode-primary"
             aria-label="search"
             data-search-trigger
           >
             <IoSearch />
-          </span>
+          </button>
         )
       }
       <ThemeSwitcher className="mr-5" />
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 857cf66..3d30f17 100755
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -3,7 +3,7 @@ html {
 }
 
 body {
-  @apply bg-body font-primary font-normal leading-relaxed text-text dark:bg-darkmode-body dark:text-darkmode-text;
+  @apply bg-body dark:bg-darkmode-body font-primary font-normal leading-relaxed text-text dark:text-darkmode-text;
 }
 
 h1,
diff --git a/src/styles/components.scss b/src/styles/components.scss
index b48309b..777e9e5 100755
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -155,7 +155,7 @@
 // content style
 .content {
   @apply prose max-w-none;
-  @apply prose-headings:mb-[.3em] prose-headings:mt-[.6em];
+  @apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark prose-headings:dark:text-darkmode-dark;
   @apply prose-h1:text-h1-sm md:prose-h1:text-h1;
   @apply prose-h2:text-h2-sm md:prose-h2:text-h2;
   @apply prose-h3:text-h3-sm md:prose-h3:text-h3;
diff --git a/src/styles/navigation.scss b/src/styles/navigation.scss
index 3a17be9..b410de0 100755
--- a/src/styles/navigation.scss
+++ b/src/styles/navigation.scss
@@ -36,7 +36,7 @@ input#nav-toggle:checked ~ #nav-menu {
 // }
 
 .nav-link {
-  @apply block p-3 font-semibold transition text-dark hover:text-primary dark:text-darkmode-dark dark:hover:text-darkmode-primary lg:px-2 lg:py-3;
+  @apply text-dark hover:text-primary dark:text-darkmode-dark dark:hover:text-darkmode-primary block p-3 font-semibold transition lg:px-2 lg:py-3;
 }
 
 .nav-dropdown {