diff --git a/frontend/App.vue b/frontend/App.vue
index 9ab2c3d..5a678bf 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -1,47 +1,6 @@
 <template>
 <div>
 
-  <nav id="nav" class="navbar navbar-expand navbar-light bg-light">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="/">osm.wikidata.link</a>
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        <li class="nav-item">
-          <a class="nav-link active" aria-current="page" href="#">Home</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="#">Link</a>
-        </li>
-        <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-            Dropdown
-          </a>
-          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-            <li><a class="dropdown-item" href="#">Action</a></li>
-            <li><a class="dropdown-item" href="#">Another action</a></li>
-            <li><hr class="dropdown-divider"></li>
-            <li><a class="dropdown-item" href="#">Something else here</a></li>
-          </ul>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-        </li>
-      </ul>
-      <ul class="navbar-nav">
-        <template v-if="username">
-          <li class="nav-item">
-            <a class="nav-link" href="#">{{ username }}</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="/logout">Logout</a>
-          </li>
-        </template>
-        <li v-else class="nav-item">
-          <a class="nav-link" href="/login">Login with OpenStreetMap</a>
-        </li>
-      </ul>
-    </div>
-  </nav>
-
   <div id="map">
   </div>
 
diff --git a/templates/base.html b/templates/base.html
index 52682ad..da1438b 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -2,23 +2,25 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>
     {% block title %}{% endblock %} OSM ↔ Wikidata
   </title>
   <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css')}}">
-  <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap4/css/bootstrap.css')}}">
 
-  <link rel="stylesheet" href="{{ url_for('static', filename='fork-awesome/css/fork-awesome.css')}}">
+  <link rel="stylesheet" href="https://unpkg.com/bootstrap@5.0.1/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://unpkg.com/fork-awesome@1.1.7/css/fork-awesome.min.css">
 
   {% block style %}
   {% endblock %}
 </head>
+{% from "navbar.html" import navbar with context %}
 
 <body>
-  <div class="container-fluid p-0">
+  {% block nav %}{{ navbar() }}{% endblock %}
   {% block content %}{% endblock %}
-  </div>
 
+  <script src="https://unpkg.com/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
   {% block script %}{% endblock %}
 </body>
 </html>
diff --git a/templates/documentation.html b/templates/documentation.html
new file mode 100644
index 0000000..6ebda3b
--- /dev/null
+++ b/templates/documentation.html
@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+
+{% block title %}{% endblock %}
+
+{% block content %}
+<div class="container my-2">
+
+  <h2>Instructions</h2>
+    <p>This tool will help you link Wikidata items with the matching object on OpenStreetMap (OSM).</p>
+
+    <p>To save changes you need to <a href="/login">login via OpenStreetMap</a>.</p>
+
+    <p>Zoom in or search for an area to work on.</p>
+
+    <p>The map will show at most 400 items, if there are more then you need to zoom in before you can start editing.</p>
+
+    <p>Wikidata items appear on the map as red or green markers. Items not linked for OSM appear in red, those that are linked appear in green. The map shows the location of Wikidata tagged OSM objects with a yellow pin.</p>
+
+    <p>There are controls to filter what appears on the map. You have the option to hide Wikidata items that are already tagged on OSM. The type filter allows you to adjust what types of Wikidata item are displayed.</p>
+
+    <p>Click on a marker to show details of the Wikidata item and find nearby possible OSM matches.</p>
+
+  <h2>Known faults</h2>
+
+  <h4>Language selection</h4>
+  <p>There is no way to change the user interface language or data display language.</p>
+
+  <h4>Map filters</h4>
+
+  <dd>
+    <dt>OSM/Wikidata link status numbers don't match current view</dt>
+    <dd>
+      <p>The item type counts update to only include items in the current view. The OSM/Wikidata link status should do the same, but don't currently.</p>
+    </dd>
+    <dt>It should be possible to hide items with a given item type</dt>
+    <dd>
+
+      <p>Item type filters have two states, <i>on</i> and <i>off</i>. There
+      should be three states: <i>include</i>, <i>exclude</i> and
+      <i>neutral</i>.</p>
+
+      <p>Some items in Wikidata are for things that no longer exist. If
+      something doesn't exist it won't be include in OpenStreetMap, so there is
+      nothing to match with. A good example are cinemas, somebody
+      has loaded a historical database of cinemas into Wikidata, many of them
+      no longer exist. On Wikidata they have the item types <i>movie theater
+        (Q41253)</i> and <i>destroyed building or structure (Q19860854)</i>.
+      There is no way with the existing filters to say show me cinemas unless
+      they have the type <i>destroyed building or structure (Q19860854)</i>.
+      </p>
+    </dd>
+    </dl>
+
+  <h4>Item detail page</h4>
+
+  <p>Image doesn't update until the list of nearby OSM matches has been downloaded.</p>
+
+  <h4>List of nearby possible OSM matches</h4>
+
+  <ol>
+    <li>Only OSM objects within the current map view are shown.</li>
+    <li>The list is only filtered on OSM tags/keys from the Wikidata item. There is no filtering by name, street address or identifier.</li>
+    <li>Matching linear features, like streets and waterways, could be improved. It should be possible to select a way then automatically select other connected ways with the same name.</li>
+    <li>The list of OSM objects shows name and street addresses but not identifiers.</li>
+    <li>Unnamed boundary ways that are part of a relation should be hidden by default.</li>
+    <li>The code that identifiers OSM object types could be more precise. For example a mosque is labelled as a 'place of worship', it should be labelled as a mosque.</li>
+  </ol>
+</div>
+{% endblock %}
diff --git a/templates/map.html b/templates/map.html
index 969762b..711878d 100644
--- a/templates/map.html
+++ b/templates/map.html
@@ -9,7 +9,9 @@
     <link rel="stylesheet" href="https://unpkg.com/fork-awesome@1.1.7/css/fork-awesome.min.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet-extra-markers@1.2.1/dist/css/leaflet.extra-markers.min.css">
   </head>
