diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx
index f641d3d91f..4771cb29ea 100644
--- a/frontend/src/component/demo/demo-topics.tsx
+++ b/frontend/src/component/demo/demo-topics.tsx
@@ -40,6 +40,7 @@ export const TOPICS: ITutorialTopic[] = [
         title: 'Enable/disable a feature flag',
         steps: [
             {
+                title: 'Enable/disable a feature flag',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
@@ -71,6 +72,7 @@ export const TOPICS: ITutorialTopic[] = [
                 nextButton: true,
             },
             {
+                title: 'Control the flag',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: `div[data-testid="TOGGLE-demoApp.step1-${ENVIRONMENT}"]`,
                 content: (
@@ -93,6 +95,7 @@ export const TOPICS: ITutorialTopic[] = [
         setup: specificUser,
         steps: [
             {
+                title: 'Enable for a specific user',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
@@ -118,6 +121,7 @@ export const TOPICS: ITutorialTopic[] = [
                 nextButton: true,
             },
             {
+                title: 'Select a flag',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: `table a[href="${basePath}/projects/${PROJECT}/features/demoApp.step2"]`,
                 content: (
@@ -130,6 +134,7 @@ export const TOPICS: ITutorialTopic[] = [
                 preventDefault: true,
             },
             {
+                title: 'Select an environment',
                 href: `/projects/${PROJECT}/features/demoApp.step2`,
                 target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] > div[aria-expanded="false"]`,
                 content: (
@@ -142,6 +147,7 @@ export const TOPICS: ITutorialTopic[] = [
                 delay: 500,
             },
             {
+                title: 'Add a strategy',
                 target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] button[data-testid="ADD_STRATEGY_BUTTON"]`,
                 content: (
                     <Description>
@@ -153,6 +159,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCollapseExpanded: true,
             },
             {
+                title: 'Select a strategy',
                 target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step2/strategies/create?environmentId=${ENVIRONMENT}&strategyName=flexibleRollout&defaultStrategy=true"]`,
                 content: (
                     <Description>Select the default strategy.</Description>
@@ -162,6 +169,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Narrow down your target audience',
                 target: 'button[data-testid="STRATEGY_TARGETING_TAB"]',
                 content: (
                     <>
@@ -173,6 +181,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Add a constraint',
                 target: 'button[data-testid="ADD_CONSTRAINT_BUTTON"]',
                 content: (
                     <>
@@ -202,6 +211,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Select a context',
                 target: '#context-field-select',
                 content: (
                     <>
@@ -225,6 +235,7 @@ export const TOPICS: ITutorialTopic[] = [
                 anyClick: true,
             },
             {
+                title: 'Select a pre-defined context field',
                 target: 'li[data-testid="SELECT_ITEM_ID-userId"]',
                 content: (
                     <Description>
@@ -236,6 +247,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Input value',
                 target: 'div[data-testid="CONSTRAINT_VALUES_INPUT"]',
                 content: (
                     <>
@@ -263,6 +275,7 @@ export const TOPICS: ITutorialTopic[] = [
                 focus: 'input',
             },
             {
+                title: 'Add value',
                 target: 'button[data-testid="CONSTRAINT_VALUES_ADD_BUTTON"]',
                 content: (
                     <Description>
@@ -271,6 +284,7 @@ export const TOPICS: ITutorialTopic[] = [
                 ),
             },
             {
+                title: 'Save constraint setup',
                 target: 'button[data-testid="CONSTRAINT_SAVE_BUTTON"]',
                 content: (
                     <Description>
@@ -280,6 +294,7 @@ export const TOPICS: ITutorialTopic[] = [
                 optional: true,
             },
             {
+                title: 'Save strategy for flag',
                 target: 'button[data-testid="STRATEGY_FORM_SUBMIT_ID"]',
                 content: (
                     <Description>
@@ -289,6 +304,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Confirm your changes',
                 target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
                 content: (
                     <Description>
@@ -299,6 +315,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Control the flag',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: `div[data-testid="TOGGLE-demoApp.step2-${ENVIRONMENT}"]`,
                 content: (
@@ -322,6 +339,7 @@ export const TOPICS: ITutorialTopic[] = [
         setup: gradualRollout,
         steps: [
             {
+                title: 'Adjust gradual rollout',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
@@ -354,6 +372,7 @@ export const TOPICS: ITutorialTopic[] = [
                 nextButton: true,
             },
             {
+                title: 'Select a flag',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: `table a[href="${basePath}/projects/${PROJECT}/features/demoApp.step3"]`,
                 content: (
@@ -366,6 +385,7 @@ export const TOPICS: ITutorialTopic[] = [
                 preventDefault: true,
             },
             {
+                title: 'Select an environment',
                 href: `/projects/${PROJECT}/features/demoApp.step3`,
                 target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] > div[aria-expanded="false"]`,
                 content: (
@@ -378,6 +398,7 @@ export const TOPICS: ITutorialTopic[] = [
                 delay: 500,
             },
             {
+                title: 'Edit strategy',
                 target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] a[data-testid="STRATEGY_EDIT-flexibleRollout"]`,
                 content: (
                     <Description>
@@ -388,6 +409,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCollapseExpanded: true,
             },
             {
+                title: 'Edit rollout',
                 target: 'span[data-testid="ROLLOUT_SLIDER_ID"]',
                 content: (
                     <>
@@ -405,6 +427,7 @@ export const TOPICS: ITutorialTopic[] = [
                 nextButton: true,
             },
             {
+                title: 'Save changes for flag',
                 target: 'button[data-testid="STRATEGY_FORM_SUBMIT_ID"]',
                 content: (
                     <Description>
@@ -413,6 +436,7 @@ export const TOPICS: ITutorialTopic[] = [
                 ),
             },
             {
+                title: 'Confirm your changes',
                 target: 'button[data-testid="DIALOGUE_CONFIRM_ID"]',
                 content: (
                     <Description>
@@ -423,6 +447,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Control the flag',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: `div[data-testid="TOGGLE-demoApp.step3-${ENVIRONMENT}"]`,
                 content: (
@@ -447,6 +472,7 @@ export const TOPICS: ITutorialTopic[] = [
         setup: variants,
         steps: [
             {
+                title: 'Adjust variants',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: 'body',
                 placement: 'center',
@@ -472,6 +498,7 @@ export const TOPICS: ITutorialTopic[] = [
                 nextButton: true,
             },
             {
+                title: 'Select a flag',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: `table a[href="${basePath}/projects/${PROJECT}/features/demoApp.step4"]`,
                 content: (
@@ -484,6 +511,7 @@ export const TOPICS: ITutorialTopic[] = [
                 preventDefault: true,
             },
             {
+                title: 'Select an environment',
                 href: `/projects/${PROJECT}/features/demoApp.step4`,
                 target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] > div[aria-expanded="false"]`,
                 content: (
@@ -496,6 +524,7 @@ export const TOPICS: ITutorialTopic[] = [
                 delay: 500,
             },
             {
+                title: 'Add a strategy',
                 target: `div[data-testid="FEATURE_ENVIRONMENT_ACCORDION_${ENVIRONMENT}"] button[data-testid="ADD_STRATEGY_BUTTON"]`,
                 content: (
                     <Description>
@@ -507,6 +536,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCollapseExpanded: true,
             },
             {
+                title: 'Select a strategy',
                 target: `a[href="${basePath}/projects/${PROJECT}/features/demoApp.step4/strategies/create?environmentId=${ENVIRONMENT}&strategyName=flexibleRollout&defaultStrategy=true"]`,
                 content: (
                     <Description>Select the default strategy.</Description>
@@ -516,6 +546,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Narrow down your target audience',
                 target: 'button[data-testid="STRATEGY_TARGETING_TAB"]',
                 content: (
                     <>
@@ -527,6 +558,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Add a constraint',
                 target: 'button[data-testid="ADD_CONSTRAINT_BUTTON"]',
                 content: (
                     <>
@@ -556,6 +588,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Select a context',
                 target: '#context-field-select',
                 content: (
                     <>
@@ -579,6 +612,7 @@ export const TOPICS: ITutorialTopic[] = [
                 anyClick: true,
             },
             {
+                title: 'Select a pre-defined context field',
                 target: 'li[data-testid="SELECT_ITEM_ID-userId"]',
                 content: (
                     <Description>
@@ -590,6 +624,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Input value',
                 target: 'div[data-testid="CONSTRAINT_VALUES_INPUT"]',
                 content: (
                     <>
@@ -617,6 +652,7 @@ export const TOPICS: ITutorialTopic[] = [
                 focus: 'input',
             },
             {
+                title: 'Add value',
                 target: 'button[data-testid="CONSTRAINT_VALUES_ADD_BUTTON"]',
                 content: (
                     <Description>
@@ -625,6 +661,7 @@ export const TOPICS: ITutorialTopic[] = [
                 ),
             },
             {
+                title: 'Save constraint setup',
                 target: 'button[data-testid="CONSTRAINT_SAVE_BUTTON"]',
                 content: (
                     <Description>
@@ -634,6 +671,7 @@ export const TOPICS: ITutorialTopic[] = [
                 optional: true,
             },
             {
+                title: 'Set up a variant',
                 target: 'button[data-testid="STRATEGY_VARIANTS_TAB"]',
                 content: (
                     <>
@@ -645,6 +683,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Add new variant',
                 target: 'button[data-testid="ADD_STRATEGY_VARIANT_BUTTON"]',
                 content: (
                     <>
@@ -674,6 +713,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Input variant name',
                 target: 'div[data-testid="VARIANT"]:last-of-type div[data-testid="VARIANT_NAME_INPUT"]',
                 content: (
                     <>
@@ -692,6 +732,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Input variant value',
                 target: 'div[data-testid="VARIANT"]:last-of-type #variant-payload-value',
                 content: (
                     <>
@@ -723,6 +764,7 @@ export const TOPICS: ITutorialTopic[] = [
                 focus: true,
             },
             {
+                title: 'Save strategy for flag',
                 target: 'button[data-testid="STRATEGY_FORM_SUBMIT_ID"]',
                 content: (
                     <Description>
@@ -732,6 +774,7 @@ export const TOPICS: ITutorialTopic[] = [
                 backCloseModal: true,
             },
             {
+                title: 'Control the flag',
                 href: `/projects/${PROJECT}?sort=name`,
                 target: `div[data-testid="TOGGLE-demoApp.step4-${ENVIRONMENT}"]`,
                 content: (