diff --git a/web/app/templates/playground/index.html.j2 b/web/app/templates/playground/index.html.j2
index 440e4cf7..7ed676de 100644
--- a/web/app/templates/playground/index.html.j2
+++ b/web/app/templates/playground/index.html.j2
@@ -1,7 +1,179 @@
 {% extends "nopaque.html.j2" %}
 
+{% set headline = 'Workflow' %}
+
 {% block page_content %}
+<div class="col s4">
+  <h5>Your data</h5>
+</div>
+<div class="col s4">
+  <div class="card hoverable">
+    <div class="card-content center-align">
+      <p>
+        <i class="material-icons large">account_circle</i>
+      </p>
+      <span class="card-title">You</span>
+    </div>
+  </div>
+</div>
+<div class="col s4 right-align">
+  <h5>Your goals</h5>
+</div>
+
 <div class="col s12">
-  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+  <h3>Process your data with nopaque</h3>
+</div>
+
+<div class="col s12"></div>
+
+<div class="col s4">
+  <div class="card hoverable" id="fs-trigger">
+    <div class="card-content">
+      <a class="btn-floating btn-large hoverable left" style="margin-right: 15px;">
+        <i class="material-icons service" data-service="file-setup"></i>
+      </a>
+      <span class="card-title">File setup<br><br></span>
+      <i>Prepare images for further processing</i>
+      <i class="material-icons medium teal-text hoverable" style="position: absolute; top: 40px; right: -40px; z-index: 9;">trending_flat</i>
+    </div>
+  </div>
+</div>
+
+<div class="col s4">
+  <div class="card hoverable" id="ocr-trigger">
+    <div class="card-content">
+      <a class="btn-floating btn-large hoverable left" style="margin-right: 15px;">
+        <i class="material-icons service" data-service="ocr"></i>
+      </a>
+      <span class="card-title">Optical Character Recognition</span>
+      <i>Convert image data into machine readable text</i>
+      <i class="material-icons medium teal-text hoverable" style="position: absolute; top: 40px; right: -40px; z-index: 9;">trending_flat</i>
+    </div>
+  </div>
+</div>
+
+<div class="col s4">
+  <div class="card hoverable" id="nlp-trigger">
+    <div class="card-content">
+      <a class="btn-floating btn-large left" style="margin-right: 15px;">
+        <i class="material-icons service" data-service="nlp"></i>
+      </a>
+      <span class="card-title">Natural Language Processing</span>
+      <i>Append linguistic informations to your text</i>
+    </div>
+  </div>
+</div>
+
+<div class="col s12 hide" id="fs-info">
+  <div class="card">
+    <div class="card-content">
+      <span class="card-title">More information</span>
+      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+      <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
+    </div>
+  </div>
+</div>
+
+<div class="col s12 hide" id="ocr-info">
+  <div class="card">
+    <div class="card-content">
+      <span class="card-title">More information</span>
+      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+      <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
+    </div>
+  </div>
+</div>
+
+<div class="col s12 hide" id="nlp-info">
+  <div class="card">
+    <div class="card-content">
+      <span class="card-title">More information</span>
+      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+      <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+      <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</p>
+    </div>
+  </div>
+</div>
+
+<script>
+  fileSetupTriggerElement = document.getElementById("fs-trigger");
+  fileSetupInfoElement = document.getElementById("fs-info");
+  oCRTriggerElement = document.getElementById("ocr-trigger");
+  oCRInfoElement = document.getElementById("ocr-info");
+  nLPTriggerElement = document.getElementById("nlp-trigger");
+  nLPInfoElement = document.getElementById("nlp-info");
+  fileSetupTriggerElement.addEventListener("click", () => {
+    fileSetupInfoElement.classList.remove("hide");
+    oCRInfoElement.classList.add("hide");
+    nLPInfoElement.classList.add("hide");
+  });
+  oCRTriggerElement.addEventListener("click", () => {
+    fileSetupInfoElement.classList.add("hide");
+    oCRInfoElement.classList.remove("hide");
+    nLPInfoElement.classList.add("hide");
+  });
+  nLPTriggerElement.addEventListener("click", () => {
+    fileSetupInfoElement.classList.add("hide");
+    oCRInfoElement.classList.add("hide");
+    nLPInfoElement.classList.remove("hide");
+  });
+</script>
+
+<div class="col s12">
+  <h3>Research process</h3>
+</div>
+
+<div class="col s2"></div>
+
+<div class="col s8">
+  <div class="card">
+    <div class="card-content">
+      <a class="btn-floating btn-large hoverable left" style="margin-right: 15px;">
+        <i class="material-icons service" data-service="corpus_analysis"></i>
+      </a>
+      <span class="card-title">Corpus analysis</span>
+      <i>Create as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags.</i>
+    </div>
+  </div>
+</div>
+
+<div class="col s12"></div>
+
+<div class="col s3">
+  <div class="card">
+    <div class="card-content">
+      <span class="card-title">Publish</span>
+      <i>Get information from your texts and open up new perspectives, this may lead to further analysis ideas.</i>
+    </div>
+  </div>
+</div>
+
+<div class="col s3">
+  <div class="card">
+    <div class="card-content">
+      <span class="card-title">Enlightment</span>
+      <i>Get information from your texts and open up new perspectives, this may lead to further analysis ideas.</i>
+    </div>
+  </div>
+</div>
+
+<div class="col s3">
+  <div class="card">
+    <div class="card-content">
+      <span class="card-title">Import/Export results</span>
+      <i>You can export your query results and share it with others or view results from your research partners.</i>
+    </div>
+  </div>
+</div>
+
+<div class="col s3">
+  <div class="card">
+    <div class="card-content">
+      <span class="card-title">Stuff</span>
+      <i>You can export your query results and share it with others or view results from your research partners.</i>
+    </div>
+  </div>
 </div>
 {% endblock %}