diff --git a/assets/controllers/editor--markdown-sync_controller.js b/assets/controllers/editor--markdown-sync_controller.js
new file mode 100644
index 0000000..88edcb0
--- /dev/null
+++ b/assets/controllers/editor--markdown-sync_controller.js
@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["hidden", "code"];
+
+  connect() {
+    this.updateMarkdown();
+    this.hiddenTarget.addEventListener("input", this.updateMarkdown.bind(this));
+    // Observe programmatic changes to the value attribute
+    this.observer = new MutationObserver(() => this.updateMarkdown());
+    this.observer.observe(this.hiddenTarget, { attributes: true, attributeFilter: ["value"] });
+  }
+
+  disconnect() {
+    this.hiddenTarget.removeEventListener("input", this.updateMarkdown.bind(this));
+    if (this.observer) this.observer.disconnect();
+  }
+
+  updateMarkdown() {
+    this.codeTarget.textContent = this.hiddenTarget.value;
+  }
+}
+
diff --git a/assets/styles/03-components/form.css b/assets/styles/03-components/form.css
index 57f1d03..d62ecaa 100644
--- a/assets/styles/03-components/form.css
+++ b/assets/styles/03-components/form.css
@@ -10,7 +10,7 @@ form {
     margin-bottom: var(--spacing-3);
 }
 
-form > div:not(.actions) {
+form > div:not(.actions,.editor-pane) {
     display: flex;
     flex-direction: column;
     margin-bottom: var(--spacing-4);
diff --git a/assets/styles/editor-layout.css b/assets/styles/editor-layout.css
index 47b4229..c7526d2 100644
--- a/assets/styles/editor-layout.css
+++ b/assets/styles/editor-layout.css
@@ -113,7 +113,7 @@ main[data-controller="editor--layout"] {
 
 .editor-pane {
     flex: 1;
-    overflow: hidden;
+    overflow: auto;
     padding: 1rem;
     min-height: 0;
 }
@@ -127,7 +127,6 @@ main[data-controller="editor--layout"] {
     display: flex;
     flex-direction: column;
     padding: 1rem;
-    overflow: hidden;
     height: 100%;
 }
 
@@ -163,7 +162,6 @@ main[data-controller="editor--layout"] {
     flex-direction: column;
     min-height: 0;
     height: 100%;
-    overflow: hidden;
 }
 
 .editor-title-input {
@@ -755,13 +753,8 @@ main[data-controller="editor--layout"] {
 /* Prism.js CSS for markdown syntax highlighting - asset-mapper import */
 
 .markdown-highlight {
-    background: #f5f2f0;
-    border-radius: 0.375rem;
     font-size: 0.95rem;
     padding: 1rem;
-    overflow-x: auto;
-    min-height: 300px;
-    max-height: 600px;
     font-family: 'Fira Mono', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
     line-height: 1.6;
     margin: 0;
@@ -773,7 +766,6 @@ main[data-controller="editor--layout"] {
     padding: 0;
     font-size: inherit;
     font-family: inherit;
-    white-space: pre;
     word-break: normal;
     word-wrap: normal;
     border: none;
diff --git a/templates/editor/layout.html.twig b/templates/editor/layout.html.twig
index 5a3a886..c7162e6 100644
--- a/templates/editor/layout.html.twig
+++ b/templates/editor/layout.html.twig
@@ -8,7 +8,7 @@
         <div id="editor">
             {{ value|raw }}
         </div>
-        <input type="hidden" name="editor[content_md]" data-publishing--quill-target="markdown">
+        <input type="hidden" name="editor[content_md]" data-publishing--quill-target="markdown" data-editor--markdown-sync-target="hidden">
         <input type="hidden" {{ block('widget_attributes') }} value="{{ value }}" />
     </div>
 {% endblock %}
@@ -199,6 +199,7 @@
                 <div
                     class="editor-pane editor-pane--markdown is-hidden"
                     data-editor--layout-target="markdownPane"
+                    data-controller="editor--markdown-sync"
                 >
                     {# Markdown editor #}
                     <div class="markdown-editor-wrapper">
@@ -211,7 +212,7 @@
                                 readonly
                             />
                         </div>
-                        <pre class="markdown-highlight"><code class="language-markdown" data-editor--layout-target="markdownCode"></code></pre>
+                        <pre class="markdown-highlight"><code class="language-markdown" data-editor--layout-target="markdownCode" data-editor--markdown-sync-target="code"></code></pre>
                     </div>
                 </div>
 
@@ -353,3 +354,8 @@
 
 {% block footer %}
 {% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    {# Removed inline script, now handled by Stimulus controller #}
+{% endblock %}