diff --git a/data/gallery/_DSC4792.jpg b/data/gallery/_DSC4792.jpg
new file mode 100644
index 0000000..d724a6a
--- /dev/null
+++ b/data/gallery/_DSC4792.jpg
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cf0246ce53d755836ad9940403ad1a8773ac571bff339f131f2282c759338cb6
+size 4133928
diff --git a/gatsby-node.js b/gatsby-node.js
index 435a9e5..daed48b 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -163,7 +163,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
     return;
   }
   // Create pages for each markdown file.
-  const galleryImageTemplate = path.resolve('src/components/GalleryImage.js');
+  const galleryImageTemplate = path.resolve('src/components/GalleryImage/GalleryImage.js');
   // const diffDate = (a, b) => 
   //   new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], a)).getTime() - new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'],b)).getTime();
   
diff --git a/src/components/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
similarity index 72%
rename from src/components/GalleryImage.js
rename to src/components/GalleryImage/GalleryImage.js
index def40f9..32d6a55 100644
--- a/src/components/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -8,11 +8,12 @@ import {
   getVibrant,
   getVibrantToHelmetSafeBodyStyle,
   hasName,
-} from '../utils';
+} from '../../utils';
 import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import { Helmet } from 'react-helmet';
 import classnames from 'classnames';
 import posthog from 'posthog-js';
+import MetadataItem from './MetadataItem';
 
 const logKeyShortcut = (keyCode) => {
   try {
@@ -128,56 +129,11 @@ const GalleryImage = ({ data, pageContext }) => {
             <p className="landscape:mr-2">{meta.iptc.caption}</p>
           </div>
           {<div className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1" style={{width: 30}}></div>}
-          {dateTaken &&
-            <div className={classnames('flex items-baseline ml-2 text-lg',
-              ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
-            title="shutter speed"
-            >
-              <span className="icon-offset mr-1">
-                <ion-icon name="calendar"></ion-icon>
-              </span>
-              <span className="mr-1">{dateTaken.toLocaleDateString()}</span>
-            </div>}
-          {(locationString) &&
-            <div className={classnames('flex items-baseline ml-2 text-lg',
-              ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
-            title="location"
-            >
-              <span className="icon-offset mr-1">
-                <ion-icon name="location-sharp"></ion-icon>
-              </span>
-              <span className="mr-1">{locationString}</span>
-            </div>}
-          {shutterSpeed &&
-            <div className={classnames('flex items-baseline ml-2 text-lg',
-              ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
-            title="shutter speed"
-            >
-              <span className="icon-offset mr-1">
-                <ion-icon name="stopwatch-sharp"></ion-icon>
-              </span>
-              <span className="mr-1">{shutterSpeed}</span>
-            </div>}
-          {meta.exif.FNumber &&
-            <div className={classnames('flex items-baseline ml-2 text-lg',
-              ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
-            title="shutter speed"
-            >
-              <span className="icon-offset mr-1">
-                <ion-icon name="aperture-sharp"></ion-icon>
-              </span>
-              <span className="mr-1">f/{meta.exif.FNumber}</span>
-            </div>}
-          {meta.exif.ISO && 
-            <div className={classnames('flex items-baseline ml-2 text-lg',
-              ar <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
-            title="shutter speed"
-            >
-              <span className="icon-offset mr-1">
-                <ion-icon name="film-outline"></ion-icon>
-              </span>
-              <span className="mr-1">{meta.exif.ISO}</span>
-            </div>}
+          <MetadataItem aspectRatio={ar} data={dateTaken} icon="calendar-sharp" title="date taken"/>
+          <MetadataItem aspectRatio={ar} data={locationString} icon="location-sharp" title="location"/>
+          <MetadataItem aspectRatio={ar} data={shutterSpeed} icon="stopwatch-sharp" title="shutter speed" />
+          <MetadataItem aspectRatio={ar} data={meta.exif.FNumber} icon="aperture-sharp" title="aperture" />
+          <MetadataItem aspectRatio={ar} data={meta.exif.ISO} icon="film-outline" title="ISO" />
         </div>
       </div>
       <div></div>
diff --git a/src/components/GalleryImage/MetadataItem.js b/src/components/GalleryImage/MetadataItem.js
new file mode 100644
index 0000000..e3a2c08
--- /dev/null
+++ b/src/components/GalleryImage/MetadataItem.js
@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+import React from 'react';
+
+const MetadataItem = ({
+  aspectRatio,
+  icon,
+  data,
+  title,
+}) => data ? (
+  <div className={classNames('flex items-baseline ml-2 text-lg',
+    aspectRatio <= 1 ? 'flex-row-reverse' : 'portrait:flex-row-reverse')}
+  title={title}
+  >
+    <span className="icon-offset mr-1">
+      <ion-icon name={icon}></ion-icon>
+    </span>
+    <span className="mr-1">f/{data}</span>
+  </div>
+) : null;
+
+export default MetadataItem;
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index cc8a604..f325a31 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -9,8 +9,6 @@ import posthog from 'posthog-js';
 import { getVibrantToHelmetSafeBodyStyle, getVibrant, getAspectRatio } from '../utils';
 import { HeroA } from '../components/Index/HeroLink';
 
-// TODO: better text colors in situations of low contrast
-
 const env = process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || 'development';
 
 const getDifferentRand = (range, lastNs, iterations = 0) => {