diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index 1f4694af..5d735812 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -1014,6 +1014,26 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   align-items: flex-start;
 }
 
+/* Details/Summary */
+details summary {
+  color: oklch(var(--color-brand));
+  transition: text-decoration-color 0.15s ease-in-out;
+  text-decoration: underline;
+  text-decoration-color: oklch(var(--color-brand) / 0.3);
+
+  & ~ * {
+    margin-top: 1rem;
+  }
+}
+
+details summary:hover {
+  text-decoration-color: oklch(var(--color-brand) / 0.8);
+}
+
+details:hover {
+  cursor: pointer;
+}
+
 /* Table of Contents */
 #TableOfContents {
   /* Close all TOC on sidebar */
@@ -1096,7 +1116,7 @@ h3:target,
 h4:target,
 h5:target,
 h6:target {
-  color: var(--color-brand);
+  color: oklch(var(--color-brand));
 
   .headerlink::before {
     display: block !important;
diff --git a/exampleSite/content/test-product/everything.md b/exampleSite/content/test-product/everything.md
index 62d6d389..fd2e9467 100644
--- a/exampleSite/content/test-product/everything.md
+++ b/exampleSite/content/test-product/everything.md
@@ -64,3 +64,9 @@ This won't render anything.
 
 {{< see-also >}}See also!{{< /see-also >}}
 
+
+## details
+<details open>
+    <summary>Learn how to pin NGINX Plus to a specific version</summary>
+    And this is the content on how to do so.
+</details>
\ No newline at end of file