diff --git a/frontend/src/component/onboarding/CodeRenderer.tsx b/frontend/src/component/onboarding/dialog/CodeRenderer.tsx
similarity index 98%
rename from frontend/src/component/onboarding/CodeRenderer.tsx
rename to frontend/src/component/onboarding/dialog/CodeRenderer.tsx
index 886efec300..ab91c75eeb 100644
--- a/frontend/src/component/onboarding/CodeRenderer.tsx
+++ b/frontend/src/component/onboarding/dialog/CodeRenderer.tsx
@@ -1,7 +1,7 @@
 import type { CodeComponent } from 'react-markdown/lib/ast-to-react';
 import type { FC } from 'react';
 import copy from 'copy-to-clipboard';
-import useToast from '../../hooks/useToast';
+import useToast from 'hooks/useToast';
 import { IconButton, styled, Tooltip } from '@mui/material';
 import CopyIcon from '@mui/icons-material/FileCopy';
 import type { SdkName } from './sharedTypes';
diff --git a/frontend/src/component/onboarding/ConnectSdkDialog.tsx b/frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx
similarity index 100%
rename from frontend/src/component/onboarding/ConnectSdkDialog.tsx
rename to frontend/src/component/onboarding/dialog/ConnectSdkDialog.tsx
diff --git a/frontend/src/component/onboarding/ConnectionInformation.tsx b/frontend/src/component/onboarding/dialog/ConnectionInformation.tsx
similarity index 100%
rename from frontend/src/component/onboarding/ConnectionInformation.tsx
rename to frontend/src/component/onboarding/dialog/ConnectionInformation.tsx
diff --git a/frontend/src/component/onboarding/GenerateApiKey.tsx b/frontend/src/component/onboarding/dialog/GenerateApiKey.tsx
similarity index 98%
rename from frontend/src/component/onboarding/GenerateApiKey.tsx
rename to frontend/src/component/onboarding/dialog/GenerateApiKey.tsx
index 605584b5a4..cdceda486e 100644
--- a/frontend/src/component/onboarding/GenerateApiKey.tsx
+++ b/frontend/src/component/onboarding/dialog/GenerateApiKey.tsx
@@ -11,13 +11,13 @@ import {
     useMediaQuery,
     useTheme,
 } from '@mui/material';
-import { SingleSelectConfigButton } from '../common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
+import { SingleSelectConfigButton } from 'component/common/DialogFormTemplate/ConfigButtons/SingleSelectConfigButton';
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import { ArcherContainer, ArcherElement } from 'react-archer';
 import { useEffect } from 'react';
 import { SectionHeader, StepperBox } from './SharedComponents';
 import { Stepper } from './Stepper';
