diff --git a/service/app/templates/404.html b/service/app/templates/404.html
new file mode 100644
index 0000000..f709b07
--- /dev/null
+++ b/service/app/templates/404.html
@@ -0,0 +1,4 @@
+{% extends "base.html" %}
+{% block content %}
+<p class="warning">The path you requested could not be found!</p>
+{% endblock %}
\ No newline at end of file
diff --git a/service/app/templates/about.html b/service/app/templates/about.html
new file mode 100644
index 0000000..7a19a48
--- /dev/null
+++ b/service/app/templates/about.html
@@ -0,0 +1,3 @@
+{% extends "base.html" %}
+{% block content %}
+{% endblock %}
\ No newline at end of file
diff --git a/service/app/templates/admin/index.html b/service/app/templates/admin/index.html
new file mode 100644
index 0000000..8e49d5e
--- /dev/null
+++ b/service/app/templates/admin/index.html
@@ -0,0 +1,4 @@
+{% extends 'admin/master.html' %}
+{% block body %}
+    Hello World from MyView!
+{% endblock %}
\ No newline at end of file
diff --git a/service/app/templates/base.html b/service/app/templates/base.html
new file mode 100755
index 0000000..bd390b6
--- /dev/null
+++ b/service/app/templates/base.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8"/>
+<head>
+    <script src="http://code.jquery.com/jquery-latest.min.js"
+            type="text/javascript"></script>
+    <!-- to be able to handle show/hide links in all subclasses -->
+    <script>
+
+    $(function() {
+        $("a#show").bind("click", function() {
+            $("#message").toggle();
+        });
+    });
+
+    </script>
+    <script>
+$(document).ready(function() {
+     $("#menu-toggle").click(function(e) {
+        e.preventDefault();
+        $("#wrapper").toggleClass("toggled");
+        });
+    });
+
+    </script>
+    <!-- bootstrap -->
+    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
+    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" media="all"/>
+
+    <div id="heading">
+        <span id="loginSpan">
+            {% if current_user.is_authenticated() %}
+                <label>{{ _('logged in as') }} {{current_user.username }}</label> (<a href="{{ url_for('user.logout') }}">logout</a>)
+            {% else %}
+                <a href="{{ url_for ('user.login') }}">{{ _('login') }}</a> / <a href="{{ url_for('user.signup') }}">{{ _('sign
+            up') }}</a>
+            {% endif %}
+        </span>
+        <a href="#menu-toggle" id="menu-toggle">
+            <img id="logo" src="{{ url_for('static', filename='korap-logo.svg') }}" alt="IDS Mannheim Logo"
+                 class="img-rounded">
+        </a>
+
+        <h2>{{ _("korap.title") }}</h2>
+    </div>
+    {% block head %}
+    {% endblock %}
+</head>
+<body>
+<div id="wrapper" class="toggled">
+    <!-- sidebar  -->
+    {% block sidebar %}
+    <!--
+        <a class="glyphicon glyphicon-list" aria-hidden="true" href="#menu-toggle" id="menu-toggle"></a>
+    -->
+    <div id="sidebar-wrapper">
+        <ul class="sidebar-nav nav">
+            <li class="sidebar-brand"></li>
+            <li class="active"><a href="{{ url_for('app.index')}}">Home</a></li>
+            <li><a href="{{ url_for('user.profile')}}">User Management</a></li>
+            <li><a href="{{ url_for('app.index')}}">Resource Management</a></li>
+            <li><a href="{{ url_for('app.index')}}">OAuth-Token Management</a></li>
+            <li><a href="{{ url_for('app.search')}}">Query Analysis</a></li>
+            <li><a href="{{ url_for('app.index')}}">Query Serialization</a></li>
+        </ul>
+    </div>
+    {% endblock %}
+    <div id="page-content-wrapper">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-md-11 content">
+                    {% if error %}
+                    <p class="warning">{{ error }}</p>
+                    {% else %}
+                    {% block content %}{% endblock %}
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+</body>
+<footer>
+    <!-- /.col-xs-12 main -->
+    <a class="footer" href="#">Impressum</a>
+    <a class="footer" href="#">About</a>
+    <a class="footer" href="#">Contact</a>
+
+</footer>
+</body>
+</html>
diff --git a/service/app/templates/email.html b/service/app/templates/email.html
new file mode 100644
index 0000000..2f80e8b
--- /dev/null
+++ b/service/app/templates/email.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+</head>
+<style>
+    body {
+        background-color: green;
+        }
+
+    .content {
+        margin: 10pt;
+        padding:3pt 14pt;
+        background-color: white;
+        border-radius: 25pt;
+
+    }
+</style>
+<body>
+<div class="content">
+
+<h1>[: message.header :]</h1>
+
+<p>You successfully registered for KorAP. In order to finish the registration process, please use this link:
+%% body.confirm %%. This link will expire ...</p>
+
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/service/app/templates/flash_messages.html b/service/app/templates/flash_messages.html
new file mode 100644
index 0000000..fc5cd84
--- /dev/null
+++ b/service/app/templates/flash_messages.html
@@ -0,0 +1,13 @@
+{% with messages = get_flashed_messages(with_categories=true) %}
+{% if messages %}
+{% for category, message in messages %}
+<div class="alert alert-{{ category }}" role="alert">
+    {% if category == 'danger' %}
+    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+    {% endif %}
+    <span class="sr-only">{{ category }}:</span>
+    {{ message }}
+</div>
+{% endfor %}
+{% endif %}
+{% endwith %}
\ No newline at end of file
diff --git a/service/app/templates/formerrors.html b/service/app/templates/formerrors.html
new file mode 100644
index 0000000..3f20a8a
--- /dev/null
+++ b/service/app/templates/formerrors.html
@@ -0,0 +1,11 @@
+{% if form.errors %}
+<div class="alert alert-danger" role="alert">
+    {% for field in form %}
+    {% for message in field.errors %}
+    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
+    <span class="sr-only">Error:</span>
+    {{ message }} <br>
+    {% endfor %}
+    {% endfor %}
+</div>
+{% endif %}
\ No newline at end of file
diff --git a/service/app/templates/forms.html b/service/app/templates/forms.html
new file mode 100644
index 0000000..1ecf2b1
--- /dev/null
+++ b/service/app/templates/forms.html
@@ -0,0 +1,20 @@
+<fieldset>
+    {{ form.hidden_tag() }}
+    {% for field in form %}
+    <div class="pure-control-group">
+        {% if field.id != 'csrf_token' %}
+            {{ field.label(class_='label-control text-capitalize') }}
+            {% if field.id != 'confirm' and field.type != 'radio' %}
+                {{ field(class_='form-control') }}
+            {% elif field.id == 'confirm' %}
+                <span style="padding:25pt;">
+                    {{ field(class_='form-control') }}
+                </span>
+            {% elif field.type == 'radio' %}
+                {{ field(class_='radio-inline') }}
+            {% endif %}
+        {% endif %}
+    </div>
+    {% endfor %}
+    <button type="submit" style="margin:10pt auto;" class="btn btn-primary text-capitalize">{{ submit }}</button>
+</fieldset>
\ No newline at end of file
diff --git a/service/app/templates/index.html b/service/app/templates/index.html
new file mode 100644
index 0000000..9c6a4ed
--- /dev/null
+++ b/service/app/templates/index.html
@@ -0,0 +1,39 @@
+{% extends "base.html" %}
+{% block content %}
+
+<h1>Lorem ispum</h1>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in nisi eu arcu tempus vehicula.
+    Nulla faucibus cursus metus in sagittis. Nunc elit leo, imperdiet in ligula in, euismod varius est.
+    Aenean pellentesque lorem a porttitor placerat. Vestibulum placerat nunc ac rutrum fringilla. Donec
+    arcu leo, tempus adipiscing volutpat id, congue in purus. Pellentesque scelerisque mattis nibh vel
+    semper. Sed a risus purus. Fusce pulvinar, velit eget rhoncus facilisis, enim elit vulputate nisl, a
+    euismod diam metus eu enim. Nullam congue justo vitae justo accumsan, sit amet malesuada nulla sagittis.
+    Nam neque tellus, tristique in est vel, sagittis congue turpis. Aliquam nulla lacus, laoreet dapibus
+    odio vitae, posuere volutpat magna. Nam pulvinar lacus in sapien feugiat, sit amet vestibulum enim
+    eleifend. Integer sit amet ante auctor, lacinia sem quis, consectetur nulla.</p>
+
+<p>Vestibulum porttitor massa eget pellentesque eleifend. Suspendisse tempor, nisi eu placerat auctor,
+    est erat tempus neque, pellentesque venenatis eros lorem vel quam. Nulla luctus malesuada porttitor.
+    Fusce risus mi, luctus scelerisque hendrerit feugiat, volutpat gravida nisi. Quisque facilisis risus
+    in lacus sagittis malesuada. Suspendisse non purus diam. Nunc commodo felis sit amet tortor
+    adipiscing varius. Fusce commodo nulla quis fermentum hendrerit. Donec vulputate, tellus sed
+    venenatis sodales, purus nibh ullamcorper quam, sit amet tristique justo velit molestie lorem.</p>
+
+<p>Fusce sollicitudin lacus lacinia mi tincidunt ullamcorper. Aenean velit ipsum, vestibulum nec
+    tincidunt eu, lobortis vitae erat. Nullam ultricies fringilla ultricies. Sed euismod nibh quis
+    tincidunt dapibus. Nulla quam velit, porta sit amet felis eu, auctor fringilla elit. Donec
+    convallis tincidunt nibh, quis pellentesque sapien condimentum a. Phasellus purus dui, rhoncus
+    id suscipit id, ornare et sem. Duis aliquet posuere arcu a ornare. Pellentesque consequat libero
+    id massa accumsan volutpat. Fusce a hendrerit lacus. Nam elementum ac eros eu porttitor.
+    Phasellus enim mi, auctor sit amet luctus a, commodo fermentum arcu. In volutpat scelerisque
+    quam, nec lacinia libero.</p>
+
+<p>Aliquam a lacinia orci, iaculis porttitor neque. Nullam cursus dolor tempus mauris posuere, eu
+    scelerisque sem tincidunt. Praesent blandit sapien at sem pulvinar, vel egestas orci varius.
+    Praesent vitae purus at ante aliquet luctus vel quis nibh. Mauris id nulla vitae est lacinia
+    rhoncus a vel justo. Donec iaculis quis sapien vel molestie. Aliquam sed elementum orci.
+    Vestibulum tristique tempor risus et malesuada. Sed eget ligula sed quam placerat dapibus.
+    Integer accumsan ac massa at tempus.</p>
+
+{% endblock %}
diff --git a/service/app/templates/login.html b/service/app/templates/login.html
new file mode 100644
index 0000000..3c94c0e
--- /dev/null
+++ b/service/app/templates/login.html
@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+{% from 'macros.html' import render_form %}
+{% block head %}
+<!-- always set title, so browser tabs can be identified! -->
+<title>KorAP login</title>
+{% endblock %}
+{% block content %}
+<h2>Sign In</h2>
+{% include 'flash_messages.html' %}
+
+{{ render_form(form, action_url=url_for('.login'), method='POST', btn_class='btn btn-primary',
+action_text=_('sign in')) }}
+{% endblock %}
\ No newline at end of file
diff --git a/service/app/templates/macros.html b/service/app/templates/macros.html
new file mode 100644
index 0000000..2d1c62a
--- /dev/null
+++ b/service/app/templates/macros.html
@@ -0,0 +1,107 @@
+{# Renders field for bootstrap 3 standards.
+
+Params:
+field - WTForm field
+kwargs - pass any arguments you want in order to put them into the html attributes.
+There are few exceptions: for - for_, class - class_, class__ - class_
+
+Example usage:
+{{ macros.render_field(form.email, placeholder='Input email', type='email') }}
+#}
+{% macro render_field(field, label_visible=true) -%}
+
+<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
+    {% if (field.type != 'HiddenField' or field.type !='CSRFTokenField') and label_visible %}
+    <label for="{{ field.id }}" class="control-label">{{ field.label }}</label>
+    {% endif %}
+    {{ field(class_='form-control text-capitalized', **kwargs) }}
+    {% if field.errors %}
+    {% for e in field.errors %}
+    <p class="help-block">{{ e }}</p>
+    {% endfor %}
+    {% endif %}
+</div>
+{%- endmacro %}
+
+{# Renders checkbox fields since they are represented differently in bootstrap
+Params:
+field - WTForm field (there are no check, but you should put here only BooleanField.
+kwargs - pass any arguments you want in order to put them into the html attributes.
+There are few exceptions: for - for_, class - class_, class__ - class_
+
+Example usage:
+{{ macros.render_checkbox_field(form.remember_me) }}
+#}
+{% macro render_checkbox_field(field) -%}
+<div class="checkbox">
+    <label>
+        {{ field(type='checkbox', **kwargs) }} {{ field.label }}
+    </label>
+</div>
+{%- endmacro %}
+
+{# Renders radio field
+Params:
+field - WTForm field (there are no check, but you should put here only BooleanField.
+kwargs - pass any arguments you want in order to put them into the html attributes.
+There are few exceptions: for - for_, class - class_, class__ - class_
+
+Example usage:
+{{ macros.render_radio_field(form.answers) }}
+#}
+{% macro render_radio_field(field) -%}
+{% for value, label, _ in field.iter_choices() %}
+<div class="radio" style="margin:8pt auto;">
+    <label>
+        <input type="radio" name="{{ field.id }}" id="{{ field.id }}" value="{{ value }}">{{ label }}
+    </label>
+    {% if field.errors %}
+    {% for e in field.errors %}
+    <p class="help-block">{{ e }}</p>
+    {% endfor %}
+    {% endif %}
+</div>
+{% endfor %}
+{%- endmacro %}
+
+
+{# Renders WTForm in bootstrap way. There are two ways to call function:
+- as macros: it will render all field forms using cycle to iterate over them
+- as call: it will insert form fields as you specify:
+e.g. {% call macros.render_form(form, action_url=url_for('.login_view'), action_text='Login',
+class_='login-form') %}
+{{ macros.render_field(form.email, placeholder='Input email', type='email') }}
+{{ macros.render_field(form.password, placeholder='Input password', type='password') }}
+{{ macros.render_checkbox_field(form.remember_me, type='checkbox') }}
+{% endcall %}
+
+Params:
+form - WTForm class
+method - form method
+action_url - url where to submit this form
+action_text - text of submit button
+class_ - sets a class for form
+#}
+{% macro render_form(form, action_url='', method='POST', action_text='Submit', class_='', disabled=False,
+btn_class='btn btn-default') -%}
+
+<form method="{{ method }}" action="{{ action_url }}" role="form" class="{{ class_ }}">
+    {{ form.hidden_tag() if form.hidden_tag }}
+    {% if caller %}
+        {{ caller() }}
+    {% else %}
+    {% for f in form %}
+    {% if f.id != 'csrf_token' %}
+        {% if f.type == 'BooleanField' %}
+            {{ render_checkbox_field(f) }}
+        {% elif f.type == 'RadioField' %}
+            {{ render_radio_field(f) }}
+        {% else %}
+            {{ render_field(f) }}
+        {% endif %}
+    {% endif %}
+    {% endfor %}
+    {% endif %}
+    <button type="submit" {% if disabled %} disabled {% endif %} class="{{ btn_class }}">{{ action_text }}</button>
+</form>
+{%- endmacro %}
\ No newline at end of file
diff --git a/service/app/templates/profile.html b/service/app/templates/profile.html
new file mode 100644
index 0000000..cdfc900
--- /dev/null
+++ b/service/app/templates/profile.html
@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% block head %}
+<script type="text/javascript">
+$(document).ready(function(){
+    $('[data-toggle="tooltip"]').tooltip({
+        placement : 'top',
+        float : 'left'
+    });
+});
+
+
+</script>
+{% endblock %}
+{% block content %}
+<h1>User information</h1>
+{% include 'flash_messages.html' %}
+
+{% if message %}
+<p class="success">{{ message }}</p>
+{% endif %}
+
+{% from 'macros.html' import render_form %}
+{{ render_form(form, action_url=url_for('.profile'), method='POST', btn_class='btn btn-primary', disabled= error,
+action_text=_('update')) }}
+
+{% endblock %}
\ No newline at end of file
diff --git a/service/app/templates/search.html b/service/app/templates/search.html
new file mode 100644
index 0000000..867175f
--- /dev/null
+++ b/service/app/templates/search.html
@@ -0,0 +1,63 @@
+{% extends "base.html" %}
+
+{% block head %}
+<script>
+        $("#prev").bind("click", function() {
+            elem = document.getElementbyId('prev');
+            elem.value = elem.value-1;
+            console.log("the value"+elem.value);
+
+        });
+
+</script>
+{% endblock %}
+{% block content %}
+
+<h2>Query Analysis</h2>
+<form class="form-inline" id="search_form" action="{{ url_for ('.search') }}" method="GET">
+    <div class="form-group" style="width:50%;">
+        <input type="text" style="width:100%;" class="form-control" name="q" required=""
+               placeholder="Query ..."
+               value="{% if q %} {{ q }} {% endif %}">
+    </div>
+    <div class="form-group">
+        <select name="ql" id="queryLanguage" style="margin:auto 5pt;" class="form-control">
+            {% for key, value in lang.iteritems() %}
+            <option value="{{ key }}"
+                    {% if ql== key %}selected="selected" {% endif %}>{{ value }}
+            </option>
+            {% endfor %}
+        </select>
+    </div>
+    <input type="hidden" id="page" value="1">
+    <button type="submit" id="search" class="btn btn-sm btn-primary">Search
+    </button>
+    {% if result.matches %}
+    <ul class="pager">
+        <li class="previous">
+            <a id="prev" role="button">&larr; Prev</a>
+        </li>
+        <li class="next">
+            <a id="next" role="button">Next &rarr;</a>
+        </li>
+    </ul>
+    {% endif %}
+</form>
+{% include 'flash_messages.html' %}
+{% if result %}
+<p id="notification">
+    <a href="#" id="show" style="font-weight:bold;text-align:right;"
+       title="Display raw JSON">Found {{ result.totalResults | default("0") }} matches</a>
+</p>
+{% autoescape off %}
+<pre id="message" class="i-layout" style="display:none;">
+    {{ result_string | safe }}
+</pre>
+{% for entry in result.matches %}
+<div class="matches">
+    {{ entry.snippet }}
+</div>
+{% endfor %}
+{% endautoescape %}
+{% endif %}
+{% endblock %}
\ No newline at end of file
diff --git a/service/app/templates/signup.html b/service/app/templates/signup.html
new file mode 100644
index 0000000..cfd0614
--- /dev/null
+++ b/service/app/templates/signup.html
@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+{% from 'macros.html' import render_form %}
+
+{% block content %}
+<h2>Sign up</h2>
+{% include 'flash_messages.html' %}
+
+{{ render_form(form, action_url=url_for('.signup'), method='POST', disabled= error, btn_class='btn btn-primary',
+action_text=_('sign up')) }}
+{% endblock %}
\ No newline at end of file