diff --git a/docs/admin/hooks.mdx b/docs/admin/hooks.mdx
index ce03dca57e..8270da5f4c 100644
--- a/docs/admin/hooks.mdx
+++ b/docs/admin/hooks.mdx
@@ -176,7 +176,7 @@ The `useForm` hook returns an object with the following properties:
   rows={[
     [
       {
-        value: `<strong><code>fields</code></strong>`,
+        value: "**`fields`**",
       },
       {
         value: "Deprecated. This property cannot be relied on as up-to-date.",
@@ -187,7 +187,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>submit</code></strong>`,
+        value: "**`submit`**",
       },
       {
         value: "Method to trigger the form to submit",
@@ -198,7 +198,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>dispatchFields</code></strong>`,
+        value: "**`dispatchFields`**",
       },
       {
         value: "Dispatch actions to the form field state",
@@ -209,7 +209,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>validateForm</code></strong>`,
+        value: "**`validateForm`**",
       },
       {
         value: "Trigger a validation of the form state",
@@ -220,10 +220,10 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>createFormData</code></strong>`,
+        value: "**`createFormData`**",
       },
       {
-        value: `<>Create a <code>multipart/form-data</code> object from the current form's state</>`,
+        value: "Create a `multipart/form-data` object from the current form's state",
       },
       {
         value: ''
@@ -231,7 +231,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>disabled</code></strong>`,
+        value: "**`disabled`**",
       },
       {
         value: "Boolean denoting whether or not the form is disabled",
@@ -242,7 +242,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>getFields</code></strong>`,
+        value: "**`getFields`**",
       },
       {
         value: 'Gets all fields from state',
@@ -253,7 +253,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>getField</code></strong>`,
+        value: "**`getField`**",
       },
       {
         value: 'Gets a single field from state by path',
@@ -264,7 +264,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>getData</code></strong>`,
+        value: "**`getData`**",
       },
       {
         value: 'Returns the data stored in the form',
@@ -275,7 +275,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>getSiblingData</code></strong>`,
+        value: "**`getSiblingData`**",
       },
       {
         value: 'Returns form sibling data for the given field path',
@@ -286,10 +286,10 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>setModified</code></strong>`,
+        value: "**`setModified`**",
       },
       {
-        value: `<>Set the form\'s <code>modified</code> state</>`,
+        value: "Set the form\'s `modified` state",
       },
       {
         value: '',
@@ -297,10 +297,10 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>setProcessing</code></strong>`,
+        value: "**`setProcessing`**",
       },
       {
-        value: `<>Set the form\'s <code>processing</code> state</>`,
+        value: "Set the form\'s `processing` state",
       },
       {
         value: '',
@@ -308,10 +308,10 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>setSubmitted</code></strong>`,
+        value: "**`setSubmitted`**",
       },
       {
-        value: `<>Set the form\'s <code>submitted</code> state</>`,
+        value: "Set the form\'s `submitted` state",
       },
       {
         value: '',
@@ -319,7 +319,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>formRef</code></strong>`,
+        value: "**`formRef`**",
       },
       {
         value: 'The ref from the form HTML element',
@@ -330,7 +330,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>reset</code></strong>`,
+        value: "**`reset`**",
       },
       {
         value: 'Method to reset the form to its initial state',
@@ -341,7 +341,7 @@ The `useForm` hook returns an object with the following properties:
     ],
     [
       {
-        value: `<strong><code>addFieldRow</code></strong>`,
+        value: "**`addFieldRow`**",
       },
       {
         value: "Method to add a row on an array or block field",
@@ -351,7 +351,6 @@ The `useForm` hook returns an object with the following properties:
         drawerDescription: 'A useful method to programmatically add a row to an array or block field.',
         drawerSlug: 'addFieldRow',
         drawerContent: `
-<>
   <TableWithDrawers
     columns={[
       'Prop',
@@ -360,7 +359,7 @@ The `useForm` hook returns an object with the following properties:
     rows={[
       [
         {
-          value: <strong><code>path</code></strong>,
+          value: "**\`path\`**",
         },
         {
           value: "The path to the array or block field",
@@ -368,7 +367,7 @@ The `useForm` hook returns an object with the following properties:
       ],
       [
         {
-          value: <strong><code>rowIndex</code></strong>,
+          value: "**\`rowIndex\`**",
         },
         {
           value: "The index of the row to add. If omitted, the row will be added to the end of the array.",
@@ -376,7 +375,7 @@ The `useForm` hook returns an object with the following properties:
       ],
       [
         {
-          value: <strong><code>data</code></strong>,
+          value: "**\`data<\`**",
         },
         {
           value: "The data to add to the row",
@@ -385,13 +384,8 @@ The `useForm` hook returns an object with the following properties:
     ]}
   />
 
-{' '}
 
-<br />
-
-{' '}
-
-<pre>
+\`\`\`tsx
   {\`import { useForm } from "payload/components/forms";
 
 export const CustomArrayManager = () => {
@@ -416,10 +410,11 @@ export const CustomArrayManager = () => {
     </button>
   )
 }\`}
-</pre>
+\`\`\`
 
-  <p>An example config to go along with the Custom Component</p>
-  <pre>
+An example config to go along with the Custom Component
+
+\`\`\`tsx
 {\`const ExampleCollection = {
   slug: "example-collection",
   fields: [
@@ -444,14 +439,13 @@ export const CustomArrayManager = () => {
     },
   ],
 }\`}
-  </pre>
-</>
-        `
+\`\`\`
+`
       }
     ],
     [
       {
-        value: `<strong><code>removeFieldRow</code></strong>`,
+        value: "**`removeFieldRow`**",
       },
       {
         value: "Method to remove a row from an array or block field",
@@ -461,7 +455,6 @@ export const CustomArrayManager = () => {
         drawerDescription: 'A useful method to programmatically remove a row from an array or block field.',
         drawerSlug: 'removeFieldRow',
         drawerContent:  `
-<>
   <TableWithDrawers
     columns={[
       'Prop',
@@ -470,7 +463,7 @@ export const CustomArrayManager = () => {
     rows={[
       [
         {
-          value: <strong><code>path</code></strong>,
+          value: "**\`path\`**",
         },
         {
           value: "The path to the array or block field",
@@ -478,7 +471,7 @@ export const CustomArrayManager = () => {
       ],
       [
         {
-          value: <strong><code>rowIndex</code></strong>,
+          value: "**\`rowIndex\`**",
         },
         {
           value: "The index of the row to remove",
@@ -487,13 +480,9 @@ export const CustomArrayManager = () => {
     ]}
   />
 
-{' '}
 
-<br />
 
-{' '}
-
-<pre>
+\`\`\`tsx
   {\`import { useForm } from "payload/components/forms";
 
 export const CustomArrayManager = () => {
@@ -513,10 +502,11 @@ export const CustomArrayManager = () => {
     </button>
   )
 }\`}
-</pre>
+\`\`\`
 
-  <p>An example config to go along with the Custom Component</p>
-  <pre>
+An example config to go along with the Custom Component
+
+\`\`\`tsx
 {\`const ExampleCollection = {
   slug: "example-collection",
   fields: [
@@ -541,14 +531,13 @@ export const CustomArrayManager = () => {
     },
   ],
 }\`}
-  </pre>
-</>
-        `
+\`\`\`
+`
       }
     ],
     [
       {
-        value: `<strong><code>replaceFieldRow</code></strong>`,
+        value: "**`replaceFieldRow`**",
       },
       {
         value: "Method to replace a row from an array or block field",
@@ -558,7 +547,6 @@ export const CustomArrayManager = () => {
         drawerDescription: 'A useful method to programmatically replace a row from an array or block field.',
         drawerSlug: 'replaceFieldRow',
         drawerContent:  `
-<>
   <TableWithDrawers
     columns={[
       'Prop',
@@ -567,7 +555,7 @@ export const CustomArrayManager = () => {
     rows={[
       [
         {
-          value: <strong><code>path</code></strong>,
+          value: "**\`path\`**",
         },
         {
           value: "The path to the array or block field",
@@ -575,7 +563,7 @@ export const CustomArrayManager = () => {
       ],
       [
         {
-          value: <strong><code>rowIndex</code></strong>,
+          value: "**\`rowIndex\`**",
         },
         {
           value: "The index of the row to replace",
@@ -583,7 +571,7 @@ export const CustomArrayManager = () => {
       ],
       [
         {
-          value: <strong><code>data</code></strong>,
+         value: "**\`data\`**",
         },
         {
           value: "The data to replace within the row",
@@ -592,13 +580,10 @@ export const CustomArrayManager = () => {
     ]}
   />
 
-{' '}
 
-<br />
 
-{' '}
 
-<pre>
+\`\`\`tsx
   {\`import { useForm } from "payload/components/forms";
 
 export const CustomArrayManager = () => {
@@ -623,10 +608,11 @@ export const CustomArrayManager = () => {
     </button>
   )
 }\`}
-</pre>
+\`\`\`
 
-  <p>An example config to go along with the Custom Component</p>
-  <pre>
+An example config to go along with the Custom Component
+
+\`\`\`tsx
 {\`const ExampleCollection = {
   slug: "example-collection",
   fields: [
@@ -651,8 +637,7 @@ export const CustomArrayManager = () => {
     },
   ],
 }\`}
-  </pre>
-</>
+\`\`\`
          `
       }
     ],
diff --git a/docs/rest-api/overview.mdx b/docs/rest-api/overview.mdx
index 962acbba2a..45bd7709db 100644
--- a/docs/rest-api/overview.mdx
+++ b/docs/rest-api/overview.mdx
@@ -51,28 +51,15 @@ Note: Collection slugs must be formatted in kebab-case
           },
         },
         drawerContent: `
-          <>
-            <h6>Additional <code>find</code> query parameters</h6>
-            The <code>find</code> endpoint supports the following additional query parameters:
-            <ul>
-              <li>
-                <a href="/docs/queries/overview#sort">sort</a> - sort by field
-              </li>
-              <li>
-                <a href="/docs/queries/overview">where</a> - pass a where query to constrain returned
-                documents
-              </li>
-              <li>
-                <a href="/docs/queries/pagination#pagination-controls">limit</a> - limit the returned
-                documents to a certain number
-              </li>
-              <li>
-                <a href="/docs/queries/pagination#pagination-controls">page</a> - get a specific page of
-                documents
-              </li>
-            </ul>
-          </>
-        `,
+#### Additional `find` query parameters
+
+The `find` endpoint supports the following additional query parameters:
+
+-  [sort](/docs/queries/overview#sort) - sort by field
+-  [where](/docs/queries/overview) - pass a where query to constrain returned documents
+-  [limit](/docs/queries/pagination#pagination-controls) - limit the returned documents to a certain number
+-  [page](/docs/queries/pagination#pagination-controls) - get a specific page of documents
+        `
       },
     },
     {