diff --git a/src/app/admin/admin.module.ts b/src/app/admin/admin.module.ts
index 6e23be86f..529cf149a 100644
--- a/src/app/admin/admin.module.ts
+++ b/src/app/admin/admin.module.ts
@@ -10,6 +10,7 @@ import { DealAdminRoutingModule } from '../features/deal/admin/deal-admin-routin
 import { EventAdminRoutingModule } from '../features/event/admin/event-admin-routing.module';
 import { GuestArticleAdminRoutingModule } from '../features/guest-article/admin/guest-article-admin-routing.module';
 import { MediaAdminRoutingModule } from '../features/media/admin/media-admin-routing.module';
+import { NavigatorAdminRoutingModule } from '../features/navigator/admin/navigator-admin-routing.module';
 import { OrganisationAdminRoutingModule } from '../features/organisation/admin/organisation-admin-routing.module';
 import { ReportAdminRoutingModule } from '../features/report/admin/report-admin-routing.module';
 import { SurveyAdminRoutingModule } from '../features/survey/admin/survey-admin-routing.module';
@@ -35,6 +36,7 @@ const routes = [
   ReportAdminRoutingModule,
   GuestArticleAdminRoutingModule,
   AuthorAdminRoutingModule,
+  NavigatorAdminRoutingModule,
   AdminRoutingModule, //TODO: always last entry duet to order and redirect to 404, Remove 404 and put in AppRouter
 ];
 
