diff --git a/pygeoapi/api.py b/pygeoapi/api.py
index 6906bbd..ce5724b 100644
--- a/pygeoapi/api.py
+++ b/pygeoapi/api.py
@@ -433,7 +433,7 @@ class API(object):
                 self.config['server']['url'], dataset, next_)
             }, {
             'type': 'application/json',
-            'title': 'Collection',
+            'title': self.config['datasets'][dataset]['title'],
             'rel': 'collection',
             'href': '{}/collections/{}'.format(
                 self.config['server']['url'], dataset)
@@ -525,8 +525,19 @@ class API(object):
             }, {
             'rel': 'collection',
             'type': 'application/json',
+            'title': self.config['datasets'][dataset]['title'],
             'href': '{}/collections/{}'.format(
                 self.config['server']['url'], dataset)
+            }, {
+            'rel': 'prev',
+            'type': 'application/json',
+            'href': '{}/collections/{}/items/{}'.format(
+                self.config['server']['url'], dataset, identifier)
+            }, {
+            'rel': 'next',
+            'type': 'application/json',
+            'href': '{}/collections/{}/items/{}'.format(
+                self.config['server']['url'], dataset, identifier)
             }
         ]
 
diff --git a/pygeoapi/static/css/default.css b/pygeoapi/static/css/default.css
index 8ee2565..7286aeb 100644
--- a/pygeoapi/static/css/default.css
+++ b/pygeoapi/static/css/default.css
@@ -1,39 +1,24 @@
-body {
-    background-color: #ffffff;
-    font-family: arial, verdana, sans-serif;
-    text-align: left;
-    float: left;
-}
 .flat {
     border: 0px;
 }
 header {
     display: inline-block;
 }
