diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
index ef9e13f7ccfaea3bd70d6a7fe0f7794a6acb994b..51980b2d971dacab0ae3fe57715ae18206908922 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_a.vue
@@ -18,9 +18,13 @@ export default {
       required: true,
       type: Object,
     },
+    sections: {
+      required: true,
+      type: Object,
+    },
   },
   maxValue: Object.keys(ACTION_LABELS).length,
-  sections: Object.keys(ACTION_SECTIONS),
+  actionSections: Object.keys(ACTION_SECTIONS),
   computed: {
     progressValue() {
       return Object.values(this.actions).filter((a) => a.completed).length;
@@ -38,6 +42,9 @@ export default {
       );
       return actions;
     },
+    svgFor(section) {
+      return this.sections[section].svg;
+    },
   },
 };
 </script>
@@ -59,8 +66,12 @@ export default {
       <gl-progress-bar :value="progressValue" :max="$options.maxValue" />
     </div>
     <div class="row row-cols-1 row-cols-md-3 gl-mt-5">
-      <div v-for="section in $options.sections" :key="section" class="col gl-mb-6">
-        <learn-gitlab-section-card :section="section" :actions="actionsFor(section)" />
+      <div v-for="section in $options.actionSections" :key="section" class="col gl-mb-6">
+        <learn-gitlab-section-card
+          :section="section"
+          :svg="svgFor(section)"
+          :actions="actionsFor(section)"
+        />
       </div>
     </div>
   </div>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue
index db694a66afd4b07f910abe5ec4ed434d41194cb3..6a196687a7601236a3cbfb8624db7d57047d8dcc 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/components/learn_gitlab_section_card.vue
@@ -1,6 +1,5 @@
 <script>
 import { GlCard } from '@gitlab/ui';
-import { imagePath } from '~/lib/utils/common_utils';
 import { ACTION_LABELS, ACTION_SECTIONS } from '../constants';
 
 import LearnGitlabSectionLink from './learn_gitlab_section_link.vue';
@@ -16,6 +15,10 @@ export default {
       required: true,
       type: String,
     },
+    svg: {
+      required: true,
+      type: String,
+    },
     actions: {
       required: true,
       type: Object,
@@ -28,17 +31,12 @@ export default {
       );
     },
   },
-  methods: {
-    svg(section) {
-      return imagePath(`learn_gitlab/section_${section}.svg`);
-    },
-  },
 };
 </script>
 <template>
   <gl-card class="gl-pt-0 learn-gitlab-section-card">
     <div class="learn-gitlab-section-card-header">
-      <img :src="svg(section)" />
+      <img :src="svg" />
       <h2 class="gl-font-lg gl-mb-3">{{ $options.i18n[section].title }}</h2>
       <p class="gl-text-gray-700 gl-mb-6">{{ $options.i18n[section].description }}</p>
     </div>
diff --git a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
index d9ad29fad99f91d7fec248aff95e898fa080afed..ac7c94bdd9e1cdeab69f5dffb0de28da9c68c3d3 100644
--- a/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
+++ b/app/assets/javascripts/pages/projects/learn_gitlab/index/index.js
@@ -12,6 +12,7 @@ function initLearnGitlab() {
   }
 
   const actions = convertObjectPropsToCamelCase(JSON.parse(el.dataset.actions));
+  const sections = convertObjectPropsToCamelCase(JSON.parse(el.dataset.sections));
 
   const { learnGitlabA } = gon.experiments;
 
@@ -20,7 +21,9 @@ function initLearnGitlab() {
   return new Vue({
     el,
     render(createElement) {
-      return createElement(learnGitlabA ? LearnGitlabA : LearnGitlabB, { props: { actions } });
+      return createElement(learnGitlabA ? LearnGitlabA : LearnGitlabB, {
+        props: { actions, sections },
+      });
     },
   });
 }
diff --git a/app/helpers/learn_gitlab_helper.rb b/app/helpers/learn_gitlab_helper.rb
index 51dce76c7494ddb9787cf8bc17bfdaf7a50bd2f5..16a63f02271d318dc3a229856d35ab3fc3ed323d 100644
--- a/app/helpers/learn_gitlab_helper.rb
+++ b/app/helpers/learn_gitlab_helper.rb
@@ -36,6 +36,20 @@ def continous_onboarding_experiment_enabled_for_user?
       Gitlab::Experimentation.in_experiment_group?(:learn_gitlab_b, subject: current_user)
   end
 
+  def onboarding_sections_data
+    {
+      workspace: {
+        svg: image_path("learn_gitlab/section_workspace.svg")
+      },
+      plan: {
+        svg: image_path("learn_gitlab/section_plan.svg")
+      },
+      deploy: {
+        svg: image_path("learn_gitlab/section_deploy.svg")
+      }
+    }
+  end
+
   private
 
   def action_urls
diff --git a/app/views/projects/learn_gitlab/index.html.haml b/app/views/projects/learn_gitlab/index.html.haml
index 94023b21aab99a35f6b691d1255e862639e55a2a..4935b72d3fa76aa666960fe7ed23d2045483da6f 100644
--- a/app/views/projects/learn_gitlab/index.html.haml
+++ b/app/views/projects/learn_gitlab/index.html.haml
@@ -2,4 +2,4 @@
 - page_title _("Learn GitLab")
 - add_page_specific_style 'page_bundles/learn_gitlab'
 
