diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index f58b77f4..585c70f3 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -881,6 +881,26 @@ nav {
   [data-grid="half"] {
     grid-column: span 6;
   }
+
+  [data-grid="breakout"] {
+    grid-column: 1 / -1;
+    width: calc(100vw - var(--sidebar-width) - 4rem);
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: calc(-1 * (50vw - var(--sidebar-width) / 2 - 2rem));
+    margin-right: calc(-1 * (50vw - var(--sidebar-width) / 2 - 2rem));
+    max-width: calc(100vw - var(--sidebar-width) - 4rem);
+  }
+
+  @media (max-width: 68rem) {
+    [data-grid="breakout"] {
+      width: 100vw;
+      margin-left: -50vw;
+      margin-right: -50vw;
+      max-width: 100vw;
+    }
+  }
 }
 
 .content {
@@ -921,19 +941,16 @@ nav {
       }
     }
   }
-
-  /* Allow redocly to fill the entire container */
-  &.content__redocly {
-    min-width: 100%;
-    margin: 0;
-
-    #api-component {
-      z-index: 0;
-      position: relative;
-      display: block;
-      max-width: 100%;
-      margin-block-start: 1rem;
-    }
+}
+/* Allow redocly to fill the entire container */
+.content .content__redocly {
+  border-top: 1px solid oklch(var(--color-divider));
+  border-bottom: 1px solid oklch(var(--color-divider));
+  #api-component {
+    z-index: 0;
+    position: relative;
+    display: block;
+    max-width: 100%;
   }
 }
 
diff --git a/exampleSite/content/test-product/redoc/api-reference.md b/exampleSite/content/test-product/redoc/api-reference.md
index 6f24b960..11729ce5 100644
--- a/exampleSite/content/test-product/redoc/api-reference.md
+++ b/exampleSite/content/test-product/redoc/api-reference.md
@@ -7,5 +7,11 @@ tags:
   - api
 doctypes:
   - reference
+nd-api-reference: "./api/example.json"
 ---
-{{< openapi spec="./api/example.json" >}}
+
+## Introduction
+
+Welcome to the API Reference documentation for the example book API. This documentation provides detailed information about the API endpoints, request/response formats, and other relevant details.
+
+## API Specification
diff --git a/exampleSite/content/test-product/redoc/live-example.md b/exampleSite/content/test-product/redoc/live-example.md
index fc05a23b..34d7e3fe 100644
--- a/exampleSite/content/test-product/redoc/live-example.md
+++ b/exampleSite/content/test-product/redoc/live-example.md
@@ -7,5 +7,5 @@ tags:
   - api
 doctypes:
   - reference
+nd-api-reference: "./api/one.json"
 ---
-{{< openapi spec="./api/one.json" >}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 4284f4e2..93145bcc 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -20,6 +20,12 @@ <h1>{{ .Title }}</h1>
         {{ if eq .Page.Draft true }}{{ partial "draft-badge.html" . }}{{ end }}
         {{ if in .Params.doctypes "beta" }}{{ partial "beta-badge" . }}{{ end }}
 
+        {{ with (index .Page.Params "nd-api-reference") }}
+        <div class="content__redocly" data-grid="breakout">
+            {{ partial "openapi.html" . }}
+        </div>
+        {{ end }}
+
         {{ if .Page.Lastmod }}
         <div class="last-modified">
             {{ partial "page-meta-links" . }}
@@ -28,13 +34,13 @@ <h1>{{ .Title }}</h1>
 
         {{ partial "version-list" . }}
         {{ partial "qualtrics-feedback.html" }}
-
-    </section>
-    </section>
+    </article>
 </main>
 
 
 
+
+
 <!-- If there is a script defined in the page metadata, load it  -->
 {{if .Params.script}}
     {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
diff --git a/layouts/partials/openapi.html b/layouts/partials/openapi.html
new file mode 100644
index 00000000..34cc22c4
--- /dev/null
+++ b/layouts/partials/openapi.html
@@ -0,0 +1,16 @@
+<div>
+    <div id="api-component">
+        <api-container>
+            <redoc
+                spec-url='{{ . | relURL }}'
+                menu-toggle
+                path-in-middle-panel
+                required-props-first
+                hide-hostname="true"
+                show-extensions="x-f5-experimental"
+                nativeScrollbars
+            >
+            </redoc>
+        </api-container>
+    </div>
+</div>
diff --git a/layouts/redoc/single.html b/layouts/redoc/single.html
deleted file mode 100644
index e649159f..00000000
--- a/layouts/redoc/single.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{{ define "main" }}
-  <main class="content content__redocly">
-    <div class="breadcrumb-layout">{{ partial "breadcrumb" . }}</div>
-    <div id="api-component">{{ .Content}}</div>
-  </main>
-  <!-- If there is a script defined in the page metadata, load it  -->
-  {{ if .Params.script }}
-      {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
-      {{ partial (string $script) .}}
-  {{ end }}
-{{ end }}
diff --git a/layouts/shortcodes/openapi.html b/layouts/shortcodes/openapi.html
deleted file mode 100644
index 7c72e637..00000000
--- a/layouts/shortcodes/openapi.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<api-container>
-  <redoc spec-url="{{ .Get "spec" | relURL }}" menu-toggle path-in-middle-panel required-props-first
-  hide-hostname="true" show-extensions="x-f5-experimental" nativeScrollbars ></redoc>
-</api-container>