diff --git a/gatsby-node.js b/gatsby-node.js
index 18ff959..0328f3a 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -6,6 +6,7 @@ const iptc = require('node-iptc');
 const Vibrant = require('node-vibrant');
 const chroma = require('chroma-js');
 const chalk = require('chalk');
+const R = require('ramda');
 
 const readFile = util.promisify(fs.readFile);
 
@@ -143,7 +144,14 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
           edges {
             node {
               relativePath,
-              base
+              base,
+              childImageSharp {
+                fields {
+                  imageMeta {
+                    dateTaken
+                  }
+                }
+              }
             }
           }
         }
@@ -156,7 +164,11 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   }
   // Create pages for each markdown file.
   const galleryImageTemplate = path.resolve('src/components/GalleryImage.js');
-  const edges = galleryImages.data.allFile.edges;
+  const edges = R.sort((edge) => 
+    new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], edge)),
+  galleryImages.data.allFile.edges);
+  
+  console.log(R.map(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken']), edges));
 
   edges.forEach(({ node }, index) => {
     const nextImage = index === edges.length - 1
@@ -165,7 +177,6 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     const prevImage = index === 0
       ? null
       : edges[index - 1].node.base;
-    console.log('next', nextImage);
 
     createPage({
       path: `photogallery/${node.base}`,
diff --git a/src/components/GalleryImage.js b/src/components/GalleryImage.js
index eb064cd..d56156d 100644
--- a/src/components/GalleryImage.js
+++ b/src/components/GalleryImage.js
@@ -17,7 +17,28 @@ const GalleryImage = ({ data, pageContext }) => {
   const image = data.allFile.edges[0].node;
   const ar = getAspectRatio(image);
 
-  console.log(pageContext);
+  React.useEffect(() => {
+    const keyListener = (e) => {
+      switch (e.code) {
+      case 'ArrowRight': {
+        if (pageContext.nextImage) {
+          navigate(`/photogallery/${pageContext.nextImage}/`);
+        }
+        return;
+      }
+      case 'ArrowLeft': {
+        if (pageContext.prevImage) {
+          navigate(`/photogallery/${pageContext.prevImage}/`);
+        }
+        return;
+      }
+      }
+    };
+    document.addEventListener('keydown', keyListener);
+    return () => {
+      document.removeEventListener('keydown', keyListener);
+    };
+  }, [pageContext]);
 
   const name = getName(image);
   const meta = getMeta(image);
@@ -39,30 +60,30 @@ const GalleryImage = ({ data, pageContext }) => {
         style={getVibrantToHelmetSafeBodyStyle(vibrant)}
       />
     </Helmet>
-    <nav className="mt-0">
-      <button
-        className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
-        onClick={() => navigate(-1)}
-        type="button"
-      >back</button>
-      <Link
-        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-        to="/"
-      >home</Link>
-      <Link
-        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-        to="/photogallery/"
-      >gallery</Link>
-      {pageContext.prevImage && <Link
-        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-        to={`/photogallery/${pageContext.prevImage}/`}
-      >previous</Link>}
-      {pageContext.nextImage && <Link
-        className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-        to={`/photogallery/${pageContext.nextImage}/`}
-      >next</Link>}
-    </nav>
-    <div className="min-h-screen flex flex-col justify-center">
+    <div className="min-h-screen flex flex-col justify-between">
+      <nav className="mt-0">
+        <button
+          className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
+          onClick={() => navigate(-1)}
+          type="button"
+        >back</button>
+        <Link
+          className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+          to="/"
+        >home</Link>
+        <Link
+          className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+          to="/photogallery/"
+        >gallery</Link>
+        {pageContext.prevImage && <Link
+          className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+          to={`/photogallery/${pageContext.prevImage}/`}
+        >previous</Link>}
+        {pageContext.nextImage && <Link
+          className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
+          to={`/photogallery/${pageContext.nextImage}/`}
+        >next</Link>}
+      </nav>
       <div className={classnames('flex', orientationClasses)}>
         <div className="flex-grow-0">
           <GatsbyImage
@@ -110,6 +131,7 @@ const GalleryImage = ({ data, pageContext }) => {
           </div>}
         </div>
       </div>
+      <div></div>
     </div>
   </>);
 };