diff --git a/gatsby-node.js b/gatsby-node.js
index 0328f3a..5e5deb0 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -164,10 +164,13 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
   }
   // Create pages for each markdown file.
   const galleryImageTemplate = path.resolve('src/components/GalleryImage.js');
-  const edges = R.sort((edge) => 
-    new Date(R.path(['node', 'childImageSharp', 'fields', 'imageMeta', 'dateTaken'], edge)),
-  galleryImages.data.allFile.edges);
+  // 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();
   
+  const edges = R.sort(R.descend((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) => {
diff --git a/src/components/GalleryImage.js b/src/components/GalleryImage.js
index d56156d..44a0ef2 100644
--- a/src/components/GalleryImage.js
+++ b/src/components/GalleryImage.js
@@ -99,36 +99,57 @@ const GalleryImage = ({ data, pageContext }) => {
               // minHeight: '500px',
             }} />
         </div>
-        <div className={classnames('flex-shrink-0 mx-2 flex flex-row', ar <= 1 && 'pt-5 flex-col flex-auto text-right')}>
+        <div className={classnames(
+          'flex-shrink-0 mx-2 flex flex-row portrait:items-end', ar <= 1
+            ? 'pt-5 flex-col flex-auto text-right'
+            : 'portrait:pt-5 portrait:flex-col portrait:text-right'
+        )}>
           <div className="flex-auto mr-2">
             <p className="text-muted-light font-mono text-sm m-0 mt-1">{image.base}</p>
             {hasName(image) && <h1 className="text-4xl mt-0 font-serif">{name}</h1>}
             <p className="mr-2">{meta.iptc.caption}</p>
           </div>
-          {(locationString) && <div className={classnames('flex items-baseline ml-2 text-lg', ar <= 1 && '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')} 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')} title="aperture">
-            <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')} title="ISO">
-            <span className="icon-offset mr-1">
-              <ion-icon name="film-outline"></ion-icon>
-            </span>
-            <span className="mr-1">{meta.exif.ISO}</span>
-          </div>}
+          {<div className="portrait:border-t-2 border-gray-200 portrait:mt-2 mr-3 portrait:mb-1" style={{width: 30}}></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>}
         </div>
       </div>
       <div></div>
diff --git a/src/pages/photogallery.js b/src/pages/photogallery.js
index 0dce853..b365b0d 100644
--- a/src/pages/photogallery.js
+++ b/src/pages/photogallery.js
@@ -56,7 +56,7 @@ export const query = graphql`
 query GalleryPageQuery {
   allFile(filter: {
     sourceInstanceName: { eq: "gallery" }}
-    sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
+    # sort: {order: DESC, fields: childrenImageSharp___fields___imageMeta___dateTaken}
   ) {
     edges {
       node {