diff --git a/assets/css/typography.css b/assets/css/typography.css
index 00b8b74..61bc3f9 100644
--- a/assets/css/typography.css
+++ b/assets/css/typography.css
@@ -117,3 +117,15 @@ article.typesetting-article {
     @apply no-underline hover:no-underline after:hidden;
   }
 }
+
+article details > summary {
+  &::-webkit-details-marker {
+    @apply hidden;
+  }
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
+    height: 1.2em;
+    width: 1.2em;
+    vertical-align: -4px;
+  }
+}
diff --git a/content/docs/introduction.md b/content/docs/introduction.md
index cd1c18d..4867e36 100644
--- a/content/docs/introduction.md
+++ b/content/docs/introduction.md
@@ -3,4 +3,4 @@ title: Introduction
 weight: 1
 ---
 
-Introduction to the project.
+Hextra is a modern, responsive Hugo theme built with [Tailwind CSS](https://tailwindcss.com/).
diff --git a/data/icons.yaml b/data/icons.yaml
index d2323d5..f8c7f87 100644
--- a/data/icons.yaml
+++ b/data/icons.yaml
@@ -2,7 +2,7 @@
 #
 # Example usage in templates using the icon.html partial:
 #
-# {{ partial "utils/icon.html" (dict "context" . "name" "github" "attributes" "height=24") }}
+# {{ partial "utils/icon.html" (dict "name" "github" "attributes" "height=24") }}
 
 github: >
   <svg fill="currentColor" viewBox="3 3 18 18">
diff --git a/layouts/404.html b/layouts/404.html
index 1a4af0e..0628f45 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,29 +1,27 @@
-{{ define "main" }}
-  <div style='font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center'>
-    <div>
-      <style>
+<div style='font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; height:100vh; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center'>
+  <div>
+    <style>
+      body {
+        color: #000;
+        background: #fff;
+        margin: 0;
+      }
+      .next-error-h1 {
+        border-right: 1px solid rgba(0, 0, 0, 0.3);
+      }
+      @media (prefers-color-scheme: dark) {
         body {
-          color: #000;
-          background: #fff;
-          margin: 0;
+          color: #fff;
+          background: #000;
         }
         .next-error-h1 {
-          border-right: 1px solid rgba(0, 0, 0, 0.3);
+          border-right: 1px solid rgba(255, 255, 255, 0.3);
         }
-        @media (prefers-color-scheme: dark) {
-          body {
-            color: #fff;
-            background: #000;
-          }
-          .next-error-h1 {
-            border-right: 1px solid rgba(255, 255, 255, 0.3);
-          }
-        }
-      </style>
-      <h1 class="next-error-h1" style='display: inline-block; margin: 0 20px 0 0; padding-right: 23px; font-size: 24px; font-weight: 500; vertical-align: top; line-height: 49px; font-feature-settings: "rlig" 1,"calt" 1,"ss01" 1,"ss06" 1 !important;'>404</h1>
-      <div style="display: inline-block; text-align: left">
-        <h2 style="font-size: 14px; font-weight: 400; line-height: 49px; margin: 0">This page could not be found.</h2>
-      </div>
+      }
+    </style>
+    <h1 class="next-error-h1" style='display: inline-block; margin: 0 20px 0 0; padding-right: 23px; font-size: 24px; font-weight: 500; vertical-align: top; line-height: 49px; font-feature-settings: "rlig" 1,"calt" 1,"ss01" 1,"ss06" 1 !important;'>404</h1>
+    <div style="display: inline-block; text-align: left">
+      <h2 style="font-size: 14px; font-weight: 400; line-height: 49px; margin: 0">This page could not be found.</h2>
     </div>
   </div>
-{{ end }}
+</div>
diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
index b0e9b80..49d10f9 100644
--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -16,8 +16,8 @@
   {{- end -}}
   <div class="opacity-0 transition group-hover/code:opacity-100 flex gap-1 absolute m-[11px] right-0 {{ if $filename }}top-8{{ else }}top-0{{ end }}">
     <button class="code-copy-btn group/copybtn transition-all active:opacity-50 bg-primary-700/5 border border-black/5 text-gray-600 hover:text-gray-900 rounded-md p-1.5 dark:bg-primary-300/10 dark:border-white/10 dark:text-gray-400 dark:hover:text-gray-50" title="Copy code" data-clipboard-target="#code-block-{{ .Ordinal }}">
-      {{ partial "utils/icon.html" (dict "context" page "name" "copy" "attributes" "class=\"group-[.copied]/copybtn:hidden pointer-events-none h-4 w-4\"") }}
-      {{ partial "utils/icon.html" (dict "context" page "name" "check" "attributes" "class=\"hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4\"") }}
+      {{ partial "utils/icon.html" (dict "name" "copy" "attributes" "class=\"group-[.copied]/copybtn:hidden pointer-events-none h-4 w-4\"") }}
+      {{ partial "utils/icon.html" (dict "name" "check" "attributes" "class=\"hidden group-[.copied]/copybtn:block success-icon pointer-events-none h-4 w-4\"") }}
     </button>
   </div>
 </div>
diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
index 8540d7f..3264068 100644
--- a/layouts/partials/breadcrumb.html
+++ b/layouts/partials/breadcrumb.html
@@ -4,7 +4,7 @@
       <div class="whitespace-nowrap transition-colors min-w-[24px] overflow-hidden text-ellipsis">
         <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
       </div>
-      {{ partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0\"") }}
+      {{ partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"w-3.5 shrink-0\"") }}
     {{ end }}
   {{ end }}
   <div class="whitespace-nowrap transition-colors font-medium text-gray-700 contrast-more:font-bold contrast-more:text-current dark:text-gray-100 contrast-more:dark:text-current">
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index e63c0c6..e33257b 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -5,7 +5,7 @@
       <div>
         <a class="flex items-center gap-1 text-current" target="_blank" rel="noopener noreferrer" title="Hugo homepage" href="https://gohugo.io/">
           <span>Powered by</span>