-#js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json } }
+#js-learn-gitlab-app{ data: { actions: onboarding_actions_data(@project).to_json, sections: onboarding_sections_data.to_json } }
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap
index 981e4c84323dc0acf1073856df6b992cac033a6e..b9566741cfaa7c2e205a24dec8f2b20c73de2de6 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap
+++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_a_spec.js.snap
@@ -68,7 +68,7 @@ exports[`Learn GitLab Design A renders correctly 1`] = `
             class="learn-gitlab-section-card-header"
           >
             <img
-              src="/assets/learn_gitlab/section_workspace.svg"
+              src="workspace.svg"
             />
              
             <h2
@@ -246,7 +246,7 @@ exports[`Learn GitLab Design A renders correctly 1`] = `
             class="learn-gitlab-section-card-header"
           >
             <img
-              src="/assets/learn_gitlab/section_plan.svg"
+              src="plan.svg"
             />
              
             <h2
@@ -324,7 +324,7 @@ exports[`Learn GitLab Design A renders correctly 1`] = `
             class="learn-gitlab-section-card-header"
           >
             <img
-              src="/assets/learn_gitlab/section_deploy.svg"
+              src="deploy.svg"
             />
              
             <h2
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
index ad8db0822cc9443c30f1fc48120541e3152de263..9e00ace761c528bd4f0990524de3a7eda1833c5d 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
+++ b/spec/frontend/pages/projects/learn_gitlab/components/__snapshots__/learn_gitlab_section_card_spec.js.snap
@@ -11,7 +11,7 @@ exports[`Learn GitLab Section Card renders correctly 1`] = `
     class="learn-gitlab-section-card-header"
   >
     <img
-      src="/assets/learn_gitlab/section_workspace.svg"
+      src="workspace.svg"
     />
      
     <h2
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js
index 64ace34103867c269b4b3508f64d227b0c5be8ce..ac997c1f2374866bf9a131cae5033c3dce83be61 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_a_spec.js
@@ -1,13 +1,13 @@
 import { GlProgressBar } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import LearnGitlabA from '~/pages/projects/learn_gitlab/components/learn_gitlab_a.vue';
-import { testActions } from './mock_data';
+import { testActions, testSections } from './mock_data';
 
 describe('Learn GitLab Design A', () => {
   let wrapper;
 
   const createWrapper = () => {
-    wrapper = mount(LearnGitlabA, { propsData: { actions: testActions } });
+    wrapper = mount(LearnGitlabA, { propsData: { actions: testActions, sections: testSections } });
   };
 
   beforeEach(() => {
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_card_spec.js b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_card_spec.js
index de6aca08235450aff897234413be74959949ea8c..3a511a009a98659e04dadd7b6cb9f4c0726563f3 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_card_spec.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/learn_gitlab_section_card_spec.js
@@ -3,6 +3,7 @@ import LearnGitlabSectionCard from '~/pages/projects/learn_gitlab/components/lea
 import { testActions } from './mock_data';
 
 const defaultSection = 'workspace';
+const testImage = 'workspace.svg';
 
 describe('Learn GitLab Section Card', () => {
   let wrapper;
@@ -14,7 +15,7 @@ describe('Learn GitLab Section Card', () => {
 
   const createWrapper = () => {
     wrapper = shallowMount(LearnGitlabSectionCard, {
-      propsData: { section: defaultSection, actions: testActions },
+      propsData: { section: defaultSection, actions: testActions, svg: testImage },
     });
   };
 
diff --git a/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js b/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js
index d6ee2b00c8e24d32ed7ca00c08e41df55d04a66a..8d6ac737db829cf659b2171593b1d166ed5a542a 100644
--- a/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js
+++ b/spec/frontend/pages/projects/learn_gitlab/components/mock_data.js
@@ -45,3 +45,15 @@ export const testActions = {
     svg: 'http://example.com/images/illustration.svg',
   },
 };
+
+export const testSections = {
+  workspace: {
+    svg: 'workspace.svg',
+  },
+  deploy: {
+    svg: 'deploy.svg',
+  },
+  plan: {
+    svg: 'plan.svg',
+  },
+};
diff --git a/spec/helpers/learn_gitlab_helper_spec.rb b/spec/helpers/learn_gitlab_helper_spec.rb
index 780bb0a14088e99288f9366bcff3385e3f563b52..cf0d329c36f373ced5e3ba709313859e2f14db25 100644
--- a/spec/helpers/learn_gitlab_helper_spec.rb
+++ b/spec/helpers/learn_gitlab_helper_spec.rb
@@ -96,6 +96,17 @@
     end
   end
 
+  describe '.onboarding_sections_data' do
+    subject(:sections) { helper.onboarding_sections_data }
+
+    it 'has the right keys' do
+      expect(sections.keys).to contain_exactly(:deploy, :plan, :workspace)
+    end
+    it 'has the svg' do
+      expect(sections.values.map { |section| section.keys }).to eq([[:svg]] * 3)
+    end
+  end
+
   describe '.learn_gitlab_experiment_tracking_category' do
     using RSpec::Parameterized::TableSyntax