diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
index 51bea5376..f64c24233 100644
Binary files a/netbox/project-static/dist/netbox-dark.css and b/netbox/project-static/dist/netbox-dark.css differ
diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css
index b16fc42cd..26e9c7476 100644
Binary files a/netbox/project-static/dist/netbox-light.css and b/netbox/project-static/dist/netbox-light.css differ
diff --git a/netbox/project-static/dist/netbox-print.css b/netbox/project-static/dist/netbox-print.css
index faf8a0438..ecff7b50c 100644
Binary files a/netbox/project-static/dist/netbox-print.css and b/netbox/project-static/dist/netbox-print.css differ
diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index ed6e12747..50cc484dc 100644
Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ
diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index dd1ec47c9..f40a507e3 100644
Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ
diff --git a/netbox/project-static/src/buttons/index.ts b/netbox/project-static/src/buttons/index.ts
index e677ff599..fe2ccaaef 100644
--- a/netbox/project-static/src/buttons/index.ts
+++ b/netbox/project-static/src/buttons/index.ts
@@ -4,6 +4,7 @@ import { initMoveButtons } from './moveOptions';
 import { initReslug } from './reslug';
 import { initSelectAll } from './selectAll';
 import { initSelectMultiple } from './selectMultiple';
+import { initMarkdownPreviews } from './markdownPreview';
 
 export function initButtons(): void {
   for (const func of [
@@ -13,6 +14,7 @@ export function initButtons(): void {
     initSelectAll,
     initSelectMultiple,
     initMoveButtons,
+    initMarkdownPreviews,
   ]) {
     func();
   }
diff --git a/netbox/project-static/src/buttons/markdownPreview.ts b/netbox/project-static/src/buttons/markdownPreview.ts
new file mode 100644
index 000000000..11414bef0
--- /dev/null
+++ b/netbox/project-static/src/buttons/markdownPreview.ts
@@ -0,0 +1,44 @@
+import { isTruthy } from 'src/util';
+
+/**
+ * interface for htmx configRequest event
+ */
+declare global {
+  interface HTMLElementEventMap {
+    'htmx:configRequest': CustomEvent<{
+      parameters: Record<string, string>;
+      headers: Record<string, string>;
+    }>;
+  }
+}
+
+function initMarkdownPreview(markdownWidget: HTMLDivElement) {
+  const previewButton = markdownWidget.querySelector('button.preview-button') as HTMLButtonElement;
+  const textarea = markdownWidget.querySelector('textarea') as HTMLTextAreaElement;
+  const preview = markdownWidget.querySelector('div.preview') as HTMLDivElement;
+
+  /**
+   * Make sure the textarea has style attribute height
+   * So that it can be copied over to preview div.
+   */
+  if (!isTruthy(textarea.style.height)) {
+    const { height } = textarea.getBoundingClientRect();
+    textarea.style.height = `${height}px`;
+  }
+
+  /**
+   * Add the value of the textarea to the body of the htmx request
+   * and copy the height of text are to the preview div
+   */
+  previewButton.addEventListener('htmx:configRequest', e => {
+    e.detail.parameters = { text: textarea.value || '' };
+    e.detail.headers['X-CSRFToken'] = window.CSRF_TOKEN;
+    preview.style.minHeight = textarea.style.height;
+  });
+}
+
+export function initMarkdownPreviews(): void {
+  for (const markdownWidget of document.querySelectorAll<HTMLDivElement>('.markdown-widget')) {
+    initMarkdownPreview(markdownWidget);
+  }
+}
diff --git a/netbox/project-static/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index 17d8f9713..7f9e1a4bf 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -999,7 +999,7 @@ div.card-overlay {
 }
 
 /* Markdown widget */
-.markdown-preview {
+.markdown-widget {
   .nav-link {
     border-bottom: 0;