diff --git a/common/constants.js b/common/constants.js
index 1f9b21dae830a49be4556b18874b0519dab09763..e36459f7a686904b39156256673842f9f8142814 100644
--- a/common/constants.js
+++ b/common/constants.js
@@ -128,15 +128,8 @@
     TOP_MENU: `These icons provide access to plugins, pinned datasets, and user documentation. Use the profile icon to login with your EBRAINS account.`,
     LAYER_SELECTOR: `This is the atlas layer browser. If an atlas supports multiple template spaces or parcellation maps, you will find them here.`,
     STATUS_CARD: `This is the coordinate navigator. Expand it to manipulate voxel and physical coordinates, to reset the view, or to create persistent links to the current view for sharing.`,
-    CITATION: `You will find a "chip" shaped label at the bottom-left of the screen (next to the layer selector) which indicates your currently selected parcellation map, e.g. Julich-Brain Cytoarchitectonic Maps 2.9. Click on (i), which will subsequently open up a description box with an "Explore" button (box-and-arrow icon) at the bottom. Click on this button, which will lead you to the EBRAINS Knowledge Graph webpage for the complete parcellation map dataset. Here you can click on the "How to cite" option on the left to access the appropriate citation for your selected parcellation/template. In addition, don't forget to also cite the siibra-explorer website: https://atlases.ebrains.eu/viewer/`,
   }
 
   exports.QUICKTOUR_DESC_MD = {
-    CITATION: `
-## How to cite from siibra-explorer
-
-You will find a "chip" shaped label at the bottom-left of the screen (next to the layer selector) which indicates your currently selected parcellation map, e.g. _Julich-Brain Cytoarchitectonic Maps 2.9_. Click on (i), which will subsequently open up a description box with an "Explore" button (box-and-arrow icon) at the bottom. Click on this button, which will lead you to the EBRAINS Knowledge Graph webpage for the complete parcellation map dataset. Here you can click on the "How to cite" option on the left to access the appropriate citation for your selected parcellation/template. In addition, don't forget to also cite the _siibra-explorer_ website: <https://atlases.ebrains.eu/viewer/>
-
-`
   }
 })(typeof exports === 'undefined' ? module.exports : exports)
diff --git a/common/howToCite.md b/common/howToCite.md
new file mode 100644
index 0000000000000000000000000000000000000000..0eaf902b9f6040d2f51d1837e731f6d6006d49d1
--- /dev/null
+++ b/common/howToCite.md
@@ -0,0 +1,23 @@
+## How to cite from siibra-explorer
+
+You will find a "chip" shaped label at the bottom-left of the screen (next to the layer selector) which indicates your currently selected parcellation map, e.g. _Julich-Brain Cytoarchitectonic Maps 2.9_. 
+
+
+
+[![Chip shaped label](assets/images/how-to-cite-1.png)](assets/images/how-to-cite-1.png)
+
+Click on (i), which will subsequently open up a description box with an "Explore" button (box-and-arrow icon) at the bottom. 
+
+---
+
+[![Explore button](assets/images/how-to-cite-2.png)](assets/images/how-to-cite-2.png)
+
+
+
+Click on this button, which will lead you to the EBRAINS Knowledge Graph webpage for the complete parcellation map dataset. Here you can click on the "How to cite" option on the left to access the appropriate citation for your selected parcellation/template.
+
+---
+
+[![How to cite](assets/images/how-to-cite-3.png)](assets/images/how-to-cite-3.png)
+
+In addition, don't forget to also cite the _siibra-explorer_ website: <https://atlases.ebrains.eu/viewer/>
diff --git a/src/assets/images/how-to-cite-1.png b/src/assets/images/how-to-cite-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..466309aa5ab742996ce8ff1f6390257b18bb098c
Binary files /dev/null and b/src/assets/images/how-to-cite-1.png differ
diff --git a/src/assets/images/how-to-cite-2.png b/src/assets/images/how-to-cite-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..54bb1ba8ada94e96eb4eaa108e64e7a7e111e44e
Binary files /dev/null and b/src/assets/images/how-to-cite-2.png differ
diff --git a/src/assets/images/how-to-cite-3.png b/src/assets/images/how-to-cite-3.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa2db0896035d4f60a8885ad80c343caf3b34645
Binary files /dev/null and b/src/assets/images/how-to-cite-3.png differ
diff --git a/src/ui/help/helpOnePager/helpOnePager.component.ts b/src/ui/help/helpOnePager/helpOnePager.component.ts
index 7f047318658a162397bb4d6c50133927a475c278..f7afe35c9306a196b0c4bc0e20f1e9ee447258c7 100644
--- a/src/ui/help/helpOnePager/helpOnePager.component.ts
+++ b/src/ui/help/helpOnePager/helpOnePager.component.ts
@@ -1,6 +1,8 @@
+import { MatDialog } from '@angular/material/dialog';
 import { Component, Optional } from "@angular/core";
 import { PureContantService } from "src/util";
 import { ARIA_LABELS } from 'common/constants'
