diff --git a/app/components/admin/budget_phases/phases_component.rb b/app/components/admin/budget_phases/phases_component.rb
index 5dfd9c6f5..7de363c86 100644
--- a/app/components/admin/budget_phases/phases_component.rb
+++ b/app/components/admin/budget_phases/phases_component.rb
@@ -12,7 +12,7 @@ class Admin::BudgetPhases::PhasesComponent < ApplicationComponent
     end
 
     def dates(phase)
-      Admin::Budgets::DurationComponent.new(phase).dates
+      render Admin::DurationComponent.new(phase)
     end
 
     def enabled_cell(phase)
diff --git a/app/components/admin/budgets/duration_component.rb b/app/components/admin/budgets/duration_component.rb
deleted file mode 100644
index 368ed92d8..000000000
--- a/app/components/admin/budgets/duration_component.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-class Admin::Budgets::DurationComponent < ApplicationComponent
-  attr_reader :durable
-
-  def initialize(durable)
-    @durable = durable
-  end
-
-  def dates
-    Admin::DateRangeComponent.new(start_time, end_time).call
-  end
-
-  def duration
-    distance_of_time_in_words(durable.starts_at, durable.ends_at) if durable.starts_at && durable.ends_at
-  end
-
-  private
-
-    def start_time
-      durable.starts_at
-    end
-
-    def end_time
-      durable.ends_at - 1.second if durable.ends_at.present?
-    end
-end
diff --git a/app/components/admin/budgets/duration_in_words_component.html.erb b/app/components/admin/budgets/duration_in_words_component.html.erb
new file mode 100644
index 000000000..a0323de85
--- /dev/null
+++ b/app/components/admin/budgets/duration_in_words_component.html.erb
@@ -0,0 +1 @@
+<%= duration -%>
diff --git a/app/components/admin/budgets/duration_in_words_component.rb b/app/components/admin/budgets/duration_in_words_component.rb
new file mode 100644
index 000000000..455ec54d2
--- /dev/null
+++ b/app/components/admin/budgets/duration_in_words_component.rb
@@ -0,0 +1,17 @@
+class Admin::Budgets::DurationInWordsComponent < ApplicationComponent
+  attr_reader :durable
+
+  def initialize(durable)
+    @durable = durable
+  end
+
+  def render?
+    durable.starts_at && durable.ends_at
+  end
+
+  private
+
+    def duration
+      distance_of_time_in_words(durable.starts_at, durable.ends_at)
+    end
+end
diff --git a/app/components/admin/budgets/index_component.rb b/app/components/admin/budgets/index_component.rb
index 53f1d5d6f..72b3c4615 100644
--- a/app/components/admin/budgets/index_component.rb
+++ b/app/components/admin/budgets/index_component.rb
@@ -37,11 +37,11 @@ class Admin::Budgets::IndexComponent < ApplicationComponent
     end
 
     def dates(budget)
-      Admin::Budgets::DurationComponent.new(budget).dates
+      render Admin::DurationComponent.new(budget)
     end
 
     def duration(budget)
-      Admin::Budgets::DurationComponent.new(budget).duration
+      render Admin::Budgets::DurationInWordsComponent.new(budget)
     end
 
     def status_html_class(budget)
