diff --git a/redstring/library.py b/redstring/library.py
new file mode 100644
index 0000000..30f38d7
--- /dev/null
+++ b/redstring/library.py
@@ -0,0 +1,26 @@
+"""
+Logic for operations that depend on a whole collection of documents.
+"""
+import os
+from pathlib import Path
+
+from redstring.parser import load, TagOptions, DocumentTag, TabOptions, DocumentTab, Document
+
+
+def generate_index_document(directory: str) -> Document:
+    """
+    Generate a document describing a document collection.
+    """
+    dirpath = Path(directory)
+    document_info: list = []
+    for filename in os.listdir(dirpath):
+        with open(dirpath / filename) as f:
+            document = load(f)
+        document_id = document.get('id')
+        title = document.get('title')
+        document_info.append((document_id, title))
+
+    tag: DocumentTag = DocumentTag('Unsorted', str(document_info), TagOptions(), [])
+    tab: DocumentTab = DocumentTab('index', [tag], TabOptions())
+    doc: Document = Document([tab])
+    return doc
diff --git a/redstring/parser.py b/redstring/parser.py
index 3215c25..8c4b920 100644
--- a/redstring/parser.py
+++ b/redstring/parser.py
@@ -141,6 +141,13 @@ class Document:
     def __iter__(self):
         return self.tabs.__iter__()
 
+    def get(self, name: str):
+        for tab in self.tabs:
+            for tag in tab.tags:
+                if tag.name == name:
+                    return tag
+        return None
+
 
 #
 # Parsing functions
diff --git a/redstring/server.py b/redstring/server.py
index 50279ff..0911d70 100644
--- a/redstring/server.py
+++ b/redstring/server.py
@@ -4,8 +4,17 @@ Logic for serving a collection of documents through a web frontend.
 import argparse
 import os
 
-from flask import Flask, redirect, url_for, current_app, render_template
+from flask import (
+    abort,
+    current_app,
+    Flask,
+    redirect,
+    render_template,
+    safe_join,
+    url_for,
+)
 
+from redstring.library import generate_index_document
 from redstring.parser import load
 
 
@@ -21,9 +30,18 @@ def root():
 
 @app.route('/index/')
 def index():
-    with open('scratch/test.json') as f:
-        document = load(f)
-    return render_template('doc.jinja', document=document)
+    document = generate_index_document(current_app.config['root'])
+    return render_template('doc.jinja', document=document, index=True)
+
+
+@app.route('/doc/<document_id>')
+def document(document_id):
+    doc_path = safe_join(current_app.config['root'], f'{document_id}.json')
+    if not os.path.isfile(doc_path):
+        return abort(404)
+    with open(doc_path) as f:
+        doc = load(f)
+    return render_template('doc.jinja', document=doc, index=False)
 
 
 def main():
diff --git a/redstring/templates/base.jinja b/redstring/templates/base.jinja
index 7a6c328..6b0bccc 100644
--- a/redstring/templates/base.jinja
+++ b/redstring/templates/base.jinja
@@ -24,21 +24,28 @@
 	}
 
 	/* Tabs setup */
+	div#tabs {
+		display: flex;
+		width: 100%;
+	}
 	div.tab {
-		display: inline-block;
 		padding: 5px;
 		background-color: #333;
 		border-style: solid;
 		border-color: #888;
 		border-width: 2px 2px 0 2px;
 		border-radius: 10px 10px 0px 0px;
-		margin: 0 0 0 4px;
+		margin: 0 4px;
 		font-family: monospace;
 		font-weight: bold;
 		color: #888;
 		cursor: pointer;
 		user-select: none
 	}
+	div.tab a {
+		color: #888;
+		text-decoration: none;
+	}
 	div.tab-down {
 		background-color: #333;
 		border-color: #bbb;
@@ -47,8 +54,7 @@
 		top: 2px;
 	}
 	div.tab-right {
-		float: right;
-		margin: 0 4px 0 0;
+		margin-left: auto;
 	}
 	div.tab-page {
 		width: 100%;
diff --git a/redstring/templates/doc.jinja b/redstring/templates/doc.jinja
index eb45ec8..c93e19c 100644
--- a/redstring/templates/doc.jinja
+++ b/redstring/templates/doc.jinja
@@ -31,7 +31,7 @@ window.onload = function () {
 {% endblock page_scripts %}
 
 {% macro make_content_tab(tab, selected) -%}
-<div id="{{ tab.name }}" class="tab tab-content{% if selected %} tab-down{% endif %}" onclick="javascript:selectTab('{{ tab.name }}')">{{ tab.name }}</div>
+<div id="{{ tab.name }}" class="tab tab-content{% if selected %} tab-down{% endif %}{% if index %} tab-right{% endif %}" onclick="javascript:selectTab('{{ tab.name }}')">{{ tab.name }}</div>
 {%- endmacro %}
 
 {% macro make_tab_page(tab, selected) %}
@@ -64,6 +64,6 @@ window.onload = function () {
 
 {# TODO: tab.priority and tab.private support #}
 {% block page_content %}
-{% for tab in document %}{{ make_content_tab(tab, loop.first) }}{% endfor %}<a href="/index/"><div id="index" class="tab tab-right">index</div></a>
+<div id="tabs">{% for tab in document %}{{ make_content_tab(tab, loop.first) }}{% endfor %}{% if not index %}<div id="index" class="tab tab-right"><a href="/index/">index</a></div>{% endif %}</div>
 {% for tab in document %}{{ make_tab_page(tab, loop.first) }}{% endfor %}
 {% endblock page_content %}
\ No newline at end of file