+import { HowToCite } from '../howToCite/howToCite.component';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { default: QUICK_STARTER } = require('!!raw-loader!common/helpOnePager.md')
@@ -19,11 +21,16 @@ export class HelpOnePager{
   public extQuickStarter: string
   public userDoc: string
   constructor(
-    @Optional() pConstService: PureContantService
+    @Optional() pConstService: PureContantService,
+    private dialog: MatDialog,
   ){
     this.extQuickStarter = `quickstart.html`
     if (pConstService) {
       this.userDoc = pConstService.docUrl
     }
   }
+
+  howToCite(){
+    this.dialog.open(HowToCite)
+  }
 }
diff --git a/src/ui/help/helpOnePager/helpOnePager.template.html b/src/ui/help/helpOnePager/helpOnePager.template.html
index ebf014b77a1c45468f6e56966756a0f542563c37..af0ae2e65b7bd8a6047e026165ad922f98662267 100644
--- a/src/ui/help/helpOnePager/helpOnePager.template.html
+++ b/src/ui/help/helpOnePager/helpOnePager.template.html
@@ -15,6 +15,15 @@
 </div>
 
 <div mat-dialog-actions align="center">
+
+  <button mat-button color="primary"
+    (click)="howToCite()">
+    <i class = "fas fa-book m-1"></i>
+    <span>
+      How to cite
+    </span>
+  </button>
+
   <button mat-button color="primary" mat-dialog-close quick-tour-opener>
     <i class = "far fa-play-circle m-1"></i>
     <span>
