diff --git a/package.json b/package.json
index 9f1ad841c..444872eba 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "flexsearch": "^0.7.31",
     "glob": "^8.1.0",
     "gray-matter": "^4.0.3",
+    "jsdom": "^22.1.0",
     "linkinator": "^5.0.2",
     "mdast-util-to-string": "^3.1.1",
     "mermaid": "^9.3.0",
@@ -42,7 +43,6 @@
     "unist-util-find-after": "^4.0.1",
     "unist-util-visit": "^4.1.2",
     "vitest": "^0.28.3",
-    "vue": "^3.2.47",
-    "jsdom": "^22.1.0"
+    "vue": "^3.2.47"
   }
 }
diff --git a/src/__tests__/__snapshots__/links.integration.test.js.snap b/src/__tests__/__snapshots__/links.integration.test.js.snap
index b07dd6855..e2a57f969 100644
--- a/src/__tests__/__snapshots__/links.integration.test.js.snap
+++ b/src/__tests__/__snapshots__/links.integration.test.js.snap
@@ -304,6 +304,7 @@ exports[`the build should not break any links 1`] = `
   "/api/managed-integrations#paypal-referral",
   "/api/managed-integrations#top",
   "/api/media-uploads",
+  "/api/media-uploads#attributes",
   "/api/media-uploads#contents",
   "/api/media-uploads#create-a-presigned-url-for-media-upload-experimental",
   "/api/media-uploads#get-media-upload-location-experimental",
diff --git a/src/components/Code.astro b/src/components/Code.astro
new file mode 100644
index 000000000..9b3a660fb
--- /dev/null
+++ b/src/components/Code.astro
@@ -0,0 +1,7 @@
+---
+import ProseCode from "./ProseCode.vue";
+---
+
+<ProseCode>
+  <slot />
+</ProseCode>
diff --git a/src/components/Column.astro b/src/components/Column.astro
new file mode 100644
index 000000000..7eb86336b
--- /dev/null
+++ b/src/components/Column.astro
@@ -0,0 +1,8 @@
+
+---
+const { sticky = false } = Astro.props;
+---
+
+<div class=`${sticky ? '[&>:first-child]:mt-0 [&>:last-child]:mb-0 xl:sticky xl:top-24' : '[&>:first-child]:mt-0 [&>:last-child]:mb-0'}`>
+  <slot />
+</div>
diff --git a/src/components/Eyebrow.astro b/src/components/Eyebrow.astro
new file mode 100644
index 000000000..34fca3d95
--- /dev/null
+++ b/src/components/Eyebrow.astro
@@ -0,0 +1,24 @@
+---
+const { method, path } = Astro.props;
+const valueColorMap = {
+  GET: 'emerald',
+  POST: 'sky',
+  PUT: 'amber',
+  DELETE: 'rose',
+};
+const color = valueColorMap[method] || 'emerald';
+const colorStyles = {
+  emerald: 'ring-emerald-300 dark:ring-emerald-400/30 bg-emerald-400/10 text-emerald-500 dark:text-emerald-400',
+  sky: 'ring-sky-300 bg-sky-400/10 text-sky-500 dark:ring-sky-400/30 dark:bg-sky-400/10 dark:text-sky-400',
+  amber: 'ring-amber-300 bg-amber-400/10 text-amber-500 dark:ring-amber-400/30 dark:bg-amber-400/10 dark:text-amber-400',
+  rose: 'ring-rose-200 bg-rose-50 text-red-500 dark:ring-rose-500/20 dark:bg-rose-400/10 dark:text-rose-400',
+}
+---
+
+<div>
+  <div class="flex items-center gap-x-3">
+    <span class=`${colorStyles[color]} text-[0.625rem] leading-6 rounded-lg px-1.5 ring-1 ring-inset`>{ method }</span>
+    <span class="h-0.5 w-0.5 rounded-full bg-zinc-300 dark:bg-zinc-600"/>
+    <span class="text-xs text-zinc-400">{ path }</span>
+  </div>
+</div>
diff --git a/src/components/ProseCode.vue b/src/components/ProseCode.vue
index 72c0a27ff..225f6bcbb 100644
--- a/src/components/ProseCode.vue
+++ b/src/components/ProseCode.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="my-8 rounded-lg"
+    class="mb-8 rounded-lg"
   >
     <div class="border border-outline-opaque rounded-xl overflow-hidden">
       <div class="flex w-full justify-between items-center border-b border-outline-opaque rounded-xl rounded-b-none bg-surface-secondary text-content-secondary shadow-sm py-2 px-4">
diff --git a/src/components/Row.astro b/src/components/Row.astro
new file mode 100644
index 000000000..46978294c
--- /dev/null
+++ b/src/components/Row.astro
@@ -0,0 +1,3 @@
+<div class="grid grid-cols-1 items-start gap-x-16 gap-y-10 xl:max-w-none xl:grid-cols-2">
+  <slot />
+</div>
diff --git a/src/content/api/media-uploads.mdx b/src/content/api/media-uploads.mdx
index 5e5b0fca4..12fa96ae8 100644
--- a/src/content/api/media-uploads.mdx
+++ b/src/content/api/media-uploads.mdx
@@ -8,6 +8,9 @@ nav:
 ---
 import Properties from '../../components/Properties.astro';
 import Property from '../../components/Property.astro';
+import Row from '../../components/Row.astro';
+import Column from '../../components/Column.astro';
+import Eyebrow from '../../components/Eyebrow.astro';
 
 ## Model
 
@@ -46,3 +49,75 @@ import Property from '../../components/Property.astro';
     The User or API Key that updated the Media Upload.
   </Property>
 </Properties>
+
+---
+
+<Row>
+  <Column>
+    <Eyebrow method="POST" path="/api/media-uploads"/>
+    ## Create a presigned URL for Media Upload
+
+    This endpoint allows you to upload a media file to Centrapay. It returns a presigned URL that can be used to download the media file.
+
+    ### Attributes
+    <Properties>
+      <Property name="accountId" type="string">
+        The Media Upload's owning Centrapay Account id.
+      </Property>
+
+      <Property name="mimeType" type="string">
+        The media (MIME) type of the upload.
+      </Property>
+
+      <Property name="fileName" type="string">
+        The file name of the upload.
+      </Property>
+    </Properties>
+  </Column>
+
+  <Column sticky>
+    ```bash
+    curl -X POST https://service.centrapay.com/api/media-uploads \
+      -H "X-Api-Key: $api_key" \
+      -H "Content-Type: application/json" \
+      -d '{
+        "accountId": "Jaim1Cu1Q55uooxSens6yk",
+        "mimeType": "image/png",
+        "fileName": "image.png"
+      }'
+    ```
+
+    ```json
+    {
+      "id": "DKTs3U38hdhfEqwF1JKoT2",
+      "uploadUrl": "https://media-upload.centrapay.com/image.png?jhbdsfau67ewejshb=487hsdjhbdgs743"
+    }
+    ```
+  </Column>
+</Row>
+
+---
+
+<Row>
+  <Column>
+    <Eyebrow method="GET" path="/api/media-uploads/{mediaUploadId}/location"/>
+    ## Get Media Upload Location
+    This endpoint allows you to retrieve upload location of a media file.
+
+    ### Attributes
+    No Attributes.
+  </Column>
+
+  <Column sticky>
+    ```bash
+    curl https://service.centrapay.com/api/media-uploads/DKTs3U38hdhfEqwF1JKoT2/location \
+      -H "X-Api-Key: $api_key"
+    ```
+
+    ```json
+    {
+      "url": "https://media-upload.centrapay.com/image.png?jhbdsfau67ewejshb=487hsdjhbdgs743"
+    }
+    ```
+  </Column>
+</Row>