diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css
index f64c24233..74ab785a5 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 26e9c7476..f12291e44 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 ecff7b50c..5d7f7342b 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 50cc484dc..029e4f4a9 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 f40a507e3..a03e8eb34 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/styles/netbox.scss b/netbox/project-static/styles/netbox.scss
index 7f9e1a4bf..37f6c21c4 100644
--- a/netbox/project-static/styles/netbox.scss
+++ b/netbox/project-static/styles/netbox.scss
@@ -1004,12 +1004,12 @@ div.card-overlay {
     border-bottom: 0;
 
     &.active {
-      background-color: var(--nbx-body-bg) !important;
+      background-color: var(--nbx-body-bg);
     }
   }
-  .nav-link.active {
-    // background-color: var(--nbx-body-bg) !important;
-    background-color: blueviolet;
+
+  .nav-tabs {
+    background-color: var(--nbx-pre-bg);
   }
 }
 
diff --git a/netbox/utilities/templates/widgets/markdown_input.html b/netbox/utilities/templates/widgets/markdown_input.html
index c4e918c21..f3bbc0609 100644
--- a/netbox/utilities/templates/widgets/markdown_input.html
+++ b/netbox/utilities/templates/widgets/markdown_input.html
@@ -1,22 +1,22 @@
-<div class="border rounded markdown-preview"> 
-    <ul class="nav nav-tabs px-3 pt-2 rounded-top bg-transparent border-0">
+<div class="border rounded markdown-widget"> 
+    <ul class="nav nav-tabs px-3 pt-2 rounded-top border-0">
         <li class="nav-item" role="presentation">
-          <button class="nav-link active " id="comment-input-tab" data-bs-toggle="tab" data-bs-target="#comment-input" type="button" role="tab" aria-controls="comment-input" aria-selected="true">
+          <button class="nav-link active " id="{{ widget.name }}-input-tab" data-bs-toggle="tab" data-bs-target="#{{ widget.name }}-input" type="button" role="tab" aria-controls="{{ widget.name }}-input" aria-selected="true">
             Write
           </button>
         </li>
         <li class="nav-item" role="presentation">
-            <button class="nav-link " id="markdown-preview-tab" data-bs-toggle="tab" data-bs-target="#markdown-preview" type="button" role="tab" aria-controls="markdown-preview" aria-selected="false">
+            <button hx-target="#{{ widget.name }}-preview" hx-swap="innerHTML" hx-post="{% url 'extras:markdown_render' %}" class="nav-link preview-button" id="{{ widget.name }}-markdown-preview-tab" data-bs-toggle="tab" data-bs-target="#{{ widget.name }}-markdown-preview" type="button" role="tab" aria-controls="{{ widget.name }}-markdown-preview" aria-selected="false">
               Preview   
             </button>
           </li>
       </ul>
       <div class="tab-content bg-body rounded-bottom border-top">
-        <div class="tab-pane show active" id="comment-input" role="tabpanel" aria-labelledby="comment-input-tab">
+        <div class="tab-pane show active" id="{{ widget.name }}-input" role="tabpanel" aria-labelledby="{{ widget.name }}-input-tab">
         {% include "django/forms/widgets/textarea.html" %}
         </div>
-        <div class="tab-pane show" id="markdown-preview" role="tabpanel" aria-labelledby="markdown-preview-tab">
-            <div class="test">This is rendered markdown</div>
+        <div class="tab-pane show" id="{{ widget.name }}-markdown-preview" role="tabpanel" aria-labelledby="{{ widget.name }}-markdown-preview-tab">
+            <div id="{{ widget.name }}-preview" class="preview px-3 py-2">Testing</div>
         </div>
     </div>
 </div>
\ No newline at end of file