diff --git a/tests/examples/shipment/templates/shipment/flow/start.html b/tests/examples/shipment/templates/shipment/flow/start.html
deleted file mode 100644
index dc7468e5..00000000
--- a/tests/examples/shipment/templates/shipment/flow/start.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends 'base.html' %}
-
-{% block content %}
-<h1>Shipment</h1>
-<form method="POST">
-{% csrf_token %}
-{{ form }}
-{{ activation.management_form }}
-<button type="submit" name="start" class="btn btn-default">Start</button>
-</form>
-{% endblock %}
diff --git a/tests/urls.py b/tests/urls.py
index 93676d1f..ecf4aba8 100644
--- a/tests/urls.py
+++ b/tests/urls.py
@@ -10,7 +10,7 @@
 
 urlpatterns = patterns('',  # NOQA
     url(r'^$', TemplateView.as_view(template_name='index.html')),
-    url(r'^viewflow/$', TemplateView.as_view(template_name='viewflow/base.html')),  # TODO remove
+    url(r'^viewflow/$', TemplateView.as_view(template_name='viewflow/process_index.html')),  # TODO remove
     url(r'^admin/', include(admin.site.urls)),
     url(r'^examples/shipment/', include('examples.shipment.urls')),
     url(r'^examples/helloworld/', include('examples.helloworld.urls')),
diff --git a/viewflow/templates/viewflow/base.html b/viewflow/templates/viewflow/base.html
index 4f24515f..bdfe5eee 100644
--- a/viewflow/templates/viewflow/base.html
+++ b/viewflow/templates/viewflow/base.html
@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Viewflow | Welcome</title>
         {% block css %}
+        <link rel="stylesheet" href="{% static 'viewflow/css/normalize.css' %}" />
         <link rel="stylesheet" href="{% static 'viewflow/css/foundation.min.css' %}" />
         <script src="{% static 'viewflow/js/modernizr.js' %}"></script>
         <style>
@@ -39,93 +40,15 @@
 
         {% endblock %}
 
-        {% block content %}
         <div class="row">
-            <ul class="breadcrumbs">
-                <li><a href="#">Home</a></li>
-                <li><a href="#">Sales approval process</a></li>
-                <li class="current"><a href="#">Assigned</a></li>
-            </ul>
-            {% block sidenav %}
-            <div class="panel large-3 medium-3 columns show-for-medium-up">
-                <ul class="side-nav">
-                    <li class="heading">Tasks</li>
-                    <li class="active">
-                        <a href="#">Assigned <span class="round alert label">10</span></a>
-                    </li>
-                    <li>
-                        <a href="#">Unassigned <span class="round secondary label">15</span></a>
-                    </li>
-                    <li class="divider"></li>
-                    <li>
-                        <a href="#">Finished <span class="round secondary label">0</span></a>
-                    </li>
-                    <li class="heading">Queues</li>
-                    <li>
-                        <a href="#">Waiting for sign <span class="round secondary label">0</span></a>
-                    </li>
-                    <li>
-                        <a href="#">Equipment deliver<span class="round secondary label">5</span></a>
-                    </li>
-                </ul>
-            </div>
-            {% endblock sidenav %}
+        {% block breadcrumbs %}
+        {% endblock breadcrumbs %}
+        </div>
 
-            {% block page_body %}
-            <div class="large-9 medium-9 columns">
-                <dl class="sub-nav stiky">
-                    <dt>Sort:</dt>
-                    <dd class="active"><a href="#">All</a></dd>
-                    <dd><a href="#">Active</a></dd>
-                    <dd><a href="#">Pending</a></dd>
-                    <dd><a href="#">Suspended</a></dd>
-                </dl>
-                <table>
-                    <thead>
-                        <tr>
-                            <th width="200">Table Header</th>
-                            <th>Table Header</th>
-                            <th width="150">Table Header</th>
-                            <th width="150">Table Header</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>Content Goes Here</td>
-                            <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
-                            <td>Content Goes Here</td>
-                            <td>Content Goes Here</td>
-                        </tr>
-                        <tr>
-                            <td>Content Goes Here</td>
-                            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
-                            <td>Content Goes Here</td>
-                            <td>Content Goes Here</td>
-                        </tr>
-                        <tr>
-                            <td>Content Goes Here</td>
-                            <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
-                            <td>Content Goes Here</td>
-                            <td>Content Goes Here</td>
-                        </tr>
-                    </tbody>
-                </table>
-                <ul class="pagination right">
-                    <li class="arrow unavailable"><a href="">&laquo;</a></li>
-                    <li class="current"><a href="">1</a></li>
-                    <li><a href="">2</a></li>
-                    <li><a href="">3</a></li>
-                    <li><a href="">4</a></li>
-                    <li class="unavailable"><a href="">&hellip;</a></li>
-                    <li><a href="">12</a></li>
-                    <li><a href="">13</a></li>
-                    <li class="arrow"><a href="">&raquo;</a></li>
-                </ul>
-            </div>
-            {% endblock %}
-            
-        </div>        
+        <div class="row">
+        {% block content %}
         {% endblock content%}
+        </div>
 
         <div style="position:fixed;bottom:0px;background: url({% static 'viewflow/img/topbar.png' '%});width:100%;height:13px"> </div>
         {% block js %}
diff --git a/viewflow/templates/viewflow/flow/start.html b/viewflow/templates/viewflow/flow/start.html
index 5f68e04d..0098d08e 100644
--- a/viewflow/templates/viewflow/flow/start.html
+++ b/viewflow/templates/viewflow/flow/start.html
@@ -1,12 +1,24 @@
-{% extends 'base.html' %}
+{% extends 'viewflow/base.html' %}
+
+
+{% block breadcrumbs %}
+<ul class="breadcrumbs">
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Sales approval process</a></li>
+    <li class="current"><a href="#">Start</a></li>
+</ul>
+{% endblock breadcrumbs %}
+
 
 {% block content %}
-<h1>Hello, world</h1>
-<p class="lead">Basic framework-less hello world sample</p>
-<form method="POST">
-{% csrf_token %}
-{{ form }}
-{{ activation.management_form }}
-<button type="submit" name="start" class="btn btn-default">Start</button>
-</form>
+<div class="large-6 large-centered columns panel">
+
+    <h4>Start sales approval</h4>
+    <form method="POST">
+        {% csrf_token %}
+        {{ form }}
+        {{ activation.management_form }}
+        <button type="submit" name="start" class="btn btn-default">Start</button>
+    </form>
+</div>
 {% endblock %}
diff --git a/viewflow/templates/viewflow/process_index.html b/viewflow/templates/viewflow/process_index.html
new file mode 100644
index 00000000..749503e4
--- /dev/null
+++ b/viewflow/templates/viewflow/process_index.html
@@ -0,0 +1,92 @@
+{% extends 'viewflow/base.html' %}
+
+{% block content %}
+
+{% block breadcrumbs %}
+<ul class="breadcrumbs">
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Sales approval process</a></li>
+    <li class="current"><a href="#">Assigned</a></li>
+</ul>
+{% endblock breadcrumbs %}
+
+{% block sidenav %}
+<div class="panel large-3 medium-3 columns show-for-medium-up">
+    <ul class="side-nav">
+        <li class="heading">Tasks</li>
+        <li class="active">
+            <a href="#">Assigned <span class="round alert label">10</span></a>
+        </li>
+        <li>
+            <a href="#">Unassigned <span class="round secondary label">15</span></a>
+        </li>
+        <li class="divider"></li>
+        <li>
+            <a href="#">Finished <span class="round secondary label">0</span></a>
+        </li>
+        <li class="heading">Queues</li>
+        <li>
+            <a href="#">Waiting for sign <span class="round secondary label">0</span></a>
+        </li>
+        <li>
+            <a href="#">Equipment deliver<span class="round secondary label">5</span></a>
+        </li>
+    </ul>
+</div>
+{% endblock sidenav %}
+
+{% block page_body %}
+<div class="large-9 medium-9 columns">
+    <dl class="sub-nav stiky">
+        <dt>Sort:</dt>
+        <dd class="active"><a href="#">All</a></dd>
+        <dd><a href="#">Active</a></dd>
+        <dd><a href="#">Pending</a></dd>
+        <dd><a href="#">Suspended</a></dd>
+    </dl>
+    <table>
+        <thead>
+            <tr>
+                <th width="200">Table Header</th>
+                <th>Table Header</th>
+                <th width="150">Table Header</th>
+                <th width="150">Table Header</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>Content Goes Here</td>
+                <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+                <td>Content Goes Here</td>
+                <td>Content Goes Here</td>
+            </tr>
+            <tr>
+                <td>Content Goes Here</td>
+                <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+                <td>Content Goes Here</td>
+                <td>Content Goes Here</td>
+            </tr>
+            <tr>
+                <td>Content Goes Here</td>
+                <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+                <td>Content Goes Here</td>
+                <td>Content Goes Here</td>
+            </tr>
+        </tbody>
+    </table>
+    <ul class="pagination right">
+        <li class="arrow unavailable"><a href="">&laquo;</a></li>
+        <li class="current"><a href="">1</a></li>
+        <li><a href="">2</a></li>
+        <li><a href="">3</a></li>
+        <li><a href="">4</a></li>
+        <li class="unavailable"><a href="">&hellip;</a></li>
+        <li><a href="">12</a></li>
+        <li><a href="">13</a></li>
+        <li class="arrow"><a href="">&raquo;</a></li>
+    </ul>
+</div>
+{% endblock %}
+
+</div>        
+{% endblock content%}