-table {
-    border-width: 2px;
-    border-spacing: 0px;
-    border-style: solid;
-    border-color: black;
-    border-collapse: collapse;
-    background-color: white;
+main {
+    background-color:white
 }
-    table th {
-    border-width: 4px;
-    padding: 5px;
-    border-style: solid;
-    border-color: gray;
-    background-color: white;
+
+.crumbs {
+    background-color:rgb(230, 230, 230);
+    padding: 6px;   
 }
-    table td {
-    border-width: 4px;
-    padding: 5px;
-    border-style: solid;
-    border-color: gray;
-    background-color: white;
-}
-.header-img {
-    float: left;
-    margin: 0px 15px 15px 0px;
-    border: 0;
+.crumbs a {
+    padding-left:10px;
+    color:black;
+    text-transform: capitalize;
 }
+
+#items-map {
+    width: 100%;
+    height: 400px;
+  }
\ No newline at end of file
diff --git a/pygeoapi/templates/base.html b/pygeoapi/templates/base.html
index c7e8a88..6287b72 100644
--- a/pygeoapi/templates/base.html
+++ b/pygeoapi/templates/base.html
@@ -3,9 +3,11 @@
   <head>
     <meta charset="{{ config['server']['encoding'] }}">
     <title>{% block title %}{{ config['metadata']['identification']['title'] }} -{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="language" content="{{ config['server']['language'] }}">
     <meta name="description" content="{{ config['metadata']['identification']['title'] }}">
     <meta name="keywords" content="{{ config['metadata']['identification']['keywords']|join(',') }}">
+    <link rel="stylesheet" href="https://unpkg.com/mini.css@3.0.1/dist/mini-default.min.css">
     <link rel="stylesheet" href="{{ config['server']['url'] }}/static/css/default.css">
     <!--[if lt IE 9]>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@@ -17,15 +19,39 @@
     {% endblock %}
   </head>
   <body>
-    <header>
-      <h1><a title="{{ config['metadata']['identification']['title'] }}" href="{{ config['server']['url'] }}/?f=html">{{ config['metadata']['identification']['title'] }}</a><a title="JSON" href="{{ config['server']['url'] }}/"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h1>
-      <span itemprop="description">{{ config['metadata']['identification']['description'] }}</span>
+    <header class="sticky row">
+      <div class="col-sm-12 col-md-10 col-md-offset-1">
+      <a role="button" title="{{ config['metadata']['identification']['description'] }}" href="{{ config['server']['url'] }}/?f=html">{{ config['metadata']['identification']['title'] }}</a>
+      <a href="#" role="button" style="float:right">Contact</a>
+      <a href="#" role="button" style="float:right">About</a>
+      </div>
     </header>
-    <hr/>
-    {% block body %}
-    {% endblock %}
-    <hr/>
-    <footer>Powered by <a title="pygeoapi" href="https://github.com/geopython/pygeoapi">pygeoapi</a> {{ version }}</footer>
+    <div class="sticky row crumbs">
+      <div class="col-sm-12 col-md-10 col-md-offset-1">
+        {% block crumbs %}
+        <a href="{{ config['server']['url'] }}">Home</a>
+        {% endblock %} 
+        <span style="float:right">
+          <a href="{{ data['links'] | map(rel='self') | attr('href') }}?f=json">JSON</a>
+        </span>
+      </div>
+    </div>
+    <main>
+    <div class="container">
+      <div class="row">
+        <div class="col-sm-12 col-md-10 col-md-offset-1">
+          <br/>
+          {% block body %}
+          {% endblock %}
+        </div>
+      </div>
+    </div>
+    </main>
+    <footer class="row bottom">
+        <div class="col-sm-12 col-md-10 col-md-offset-1">
+          Powered by <a title="pygeoapi" href="https://github.com/geopython/pygeoapi">pygeoapi</a> {{ version }}
+        </div>
+    </footer>   
     {% block extrafoot %}
     {% endblock %}
   </body>
diff --git a/pygeoapi/templates/collection.html b/pygeoapi/templates/collection.html
index 75f285e..8e03b77 100644
--- a/pygeoapi/templates/collection.html
+++ b/pygeoapi/templates/collection.html
@@ -1,10 +1,14 @@
 {% extends "base.html" %}
 {% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
+{% block crumbs %}{{ super() }} 
+<a href="../collections">Collections</a>       
+<a href="./{{ data['name'] }}">{{ data['title'] }}</a>
+{% endblock %}
 {% block body %}
     <section id="collection">
-      <h2>{{ data['title'] }}<a title="JSON" href="{{ config['server']['url'] }}/collections/{{ data['name'] }}"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
+      <h2>{{ data['title'] }}</h2>
       <div>{{ data['description'] }}</div>
-      <div><a title="Browse Features" href="{{ config['server']['url'] }}/collections/{{ data['name'] }}/items?f=html">Browse Features</a></div>
+      <div><a title="Browse Items" href="{{ config['server']['url'] }}/collections/{{ data['name'] }}/items?f=html">Browse</a> through the items of the collection {{ data['title'] }}</div>
       <h2>Links</h2>
       <ul>
       {% for link in data['links'] %}
diff --git a/pygeoapi/templates/collections.html b/pygeoapi/templates/collections.html
index 832074c..c90e460 100644
--- a/pygeoapi/templates/collections.html
+++ b/pygeoapi/templates/collections.html
@@ -1,11 +1,17 @@
 {% extends "base.html" %}
 {% block title %}{{ super() }} Collections {% endblock %}
+{% block crumbs %}{{ super() }} 
+<a href="./collections">Collections</a>       
+{% endblock %}
 {% block body %}
     <section id="collections">
-      <h2>Collections <a title="JSON" href="{{ config['server']['url'] }}/collections"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
+      <h2>Collections in this service</h2>
       <ul>
       {% for k, v in config['datasets'].items()%}
-          <li><a title="{{ v['title'] }}" href="{{ config['server']['url'] }}/collections/{{ k }}?f=html">{{ v['title'] }}</a></li>
+          <li>
+            <a title="{{ v['title'] }}" href="{{ config['server']['url'] }}/collections/{{ k }}?f=html">{{ v['title'] }}</a><br/>
+            {{ v['description'] }}
+          </li>
       {% endfor %}
       </ul>
     </section>
diff --git a/pygeoapi/templates/item.html b/pygeoapi/templates/item.html
index 327c601..9c0aee4 100644
--- a/pygeoapi/templates/item.html
+++ b/pygeoapi/templates/item.html
@@ -1,31 +1,47 @@
 {% extends "base.html" %}
 {% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
+{% block crumbs %}{{ super() }} 
+<a href="../../../collections">Collections</a>       
+{% for link in data['links'] %}
+  {% if link.rel == 'collection' %}
+    <a href="{{ link['href'] }}">{{ link['title'] }}</a>
+  {% endif %}
+{% endfor %}     
+<a href="../items">Items</a>
+<a href="./{{ data['ID'] }}">{{ data['title'] or data['ID'] }}</a>
+{% endblock %}
 {% block extrahead %}
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
-    <style>
-      #items {
-        width: 80%;
-      }
-      #items-map {
-        width: 400px;
-        height: 400px;
-      }
-    </style>
 {% endblock %}
 
 {% block body %}
     <section id="items">
-      <h2>{{ data['title'] }}</h2>
-      <span>{{ data['description'] }}</span>
-      <h2>Feature {{ data['ID'] }} <a title="JSON" href="./{{ data['ID']  }}"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
-      <table>
-        <tr>
-          <td><h3>Properties</h3>
+      <div class="row">
+        <div class="col-sm">
+          <h2>Item {{ data['ID'] }}</h2>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 col-sm-12">
+          <div id="items-map"></div>
+        </div>
+        <div class="col-md-6 col-sm-12">
             <table>
+              <thead>
+              <tr>
+                <th>Property</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>ID</td>
+                <td>{{ data.ID }}</td>
+              </tr>
               {% for k, v in data['properties'].items() %}
               <tr>
-                <th>{{ k }}</th>
+                <td>{{ k }}</td>
                 {% if k == 'links' %}
                 <td>
                     <ul>
@@ -39,13 +55,21 @@
                 {% endif %}
               </tr>
               {% endfor %}
+            </tbody>
             </table>
-          </td>
-          <td>
-            <div id="items-map"></div>
-          </td>
-        </tr>
-      </table>
+        </div>
+      </div>
+      <div class="row">
+          <div col-sm-12"> 
+          {% for link in data['links'] %}
+            {% if link['rel'] == 'prev' %}
+            <a role="button" href="{{ link['href'] }}&f=html">Prev</a>
+            {% elif link['rel'] == 'next' %}
+            <a role="button" href="{{ link['href'] }}&f=html">Next</a>
+            {% endif %}
+          {% endfor %}
+          </div>
+        </div>
     </section>
 {% endblock %}
 
diff --git a/pygeoapi/templates/items.html b/pygeoapi/templates/items.html
index 2c53eba..cb3da9d 100644
--- a/pygeoapi/templates/items.html
+++ b/pygeoapi/templates/items.html
@@ -1,32 +1,69 @@
 {% extends "base.html" %}
 {% block title %}{{ super() }} {{ data['title'] }} {% endblock %}
+{% block crumbs %}{{ super() }} 
+<a href="../../collections">Collections</a>       
+{% for link in data['links'] %}
+  {% if link.rel == 'collection' %}
+    <a href="{{ link['href'] }}">{{ link['title'] }}</a>
+  {% endif %}
+{% endfor %}      
+<a href="./items">Items</a>
+{% endblock %}
 {% block extrahead %}
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
-    <style>
-      #items {
-        width: 80%;
-      }
-      #items-map {
-        width: 100%;
-        height: 600px;
-      }
-    </style>
 {% endblock %}
 
 {% block body %}
     <section id="items">
-      <h2>{{ data['title'] }}</h2>
-      <span>{{ data['description'] }}</span>
-      <h2>Features <a title="JSON" href="./items"><img alt="JSON" src="{{ config['server']['url'] }}/static/img/json.png" width="30" height="30"/></a></h2>
-      {% for link in data['links'] %}
-        {% if link['rel'] == 'prev' %}
-        <a href="{{ link['href'] }}&f=html">Prev</a>
-        {% elif link['rel'] == 'next' %}
-        <a href="{{ link['href'] }}&f=html">Next</a>
-        {% endif %}
-      {% endfor %}
-      <div id="items-map"></div>
+      <div class="row col-sm-12">
+          <h2>Items</h2>
+      </div>
+
+    {% if data['features'] %}
+    <div class="row">
+      <div class="col-sm-12 col-md-6">
+        <div id="items-map"></div>
+      </div>  
+      <div class="col-sm-12 col-md-6">
+          <table>
+            <thead>
+            <tr>
+                <th>ID</th>
+                {% for k, v in data['features'][0]['properties'].items() %}
+                <th>{{ k }}</td>
+                {% endfor %}
+            </tr>
+          </thead>
+          <tbody>
+            {% for ft in data['features'] %}
+              <tr>
+                <td data-label="ID"><a href="items/{{ ft.ID }}">{{ ft.ID }}</a></td>
+                  {% for k, v in ft['properties'].items() %}
+                  <td data-label="{{ k }}">{{ v }}</td>
+                  {% endfor %}
+              </tr>
+            {% endfor %}
+          </tbody>
+          </table>  
+      </div>
+    </div>
+    {% else %}
+    <div class="row col-sm-12">
+        <p>No items</p>
+    </div>
+    {% endif %}
+    <div class="row">
+        <div col-sm-12"> 
+        {% for link in data['links'] %}
+          {% if link['rel'] == 'prev' %}
+          <a role="button" href="{{ link['href'] }}">Prev</a>
+          {% elif link['rel'] == 'next' %}
+          <a role="button" href="{{ link['href'] }}">Next</a>
+          {% endif %}
+        {% endfor %}
+        </div>
+      </div>
     </section>
 {% endblock %}
 
@@ -42,7 +79,7 @@
     var geojson_data = {{ data['features'] |to_json }};
     var items = new L.GeoJSON(geojson_data, {
         onEachFeature: function (feature, layer) {
-            var html_ = '<span><a target="_blank" href="items/' + feature.ID + '?f=html">' + feature.ID + '</a></span>';
+            var html_ = '<span><a href="items/' + feature.ID + '?f=html">' + feature.ID + '</a></span>';
             layer.bindPopup(html_);
         }
     });
diff --git a/pygeoapi/templates/root.html b/pygeoapi/templates/root.html
index 74d8498..e6c440c 100644
--- a/pygeoapi/templates/root.html
+++ b/pygeoapi/templates/root.html
@@ -11,10 +11,12 @@
       </table>
     </section>
     <section id="conformance">
-        <h2><a href="{{ config['server']['url'] }}/conformance?f=html">Conformance</a></h2>
+        <h2>Conformance</h2>
+        <a href="{{ config['server']['url'] }}/conformance?f=html">View the conformance classes of this service</a>
     </section>
     <section id="collections">
-        <h2><a href="{{ config['server']['url'] }}/collections?f=html">Collections</a></h2>
+        <h2>Collections</h2>
+        <a href="{{ config['server']['url'] }}/collections?f=html">View the collections in this service.</a>
     </section>
     <section id="links">
       <h2>Links</h2>
