diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss
index b20bdcd35..5c0ea1553 100644
--- a/app/assets/stylesheets/sdg/goals/index.scss
+++ b/app/assets/stylesheets/sdg/goals/index.scss
@@ -47,4 +47,8 @@
       @include grid-row-nest;
     }
   }
+
+  .background-header {
+    margin-bottom: $line-height;
+  }
 }
diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb
index 81c7c3c02..98eb1af1b 100644
--- a/app/components/sdg/goals/index_component.html.erb
+++ b/app/components/sdg/goals/index_component.html.erb
@@ -1,9 +1,13 @@
 <% provide(:title) { title } %>
 
 <main class="sdg-goals-index">
-  <header class="section-header">
-    <h1><%= title %></h1>
-  </header>
+  <% if header.present? %>
+    <%= render "shared/header", header: header %>
+  <% else %>
+    <header class="section-header">
+      <h1><%= title %></h1>
+    </header>
+  <% end %>
 
   <%= render Shared::BannerComponent.new("sdg") %>
 
diff --git a/app/components/sdg/goals/index_component.rb b/app/components/sdg/goals/index_component.rb
index f9715d01a..8dbfe147c 100644
--- a/app/components/sdg/goals/index_component.rb
+++ b/app/components/sdg/goals/index_component.rb
@@ -1,9 +1,10 @@
 class SDG::Goals::IndexComponent < ApplicationComponent
-  attr_reader :goals, :phases
+  attr_reader :goals, :header, :phases
   delegate :link_list, to: :helpers
 
-  def initialize(goals, phases)
+  def initialize(goals, header:, phases:)
     @goals = goals
+    @header = header
     @phases = phases
   end
 
diff --git a/app/controllers/sdg/goals_controller.rb b/app/controllers/sdg/goals_controller.rb
index 05dfb309c..1c34983c8 100644
--- a/app/controllers/sdg/goals_controller.rb
+++ b/app/controllers/sdg/goals_controller.rb
@@ -6,6 +6,7 @@ class SDG::GoalsController < ApplicationController
   def index
     @goals = @goals.order(:code)
     @phases = SDG::Phase.accessible_by(current_ability).order(:kind)
+    @header = WebSection.find_by!(name: "sdg").header
   end
 
   def show
diff --git a/app/views/sdg/goals/index.html.erb b/app/views/sdg/goals/index.html.erb
index b38a0eebd..9cd046de3 100644
--- a/app/views/sdg/goals/index.html.erb
+++ b/app/views/sdg/goals/index.html.erb
@@ -1 +1 @@
-<%= render SDG::Goals::IndexComponent.new(@goals, @phases) %>
+<%= render SDG::Goals::IndexComponent.new(@goals, header: @header, phases: @phases) %>
diff --git a/spec/components/sdg/goals/index_component_spec.rb b/spec/components/sdg/goals/index_component_spec.rb
index 2c756ccff..4caffb3ce 100644
--- a/spec/components/sdg/goals/index_component_spec.rb
+++ b/spec/components/sdg/goals/index_component_spec.rb
@@ -3,16 +3,29 @@ require "rails_helper"
 describe SDG::Goals::IndexComponent, type: :component do
   let!(:goals) { SDG::Goal.all }
   let!(:phases) { SDG::Phase.all }
-  let!(:component) { SDG::Goals::IndexComponent.new(goals, phases) }
+  let!(:component) { SDG::Goals::IndexComponent.new(goals, header: nil, phases: phases) }
 
   before do
     Setting["feature.sdg"] = true
   end
 
-  it "renders a heading" do
-    render_inline component
+  describe "header" do
+    it "renders the default header when a custom one is not defined" do
+      render_inline component
 
-    expect(page).to have_css "h1", exact_text: "Sustainable Development Goals"
+      expect(page).to have_css "h1", exact_text: "Sustainable Development Goals"
+    end
+
+    it "renders a custom header" do
+      sdg_web_section = WebSection.find_by!(name: "sdg")
+      header = create(:widget_card, cardable: sdg_web_section)
+      component = SDG::Goals::IndexComponent.new(goals, header: header, phases: phases)
+
+      render_inline component
+
+      expect(page).to have_content header.title
+      expect(page).not_to have_css "h1", exact_text: "Sustainable Development Goals"
+    end
   end
 
   it "renders phases" do