diff --git a/app/components/admin/duration_component.html.erb b/app/components/admin/duration_component.html.erb
new file mode 100644
index 000000000..f6920c3b7
--- /dev/null
+++ b/app/components/admin/duration_component.html.erb
@@ -0,0 +1 @@
+<%= dates -%>
diff --git a/app/components/admin/duration_component.rb b/app/components/admin/duration_component.rb
new file mode 100644
index 000000000..417e8edd3
--- /dev/null
+++ b/app/components/admin/duration_component.rb
@@ -0,0 +1,21 @@
+class Admin::DurationComponent < ApplicationComponent
+  attr_reader :durable
+
+  def initialize(durable)
+    @durable = durable
+  end
+
+  private
+
+    def dates
+      render Admin::DateRangeComponent.new(start_time, end_time)
+    end
+
+    def start_time
+      durable.starts_at
+    end
+
+    def end_time
+      durable.ends_at - 1.second if durable.ends_at.present?
+    end
+end
diff --git a/spec/components/admin/budgets/duration_component_spec.rb b/spec/components/admin/budgets/duration_component_spec.rb
deleted file mode 100644
index d84d13c7b..000000000
--- a/spec/components/admin/budgets/duration_component_spec.rb
+++ /dev/null
@@ -1,73 +0,0 @@
-require "rails_helper"
-
-describe Admin::Budgets::DurationComponent do
-  describe "#dates" do
-    it "shows both dates when both are defined" do
-      durable = double(
-        starts_at: Time.zone.local(2015, 8, 1, 12, 0, 0),
-        ends_at: Time.zone.local(2016, 9, 30, 16, 30, 00)
-      )
-
-      dates = Admin::Budgets::DurationComponent.new(durable).dates
-
-      render dates
-
-      expect(page.text).to eq "2015-08-01 12:00 - 2016-09-30 16:29"
-      expect(dates).to be_html_safe
-    end
-
-    it "shows the start date when no end date is defined" do
-      durable = double(starts_at: Time.zone.local(2015, 8, 1, 12, 0, 0), ends_at: nil)
-      render Admin::Budgets::DurationComponent.new(durable).dates
-
-      expect(page.text).to eq "2015-08-01 12:00 - "
-    end
-
-    it "shows the end date when no start date is defined" do
-      durable = double(starts_at: nil, ends_at: Time.zone.local(2016, 9, 30, 16, 30, 00))
-
-      render Admin::Budgets::DurationComponent.new(durable).dates
-
-      expect(page.text).to eq "- 2016-09-30 16:29"
-    end
-  end
-
-  describe "#duration" do
-    it "describes the total duration in human language" do
-      durable = double(
-        starts_at: Time.zone.local(2015, 8, 1, 12, 0, 0),
-        ends_at: Time.zone.local(2016, 9, 30, 16, 30, 00)
-      )
-
-      render Admin::Budgets::DurationComponent.new(durable).duration
-
-      expect(page.text).to eq "about 1 year"
-    end
-
-    it "is not defined when no end date is defined" do
-      durable = double(starts_at: Time.zone.local(2015, 8, 1, 12, 0, 0), ends_at: nil)
-
-      render Admin::Budgets::DurationComponent.new(durable).duration
-
-      expect(page).not_to be_rendered
-    end
-
-    it "is not defined when no start date is defined" do
-      durable = double(starts_at: nil, ends_at: Time.zone.local(2016, 9, 30, 16, 30, 00))
-
-      render Admin::Budgets::DurationComponent.new(durable).duration
-
-      expect(page).not_to be_rendered
-    end
-  end
-
-  attr_reader :content
-
-  def render(content)
-    @content = content
-  end
-
-  def page
-    Capybara::Node::Simple.new(content.to_s)
-  end
-end
diff --git a/spec/components/admin/budgets/duration_in_words_component_spec.rb b/spec/components/admin/budgets/duration_in_words_component_spec.rb
new file mode 100644
index 000000000..8cb72431b
--- /dev/null
+++ b/spec/components/admin/budgets/duration_in_words_component_spec.rb
@@ -0,0 +1,30 @@
+require "rails_helper"
+
+describe Admin::Budgets::DurationInWordsComponent do
+  it "describes the total duration in human language" do
+    durable = double(
+      starts_at: Time.zone.local(2015, 8, 1, 12, 0, 0),
+      ends_at: Time.zone.local(2016, 9, 30, 16, 30, 00)
+    )
+
+    render_inline Admin::Budgets::DurationInWordsComponent.new(durable)
+
+    expect(page.text).to eq "about 1 year"
+  end
+
+  it "is not defined when no end date is defined" do
+    durable = double(starts_at: Time.zone.local(2015, 8, 1, 12, 0, 0), ends_at: nil)
+
+    render_inline Admin::Budgets::DurationInWordsComponent.new(durable)
+
+    expect(page).not_to be_rendered
+  end
+
+  it "is not defined when no start date is defined" do
+    durable = double(starts_at: nil, ends_at: Time.zone.local(2016, 9, 30, 16, 30, 00))
+
+    render_inline Admin::Budgets::DurationInWordsComponent.new(durable)
+
+    expect(page).not_to be_rendered
+  end
+end
diff --git a/spec/components/admin/duration_component_spec.rb b/spec/components/admin/duration_component_spec.rb
new file mode 100644
index 000000000..9780df837
--- /dev/null
+++ b/spec/components/admin/duration_component_spec.rb
@@ -0,0 +1,32 @@
+require "rails_helper"
+
+describe Admin::DurationComponent do
+  it "shows both dates when both are defined" do
+    durable = double(
+      starts_at: Time.zone.local(2015, 8, 1, 12, 0, 0),
+      ends_at: Time.zone.local(2016, 9, 30, 16, 30, 00)
+    )
+
+    render_inline Admin::DurationComponent.new(durable)
+
+    expect(page.text).to eq "2015-08-01 12:00 - 2016-09-30 16:29"
+    expect(page).to have_css "time", exact_text: "2015-08-01 12:00"
+    expect(page).to have_css "time", exact_text: "2016-09-30 16:29"
+  end
+
+  it "shows the start date when no end date is defined" do
+    durable = double(starts_at: Time.zone.local(2015, 8, 1, 12, 0, 0), ends_at: nil)
+
+    render_inline Admin::DurationComponent.new(durable)
+
+    expect(page.text).to eq "2015-08-01 12:00 - "
+  end
+
+  it "shows the end date when no start date is defined" do
+    durable = double(starts_at: nil, ends_at: Time.zone.local(2016, 9, 30, 16, 30, 00))
+
+    render_inline Admin::DurationComponent.new(durable)
+
+    expect(page.text).to eq "- 2016-09-30 16:29"
+  end
+end