diff --git a/website/src/theme/Details/index.js b/website/src/theme/Details/index.js
new file mode 100644
index 000000000..0f3949654
--- /dev/null
+++ b/website/src/theme/Details/index.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Details as DetailsGeneric } from '@docusaurus/theme-common/Details';
+import styles from './styles.module.css';
+// Should we have a custom details/summary comp in Infima instead of reusing
+// alert classes?
+const InfimaClasses = 'alert alert--info custom-details';
+export default function Details({ ...props }) {
+  return (
+    <DetailsGeneric
+      {...props}
+      className={clsx(InfimaClasses, styles.details, props.className)}
+    />
+  );
+}
diff --git a/website/src/theme/Details/styles.module.css b/website/src/theme/Details/styles.module.css
new file mode 100644
index 000000000..c74a9b6bc
--- /dev/null
+++ b/website/src/theme/Details/styles.module.css
@@ -0,0 +1,31 @@
+.details {
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  background-color: var(--wm-details-background);
+  border-color: transparent;
+  border-radius: 8px;
+}
+summary {
+  display: flex; /* Align icon and text */
+  justify-content: space-between; /* Space between text and icon */
+  cursor: pointer; /* Pointer cursor on hover */
+  align-items: center;
+}
+
+summary::before {
+  display: none;
+}
+summary::after {
+  content: "+"; /* Default icon */
+  color: var(--wm-details-icon-color); /* Icon color */
+  font-weight: bold;
+  font-size: 1.5rem; /* Icon size */
+  transition: transform 0.3s ease; /* Smooth icon rotation */
+}
+
+/* Rotate icon when details is open */
+details[open] summary::after {
+    content: "-"; /* Icon when open */
+    transform: rotate(180deg); /* Rotate icon */
+}
+
diff --git a/website/static/css/custom.css b/website/static/css/custom.css
index 92c6694c6..f34a3534b 100644
--- a/website/static/css/custom.css
+++ b/website/static/css/custom.css
@@ -81,6 +81,9 @@
     --ifm-tabs-prev-button-image:url("/img/prevArrow.svg");
     --mermaid-background-color:#c2e7ff;
     --mermaid-border-color:#f6f8fd;
+    --wm-details-background: #F9F9FA;
+    --wm-details-icon-color: #424A52;
+    --ifm-alert-background-note-color: rgb(0, 82, 204,10%);
     --wm-category-arrow-image:url("/img/chevron-right-category.svg");
 
 }
@@ -168,7 +171,9 @@ html[data-theme="dark"] {
      --mermaid-border-color:#c2e7ff;
      --wm-category-arrow-image:url("/img/chevron-right-category-dark.svg");
      --ifm-toc-link-color-dark:#000000;
-     
+     --wm-details-background: #192847;
+     --ifm-alert-background-note-color: #18243D;
+     --wm-details-icon-color: #FFFFFFE5;
 }
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');
 /* your custom css */
@@ -176,6 +181,11 @@ body {
     margin: 0;
     /* font-family: 'Roboto', sans-serif; */
 }
+
+.theme-admonition-note {
+    background: var(--ifm-alert-background-note-color);
+  }
+
 .alert--impact {
     --ifm-alert-background-color: #FFFAE8;
     --ifm-alert-foreground-color: rgb(66,69,73);