-import { Badge } from '../common/Badge/Badge';
+import { Badge } from 'component/common/Badge/Badge';
 
 const ChooseEnvironment = ({
     environments,
diff --git a/frontend/src/component/onboarding/Onboarding.test.tsx b/frontend/src/component/onboarding/dialog/Onboarding.test.tsx
similarity index 100%
rename from frontend/src/component/onboarding/Onboarding.test.tsx
rename to frontend/src/component/onboarding/dialog/Onboarding.test.tsx
diff --git a/frontend/src/component/onboarding/SdkConnected.tsx b/frontend/src/component/onboarding/dialog/SdkConnected.tsx
similarity index 97%
rename from frontend/src/component/onboarding/SdkConnected.tsx
rename to frontend/src/component/onboarding/dialog/SdkConnected.tsx
index 5d0abdba71..b80258bf0f 100644
--- a/frontend/src/component/onboarding/SdkConnected.tsx
+++ b/frontend/src/component/onboarding/dialog/SdkConnected.tsx
@@ -4,7 +4,7 @@ import { SectionHeader, StepperBox } from './SharedComponents';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import type { Sdk } from './sharedTypes';
 import { Stepper } from './Stepper';
-import { Badge } from '../common/Badge/Badge';
+import { Badge } from 'component/common/Badge/Badge';
 import { Markdown } from 'component/common/Markdown/Markdown';
 import { CodeRenderer, codeRenderSnippets } from './CodeRenderer';
 
diff --git a/frontend/src/component/onboarding/SdkConnection.tsx b/frontend/src/component/onboarding/dialog/SdkConnection.tsx
similarity index 93%
rename from frontend/src/component/onboarding/SdkConnection.tsx
rename to frontend/src/component/onboarding/dialog/SdkConnection.tsx
index 14e2450c34..38fbd961a3 100644
--- a/frontend/src/component/onboarding/SdkConnection.tsx
+++ b/frontend/src/component/onboarding/dialog/SdkConnection.tsx
@@ -1,5 +1,5 @@
 import { Suspense } from 'react';
-import Loader from '../common/Loader/Loader';
+import Loader from 'component/common/Loader/Loader';
 import TestSdkConnection from './TestSdkConnection';
 import type { Sdk } from './sharedTypes';
 import { SdkConnected } from './SdkConnected';
diff --git a/frontend/src/component/onboarding/SelectSdk.tsx b/frontend/src/component/onboarding/dialog/SelectSdk.tsx
similarity index 98%
rename from frontend/src/component/onboarding/SelectSdk.tsx
rename to frontend/src/component/onboarding/dialog/SelectSdk.tsx
index 533a0793a6..157b84c80e 100644
--- a/frontend/src/component/onboarding/SelectSdk.tsx
+++ b/frontend/src/component/onboarding/dialog/SelectSdk.tsx
@@ -4,7 +4,7 @@ import { formatAssetPath } from 'utils/formatPath';
 import { SectionHeader, StepperBox } from './SharedComponents';
 import { clientSdks, type Sdk, serverSdks } from './sharedTypes';
 import { Stepper } from './Stepper';
-import { Badge } from '../common/Badge/Badge';
+import { Badge } from 'component/common/Badge/Badge';
 
 const SpacedContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(5, 8, 8, 8),
diff --git a/frontend/src/component/onboarding/SharedComponents.tsx b/frontend/src/component/onboarding/dialog/SharedComponents.tsx
similarity index 100%
rename from frontend/src/component/onboarding/SharedComponents.tsx
rename to frontend/src/component/onboarding/dialog/SharedComponents.tsx
diff --git a/frontend/src/component/onboarding/Stepper.tsx b/frontend/src/component/onboarding/dialog/Stepper.tsx
similarity index 100%
rename from frontend/src/component/onboarding/Stepper.tsx
rename to frontend/src/component/onboarding/dialog/Stepper.tsx
diff --git a/frontend/src/component/onboarding/TestSdkConnection.tsx b/frontend/src/component/onboarding/dialog/TestSdkConnection.tsx
similarity index 96%
rename from frontend/src/component/onboarding/TestSdkConnection.tsx
rename to frontend/src/component/onboarding/dialog/TestSdkConnection.tsx
index 60b1a8647a..77fe5c6499 100644
--- a/frontend/src/component/onboarding/TestSdkConnection.tsx
+++ b/frontend/src/component/onboarding/dialog/TestSdkConnection.tsx
@@ -3,9 +3,9 @@ import { Avatar, Box, Link, styled, Typography } from '@mui/material';
 import { SectionHeader, StepperBox } from './SharedComponents';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { allSdks, type Sdk } from './sharedTypes';
-import { formatAssetPath } from '../../utils/formatPath';
+import { formatAssetPath } from 'utils/formatPath';
 import { Stepper } from './Stepper';
-import { Badge } from '../common/Badge/Badge';
+import { Badge } from 'component/common/Badge/Badge';
 import { Markdown } from 'component/common/Markdown/Markdown';
 import { CodeRenderer, codeRenderSnippets } from './CodeRenderer';
 
diff --git a/frontend/src/component/onboarding/UnleashConcepts.tsx b/frontend/src/component/onboarding/dialog/UnleashConcepts.tsx
similarity index 98%
rename from frontend/src/component/onboarding/UnleashConcepts.tsx
rename to frontend/src/component/onboarding/dialog/UnleashConcepts.tsx
index 48c1802a4f..634d1c71c6 100644
--- a/frontend/src/component/onboarding/UnleashConcepts.tsx
+++ b/frontend/src/component/onboarding/dialog/UnleashConcepts.tsx
@@ -1,5 +1,5 @@
 import { Box, styled, type Theme } from '@mui/material';
-import { ProjectIcon } from '../common/ProjectIcon/ProjectIcon';
+import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon';
 import EnvironmentsIcon from '@mui/icons-material/CloudCircle';
 import CodeIcon from '@mui/icons-material/Code';
 
diff --git a/frontend/src/component/onboarding/parseToken.test.ts b/frontend/src/component/onboarding/dialog/parseToken.test.ts
similarity index 100%
rename from frontend/src/component/onboarding/parseToken.test.ts
rename to frontend/src/component/onboarding/dialog/parseToken.test.ts
diff --git a/frontend/src/component/onboarding/parseToken.ts b/frontend/src/component/onboarding/dialog/parseToken.ts
similarity index 100%
rename from frontend/src/component/onboarding/parseToken.ts
rename to frontend/src/component/onboarding/dialog/parseToken.ts
diff --git a/frontend/src/component/onboarding/sharedTypes.ts b/frontend/src/component/onboarding/dialog/sharedTypes.ts
similarity index 56%
rename from frontend/src/component/onboarding/sharedTypes.ts
rename to frontend/src/component/onboarding/dialog/sharedTypes.ts
index 606f00b77e..c460a2848f 100644
--- a/frontend/src/component/onboarding/sharedTypes.ts
+++ b/frontend/src/component/onboarding/dialog/sharedTypes.ts
@@ -1,18 +1,18 @@
-import node from '../../assets/icons/sdks/Logo-node.svg';
-import go from '../../assets/icons/sdks/Logo-go.svg';
-import ruby from '../../assets/icons/sdks/Logo-ruby.svg';
-import php from '../../assets/icons/sdks/Logo-php.svg';
-import rust from '../../assets/icons/sdks/Logo-rust.svg';
-import dotnet from '../../assets/icons/sdks/Logo-net.svg';
-import java from '../../assets/icons/sdks/Logo-java.svg';
-import python from '../../assets/icons/sdks/Logo-python.svg';
-import javascript from '../../assets/icons/sdks/Logo-javascript.svg';
-import react from '../../assets/icons/sdks/Logo-react.svg';
-import vue from '../../assets/icons/sdks/Logo-vue.svg';
-import svelte from '../../assets/icons/sdks/Logo-svelte.svg';
-import swift from '../../assets/icons/sdks/Logo-swift.svg';
-import android from '../../assets/icons/sdks/Logo-android.svg';
-import flutter from '../../assets/icons/sdks/Logo-flutter.svg';
+import node from '../../../assets/icons/sdks/Logo-node.svg';
+import go from '../../../assets/icons/sdks/Logo-go.svg';
+import ruby from '../../../assets/icons/sdks/Logo-ruby.svg';
+import php from '../../../assets/icons/sdks/Logo-php.svg';
+import rust from '../../../assets/icons/sdks/Logo-rust.svg';
+import dotnet from '../../../assets/icons/sdks/Logo-net.svg';
+import java from '../../../assets/icons/sdks/Logo-java.svg';
+import python from '../../../assets/icons/sdks/Logo-python.svg';
+import javascript from '../../../assets/icons/sdks/Logo-javascript.svg';
+import react from '../../../assets/icons/sdks/Logo-react.svg';
+import vue from '../../../assets/icons/sdks/Logo-vue.svg';
+import svelte from '../../../assets/icons/sdks/Logo-svelte.svg';
+import swift from '../../../assets/icons/sdks/Logo-swift.svg';
+import android from '../../../assets/icons/sdks/Logo-android.svg';
+import flutter from '../../../assets/icons/sdks/Logo-flutter.svg';
 
 export type SdkType = 'client' | 'frontend';
 export type Sdk = { name: SdkName; type: SdkType };
diff --git a/frontend/src/component/onboarding/snippets/android.md b/frontend/src/component/onboarding/dialog/snippets/android.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/android.md
rename to frontend/src/component/onboarding/dialog/snippets/android.md
diff --git a/frontend/src/component/onboarding/snippets/dotnet.md b/frontend/src/component/onboarding/dialog/snippets/dotnet.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/dotnet.md
rename to frontend/src/component/onboarding/dialog/snippets/dotnet.md
diff --git a/frontend/src/component/onboarding/snippets/flutter.md b/frontend/src/component/onboarding/dialog/snippets/flutter.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/flutter.md
rename to frontend/src/component/onboarding/dialog/snippets/flutter.md
diff --git a/frontend/src/component/onboarding/snippets/go.md b/frontend/src/component/onboarding/dialog/snippets/go.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/go.md
rename to frontend/src/component/onboarding/dialog/snippets/go.md
diff --git a/frontend/src/component/onboarding/snippets/java.md b/frontend/src/component/onboarding/dialog/snippets/java.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/java.md
rename to frontend/src/component/onboarding/dialog/snippets/java.md
diff --git a/frontend/src/component/onboarding/snippets/javascript.md b/frontend/src/component/onboarding/dialog/snippets/javascript.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/javascript.md
rename to frontend/src/component/onboarding/dialog/snippets/javascript.md
diff --git a/frontend/src/component/onboarding/snippets/nodejs.md b/frontend/src/component/onboarding/dialog/snippets/nodejs.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/nodejs.md
rename to frontend/src/component/onboarding/dialog/snippets/nodejs.md
diff --git a/frontend/src/component/onboarding/snippets/php.md b/frontend/src/component/onboarding/dialog/snippets/php.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/php.md
rename to frontend/src/component/onboarding/dialog/snippets/php.md
diff --git a/frontend/src/component/onboarding/snippets/python.md b/frontend/src/component/onboarding/dialog/snippets/python.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/python.md
rename to frontend/src/component/onboarding/dialog/snippets/python.md
diff --git a/frontend/src/component/onboarding/snippets/react.md b/frontend/src/component/onboarding/dialog/snippets/react.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/react.md
rename to frontend/src/component/onboarding/dialog/snippets/react.md
diff --git a/frontend/src/component/onboarding/snippets/ruby.md b/frontend/src/component/onboarding/dialog/snippets/ruby.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/ruby.md
rename to frontend/src/component/onboarding/dialog/snippets/ruby.md
diff --git a/frontend/src/component/onboarding/snippets/rust.md b/frontend/src/component/onboarding/dialog/snippets/rust.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/rust.md
rename to frontend/src/component/onboarding/dialog/snippets/rust.md
diff --git a/frontend/src/component/onboarding/snippets/svelte.md b/frontend/src/component/onboarding/dialog/snippets/svelte.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/svelte.md
rename to frontend/src/component/onboarding/dialog/snippets/svelte.md
diff --git a/frontend/src/component/onboarding/snippets/swift.md b/frontend/src/component/onboarding/dialog/snippets/swift.md
similarity index 100%
rename from frontend/src/component/onboarding/snippets/swift.md
rename to frontend/src/component/onboarding/dialog/snippets/swift.md
diff --git a/frontend/src/component/onboarding/snippets/vue.md b/frontend/src/component/onboarding/dialog/snippets/vue.md
similarity index 63%
rename from frontend/src/component/onboarding/snippets/vue.md
rename to frontend/src/component/onboarding/dialog/snippets/vue.md
index 84d3d8d6c4..0a6c44954e 100644
--- a/frontend/src/component/onboarding/snippets/vue.md
+++ b/frontend/src/component/onboarding/dialog/snippets/vue.md
@@ -4,17 +4,18 @@ npm install @unleash/proxy-client-vue
 ```
 
 2\. Initialize Unleash
+
 ```js
-import { createApp } from 'vue'
+import { createApp } from 'frontend/src/component/onboarding/dialog/snippets/vue'
 import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
 // import the root component App from a single-file component.
 import App from './App.vue'
 
 const config = {
-  url: '<YOUR_API_URL>',
-  clientKey: '<YOUR_API_TOKEN>',
-  refreshInterval: 15,
-  appName: 'unleash-onboarding-vue',
+    url: '<YOUR_API_URL>',
+    clientKey: '<YOUR_API_TOKEN>',
+    refreshInterval: 15,
+    appName: 'unleash-onboarding-vue',
 }
 
 const app = createApp(App)
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/ProjectOnboarding.test.tsx b/frontend/src/component/onboarding/flow/ProjectOnboarding.test.tsx
similarity index 100%
rename from frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/ProjectOnboarding.test.tsx
rename to frontend/src/component/onboarding/flow/ProjectOnboarding.test.tsx
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/ProjectOnboarding.tsx b/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx
similarity index 97%
rename from frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/ProjectOnboarding.tsx
rename to frontend/src/component/onboarding/flow/ProjectOnboarding.tsx
index cdf47d2b9a..0396373c1c 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/ProjectOnboarding.tsx
+++ b/frontend/src/component/onboarding/flow/ProjectOnboarding.tsx
@@ -4,7 +4,7 @@ import {
     UPDATE_PROJECT,
     CREATE_PROJECT_API_TOKEN,
 } from 'component/providers/AccessProvider/permissions';
-import { FlagCreationButton } from '../ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader';
+import { FlagCreationButton } from '../../project/Project/PaginatedProjectFeatureToggles/ProjectFeatureTogglesHeader/ProjectFeatureTogglesHeader';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { SdkExample } from './SdkExample';
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/SdkExample.tsx b/frontend/src/component/onboarding/flow/SdkExample.tsx
similarity index 92%
rename from frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/SdkExample.tsx
rename to frontend/src/component/onboarding/flow/SdkExample.tsx
index 5a46884f65..04c667400e 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectOnboarding/SdkExample.tsx
+++ b/frontend/src/component/onboarding/flow/SdkExample.tsx
@@ -1,8 +1,8 @@
 import { type SelectChangeEvent, styled, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
-import Select from 'component/common/select';
+import Select from '../../common/select';
 import { useState } from 'react';
-import { allSdks } from '../../../../onboarding/sharedTypes';
+import { allSdks } from '../dialog/sharedTypes';
 
 const TitleContainer = styled('div')(({ theme }) => ({
     display: 'flex',
diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
index 5e7d7b3ef6..095087c0b3 100644
--- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -42,8 +42,8 @@ import { AvatarCell } from './AvatarCell';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { styled } from '@mui/material';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
-import { ConnectSdkDialog } from '../../../onboarding/ConnectSdkDialog';
-import { ProjectOnboarding } from './ProjectOnboarding/ProjectOnboarding';
+import { ConnectSdkDialog } from '../../../onboarding/dialog/ConnectSdkDialog';
+import { ProjectOnboarding } from '../../../onboarding/flow/ProjectOnboarding';
 import { useLocalStorageState } from 'hooks/useLocalStorageState';
 
 interface IPaginatedProjectFeatureTogglesProps {