diff --git a/web/app/templates/_roadmap.html.j2 b/web/app/templates/_roadmap.html.j2
deleted file mode 100644
index da756093b3bfd1c26c26203cb8be7d31361756e6..0000000000000000000000000000000000000000
--- a/web/app/templates/_roadmap.html.j2
+++ /dev/null
@@ -1,28 +0,0 @@
-{% if current_user.is_authenticated %}
-<ul class="tabs tabs-transparent">
-  <li class="tab disabled"><a><i class="material-icons left">explore</i>Roadmap</a></li>
-  <li class="tab"><a{%if request.path == url_for('services.service', service='file-setup') %} class="active"{% endif %} href="{{ url_for('services.service', service='file-setup') }}" target="_self">File setup</a></li>
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  <li class="tab"><a{%if request.path == url_for('services.service', service='ocr') %} class="active"{% endif %} href="{{ url_for('services.service', service='ocr') }}" target="_self">OCR</a></li>
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  <li class="tab"><a{%if request.path == url_for('services.service', service='nlp') %} class="active"{% endif %} href="{{ url_for('services.service', service='nlp') }}" target="_self">NLP</a></li>
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  <li class="tab"><a{%if request.path == url_for('corpora.add_corpus') %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus') }}" target="_self">Add corpus</a></li>
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  {% if corpus %}
-  <li class="tab"><a{%if request.path == url_for('corpora.add_corpus_file', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" target="_self">Add corpus file(s)</a></li>
-  {% else %}
-  <li class="tab disabled tooltipped" data-tooltip="Select a corpus first"><a>Add corpus file(s)</a></li>
-  {% endif %}
-  <li class="tab disabled"><i class="material-icons">navigate_next</i></li>
-  {% if corpus %}
-  {% if corpus.files.all() %}
-  <li class="tab"><a{%if request.path == url_for('corpora.analyse_corpus', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" target="_self">Corpus analysis</a></li>
-  {% else %}
-  <li class="tab disabled tooltipped" data-tooltip="Add at least one corpus file first"><a>Corpus analysis</a></li>
-  {% endif %}
-  {% else %}
-  <li class="tab disabled tooltipped" data-tooltip="Select a corpus first"><a>Corpus analysis</a></li>
-  {% endif %}
-</ul>
-{% endif %}
diff --git a/web/app/templates/nopaque.html.j2 b/web/app/templates/nopaque.html.j2
index 5b9a600bc29c3b546cf46d03d83eda21821e67c7..af54a719c63b2ab579c3e2bb1f465d0c55e7a0da 100644
--- a/web/app/templates/nopaque.html.j2
+++ b/web/app/templates/nopaque.html.j2
@@ -100,6 +100,9 @@
     </div>
     <div class="nav-content">
       {% block nav_content %}{% endblock nav_content %}
+      {% if current_user.is_authenticated %}
+      <a class="btn-floating btn-large halfway-fab modal-trigger tooltipped waves-effect waves-light" data-tooltip="Roadmap" href="#roadmap-modal"><i class="material-icons">explore</i></a>
+      {% endif %}
     </div>
   </nav>
 </div>
@@ -153,7 +156,38 @@
 {% block main_attribs %} class="grey lighten-5"{% endblock main_attribs %}
 
 {% block main %}
-  {% block page_content %}{% endblock page_content %}
+{% block page_content %}{% endblock page_content %}
+{% if current_user.is_authenticated %}
+<div id="roadmap-modal" class="modal">
+  <div class="modal-content">
+    <h2><i class="material-icons">explore</i>Roadmap</h2>
+    <p>The roadmap guides you through nopaque's workflow! If you have the necessary input fie formats, you can directly jump into the corresponding process. If not, you can use the roadmap to jump right to the preceding process.</p>
+    <ul class="tabs tabs-fixed-width">
+      <li class="tab"><a{%if request.path == url_for('services.service', service='file-setup') %} class="active"{% endif %} href="{{ url_for('services.service', service='file-setup') }}" target="_self">File setup</a></li>
+      <li class="tab"><a{%if request.path == url_for('services.service', service='ocr') %} class="active"{% endif %} href="{{ url_for('services.service', service='ocr') }}" target="_self">OCR</a></li>
+      <li class="tab"><a{%if request.path == url_for('services.service', service='nlp') %} class="active"{% endif %} href="{{ url_for('services.service', service='nlp') }}" target="_self">NLP</a></li>
+      <li class="tab"><a{%if request.path == url_for('corpora.add_corpus') %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus') }}" target="_self">Add corpus</a></li>
+      {% if corpus %}
+      <li class="tab"><a{%if request.path == url_for('corpora.add_corpus_file', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.add_corpus_file', corpus_id=corpus.id) }}" target="_self">Add corpus file(s)</a></li>
+      {% else %}
+      <li class="tab disabled tooltipped" data-tooltip="Select a corpus first" target="_self"><a>Add corpus file(s)</a></li>
+      {% endif %}
+      {% if corpus %}
+      {% if corpus.files.all() %}
+      <li class="tab"><a{%if request.path == url_for('corpora.analyse_corpus', corpus_id=corpus.id) %} class="active"{% endif %} href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" target="_self">Corpus analysis</a></li>
+      {% else %}
+      <li class="tab disabled tooltipped" data-tooltip="Add at least one corpus file first"><a>Corpus analysis</a></li>
+      {% endif %}
+      {% else %}
+      <li class="tab disabled tooltipped" data-tooltip="Select a corpus first"><a>Corpus analysis</a></li>
+      {% endif %}
+    </ul>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
+  </div>
+</div>
+{% endif %}
 {% endblock main %}
 
 {% block footer_attribs %} class="page-footer footer-color"{% endblock footer_attribs %}