diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index b4c77ddd4..3fe00f6be 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2748,7 +2748,8 @@ table {
 
 .home-page,
 .custom-page,
-.sdg-goal-show {
+.sdg-goal-show,
+.sdg-goals-index {
 
   a {
 
diff --git a/app/assets/stylesheets/sdg/goals/index.scss b/app/assets/stylesheets/sdg/goals/index.scss
index 23cf9074e..efbd855cc 100644
--- a/app/assets/stylesheets/sdg/goals/index.scss
+++ b/app/assets/stylesheets/sdg/goals/index.scss
@@ -22,4 +22,13 @@
       }
     }
   }
+
+  .sdg-phase {
+    @include grid-row;
+    @include grid-column-gutter;
+
+    .cards-container {
+      @include grid-row-nest;
+    }
+  }
 }
diff --git a/app/components/sdg/goals/index_component.html.erb b/app/components/sdg/goals/index_component.html.erb
index f03bb2ef1..c0f0635fd 100644
--- a/app/components/sdg/goals/index_component.html.erb
+++ b/app/components/sdg/goals/index_component.html.erb
@@ -1,3 +1,13 @@
 <div class="sdg-goals-index">
   <%= link_list(*goal_links, class: "sdg-goal-list") %>
+
+  <% phases.each do |phase| %>
+    <section class="sdg-phase" id="sdg_phase_<%= phase.kind %>">
+      <header>
+        <h2 class="title"><%= phase.title %></h2>
+      </header>
+
+      <%= render "shared/cards", cards: phase.cards %>
+    </section>
+  <% end %>
 </div>
diff --git a/app/components/sdg/goals/index_component.rb b/app/components/sdg/goals/index_component.rb
index dd59427d8..bf0832269 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
+  attr_reader :goals, :phases
   delegate :link_list, to: :helpers
 
-  def initialize(goals)
+  def initialize(goals, phases)
     @goals = goals
+    @phases = phases
   end
 
   private
diff --git a/app/controllers/sdg/goals_controller.rb b/app/controllers/sdg/goals_controller.rb
index 595add701..05dfb309c 100644
--- a/app/controllers/sdg/goals_controller.rb
+++ b/app/controllers/sdg/goals_controller.rb
@@ -5,6 +5,7 @@ class SDG::GoalsController < ApplicationController
 
   def index
     @goals = @goals.order(:code)
+    @phases = SDG::Phase.accessible_by(current_ability).order(:kind)
   end
 
   def show
diff --git a/app/views/sdg/goals/index.html.erb b/app/views/sdg/goals/index.html.erb
index 7dfb01513..b38a0eebd 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) %>
+<%= render SDG::Goals::IndexComponent.new(@goals, @phases) %>
diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb
index 9854b609f..4804b5453 100644
--- a/spec/system/sdg/goals_spec.rb
+++ b/spec/system/sdg/goals_spec.rb
@@ -32,6 +32,17 @@ describe "SDG Goals", :js do
 
       expect(page).to have_current_path sdg_goal_path(7)
     end
+
+    scenario "has cards for phases" do
+      create(:widget_card, cardable: SDG::Phase["planning"], title: "Planning card")
+
+      visit sdg_goals_path
+
+      within "#sdg_phase_planning" do
+        expect(page).to have_css "header", exact_text: "Planning"
+        expect(page).to have_content "PLANNING CARD"
+      end
+    end
   end
 
   describe "Show" do