+  {% from "navbar.html" import navbar with context %}
   <body>
+    {% block nav %}{{ navbar() }}{% endblock %}
     <div id="app"></div>
 
     <script src="https://unpkg.com/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
diff --git a/templates/navbar.html b/templates/navbar.html
new file mode 100644
index 0000000..5a1caa4
--- /dev/null
+++ b/templates/navbar.html
@@ -0,0 +1,35 @@
+{% set tabs = [
+  ("map", "Home"),
+  ("documentation", "Documentation"),
+] %}
+
+{% macro navbar() %}
+<nav id="nav" class="navbar navbar-expand navbar-light bg-light">
+  <div class="container-fluid">
+    <a class="navbar-brand" href="/map">osm.wikidata.link</a>
+    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+      {% for page, label in tabs%}
+      <li class="nav-item">
+        <a
+          class="nav-link{% if page == active_tab %} active{% endif %}"
+          href="/{{ page }}">{{ label }}</a>
+      </li>
+      {% endfor %}
+    </ul>
+    <ul class="navbar-nav">
+      {% if username %}
+        <li class="nav-item">
+          <a class="nav-link" href="#">{{ username }}</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="/logout">Logout</a>
+        </li>
+      {% else %}
+      <li v-else class="nav-item">
+        <a class="nav-link" href="/login">Login with OpenStreetMap</a>
+      </li>
+      {% endif %}
+    </ul>
+  </div>
+</nav>
+{% endmacro %}
diff --git a/web_view.py b/web_view.py
index 7d84720..3b0e7d6 100755
--- a/web_view.py
+++ b/web_view.py
@@ -178,6 +178,18 @@ def map_start_page():
     ))
 
 
+@app.route("/documentation")
+def documentation_page():
+    user = flask_login.current_user
+    username = user.username if user.is_authenticated else None
+
+    return render_template(
+        "documentation.html",
+        active_tab="documentation",
+        username=username
+    )
+
+
 @app.route("/search")
 def search_page():
     loc = get_user_location()
@@ -188,6 +200,7 @@ def search_page():
 
     return render_template(
         "map.html",
+        active_tab="map",
         lat=f'{loc["latitude"]:.5f}',
         lon=f'{loc["longitude"]:.5f}',
         zoom=16,
@@ -204,6 +217,7 @@ def map_location(zoom, lat, lon):
 
     return render_template(
         "map.html",
+        active_tab="map",
         zoom=zoom,
         lat=lat,
         lon=lon,
