diff --git a/assets/css/custom.css b/assets/css/custom.css
index 9fbbc62..6994a56 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -21,3 +21,8 @@
 .hextra-footer:is(html[class~="dark"] *) {
     background-color: transparent;
 }
+
+.hextra-custom-footer {
+    padding-left: max(env(safe-area-inset-left),0rem);
+    padding-right: max(env(safe-area-inset-right),0rem);
+}
diff --git a/go.mod b/go.mod
index 81a6d13..3b5b03d 100644
--- a/go.mod
+++ b/go.mod
@@ -2,4 +2,5 @@ module github.com/netduma/knowledge-base
 
 go 1.21
 
-require github.com/Gr3q/hextra v0.9.1 // indirect
+require github.com/Gr3q/hextra v0.9.3 // indirect
+// replace github.com/Gr3q/hextra => ../hextra
diff --git a/go.sum b/go.sum
index c94065e..7d19e27 100644
--- a/go.sum
+++ b/go.sum
@@ -1,4 +1,2 @@
-github.com/Gr3q/hextra v0.8.7 h1:Q15pav989E78A33uBQt4xa/T5K0fVAjJCwG0VShSu08=
-github.com/Gr3q/hextra v0.8.7/go.mod h1:HiSltOho1J432ZAkI6xpoH6q69uD7H75/U6rIhhKqsk=
-github.com/Gr3q/hextra v0.9.1 h1:XDGVG48rBWhMz6xatmY1ipSogzMiWUdPp00M2L6HrHY=
-github.com/Gr3q/hextra v0.9.1/go.mod h1:HiSltOho1J432ZAkI6xpoH6q69uD7H75/U6rIhhKqsk=
+github.com/Gr3q/hextra v0.9.3 h1:1dlMYbI6b84VyRJs+5DPqHI+l5iD2a9aXGZs3bk0uSs=
+github.com/Gr3q/hextra v0.9.3/go.mod h1:HiSltOho1J432ZAkI6xpoH6q69uD7H75/U6rIhhKqsk=
diff --git a/layouts/partials/custom/footer.html b/layouts/partials/custom/footer.html
index 09b301b..f26b467 100644
--- a/layouts/partials/custom/footer.html
+++ b/layouts/partials/custom/footer.html
@@ -5,24 +5,24 @@
     <div class="pl-12 md:pl-24 flex flex-col gap-6 md:flex-row md:gap-24 py-6 md:pb-12 text-black dark:text-white">
         <div class="flex flex-col items-start">
             <h2 class="text-lg">Company</h2>
-            <button class="h-6 px-1 text-xs mt-2" href="/hello">About</button>
-            <button class="h-6 px-1 text-xs" href="/hello">Case Studies</button>
-            <button class="h-6 px-1 text-xs" href="/hello">Support</button>
-            <button class="h-6 px-1 text-xs" href="/hello">Contact</button>
+            <a class="h-6 px-1 text-xs mt-2" href="/hello">About</a>
+            <a class="h-6 px-1 text-xs" href="/hello">Case Studies</a>
+            <a class="h-6 px-1 text-xs" href="/hello">Support</a>
+            <a class="h-6 px-1 text-xs" href="/hello">Contact</a>
         </div>
         <div class="flex flex-col items-start">
             <h2 class="text-lg">Community</h2>
-            <button class=" h-6 px-1 text-xs mt-2" href="/hello">Knowledge Base</button>
-            <button class=" h-6 px-1 text-xs" href="/hello">News</button>
-            <button class=" h-6 px-1 text-xs" href="/hello">Blog</button>
-            <button class=" h-6 px-1 text-xs" href="/hello">Forum</button>
+            <a class=" h-6 px-1 text-xs mt-2" href="/hello">Knowledge Base</a>
+            <a class=" h-6 px-1 text-xs" href="/hello">News</a>
+            <a class=" h-6 px-1 text-xs" href="/hello">Blog</a>
+            <a class=" h-6 px-1 text-xs" href="/hello">Forum</a>
         </div>
         <div class="flex flex-col items-start">
             <h2 class="text-lg">Legal</h2>
-            <button class=" h-6 px-1 text-xs mt-2" href="/hello">Terms</button>
-            <button class=" h-6 px-1 text-xs" href="/hello">Cookies Policy</button>
-            <button class=" h-6 px-1 text-xs" href="/hello">Privacy Policy</button>
-            <button class=" h-6 px-1 text-xs" href="/hello">EULA</button>
+            <a class=" h-6 px-1 text-xs mt-2" href="/hello">Terms</a>
+            <a class=" h-6 px-1 text-xs" href="/hello">Cookies Policy</a>
+            <a class=" h-6 px-1 text-xs" href="/hello">Privacy Policy</a>
+            <a class=" h-6 px-1 text-xs" href="/hello">EULA</a>
         </div>
     </div>
 </div>