diff --git a/app/assets/stylesheets/admin/budget_phases/form.scss b/app/assets/stylesheets/admin/budget_phases/form.scss
new file mode 100644
index 000000000..8e9be056f
--- /dev/null
+++ b/app/assets/stylesheets/admin/budget_phases/form.scss
@@ -0,0 +1,25 @@
+.admin .budget-phases-form {
+
+  fieldset {
+    margin-top: $line-height;
+
+    > * {
+      @include grid-column;
+    }
+
+    > .date-field {
+
+      @include breakpoint(medium) {
+        width: 50%;
+      }
+
+      @include breakpoint(large) {
+        width: 25%;
+      }
+
+      &:last-child {
+        float: left;
+      }
+    }
+  }
+}
diff --git a/app/views/admin/budget_phases/_form.html.erb b/app/views/admin/budget_phases/_form.html.erb
index 845a404d9..6e24790fb 100644
--- a/app/views/admin/budget_phases/_form.html.erb
+++ b/app/views/admin/budget_phases/_form.html.erb
@@ -1,43 +1,45 @@
 <%= render "shared/globalize_locales", resource: @phase %>
 
-<%= translatable_form_for [:admin, @phase.budget, @phase] do |f| %>
+<%= translatable_form_for [:admin, @phase.budget, @phase], html: { class: "budget-phases-form" } do |f| %>
 
   <%= render "shared/errors", resource: @phase %>
 
-  <div class="row">
-    <div class="small-12 medium-6 column">
+  <fieldset>
+    <legend aria-describedby="phase_duration_description">
+      <%= t("admin.budget_phases.edit.duration") %>
+    </legend>
+
+    <p class="help-text" id="phase_duration_description">
+      <%= t("admin.budget_phases.edit.duration_description") %>
+    </p>
+
+    <div class="date-field">
       <%= f.date_field :starts_at, id: "start_date" %>
     </div>
-    <div class="small-12 medium-6 column">
+
+    <div class="date-field">
       <%= f.date_field :ends_at, id: "end_date" %>
     </div>
+  </fieldset>
+
+  <div class="small-12 column margin">
+    <%= f.check_box :enabled %>
+
+    <span class="help-text" id="phase-summary-help-text">
+      <%= t("admin.budget_phases.edit.enabled_help_text") %>
+    </span>
   </div>
 
-  <div class="row">
-    <%= f.translatable_fields do |translations_form| %>
-      <div class="small-12 column">
-        <%= translations_form.text_area :description,
-                                         maxlength: Budget::Phase::DESCRIPTION_MAX_LENGTH,
-                                         class: "html-area",
-                                         hint: t("admin.budget_phases.edit.description_help_text") %>
-      </div>
-    <% end %>
-  </div>
-
-  <div class="row">
-    <div class="small-12 column margin-top">
-      <%= f.check_box :enabled %>
-
-      <span class="help-text" id="phase-summary-help-text">
-        <%= t("admin.budget_phases.edit.enabled_help_text") %>
-      </span>
+  <%= f.translatable_fields do |translations_form| %>
+    <div class="small-12 column">
+      <%= translations_form.text_area :description,
+                                       maxlength: Budget::Phase::DESCRIPTION_MAX_LENGTH,
+                                       class: "html-area",
+                                       hint: t("admin.budget_phases.edit.description_help_text") %>
     </div>
-  </div>
+  <% end %>
 
-  <div class="row">
-    <div class="small-12 medium-4 large-3 column end margin-top">
-      <%= f.submit t("admin.budget_phases.edit.save_changes"), class: "button success expanded" %>
-    </div>
+  <div class="small-12 column">
+    <%= f.submit t("admin.budget_phases.edit.save_changes"), class: "button success" %>
   </div>
-
 <% end %>
diff --git a/app/views/admin/budget_phases/edit.html.erb b/app/views/admin/budget_phases/edit.html.erb
index da7b08e21..452c11f96 100644
--- a/app/views/admin/budget_phases/edit.html.erb
+++ b/app/views/admin/budget_phases/edit.html.erb
@@ -1,9 +1,5 @@
 <%= back_link_to edit_admin_budget_path(@phase.budget) %>
 
-<div class="row">
-  <div class="small-12 column">
-    <h2><%= t("admin.budgets.edit.title") %> - <%= @phase.name %></h2>
-  </div>
-</div>
+<h2><%= t("admin.budgets.edit.title") %> - <%= @phase.name %></h2>
 
 <%= render "/admin/budget_phases/form" %>
diff --git a/config/locales/en/admin.yml b/config/locales/en/admin.yml
index 1db16f4da..64437f83c 100644
--- a/config/locales/en/admin.yml
+++ b/config/locales/en/admin.yml
@@ -174,6 +174,8 @@ en:
     budget_phases:
       edit:
         description_help_text: This text will appear in the header when the phase is active
+        duration: "Phase's duration"
+        duration_description: "The period of time this phase will be active."
         enabled_help_text: This phase will be public in the budget's phases timeline, as well as active for any other purpose
         save_changes: Save changes
       index:
diff --git a/config/locales/es/admin.yml b/config/locales/es/admin.yml
index ebdf2f8d2..7eb81bd86 100644
--- a/config/locales/es/admin.yml
+++ b/config/locales/es/admin.yml
@@ -174,6 +174,8 @@ es:
     budget_phases:
       edit:
         description_help_text: Este texto aparecerá en la cabecera cuando la fase esté activa
+        duration: "Duración de la fase"
+        duration_description: "El período de tiempo que esta fase estará activa."
         enabled_help_text: Esta fase será pública en el calendario de fases del presupuesto y estará activa para otros propósitos
         save_changes: Guardar cambios
       index: