diff --git a/app/javascript/template_builder/dynamic_document.vue b/app/javascript/template_builder/dynamic_document.vue
index 5eff88816..b576999fb 100644
--- a/app/javascript/template_builder/dynamic_document.vue
+++ b/app/javascript/template_builder/dynamic_document.vue
@@ -22,6 +22,12 @@
       v-if="shadow"
       :to="shadow"
     >
+      <component
+        :is="'style'"
+        v-if="listsStyle"
+      >
+        {{ listsStyle }}
+      </component>
       <DynamicSection
         v-for="section in sections"
         :ref="setSectionRefs"
@@ -52,7 +58,7 @@
 <script>
 import { ref, computed } from 'vue'
 import DynamicSection from './dynamic_section.vue'
-import { dynamicStylesheet, tiptapStylesheet } from './dynamic_editor.js'
+import { dynamicStylesheet, tiptapStylesheet, listsCss } from './dynamic_editor.js'
 import { buildVariablesSchema, mergeSchemaProperties } from './dynamic_variables_schema.js'
 
 export default {
@@ -112,6 +118,7 @@ export default {
     return {
       containerWidth: 1040,
       isMounted: false,
+      listsStyle: null,
       sectionRefs: []
     }
   },
@@ -186,6 +193,10 @@ export default {
 
     this.shadow.adoptedStyleSheets.push(dynamicStylesheet, tiptapStylesheet)
 
+    this.listsStyle = this.bodyDom.querySelector('body > style[data-lists]')?.textContent || null
+
+    this.ensureListsStyle(this.bodyDom)
+
     this.containerWidth = this.$refs.container.clientWidth
 
     this.resizeObserver = new ResizeObserver(() => {
@@ -248,6 +259,8 @@ export default {
       })
     },
     onSectionUpdate (section, { editor }) {
+      this.ensureListsStyle(editor.view.dom)
+
       clearTimeout(this.saveTimer)
 
       this.saveTimer = setTimeout(async () => {
@@ -256,6 +269,18 @@ export default {
         delete this.saveTimer
       }, 1000)
     },
+    ensureListsStyle (root) {
+      if (this.listsStyle || !root.querySelector('[class*="doc-list-"]')) return
+
+      const style = this.bodyDom.createElement('style')
+
+      style.dataset.lists = ''
+      style.textContent = listsCss
+
+      this.bodyDom.body.append(style)
+
+      this.listsStyle = listsCss
+    },
     updateVariablesSchema () {
       this.document.variables_schema = buildVariablesSchema(this.bodyDom.body)
     },
diff --git a/app/javascript/template_builder/dynamic_editor.js b/app/javascript/template_builder/dynamic_editor.js
index df7f760a5..c1475fd64 100644
--- a/app/javascript/template_builder/dynamic_editor.js
+++ b/app/javascript/template_builder/dynamic_editor.js
@@ -626,6 +626,185 @@ const NumberingKeymap = Extension.create({
   }
 })
 
+export const listsCss = `[class*="doc-list-"]::before {
+  display: inline-block;
+  min-width: 0.25in;
+  text-indent: 0;
+  text-align: left;
+}
+
+.doc-list-disc-0,
+.doc-list-dash-0,
+.doc-list-decimal-0 {
+  margin-left: 0.5in !important;
+  text-indent: -0.25in !important;
+  counter-set: doc-list-1 0;
+}
+
+.doc-list-disc-1,
+.doc-list-dash-1,
+.doc-list-decimal-1 {
+  margin-left: 0.75in !important;
+  text-indent: -0.25in !important;
+  counter-set: doc-list-2 0;
+}
+
+.doc-list-disc-2,
+.doc-list-dash-2,
+.doc-list-decimal-2 {
+  margin-left: 1in !important;
+  text-indent: -0.25in !important;
+  counter-set: doc-list-3 0;
+}
+
+.doc-list-disc-3,
+.doc-list-dash-3,
+.doc-list-decimal-3 {
+  margin-left: 1.25in !important;
+  text-indent: -0.25in !important;
+  counter-set: doc-list-4 0;
+}
+
+.doc-list-disc-4,
+.doc-list-dash-4,
+.doc-list-decimal-4 {
+  margin-left: 1.5in !important;
+  text-indent: -0.25in !important;
+  counter-set: doc-list-5 0;
+}
+
+.doc-list-disc-5,
+.doc-list-dash-5,
+.doc-list-decimal-5 {
+  margin-left: 1.75in !important;
+  text-indent: -0.25in !important;
+  counter-set: doc-list-6 0;
+}
+
+.doc-list-disc-6,
+.doc-list-dash-6,
+.doc-list-decimal-6 {
+  margin-left: 2in !important;
+  text-indent: -0.25in !important;
+  counter-set: doc-list-7 0;
+}
+
+.doc-list-disc-7,
+.doc-list-dash-7,
+.doc-list-decimal-7 {
+  margin-left: 2.25in !important;
+  text-indent: -0.25in !important;
+  counter-set: doc-list-8 0;
+}
+
+.doc-list-disc-8,
+.doc-list-dash-8,
+.doc-list-decimal-8 {
+  margin-left: 2.5in !important;
+  text-indent: -0.25in !important;
+}
+
+.doc-list-disc-0::before,
+.doc-list-disc-3::before,
+.doc-list-disc-6::before {
+  content: "•";
+}
+
+.doc-list-disc-1::before,
+.doc-list-disc-4::before,
+.doc-list-disc-7::before {
+  content: "◦";
+}
+
+.doc-list-disc-2::before,
+.doc-list-disc-5::before,
+.doc-list-disc-8::before {
+  content: "▪";
+}
+
+[class*="doc-list-dash-"]::before {
+  content: "–";
+}
+
+.doc-list-decimal-0 {
+  counter-increment: doc-list-0;
+}
+
+.doc-list-decimal-1 {
+  counter-increment: doc-list-1;
+}
+
+.doc-list-decimal-2 {
+  counter-increment: doc-list-2;
+}
+
+.doc-list-decimal-3 {
+  counter-increment: doc-list-3;
+}
+
+.doc-list-decimal-4 {
+  counter-increment: doc-list-4;
+}
+
+.doc-list-decimal-5 {
+  counter-increment: doc-list-5;
+}
+
+.doc-list-decimal-6 {
+  counter-increment: doc-list-6;
+}
+
+.doc-list-decimal-7 {
+  counter-increment: doc-list-7;
+}
+
+.doc-list-decimal-8 {
+  counter-increment: doc-list-8;
+}
+
+.doc-list-decimal-0::before {
+  content: counter(doc-list-0) ".";
+}
+
+.doc-list-decimal-1::before {
+  content: counter(doc-list-1, lower-alpha) ".";
+}
+
+.doc-list-decimal-2::before {
+  content: counter(doc-list-2, lower-roman) ".";
+}
+
+.doc-list-decimal-3::before {
+  content: counter(doc-list-3) ".";
+}
+
+.doc-list-decimal-4::before {
+  content: counter(doc-list-4, lower-alpha) ".";
+}
+
+.doc-list-decimal-5::before {
+  content: counter(doc-list-5, lower-roman) ".";
+}
+
+.doc-list-decimal-6::before {
+  content: counter(doc-list-6) ".";
+}
+
+.doc-list-decimal-7::before {
+  content: counter(doc-list-7, lower-alpha) ".";
+}
+
+.doc-list-decimal-8::before {
+  content: counter(doc-list-8, lower-roman) ".";
+}
+
+:not([class*="doc-list-"]) + .doc-list-decimal-0,
+.doc-list-decimal-0:first-child,
+.doc-list-disc-0 + .doc-list-decimal-0,
+.doc-list-dash-0 + .doc-list-decimal-0 {
+  counter-set: doc-list-0 1 doc-list-1 0;
+}`
+
 const NUMBERING_CLASS_REGEXP = /^(doc-num-\d+|doc-list-(?:disc|dash|decimal))-(\d+)$/
 
 export function findNumbering (node) {
diff --git a/app/javascript/template_builder/dynamic_lists.css b/app/javascript/template_builder/dynamic_lists.css
deleted file mode 100644
index a377bd7ab..000000000
--- a/app/javascript/template_builder/dynamic_lists.css
+++ /dev/null
@@ -1,196 +0,0 @@
-[class*="doc-list-"]::before {
-  display: inline-block;
-  min-width: 0.25in;
-  text-indent: 0;
-  text-align: left;
-}
-
-[class*="doc-list-dash-"]::before {
-  content: "–";
-}
-
-.doc-list-disc-0,
-.doc-list-dash-0,
-.doc-list-decimal-0 {
-  margin-left: 0.5in !important;
-  text-indent: -0.25in !important;
-  counter-set: doc-list-1 0;
-}
-
-.doc-list-disc-0::before {
-  content: "•";
-}
-
-.doc-list-decimal-0 {
-  counter-increment: doc-list-0;
-}
-
-.doc-list-decimal-0::before {
-  content: counter(doc-list-0) ".";
-}
-
-.doc-list-disc-1,
-.doc-list-dash-1,
-.doc-list-decimal-1 {
-  margin-left: 0.75in !important;
-  text-indent: -0.25in !important;
-  counter-set: doc-list-2 0;
-}
-
-.doc-list-disc-1::before {
-  content: "◦";
-}
-
-.doc-list-decimal-1 {
-  counter-increment: doc-list-1;
-}
-
-.doc-list-decimal-1::before {
-  content: counter(doc-list-1, lower-alpha) ".";
-}
-
-.doc-list-disc-2,
-.doc-list-dash-2,
-.doc-list-decimal-2 {
-  margin-left: 1in !important;
-  text-indent: -0.25in !important;
-  counter-set: doc-list-3 0;
-}
-
-.doc-list-disc-2::before {
-  content: "▪";
-}
-
-.doc-list-decimal-2 {
-  counter-increment: doc-list-2;
-}
-
-.doc-list-decimal-2::before {
-  content: counter(doc-list-2, lower-roman) ".";
-}
-
-.doc-list-disc-3,
-.doc-list-dash-3,
-.doc-list-decimal-3 {
-  margin-left: 1.25in !important;
-  text-indent: -0.25in !important;
-  counter-set: doc-list-4 0;
-}
-
-.doc-list-disc-3::before {
-  content: "•";
-}
-
-.doc-list-decimal-3 {
-  counter-increment: doc-list-3;
-}
-
-.doc-list-decimal-3::before {
-  content: counter(doc-list-3) ".";
-}
-
-.doc-list-disc-4,
-.doc-list-dash-4,
-.doc-list-decimal-4 {
-  margin-left: 1.5in !important;
-  text-indent: -0.25in !important;
-  counter-set: doc-list-5 0;
-}
-
-.doc-list-disc-4::before {
-  content: "◦";
-}
-
-.doc-list-decimal-4 {
-  counter-increment: doc-list-4;
-}
-
-.doc-list-decimal-4::before {
-  content: counter(doc-list-4, lower-alpha) ".";
-}
-
-.doc-list-disc-5,
-.doc-list-dash-5,
-.doc-list-decimal-5 {
-  margin-left: 1.75in !important;
-  text-indent: -0.25in !important;
-  counter-set: doc-list-6 0;
-}
-
-.doc-list-disc-5::before {
-  content: "▪";
-}
-
-.doc-list-decimal-5 {
-  counter-increment: doc-list-5;
-}
-
-.doc-list-decimal-5::before {
-  content: counter(doc-list-5, lower-roman) ".";
-}
-
-.doc-list-disc-6,
-.doc-list-dash-6,
-.doc-list-decimal-6 {
-  margin-left: 2in !important;
-  text-indent: -0.25in !important;
-  counter-set: doc-list-7 0;
-}
-
-.doc-list-disc-6::before {
-  content: "•";
-}
-
-.doc-list-decimal-6 {
-  counter-increment: doc-list-6;
-}
-
-.doc-list-decimal-6::before {
-  content: counter(doc-list-6) ".";
-}
-
-.doc-list-disc-7,
-.doc-list-dash-7,
-.doc-list-decimal-7 {
-  margin-left: 2.25in !important;
-  text-indent: -0.25in !important;
-  counter-set: doc-list-8 0;
-}
-
-.doc-list-disc-7::before {
-  content: "◦";
-}
-
-.doc-list-decimal-7 {
-  counter-increment: doc-list-7;
-}
-
-.doc-list-decimal-7::before {
-  content: counter(doc-list-7, lower-alpha) ".";
-}
-
-.doc-list-disc-8,
-.doc-list-dash-8,
-.doc-list-decimal-8 {
-  margin-left: 2.5in !important;
-  text-indent: -0.25in !important;
-}
-
-.doc-list-disc-8::before {
-  content: "▪";
-}
-
-.doc-list-decimal-8 {
-  counter-increment: doc-list-8;
-}
-
-.doc-list-decimal-8::before {
-  content: counter(doc-list-8, lower-roman) ".";
-}
-
-:not([class*="doc-list-"]) + .doc-list-decimal-0,
-.doc-list-decimal-0:first-child,
-.doc-list-disc-0 + .doc-list-decimal-0,
-.doc-list-dash-0 + .doc-list-decimal-0 {
-  counter-set: doc-list-0 1 doc-list-1 0;
-}
diff --git a/app/javascript/template_builder/dynamic_styles.scss b/app/javascript/template_builder/dynamic_styles.scss
index 252d0926d..0fc2c96d0 100644
--- a/app/javascript/template_builder/dynamic_styles.scss
+++ b/app/javascript/template_builder/dynamic_styles.scss
@@ -2,7 +2,6 @@
 
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
-@import "dynamic_lists";
 
 *,
 ::before,