diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index 45fbebcee..6cd214333 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -31,6 +31,11 @@
       font-weight: 500;
       letter-spacing: -1px;
       text-transform: uppercase;
+
+      .goal-code {
+        letter-spacing: -0.1em;
+        margin-right: rem-calc(10);
+      }
     }
 
     @each $code, $color in $sdg-colors {
diff --git a/app/components/sdg/goals/show_component.html.erb b/app/components/sdg/goals/show_component.html.erb
index 862bd0763..788e1319a 100644
--- a/app/components/sdg/goals/show_component.html.erb
+++ b/app/components/sdg/goals/show_component.html.erb
@@ -5,7 +5,7 @@
 
   <article class="sdg-goal sdg-goal-<%= goal.code %>">
     <header>
-      <h1><%= goal.title %></h1>
+      <h1><%= heading %></h1>
     </header>
   </article>
 
diff --git a/app/components/sdg/goals/show_component.rb b/app/components/sdg/goals/show_component.rb
index 531967906..436c9649d 100644
--- a/app/components/sdg/goals/show_component.rb
+++ b/app/components/sdg/goals/show_component.rb
@@ -15,4 +15,8 @@ class SDG::Goals::ShowComponent < ApplicationComponent
     def processes_feed
       feeds.find { |feed| feed.kind == "processes" }
     end
+
+    def heading
+      safe_join([tag.span(goal.code, class: "goal-code"), tag.span(goal.title, class: "goal-title")], " ")
+    end
 end
diff --git a/spec/system/sdg/goals_spec.rb b/spec/system/sdg/goals_spec.rb
index 5350b4634..38b293afc 100644
--- a/spec/system/sdg/goals_spec.rb
+++ b/spec/system/sdg/goals_spec.rb
@@ -47,7 +47,7 @@ describe "SDG Goals", :js do
     scenario "shows the SDG and its related content" do
       visit sdg_goal_path(15)
 
-      within(".sdg-goal header") { expect(page).to have_content "LIFE ON LAND" }
+      within(".sdg-goal header") { expect(page).to have_content "15 LIFE ON LAND" }
 
       within ".feed-proposals" do
         expect(page).to have_content "Animal farm"