diff --git a/apps/swirl-docs/src/components/Documentation/DocumentationHeader.tsx b/apps/swirl-docs/src/components/Documentation/DocumentationHeader.tsx
index fc470700d..fdefb41d8 100644
--- a/apps/swirl-docs/src/components/Documentation/DocumentationHeader.tsx
+++ b/apps/swirl-docs/src/components/Documentation/DocumentationHeader.tsx
@@ -12,7 +12,11 @@ export function DocumentationHeader({
 
   return (
     <header
-      className={classNames("border-b-1 pb-12 mb-12", additionalClassNames)}
+      className={classNames(
+        "flex flex-col gap-4",
+        "border-b-1 pb-[3.5rem] mb-12",
+        additionalClassNames
+      )}
     >
       <Heading level={1}>{frontMatter?.title as string}</Heading>
       <Text className="max-w-[37.5rem]">{frontMatter?.description}</Text>
diff --git a/apps/swirl-docs/src/components/Documentation/EndpointDescription.tsx b/apps/swirl-docs/src/components/Documentation/EndpointDescription.tsx
index 275df617c..0d19535da 100644
--- a/apps/swirl-docs/src/components/Documentation/EndpointDescription.tsx
+++ b/apps/swirl-docs/src/components/Documentation/EndpointDescription.tsx
@@ -29,7 +29,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({
   return (
     <div className="max-w-full md:max-w-[37.5rem] overflow-x-auto">
       <LinkedHeading href={path}>
-        <Heading level={3} id={endpointId}>
+        <Heading level={2} id={endpointId}>
           {endpoint.title}
           {endpoint.isDeprecated && (
             <span className="ml-2 inline-flex">
@@ -73,7 +73,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({
 
           return (
             <div key={`${parameterType.title}-${index}`} className="mb-6">
-              <Heading level={4} className="mb-2">
+              <Heading level={3} className="mb-2">
                 {parameterType.title}
               </Heading>
               <div>{parameterFactory.renderProperties()}</div>
@@ -83,7 +83,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({
 
         {requestbody && (
           <div className="mb-6">
-            <Heading level={4} className="mb-2">
+            <Heading level={3} className="mb-2">
               Request Body
             </Heading>
             <div>
@@ -97,7 +97,7 @@ export const EndpointDescription: FunctionComponent<EndpointDescription> = ({
 
         {endpoint.responseBodySchemas.length && (
           <div className="mb-6">
-            <Heading level={4} className="mb-2">
+            <Heading level={3} className="mb-2">
               Response Body
             </Heading>
             <div>
diff --git a/apps/swirl-docs/src/components/Layout/DocLinksNav.tsx b/apps/swirl-docs/src/components/Layout/DocLinksNav.tsx
index 52ab6d76b..4ed0d80c5 100644
--- a/apps/swirl-docs/src/components/Layout/DocLinksNav.tsx
+++ b/apps/swirl-docs/src/components/Layout/DocLinksNav.tsx
@@ -43,7 +43,7 @@ export const DocLinksNav: FunctionComponent<DocLinksNavProps> = ({
   return (
     <nav
       aria-label="document"
-      className="sticky top-[128px] h-max hidden min-w-[12rem] md:block px-4 border-l-1"
+      className="sticky top-[4rem] h-max hidden min-w-[12rem] md:block px-4 border-l-1"
     >
       <div className="mb-4 font-sm font-semibold text-text-subdued text-sm">
         On this Page
diff --git a/apps/swirl-docs/src/components/Layout/DocumentationLayout.tsx b/apps/swirl-docs/src/components/Layout/DocumentationLayout.tsx
index 9a7538eed..f1f8b72ca 100644
--- a/apps/swirl-docs/src/components/Layout/DocumentationLayout.tsx
+++ b/apps/swirl-docs/src/components/Layout/DocumentationLayout.tsx
@@ -40,7 +40,7 @@ export function DocumentationLayout({
             id="main"
             className={classNames(
               "grid grid-cols-1 justify-center max-w-[77.5rem] w-full",
-              "my-0 mx-auto mt-14 mb-4 md:mb-0 px-4 lg:px-10 xl:px-0",
+              "my-0 mx-auto mt-14 mb-4 md:mb-0 px-4 lg:px-10",
               {
                 "xl:grid-cols-1 md:mx-10": disableToc,
               },
diff --git a/apps/swirl-docs/src/components/Tags/index.tsx b/apps/swirl-docs/src/components/Tags/index.tsx
index 9511960fe..d3945ace2 100644
--- a/apps/swirl-docs/src/components/Tags/index.tsx
+++ b/apps/swirl-docs/src/components/Tags/index.tsx
@@ -55,7 +55,7 @@ export function Tag({ content, scheme, httpTag }: TagProps) {
   return (
     <span
       className={classNames(
-        "px-2 py-1 rounded-md font-medium text-xs mr-2",
+        "px-2 py-1 rounded-md font-medium text-xs mr-2 align-middle",
         {
           "bg-surface-neutral-subdued text-text-default":
             scheme === "default" || !scheme,
diff --git a/apps/swirl-docs/src/components/swirl-recreations/Headers/index.tsx b/apps/swirl-docs/src/components/swirl-recreations/Headers/index.tsx
index a44548938..a336f3463 100644
--- a/apps/swirl-docs/src/components/swirl-recreations/Headers/index.tsx
+++ b/apps/swirl-docs/src/components/swirl-recreations/Headers/index.tsx
@@ -52,9 +52,11 @@ export const Heading: React.FC<HeadingProps> = ({
         { "text-center": align === "center" },
         { "text-right": align === "end" },
         {
-          [`text-text-default text-3xl leading-[3rem]`]: level === 1,
-          [`text-text-default text-font-size-2xl leading-[2rem]`]: level === 2,
+          [`text-text-default text-3xl leading-[2.25rem] font-font-weight-bold`]:
+            level === 1,
           [`text-text-default text-font-size-xl leading-[1.625rem]`]:
+            level === 2,
+          [`text-text-default text-font-size-l leading-[1.625rem]`]:
             level === 3,
           [`text-text-default text-font-size-base leading-[1.5rem]`]:
             level === 4,
@@ -88,7 +90,7 @@ export function LinkedHeading({
     <CopyToClipboard text={href}>
       <div
         className={classNames(
-          "relative inline-flex w-full justify-between items-center group delay-200 cursor-pointer",
+          "relative inline-flex gap-4 w-full justify-between items-center group delay-200 cursor-pointer",
           className
         )}
       >
diff --git a/apps/swirl-docs/src/pages/api-docs/docs/[apiDoc].tsx b/apps/swirl-docs/src/pages/api-docs/docs/[apiDoc].tsx
index cfab37d9e..be08141ab 100644
--- a/apps/swirl-docs/src/pages/api-docs/docs/[apiDoc].tsx
+++ b/apps/swirl-docs/src/pages/api-docs/docs/[apiDoc].tsx
@@ -15,7 +15,7 @@ import { generateMdxFromDocumentation } from "@swirl/lib/docs/src/singleDoc";
 async function getComponentData(document: string) {
   const serializedDocument = await generateMdxFromDocumentation(
     "api",
-    document,
+    document
   );
 
   return {
@@ -96,6 +96,7 @@ export default function Component({
 
 function generateMdxThemeComponents() {
   return {
+    section: (props) => <section className="mb-8 last:mb-0" {...props} />,
     a: (props) => {
       const isRegularLink = typeof props.children === "string";
 
@@ -110,13 +111,19 @@ function generateMdxThemeComponents() {
     },
 
     ul: (props) => (
-      <ul className="mb-8 leading-line-height-xl list-disc" {...props} />
+      <ul
+        className="mb-8 last:mb-0 leading-line-height-xl list-disc"
+        {...props}
+      />
     ),
     ol: (props) => (
-      <ol className="mb-8 leading-line-height-xl list-decimal" {...props} />
+      <ol
+        className="mb-8 last:mb-0 leading-line-height-xl list-decimal"
+        {...props}
+      />
     ),
     li: (props) => <li className="ml-4" {...props} />,
-    p: (props) => <Text className="mb-8" {...props} />,
+    p: (props) => <Text className="mb-8 last:mb-0" {...props} />,
     code: (props) => {
       const { className, children } = props;
 
@@ -124,7 +131,7 @@ function generateMdxThemeComponents() {
         return (
           <CodePreview
             disableHeader
-            className="mb-4"
+            className="mb-4 last:mb-0"
             hasCopyButton
             codeExample={{
               code: children,
@@ -142,22 +149,22 @@ function generateMdxThemeComponents() {
       );
     },
     h1: (props: any) => (
-      <H2 className="mb-6" {...props} href={`#${props.id}`} />
+      <H2 className="mb-6 last:mb-0" {...props} href={`#${props.id}`} />
     ),
     h2: (props: any) => (
-      <H2 className="mb-6" {...props} href={`#${props.id}`} />
+      <H2 className="mb-6 last:mb-0" {...props} href={`#${props.id}`} />
     ),
     h3: (props: any) => (
-      <H3 className="mb-2" {...props} href={`#${props.id}`} />
+      <H3 className="mb-2 last:mb-0" {...props} href={`#${props.id}`} />
     ),
     h4: (props: any) => (
-      <H4 className="mb-2" {...props} href={`#${props.id}`} />
+      <H4 className="mb-2 last:mb-0" {...props} href={`#${props.id}`} />
     ),
     h5: (props: any) => (
-      <H4 className="mb-2" {...props} href={`#${props.id}`} />
+      <H4 className="mb-2 last:mb-0" {...props} href={`#${props.id}`} />
     ),
     h6: (props: any) => (
-      <H4 className="mb-2" {...props} href={`#${props.id}`} />
+      <H4 className="mb-2 last:mb-0" {...props} href={`#${props.id}`} />
     ),
     hr: (props) => <hr className="my-8" {...props} />,
   } as MDXRemoteProps["components"];