diff --git a/src/ui/help/howToCite/howToCite.component.ts b/src/ui/help/howToCite/howToCite.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c70f035d5a0ee72245934cb7497797ecdafd102
--- /dev/null
+++ b/src/ui/help/howToCite/howToCite.component.ts
@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+const { default: HOWTOCITE } = require('!!raw-loader!common/howToCite.md')
+
+@Component({
+  selector: 'how-to-cite',
+  templateUrl: './howToCite.template.html',
+  styleUrls: [
+    './howToCite.style.css'
+  ]
+})
+
+export class HowToCite{
+  public HOWTOCITE = HOWTOCITE
+}
\ No newline at end of file
diff --git a/src/ui/help/howToCite/howToCite.style.css b/src/ui/help/howToCite/howToCite.style.css
new file mode 100644
index 0000000000000000000000000000000000000000..be8e9d87a469b5adc6608260adcbf1780f45206b
--- /dev/null
+++ b/src/ui/help/howToCite/howToCite.style.css
@@ -0,0 +1,4 @@
+:host >>> img
+{
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/ui/help/howToCite/howToCite.template.html b/src/ui/help/howToCite/howToCite.template.html
new file mode 100644
index 0000000000000000000000000000000000000000..a5bc97e40d64efcc7d03ac3b06a3276b0e335c54
--- /dev/null
+++ b/src/ui/help/howToCite/howToCite.template.html
@@ -0,0 +1,2 @@
+<markdown-dom mat-dialog-content [markdown]="HOWTOCITE">
+</markdown-dom>
\ No newline at end of file
diff --git a/src/ui/help/module.ts b/src/ui/help/module.ts
index 76f53a9e8423c731ad32c6b429831b129155b6c8..b99786401f97aad174c2e5db0398223d377be5c7 100644
--- a/src/ui/help/module.ts
+++ b/src/ui/help/module.ts
@@ -6,6 +6,7 @@ import { AngularMaterialModule } from "src/sharedModules";
 import { AboutCmp } from './about/about.component'
 import { HelpOnePager } from "./helpOnePager/helpOnePager.component";
 import {QuickTourModule} from "src/ui/quickTour/module";
+import { HowToCite } from "./howToCite/howToCite.component";
 
 @NgModule({
   imports: [
@@ -18,6 +19,7 @@ import {QuickTourModule} from "src/ui/quickTour/module";
   declarations: [
     AboutCmp,
     HelpOnePager,
+    HowToCite,
   ],
   exports: [
     AboutCmp,
diff --git a/src/util/pureConstant.service.ts b/src/util/pureConstant.service.ts
index 51406f461875ce46e737629f8f5f87c0c64beeae..a309074629d1720ebc94a15e6e86be393089edf7 100644
--- a/src/util/pureConstant.service.ts
+++ b/src/util/pureConstant.service.ts
@@ -187,9 +187,9 @@ function getNehubaConfig(space: TSpaceFull) {
 export class PureContantService implements OnDestroy{
   
   private subscriptions: Subscription[] = []
-  public repoUrl = `https://github.com/HumanBrainProject/interactive-viewer`
+  public repoUrl = `https://github.com/FZJ-INM1-BDA/siibra-explorer`
   public supportEmailAddress = `support@ebrains.eu`
-  public docUrl = `https://interactive-viewer.readthedocs.io/en/latest/`
+  public docUrl = `https://siibra-explorer.readthedocs.io/`
 
   public showHelpSupportText: string = `Did you encounter an issue?
 Send us an email: <a target = "_blank" href = "mailto:${this.supportEmailAddress}">${this.supportEmailAddress}</a>
diff --git a/src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.component.ts b/src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.component.ts
index 0a945a0c1933312b2aee7a31327abdea8fb4dff5..5a4bea443845687db10084cd253a18ec1c44bb17 100644
--- a/src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.component.ts
+++ b/src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Output, Pipe, PipeTransform } from "@angular/core";
 import { IQuickTourData } from "src/ui/quickTour";
-import { CONST, ARIA_LABELS, QUICKTOUR_DESC, QUICKTOUR_DESC_MD } from 'common/constants'
+import { CONST, ARIA_LABELS, QUICKTOUR_DESC } from 'common/constants'
 import { select, Store } from "@ngrx/store";
 import { viewerStateContextedSelectedRegionsSelector, viewerStateGetOverlayingAdditionalParcellations, viewerStateParcVersionSelector, viewerStateSelectedParcellationSelector } from "src/services/state/viewerState/selectors";
 import { distinctUntilChanged, map } from "rxjs/operators";
@@ -36,12 +36,6 @@ export class ViewerStateBreadCrumb {
     description: QUICKTOUR_DESC.CHIPS,
   }
 
-  public quickTourCitation: IQuickTourData = {
-    order: 5.1,
-    description: QUICKTOUR_DESC.CITATION,
-    descriptionMd: QUICKTOUR_DESC_MD.CITATION,
-  }
-
   public clearViewKeys$ = this.store$.pipe(
     select(ngViewerSelectorClearViewEntries)
   )
diff --git a/src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.template.html b/src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.template.html
index d57782bdd6c79d07ca76beffa02e6871a478cb67..e2d6f421be41011b5083aeaf1ccad24fd21b1858 100644
--- a/src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.template.html
+++ b/src/viewerModule/viewerStateBreadCrumb/breadcrumb/breadcrumb.template.html
@@ -188,9 +188,6 @@
         fontIcon="fa-info-circle"
         iav-stop="click"
         quick-tour
-        [quick-tour-description]="quickTourCitation.description"
-        [quick-tour-description-md]="quickTourCitation.descriptionMd"
-        [quick-tour-order]="quickTourCitation.order"
         iav-dataset-show-dataset-dialog
         [iav-dataset-show-dataset-dialog-name]="originDatainfo.name"
         [iav-dataset-show-dataset-dialog-description]="originDatainfo.description"