diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index aa5cc2a29..813118fac 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -587,95 +587,6 @@ table {
   }
 }
 
-.legislation-draft-versions-form {
-
-  .fullscreen-container {
-    background: #ccdbe6;
-    text-align: center;
-
-    .markdown-editor-header,
-    .markdown-editor-buttons {
-      display: none;
-    }
-
-    span {
-      font-size: $small-font-size;
-      text-decoration: none;
-    }
-
-    .icon-expand {
-      line-height: 0;
-      margin-left: 0.25rem;
-      text-decoration: none;
-      vertical-align: sub;
-    }
-  }
-
-  .markdown-preview {
-    border: 1px solid #cacaca;
-    font-family: $font-family-serif;
-    margin-bottom: 2rem;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-family: $font-family-serif !important;
-      font-size: 1rem;
-      line-height: 1.625rem;
-      margin-bottom: 0;
-    }
-
-    p {
-      font-size: 1rem;
-      line-height: 1.625rem;
-    }
-  }
-
-  .fullscreen {
-
-    .markdown-area,
-    .markdown-preview {
-      display: block;
-    }
-
-    .column {
-      padding: 0;
-    }
-
-    .fullscreen-container {
-      background: $admin-color;
-      margin-bottom: 0;
-      padding: 0.5rem 1rem;
-      text-align: left;
-    }
-
-    .legislation-draft-version-body {
-      border-radius: 0;
-
-      @include breakpoint(medium) {
-        padding-left: 2rem;
-        padding-right: 2rem;
-      }
-
-      &:focus {
-        box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.1);
-      }
-    }
-
-    .markdown-preview {
-      border: 0;
-      padding: 1rem;
-
-      @include breakpoint(medium) {
-        padding: 1rem 2rem;
-      }
-    }
-  }
-}
-
 // 10. Budgets
 // -----------------
 
diff --git a/app/assets/stylesheets/admin/legislation/draft_versions/form.scss b/app/assets/stylesheets/admin/legislation/draft_versions/form.scss
new file mode 100644
index 000000000..2d8232782
--- /dev/null
+++ b/app/assets/stylesheets/admin/legislation/draft_versions/form.scss
@@ -0,0 +1,88 @@
+.legislation-draft-versions-form {
+
+  .fullscreen-container {
+    background: #ccdbe6;
+    text-align: center;
+
+    .markdown-editor-header,
+    .markdown-editor-buttons {
+      display: none;
+    }
+
+    span {
+      font-size: $small-font-size;
+      text-decoration: none;
+    }
+
+    .icon-expand {
+      line-height: 0;
+      margin-left: 0.25rem;
+      text-decoration: none;
+      vertical-align: sub;
+    }
+  }
+
+  .markdown-preview {
+    border: 1px solid #cacaca;
+    font-family: $font-family-serif;
+    margin-bottom: 2rem;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: $font-family-serif !important;
+      font-size: 1rem;
+      line-height: 1.625rem;
+      margin-bottom: 0;
+    }
+
+    p {
+      font-size: 1rem;
+      line-height: 1.625rem;
+    }
+  }
+
+  .fullscreen {
+
+    .markdown-area,
+    .markdown-preview {
+      display: block;
+    }
+
+    .column {
+      padding: 0;
+    }
+
+    .fullscreen-container {
+      background: $admin-color;
+      margin-bottom: 0;
+      padding: 0.5rem 1rem;
+      text-align: left;
+    }
+
+    .legislation-draft-version-body {
+      border-radius: 0;
+
+      @include breakpoint(medium) {
+        padding-left: 2rem;
+        padding-right: 2rem;
+      }
+
+      &:focus {
+        box-shadow: inset 0 1px 2px rgba(34, 34, 34, 0.1);
+      }
+    }
+
+    .markdown-preview {
+      border: 0;
+      padding: 1rem;
+
+      @include breakpoint(medium) {
+        padding: 1rem 2rem;
+      }
+    }
+  }
+}
diff --git a/app/views/admin/legislation/draft_versions/_form.html.erb b/app/components/admin/legislation/draft_versions/form_component.html.erb
similarity index 75%
rename from app/views/admin/legislation/draft_versions/_form.html.erb
rename to app/components/admin/legislation/draft_versions/form_component.html.erb
index b3f6286a9..f2d187110 100644
--- a/app/views/admin/legislation/draft_versions/_form.html.erb
+++ b/app/components/admin/legislation/draft_versions/form_component.html.erb
@@ -1,12 +1,13 @@
-<%= render "shared/globalize_locales", resource: @draft_version %>
+<%= render "shared/globalize_locales", resource: draft_version %>
 
-<%= translatable_form_for [:admin, @process, @draft_version], url: url,
-                                                              html: {
-                                                                data: {
-                                                                  markdown_changes_message: I18n.t("admin.legislation.draft_versions.edit.markdown_changes_message")
-                                                                }
-                                                              } do |f| %>
-  <%= render "shared/errors", resource: @draft_version %>
+<%= translatable_form_for [:admin, process, draft_version], url: url,
+                                                            html: {
+                                                              data: {
+                                                                markdown_changes_message: I18n.t("admin.legislation.draft_versions.edit.markdown_changes_message")
+                                                              },
+                                                              class: "legislation-draft-versions-form"
+                                                            } do |f| %>
+  <%= render "shared/errors", resource: draft_version %>
 
   <div class="row">
     <%= f.translatable_fields do |translations_form| %>
