diff --git a/assets/scss/components/_details.scss b/assets/scss/components/_details.scss
index c9289b5..0b56bef 100644
--- a/assets/scss/components/_details.scss
+++ b/assets/scss/components/_details.scss
@@ -2,51 +2,54 @@ details {
   display: block;
   border: 1px solid $gray-300;
   border-radius: 4px;
-  padding: 0.5rem 0.5rem 0;
+  padding: 0.5rem 1rem 0;
   margin: 0.5rem 0;
 }
 
-summary {
+/*
+details summary {
   &::marker {
     content: "";
   }
 }
+*/
 
-details summary {
-  display: inline-block;
-  width: calc(100% + 1rem);
-  margin: -0.5rem -0.5rem 0;
-  padding: 0.5rem;
+summary {
+  list-style: none;
+  display: inline;
+  width: calc(100% + 2rem);
+  margin: -0.5rem -1rem 0;
+  padding: 0.5rem 0.75rem;
 }
 
-details summary:hover {
+summary::-webkit-details-marker {
+  display: none;
+}
+
+summary:hover {
   background: $gray-100;
 }
 
-/*
-details > summary:first-of-type {
-  display: inline-block;
-}
-*/
-
 details summary::before {
   display: inline-block;
   content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
   transition: transform 0.35s ease;
   transform-origin: center center;
-  margin-right: 0.125rem;
+  margin-right: 0.375rem;
 }
 
 details[open] > summary::before {
   transform: rotate(90deg);
 }
 
+/*
 details summary > * {
-  display: inline;
+  display: inline-block;
 }
+*/
 
 details[open] {
-  padding: 0.5rem;
+  padding: 0.5rem 1rem;
 }
 
 details[open] > summary {
@@ -57,7 +60,7 @@ details[open] > summary {
 details h2,
 details h3,
 details h4 {
-  margin: 0 0 1rem;
+  margin: 1rem 0 0.5rem;
 }
 
 details p:last-child {
diff --git a/config/postcss.config.js b/config/postcss.config.js
index 6f9b6c9..f9d1a18 100644
--- a/config/postcss.config.js
+++ b/config/postcss.config.js
@@ -26,7 +26,6 @@ module.exports = {
           './assets/scss/components/_alerts.scss',
           './assets/scss/components/_buttons.scss',
           './assets/scss/components/_code.scss',
-          './assets/scss/components/_details.scss',
           './assets/scss/components/_diagrams.scss',
           './assets/scss/components/_syntax.scss',
           './assets/scss/components/_search.scss',
diff --git a/content/en/docs/prologue/introduction.md b/content/en/docs/prologue/introduction.md
index 83785a7..2ff8d8e 100644
--- a/content/en/docs/prologue/introduction.md
+++ b/content/en/docs/prologue/introduction.md
@@ -50,6 +50,8 @@ Doks is a Hugo theme for building secure, fast, and SEO-ready documentation webs
 
 {{< details "Headings" >}}
 
+Paragraph before heading.
+
 ## Heading 2
 
 Doks is a Hugo theme for building secure, fast, and SEO-ready documentation websites, which you can easily update and customize.
diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html
index 02380ef..61a7183 100644
--- a/layouts/shortcodes/details.html
+++ b/layouts/shortcodes/details.html
@@ -1,6 +1,4 @@
 <details{{ with .Get 1 }} {{ . | safeHTML }}{{ end -}}>
-  <summary>
-    {{ with .Get 0 }}{{ . | safeHTML }}{{ else }}{{ errorf "No summary provided"}}{{ end }}
-  </summary>
+  <summary>{{ with .Get 0 -}}{{ . | safeHTML }}{{ else -}}{{ errorf "No summary provided"}}{{ end -}}</summary>
   {{ with .Inner -}}{{ . | markdownify}}{{ else -}}{{ errorf "No details provided"}}{{ end -}}
 </details>
\ No newline at end of file