diff --git a/index.html b/index.html
index d4d0e2f..39db543 100644
--- a/index.html
+++ b/index.html
@@ -38,8 +38,46 @@
           </svg>
         </div>
       </div>
+      <div id="intro">
+        <div id="intro-step1">
+          <h1>Hello there 👋,</h1>
+          <p>
+            thanks for participating in an interactive study for this research project. I hope
+            you've already filled out the declaration of consent I have sent you. If there are any
+            problems with that or any other part of this study do not hesitate to contact me via
+            mail:
+            <a href="mailto:me@dnsc.io">me@dnsc.io</a>
+          </p>
+          <p>
+            You are participating in a study on Playful Experiences within the Onboarding Process of
+            Software Development Projects. In the following you are going to be guided through an
+            interactive visualization of a software project. Within that visualization you are going
+            to be able to reveal certain parts of the project, that might be of value in an
+            onboarding process. The visualizations are going to be accompanied by some questions on
+            the visualization itself but also on the broader aspect of using game mechanics in
+            software development.
+          </p>
+          <div id="intro-disclaimer">
+            <h3>Disclaimer</h3>
+            <p>
+              Do not expect a real game experience within this study. This study aims to gather
+              initial feedback on certain aspects of which information could be interesting to
+              include within software development onboarding and how its presentation changes how it
+              is perceived. The visualization of the in-game elements is therefore very abstract.
+              The arguably more important part of this study are the answers to the questions you
+              will be asked in the end, so please answer them carefully. Thanks in advance, let's
+              start now!
+            </p>
+          </div>
+        </div>
+        <div id="intro-step2">Step 2</div>
+        <div id="intro-step3">Step 3</div>
+        <div id="intro-step4">Step 4</div>
+        <button id="intro-button">Let's start!</button>
+      </div>
     </div>
     <div id="backdrop"></div>
+    <div id="intro-backdrop"></div>
     <script src="./main.ts"></script>
   </body>
 </html>
diff --git a/main.ts b/main.ts
index 8dacdc4..3fe2b27 100644
--- a/main.ts
+++ b/main.ts
@@ -6,6 +6,7 @@ import { Scenes } from './src/scenes/scenes';
 import store from './src/store';
 import { Companion, CompanionState } from './src/ui/companion';
 import { InfoMessage } from './src/ui/info';
+import { Intro } from './src/ui/intro';
 
 const sketch = (s: p5) => {
   // Scenes
@@ -16,6 +17,7 @@ const sketch = (s: p5) => {
     s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT);
     s.noCursor();
 
+    new Intro();
     new Companion();
     new InfoMessage();
 
diff --git a/src/store.ts b/src/store.ts
index 1e0b677..b79019f 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -9,6 +9,7 @@ import { getRevealablesforSubproject } from './helpers';
 import { SubProject } from './types';
 
 export interface State {
+  currentIntroStep: number;
   currentScene: Scenes;
   currentSubproject?: string;
   companionState: CompanionState;
@@ -24,6 +25,7 @@ export interface State {
 
 const store = create<State>(
   devtools((set) => ({
+    currentIntroStep: 1,
     currentScene: Scenes.OVERVIEW,
     currentSubproject: null,
     companionState: CompanionState.IDLE,
diff --git a/src/ui/intro.ts b/src/ui/intro.ts
new file mode 100644
index 0000000..ac54a6a
--- /dev/null
+++ b/src/ui/intro.ts
@@ -0,0 +1,60 @@
+import store from '../store';
+
+export class Intro {
+  currentStep: number;
+
+  nextButton: HTMLElement;
+  step1Container: HTMLElement;
+  step2Container: HTMLElement;
+  step3Container: HTMLElement;
+  step4Container: HTMLElement;
+
+  constructor() {
+    this.step1Container = document.getElementById('intro-step1');
+    this.step2Container = document.getElementById('intro-step2');
+    this.step3Container = document.getElementById('intro-step3');
+    this.step4Container = document.getElementById('intro-step4');
+    this.nextButton = document.getElementById('intro-button');
+
+    this.nextButton.addEventListener('click', this.onNextClick);
+
+    store.subscribe((state) => {
+      const currentStep = state.currentIntroStep;
+      this.showStep(currentStep);
+    });
+  }
+
+  private onNextClick() {
+    console.log('go next');
+
+    store.setState((state) => ({ currentIntroStep: state.currentIntroStep + 1 }));
+  }
+
+  private sendConsent() {}
+
+  private sendDemoographicData() {}
+
+  private showStep(stepToShow: number) {
+    if (stepToShow === 1) {
+      this.step1Container.style.display = 'flex';
+      this.step2Container.style.display = 'none';
+      this.step3Container.style.display = 'none';
+      this.step4Container.style.display = 'none';
+    } else if (stepToShow === 2) {
+      this.step1Container.style.display = 'none';
+      this.step2Container.style.display = 'flex';
+      this.step3Container.style.display = 'none';
+      this.step4Container.style.display = 'none';
+    } else if (stepToShow === 3) {
+      this.step1Container.style.display = 'none';
+      this.step2Container.style.display = 'none';
+      this.step3Container.style.display = 'flex';
+      this.step4Container.style.display = 'none';
+    } else if (stepToShow === 4) {
+      this.step1Container.style.display = 'none';
+      this.step2Container.style.display = 'none';
+      this.step3Container.style.display = 'none';
+      this.step4Container.style.display = 'flex';
+    }
+  }
+}
diff --git a/styles.scss b/styles.scss
index c254d7f..4b6effc 100644
--- a/styles.scss
+++ b/styles.scss
@@ -23,6 +23,20 @@ main {
 button {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
     'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+
+  padding: 6px 15px;
+  background-color: transparent;
+  border: 2px solid black;
+  border-radius: 5px;
+  font-weight: bold;
+  max-width: 180px;
+
+  &:hover {
+    cursor: pointer;
+    background-color: black;
+    color: white;
+  }
 }
 
 .ui {
@@ -211,6 +225,64 @@ button {
       }
     }
   }
+
+  #intro {
+    background-color: white;
+    position: fixed;
+    z-index: 10;
+    top: 50%;
+    left: 50%;
+    min-width: 60%;
+    max-width: 90%;
+    max-height: 90%;
+    overflow-y: auto;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    padding: 2.5rem 4rem;
+    border-radius: 15px;
+    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+
+    #intro-step1 {
+      display: flex;
+      flex-direction: column;
+
+      h3 {
+        margin: 0.6rem 0 0rem 0;
+      }
+
+      p {
+        margin: 0.6rem 0 1rem;
+      }
+
+      #intro-disclaimer {
+        background-color: #ffedd5;
+        color: #7c2d12;
+        padding: 4px 20px;
+        border-radius: 5px;
+        border-left: 7px solid #7c2d12;
+        margin-top: 15px;
+      }
+    }
+
+    #intro-step2 {
+      display: none;
+    }
+
+    #intro-step3 {
+      display: none;
+    }
+
+    #intro-step4 {
+      display: none;
+    }
+
+    #intro-button {
+      float: right;
+      margin-top: 25px;
+    }
+  }
 }
 
 #backdrop {
@@ -223,3 +295,14 @@ button {
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.7);
 }
+
+#intro-backdrop {
+  display: block;
+  position: fixed;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.95);
+}