diff --git a/app/templates/404.html b/app/templates/404.html
new file mode 100644
index 0000000..f709b07
--- /dev/null
+++ b/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/app/templates/about.html b/app/templates/about.html
new file mode 100644
index 0000000..7a19a48
--- /dev/null
+++ b/app/templates/about.html
@@ -0,0 +1,3 @@
+{% extends "base.html" %}
+{% block content %}
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/admin/index.html b/app/templates/admin/index.html
new file mode 100644
index 0000000..220d92f
--- /dev/null
+++ b/app/templates/admin/index.html
@@ -0,0 +1,20 @@
+{% extends 'admin/master.html' %}
+{% block body %}
+{{ super() }}
+<div class="row">
+<div class="span10 offset1">
+<h1>Flask-Admin example</h1>
+<p class="lead">
+Simple admin views, not related to models.
+</p>
+<p>
+This example shows how to add your own views to the admin interface. The views do not have to be associated
+to any of your models, and you can fill them with whatever content you want.
+</p>
+<p>
+By adding custom views to the admin interface, they become accessible through the <em>navbar</em> at the top.
+</p>
+<a class="btn btn-primary" href="/"><i class="icon-arrow-left icon-white"></i> Back</a>
+</div>
+</div>
+{% endblock body %}
\ No newline at end of file
diff --git a/app/templates/base.html b/app/templates/base.html
new file mode 100644
index 0000000..1ef9290
--- /dev/null
+++ b/app/templates/base.html
@@ -0,0 +1,103 @@
+<!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='bootstrap/js/bootstrap.min.js') }}"></script>
+    <link href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='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 ('logout') }}">logout</a>)
+            {% else %}
+                <a href="{{ url_for ('login') }}">{{ _('login') }}</a> / <a href="{{ url_for ('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 %}
+    <div id="sidebar-wrapper">
+        <ul class="sidebar-nav nav">
+            <li class="sidebar-brand"></li>
+            <li class="active"><a href="/">Home</a></li>
+            <li><a href="{{ url_for('profile')}}">User Management</a></li>
+            <li><a href="{{ url_for('index')}}">Resource Management</a></li>
+            <li><a href="{{ url_for('index')}}">OAuth-Token Management</a></li>
+            <li><a href="{{ url_for('search')}}">Query Analysis</a></li>
+            <li><a href="{{ url_for('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/app/templates/flash_messages.html b/app/templates/flash_messages.html
new file mode 100644
index 0000000..b2c6a5d
--- /dev/null
+++ b/app/templates/flash_messages.html
@@ -0,0 +1,10 @@
+{% with messages = get_flashed_messages(with_categories=true) %}
+{% if messages %}
+{% for category, message in messages %}
+<div class="alert alert-{{ category }}" role="alert">
+    <span class="sr-only">{{ category }}:</span>
+    {{ message }}
+</div>
+{% endfor %}
+{% endif %}
+{% endwith %}
\ No newline at end of file
diff --git a/app/templates/formerrors.html b/app/templates/formerrors.html
new file mode 100644
index 0000000..3f20a8a
--- /dev/null
+++ b/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/app/templates/forms.html b/app/templates/forms.html
new file mode 100644
index 0000000..1ecf2b1
--- /dev/null
+++ b/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/app/templates/index.html b/app/templates/index.html
new file mode 100644
index 0000000..9c6a4ed
--- /dev/null
+++ b/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/app/templates/login.html b/app/templates/login.html
new file mode 100644
index 0000000..c1e8d15
--- /dev/null
+++ b/app/templates/login.html
@@ -0,0 +1,18 @@
+{% 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')) }}
+<!--
+<form action="{{ url_for('login') }}" method='POST' class="form-horizontal" role="form">
+    {% include 'forms.html' %}
+</form>
+-->
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/macros.html b/app/templates/macros.html
new file mode 100644
index 0000000..0a33cb3
--- /dev/null
+++ b/app/templates/macros.html
@@ -0,0 +1,100 @@
+{# 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>
+</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_='', 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" class="{{ btn_class }}">{{ action_text }}</button>
+</form>
+{%- endmacro %}
\ No newline at end of file
diff --git a/app/templates/profile.html b/app/templates/profile.html
new file mode 100644
index 0000000..871047c
--- /dev/null
+++ b/app/templates/profile.html
@@ -0,0 +1,24 @@
+{% 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', action_text=_('update')) }}
+
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/search.html b/app/templates/search.html
new file mode 100644
index 0000000..0e7aa76
--- /dev/null
+++ b/app/templates/search.html
@@ -0,0 +1,42 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+<h2>Query Analysis</h2>
+<form id="form-inline" action="{{ url_for ('search') }}" method="GET">
+    <div class="form-group">
+        <input type="text" 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;">
+            {% for key, value in lang.iteritems() %}
+            <option value="{{ key }}"
+                    {% if ql== key %}selected="selected" {% endif %}>{{ value }}
+            </option>
+            {% endfor %}
+        </select>
+    </div>
+    <button type="submit" id="search" class="btn btn-primary">Search
+    </button>
+
+</form>
+{% include 'flash_messages.html' %}
+{% if result %}
+<p id="notification">
+    <a href="#" id="show" style="font-weight:bold;"
+       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/app/templates/signup.html b/app/templates/signup.html
new file mode 100644
index 0000000..5dd47c1
--- /dev/null
+++ b/app/templates/signup.html
@@ -0,0 +1,15 @@
+{% 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', btn_class='btn btn-primary',
+   action_text=_('sign up')) }}
+<!--
+<form action="{{ url_for('signup') }}" method="POST" class="form-horizontal" role="form">
+   {% include 'forms.html' %}
+</form>
+-->
+{% endblock %}
\ No newline at end of file