diff --git a/.changeset/famous-turkeys-hunt.md b/.changeset/famous-turkeys-hunt.md
new file mode 100644
index 000000000..169a3a8bb
--- /dev/null
+++ b/.changeset/famous-turkeys-hunt.md
@@ -0,0 +1,7 @@
+---
+'myst-to-react': patch
+'@myst-theme/frontmatter': patch
+'@myst-theme/styles': patch
+---
+
+Improve margins on children and balancing of callouts and equations.
diff --git a/.changeset/khaki-moles-drive.md b/.changeset/khaki-moles-drive.md
new file mode 100644
index 000000000..6491f81fd
--- /dev/null
+++ b/.changeset/khaki-moles-drive.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/frontmatter': patch
+---
+
+Add underline on hover to DOI link.
diff --git a/packages/frontmatter/src/FrontmatterBlock.tsx b/packages/frontmatter/src/FrontmatterBlock.tsx
index c2fe00871..956b8e9d2 100644
--- a/packages/frontmatter/src/FrontmatterBlock.tsx
+++ b/packages/frontmatter/src/FrontmatterBlock.tsx
@@ -174,7 +174,7 @@ export function DoiBadge({ doi: possibleLink, className }: { doi?: string; class
   return (
     <div className={classNames('flex-none', className)} title="DOI (Digital Object Identifier)">
       <a
-        className="font-light hover:font-light no-underline text-inherit hover:text-inherit"
+        className="font-light hover:font-light no-underline hover:underline text-inherit hover:text-inherit"
         target="_blank"
         rel="noopener noreferrer"
         href={url}
@@ -289,7 +289,7 @@ export function FrontmatterBlock({
     subject || github || venue || biblio || open_access || license || hasExports || isJupyter;
   const hasDateOrDoi = doi || date;
   return (
-    <>
+    <div className="mb-8">
       {hasHeaders && (
         <div className="flex mt-3 mb-5 text-sm font-light items-center h-6">
           {subject && (
@@ -328,6 +328,6 @@ export function FrontmatterBlock({
           <DoiBadge doi={doi} />
         </div>
       )}
-    </>
+    </div>
   );
 }
diff --git a/packages/myst-to-react/src/admonitions.tsx b/packages/myst-to-react/src/admonitions.tsx
index 5ad7d2abc..4123c3523 100644
--- a/packages/myst-to-react/src/admonitions.tsx
+++ b/packages/myst-to-react/src/admonitions.tsx
@@ -156,7 +156,7 @@ export function Admonition({
     <WrapperElement
       dropdown={dropdown}
       className={classNames(
-        'my-4 shadow-md dark:shadow-2xl dark:shadow-neutral-900',
+        'my-5 shadow-md dark:shadow-2xl dark:shadow-neutral-900',
         'bg-gray-50 dark:bg-stone-800',
         'overflow-hidden',
         {
diff --git a/packages/myst-to-react/src/code.tsx b/packages/myst-to-react/src/code.tsx
index 6efddf239..b55b24065 100644
--- a/packages/myst-to-react/src/code.tsx
+++ b/packages/myst-to-react/src/code.tsx
@@ -45,7 +45,7 @@ export function CodeBlock(props: Props) {
   } = props;
   const highlightLines = new Set(emphasizeLines);
   const borderClass =
-    'rounded shadow-md dark:shadow-2xl dark:shadow-neutral-900 my-4 text-sm border border-l-4 border-l-blue-400 border-gray-200 dark:border-l-blue-400 dark:border-gray-800';
+    'rounded shadow-md dark:shadow-2xl dark:shadow-neutral-900 my-5 text-sm border border-l-4 border-l-blue-400 border-gray-200 dark:border-l-blue-400 dark:border-gray-800';
   return (
     <div
       className={classNames('relative group not-prose overflow-auto', className, {
diff --git a/packages/myst-to-react/src/dropdown.tsx b/packages/myst-to-react/src/dropdown.tsx
index e2c501bc2..d328e2351 100644
--- a/packages/myst-to-react/src/dropdown.tsx
+++ b/packages/myst-to-react/src/dropdown.tsx
@@ -29,7 +29,7 @@ export function Details({
   return (
     <details
       className={classNames(
-        'rounded-md my-4 shadow dark:shadow-2xl dark:shadow-neutral-900 overflow-hidden',
+        'rounded-md my-5 shadow dark:shadow-2xl dark:shadow-neutral-900 overflow-hidden',
         'bg-gray-50 dark:bg-stone-800',
       )}
       open={open}
diff --git a/packages/myst-to-react/src/links/index.tsx b/packages/myst-to-react/src/links/index.tsx
index fd60fca63..fac972954 100644
--- a/packages/myst-to-react/src/links/index.tsx
+++ b/packages/myst-to-react/src/links/index.tsx
@@ -111,7 +111,7 @@ export const link: NodeRenderer<TransformedLink> = (node, children) => {
 export const linkBlock: NodeRenderer<TransformedLink> = (node, children) => {
   const iconClass = 'w-6 h-6 self-center transition-transform flex-none ml-3';
   const containerClass =
-    'flex-1 p-4 my-4 block border font-normal hover:border-blue-500 dark:hover:border-blue-400 no-underline hover:text-blue-600 dark:hover:text-blue-400 text-gray-600 dark:text-gray-100 border-gray-200 dark:border-gray-500 rounded shadow-sm hover:shadow-lg dark:shadow-neutral-700';
+    'flex-1 p-4 my-5 block border font-normal hover:border-blue-500 dark:hover:border-blue-400 no-underline hover:text-blue-600 dark:hover:text-blue-400 text-gray-600 dark:text-gray-100 border-gray-200 dark:border-gray-500 rounded shadow-sm hover:shadow-lg dark:shadow-neutral-700';
   const internal = node.internal ?? false;
   const nested = (
     <div className="flex align-middle h-full">
diff --git a/packages/myst-to-react/src/math.tsx b/packages/myst-to-react/src/math.tsx
index 440285ec7..287e7897f 100644
--- a/packages/myst-to-react/src/math.tsx
+++ b/packages/myst-to-react/src/math.tsx
@@ -52,7 +52,7 @@ const mathRenderer: NodeRenderer<MathLike> = (node) => {
     }
     const id = node.html_id || node.identifier || node.key;
     return (
-      <div key={node.key} id={id} className={classNames('flex group')}>
+      <div key={node.key} id={id} className="flex group my-5">
         <div
           dangerouslySetInnerHTML={{ __html: node.html }}
           className="overflow-x-auto flex-grow"
diff --git a/styles/block-styles.css b/styles/block-styles.css
index b1ec048b0..336d381e3 100644
--- a/styles/block-styles.css
+++ b/styles/block-styles.css
@@ -4,10 +4,10 @@
 
 @layer base {
   .shaded {
-    @apply p-2 bg-slate-100;
+    @apply pt-5 bg-slate-100 dark:bg-slate-800 mb-3;
   }
   .shaded-children > * {
-    @apply p-2 bg-slate-100;
+    @apply p-2 bg-slate-100 dark:bg-slate-800;
   }
   .rounded-children > * {
     @apply rounded;
diff --git a/styles/figures.css b/styles/figures.css
index f4b015e48..2981d746d 100644
--- a/styles/figures.css
+++ b/styles/figures.css
@@ -8,3 +8,11 @@ figure.quote figcaption > p:before {
 figure.code > div {
   margin: 0;
 }
+figure figcaption > p {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+figure img {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
diff --git a/styles/grid-system.css b/styles/grid-system.css
index f4dad4248..0256747ac 100644
--- a/styles/grid-system.css
+++ b/styles/grid-system.css
@@ -9,6 +9,8 @@
   .article-grid > * {
     /* The default is spanning the body for any child component */
     @apply col-body;
+    /* Grids do not have margin-collapse, so each direct child needs to be addressed */
+    margin-top: 0 !important;
   }
   .article-grid-gap {
     @apply gap-1 md:gap-2 xl:gap-3 2xl:gap-4;
diff --git a/styles/math.css b/styles/math.css
index 79cea8620..ae1e22b4b 100644
--- a/styles/math.css
+++ b/styles/math.css
@@ -1,3 +1,6 @@
+.katex-display {
+  margin: 0 !important;
+}
 /* Hide katex generated equation numbers */
 .katex .eqn-num {
   opacity: 0;