diff --git a/app.py b/app.py
index b60900f..4da3510 100644
--- a/app.py
+++ b/app.py
@@ -10,17 +10,20 @@ app = flask.Flask('songbook')
     
 #     db = sqlite3.connect("file:songbook.sqlite?mode=ro", uri=True)
 
-#     return flask.render_template('.jinja',
+#     return flask.render_template('.html',
 #     )
 
 # HOMEPAGE
 
+def openbook():
+    return sqlite3.connect("file:songbook.sqlite?mode=ro", uri=True)
+
 @app.route('/')
 def homepage():
 
 
 
-    return flask.render_template('home.jinja')
+    return flask.render_template('home.html')
 
 # SONG INDEX
 
@@ -31,7 +34,7 @@ def song_redirect():
 @app.route('/index')
 def songindex():
     
-    db = sqlite3.connect("file:songbook.sqlite?mode=ro", uri=True)
+    db = openbook()
 
     album_info = db.execute('''
     select
@@ -56,7 +59,7 @@ def songindex():
         track
     ''').fetchall()
 
-    return flask.render_template('songindex.jinja',
+    return flask.render_template('songindex.html',
         album_info=album_info,
         song_info=song_info
     )
@@ -66,7 +69,7 @@ def songindex():
 @app.route('/motif')
 def motifindex():
     
-    db = sqlite3.connect("file:songbook.sqlite?mode=ro", uri=True)
+    db = openbook()
 
     category_info = db.execute('''
     select
@@ -86,7 +89,7 @@ def motifindex():
         id
     ''').fetchall()
 
-    return flask.render_template('motifindex.jinja',
+    return flask.render_template('motifindex.html',
         category_info = category_info,
         motif_info = motif_info
     )
@@ -96,7 +99,7 @@ def motifindex():
 @app.route('/album/<int:id>')
 def albumpage(id):
     
-    db = sqlite3.connect("file:songbook.sqlite?mode=ro", uri=True)
+    db = openbook()
 
     album_info = db.execute('''
     select
@@ -124,7 +127,7 @@ def albumpage(id):
     (id,)
     ).fetchall()
 
-    return flask.render_template('album.jinja',
+    return flask.render_template('album.html',
         album_info=album_info,
         song_info=song_info
     )
@@ -134,7 +137,7 @@ def albumpage(id):
 @app.route('/motif/<int:id>')
 def motifpage(id):
 
-    db = sqlite3.connect("file:songbook.sqlite?mode=ro", uri=True)
+    db = openbook()
 
     # query motif
 
@@ -163,12 +166,13 @@ def motifpage(id):
     where
         motif_id = ?
     order by
+        feature desc,
         song_id
     ''',
     (id,)
     ).fetchall()
 
-    return flask.render_template('motif.jinja',
+    return flask.render_template('motif.html',
         name=name,
         clip_info=clip_info
     )
@@ -178,7 +182,7 @@ def motifpage(id):
 @app.route('/song/<int:id>')
 def songpage(id):
     
-    db = sqlite3.connect("file:songbook.sqlite?mode=ro", uri=True)
+    db = openbook()
 
     # query song name
 
@@ -250,12 +254,13 @@ def songpage(id):
     where
         song_id = ?
     order by
+        feature desc,
         song_id
     ''',
     (id,)
     ).fetchall()
 
-    return flask.render_template('song.jinja',
+    return flask.render_template('song.html',
         name=name,
         id=id,
         album_info=album_info,
diff --git a/reference_clips.ods b/reference_clips.ods
index 69fca46..6246d33 100644
Binary files a/reference_clips.ods and b/reference_clips.ods differ
diff --git a/static/style.css b/static/style.css
index e69de29..c10a07b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -0,0 +1,2 @@
+body{max-width:50rem;margin-left:auto;margin-right:auto;}
+nav{}
\ No newline at end of file
diff --git a/templates/album.html b/templates/album.html
new file mode 100644
index 0000000..86d0853
--- /dev/null
+++ b/templates/album.html
@@ -0,0 +1,16 @@
+{% extends "nav.html" %}
+{% block title %}{{ album_info[0] }}{% endblock %}
+
+{% block content %}
+
+<h1>{{ album_info[0] }}</h1>
+<p>Released: {{ album_info[1] }}
+
+<!-- List songs -->
+<ul>
+    {% for song_id, track, name, name_jp in song_info %}
+        <li><a href="{{ url_for('songpage', id=song_id) }}">#{{ track }}: {{name}} / {{name_jp}}</li></a>
+    {% endfor %}
+</ul>
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/album.jinja b/templates/album.jinja
deleted file mode 100644
index c6bb87a..0000000
--- a/templates/album.jinja
+++ /dev/null
@@ -1,16 +0,0 @@
-{% extends "nav.jinja" %}
-{% block title %}{{ album_info[0] }}{% endblock %}
-
-{% block content %}
-
-<h1>{{ album_info[0] }}</h1>
-<p>Released: {{ album_info[1] }}
-
-<!-- List songs -->
-<ul>
-{% for song_id, track, name, name_jp in song_info %}
-<li><a href="{{ url_for('songpage', id=song_id) }}">#{{ track }}: {{name}} / {{name_jp}}</li></a>
-{% endfor %}
-</ul>
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..cf2dc21
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>{% block title %}{% endblock %} - Eorzea Songbook</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
+        <meta name="description" content="Listen to the motifs of Final Fantasy XIV's soundtrack." />
+        <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
+        <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="" />
+    </head>
+  
+    <body>
+    {% block basecontent %}{% endblock %}
+    
+
+    </body>
+</html>
\ No newline at end of file
diff --git a/templates/base.jinja b/templates/base.jinja
deleted file mode 100644
index 39999e7..0000000
--- a/templates/base.jinja
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>{% block title %}{% endblock %} - Eorzea Songbook</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
-    <meta name="description" content="Listen to the motifs of Final Fantasy XIV's soundtrack." />
-    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
-    <link rel="icon" sizes="16x16 32x32 48x48" type="image/png" href="" />
-  </head>
-  
-  <body>
-  {% block basecontent %}{% endblock %}
-  
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/templates/home.jinja b/templates/home.html
similarity index 88%
rename from templates/home.jinja
rename to templates/home.html
index 8c27b95..bf0111d 100644
--- a/templates/home.jinja
+++ b/templates/home.html
@@ -1,4 +1,4 @@
-{% extends "base.jinja" %}
+{% extends "base.html" %}
 {% block title %}Home{% endblock %}
 
 {% block basecontent %}
diff --git a/templates/motif.html b/templates/motif.html
new file mode 100644
index 0000000..cb96ad7
--- /dev/null
+++ b/templates/motif.html
@@ -0,0 +1,23 @@
+{% extends "nav.html" %}
+
+{% block title %}{{ name }}{% endblock %}
+
+{% block content %}
+<h1> Motif: {{ name }} </h1>
+
+<!-- Clips -->
+
+<p>Clips: </p>
+<ul>
+{% for song_id, motif_id, song in clip_info %}
+    <li>
+        <audio
+            controls
+            src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
+        </audio>
+        <a href="/song/{{ song_id }}">{{ song }}</a>
+  </li>
+{% endfor %}
+</ul>
+
+{% endblock %}
\ No newline at end of file
diff --git a/templates/motif.jinja b/templates/motif.jinja
deleted file mode 100644
index e592fc7..0000000
--- a/templates/motif.jinja
+++ /dev/null
@@ -1,22 +0,0 @@
-{% extends "nav.jinja" %}
-
-{% block title %}{{ name }}{% endblock %}
-
-{% block content %}
-<h1> Motif: {{ name }} </h1>
-
-<!-- Clips -->
-
-<p>Clips: </p>
-<ul>
-{% for song_id, motif_id, song in clip_info %}
-  <li>
-    <audio
-      controls
-      src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac">
-    </audio>
-    <a href="/song/{{ song_id }}">{{ song }}</a>
-  </li>
-{% endfor %}
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates/motifindex.jinja b/templates/motifindex.html
similarity index 80%
rename from templates/motifindex.jinja
rename to templates/motifindex.html
index c865406..119f4f5 100644
--- a/templates/motifindex.jinja
+++ b/templates/motifindex.html
@@ -1,4 +1,4 @@
-{% extends "nav.jinja" %}
+{% extends "nav.html" %}
 {% block title %}Motif Index{% endblock %}
 
 {% block content %}
@@ -7,7 +7,7 @@
 <h2>{{ name }}</h2>
 <ul>
     {% for motif_id, motif, category in motif_info if category == category_id %}
-            <li><a href="{{ url_for('motifpage', id=motif_id) }}">{{ motif }}</a></li>
+        <li><a href="{{ url_for('motifpage', id=motif_id) }}">{{ motif }}</a></li>
     {% endfor %}
 </ul>
 {% endfor %}
diff --git a/templates/nav.html b/templates/nav.html
new file mode 100644
index 0000000..131d284
--- /dev/null
+++ b/templates/nav.html
@@ -0,0 +1,23 @@
+{% extends "base.html" %}
+
+{% block basecontent %}
+
+<header>
+    <nav>
+        <ul>
+            <li><a href="{{ url_for('songindex') }}">Songs</a></li>
+            <li><a href="{{ url_for('homepage') }}">Home</a></li>
+            <li><a href="{{ url_for('motifindex') }}">Motifs</a></li>
+        </ul>
+    </nav>
+</header>
+
+{% block content %}{% endblock %}
+
+<footer>
+
+<p> The footer will be in here, when it's ready. </p>
+
+</footer>
+
+{% endblock basecontent %}
\ No newline at end of file
diff --git a/templates/nav.jinja b/templates/nav.jinja
deleted file mode 100644
index 044fe5b..0000000
--- a/templates/nav.jinja
+++ /dev/null
@@ -1,18 +0,0 @@
-{% extends "base.jinja" %}
-
-{% block basecontent %}
-
-<header>
-
-<p> The header will be in here. For now, click <a href="{{ url_for('homepage') }}">here</a> to go back to the home page.</p>
-
-</header>
-{% block content %}{% endblock %}
-
-<footer>
-
-<p> The footer will be in here, when it's ready. </p>
-
-</footer>
-
-{% endblock basecontent %}
\ No newline at end of file
diff --git a/templates/song.jinja b/templates/song.html
similarity index 64%
rename from templates/song.jinja
rename to templates/song.html
index 243c2d5..0d3bf7b 100644
--- a/templates/song.jinja
+++ b/templates/song.html
@@ -1,4 +1,4 @@
-{% extends "nav.jinja" %}
+{% extends "nav.html" %}
 {% block title %}{{ name }}{% endblock %}
 
 {% block content %}
@@ -10,7 +10,7 @@
 <p>Artist:  </p>
 <ul>
 {% for name, name_rm, credit in artist_info %}
-  <li>{{ name_rm }} ({{ name }}): {{ credit }}</li>
+    <li>{{ name_rm }} ({{ name }}): {{ credit }}</li>
 {% endfor %}
 </ul>
 
@@ -28,13 +28,13 @@
 <p>Clips: </p>
 <ul>
 {% for song_id, motif_id, motif in clip_info %}
-  <li>
-    <audio
-      controls
-      src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac">
-    </audio>
-    <a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a>
-  </li>
+    <li>
+        <audio
+            controls
+            src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
+        </audio>
+        <a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a>
+    </li>
 {% endfor %}
-
+</ul>
 {% endblock %}
diff --git a/templates/songindex.jinja b/templates/songindex.html
similarity index 66%
rename from templates/songindex.jinja
rename to templates/songindex.html
index 2467ffe..a84b5db 100644
--- a/templates/songindex.jinja
+++ b/templates/songindex.html
@@ -1,4 +1,4 @@
-{% extends "nav.jinja" %}
+{% extends "nav.html" %}
 {% block title %}Song Index{% endblock %}
 
 {% block content %}
@@ -7,7 +7,7 @@
 <h2>{{ name }}</h2>
 <ul>
     {% for song_id, album, track, name, name_jp in song_info if album_id == album %}
-            <li><a href="{{ url_for('songpage', id=song_id) }}">#{{ track }}: {{name}} / {{name_jp}}</li></a>
+        <li><a href="{{ url_for('songpage', id=song_id) }}">#{{ track }}: {{name}} / {{name_jp}}</li></a>
     {% endfor %}
 </ul>
 {% endfor %}