@@ -35,12 +36,12 @@
         <div class="small-12 medium-8 column fullscreen-container">
           <div class="markdown-editor-header truncate">
             <%= sanitize(t("admin.legislation.draft_versions.form.title",
-                           draft_version_title: @draft_version.title,
-                           process_title: @process.title)) %>
+                           draft_version_title: draft_version.title,
+                           process_title: process.title)) %>
           </div>
 
           <div class="markdown-editor-buttons">
-            <%= f.submit(class: "button", value: t("admin.legislation.draft_versions.#{admin_submit_action(@draft_version)}.submit_button")) %>
+            <%= f.submit(class: "button", value: t("admin.legislation.draft_versions.#{admin_submit_action(draft_version)}.submit_button")) %>
           </div>
 
           <%= link_to "#", class: "fullscreen-toggle" do %>
@@ -80,7 +81,7 @@
     </div>
 
     <div class="small-12 medium-3 column clear end margin-top">
-      <%= f.submit(class: "button success expanded", value: t("admin.legislation.draft_versions.#{admin_submit_action(@draft_version)}.submit_button")) %>
+      <%= f.submit(class: "button success expanded", value: t("admin.legislation.draft_versions.#{admin_submit_action(draft_version)}.submit_button")) %>
     </div>
   </div>
 <% end %>
diff --git a/app/components/admin/legislation/draft_versions/form_component.rb b/app/components/admin/legislation/draft_versions/form_component.rb
new file mode 100644
index 000000000..8ecbf7311
--- /dev/null
+++ b/app/components/admin/legislation/draft_versions/form_component.rb
@@ -0,0 +1,17 @@
+class Admin::Legislation::DraftVersions::FormComponent < ApplicationComponent
+  include TranslatableFormHelper
+  include GlobalizeHelper
+  attr_reader :draft_version, :url
+  use_helpers :admin_submit_action
+
+  def initialize(draft_version, url:)
+    @draft_version = draft_version
+    @url = url
+  end
+
+  private
+
+    def process
+      draft_version.process
+    end
+end
diff --git a/app/views/admin/legislation/draft_versions/edit.html.erb b/app/views/admin/legislation/draft_versions/edit.html.erb
index 1d9d84e3b..ecedc339e 100644
--- a/app/views/admin/legislation/draft_versions/edit.html.erb
+++ b/app/views/admin/legislation/draft_versions/edit.html.erb
@@ -2,7 +2,7 @@
   <%= t("admin.header.title") %> - <%= t("admin.menu.legislation") %> - <%= @process.title %> - <%= t("admin.legislation.draft_versions.index.title") %> - <%= @draft_version.title %>
 <% end %>
 
-<div class="legislation-draft-versions-edit legislation-draft-versions-form">
+<div class="legislation-draft-versions-edit">
   <div class="small-12 column">
     <%= back_link_to admin_legislation_process_draft_versions_path(@process),
                      t("admin.legislation.draft_versions.edit.back") %>
@@ -24,6 +24,9 @@
       </div>
     </div>
 
-    <%= render "form", url: admin_legislation_process_draft_version_path(@process, @draft_version) %>
+    <%= render Admin::Legislation::DraftVersions::FormComponent.new(
+      @draft_version,
+      url: admin_legislation_process_draft_version_path(@process, @draft_version)
+    ) %>
   </div>
 </div>
diff --git a/app/views/admin/legislation/draft_versions/new.html.erb b/app/views/admin/legislation/draft_versions/new.html.erb
index fd3498afa..42f489c89 100644
--- a/app/views/admin/legislation/draft_versions/new.html.erb
+++ b/app/views/admin/legislation/draft_versions/new.html.erb
@@ -2,7 +2,7 @@
   <%= t("admin.header.title") %> - <%= t("admin.menu.legislation") %> - <%= @process.title %> - <%= t("admin.legislation.draft_versions.index.title") %> - <%= t("admin.legislation.draft_versions.new.title") %>
 <% end %>
 
-<div class="legislation-draft-versions-new legislation-draft-versions-form">
+<div class="legislation-draft-versions-new">
   <div class="small-12 column">
     <%= back_link_to admin_legislation_process_draft_versions_path(@process),
                      t("admin.legislation.draft_versions.new.back") %>
@@ -13,6 +13,9 @@
 
     <h3><%= t("admin.legislation.draft_versions.new.title") %></h3>
 
-    <%= render "form", url: admin_legislation_process_draft_versions_path(@process) %>
+    <%= render Admin::Legislation::DraftVersions::FormComponent.new(
+      @draft_version,
+      url: admin_legislation_process_draft_versions_path(@process)
+    ) %>
   </div>
 </div>