diff --git a/app/views/budgets/_phases.html.erb b/app/views/budgets/_phases.html.erb
new file mode 100644
index 000000000..a50f48503
--- /dev/null
+++ b/app/views/budgets/_phases.html.erb
@@ -0,0 +1,17 @@
+<ul class="no-bullet budget-timeline">
+  <% @budget.phases.published.each do |phase| %>
+    <li class="phase <%= 'active' if phase == @budget.current_phase %>">
+      <h3><%= t("budgets.phase.#{phase.kind}") %></h3>
+      <span>
+        <% if phase.starts_at.to_date.present? %>
+          <%= format_date(phase.starts_at) %>
+        <% end %>
+        -
+        <% if phase.ends_at.to_date.present? %>
+          <%= format_date(phase.ends_at) %>
+        <% end %>
+      </span>
+      <p><%= phase.summary %></p>
+    </li>
+  <% end %>
+</ul>
diff --git a/app/views/budgets/index.html.erb b/app/views/budgets/index.html.erb
index bf0bbe7ab..b8e057a2f 100644
--- a/app/views/budgets/index.html.erb
+++ b/app/views/budgets/index.html.erb
@@ -10,7 +10,9 @@
         <h1><%= @budget.name %></h1>
 
         <%= safe_html_with_links(@budget.description) %>
-        <%= link_to t("budgets.index.section_header.help"), "#section_help" %>
+        <p>
+          <%= link_to t("budgets.index.section_header.help"), "#section_help" %>
+        </p>
       </div>
       <div class="small-12 medium-3 column info padding" data-equalizer-watch>
         <p>
@@ -94,10 +96,7 @@
 
       <div id="all_phases">
         <h2><%= t("budgets.index.all_phases") %></h2>
-        <!--
-          Pending to include here the list of phases from
-          https://github.com/consul/consul/issues/2289
-        -->
+        <%= render "phases" %>
       </div>
     </div>
   </div>