diff --git a/photoalbum/skel/_templates/base.html b/photoalbum/skel/_templates/base.html
index 04dfe47..a94e3a0 100644
--- a/photoalbum/skel/_templates/base.html
+++ b/photoalbum/skel/_templates/base.html
@@ -3,13 +3,17 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="stylesheet" href="{{ static_dir }}/index.css" type="text/css">
         <title>My Photos</title>
+        <link rel="stylesheet" href="{{ static_dir }}/index.css" type="text/css">
     </head>
     <body>
         <div id="content">
         {% block content %}
         {% endblock %}
         </div>
+        <script type="text/javascript">
+            {% block js %}
+            {% endblock %}
+        </script>
     </body>
 </html>
diff --git a/photoalbum/skel/_templates/photo.html b/photoalbum/skel/_templates/photo.html
index 82aa97c..403ed1e 100644
--- a/photoalbum/skel/_templates/photo.html
+++ b/photoalbum/skel/_templates/photo.html
@@ -1,5 +1,20 @@
 {% extends "base.html" %}
 
+{% block js %}
+    // Do left/right navigation on keypresses
+    document.onkeydown = function(event) {
+        if (event.key == "ArrowLeft") {
+            {% if prev_image %}
+            location.href = "{{prev_image.html_filename()}}";
+            {% endif %}
+        } else if (event.key == "ArrowRight") {
+            {% if next_image %}
+            location.href = "{{next_image.html_filename()}}";
+            {% endif %}
+        }
+    }
+{% endblock %}
+
 {% block content %}
 <div id="nav">
     <div>