-          {{ partial "utils/icon.html" (dict "context" . "name" "hugo-full" "attributes" "height=20") }}
+          {{ partial "utils/icon.html" (dict "name" "hugo-full" "attributes" "height=20") }}
         </a>
       </div>
       <p class="mt-6 text-xs">© 2023 Hextra Project.</p>
diff --git a/layouts/partials/pager.html b/layouts/partials/pager.html
index 3771dc3..14d883d 100644
--- a/layouts/partials/pager.html
+++ b/layouts/partials/pager.html
@@ -6,14 +6,14 @@
   <div class="mb-8 flex items-center border-t pt-8 dark:border-neutral-800 contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400 print:hidden">
     {{- if $prev -}}
       <a href="{{ $prev.RelPermalink }}" class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:pr-4 rtl:pl-4">
-        {{- partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
+        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0 ltr:rotate-180\"") -}}
         {{- $prev.Title -}}
       </a>
     {{- end -}}
     {{- if $next -}}
       <a href="{{ $next.RelPermalink }}" class="flex max-w-[50%] items-center gap-1 py-4 text-base font-medium text-gray-600 transition-colors [word-break:break-word] hover:text-primary-600 dark:text-gray-300 md:text-lg ltr:ml-auto ltr:pl-4 ltr:text-right rtl:mr-auto rtl:pr-4 rtl:text-left">
         {{- $next.LinkTitle -}}
-        {{- partial "utils/icon.html" (dict "context" . "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0\"") -}}
+        {{- partial "utils/icon.html" (dict "name" "chevron-right" "attributes" "class=\"inline h-5 shrink-0\"") -}}
       </a>
     {{- end -}}
   </div>
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index b67472c..e425d33 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -55,11 +55,11 @@
     <div class="grow flex flex-col">
       <button title="Change theme" class="h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50" id="theme-toggle" type="button" aria-label="Toggle Dark Mode">
         <div id="theme-toggle-light-icon" class="hidden flex items-center gap-2 capitalize">
-          {{- partial "utils/icon.html" (dict "context" . "name" "sun" "attributes" "height=12") -}}
+          {{- partial "utils/icon.html" (dict "name" "sun" "attributes" "height=12") -}}
           <span>Light</span>
         </div>
         <div id="theme-toggle-dark-icon" class="hidden flex items-center gap-2 capitalize">
-          {{- partial "utils/icon.html" (dict "context" . "name" "moon" "attributes" "height=12") -}}
+          {{- partial "utils/icon.html" (dict "name" "moon" "attributes" "height=12") -}}
           <span>Dark</span>
         </div>
       </button>
diff --git a/layouts/partials/utils/icon.html b/layouts/partials/utils/icon.html
index c25b622..0119c24 100644
--- a/layouts/partials/utils/icon.html
+++ b/layouts/partials/utils/icon.html
@@ -1,4 +1,4 @@
-{{- $icon := index .context.Site.Data.icons .name -}}
+{{- $icon := index site.Data.icons .name -}}
 
 {{- if not $icon -}}
   {{ errorf "icon %q not found" .name }}
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
index 9b4dfef..af67ce3 100644
--- a/layouts/shortcodes/card.html
+++ b/layouts/shortcodes/card.html
@@ -10,7 +10,7 @@
 >
   <span class="flex font-semibold items-start gap-2 p-4 text-gray-700 hover:text-gray-900 dark:text-neutral-200 dark:hover:text-neutral-50">
     {{ with $icon }}
-      {{ partial "utils/icon.html" (dict "context" $context "name" $icon) }}
+      {{ partial "utils/icon.html" (dict "name" $icon) }}
     {{ end }}
     {{ $title }}
   </span>
diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
new file mode 100644
index 0000000..da71ae0
--- /dev/null
+++ b/layouts/shortcodes/details.html
@@ -0,0 +1,11 @@
+{{- $title := .Get "title" | default "" -}}
+{{- $closed := eq (.Get "closed") "true" | default false -}}
+
+<details class="last-of-type:mb-0 rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2 mt-4" data-expanded="true" {{ if not $closed }}open{{ end }}>
+  <summary class="flex items-center cursor-pointer select-none list-none p-1 transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800 before:mr-1 before:inline-block before:transition-transform before:content-[''] dark:before:invert rtl:before:rotate-180 [[data-expanded]>&]:before:rotate-90">
+    <strong class="text-lg">{{ $title | markdownify }}</strong>
+  </summary>
+  <div class="p-2 overflow-hidden">
+    {{ .InnerDeindent | markdownify }}
+  </div>
+</details>