diff --git a/src/app/core/api/generated/schema.ts b/src/app/core/api/generated/schema.ts
index 3e063b3de..f86385a8f 100644
--- a/src/app/core/api/generated/schema.ts
+++ b/src/app/core/api/generated/schema.ts
@@ -1820,6 +1820,12 @@ export type Mutation = {
   deleteMilestoneMedia?: Maybe<Scalars['Boolean']['output']>;
   deleteMilestoneMedium?: Maybe<Scalars['Boolean']['output']>;
   deleteMilestones?: Maybe<Scalars['Boolean']['output']>;
+  deleteNavigatorChoice?: Maybe<Scalars['Boolean']['output']>;
+  deleteNavigatorChoices?: Maybe<Scalars['Boolean']['output']>;
+  deleteNavigatorPage?: Maybe<Scalars['Boolean']['output']>;
+  deleteNavigatorPages?: Maybe<Scalars['Boolean']['output']>;
+  deleteNavigatorResultPage?: Maybe<Scalars['Boolean']['output']>;
+  deleteNavigatorResultPages?: Maybe<Scalars['Boolean']['output']>;
   deleteNotification?: Maybe<Scalars['Boolean']['output']>;
   deleteNotifications?: Maybe<Scalars['Boolean']['output']>;
   deleteOrganisation?: Maybe<Scalars['Boolean']['output']>;
@@ -1971,6 +1977,12 @@ export type Mutation = {
   saveMilestoneMedia?: Maybe<Array<Maybe<MilestoneMediaEntity>>>;
   saveMilestoneMedium?: Maybe<MilestoneMediaEntity>;
   saveMilestones?: Maybe<Array<Maybe<MilestoneEntity>>>;
+  saveNavigatorChoice?: Maybe<NavigatorChoiceEntity>;
+  saveNavigatorChoices?: Maybe<Array<Maybe<NavigatorChoiceEntity>>>;
+  saveNavigatorPage?: Maybe<NavigatorPageEntity>;
+  saveNavigatorPages?: Maybe<Array<Maybe<NavigatorPageEntity>>>;
+  saveNavigatorResultPage?: Maybe<NavigatorResultLinkEntity>;
+  saveNavigatorResultPages?: Maybe<Array<Maybe<NavigatorResultLinkEntity>>>;
   saveNotification?: Maybe<NotificationEntity>;
   saveNotifications?: Maybe<Array<Maybe<NotificationEntity>>>;
   saveOrganisation?: Maybe<OrganisationEntity>;
@@ -2617,6 +2629,42 @@ export type MutationDeleteMilestonesArgs = {
 };
 
 
+/** Mutation root */
+export type MutationDeleteNavigatorChoiceArgs = {
+  id?: InputMaybe<Scalars['String']['input']>;
+};
+
+
+/** Mutation root */
+export type MutationDeleteNavigatorChoicesArgs = {
+  ids?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+};
+
+
+/** Mutation root */
+export type MutationDeleteNavigatorPageArgs = {
+  id?: InputMaybe<Scalars['String']['input']>;
+};
+
+
+/** Mutation root */
+export type MutationDeleteNavigatorPagesArgs = {
+  ids?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+};
+
+
+/** Mutation root */
+export type MutationDeleteNavigatorResultPageArgs = {
+  id?: InputMaybe<Scalars['String']['input']>;
+};
+
+
+/** Mutation root */
+export type MutationDeleteNavigatorResultPagesArgs = {
+  ids?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
+};
+
+
 /** Mutation root */
 export type MutationDeleteNotificationArgs = {
   id?: InputMaybe<Scalars['String']['input']>;
@@ -3524,6 +3572,42 @@ export type MutationSaveMilestonesArgs = {
 };
 
 
+/** Mutation root */
+export type MutationSaveNavigatorChoiceArgs = {
+  entity?: InputMaybe<NavigatorChoiceEntityInput>;
+};
+
+
+/** Mutation root */
+export type MutationSaveNavigatorChoicesArgs = {
+  entities?: InputMaybe<Array<InputMaybe<NavigatorChoiceEntityInput>>>;
+};
+
+
+/** Mutation root */
+export type MutationSaveNavigatorPageArgs = {
+  entity?: InputMaybe<NavigatorPageEntityInput>;
+};
+
+
+/** Mutation root */
+export type MutationSaveNavigatorPagesArgs = {
+  entities?: InputMaybe<Array<InputMaybe<NavigatorPageEntityInput>>>;
+};
+
+
+/** Mutation root */
+export type MutationSaveNavigatorResultPageArgs = {
+  entity?: InputMaybe<NavigatorResultLinkEntityInput>;
+};
+
+
+/** Mutation root */
+export type MutationSaveNavigatorResultPagesArgs = {
+  entities?: InputMaybe<Array<InputMaybe<NavigatorResultLinkEntityInput>>>;
+};
+
+
 /** Mutation root */
 export type MutationSaveNotificationArgs = {
   entity?: InputMaybe<NotificationEntityInput>;
@@ -3973,6 +4057,135 @@ export type MutationVerifyAddressArgs = {
   entity?: InputMaybe<AddressEntityInput>;
 };
 
+export type NavigatorChoiceEntity = {
+  __typename?: 'NavigatorChoiceEntity';
+  created?: Maybe<Scalars['OffsetDateTime']['output']>;
+  description?: Maybe<Scalars['String']['output']>;
+  id?: Maybe<Scalars['String']['output']>;
+  modified?: Maybe<Scalars['OffsetDateTime']['output']>;
+  name?: Maybe<Scalars['String']['output']>;
+  nextPage?: Maybe<NavigatorPageEntity>;
+  parent?: Maybe<NavigatorPageEntity>;
+  resultPage?: Maybe<NavigatorResultLinkEntity>;
+  slug?: Maybe<Scalars['String']['output']>;
+  translatables?: Maybe<Array<Maybe<NavigatorChoiceTranslatableEntity>>>;
+};
+
+export type NavigatorChoiceEntityInput = {
+  created?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  description?: InputMaybe<Scalars['String']['input']>;
+  id?: InputMaybe<Scalars['String']['input']>;
+  modified?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  name?: InputMaybe<Scalars['String']['input']>;
+  nextPage?: InputMaybe<NavigatorPageEntityInput>;
+  parent?: InputMaybe<NavigatorPageEntityInput>;
+  resultPage?: InputMaybe<NavigatorResultLinkEntityInput>;
+  slug?: InputMaybe<Scalars['String']['input']>;
+  translatables?: InputMaybe<Array<InputMaybe<NavigatorChoiceTranslatableEntityInput>>>;
+};
+
+export type NavigatorChoiceTranslatableEntity = {
+  __typename?: 'NavigatorChoiceTranslatableEntity';
+  created?: Maybe<Scalars['OffsetDateTime']['output']>;
+  description?: Maybe<Scalars['String']['output']>;
+  id?: Maybe<Scalars['String']['output']>;
+  language?: Maybe<LanguageEntity>;
+  modified?: Maybe<Scalars['OffsetDateTime']['output']>;
+  name?: Maybe<Scalars['String']['output']>;
+};
+
+export type NavigatorChoiceTranslatableEntityInput = {
+  created?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  description?: InputMaybe<Scalars['String']['input']>;
+  id?: InputMaybe<Scalars['String']['input']>;
+  modified?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  name?: InputMaybe<Scalars['String']['input']>;
+};
+
+export type NavigatorPageEntity = {
+  __typename?: 'NavigatorPageEntity';
+  additionalInformation?: Maybe<Scalars['String']['output']>;
+  choices?: Maybe<Array<Maybe<NavigatorChoiceEntity>>>;
+  created?: Maybe<Scalars['OffsetDateTime']['output']>;
+  id?: Maybe<Scalars['String']['output']>;
+  isResultPage?: Maybe<Scalars['Boolean']['output']>;
+  links?: Maybe<Array<Maybe<NavigatorResultLinkEntity>>>;
+  modified?: Maybe<Scalars['OffsetDateTime']['output']>;
+  parentChoices?: Maybe<Array<Maybe<NavigatorChoiceEntity>>>;
+  slug?: Maybe<Scalars['String']['output']>;
+  title?: Maybe<Scalars['String']['output']>;
+  translatables?: Maybe<Array<Maybe<NavigatorPageTranslatableEntity>>>;
+};
+
+export type NavigatorPageEntityInput = {
+  additionalInformation?: InputMaybe<Scalars['String']['input']>;
+  choices?: InputMaybe<Array<InputMaybe<NavigatorChoiceEntityInput>>>;
+  created?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  id?: InputMaybe<Scalars['String']['input']>;
+  isResultPage?: InputMaybe<Scalars['Boolean']['input']>;
+  links?: InputMaybe<Array<InputMaybe<NavigatorResultLinkEntityInput>>>;
+  modified?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  parentChoices?: InputMaybe<Array<InputMaybe<NavigatorChoiceEntityInput>>>;
+  slug?: InputMaybe<Scalars['String']['input']>;
+  title?: InputMaybe<Scalars['String']['input']>;
+  translatables?: InputMaybe<Array<InputMaybe<NavigatorPageTranslatableEntityInput>>>;
+};
+
+export type NavigatorPageTranslatableEntity = {
+  __typename?: 'NavigatorPageTranslatableEntity';
+  additionalInformation?: Maybe<Scalars['String']['output']>;
+  created?: Maybe<Scalars['OffsetDateTime']['output']>;
+  id?: Maybe<Scalars['String']['output']>;
+  language?: Maybe<LanguageEntity>;
+  modified?: Maybe<Scalars['OffsetDateTime']['output']>;
+  title?: Maybe<Scalars['String']['output']>;
+};
+
+export type NavigatorPageTranslatableEntityInput = {
+  additionalInformation?: InputMaybe<Scalars['String']['input']>;
+  created?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  id?: InputMaybe<Scalars['String']['input']>;
+  modified?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  title?: InputMaybe<Scalars['String']['input']>;
+};
+
+export type NavigatorResultLinkEntity = {
+  __typename?: 'NavigatorResultLinkEntity';
+  created?: Maybe<Scalars['OffsetDateTime']['output']>;
+  id?: Maybe<Scalars['String']['output']>;
+  modified?: Maybe<Scalars['OffsetDateTime']['output']>;
+  name?: Maybe<Scalars['String']['output']>;
+  parent?: Maybe<NavigatorPageEntity>;
+  translatables?: Maybe<Array<Maybe<NavigatorResultLinkTranslatableEntity>>>;
+  url?: Maybe<Scalars['String']['output']>;
+};
+
+export type NavigatorResultLinkEntityInput = {
+  created?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  id?: InputMaybe<Scalars['String']['input']>;
+  modified?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  name?: InputMaybe<Scalars['String']['input']>;
+  parent?: InputMaybe<NavigatorPageEntityInput>;
+  translatables?: InputMaybe<Array<InputMaybe<NavigatorResultLinkTranslatableEntityInput>>>;
+  url?: InputMaybe<Scalars['String']['input']>;
+};
+
+export type NavigatorResultLinkTranslatableEntity = {
+  __typename?: 'NavigatorResultLinkTranslatableEntity';
+  created?: Maybe<Scalars['OffsetDateTime']['output']>;
+  id?: Maybe<Scalars['String']['output']>;
+  language?: Maybe<LanguageEntity>;
+  modified?: Maybe<Scalars['OffsetDateTime']['output']>;
+  name?: Maybe<Scalars['String']['output']>;
+};
+
+export type NavigatorResultLinkTranslatableEntityInput = {
+  created?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  id?: InputMaybe<Scalars['String']['input']>;
+  modified?: InputMaybe<Scalars['OffsetDateTime']['input']>;
+  name?: InputMaybe<Scalars['String']['input']>;
+};
+
 export type NotificationEntity = {
   __typename?: 'NotificationEntity';
   created?: Maybe<Scalars['OffsetDateTime']['output']>;
@@ -4687,6 +4900,24 @@ export type PageableList_MilestoneMediaEntity = {
   total: Scalars['Long']['output'];
 };
 
+export type PageableList_NavigatorChoiceEntity = {
+  __typename?: 'PageableList_NavigatorChoiceEntity';
+  result?: Maybe<Array<Maybe<NavigatorChoiceEntity>>>;
+  total: Scalars['Long']['output'];
+};
+
+export type PageableList_NavigatorPageEntity = {
+  __typename?: 'PageableList_NavigatorPageEntity';
+  result?: Maybe<Array<Maybe<NavigatorPageEntity>>>;
+  total: Scalars['Long']['output'];
+};
+
+export type PageableList_NavigatorResultLinkEntity = {
+  __typename?: 'PageableList_NavigatorResultLinkEntity';
+  result?: Maybe<Array<Maybe<NavigatorResultLinkEntity>>>;
+  total: Scalars['Long']['output'];
+};
+
 export type PageableList_NotificationEntity = {
   __typename?: 'PageableList_NotificationEntity';
   result?: Maybe<Array<Maybe<NotificationEntity>>>;
@@ -5065,6 +5296,13 @@ export type Query = {
   getMilestoneMedia?: Maybe<PageableList_MilestoneMediaEntity>;
   getMilestoneMedium?: Maybe<MilestoneMediaEntity>;
   getMilestones?: Maybe<PageableList_MilestoneEntity>;
+  getNavigatorChoice?: Maybe<NavigatorChoiceEntity>;
+  getNavigatorChoices?: Maybe<PageableList_NavigatorChoiceEntity>;
+  getNavigatorPage?: Maybe<NavigatorPageEntity>;
+  getNavigatorPages?: Maybe<PageableList_NavigatorPageEntity>;
+  getNavigatorResultPage?: Maybe<NavigatorResultLinkEntity>;
+  getNavigatorResultPages?: Maybe<PageableList_NavigatorResultLinkEntity>;
+  getNavigatorStartPage?: Maybe<NavigatorPageEntity>;
   getNotification?: Maybe<NotificationEntity>;
   getNotifications?: Maybe<PageableList_NotificationEntity>;
   getOrganisation?: Maybe<OrganisationEntity>;
@@ -5615,6 +5853,42 @@ export type QueryGetMilestonesArgs = {
 };
 
 
+/** Query root */
+export type QueryGetNavigatorChoiceArgs = {
+  entity?: InputMaybe<NavigatorChoiceEntityInput>;
+};
+
+
+/** Query root */
+export type QueryGetNavigatorChoicesArgs = {
+  params?: InputMaybe<FilterSortPaginateInput>;
+};
+
+
+/** Query root */
+export type QueryGetNavigatorPageArgs = {
+  entity?: InputMaybe<NavigatorPageEntityInput>;
+};
+
+
+/** Query root */
+export type QueryGetNavigatorPagesArgs = {
+  params?: InputMaybe<FilterSortPaginateInput>;
+};
+
+
+/** Query root */
+export type QueryGetNavigatorResultPageArgs = {
+  entity?: InputMaybe<NavigatorResultLinkEntityInput>;
+};
+
+
+/** Query root */
+export type QueryGetNavigatorResultPagesArgs = {
+  params?: InputMaybe<FilterSortPaginateInput>;
+};
+
+
 /** Query root */
 export type QueryGetNotificationArgs = {
   entity?: InputMaybe<NotificationEntityInput>;
diff --git a/src/app/core/constants/feature.constants.ts b/src/app/core/constants/feature.constants.ts
index 86c3261c1..2b1269372 100644
--- a/src/app/core/constants/feature.constants.ts
+++ b/src/app/core/constants/feature.constants.ts
@@ -11,6 +11,7 @@ export const formsFeatureKey = 'forms';
 export const guestArticlesFeatureKey = 'guestarticle';
 export const mapFeatureKey = 'map';
 export const mediaFeatureKey = 'media';
+export const navigatorFeatureKey = 'navigator';
 export const organisationsFeatureKey = 'organisations';
 export const reportsFeatureKey = 'reports';
 export const surveysFeatureKey = 'surveys';
diff --git a/src/app/core/typings/privilege.ts b/src/app/core/typings/privilege.ts
index 894d4a43d..22e34a0f1 100644
--- a/src/app/core/typings/privilege.ts
+++ b/src/app/core/typings/privilege.ts
@@ -20,4 +20,5 @@ export type Privilege = 'addresses_admin'
   | 'surveys_admin'
   | 'surveys_manage'
   | 'translator_admin'
-  | 'user_admin';
\ No newline at end of file
+  | 'user_admin'
+  | 'navigator_admin';
\ No newline at end of file
diff --git a/src/app/features/article/admin/details/article-admin-details-routing.module.ts b/src/app/features/article/admin/details/article-admin-details-routing.module.ts
index 7ce2bc380..02c1fea16 100644
--- a/src/app/features/article/admin/details/article-admin-details-routing.module.ts
+++ b/src/app/features/article/admin/details/article-admin-details-routing.module.ts
@@ -15,7 +15,7 @@ const routes: Routes = [
       .then((imported) => imported.ArticleAdminDetailsLandingModule),
     component: ArticleAdminDetailsLandingComponent
   },
-    {
+  {
     path: searchRoute,
     loadChildren: () => import('./modules/search/article-admin-details-search.module')
       .then((imported) => imported.ArticleAdminDetailsSearchModule),
diff --git a/src/app/features/contest/portal/details/modules/landing/contest-portal-details-landing.module.ts b/src/app/features/contest/portal/details/modules/landing/contest-portal-details-landing.module.ts
index f2ef91578..26592bed1 100644
--- a/src/app/features/contest/portal/details/modules/landing/contest-portal-details-landing.module.ts
+++ b/src/app/features/contest/portal/details/modules/landing/contest-portal-details-landing.module.ts
@@ -39,7 +39,6 @@ const components = [
   ContestPortalDetailsCommentComponent,
   ContestPortalDetailsSummaryComponent,
   PortalContestDetailsMediaComponent
-
 ];
 
 const framework = [
diff --git a/src/app/features/navigator/admin/form/constants/event-admin-details.constants.ts b/src/app/features/navigator/admin/form/constants/event-admin-details.constants.ts
new file mode 100644
index 000000000..4a8b2d55f
--- /dev/null
+++ b/src/app/features/navigator/admin/form/constants/event-admin-details.constants.ts
@@ -0,0 +1,3 @@
+export const pageRoute = 'page';
+export const choiceRoute = 'choice';
+export const overviewRoute = 'overview';
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/choice/components/navigator-admin-form-choice.component.html b/src/app/features/navigator/admin/form/modules/choice/components/navigator-admin-form-choice.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/navigator/admin/form/modules/choice/components/navigator-admin-form-choice.component.scss b/src/app/features/navigator/admin/form/modules/choice/components/navigator-admin-form-choice.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/navigator/admin/form/modules/choice/components/navigator-admin-form-choice.component.ts b/src/app/features/navigator/admin/form/modules/choice/components/navigator-admin-form-choice.component.ts
new file mode 100644
index 000000000..f7f2164eb
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/choice/components/navigator-admin-form-choice.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navigator-admin-form-choice',
+  templateUrl: './navigator-admin-form-choice.component.html',
+  styleUrls: ['./navigator-admin-form-choice.component.scss']
+})
+export class NavigatorAdminFormChoiceComponent  {
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/choice/constants/navigator-admin-form-choice.constants.ts b/src/app/features/navigator/admin/form/modules/choice/constants/navigator-admin-form-choice.constants.ts
new file mode 100644
index 000000000..5a52f9114
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/choice/constants/navigator-admin-form-choice.constants.ts
@@ -0,0 +1 @@
+export const navigatorAdminFormChoiceStateKey = 'navigatorAdminFormChoiceState';
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/choice/navigator-admin-form-choice.module.ts b/src/app/features/navigator/admin/form/modules/choice/navigator-admin-form-choice.module.ts
new file mode 100644
index 000000000..6a63382ab
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/choice/navigator-admin-form-choice.module.ts
@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { TableComponent } from 'ngx-cinlib/tables';
+import { CoreModule } from 'src/app/core/core.module';
+import { NavigatorAdminFormChoiceComponent } from './components/navigator-admin-form-choice.component';
+import { navigatorAdminFormChoiceStateKey } from './constants/navigator-admin-form-choice.constants';
+import { NavigatorAdminFormChoiceEffects } from './state/navigator-admin-form-choice.effects';
+import { navigatorAdminFormChoiceReducer } from './state/navigator-admin-form-choice.reducer';
+
+const components = [
+  NavigatorAdminFormChoiceComponent,
+]
+
+const framework = [
+  CommonModule,
+];
+
+const materials = [
+  MatButtonModule,
+  MatCardModule,
+];
+
+const modules = [
+  CoreModule,
+];
+
+const libs = [
+  StoreModule.forFeature(navigatorAdminFormChoiceStateKey, navigatorAdminFormChoiceReducer),
+  EffectsModule.forFeature([NavigatorAdminFormChoiceEffects]),
+
+  TableComponent,
+];
+
+@NgModule({
+  declarations: [...components],
+  imports: [
+    ...framework,
+    ...libs,
+    ...materials,
+    ...modules,
+  ],
+  exports: [...components],
+})
+export class NavigatorAdminFormChoiceModule { }
diff --git a/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.actions.ts b/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.actions.ts
new file mode 100644
index 000000000..d0a1dfa40
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.actions.ts
@@ -0,0 +1,6 @@
+import { createActionGroup } from '@ngrx/store';
+
+export const NavigatorAdminFormChoiceActions = createActionGroup({
+  source: 'Navigator Admin Form choice',
+  events: {}
+});
diff --git a/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.effects.ts b/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.effects.ts
new file mode 100644
index 000000000..b48bb1f51
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.effects.ts
@@ -0,0 +1,7 @@
+import { Injectable } from '@angular/core';
+
+
+@Injectable()
+export class NavigatorAdminFormChoiceEffects {
+  constructor() { }
+}
diff --git a/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.reducer.ts b/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.reducer.ts
new file mode 100644
index 000000000..ae82df72d
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.reducer.ts
@@ -0,0 +1,14 @@
+import { createReducer } from '@ngrx/store';
+
+
+
+export interface NavigatorAdminFormChoiceState {
+
+}
+
+export const initialState: NavigatorAdminFormChoiceState = {
+};
+
+export const navigatorAdminFormChoiceReducer = createReducer(
+  initialState,
+);
diff --git a/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.selectors.ts b/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.selectors.ts
new file mode 100644
index 000000000..e27e7e6f0
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/choice/state/navigator-admin-form-choice.selectors.ts
@@ -0,0 +1,7 @@
+import { createFeatureSelector } from '@ngrx/store';
+import { navigatorAdminFormChoiceStateKey } from '../constants/navigator-admin-form-choice.constants';
+import { NavigatorAdminFormChoiceState } from './navigator-admin-form-choice.reducer';
+
+
+export const selectNavigatorAdminFormChoiceState = createFeatureSelector<NavigatorAdminFormChoiceState>(navigatorAdminFormChoiceStateKey);
+
diff --git a/src/app/features/navigator/admin/form/modules/layout/components/navigator-admin-form-layout.component.html b/src/app/features/navigator/admin/form/modules/layout/components/navigator-admin-form-layout.component.html
new file mode 100644
index 000000000..393434d2f
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/layout/components/navigator-admin-form-layout.component.html
@@ -0,0 +1,3 @@
+<cin-page-title titleLabel="createNavigator"></cin-page-title>
+<app-navigator-admin-form-overview></app-navigator-admin-form-overview>
+
diff --git a/src/app/features/navigator/admin/form/modules/layout/components/navigator-admin-form-layout.component.scss b/src/app/features/navigator/admin/form/modules/layout/components/navigator-admin-form-layout.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/navigator/admin/form/modules/layout/components/navigator-admin-form-layout.component.ts b/src/app/features/navigator/admin/form/modules/layout/components/navigator-admin-form-layout.component.ts
new file mode 100644
index 000000000..56f55213d
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/layout/components/navigator-admin-form-layout.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navigator-admin-form-layout',
+  templateUrl: './navigator-admin-form-layout.component.html',
+  styleUrls: ['./navigator-admin-form-layout.component.scss']
+})
+export class NavigatorAdminFormLayoutComponent  {
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/layout/constants/navigator-admin-form-layout.constants.ts b/src/app/features/navigator/admin/form/modules/layout/constants/navigator-admin-form-layout.constants.ts
new file mode 100644
index 000000000..ebcdc47ed
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/layout/constants/navigator-admin-form-layout.constants.ts
@@ -0,0 +1 @@
+export const navigatorAdminFormLayoutStateKey = 'navigatorAdminFormLayoutState';
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/layout/navigator-admin-form-layout.module.ts b/src/app/features/navigator/admin/form/modules/layout/navigator-admin-form-layout.module.ts
new file mode 100644
index 000000000..8cd42e7c8
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/layout/navigator-admin-form-layout.module.ts
@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { PageTitleComponent } from 'ngx-cinlib/layouts/title';
+import { TableComponent } from 'ngx-cinlib/tables';
+import { CoreModule } from 'src/app/core/core.module';
+import { NavigatorAdminFormOverviewModule } from '../overview/navigator-admin-form-overview.module';
+import { NavigatorAdminFormLayoutComponent } from './components/navigator-admin-form-layout.component';
+import { navigatorAdminFormLayoutStateKey } from './constants/navigator-admin-form-layout.constants';
+import { NavigatorAdminFormLayoutEffects } from './state/navigator-admin-form-layout.effects';
+import { navigatorAdminFormLayoutReducer } from './state/navigator-admin-form-layout.reducer';
+
+const components = [
+  NavigatorAdminFormLayoutComponent,
+]
+
+const framework = [
+  CommonModule,
+];
+
+const materials = [
+  MatButtonModule,
+  MatCardModule,
+];
+
+const modules = [
+  CoreModule,
+  NavigatorAdminFormOverviewModule,
+];
+
+const libs = [
+  StoreModule.forFeature(navigatorAdminFormLayoutStateKey, navigatorAdminFormLayoutReducer),
+  EffectsModule.forFeature([NavigatorAdminFormLayoutEffects]),
+
+  TableComponent,
+  PageTitleComponent,
+];
+
+@NgModule({
+  declarations: [...components],
+  imports: [
+    ...framework,
+    ...libs,
+    ...materials,
+    ...modules,
+  ],
+  exports: [...components],
+})
+export class NavigatorAdminFormLayoutModule { }
diff --git a/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.actions.ts b/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.actions.ts
new file mode 100644
index 000000000..d00c1dd49
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.actions.ts
@@ -0,0 +1,10 @@
+import { createActionGroup } from '@ngrx/store';
+
+
+
+export const NavigatorAdminFormLayoutActions = createActionGroup({
+  source: 'Navigator Admin Form page',
+  events: {
+
+  }
+});
diff --git a/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.effects.ts b/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.effects.ts
new file mode 100644
index 000000000..70ba833c1
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.effects.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+
+@Injectable()
+export class NavigatorAdminFormLayoutEffects {
+
+
+
+  constructor(
+  ) { }
+}
diff --git a/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.reducer.ts b/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.reducer.ts
new file mode 100644
index 000000000..f99763514
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.reducer.ts
@@ -0,0 +1,14 @@
+import { createReducer } from '@ngrx/store';
+
+
+
+export interface NavigatorAdminFormLayoutState {
+
+}
+
+export const initialState: NavigatorAdminFormLayoutState = {
+};
+
+export const navigatorAdminFormLayoutReducer = createReducer(
+  initialState,
+);
diff --git a/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.selectors.ts b/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.selectors.ts
new file mode 100644
index 000000000..7d07c6a88
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/layout/state/navigator-admin-form-layout.selectors.ts
@@ -0,0 +1,7 @@
+import { createFeatureSelector } from '@ngrx/store';
+import { navigatorAdminFormLayoutStateKey } from '../constants/navigator-admin-form-layout.constants';
+import { NavigatorAdminFormLayoutState } from './navigator-admin-form-layout.reducer';
+
+
+export const selectNavigatorAdminFormLayoutState = createFeatureSelector<NavigatorAdminFormLayoutState>(navigatorAdminFormLayoutStateKey);
+
diff --git a/src/app/features/navigator/admin/form/modules/overview/components/navigator-admin-form-overview.component.html b/src/app/features/navigator/admin/form/modules/overview/components/navigator-admin-form-overview.component.html
new file mode 100644
index 000000000..cf396b59e
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/overview/components/navigator-admin-form-overview.component.html
@@ -0,0 +1,25 @@
+<mat-tree class="border-box"
+[treeControl]="treeControl"
+[dataSource]="dataSource">
+
+<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
+  <button mat-button disabled="true"></button>
+  <span (click)="pageDetails()">{{ (node.item  | translatable: 'title' | async) ?? 
+    (node.item | translatable: 'name' | async) }}</span>
+</mat-tree-node>
+
+<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding="">
+  <button (click)="getNextPage()"
+    mat-button
+    matTreeNodeToggle>
+    <cin-icon
+    [icon]="treeControl.isExpanded(node) 
+      ? ['fas', 'chevron-down'] 
+      : ['fas', 'chevron-right']"
+      [size]="'sm'"></cin-icon>
+  </button>
+  <span (click)="pageDetails()">{{ (node.item  | translatable: 'title' | async) ?? 
+    (node.item | translatable: 'name' | async) }}</span>
+</mat-tree-node>
+
+</mat-tree>
diff --git a/src/app/features/navigator/admin/form/modules/overview/components/navigator-admin-form-overview.component.scss b/src/app/features/navigator/admin/form/modules/overview/components/navigator-admin-form-overview.component.scss
new file mode 100644
index 000000000..c7ebfde37
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/overview/components/navigator-admin-form-overview.component.scss
@@ -0,0 +1,10 @@
+span {
+  cursor: pointer;
+  border-radius: 5rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
+}
+
+span:hover{
+  background-color: var(--color-light);
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/overview/components/navigator-admin-form-overview.component.ts b/src/app/features/navigator/admin/form/modules/overview/components/navigator-admin-form-overview.component.ts
new file mode 100644
index 000000000..d4967a713
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/overview/components/navigator-admin-form-overview.component.ts
@@ -0,0 +1,82 @@
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { Component, OnInit } from '@angular/core';
+import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
+import { Store } from '@ngrx/store';
+import { TranslationService } from 'ngx-cinlib/i18n';
+import { NavigatorChoiceEntity, NavigatorPageEntity } from 'src/app/core/api/generated/schema';
+import { NavigatorAdminFormOverviewActions } from '../state/navigator-admin-form-overview.actions';
+import { selectStartPage } from '../state/navigator-admin-form-overview.selectors';
+
+interface TreeNode {
+  item: NavigatorPageEntity | NavigatorChoiceEntity,
+  children?: TreeNode[],
+}
+
+interface FlatNode {
+  expandable: boolean,
+  item: NavigatorPageEntity | NavigatorChoiceEntity,
+  level: number,
+}
+
+const TREE_DATA: TreeNode[] = [];
+
+@Component({
+  selector: 'app-navigator-admin-form-overview',
+  templateUrl: './navigator-admin-form-overview.component.html',
+  styleUrls: ['./navigator-admin-form-overview.component.scss']
+})
+export class NavigatorAdminFormOverviewComponent  implements OnInit {
+
+getNextPage() {
+
+}
+
+pageDetails() {
+throw new Error('Method not implemented.');
+}
+
+  constructor(private store: Store, private translationService: TranslationService) {
+    this.dataSource.data = TREE_DATA;
+  }
+
+  ngOnInit(): void {
+    this.store.dispatch(NavigatorAdminFormOverviewActions.getStartPage());
+    this.store.select(selectStartPage).subscribe(page => {
+      if (page) {
+        const children = page.choices?.map((choice) => ({
+          item: choice!,
+          children: choice?.nextPage ? [{item: choice?.nextPage!}] : undefined
+        })) ?? [];
+        const treeNode: TreeNode = {
+          item: page!,
+          children: children
+        };
+        this.dataSource.data = [...this.dataSource.data, treeNode];
+      }
+    });
+  }
+ 
+  treeControl = new FlatTreeControl<FlatNode>(
+    node => node.level,
+    node => node.expandable,
+  );
+
+  private transformer = (node: TreeNode, level: number) => {
+    return {
+      expandable: !!node.children && node.children.length > 0,
+      item: node.item,
+      level: level
+    }
+  }
+
+  private treeFlattener = new MatTreeFlattener(
+    this.transformer,
+    node => node.level,
+    node => node.expandable,
+    node => node.children
+  );
+
+  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+  hasChild = (_: number, node: FlatNode) => node.expandable;
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/overview/constants/navigator-admin-form-overview.constants.ts b/src/app/features/navigator/admin/form/modules/overview/constants/navigator-admin-form-overview.constants.ts
new file mode 100644
index 000000000..bb8bd63e3
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/overview/constants/navigator-admin-form-overview.constants.ts
@@ -0,0 +1 @@
+export const navigatorAdminFormOverviewStateKey = 'navigatorAdminFormOverviewState';
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/overview/navigator-admin-form-overview.module.ts b/src/app/features/navigator/admin/form/modules/overview/navigator-admin-form-overview.module.ts
new file mode 100644
index 000000000..321e23a1b
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/overview/navigator-admin-form-overview.module.ts
@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatProgressBar } from '@angular/material/progress-bar';
+import { MatTreeModule } from '@angular/material/tree';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { TranslatablePipe } from 'ngx-cinlib/i18n';
+import { IconComponent } from 'ngx-cinlib/icons';
+import { TableComponent } from 'ngx-cinlib/tables';
+import { CoreModule } from 'src/app/core/core.module';
+import { NavigatorAdminFormOverviewComponent } from './components/navigator-admin-form-overview.component';
+import { navigatorAdminFormOverviewStateKey } from './constants/navigator-admin-form-overview.constants';
+import { NavigatorAdminFormOverviewEffects } from './state/navigator-admin-form-overview.effects';
+import { navigatorAdminFormOverviewReducer } from './state/navigator-admin-form-overview.reducer';
+
+const components = [
+  NavigatorAdminFormOverviewComponent,
+]
+
+const framework = [
+  CommonModule,
+];
+
+const materials = [
+  MatButtonModule,
+  MatCardModule,
+  MatTreeModule,
+  MatProgressBar
+];
+
+const modules = [
+  CoreModule,
+];
+
+const libs = [
+  StoreModule.forFeature(navigatorAdminFormOverviewStateKey, navigatorAdminFormOverviewReducer),
+  EffectsModule.forFeature([NavigatorAdminFormOverviewEffects]),
+  IconComponent,
+  TableComponent,
+  TranslatablePipe,
+];
+
+@NgModule({
+  declarations: [...components],
+  imports: [
+    ...framework,
+    ...libs,
+    ...materials,
+    ...modules,
+  ],
+  exports: [...components],
+})
+export class NavigatorAdminFormOverviewModule { }
diff --git a/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.actions.ts b/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.actions.ts
new file mode 100644
index 000000000..ebf35f28f
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.actions.ts
@@ -0,0 +1,13 @@
+import { createActionGroup, emptyProps } from '@ngrx/store';
+import { Maybe, NavigatorPageEntity } from 'src/app/core/api/generated/schema';
+
+export const NavigatorAdminFormOverviewActions = createActionGroup({
+  source: 'Navigator Admin Form overview',
+  events: {
+    'get start page': emptyProps(),
+    'set start page': (startPage: Maybe<NavigatorPageEntity>) => ({ startPage }),
+
+    'get page': (slug: Maybe<string>) => ({ slug }),
+    'set page': (page: Maybe<NavigatorPageEntity>) => ({ page }),
+  }
+});
diff --git a/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.effects.ts b/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.effects.ts
new file mode 100644
index 000000000..21afabcfd
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.effects.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { filter, map, switchMap } from 'rxjs';
+import { AdminActions } from 'src/app/admin/state/admin.actions';
+import { NavigatorPageEntity } from 'src/app/core/api/generated/schema';
+import { GetNavigatorPageGQL } from 'src/app/features/navigator/api/generated/get-navigator-page.query.generated';
+import { GetNavigatorStartPageGQL } from 'src/app/features/navigator/api/generated/get-navigator-start-page.query.generated';
+import { NavigatorAdminFormOverviewActions } from './navigator-admin-form-overview.actions';
+
+
+@Injectable()
+export class NavigatorAdminFormOverviewEffects {
+
+  getStartPage = createEffect(() => this.actions.pipe(
+    ofType(NavigatorAdminFormOverviewActions.getStartPage),
+    switchMap( () => this.getNavigatorStartPageService.watch().valueChanges),
+    filter(response => !!response.data.getNavigatorStartPage?.id),
+    map(response => NavigatorAdminFormOverviewActions.setStartPage(response.data.getNavigatorStartPage as NavigatorPageEntity))
+    ));
+    
+  getPage = createEffect(() => this.actions.pipe(
+    ofType(NavigatorAdminFormOverviewActions.getPage),
+     switchMap((action) => this.getNavigatorPageService.watch({
+       entity: {
+        slug: action.slug
+      }
+    }).valueChanges),
+    map(response => response.data.getNavigatorPage?.id
+       ? NavigatorAdminFormOverviewActions.setPage(response.data.getNavigatorPage as NavigatorPageEntity)
+       : AdminActions.notFound())
+   ));
+
+  constructor(
+    private actions: Actions,
+    private getNavigatorStartPageService: GetNavigatorStartPageGQL,
+    private getNavigatorPageService: GetNavigatorPageGQL
+
+  ) {}
+}
diff --git a/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.reducer.ts b/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.reducer.ts
new file mode 100644
index 000000000..bf9955031
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.reducer.ts
@@ -0,0 +1,22 @@
+import { createReducer, on } from '@ngrx/store';
+import { Maybe, NavigatorPageEntity } from 'src/app/core/api/generated/schema';
+import { NavigatorAdminFormOverviewActions } from './navigator-admin-form-overview.actions';
+
+
+
+export interface NavigatorAdminFormOverviewState {
+  startPage?: Maybe<NavigatorPageEntity>;
+}
+
+export const initialState: NavigatorAdminFormOverviewState = {
+};
+
+export const navigatorAdminFormOverviewReducer = createReducer(
+  initialState,
+
+  on(
+    NavigatorAdminFormOverviewActions.setStartPage,
+    (state, action): NavigatorAdminFormOverviewState => ({
+      ...state, startPage: action.startPage
+    })),
+);
diff --git a/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.selectors.ts b/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.selectors.ts
new file mode 100644
index 000000000..59154b5f3
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/overview/state/navigator-admin-form-overview.selectors.ts
@@ -0,0 +1,11 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { navigatorAdminFormOverviewStateKey } from '../constants/navigator-admin-form-overview.constants';
+import { NavigatorAdminFormOverviewState } from './navigator-admin-form-overview.reducer';
+
+
+export const selectNavigatorAdminFormOverviewState = createFeatureSelector<NavigatorAdminFormOverviewState>(navigatorAdminFormOverviewStateKey);
+
+export const selectStartPage = createSelector(
+  selectNavigatorAdminFormOverviewState,
+  state => state.startPage
+);
diff --git a/src/app/features/navigator/admin/form/modules/page/components/navigator-admin-form-page.component.html b/src/app/features/navigator/admin/form/modules/page/components/navigator-admin-form-page.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/navigator/admin/form/modules/page/components/navigator-admin-form-page.component.scss b/src/app/features/navigator/admin/form/modules/page/components/navigator-admin-form-page.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/features/navigator/admin/form/modules/page/components/navigator-admin-form-page.component.ts b/src/app/features/navigator/admin/form/modules/page/components/navigator-admin-form-page.component.ts
new file mode 100644
index 000000000..af5a5fd70
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/page/components/navigator-admin-form-page.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navigator-admin-form-page',
+  templateUrl: './navigator-admin-form-page.component.html',
+  styleUrls: ['./navigator-admin-form-page.component.scss']
+})
+export class NavigatorAdminFormPageComponent  {
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/page/constants/navigator-admin-form-page.constants.ts b/src/app/features/navigator/admin/form/modules/page/constants/navigator-admin-form-page.constants.ts
new file mode 100644
index 000000000..5564a3100
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/page/constants/navigator-admin-form-page.constants.ts
@@ -0,0 +1 @@
+export const navigatorAdminFormPageStateKey = 'navigatorAdminFormPageState';
\ No newline at end of file
diff --git a/src/app/features/navigator/admin/form/modules/page/navigator-admin-form-page.module.ts b/src/app/features/navigator/admin/form/modules/page/navigator-admin-form-page.module.ts
new file mode 100644
index 000000000..ceba788a1
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/page/navigator-admin-form-page.module.ts
@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { TableComponent } from 'ngx-cinlib/tables';
+import { CoreModule } from 'src/app/core/core.module';
+import { NavigatorAdminFormPageComponent } from './components/navigator-admin-form-page.component';
+import { navigatorAdminFormPageStateKey } from './constants/navigator-admin-form-page.constants';
+import { NavigatorAdminFormPageEffects } from './state/navigator-admin-form-page.effects';
+import { navigatorAdminFormPageReducer } from './state/navigator-admin-form-page.reducer';
+
+const components = [
+  NavigatorAdminFormPageComponent,
+]
+
+const framework = [
+  CommonModule,
+];
+
+const materials = [
+  MatButtonModule,
+  MatCardModule,
+];
+
+const modules = [
+  CoreModule,
+];
+
+const libs = [
+  StoreModule.forFeature(navigatorAdminFormPageStateKey, navigatorAdminFormPageReducer),
+  EffectsModule.forFeature([NavigatorAdminFormPageEffects]),
+
+  TableComponent,
+];
+
+@NgModule({
+  declarations: [...components],
+  imports: [
+    ...framework,
+    ...libs,
+    ...materials,
+    ...modules,
+  ],
+  exports: [...components],
+})
+export class NavigatorAdminFormPageModule { }
diff --git a/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.actions.ts b/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.actions.ts
new file mode 100644
index 000000000..cc7c2b3b4
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.actions.ts
@@ -0,0 +1,10 @@
+import { createActionGroup } from '@ngrx/store';
+
+
+
+export const NavigatorAdminFormPageActions = createActionGroup({
+  source: 'Navigator Admin Form page',
+  events: {
+
+  }
+});
diff --git a/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.effects.ts b/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.effects.ts
new file mode 100644
index 000000000..1ec0068b6
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.effects.ts
@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+
+@Injectable()
+export class NavigatorAdminFormPageEffects {
+
+
+
+  constructor(
+  ) { }
+}
diff --git a/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.reducer.ts b/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.reducer.ts
new file mode 100644
index 000000000..e05d40d97
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.reducer.ts
@@ -0,0 +1,14 @@
+import { createReducer } from '@ngrx/store';
+
+
+
+export interface NavigatorAdminFormPageState {
+
+}
+
+export const initialState: NavigatorAdminFormPageState = {
+};
+
+export const navigatorAdminFormPageReducer = createReducer(
+  initialState,
+);
diff --git a/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.selectors.ts b/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.selectors.ts
new file mode 100644
index 000000000..6af580d43
--- /dev/null
+++ b/src/app/features/navigator/admin/form/modules/page/state/navigator-admin-form-page.selectors.ts
@@ -0,0 +1,7 @@
+import { createFeatureSelector } from '@ngrx/store';
+import { navigatorAdminFormPageStateKey } from '../constants/navigator-admin-form-page.constants';
+import { NavigatorAdminFormPageState } from './navigator-admin-form-page.reducer';
+
+
+export const selectNavigatorAdminFormPageState = createFeatureSelector<NavigatorAdminFormPageState>(navigatorAdminFormPageStateKey);
+
diff --git a/src/app/features/navigator/admin/form/navigator-admin-form-routing.module.ts b/src/app/features/navigator/admin/form/navigator-admin-form-routing.module.ts
new file mode 100644
index 000000000..f77b588f8
--- /dev/null
+++ b/src/app/features/navigator/admin/form/navigator-admin-form-routing.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { NavigatorAdminFormLayoutComponent } from './modules/layout/components/navigator-admin-form-layout.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./modules/layout/navigator-admin-form-layout.module')
+      .then((imported) => imported.NavigatorAdminFormLayoutModule),
+    component: NavigatorAdminFormLayoutComponent
+  },
+  // {
+  //   path: visitorsRoute,
+  //   loadChildren: () => import('./modules/visitors/event-admin-details-visitors.module')
+  //     .then((imported) => imported.NavigatorAdminDetailsVisitorsModule),
+  //   component: NavigatorAdminDetailsVisitorsComponent
+  // },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class NavigatorAdminFormRoutingModule { }
+
diff --git a/src/app/features/navigator/admin/form/navigator-admin-form.module.ts b/src/app/features/navigator/admin/form/navigator-admin-form.module.ts
new file mode 100644
index 000000000..d571219a6
--- /dev/null
+++ b/src/app/features/navigator/admin/form/navigator-admin-form.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { NavigatorAdminFormLayoutModule } from './modules/layout/navigator-admin-form-layout.module';
+import { NavigatorAdminFormRoutingModule } from './navigator-admin-form-routing.module';
+
+const modules = [
+  NavigatorAdminFormLayoutModule,
+  NavigatorAdminFormRoutingModule,
+];
+
+@NgModule({
+  imports: [
+    ...modules,
+  ],
+  exports: [],
+})
+export class NavigatorAdminFormModule { }
diff --git a/src/app/features/navigator/admin/navigator-admin-routing.module.ts b/src/app/features/navigator/admin/navigator-admin-routing.module.ts
new file mode 100644
index 000000000..81e05389d
--- /dev/null
+++ b/src/app/features/navigator/admin/navigator-admin-routing.module.ts
@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { AdminActions } from 'src/app/admin/state/admin.actions';
+import { AdminFeatureRoute } from 'src/app/admin/typings/menu';
+import { navigatorFeatureKey } from 'src/app/core/constants/feature.constants';
+import { requireAnyPrivilege } from 'src/app/core/utils/privilege.utils';
+
+const menuRoutes: AdminFeatureRoute[] = [
+  {
+    path: navigatorFeatureKey,
+    loadChildren: () => import('src/app/features/navigator/admin/form/navigator-admin-form.module')
+      .then((imported) => imported.NavigatorAdminFormModule),
+    data: {
+      label: 'create/edit',
+      privileges: ['navigator_admin'],
+    },
+    canActivate: [requireAnyPrivilege('navigator_admin')] 
+  },
+];
+
+const routes: Routes = [
+]
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    ...menuRoutes,
+    ...routes,
+  ])],
+  exports: [RouterModule]
+})
+export class NavigatorAdminRoutingModule {
+
+  constructor(
+    public store: Store
+  ) {
+    this.store.dispatch(AdminActions.addMainRoutes({
+      code: navigatorFeatureKey,
+      routes: menuRoutes,
+    }));
+  }
+}
diff --git a/src/app/features/navigator/api/codegen/codegen.ts b/src/app/features/navigator/api/codegen/codegen.ts
new file mode 100644
index 000000000..ca5629f16
--- /dev/null
+++ b/src/app/features/navigator/api/codegen/codegen.ts
@@ -0,0 +1,32 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+import { graphqlGenerationApi } from '../../../../core/api/codegen/constants';
+
+const config: CodegenConfig = {
+  schema: graphqlGenerationApi,
+  documents: [
+    'src/app/core/api/documents/fragments/**/*.graphql',
+    'src/app/features/navigator/api/documents/**/*.graphql',
+  ],
+  generates: {
+    'src/app/core/api/generated': {
+      preset: 'near-operation-file-preset',
+      presetConfig: {
+        baseTypesPath: 'schema.ts',
+        folder: '../../generated'
+      },
+      plugins: [
+        'typescript-operations',
+        'typescript-apollo-angular',
+        {
+          'add': {
+            content: '/* eslint-disable */'
+          }
+        }
+      ],
+      config: {
+        addExplicitOverride: true,
+      },
+    },
+  },
+};
+export default config;
\ No newline at end of file
diff --git a/src/app/features/navigator/api/documents/mutation/delete-navigator-node.mutation.graphql b/src/app/features/navigator/api/documents/mutation/delete-navigator-node.mutation.graphql
new file mode 100644
index 000000000..cb3abee76
--- /dev/null
+++ b/src/app/features/navigator/api/documents/mutation/delete-navigator-node.mutation.graphql
@@ -0,0 +1,3 @@
+mutation deleteNavigatorPage($id: String) {
+  deleteNavigatorPage(id: $id)
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/api/documents/queries/get-navigator-page.query.graphql b/src/app/features/navigator/api/documents/queries/get-navigator-page.query.graphql
new file mode 100644
index 000000000..0d065acc8
--- /dev/null
+++ b/src/app/features/navigator/api/documents/queries/get-navigator-page.query.graphql
@@ -0,0 +1,73 @@
+query getNavigatorPage($entity: NavigatorPageEntityInput) {
+  getNavigatorPage(entity: $entity) {
+    id
+    modified
+    created
+    slug
+    title
+    additionalInformation
+
+    translatables {
+      id
+      additionalInformation
+      title
+      language {
+        id
+        locale
+        name
+      }
+    }
+
+    choices {
+      id
+      description
+      name
+      parent {
+        id
+        slug
+      }
+      nextPage {
+        id
+        slug
+      }
+      translatables {
+        id
+        name
+        description
+        language {
+          id
+          locale
+          name
+        }
+      }
+    } 
+
+    parentChoices {
+      id
+      translatables {
+      id
+      name
+      language {
+        id
+        locale
+        name
+      }
+    }    
+  }
+
+    links {
+      id
+      name
+      url
+      translatables {
+        id
+        name
+        language {
+          id
+          locale
+          name
+        }        
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/api/documents/queries/get-navigator-start-page.query.graphql b/src/app/features/navigator/api/documents/queries/get-navigator-start-page.query.graphql
new file mode 100644
index 000000000..97a45e01f
--- /dev/null
+++ b/src/app/features/navigator/api/documents/queries/get-navigator-start-page.query.graphql
@@ -0,0 +1,46 @@
+query getNavigatorStartPage {
+  getNavigatorStartPage {
+    id
+    modified
+    created
+    slug
+    title
+    additionalInformation
+    isResultPage
+
+    choices {
+      id
+      description
+      name
+      nextPage {
+        id
+        slug
+      }
+      translatables {
+        id
+        name
+        description
+        language {
+          id
+          locale
+          name
+        }
+      }
+    } 
+
+    parentChoices {
+      id
+    }
+  
+    translatables {
+      id
+      additionalInformation
+      title
+      language {
+        id
+        locale
+        name
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/api/generated/delete-navigator-node.mutation.generated.ts b/src/app/features/navigator/api/generated/delete-navigator-node.mutation.generated.ts
new file mode 100644
index 000000000..79eb982c6
--- /dev/null
+++ b/src/app/features/navigator/api/generated/delete-navigator-node.mutation.generated.ts
@@ -0,0 +1,29 @@
+/* eslint-disable */
+import * as Types from '../../../../core/api/generated/schema';
+
+import { gql } from 'apollo-angular';
+import { Injectable } from '@angular/core';
+import * as Apollo from 'apollo-angular';
+export type DeleteNavigatorPageMutationVariables = Types.Exact<{
+  id?: Types.InputMaybe<Types.Scalars['String']['input']>;
+}>;
+
+
+export type DeleteNavigatorPageMutation = { __typename?: 'Mutation', deleteNavigatorPage?: boolean | null };
+
+export const DeleteNavigatorPageDocument = gql`
+    mutation deleteNavigatorPage($id: String) {
+  deleteNavigatorPage(id: $id)
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class DeleteNavigatorPageGQL extends Apollo.Mutation<DeleteNavigatorPageMutation, DeleteNavigatorPageMutationVariables> {
+    override document = DeleteNavigatorPageDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/features/navigator/api/generated/get-articles.query.generated.ts b/src/app/features/navigator/api/generated/get-articles.query.generated.ts
new file mode 100644
index 000000000..5cfce10e9
--- /dev/null
+++ b/src/app/features/navigator/api/generated/get-articles.query.generated.ts
@@ -0,0 +1,74 @@
+/* eslint-disable */
+import * as Types from '../../../../core/api/generated/schema';
+
+import { gql } from 'apollo-angular';
+import { LanguageFragmentDoc } from '../../../../core/api/generated/language.fragment.generated';
+import { Injectable } from '@angular/core';
+import * as Apollo from 'apollo-angular';
+export type GetNavigatorPagesQueryVariables = Types.Exact<{
+  params?: Types.InputMaybe<Types.FilterSortPaginateInput>;
+}>;
+
+
+export type GetNavigatorPagesQuery = { __typename?: 'Query', getNavigatorPages?: { __typename?: 'PageableList_NavigatorPageEntity', total: any, result?: Array<{ __typename?: 'NavigatorPageEntity', id?: string | null, created?: any | null, modified?: any | null, slug?: string | null, title?: string | null, additionalInformation?: string | null, isResultPage?: boolean | null, translatables?: Array<{ __typename?: 'NavigatorPageTranslatableEntity', id?: string | null, title?: string | null, additionalInformation?: string | null, language?: { __typename?: 'LanguageEntity', id?: string | null, locale?: string | null, name?: string | null } | null } | null> | null, parentChoices?: Array<{ __typename?: 'NavigatorChoiceEntity', id?: string | null, translatables?: Array<{ __typename?: 'NavigatorChoiceTranslatableEntity', id?: string | null, name?: string | null, description?: string | null, language?: { __typename?: 'LanguageEntity', id?: string | null, locale?: string | null, name?: string | null } | null } | null> | null } | null> | null, choices?: Array<{ __typename?: 'NavigatorChoiceEntity', id?: string | null, nextPage?: { __typename?: 'NavigatorPageEntity', id?: string | null } | null, translatables?: Array<{ __typename?: 'NavigatorChoiceTranslatableEntity', id?: string | null, name?: string | null, description?: string | null, language?: { __typename?: 'LanguageEntity', id?: string | null, locale?: string | null, name?: string | null } | null } | null> | null } | null> | null } | null> | null } | null };
+
+export const GetNavigatorPagesDocument = gql`
+    query getNavigatorPages($params: FilterSortPaginateInput) {
+  getNavigatorPages(params: $params) {
+    result {
+      id
+      created
+      modified
+      slug
+      title
+      additionalInformation
+      isResultPage
+      translatables {
+        id
+        title
+        additionalInformation
+        language {
+          ...Language
+        }
+      }
+      parentChoices {
+        id
+        translatables {
+          id
+          name
+          description
+          language {
+            ...Language
+          }
+        }
+      }
+      choices {
+        id
+        nextPage {
+          id
+        }
+        translatables {
+          id
+          name
+          description
+          language {
+            ...Language
+          }
+        }
+      }
+    }
+    total
+  }
+}
+    ${LanguageFragmentDoc}`;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class GetNavigatorPagesGQL extends Apollo.Query<GetNavigatorPagesQuery, GetNavigatorPagesQueryVariables> {
+    override document = GetNavigatorPagesDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/features/navigator/api/generated/get-navigator-page.query.generated.ts b/src/app/features/navigator/api/generated/get-navigator-page.query.generated.ts
new file mode 100644
index 000000000..7c1e27a8e
--- /dev/null
+++ b/src/app/features/navigator/api/generated/get-navigator-page.query.generated.ts
@@ -0,0 +1,95 @@
+/* eslint-disable */
+import * as Types from '../../../../core/api/generated/schema';
+
+import { gql } from 'apollo-angular';
+import { Injectable } from '@angular/core';
+import * as Apollo from 'apollo-angular';
+export type GetNavigatorPageQueryVariables = Types.Exact<{
+  entity?: Types.InputMaybe<Types.NavigatorPageEntityInput>;
+}>;
+
+
+export type GetNavigatorPageQuery = { __typename?: 'Query', getNavigatorPage?: { __typename?: 'NavigatorPageEntity', id?: string | null, modified?: any | null, created?: any | null, slug?: string | null, title?: string | null, additionalInformation?: string | null, translatables?: Array<{ __typename?: 'NavigatorPageTranslatableEntity', id?: string | null, additionalInformation?: string | null, title?: string | null, language?: { __typename?: 'LanguageEntity', id?: string | null, locale?: string | null, name?: string | null } | null } | null> | null, choices?: Array<{ __typename?: 'NavigatorChoiceEntity', id?: string | null, description?: string | null, name?: string | null, parent?: { __typename?: 'NavigatorPageEntity', id?: string | null, slug?: string | null } | null, nextPage?: { __typename?: 'NavigatorPageEntity', id?: string | null, slug?: string | null } | null, translatables?: Array<{ __typename?: 'NavigatorChoiceTranslatableEntity', id?: string | null, name?: string | null, description?: string | null, language?: { __typename?: 'LanguageEntity', id?: string | null, locale?: string | null, name?: string | null } | null } | null> | null } | null> | null, parentChoices?: Array<{ __typename?: 'NavigatorChoiceEntity', id?: string | null, translatables?: Array<{ __typename?: 'NavigatorChoiceTranslatableEntity', id?: string | null, name?: string | null, language?: { __typename?: 'LanguageEntity', id?: string | null, locale?: string | null, name?: string | null } | null } | null> | null } | null> | null, links?: Array<{ __typename?: 'NavigatorResultLinkEntity', id?: string | null, name?: string | null, url?: string | null, translatables?: Array<{ __typename?: 'NavigatorResultLinkTranslatableEntity', id?: string | null, name?: string | null, language?: { __typename?: 'LanguageEntity', id?: string | null, locale?: string | null, name?: string | null } | null } | null> | null } | null> | null } | null };
+
+export const GetNavigatorPageDocument = gql`
+    query getNavigatorPage($entity: NavigatorPageEntityInput) {
+  getNavigatorPage(entity: $entity) {
+    id
+    modified
+    created
+    slug
+    title
+    additionalInformation
+    translatables {
+      id
+      additionalInformation
+      title
+      language {
+        id
+        locale
+        name
+      }
+    }
+    choices {
+      id
+      description
+      name
+      parent {
+        id
+        slug
+      }
+      nextPage {
+        id
+        slug
+      }
+      translatables {
+        id
+        name
+        description
+        language {
+          id
+          locale
+          name
+        }
+      }
+    }
+    parentChoices {
+      id
+      translatables {
+        id
+        name
+        language {
+          id
+          locale
+          name
+        }
+      }
+    }
+    links {
+      id
+      name
+      url
+      translatables {
+        id
+        name
+        language {
+          id
+          locale
+          name
+        }
+      }
+    }
+  }
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class GetNavigatorPageGQL extends Apollo.Query<GetNavigatorPageQuery, GetNavigatorPageQueryVariables> {
+    override document = GetNavigatorPageDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/features/navigator/api/generated/get-navigator-start-page.query.generated.ts b/src/app/features/navigator/api/generated/get-navigator-start-page.query.generated.ts
new file mode 100644
index 000000000..3ed457362
--- /dev/null
+++ b/src/app/features/navigator/api/generated/get-navigator-start-page.query.generated.ts
@@ -0,0 +1,67 @@
+/* eslint-disable */
+import * as Types from '../../../../core/api/generated/schema';
+
+import { gql } from 'apollo-angular';
+import { Injectable } from '@angular/core';
+import * as Apollo from 'apollo-angular';
+export type GetNavigatorStartPageQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type GetNavigatorStartPageQuery = { __typename?: 'Query', getNavigatorStartPage?: { __typename?: 'NavigatorPageEntity', id?: string | null, modified?: any | null, created?: any | null, slug?: string | null, title?: string | null, additionalInformation?: string | null, isResultPage?: boolean | null, choices?: Array<{ __typename?: 'NavigatorChoiceEntity', id?: string | null, description?: string | null, name?: string | null, nextPage?: { __typename?: 'NavigatorPageEntity', id?: string | null, slug?: string | null } | null, translatables?: Array<{ __typename?: 'NavigatorChoiceTranslatableEntity', id?: string | null, name?: string | null, description?: string | null, language?: { __typename?: 'LanguageEntity', id?: string | null, locale?: string | null, name?: string | null } | null } | null> | null } | null> | null, parentChoices?: Array<{ __typename?: 'NavigatorChoiceEntity', id?: string | null } | null> | null, translatables?: Array<{ __typename?: 'NavigatorPageTranslatableEntity', id?: string | null, additionalInformation?: string | null, title?: string | null, language?: { __typename?: 'LanguageEntity', id?: string | null, locale?: string | null, name?: string | null } | null } | null> | null } | null };
+
+export const GetNavigatorStartPageDocument = gql`
+    query getNavigatorStartPage {
+  getNavigatorStartPage {
+    id
+    modified
+    created
+    slug
+    title
+    additionalInformation
+    isResultPage
+    choices {
+      id
+      description
+      name
+      nextPage {
+        id
+        slug
+      }
+      translatables {
+        id
+        name
+        description
+        language {
+          id
+          locale
+          name
+        }
+      }
+    }
+    parentChoices {
+      id
+    }
+    translatables {
+      id
+      additionalInformation
+      title
+      language {
+        id
+        locale
+        name
+      }
+    }
+  }
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class GetNavigatorStartPageGQL extends Apollo.Query<GetNavigatorStartPageQuery, GetNavigatorStartPageQueryVariables> {
+    override document = GetNavigatorStartPageDocument;
+    
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/constants/navigator-details.constant.ts b/src/app/features/navigator/portal/details/constants/navigator-details.constant.ts
new file mode 100644
index 000000000..7e445eec4
--- /dev/null
+++ b/src/app/features/navigator/portal/details/constants/navigator-details.constant.ts
@@ -0,0 +1,2 @@
+export const navigatorStartRoute = 'start';
+export const navigatorResultRoute = 'result';
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.component.html b/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.component.html
new file mode 100644
index 000000000..22c7e76a0
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.component.html
@@ -0,0 +1,15 @@
+<header>
+  <img src="assets/navigator-choose.svg" alt="hero-section">
+  <section>
+    <div>
+      <cin-page-title titleLabel="navigator"></cin-page-title>
+
+      <p i18nLabel="navigatorDescription"></p>
+    
+      <app-gradient-button 
+        url="/portal/navigator/start"
+        [label]="'Los gehts'">
+      </app-gradient-button>
+    </div>
+  </section>
+</header>
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.component.scss b/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.component.scss
new file mode 100644
index 000000000..1d9eb1072
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.component.scss
@@ -0,0 +1,51 @@
+@import 'ngx-cinlib/styles/mobile-mixins.scss';
+
+header {
+  display: flex;
+  justify-content: center;
+  min-height: 80vh;
+  gap: 5rem;
+  flex-flow: row-reverse;
+
+  img {
+    max-width: 40%;
+    @include responsive(phone) {
+      display: none;
+    }
+  }
+
+  cin-page-title{
+    width: min-content;
+  }
+
+  section {
+    display: flex;
+    align-self: center;
+    justify-content: center;
+
+    div {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+    }
+
+    app-gradient-button {
+      width: fit-content;
+    }
+
+    p {
+      color: var(--color-dark-gray);
+      font-size: 1.25rem;
+      font-weight: 500;
+      line-height: 1.5;
+      max-width: 35vw;
+      overflow-wrap: break-word;
+      hyphens: auto;
+      -webkit-hyphens: auto;
+
+      @include responsive(phone) {
+        max-width: 90vw;
+      }
+    }
+  }
+}
diff --git a/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.component.ts b/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.component.ts
new file mode 100644
index 000000000..3ec1fbad3
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-navigator-portal-details-landing',
+  templateUrl: './navigator-portal-details-landing.component.html',
+  styleUrls: ['./navigator-portal-details-landing.component.scss']
+})
+export class NavigatorPortalDetailsLandingComponent {
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.module.ts b/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.module.ts
new file mode 100644
index 000000000..ee6ff45dc
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/landing/navigator-portal-details-landing.module.ts
@@ -0,0 +1,52 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { RouterModule } from '@angular/router';
+import { RadioCardGroupComponent } from 'ngx-cinlib/forms/radio-card';
+import { I18nDirective, TranslatablePipe } from 'ngx-cinlib/i18n';
+import { IconComponent } from 'ngx-cinlib/icons';
+import { PageTitleComponent, SubTitleComponent } from 'ngx-cinlib/layouts/title';
+import { CoreModule } from 'src/app/core/core.module';
+import { GradientButtonComponent } from 'src/app/shared/widgets/gradient-button/gradient-button.component';
+import { NavigatorPortalDetailsLandingComponent } from './navigator-portal-details-landing.component';
+
+const components = [
+  NavigatorPortalDetailsLandingComponent,
+]
+
+const framework = [
+  CommonModule,
+  RouterModule,
+];
+
+const materials = [
+  MatButtonModule,
+  MatCardModule,
+];
+
+const modules = [
+  CoreModule,
+];
+
+const libs = [
+  GradientButtonComponent,
+  IconComponent,
+  I18nDirective,
+  PageTitleComponent,
+  SubTitleComponent,
+  RadioCardGroupComponent,
+  TranslatablePipe,
+];
+
+@NgModule({
+  declarations: [...components],
+  imports: [
+    ...framework,
+    ...libs,
+    ...materials,
+    ...modules,
+  ],
+  exports: [...components],
+})
+export class NavigatorPortalDetailsLandingModule { }
diff --git a/src/app/features/navigator/portal/details/modules/layout/components/choice/navigator-portal-details-layout-choice.component.html b/src/app/features/navigator/portal/details/modules/layout/components/choice/navigator-portal-details-layout-choice.component.html
new file mode 100644
index 000000000..b8ea9c1af
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/components/choice/navigator-portal-details-layout-choice.component.html
@@ -0,0 +1,10 @@
+<app-gradient-button 
+  [name]="choice | translatable : 'name' | async"
+  (click)="toNewPage(choice)"
+  [description]="choice | translatable : 'description' | async">
+</app-gradient-button>
+
+  
+
+
+
diff --git a/src/app/features/navigator/portal/details/modules/layout/components/choice/navigator-portal-details-layout-choice.component.scss b/src/app/features/navigator/portal/details/modules/layout/components/choice/navigator-portal-details-layout-choice.component.scss
new file mode 100644
index 000000000..bb53f5a2c
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/components/choice/navigator-portal-details-layout-choice.component.scss
@@ -0,0 +1,4 @@
+app-gradient-button {
+  width: 100%;
+}
+
diff --git a/src/app/features/navigator/portal/details/modules/layout/components/choice/navigator-portal-details-layout-choice.component.ts b/src/app/features/navigator/portal/details/modules/layout/components/choice/navigator-portal-details-layout-choice.component.ts
new file mode 100644
index 000000000..474e939bb
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/components/choice/navigator-portal-details-layout-choice.component.ts
@@ -0,0 +1,51 @@
+import { Component, Input } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { RadioCardInput } from 'ngx-cinlib/forms/radio-card';
+import { TranslationService } from 'ngx-cinlib/i18n';
+import { Maybe, NavigatorChoiceEntity } from 'src/app/core/api/generated/schema';
+import { navigatorFeatureKey } from 'src/app/core/constants/feature.constants';
+import { portalUrl } from 'src/app/core/constants/module.constants';
+import { navigatorStartRoute } from '../../../../constants/navigator-details.constant';
+import { NavigatorPortalDetailsLayoutActions } from '../../state/navigator-portal-details-layout.actions';
+import { selectNavigatorStateInputs } from '../../state/navigator-portal-details-layout.selectors';
+
+@Component({
+  selector: 'app-navigator-portal-details-layout-choice',
+  templateUrl: './navigator-portal-details-layout-choice.component.html',
+  styleUrls: ['./navigator-portal-details-layout-choice.component.scss'],
+})
+export class NavigatorPortalDetailsLayoutChoiceComponent {
+
+  @Input()
+  public choice?: Maybe<NavigatorChoiceEntity>;
+
+  private inputs: RadioCardInput[] = [];
+
+  public showDescription = false;
+  
+  constructor(
+    private router: Router,
+    private store: Store,
+    private translationService: TranslationService) { }
+
+  public toNewPage(choice: Maybe<NavigatorChoiceEntity>){
+    var choiceName: Maybe<string>;
+    this.translationService.translatable(choice?.translatables, 'name').subscribe(name => choiceName = name);
+
+    this.store.select(selectNavigatorStateInputs).subscribe(inputs => {
+      this.inputs = inputs.slice(0, (inputs.findIndex(input => input.value == (choice?.parent?.slug ?? '')) + 1));
+    });
+
+    this.inputs = [...this.inputs, {
+        display: (this.inputs.length + 1).toString(),
+        label: choiceName ?? '',
+        value: choice?.nextPage?.slug,
+      }];
+
+    this.store.dispatch(NavigatorPortalDetailsLayoutActions
+      .setNavigatorState(this.inputs, this.inputs.length));
+
+    this.router.navigate([portalUrl, navigatorFeatureKey, navigatorStartRoute, choice?.nextPage?.slug]);
+  }
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/modules/layout/components/navigator-portal-details-layout.component.html b/src/app/features/navigator/portal/details/modules/layout/components/navigator-portal-details-layout.component.html
new file mode 100644
index 000000000..1bd020e9f
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/components/navigator-portal-details-layout.component.html
@@ -0,0 +1,10 @@
+<cin-radio-card-group
+  [value]="initValue"
+  [inputs]="inputs"
+  (valueChanged)="route($event)">
+</cin-radio-card-group>
+
+<app-navigator-portal-details-layout-page [page]="currentPage">
+</app-navigator-portal-details-layout-page>
+
+
diff --git a/src/app/features/navigator/portal/details/modules/layout/components/navigator-portal-details-layout.component.scss b/src/app/features/navigator/portal/details/modules/layout/components/navigator-portal-details-layout.component.scss
new file mode 100644
index 000000000..fb1d5aede
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/components/navigator-portal-details-layout.component.scss
@@ -0,0 +1,22 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  margin: var(--gap) auto;
+}
+
+cin-radio-card-group {
+  max-width: calc(100% - var(--gap));
+  margin: var(--gap) auto;
+}
+
+::ng-deep cin-radio-card-group cin-radio-card {
+  margin: auto; 
+}
+
+
+app-navigator-portal-details-layout-page {
+  width: 40rem;
+  max-width: calc(100% - var(--gap));
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/modules/layout/components/navigator-portal-details-layout.component.ts b/src/app/features/navigator/portal/details/modules/layout/components/navigator-portal-details-layout.component.ts
new file mode 100644
index 000000000..611af5789
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/components/navigator-portal-details-layout.component.ts
@@ -0,0 +1,64 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { RadioCardInput } from 'ngx-cinlib/forms/radio-card';
+import { Subject, filter, switchMap } from 'rxjs';
+import { Maybe, NavigatorPageEntity } from 'src/app/core/api/generated/schema';
+import { navigatorFeatureKey } from 'src/app/core/constants/feature.constants';
+import { portalUrl } from 'src/app/core/constants/module.constants';
+import { slug } from 'src/app/core/constants/queryparam.constants';
+import { navigatorStartRoute } from '../../../constants/navigator-details.constant';
+import { NavigatorPortalDetailsLayoutActions } from '../state/navigator-portal-details-layout.actions';
+import { selectCurrentPage, selectNavigatorStateInputs } from '../state/navigator-portal-details-layout.selectors';
+
+@Component({
+  selector: 'app-navigator-portal-details-layout',
+  templateUrl: './navigator-portal-details-layout.component.html',
+  styleUrls: ['./navigator-portal-details-layout.component.scss'],
+})
+export class NavigatorPortalDetailsLayoutComponent implements OnInit, OnDestroy {
+
+  public currentPage?: Maybe<NavigatorPageEntity>;
+
+  private destroy = new Subject<void>();
+
+  public inputs: RadioCardInput[] = [];
+
+  public initValue = '';
+
+  public showDescription: number | null = null;
+
+  toggleDescription(index: number) {
+    this.showDescription = this.showDescription === index ? null : index;
+  }
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private router: Router,
+    private store: Store) {}
+
+    public ngOnInit(): void {
+      this.activatedRoute?.params.pipe(
+        switchMap(params => {
+          const action = params[slug]
+            ? NavigatorPortalDetailsLayoutActions.getPage(params[slug])
+            : NavigatorPortalDetailsLayoutActions.getStartPage();
+          this.store.dispatch(action);
+          return this.store.select(selectCurrentPage);
+        }),
+        filter(page => !!page),
+      ).subscribe(page => {
+        this.currentPage = page; 
+        this.initValue = (page?.parentChoices?.length ?? 0)  > 0 ? page?.slug! : ''});
+        this.store.select(selectNavigatorStateInputs).subscribe(inputs => this.inputs = inputs);
+    }
+
+  public route(route: string | null): void {
+    this.router.navigate([portalUrl, navigatorFeatureKey, navigatorStartRoute, route]);
+  }
+  
+  public ngOnDestroy(): void {
+    this.destroy.next();
+    this.destroy.complete();
+  }
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/modules/layout/components/page/navigator-portal-details-layout-page.component.html b/src/app/features/navigator/portal/details/modules/layout/components/page/navigator-portal-details-layout-page.component.html
new file mode 100644
index 000000000..312d827de
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/components/page/navigator-portal-details-layout-page.component.html
@@ -0,0 +1,31 @@
+<cin-details-title 
+  [title]="page | translatable : 'title' | async">
+</cin-details-title>
+
+@if (page?.choices){ 
+  <section>
+    @for (choice of page?.choices; track choice; let index = $index) {
+      <app-navigator-portal-details-layout-choice [choice]="choice">
+      </app-navigator-portal-details-layout-choice>
+    }
+  </section>
+}
+
+@if (page?.links){
+  @for (link of page?.links; track link) {
+  <app-gradient-button 
+    [url]="link?.url"
+    [name]="link | translatable : 'name' | async"
+    [icon]="['fas', 'arrow-right']"
+    [openNewTab]="true">
+  </app-gradient-button>
+  }
+}
+
+@if (page | translatable: 'additionalInformation' | async) {
+  <div class="border-box">
+    {{ (page | translatable: 'additionalInformation' | async) }}
+  </div>  
+}
+
+
diff --git a/src/app/features/navigator/portal/details/modules/layout/components/page/navigator-portal-details-layout-page.component.scss b/src/app/features/navigator/portal/details/modules/layout/components/page/navigator-portal-details-layout-page.component.scss
new file mode 100644
index 000000000..d2848bbd9
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/components/page/navigator-portal-details-layout-page.component.scss
@@ -0,0 +1,29 @@
+:host{
+  display: flex;
+  gap: 3rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+
+  section {
+    display: flex;
+    gap: 1rem;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    span{
+      width: 100% !important;
+    }
+
+    app-navigator-portal-details-layout-choice {
+      width: 100%;
+    }
+  }
+
+  a {
+    background-color: var(--color-primary-200);
+  }
+}
+
diff --git a/src/app/features/navigator/portal/details/modules/layout/components/page/navigator-portal-details-layout-page.component.ts b/src/app/features/navigator/portal/details/modules/layout/components/page/navigator-portal-details-layout-page.component.ts
new file mode 100644
index 000000000..c6b4f6ab4
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/components/page/navigator-portal-details-layout-page.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Maybe, NavigatorPageEntity } from 'src/app/core/api/generated/schema';
+
+@Component({
+  selector: 'app-navigator-portal-details-layout-page',
+  templateUrl: './navigator-portal-details-layout-page.component.html',
+  styleUrls: ['./navigator-portal-details-layout-page.component.scss'],
+})
+export class NavigatorPortalDetailsLayoutPageComponent implements OnInit {
+
+  @Input()
+  public page?: Maybe<NavigatorPageEntity>;
+
+  constructor() { }
+  ngOnInit(): void {
+  }
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/modules/layout/constants/navigator-portal-details-layout.constants.ts b/src/app/features/navigator/portal/details/modules/layout/constants/navigator-portal-details-layout.constants.ts
new file mode 100644
index 000000000..066033273
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/constants/navigator-portal-details-layout.constants.ts
@@ -0,0 +1 @@
+export const navigatorPortalDetailsLayoutStateKey = 'navigatorPortalDetailsLayoutState';
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/modules/layout/navigator-guard/page-refresh-guard.service.ts b/src/app/features/navigator/portal/details/modules/layout/navigator-guard/page-refresh-guard.service.ts
new file mode 100644
index 000000000..0321b6a0f
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/navigator-guard/page-refresh-guard.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Observable, map, tap } from 'rxjs';
+import { navigatorFeatureKey } from 'src/app/core/constants/feature.constants';
+import { portalUrl } from 'src/app/core/constants/module.constants';
+import { navigatorStartRoute } from '../../../constants/navigator-details.constant';
+import { selectNavigatorStateInputs } from '../state/navigator-portal-details-layout.selectors';
+
+//TODO: replace with function isAuthenticated in privileges.utils.ts
+@Injectable({
+  providedIn: 'root'
+})
+export class NavigatorRefreshGuard {
+
+  constructor(private store: Store, private router: Router) {}
+
+  canActivate(): Observable<boolean> {
+    return this.store.select(selectNavigatorStateInputs).pipe(
+      map(inputs => inputs.length > 1),
+      tap(canActivate => {
+        if (!canActivate) {
+          this.router.navigate([portalUrl, navigatorFeatureKey, navigatorStartRoute]);
+        }
+      })
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/modules/layout/navigator-portal-details-layout.module.ts b/src/app/features/navigator/portal/details/modules/layout/navigator-portal-details-layout.module.ts
new file mode 100644
index 000000000..9f3bee351
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/navigator-portal-details-layout.module.ts
@@ -0,0 +1,65 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { RouterModule } from '@angular/router';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreModule } from '@ngrx/store';
+import { RadioCardGroupComponent } from 'ngx-cinlib/forms/radio-card';
+import { I18nDirective, TranslatablePipe } from 'ngx-cinlib/i18n';
+import { IconComponent } from 'ngx-cinlib/icons';
+import { DetailsTitleComponent } from 'ngx-cinlib/layouts/title';
+import { CoreModule } from 'src/app/core/core.module';
+import { GradientButtonComponent } from 'src/app/shared/widgets/gradient-button/gradient-button.component';
+import { NavigatorPortalDetailsLayoutChoiceComponent } from './components/choice/navigator-portal-details-layout-choice.component';
+import { NavigatorPortalDetailsLayoutComponent } from './components/navigator-portal-details-layout.component';
+import { NavigatorPortalDetailsLayoutPageComponent } from './components/page/navigator-portal-details-layout-page.component';
+import { navigatorPortalDetailsLayoutStateKey } from './constants/navigator-portal-details-layout.constants';
+import { NavigatorPortalDetailsLayoutEffects } from './state/navigator-portal-details-layout.effects';
+import { navigatorAdminDetailsLayoutReducer } from './state/navigator-portal-details-layout.reducer';
+
+const components = [
+  NavigatorPortalDetailsLayoutComponent,
+  NavigatorPortalDetailsLayoutPageComponent,
+  NavigatorPortalDetailsLayoutChoiceComponent,
+]
+
+const framework = [
+  CommonModule,
+  RouterModule,
+];
+
+const materials = [
+  MatButtonModule,
+  MatCardModule,
+  MatExpansionModule
+];
+
+const modules = [
+  CoreModule,
+];
+
+const libs = [
+  StoreModule.forFeature(navigatorPortalDetailsLayoutStateKey, navigatorAdminDetailsLayoutReducer),
+  EffectsModule.forFeature([NavigatorPortalDetailsLayoutEffects]),
+  
+  GradientButtonComponent,
+  IconComponent,
+  I18nDirective,
+  DetailsTitleComponent,
+  RadioCardGroupComponent,
+  TranslatablePipe,
+];
+
+@NgModule({
+  declarations: [...components],
+  imports: [
+    ...framework,
+    ...libs,
+    ...materials,
+    ...modules,
+  ],
+  exports: [...components],
+})
+export class NavigatorPortalDetailsLayoutModule { }
diff --git a/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.actions.ts b/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.actions.ts
new file mode 100644
index 000000000..9fda3d73b
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.actions.ts
@@ -0,0 +1,16 @@
+import { createActionGroup, emptyProps } from '@ngrx/store';
+import { RadioCardInput } from 'ngx-cinlib/forms/radio-card';
+import { Maybe, NavigatorPageEntity } from 'src/app/core/api/generated/schema';
+
+export const NavigatorPortalDetailsLayoutActions = createActionGroup({
+  source: 'Navigator Portal Details Layout',
+  events: {
+    'get start page': emptyProps(),
+    'set start page': (startPage: Maybe<NavigatorPageEntity>) => ({ startPage }),
+
+    'get page': (slug: Maybe<string>) => ({ slug }),
+    'set page': (page: Maybe<NavigatorPageEntity>) => ({ page }),
+
+    'set navigator state': (inputs: RadioCardInput[], currentIndex: number) => ({ inputs, currentIndex })
+  }
+});
diff --git a/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.effects.ts b/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.effects.ts
new file mode 100644
index 000000000..26f12a0ad
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.effects.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { filter, map, switchMap } from 'rxjs';
+import { AdminActions } from 'src/app/admin/state/admin.actions';
+import { NavigatorPageEntity } from 'src/app/core/api/generated/schema';
+import { GetNavigatorPageGQL } from 'src/app/features/navigator/api/generated/get-navigator-page.query.generated';
+import { GetNavigatorStartPageGQL } from 'src/app/features/navigator/api/generated/get-navigator-start-page.query.generated';
+import { NavigatorPortalDetailsLayoutActions } from './navigator-portal-details-layout.actions';
+
+@Injectable()
+export class NavigatorPortalDetailsLayoutEffects {
+  
+  getStartPage = createEffect(() => this.actions.pipe(
+    ofType(NavigatorPortalDetailsLayoutActions.getStartPage),
+    switchMap( () => this.getNavigatorStartPageService.watch().valueChanges),
+    filter(response => !!response.data.getNavigatorStartPage?.id),
+    map(response => NavigatorPortalDetailsLayoutActions.setStartPage(response.data.getNavigatorStartPage as NavigatorPageEntity))
+    ));
+    
+  getPage = createEffect(() => this.actions.pipe(
+    ofType(NavigatorPortalDetailsLayoutActions.getPage),
+     switchMap((action) => this.getNavigatorPageService.watch({
+       entity: {
+        slug: action.slug
+      }
+    }).valueChanges),
+    map(response => response.data.getNavigatorPage?.id
+       ? NavigatorPortalDetailsLayoutActions.setPage(response.data.getNavigatorPage as NavigatorPageEntity)
+       : AdminActions.notFound())
+   ));
+
+  constructor(
+    private actions: Actions,
+    private getNavigatorStartPageService: GetNavigatorStartPageGQL,
+    private getNavigatorPageService: GetNavigatorPageGQL
+
+  ) {}
+}
diff --git a/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.reducer.ts b/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.reducer.ts
new file mode 100644
index 000000000..5f99db12c
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.reducer.ts
@@ -0,0 +1,50 @@
+import { createReducer, on } from '@ngrx/store';
+
+import { RadioCardInput } from 'ngx-cinlib/forms/radio-card';
+import { Maybe, NavigatorPageEntity } from 'src/app/core/api/generated/schema';
+import { NavigatorPortalDetailsLayoutActions } from './navigator-portal-details-layout.actions';
+
+export interface NavigatorPortalDetailsLayoutState {
+  currentPage?: Maybe<NavigatorPageEntity>;
+  inputs: RadioCardInput[];
+  currentIndex: number;
+}
+
+export const initialState: NavigatorPortalDetailsLayoutState = {
+  inputs: [
+    {
+      display: '1',
+      label: 'Start',
+      value: ''
+    }
+  ],
+  currentIndex: 0
+};
+
+export const navigatorAdminDetailsLayoutReducer = createReducer(
+  initialState,
+
+  on(
+    NavigatorPortalDetailsLayoutActions.setStartPage,
+    (state, action): NavigatorPortalDetailsLayoutState => ({
+      ...state, currentPage: action.startPage
+    })),
+
+  on(
+     NavigatorPortalDetailsLayoutActions.setPage,
+     (state, action): NavigatorPortalDetailsLayoutState => ({
+       ...state, currentPage: action.page
+     })),
+
+  on(
+   NavigatorPortalDetailsLayoutActions.setNavigatorState,
+     (state, action): NavigatorPortalDetailsLayoutState => ({
+      ...state, inputs: action.inputs
+     })),
+
+  on(
+    NavigatorPortalDetailsLayoutActions.setNavigatorState,
+     (state, action): NavigatorPortalDetailsLayoutState => ({
+       ...state, currentIndex: action.currentIndex
+    })),      
+);
diff --git a/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.selectors.ts b/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.selectors.ts
new file mode 100644
index 000000000..a6e09457b
--- /dev/null
+++ b/src/app/features/navigator/portal/details/modules/layout/state/navigator-portal-details-layout.selectors.ts
@@ -0,0 +1,20 @@
+import { createFeatureSelector, createSelector } from '@ngrx/store';
+import { navigatorPortalDetailsLayoutStateKey } from '../constants/navigator-portal-details-layout.constants';
+import { NavigatorPortalDetailsLayoutState } from './navigator-portal-details-layout.reducer';
+
+export const selectNavigatorPortalDetailsLayoutState = createFeatureSelector<NavigatorPortalDetailsLayoutState>(navigatorPortalDetailsLayoutStateKey);
+
+export const selectCurrentPage = createSelector(
+  selectNavigatorPortalDetailsLayoutState,
+  state => state.currentPage
+);
+
+export const selectNavigatorStateInputs = createSelector(
+  selectNavigatorPortalDetailsLayoutState,
+  state => state.inputs
+);
+
+export const selectNavigatorStateIndex = createSelector(
+  selectNavigatorPortalDetailsLayoutState,
+  state => state.currentIndex
+);
\ No newline at end of file
diff --git a/src/app/features/navigator/portal/details/navigator-portal-details-routing.module.ts b/src/app/features/navigator/portal/details/navigator-portal-details-routing.module.ts
new file mode 100644
index 000000000..56c2c6aa8
--- /dev/null
+++ b/src/app/features/navigator/portal/details/navigator-portal-details-routing.module.ts
@@ -0,0 +1,43 @@
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { slug } from 'src/app/core/constants/queryparam.constants';
+import { NavigatorRefreshGuard } from 'src/app/features/navigator/portal/details/modules/layout/navigator-guard/page-refresh-guard.service';
+import { navigatorResultRoute, navigatorStartRoute } from './constants/navigator-details.constant';
+import { NavigatorPortalDetailsLandingComponent } from './modules/landing/navigator-portal-details-landing.component';
+import { NavigatorPortalDetailsLayoutComponent } from './modules/layout/components/navigator-portal-details-layout.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () => import('./modules/landing/navigator-portal-details-landing.module')
+      .then((imported) => imported.NavigatorPortalDetailsLandingModule),
+      component: NavigatorPortalDetailsLandingComponent
+  },
+  {
+    path: navigatorStartRoute,
+    loadChildren: () => import('./modules/layout/navigator-portal-details-layout.module')
+      .then((imported) => imported.NavigatorPortalDetailsLayoutModule),
+      component: NavigatorPortalDetailsLayoutComponent
+  },
+  {
+    path: `${navigatorStartRoute}/:${slug}`,
+    loadChildren: () => import('./modules/layout/navigator-portal-details-layout.module')
+      .then((imported) => imported.NavigatorPortalDetailsLayoutModule),
+      component: NavigatorPortalDetailsLayoutComponent,
+      canActivate: [NavigatorRefreshGuard]
+  },
+  {
+    path: `${navigatorResultRoute}/:${slug}`,
+    loadChildren: () => import('./modules/layout/navigator-portal-details-layout.module')
+      .then((imported) => imported.NavigatorPortalDetailsLayoutModule),
+      component: NavigatorPortalDetailsLayoutComponent,
+      canActivate: [NavigatorRefreshGuard]
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class NavigatorPortalDetailsRoutingModule { }
diff --git a/src/app/features/navigator/portal/details/navigator-portal-details.module.ts b/src/app/features/navigator/portal/details/navigator-portal-details.module.ts
new file mode 100644
index 000000000..606273425
--- /dev/null
+++ b/src/app/features/navigator/portal/details/navigator-portal-details.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { NavigatorPortalDetailsRoutingModule } from './navigator-portal-details-routing.module';
+
+const modules = [NavigatorPortalDetailsRoutingModule];
+
+@NgModule({
+  imports: [...modules],
+  exports: [],
+})
+export class NavigatorPortalDetailsModule {}
diff --git a/src/app/features/navigator/portal/navigator-portal-routing.module.ts b/src/app/features/navigator/portal/navigator-portal-routing.module.ts
new file mode 100644
index 000000000..929c6642c
--- /dev/null
+++ b/src/app/features/navigator/portal/navigator-portal-routing.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { navigatorFeatureKey } from 'src/app/core/constants/feature.constants';
+
+const routes: Routes = [
+  // {
+  //   path: navigatorFeatureKey,
+  //   loadChildren: () => import('src/app/features/navigator/portal/details/navigator-portal-details.module')
+  //     .then((imported) => imported.NavigatorPortalDetailsModule),
+  // },
+  {
+    path: navigatorFeatureKey,
+    loadChildren: () => import('src/app/features/navigator/portal/details/navigator-portal-details.module')
+      .then((imported) => imported.NavigatorPortalDetailsModule),
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NavigatorPortalRoutingModule { }
diff --git a/src/app/portal/modules/embedding/components/hero/portal-page-embedding-hero.component.html b/src/app/portal/modules/embedding/components/hero/portal-page-embedding-hero.component.html
index 6fe6a2989..93cfea9f0 100644
--- a/src/app/portal/modules/embedding/components/hero/portal-page-embedding-hero.component.html
+++ b/src/app/portal/modules/embedding/components/hero/portal-page-embedding-hero.component.html
@@ -11,12 +11,12 @@
       <p [innerHTML]="element?.text | translatable: 'translatable' | async"></p>
 
       @if (element?.url) {
-        <a mat-raised-button
-          [href]="element?.url?.value"
-          [i18nLabel]="element?.button
-            ? (element?.button | translatable: 'translatable' | async)
-            : 'learnMore'">
-        </a>
+        <app-gradient-button 
+          [url]="element?.url?.value"
+          [label]="element?.button
+          ? (element?.button | translatable: 'translatable' | async)
+          : 'learnMore'">
+        </app-gradient-button>
       }
     </div>
   </section>
diff --git a/src/app/portal/modules/embedding/components/hero/portal-page-embedding-hero.component.scss b/src/app/portal/modules/embedding/components/hero/portal-page-embedding-hero.component.scss
index beb42e42b..2a28935b1 100644
--- a/src/app/portal/modules/embedding/components/hero/portal-page-embedding-hero.component.scss
+++ b/src/app/portal/modules/embedding/components/hero/portal-page-embedding-hero.component.scss
@@ -42,24 +42,8 @@ header {
       gap: var(--gap);
     }
 
-    a {
-      padding: 1.75rem;
+    app-gradient-button {
       width: fit-content;
-      color: var(--color-primary-contrast-900);
-      background-image: linear-gradient(45deg,
-        var(--color-primary-900),
-        var(--color-primary-700),
-        var(--color-primary-500),
-        var(--color-accent-500),
-        var(--color-accent-700),
-        var(--color-accent-900));
-      background-size: 300%;
-      background-position: left;
-      transition: background-position .5s;
-    }
-
-    a:hover {
-      background-position: right;
     }
 
     p {
diff --git a/src/app/portal/modules/embedding/portal-page-embedding.module.ts b/src/app/portal/modules/embedding/portal-page-embedding.module.ts
index 4c5f10fe1..3606bbdf6 100644
--- a/src/app/portal/modules/embedding/portal-page-embedding.module.ts
+++ b/src/app/portal/modules/embedding/portal-page-embedding.module.ts
@@ -18,6 +18,7 @@ import { MediaEmbeddingModule } from 'src/app/features/media/embedding/media-emb
 import { OrganisationEmbeddingModule } from 'src/app/features/organisation/embedding/organisation-embedding.module';
 import { ReportEmbeddingModule } from 'src/app/features/report/embedding/report-embedding.module';
 import { SurveyEmbeddingModule } from 'src/app/features/survey/embedding/survey-embedding.module';
+import { GradientButtonComponent } from 'src/app/shared/widgets/gradient-button/gradient-button.component';
 import { PortalPageEmbeddingBannerComponent } from './components/banner/portal-page-embedding-banner.component';
 import { PortalPageEmbeddingBoxComponent } from './components/box/portal-page-embedding-box.component';
 import { PortalPageEmbeddingExpansionComponent } from './components/expansion/portal-page-embedding-expansion.component';
@@ -44,6 +45,7 @@ const framework = [
 ];
 
 const libs = [
+  GradientButtonComponent,
   I18nDirective,
   MediaElementComponent,
   MediaSliderComponent,
diff --git a/src/app/portal/portal.module.ts b/src/app/portal/portal.module.ts
index b60a4a5f4..b3523dd49 100644
--- a/src/app/portal/portal.module.ts
+++ b/src/app/portal/portal.module.ts
@@ -14,6 +14,7 @@ import { EventPortalRoutingModule } from '../features/event/portal/event-portal-
 import { GuestArticlePortalRoutingModule } from '../features/guest-article/portal/guest-article-portal-routing.module';
 import { MapPortalRoutingModule } from '../features/map/portal/map-portal-routing.module';
 import { MediaPortalRoutingModule } from '../features/media/portal/media-portal-routing.module';
+import { NavigatorPortalRoutingModule } from '../features/navigator/portal/navigator-portal-routing.module';
 import { OrganisationPortalRoutingModule } from '../features/organisation/portal/organisation-portal-routing.module';
 import { ReportPortalRoutingModule } from '../features/report/portal/report-portal-routing.module';
 import { SurveyPortalRoutingModule } from '../features/survey/portal/survey-portal-routing.module';
@@ -41,6 +42,7 @@ const routes = [
   GuestArticlePortalRoutingModule,
   MapPortalRoutingModule,
   MediaPortalRoutingModule,
+  NavigatorPortalRoutingModule,
   OrganisationPortalRoutingModule,
   ReportPortalRoutingModule,
   SurveyPortalRoutingModule,
diff --git a/src/app/shared/widgets/gradient-button/gradient-button.component.html b/src/app/shared/widgets/gradient-button/gradient-button.component.html
new file mode 100644
index 000000000..1c31e3eff
--- /dev/null
+++ b/src/app/shared/widgets/gradient-button/gradient-button.component.html
@@ -0,0 +1,32 @@
+@if (url) {
+  <a mat-raised-button [href]="url" [target]="openNewTab ? '_blank' : ''" [i18nLabel]="label ? label : null">
+    {{ name }}
+    @if(description){
+      <button (click)="showDescription = !showDescription; $event.stopPropagation()">
+        @if (!showDescription) { <cin-icon [icon]="['fas', 'chevron-down']"></cin-icon> }
+        @if (showDescription) { <cin-icon [icon]="['fas', 'chevron-up']"></cin-icon> }
+    </button> 
+  }
+    @if(icon) { <cin-icon [icon]="icon"></cin-icon> }
+  </a>
+  <div [@collapse]="showDescription">
+    <p>{{ description }}</p>
+  </div>
+}
+
+@if (!url) {
+  <a mat-raised-button [i18nLabel]="label ? label : null">
+    {{ name }}
+    @if(description){
+      <button (click)="showDescription = !showDescription; $event.stopPropagation()">
+        @if (!showDescription) { <cin-icon [icon]="['fas', 'chevron-down']"></cin-icon> }
+        @if (showDescription) { <cin-icon [icon]="['fas', 'chevron-up']"></cin-icon> }
+    </button> 
+  }
+    @if(icon) { <cin-icon [icon]="icon"></cin-icon> }
+  </a>
+
+  <div [@collapse]="showDescription">
+    <p>{{ description }}</p>
+  </div>
+}
diff --git a/src/app/shared/widgets/gradient-button/gradient-button.component.scss b/src/app/shared/widgets/gradient-button/gradient-button.component.scss
new file mode 100644
index 000000000..d30588129
--- /dev/null
+++ b/src/app/shared/widgets/gradient-button/gradient-button.component.scss
@@ -0,0 +1,56 @@
+a {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1.75rem;
+  background-image: linear-gradient(45deg,
+    var(--color-primary-900),
+    var(--color-primary-700),
+    var(--color-primary-500),
+    var(--color-accent-500),
+    var(--color-accent-700),
+    var(--color-accent-900));
+  background-size: 300%;
+  background-position: left;
+  transition: background-position .5s;
+}
+
+a:hover {
+  background-position: right;
+}
+
+button {
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+  border-radius: 5rem;
+  padding: .75rem;
+}
+
+button:hover {
+  background-color: var(--color-primary-500);
+}
+
+cin-icon {
+  color: var(--color-primary-contrast-900);
+}
+
+:host ::ng-deep {
+  .mdc-button__label {
+    color: var(--color-primary-contrast-900);
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: .5rem;
+  }
+}
+
+p {
+  padding: 1rem;
+  display: flex;
+  width: auto;
+  background-color: var(--color-primary-50);
+  border-radius: 0 0 var(--mdc-shape-small) var(--mdc-shape-small);
+  box-shadow: 0px 2px 8px 0px var(--color-box-shadow);
+}
\ No newline at end of file
diff --git a/src/app/shared/widgets/gradient-button/gradient-button.component.ts b/src/app/shared/widgets/gradient-button/gradient-button.component.ts
new file mode 100644
index 000000000..855c17e60
--- /dev/null
+++ b/src/app/shared/widgets/gradient-button/gradient-button.component.ts
@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { Maybe, collapse } from 'ngx-cinlib/core';
+import { I18nDirective } from 'ngx-cinlib/i18n';
+import { IconComponent, RegularIcon, SolidIcon } from 'ngx-cinlib/icons';
+import { CoreModule } from 'src/app/core/core.module';
+@Component({
+  selector: 'app-gradient-button',
+  templateUrl: './gradient-button.component.html',
+  styleUrls: ['./gradient-button.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    CoreModule,
+    I18nDirective,
+    MatButtonModule,
+    IconComponent    
+  ],
+  animations:[
+    collapse()
+  ]
+})
+export class GradientButtonComponent {
+
+  @Input()
+  public url?: Maybe<string>;
+  
+  @Input()
+  public label?: Maybe<string>;
+  
+  @Input()
+  public name?: Maybe<string>;
+  
+  @Input()
+  public description?: Maybe<string>;
+  
+  @Input()
+  public icon?: SolidIcon | RegularIcon;
+
+  @Input()
+  public openNewTab = false;
+  
+  public showDescription = false;
+
+}
\ No newline at end of file
diff --git a/src/assets/in-progress.svg b/src/assets/in-progress.svg
new file mode 100644
index 000000000..10ad4e81b
--- /dev/null
+++ b/src/assets/in-progress.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="967.97244" height="529" viewBox="0 0 967.97244 529" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M154.44233,692.271c26.42252,19.03478,60.66413,19.99056,93.76235,17.65213,4.62174-.32609,9.21077-.70874,13.75729-1.12157.02746-.00712.06353-.00458.09143-.01167.2185-.0208.43744-.04161.6465-.054.93841-.08779,1.87724-.1755,2.80685-.26387l-.2196.419-.68925,1.30024c.2477-.43517.49521-.86129.74291-1.29646.07285-.13062.15451-.26067.22693-.39138,8.57426-14.92076,17.07842-30.38965,19.24765-47.4275,2.24221-17.68452-4.05929-37.70924-19.62367-46.40124a31.40808,31.40808,0,0,0-6.4449-2.69923c-.93085-.28285-1.8743-.51228-2.82845-.71534A33.66447,33.66447,0,0,0,216.76908,655.022c-13.19581-13.53109-10.73425-35.482-6.18233-53.82747,4.56073-18.34493,10.08188-38.7585.80579-55.236-5.15643-9.17155-14.2243-14.86189-24.40066-17.15421-.31218-.06731-.62393-.13454-.93675-.19277a49.13015,49.13015,0,0,0-35.29737,6.1847c-19.45809,12.26176-29.452,35.51036-32.69561,58.28426C112.8361,629.72786,124.40143,670.62755,154.44233,692.271Z" transform="translate(-116.01378 -185.5)" fill="#f1f1f1"/><path d="M162.97318,633.5239a83.51853,83.51853,0,0,0,5.76411,23.53543A72.52018,72.52018,0,0,0,179.99707,675.451c9.49657,11.42369,22.05367,20.01238,35.691,25.73513a133.7282,133.7282,0,0,0,32.51657,8.737c4.62174-.32609,9.21077-.70874,13.75729-1.12157.02746-.00712.06353-.00458.09143-.01167.2185-.0208.43744-.04161.6465-.054.93841-.08779,1.87724-.1755,2.80685-.26387l-.2196.419-.68925,1.30024c.2477-.43517.49521-.86129.74291-1.29646.07285-.13062.15451-.26067.22693-.39138a73.92225,73.92225,0,0,1-20.71723-64.6648,74.55543,74.55543,0,0,1,13.89631-31.86317c-.93085-.28285-1.8743-.51228-2.82845-.71534a77.3,77.3,0,0,0-7.0511,11.67872,75.7417,75.7417,0,0,0-6.53473,47.11952,77.43753,77.43753,0,0,0,19.61965,38.62482c-.88275-.06222-1.77409-.1341-2.64633-.21369-16.52166-1.39976-33.00967-4.9516-47.995-12.22685a86.44054,86.44054,0,0,1-32.382-26.57c-9.07565-12.51653-13.07481-27.5721-13.7618-42.87405-.72844-16.38207,1.39716-33.05187,5.13582-48.9833a205.59724,205.59724,0,0,1,17.27595-47.05958,1.47818,1.47818,0,0,0-.58694-1.95143,1.25724,1.25724,0,0,0-.93675-.19277,1.09451,1.09451,0,0,0-.72256.619c-.94456,1.8435-1.87153,3.68824-2.76326,5.55359a207.93123,207.93123,0,0,0-16.2775,48.82276C163.00752,599.89618,161.25452,616.93624,162.97318,633.5239Z" transform="translate(-116.01378 -185.5)" fill="#fff"/><path d="M498.01378,714.5h-381a1,1,0,0,1,0-2h381a1,1,0,0,1,0,2Z" transform="translate(-116.01378 -185.5)" fill="#cbcbcb"/><path d="M383.64443,445.9675,366.417,361.55189l-7.56774-62.3493-16.76577,10.846,2.31606,68.709,26.75976,71.18916a9.32773,9.32773,0,1,0,12.48513-3.97927Z" transform="translate(-116.01378 -185.5)" fill="#ffb7b7"/><path d="M222.51709,452.49467l4.76864-86.02349-1.5795-62.787,22.16477,8.29264,3.70019,68.31545-16.123,74.32382a9.32774,9.32774,0,1,1-12.93108-2.12139Z" transform="translate(-116.01378 -185.5)" fill="#ffb7b7"/><polygon points="152.925 517.096 164.25 517.095 169.638 473.411 152.923 473.412 152.925 517.096" fill="#ffb7b7"/><path d="M266.04945,698.89831l22.3041-.00091h.00091a14.2147,14.2147,0,0,1,14.21392,14.2137v.4619l-36.51825.00135Z" transform="translate(-116.01378 -185.5)" fill="#2f2e41"/><polygon points="195.822 512.084 207.014 513.815 219.018 471.469 202.5 468.914 195.822 512.084" fill="#ffb7b7"/><path d="M309.54612,693.48825l22.042,3.40954.00089.00014a14.2147,14.2147,0,0,1,11.87341,16.22l-.07063.45646-36.089-5.58254Z" transform="translate(-116.01378 -185.5)" fill="#2f2e41"/><path d="M265.61172,689.55283l-.0587-.31681L224.55262,467.5608a83.73918,83.73918,0,0,1,7.39968-52.36494l24.81587-49.63139,74.0481,10.03176,8.73894,63.18874,31.14228,120.5417-.03084.09813-39.9,126.74124-26.14988,1.72,23.164-113.13449-42.41449-96.33649L288.358,687.8293Z" transform="translate(-116.01378 -185.5)" fill="#2f2e41"/><path d="M332.54,383.683l-.48871-.76574c-.08779-.13808-9.08238-13.68946-33.55867-4.64142-24.98636,9.23833-44.34706-8.60472-44.53981-8.7859l-.09585-.09042-5.65862-50.43534-6.68-40.94362,21.264-3.73059,10.45424-6.27209,41.57111-.74016,10.93945,8.604,17.96045,1.95729,1.64416,37.307-.00754.04065Z" transform="translate(-116.01378 -185.5)" fill="#6c63ff"/><path d="M338.49789,318.75458v-31.945l5.05057-9.21731.20537-.00631a15.14058,15.14058,0,0,1,10.46072,4.75287c5.08,5.1615,7.38128,13.761,6.84,25.55936l-.01.21588Z" transform="translate(-116.01378 -185.5)" fill="#6c63ff"/><path d="M250.46647,315.28227,224.72452,312.193l-.02015-.29649c-.87824-12.8368,1.36239-22.36567,6.65951-28.32129,4.80754-5.40507,10.31616-5.73239,10.54834-5.74361l.14859-.007,6.96844,6.33482Z" transform="translate(-116.01378 -185.5)" fill="#6c63ff"/><path d="M324.98425,254.40579h-67.7379a5.26145,5.26145,0,0,1-5.25552-5.25553V224.62447a39.12447,39.12447,0,0,1,78.24894,0v24.52579A5.26145,5.26145,0,0,1,324.98425,254.40579Z" transform="translate(-116.01378 -185.5)" fill="#2f2e41"/><circle cx="292.68782" cy="225.4797" r="28.68469" transform="translate(-161.56464 188.64661) rotate(-61.33685)" fill="#ffb7b7"/><path d="M319.95312,226.37631H282.08236a2.924,2.924,0,0,1-2.89721-2.55819l-.49042-3.92225a1.75171,1.75171,0,0,0-3.32576-.5235l-2.48264,5.31939a2.931,2.931,0,0,1-2.64572,1.68455H264.4881a2.91919,2.91919,0,0,1-2.90662-3.198l2.26821-23.69207a2.94218,2.94218,0,0,1,1.66859-2.378c17.34363-8.09656,34.93134-8.0863,52.275.0308a2.924,2.924,0,0,1,1.652,2.24112l3.3979,23.66128a2.91891,2.91891,0,0,1-2.89008,3.33488Z" transform="translate(-116.01378 -185.5)" fill="#2f2e41"/><polygon points="267.719 265.859 266.305 264.445 327.767 202.982 446.875 202.982 506.97 141.647 624.539 141.647 683.855 81.869 959.972 81.869 959.972 83.869 684.688 83.869 625.372 143.647 507.81 143.647 447.715 204.982 328.596 204.982 267.719 265.859" fill="#3f3d56"/><circle cx="508.97244" cy="143" r="37" fill="#fff"/><circle cx="684.97244" cy="83" r="10" fill="#cbcbcb"/><circle cx="957.97244" cy="83" r="10" fill="#cbcbcb"/><circle cx="821.97244" cy="83" r="10" fill="#cbcbcb"/><path d="M624.98622,366.5a38,38,0,1,1,38-38A38.04307,38.04307,0,0,1,624.98622,366.5Zm0-74a36,36,0,1,0,36,36A36.04061,36.04061,0,0,0,624.98622,292.5Z" transform="translate(-116.01378 -185.5)" fill="#3f3d56"/><circle cx="508.97244" cy="143" r="26.43632" fill="#6c63ff"/><polygon points="506.453 154.16 498.541 143.986 503.142 140.407 506.889 145.224 519.545 131.863 523.777 135.873 506.453 154.16" fill="#fff"/><circle cx="326.97244" cy="204" r="37" fill="#fff"/><path d="M442.98622,427.5a38,38,0,1,1,38-38A38.04315,38.04315,0,0,1,442.98622,427.5Zm0-74a36,36,0,1,0,36,36A36.0407,36.0407,0,0,0,442.98622,353.5Z" transform="translate(-116.01378 -185.5)" fill="#3f3d56"/><circle cx="326.97244" cy="204" r="26.43632" fill="#6c63ff"/><polygon points="324.453 215.16 316.541 204.986 321.142 201.407 324.889 206.224 337.545 192.863 341.777 196.873 324.453 215.16" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/src/assets/navigator-choose.svg b/src/assets/navigator-choose.svg
new file mode 100644
index 000000000..aef3a8b60
--- /dev/null
+++ b/src/assets/navigator-choose.svg
@@ -0,0 +1 @@
+<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="559.17449" height="582.5" viewBox="0 0 559.17449 582.5" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M833.2667,657.09714l-25.61328,23.58008,20.35547-34.15484c-16.03711-29.0821-42.26563-54.21613-42.26563-54.21613s-54.415,52.13391-54.415,93.11456,24.36231,55.28956,54.415,55.28956c30.05225,0,54.41455-14.3089,54.41455-55.28956C840.15781,676.29935,837.4581,666.62583,833.2667,657.09714Z" transform="translate(-320.41275 -158.75)" fill="#f2f2f2"/><path d="M801.0664,681.95377v2.02c-.12,23.48-4.08,41.8-11.85,54.7-.11.19-.23.37-.34.56l-.87-.53-.83-.52c8.62-13.93,11.67-33.62,11.78-54.1.01-.66.02-1.33.01-2-.03-8.67005-.56-17.44-1.41-25.96-.06-.66-.13-1.33-.2-2-1.18-11.24-2.88-21.98-4.62-31.31-.12-.66-.25-1.32-.38-1.97-3.01-15.78-6.08-27.21-6.78-29.74-.08-.31-.13-.48-.14-.52l.95-.27.01-.01.96-.27c.01.04.18.61005.46,1.67,1.07,3.96,3.85,14.71,6.58,28.89.12.64.25,1.3.37,1.96,1.42,7.57,2.81,16.03,3.91,24.91q.42,3.34506.75,6.6c.08.67.15,1.34.21,2Q801.01648,669.87879,801.0664,681.95377Z" transform="translate(-320.41275 -158.75)" fill="#fff"/><path d="M794.39641,620.59373c-.67.09-1.35.18-2.04.25a55.1675,55.1675,0,0,1-5.64.29,53.66371,53.66371,0,0,1-23.2-5.24c-.42.53-.84,1.06-1.27,1.6a55.65066,55.65066,0,0,0,24.47,5.64,57.08008,57.08008,0,0,0,6.02-.32c.68-.07,1.36-.16,2.03-.26a55.18211,55.18211,0,0,0,15.95-4.83q-.645-.825-1.26-1.62A53.47953,53.47953,0,0,1,794.39641,620.59373Z" transform="translate(-320.41275 -158.75)" fill="#fff"/><path d="M799.42644,654.06376q-1.035.06-2.07.06c-.21.01-.43.01-.64.01a53.94832,53.94832,0,0,1-44.28-23.13c-.4.59-.8,1.18-1.18994,1.78a55.95155,55.95155,0,0,0,45.47,23.35c.28,0,.56,0,.84-.01.69995-.01,1.38995-.03,2.07995-.06a55.65566,55.65566,0,0,0,29.65-10.4c-.32-.59-.64-1.18-.97-1.76995A53.57789,53.57789,0,0,1,799.42644,654.06376Z" transform="translate(-320.41275 -158.75)" fill="#fff"/><path d="M801.0664,681.95377c-.7.06-1.4.1-2.1.13-.75.03-1.5.05-2.25.05a54.09422,54.09422,0,0,1-51.86-38.92005c-.45.81006-.9,1.61005-1.33,2.42005a56.07516,56.07516,0,0,0,53.19,38.5c.75,0,1.5-.01,2.24-.05.71-.02,1.41-.06,2.11-.11005a55.91109,55.91109,0,0,0,36.9-18.01c-.21-.74-.45-1.47-.69-2.21A53.91969,53.91969,0,0,1,801.0664,681.95377Z" transform="translate(-320.41275 -158.75)" fill="#fff"/><path id="f3dd3be3-e3f2-4729-8854-c6cb5bd65852-234" data-name="Rectangle 1 - Outline" d="M741.15954,284.69886,462.5712,249.18105a18.08642,18.08642,0,0,0-2.263-.14685,17.25807,17.25807,0,0,0-2.23055.14083,17.06478,17.06478,0,0,0-2.18962.42854,17.49793,17.49793,0,0,0-2.14026.72225,18.22231,18.22231,0,0,0-1.9922.963,18.95742,18.95742,0,0,0-1.88868,1.20375,20.2224,20.2224,0,0,0-1.77674,1.45051,22.08582,22.08582,0,0,0-1.65877,1.68525,23.76228,23.76228,0,0,0-1.5119,1.90433q-.71386,1.00272-1.33978,2.0861-.62592,1.087-1.16161,2.26064t-.97746,2.42675q-.45741,1.29524-.80168,2.64825t-.57539,2.753q-.2263,1.39876-.34667,2.84326t-.12038,2.9239q.00479,1.4782.12038,2.94678t.34667,2.91307q.23354,1.45053.57778,2.87215t.80167,2.81075q.44176,1.34218.97746,2.623.53567,1.282,1.16162,2.49416t1.33978,2.35454q.71265,1.14717,1.51192,2.20767t1.65877,2.0235q.85947.957,1.77673,1.80563t1.88868,1.58533a23.62545,23.62545,0,0,0,1.99221,1.35783,21.76532,21.76532,0,0,0,2.14026,1.14717,20.07486,20.07486,0,0,0,2.18962.86791,18.97421,18.97421,0,0,0,2.23054.58863,18.4762,18.4762,0,0,0,2.26305.307L741.162,326.75784a7.05621,7.05621,0,0,0,2.40749-.24075,7.55151,7.55151,0,0,0,1.16162-.42854,8.5987,8.5987,0,0,0,1.12791-.632,10.03506,10.03506,0,0,0,1.04245-.79447,11.67582,11.67582,0,0,0,.98226-.963,13.85174,13.85174,0,0,0,.91846-1.1267q.44418-.60429.85346-1.288t.774-1.42644q.36474-.74271.68252-1.54321.319-.79929.58984-1.65395t.49354-1.75988q.23472-.93651.40446-1.90674t.2901-1.96933q.11676-.99912.17454-2.02471t.05778-2.07406q-.0036-1.04727-.05778-2.08489t-.17454-2.05961q-.11676-1.022-.2901-2.02711t-.40446-1.9886q-.2227-.95094-.49354-1.85858-.26844-.89559-.58984-1.7647t-.68252-1.68525q-.36354-.81494-.774-1.58172t-.85346-1.459q-.443-.69216-.91846-1.31208t-.98226-1.16042a13.498,13.498,0,0,0-1.04245-1.00392,11.32484,11.32484,0,0,0-1.12791-.85828,9.50166,9.50166,0,0,0-1.16162-.66206,8.27458,8.27458,0,0,0-1.19171-.46224,7.5967,7.5967,0,0,0-1.21819-.2588" transform="translate(-320.41275 -158.75)" fill="#6c63ff"/><path id="f1003c66-3f14-4be1-907c-7cdab0d8529f-235" data-name="Rectangle 3 - Outline" d="M741.15954,364.80471,462.5712,358.13233a17.90946,17.90946,0,0,0-4.4936.45863,18.34354,18.34354,0,0,0-2.18962.656,19.41846,19.41846,0,0,0-2.14026.93892,20.721,20.721,0,0,0-1.9922,1.16523,21.90247,21.90247,0,0,0-1.88868,1.40237,23.57934,23.57934,0,0,0-1.77674,1.63469q-.86069.87631-1.65877,1.8634-.79809.98947-1.5119,2.062-.71386,1.07254-1.33978,2.22453t-1.16161,2.381q-.53567,1.229-.97746,2.52787-.45741,1.3446-.80168,2.73251t-.57539,2.812q-.2263,1.424-.34667,2.88057t-.12038,2.93594q.00479,1.47941.12038,2.93474t.34667,2.87816q.23354,1.41563.57778,2.80113t.80167,2.72769q.44176,1.30245.97746,2.52787t1.16162,2.37379q.626,1.14839,1.33978,2.2161.71265,1.06412,1.51192,2.04638t1.65877,1.85257a23.35111,23.35111,0,0,0,1.77673,1.62385,21.70914,21.70914,0,0,0,1.88868,1.39033,20.54423,20.54423,0,0,0,1.99221,1.152,19.27673,19.27673,0,0,0,2.14026.92568,18.248,18.248,0,0,0,2.18962.6416,17.81682,17.81682,0,0,0,2.23054.36113,18.00466,18.00466,0,0,0,2.26305.07343l278.58594-8.4756a7.25286,7.25286,0,0,0,1.21819-.14084,7.57443,7.57443,0,0,0,1.19171-.34547,8.43654,8.43654,0,0,0,1.16162-.54891,9.87072,9.87072,0,0,0,1.12791-.74873,11.67646,11.67646,0,0,0,1.04245-.90282,13.63477,13.63477,0,0,0,.98226-1.06411q.47427-.56815.91846-1.2218t.85346-1.37589q.40927-.72706.774-1.50709t.68252-1.613q.319-.84624.58984-1.72257t.49354-1.80562q.23472-.951.40446-1.93924t.2901-1.99943q.11676-1.01475.17454-2.04637t.05778-2.08008q-.0036-1.03882-.05778-2.07526t-.17454-2.04637q-.11676-1.01355-.2901-1.997t-.40446-1.94646q-.22391-.9293-.49474-1.81044t-.58864-1.71173q-.31658-.83058-.68132-1.60941t-.774-1.50108q-.41047-.72345-.85346-1.37227t-.91846-1.217a13.50491,13.50491,0,0,0-.98226-1.05809,11.56584,11.56584,0,0,0-1.04244-.89559,9.78426,9.78426,0,0,0-1.12791-.74151,8.37239,8.37239,0,0,0-1.16283-.53928,7.53579,7.53579,0,0,0-1.19171-.33825,7.23677,7.23677,0,0,0-1.21819-.13242" transform="translate(-320.41275 -158.75)" fill="#e4e4e4"/><path id="e5b3fa8a-e15d-46b1-859f-01f7147e98c8-236" data-name="Rectangle 4 - Outline" d="M741.15954,439.903,462.5712,460.27761a18.476,18.476,0,0,0-2.263.307,18.97437,18.97437,0,0,0-2.23055.58863,20.07646,20.07646,0,0,0-2.18962.86791,21.77069,21.77069,0,0,0-2.14026,1.14717,23.63015,23.63015,0,0,0-1.9922,1.35783q-.97263.74271-1.88868,1.58533-.91605.84624-1.77674,1.80562t-1.65877,2.02351q-.79809,1.06771-1.5119,2.21008-.71386,1.14235-1.33978,2.35453-.62592,1.21338-1.16161,2.49417t-.97746,2.623q-.45741,1.38672-.80168,2.81075t-.57539,2.86853q-.2263,1.44691-.34667,2.91428t-.12038,2.94677q.00479,1.47942.12038,2.92391t.34667,2.84445q.23354,1.40358.57778,2.75418t.80167,2.64825q.44176,1.2543.97746,2.42675.53567,1.17366,1.16162,2.26064t1.33978,2.0861a23.75758,23.75758,0,0,0,1.51192,1.90433,22.084,22.084,0,0,0,1.65877,1.68525,20.22418,20.22418,0,0,0,1.77673,1.45052,18.96039,18.96039,0,0,0,1.88868,1.20375,18.22157,18.22157,0,0,0,1.99221.963,17.49224,17.49224,0,0,0,2.14026.72225,17.06646,17.06646,0,0,0,2.18962.42853,17.2597,17.2597,0,0,0,2.23054.14084,18.092,18.092,0,0,0,2.26305-.14686l278.58594-35.50938a7.59564,7.59564,0,0,0,1.21819-.25881,8.2722,8.2722,0,0,0,1.19171-.46223,9.50166,9.50166,0,0,0,1.16162-.66206,11.32484,11.32484,0,0,0,1.12791-.85828,13.498,13.498,0,0,0,1.04245-1.00392q.50076-.5417.98226-1.16042.47427-.61872.91846-1.31208t.85346-1.45895q.40927-.76077.774-1.58172t.68252-1.68525q.319-.8679.58984-1.77553t.49354-1.85859q.23472-.98466.40446-1.98979t.2901-2.02712q.11676-1.022.17454-2.05961t.05778-2.0861q-.00482-1.04244-.059-2.068t-.17454-2.0247q-.11556-1.00272-.2889-1.973t-.40446-1.90673q-.2227-.90643-.49354-1.75988-.26722-.85345-.58863-1.654t-.68253-1.54321q-.36714-.73669-.77762-1.42283t-.85346-1.288a13.85361,13.85361,0,0,0-.91846-1.12671,11.67725,11.67725,0,0,0-.98226-.963,10.03354,10.03354,0,0,0-1.04244-.79447,8.59881,8.59881,0,0,0-1.12792-.632,7.55278,7.55278,0,0,0-1.16161-.42853,7.055,7.055,0,0,0-2.4075-.24075" transform="translate(-320.41275 -158.75)" fill="#e4e4e4"/><path id="bafb1f3d-b2ca-45c8-ab7e-ed03dda6d8fc-237" data-name="Path 5" d="M589.31356,443.63612a13.97191,13.97191,0,0,0,25.28668-11.43927l53.99307-110.92544-25.84464-15.66755L596.11918,423.42923q-.26727.1039-.52648.21776t-.51651.23781q-.25729.12394-.51073.26081t-.50318.28777a13.98877,13.98877,0,0,0-4.7497,19.20135Z" transform="translate(-320.41275 -158.75)" fill="#9e616a"/><path id="a23fb8c4-4f70-46f7-bb51-5893ecfd1d6a-238" data-name="Path 8" d="M658.28678,364.0447l-38.35735-9.83117s1.25229-2.831,3.28772-7.52113,4.8793-11.23028,8.07832-18.65563,6.74836-15.72208,10.21514-23.92319,6.8383-16.3039,9.678-23.32731,6.0655-11.22974,9.30769-13.58719a12.797,12.797,0,0,1,9.40493-2.50021,18.17652,18.17652,0,0,1,7.27738,2.77018A19.818,19.818,0,0,1,680.1,269.6863l8.89339,16.17314Z" transform="translate(-320.41275 -158.75)" fill="#ccc"/><path id="bf4ad07a-caea-45f0-95a0-f5e060234fe8-239" data-name="Ellipse 3 - Outline" d="M351.31474,355.2602a24.91786,24.91786,0,0,0-2.76862.36112,25.34288,25.34288,0,0,0-2.7289.66929,26.35031,26.35031,0,0,0-2.67954.97985,27.95921,27.95921,0,0,0-2.62056,1.288q-1.24828.70177-2.44,1.52635t-2.31481,1.77192q-1.12189.94494-2.17758,2.01507t-2.03433,2.257q-.97865,1.1869-1.855,2.45926t-1.64432,2.62177q-.76077,1.3518-1.42283,2.777t-1.20375,2.91669q-.56455,1.5468-.98828,3.12612t-.7066,3.18512q-.28409,1.60581-.42613,3.23327t-.142,3.26818q0,1.6407.142,3.23929t.42613,3.1478q.28288,1.54923.7066,3.04308t.98467,2.92631q.54649,1.38311,1.20374,2.67593a28.57528,28.57528,0,0,0,1.42525,2.48936,27.29148,27.29148,0,0,0,1.64432,2.28712,26.5101,26.5101,0,0,0,1.85618,2.09092,25.40859,25.40859,0,0,0,2.03433,1.849,24.07346,24.07346,0,0,0,2.17879,1.58052,23.19147,23.19147,0,0,0,4.7548,2.34009,22.74389,22.74389,0,0,0,5.2965,1.20375,23.28722,23.28722,0,0,0,2.7289.12037,24.48725,24.48725,0,0,0,2.76862-.19621,25.37071,25.37071,0,0,0,2.75417-.50677,25.87151,25.87151,0,0,0,2.69038-.80772,26.9475,26.9475,0,0,0,2.61815-1.10384,28.59917,28.59917,0,0,0,2.53751-1.39394q1.20014-.74872,2.33767-1.6058t2.20407-1.82729q1.06651-.97021,2.05961-2.04637t1.90915-2.25823q.92206-1.18088,1.7358-2.43278t1.524-2.57q.71021-1.31811,1.31449-2.6976t1.10143-2.81677q.5152-1.48784.90161-3.00095t.64521-3.04789q.2576-1.536.38761-3.08762t.13-3.1165q-.0012-1.56487-.13-3.09123t-.38761-3.00937q-.25761-1.4806-.64521-2.91789t-.90161-2.82038q-.49955-1.33857-1.10143-2.59648-.61029-1.25432-1.32051-2.434a27.302,27.302,0,0,0-3.25373-4.34915,25.78491,25.78491,0,0,0-1.90433-1.87664,24.39316,24.39316,0,0,0-2.05962-1.63349,23.56323,23.56323,0,0,0-2.20406-1.38551,23.29159,23.29159,0,0,0-2.34249-1.13153,22.72132,22.72132,0,0,0-5.15445-1.46255,23.07057,23.07057,0,0,0-2.69038-.26844,24.14532,24.14532,0,0,0-2.75418.04575" transform="translate(-320.41275 -158.75)" fill="#e4e4e4"/><path id="b68b3c2d-1cd9-4a2b-b264-66241f72f014-240" data-name="Ellipse 3 - Outline" d="M351.31474,468.41256a24.91786,24.91786,0,0,0-2.76862.36112,25.34525,25.34525,0,0,0-2.7289.66929,26.35271,26.35271,0,0,0-2.67954.97985,27.95921,27.95921,0,0,0-2.62056,1.288q-1.24828.70179-2.44,1.52635t-2.31481,1.77192q-1.12189.94494-2.17758,2.01508t-2.03433,2.257q-.97865,1.18689-1.855,2.45925t-1.64432,2.62177q-.76077,1.3518-1.42283,2.777t-1.20375,2.91668q-.56455,1.5468-.98828,3.12613t-.7066,3.18511q-.28409,1.60581-.42613,3.23327t-.142,3.26818q0,1.64072.142,3.23929t.42613,3.14781q.28288,1.54922.7066,3.04307t.98467,2.92631q.54649,1.3831,1.20374,2.67594a28.57511,28.57511,0,0,0,1.42525,2.48935,27.29148,27.29148,0,0,0,1.64432,2.28712,26.5101,26.5101,0,0,0,1.85618,2.09092,25.40871,25.40871,0,0,0,2.03433,1.849,24.07734,24.07734,0,0,0,2.17879,1.58052,23.19194,23.19194,0,0,0,4.7548,2.34008,22.74339,22.74339,0,0,0,5.2965,1.20375,23.28723,23.28723,0,0,0,2.7289.12038,24.48957,24.48957,0,0,0,2.76862-.19621,25.37075,25.37075,0,0,0,2.75417-.50678,25.86665,25.86665,0,0,0,2.69038-.80772,26.945,26.945,0,0,0,2.61815-1.10384,28.59661,28.59661,0,0,0,2.53751-1.39394q1.20014-.74872,2.33767-1.60579t2.20407-1.8273q1.06651-.97021,2.05961-2.04637t1.90915-2.25823q.92206-1.18087,1.7358-2.43278t1.524-2.57q.71021-1.31811,1.31449-2.6976t1.10143-2.81677q.5152-1.48784.90161-3.00095t.64521-3.04789q.2576-1.536.38761-3.08761t.13-3.11651q-.0012-1.56488-.13-3.09123t-.38761-3.00937q-.25761-1.4806-.64521-2.91788t-.90161-2.82039q-.49955-1.33857-1.10143-2.59648-.61029-1.25431-1.32051-2.434a27.302,27.302,0,0,0-3.25373-4.34915,25.78887,25.78887,0,0,0-1.90433-1.87664,24.39517,24.39517,0,0,0-2.05962-1.63349,23.56323,23.56323,0,0,0-2.20406-1.38551,23.29152,23.29152,0,0,0-2.34249-1.13152,22.72083,22.72083,0,0,0-5.15445-1.46256,23.06838,23.06838,0,0,0-2.69038-.26843,24.143,24.143,0,0,0-2.75418.04574" transform="translate(-320.41275 -158.75)" fill="#e4e4e4"/><path id="a5644fa4-417a-45bc-a470-f5aa82f96b47-241" data-name="Ellipse 2 - Outline" d="M351.31956,232.68006a24.34593,24.34593,0,0,0-2.76862.09029,23.98521,23.98521,0,0,0-2.7289.40446,24.23785,24.23785,0,0,0-2.67954.72224,25.11021,25.11021,0,0,0-2.62056,1.034,26.09237,26.09237,0,0,0-2.44,1.2844,26.78288,26.78288,0,0,0-2.31481,1.548,27.97275,27.97275,0,0,0-2.17879,1.80562q-1.0605.97383-2.03794,2.06443-.97865,1.0918-1.855,2.2799t-1.64432,2.46287q-.76439,1.29162-1.42644,2.647t-1.20375,2.79992q-.56094,1.489-.98467,3.02743t-.7066,3.1165q-.28409,1.58293-.42613,3.19235t-.142,3.25012q0,1.6383.142,3.25012t.42613,3.18873q.28288,1.57691.7066,3.11169t.98467,3.0214q.54649,1.43607,1.20375,2.7927.66207,1.3518,1.43,2.623t1.64432,2.452q.87513,1.18449,1.855,2.26786t2.03433,2.04638a27.71027,27.71027,0,0,0,2.16795,1.79839,26.54319,26.54319,0,0,0,2.31481,1.53237,25.88047,25.88047,0,0,0,2.44,1.26875,24.94157,24.94157,0,0,0,2.62056,1.01717,23.982,23.982,0,0,0,5.40844,1.08338,24.49013,24.49013,0,0,0,5.5216-.16732,24.15436,24.15436,0,0,0,2.69038-.5465,24.50223,24.50223,0,0,0,2.61815-.84985,25.45616,25.45616,0,0,0,2.5375-1.14717,26.49778,26.49778,0,0,0,2.34249-1.37348,27.22077,27.22077,0,0,0,2.20407-1.61422q1.06651-.86671,2.05961-1.84655t1.90915-2.07286q.92206-1.093,1.7358-2.26545t1.524-2.42195q.71262-1.24948,1.31449-2.57t1.10143-2.70482q.5152-1.43727.90161-2.91307t.64521-2.9853q.2576-1.51551.38761-3.05511t.13-3.10447q-.0012-1.56368-.13-3.10326t-.38761-3.04669q-.25761-1.5083-.64521-2.98289t-.90161-2.90826q-.49955-1.38551-1.10143-2.70241t-1.32051-2.56519q-.71021-1.23746-1.524-2.4075t-1.72978-2.25341q-.91-1.08218-1.90433-2.05721t-2.05962-1.83331a26.96321,26.96321,0,0,0-2.20286-1.60339,26.27265,26.27265,0,0,0-2.34249-1.359,25.2716,25.2716,0,0,0-2.5375-1.13152,24.36276,24.36276,0,0,0-2.61815-.833,24.05963,24.05963,0,0,0-2.69038-.52965,24.36862,24.36862,0,0,0-2.75418-.22149m0-3.01178a26.74741,26.74741,0,0,1,11.59932,3.00215,30.44173,30.44173,0,0,1,9.30257,7.515,35.43128,35.43128,0,0,1,6.18727,10.86383,39.62389,39.62389,0,0,1,0,26.33682,35.72622,35.72622,0,0,1-6.18727,10.90355,30.72788,30.72788,0,0,1-9.30377,7.57037,26.87245,26.87245,0,0,1-11.59932,3.078,26.5187,26.5187,0,0,1-11.83526-2.35935,29.92525,29.92525,0,0,1-9.84546-7.2598,35.05187,35.05187,0,0,1-6.73136-11.11542,39.58533,39.58533,0,0,1,0-27.62242,35.35065,35.35065,0,0,1,6.73136-11.15875,30.20092,30.20092,0,0,1,9.84546-7.3236,26.61731,26.61731,0,0,1,11.84248-2.43519Z" transform="translate(-320.41275 -158.75)" fill="#6c63ff"/><path id="aeea3032-7d6f-43a2-9023-7da5e46a69d9-242" data-name="Path 1" d="M351.31716,272.82388l-9.48192-19.75352,2.251-1.46616,7.80992,16.22773,32.79251-38.544,1.985,2.115Z" transform="translate(-320.41275 -158.75)" fill="#6c63ff"/><g id="b65364ff-7d92-487e-8061-939b37583c0d" data-name="Group 1"><path id="efb13e16-1633-4e88-9f48-a8cd4f1f0a11-243" data-name="Path 1-2" d="M696.403,662.81072l-23.4731-.09149,7.56917,61.3346,15.90393.07945Z" transform="translate(-320.41275 -158.75)" fill="#9e616a"/><path id="b5b13dc0-906f-47cb-af24-0252d232cfd5-244" data-name="Path 2" d="M700.45839,739.56654l-51.2532-.27084v-.64762a20.102,20.102,0,0,1,.38279-3.9182,19.5981,19.5981,0,0,1,2.9552-7.12017,20.12424,20.12424,0,0,1,5.54326-5.51558,19.60926,19.60926,0,0,1,7.13462-2.92391,20.10992,20.10992,0,0,1,3.92061-.36112h0l31.31672.15408Z" transform="translate(-320.41275 -158.75)" fill="#2f2e41"/></g><g id="b7f9c824-5877-4162-b4d5-ccd00fd098dd" data-name="Group 2"><path id="a1d436e5-b88b-4a37-a10d-47f639496f81-245" data-name="Path 3" d="M621.24452,662.51941l-23.40569-.09149,7.5451,61.25154,15.86059.07945Z" transform="translate(-320.41275 -158.75)" fill="#9e616a"/><path id="aa34d611-dd92-4168-ad92-5f109db8b699-246" data-name="Path 4" d="M625.28911,739.16809l-51.11839-.26843V738.252a20.12047,20.12047,0,0,1,.3828-3.91218,19.59207,19.59207,0,0,1,2.94677-7.11054,20.06641,20.06641,0,0,1,5.53-5.51076,19.53926,19.53926,0,0,1,7.11656-2.91669,20.03214,20.03214,0,0,1,3.911-.36112h0l31.23125.15287Z" transform="translate(-320.41275 -158.75)" fill="#2f2e41"/></g><path id="a2716e79-bed1-4374-9a2b-fced6059ca2b-247" data-name="Path 6" d="M620.25022,411.82915l-39.359,146.8838,14.40647,140.79886,31.89933.87994-6.94562-127.13389,39.79472-63.44478L668.677,701.25724l28.9357-2.04637,16.09653-164.603a186.93043,186.93043,0,0,0,11.95322-40.02344,178.21728,178.21728,0,0,0,2.82761-32.69983,152.92963,152.92963,0,0,0-1.69729-22.04906,80.71222,80.71222,0,0,0-1.59015-8.08437l-11.73534-11.89665Z" transform="translate(-320.41275 -158.75)" fill="#2f2e41"/><path d="M672.39794,436.39551c-6.61914,0-12.82983-.2124-18.46167-.63184A138.618,138.618,0,0,1,636.802,433.5083a61.01273,61.01273,0,0,1-13.97509-4.3999,22.42492,22.42492,0,0,1-9.06446-7.15381l-.26831-.39014,10.75806-70.01318,11.60107-78.72168a21.455,21.455,0,0,1,21.89038-18.333l36.333,1.11328a20.36358,20.36358,0,0,1,19.70166,21.5918l-4.76953,78.28955,17.593,77.22412-1.24585.17383c-.50122.06641-2.43213.32129-5.45654.66162-3.95313.44434-7.98975.84473-11.99732,1.19043-5.66992.48877-11.21826.873-16.49072,1.14258C684.72484,436.22461,678.31615,436.38965,672.39794,436.39551Z" transform="translate(-320.41275 -158.75)" fill="#ccc"/><path id="ad5d6a80-02ce-46d1-bab9-e92b7dd0c553-248" data-name="Path 9" d="M652.23623,240.58509q-.01447.00006-.029,0a5.80447,5.80447,0,0,1-5.80081-5.80814V202.38413a43.28932,43.28932,0,0,1,3.415-16.89461,43.98743,43.98743,0,0,1,23.112-23.23235,43.31447,43.31447,0,0,1,60.38845,39.73935v32.44223a5.81392,5.81392,0,0,1-.45983,2.27268,5.90921,5.90921,0,0,1-3.11289,3.12011,5.83343,5.83343,0,0,1-2.27388.46826l-75.24391.28529Z" transform="translate(-320.41275 -158.75)" fill="#2f2e41"/><path id="b726e025-86c8-4394-a2c8-021cc2286f1b-249" data-name="Ellipse 1" d="M709.48651,191.27474A31.93063,31.93063,0,0,1,672.56393,237.27a31.55868,31.55868,0,0,1-18.98311-15.20816,31.93063,31.93063,0,0,1,36.8973-45.9832,31.55869,31.55869,0,0,1,19.00839,15.19733Z" transform="translate(-320.41275 -158.75)" fill="#9e616a"/><path id="f57fd208-21ef-4a3c-a796-e350b3c4ef74-250" data-name="Path 10" d="M636.13248,205.02034a34.24421,34.24421,0,0,1,2.70121-13.36161,34.7739,34.7739,0,0,1,18.27651-18.3692,34.26006,34.26006,0,0,1,13.36162-2.76863l6.48339-.0325q.10922-.00063.21845-.00056a34.18646,34.18646,0,0,1,34.16542,34.20749v.64882l-13.71551.05537L692.947,192.334l-.93532,13.09077-7.08406.03129-2.35814-6.59172-.47307,6.60015-45.95792.20584Z" transform="translate(-320.41275 -158.75)" fill="#2f2e41"/><path id="a4aedf3a-b803-468c-96e6-3db664c8a6b9-251" data-name="Path 11" d="M580.91626,273.16471a15.04676,15.04676,0,0,0-5.785,2.8352,14.64818,14.64818,0,0,0-3.35954,3.7668,15.28752,15.28752,0,0,0-2.20959,9.53709,14.63534,14.63534,0,0,0,1.35071,4.85691,14.88942,14.88942,0,0,0,21.38117,6.27077q.19721-.12731.3906-.25841t.37992-.26751q.18767-.1368.36885-.27777t.3597-.28611l75.68285,26.936A11.40553,11.40553,0,0,0,682.557,322.192l17.9425-24.84286-21.69279-14.60789-11.384,12.93211-69.26236-13.778q-.1134-.2692-.23482-.5357t-.25347-.5307q-.13434-.26343-.27667-.52416t-.301-.51725A14.87713,14.87713,0,0,0,580.91626,273.16471Z" transform="translate(-320.41275 -158.75)" fill="#9e616a"/><path id="f92404ba-5ab9-4b2c-8e33-361dae08dca6-252" data-name="Path 12" d="M668.64413,287.51774c2.264-2.82544,5.42926-6.49388,8.64528-10.13238s6.4797-7.24478,8.94157-9.94249,4.1185-4.48569,4.1185-4.48569a17.83449,17.83449,0,0,1,32.39864,13.15647,17.57477,17.57477,0,0,1-2.65988,6.51856s-2.46915,3.231-6.19616,8.05366-8.71376,11.24257-13.74364,17.62495-10.10894,12.73178-14.02513,17.41865-6.67216,7.71467-7.06039,7.45538L665.40274,292.5796C665.01451,292.3203,666.38017,290.34318,668.64413,287.51774Z" transform="translate(-320.41275 -158.75)" fill="#ccc"/><path id="ed7e3964-87ca-4ccc-8578-c3f29353ddd2-253" data-name="Path 13" d="M676.75177,239.56431a5.71188,5.71188,0,0,0,.24075,3.13576,5.84194,5.84194,0,0,0,.76558,1.43848,5.90867,5.90867,0,0,0,.94856,1.01957,5.79475,5.79475,0,0,0,3.76532,1.36867q.12881-.00122.25761-.00723t.2576-.01805q.13-.01083.2588-.02889t.25881-.04093l4.868-.88475,6.70488-14.32461v13.12086l22.13212-3.98441V184.67939l-37.10314.17816.91725,1.06532a25.51935,25.51935,0,0,1,5.778,12.5575,41.59937,41.59937,0,0,1-.26723,14.15006,75.01637,75.01637,0,0,1-3.95071,13.819,110.55836,110.55836,0,0,1-5.27723,11.58367A5.83362,5.83362,0,0,0,676.75177,239.56431Z" transform="translate(-320.41275 -158.75)" fill="#2f2e41"/><path d="M419.7553,741.25H878.3835a1.20375,1.20375,0,0,0,0-2.4075H419.7553a1.20375,1.20375,0,1,0,0,2.4075Z" transform="translate(-320.41275 -158.75)" fill="#cacaca"/></svg>
\ No newline at end of file