diff --git a/frontend/src/assets/img/userId-image.png b/frontend/src/assets/img/userId-image.png
new file mode 100644
index 0000000000..8ecbbb8283
Binary files /dev/null and b/frontend/src/assets/img/userId-image.png differ
diff --git a/frontend/src/component/demo/Demo.tsx b/frontend/src/component/demo/Demo.tsx
index df0eaeb575..2f64827c94 100644
--- a/frontend/src/component/demo/Demo.tsx
+++ b/frontend/src/component/demo/Demo.tsx
@@ -75,12 +75,19 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
         });
     };
 
+    const closeGuide = () => {
+        setTopic(-1);
+        setStep(0);
+    };
+
     if (!uiConfig.flags.demo) return children;
 
     return (
         <>
             <DemoBanner
                 onPlans={() => {
+                    closeGuide();
+
                     setPlansOpen(true);
 
                     trackEvent('demo', {
@@ -154,6 +161,8 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                 }}
                 topics={TOPICS}
                 onWelcome={() => {
+                    closeGuide();
+
                     setWelcomeOpen(true);
 
                     trackEvent('demo', {
diff --git a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
index 91e549111b..c3f9231e65 100644
--- a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
+++ b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
@@ -4,7 +4,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 const StyledBanner = styled('div')(({ theme }) => ({
     position: 'sticky',
     top: 0,
-    zIndex: theme.zIndex.appBar,
+    zIndex: theme.zIndex.sticky,
     display: 'flex',
     gap: theme.spacing(1),
     justifyContent: 'center',
diff --git a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
index 35a52af5be..5133ab40a5 100644
--- a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
+++ b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
@@ -255,7 +255,7 @@ export const DemoSteps = ({
             styles={{
                 options: {
                     arrowColor: theme.palette.background.paper,
-                    zIndex: theme.zIndex.snackbar,
+                    zIndex: theme.zIndex.snackbar - 1,
                 },
                 spotlight: {
                     borderRadius: theme.shape.borderRadiusMedium,
diff --git a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx b/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
index 6e2bb6ecab..b82cb563bb 100644
--- a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
+++ b/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
@@ -20,7 +20,7 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     left: 0,
     width: '100%',
     maxWidth: theme.spacing(30),
-    zIndex: theme.zIndex.fab,
+    zIndex: theme.zIndex.sticky,
     boxShadow: theme.boxShadows.popup,
     '&&&': {
         borderRadius: 0,
diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx
index 5954338714..10b0db1ee7 100644
--- a/frontend/src/component/demo/demo-topics.tsx
+++ b/frontend/src/component/demo/demo-topics.tsx
@@ -1,9 +1,10 @@
-import { Typography, TypographyProps } from '@mui/material';
+import { Typography, TypographyProps, styled } from '@mui/material';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { Badge } from 'component/common/Badge/Badge';
 import { Step } from 'react-joyride';
 import { gradualRollout, variants } from './demo-setup';
 import { basePath } from 'utils/formatPath';
+import userIdImage from 'assets/img/userId-image.png';
 
 export interface ITutorialTopicStep extends Step {
     href?: string;
@@ -27,6 +28,10 @@ const Description = (props: TypographyProps) => (
     <Typography variant="body2" color="text.secondary" {...props} />
 );
 
+const StyledImg = styled('img')(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+}));
+
 const PROJECT = 'demo-app';
 const ENVIRONMENT = 'dev';
 
@@ -208,15 +213,23 @@ export const TOPICS: ITutorialTopic[] = [
                         <Description>
                             Enter your <Badge as="span">userId</Badge>
                         </Description>
-                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
+                        <Badge
+                            sx={{ mt: 2, mb: 1, width: '100%' }}
+                            icon={<InfoOutlinedIcon />}
+                        >
                             You can find your userId on the demo page.
                         </Badge>
+                        <StyledImg
+                            src={userIdImage}
+                            alt="You can find your userId on the demo page."
+                        />
                         <Description sx={{ mt: 1 }}>
                             When you're done, use the "Next" button in the
                             dialog.
                         </Description>
                     </>
                 ),
+                placement: 'right',
                 nextButton: true,
                 focus: 'input',
             },
@@ -547,15 +560,23 @@ export const TOPICS: ITutorialTopic[] = [
                         <Description>
                             Enter your <Badge as="span">userId</Badge>
                         </Description>
-                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
+                        <Badge
+                            sx={{ mt: 2, mb: 1, width: '100%' }}
+                            icon={<InfoOutlinedIcon />}
+                        >
                             You can find your userId on the demo page.
                         </Badge>
+                        <StyledImg
+                            src={userIdImage}
+                            alt="You can find your userId on the demo page."
+                        />
                         <Description sx={{ mt: 1 }}>
                             When you're done, use the "Next" button in the
                             dialog.
                         </Description>
                     </>
                 ),
+                placement: 'right',
                 nextButton: true,
                 backCloseModal: true,
                 focus: 'input',
diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
index 28f9297667..1328870eee 100644
--- a/frontend/src/themes/dark-theme.ts
+++ b/frontend/src/themes/dark-theme.ts
@@ -72,6 +72,9 @@ const theme = {
         tableRowHeightCompact: 56,
         tableRowHeightDense: 48,
     },
+    zIndex: {
+        sticky: 2000,
+    },
 
     palette: {
         common: {
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index 0278125050..68458c14df 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -65,6 +65,9 @@ const theme = {
         tableRowHeightCompact: 56,
         tableRowHeightDense: 48,
     },
+    zIndex: {
+        sticky: 2000,
+    },
 
     palette: {
         common: {