diff --git a/gatsby/gatsby-config.js b/gatsby/gatsby-config.js
index df2b25d..3524806 100644
--- a/gatsby/gatsby-config.js
+++ b/gatsby/gatsby-config.js
@@ -39,6 +39,6 @@ module.exports = {
         path: "./src/pages/",
       },
       __key: "pages",
-    },
+    }
   ],
 };
diff --git a/gatsby/package-lock.json b/gatsby/package-lock.json
index 32daa2c..e8adca1 100644
--- a/gatsby/package-lock.json
+++ b/gatsby/package-lock.json
@@ -28,11 +28,13 @@
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-helmet": "^6.1.0",
+        "react-responsive-masonry": "^2.1.2",
         "sass": "^1.34.0",
         "styled-components": "^5.3.0",
         "tailwindcss": "^2.1.2"
       },
       "devDependencies": {
+        "eslint": "^7.28.0",
         "eslint-config-react-app": "^6.0.0"
       }
     },
@@ -1628,14 +1630,14 @@
       "integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz",
-      "integrity": "sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
+      "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.1.1",
         "espree": "^7.3.0",
-        "globals": "^12.1.0",
+        "globals": "^13.9.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.2.1",
         "js-yaml": "^3.13.1",
@@ -1663,11 +1665,11 @@
       }
     },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "12.4.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-      "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
+      "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
       "dependencies": {
-        "type-fest": "^0.8.1"
+        "type-fest": "^0.20.2"
       },
       "engines": {
         "node": ">=8"
@@ -1681,14 +1683,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
-    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@fullhuman/postcss-purgecss": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
@@ -8796,12 +8790,12 @@
       }
     },
     "node_modules/eslint": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz",
-      "integrity": "sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz",
+      "integrity": "sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==",
       "dependencies": {
         "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.1",
+        "@eslint/eslintrc": "^0.4.2",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -8818,7 +8812,7 @@
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.0.0",
+        "glob-parent": "^5.1.2",
         "globals": "^13.6.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
@@ -18977,6 +18971,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-responsive-masonry": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.1.2.tgz",
+      "integrity": "sha512-Vd5XWx077VGL+Pnv4dxVA4rBl4Y5Y6snLqm29QFqHnEE8GNJtqUW96F6SgIcgWJoxfJC52Ifi5Oixz1PdeEpOA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-side-effect": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
@@ -26288,14 +26291,14 @@
       }
     },
     "@eslint/eslintrc": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.1.tgz",
-      "integrity": "sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==",
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.2.tgz",
+      "integrity": "sha512-8nmGq/4ycLpIwzvhI4tNDmQztZ8sp+hI7cyG8i1nQDhkAbRzHpXPidRAHlNvCZQpJTKw5ItIpMw9RSToGF00mg==",
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.1.1",
         "espree": "^7.3.0",
-        "globals": "^12.1.0",
+        "globals": "^13.9.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.2.1",
         "js-yaml": "^3.13.1",
@@ -26312,22 +26315,17 @@
           }
         },
         "globals": {
-          "version": "12.4.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "version": "13.9.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.9.0.tgz",
+          "integrity": "sha512-74/FduwI/JaIrr1H8e71UbDE+5x7pIPs1C2rrwC52SszOo043CsWOZEMW7o2Y58xwm9b+0RBKDxY5n2sUpEFxA==",
           "requires": {
-            "type-fest": "^0.8.1"
+            "type-fest": "^0.20.2"
           }
         },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-        },
-        "type-fest": {
-          "version": "0.8.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
         }
       }
     },
@@ -31876,12 +31874,12 @@
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
     },
     "eslint": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.27.0.tgz",
-      "integrity": "sha512-JZuR6La2ZF0UD384lcbnd0Cgg6QJjiCwhMD6eU4h/VGPcVGwawNNzKU41tgokGXnfjOOyI6QIffthhJTPzzuRA==",
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.28.0.tgz",
+      "integrity": "sha512-UMfH0VSjP0G4p3EWirscJEQ/cHqnT/iuH6oNZOB94nBjWbMnhGEPxsZm1eyIW0C/9jLI0Fow4W5DXLjEI7mn1g==",
       "requires": {
         "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.1",
+        "@eslint/eslintrc": "^0.4.2",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
@@ -31898,7 +31896,7 @@
         "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.0.0",
+        "glob-parent": "^5.1.2",
         "globals": "^13.6.0",
         "ignore": "^4.0.6",
         "import-fresh": "^3.0.0",
@@ -39682,6 +39680,12 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
       "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ=="
     },
+    "react-responsive-masonry": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-responsive-masonry/-/react-responsive-masonry-2.1.2.tgz",
+      "integrity": "sha512-Vd5XWx077VGL+Pnv4dxVA4rBl4Y5Y6snLqm29QFqHnEE8GNJtqUW96F6SgIcgWJoxfJC52Ifi5Oixz1PdeEpOA==",
+      "requires": {}
+    },
     "react-side-effect": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
diff --git a/gatsby/package.json b/gatsby/package.json
index 7402ec6..0130361 100644
--- a/gatsby/package.json
+++ b/gatsby/package.json
@@ -35,11 +35,13 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
+    "react-responsive-masonry": "^2.1.2",
     "sass": "^1.34.0",
     "styled-components": "^5.3.0",
     "tailwindcss": "^2.1.2"
   },
   "devDependencies": {
+    "eslint": "^7.28.0",
     "eslint-config-react-app": "^6.0.0"
   }
 }
diff --git a/gatsby/src/pages/gallery.js b/gatsby/src/pages/gallery.js
index dbce685..a652346 100644
--- a/gatsby/src/pages/gallery.js
+++ b/gatsby/src/pages/gallery.js
@@ -1,8 +1,10 @@
 import * as React from "react"
 import { graphql, Link } from 'gatsby'
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import { getMeta } from "../utils"
 import { Helmet } from "react-helmet"
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"
+
+import { getMeta } from "../utils"
 
 const GalleryPage = ({ data }) => {
   const images = React.useMemo(() =>
@@ -23,42 +25,35 @@ const GalleryPage = ({ data }) => {
     , [data])
 
   return (<>
-  <Helmet>
-    <title>Gallery | Chuck Dries</title>
-  </Helmet>
-  <div className="bg-black">
-    <h1 className="text-2xl">Gallery</h1>
-    {images.map(image => {
-      console.log('ar', image.childImageSharp)
-      const name = getMeta(image).iptc.object_name || image.base
-      // const {
-      //   name: object_name,
-      //   aspectRatio
-      // }
-      // const file = data.allFile
-      // console.log(fileName)
-      // return <></>
-      return (
-        // <div style={{ maxHeight: '500px' }} className="flex-shrink-0 mr-4 scroll-snap-start bg-red-300">
-        // .
-        <React.Fragment key={name}>
-          <Link to={`/gallery/${image.base}`}>
-            {/* <span>{name}</span> */}
-            <GatsbyImage
-              className=""
-              style={{
-                // maxHeight: "800px"
-                // width: '400px',
-                // height: '100%'
-              }}
-              key={image.base}
-              image={getImage(image)}
-              alt={name} />
-          </Link>
-        </React.Fragment>
-      );
-    })}
-  </div>
+    <Helmet>
+      <title>Gallery | Chuck Dries</title>
+      <body className="bg-black" />
+    </Helmet>
+    <div className="bg-black min-h-screen">
+      <h1 className="text-2xl">Gallery</h1>
+      <div className="mx-auto" style={{maxWidth: '1800px'}}>
+      <ResponsiveMasonry
+        columnsCountBreakPoints={{ 350: 1, 650: 2, 1200: 3 }}
+      >
+        <Masonry gutter='5px'>
+          {images.map(image => {
+            console.log('ar', image.childImageSharp)
+            const name = getMeta(image).iptc.object_name || image.base
+            return (
+              <React.Fragment key={name}>
+                <Link state={{modal: true}} to={`/gallery/${image.base}`}>
+                  <GatsbyImage
+                    key={image.base}
+                    image={getImage(image)}
+                    alt={name} />
+                </Link>
+              </React.Fragment>
+            );
+          })}
+        </Masonry>
+      </ResponsiveMasonry>
+      </div>
+    </div>
   </>)
 }
 
@@ -76,21 +71,21 @@ query GalleryPageQuery {
           },
           gatsbyImageData(
             layout: CONSTRAINED,
-            width: 400
+            width: 650
           )
           fields {
             imageMeta {
               dateTaken
               iptc {
-                caption
+                # caption
                 object_name
               }
-              exif {
-                FNumber
-                ExposureTime
-                ShutterSpeedValue
-                ISO
-              }
+              # exif {
+              #   FNumber
+              #   ExposureTime
+              #   ShutterSpeedValue
+              #   ISO
+              # }
             }
           }
         }
diff --git a/gatsby/src/templates/gallery-image.js b/gatsby/src/templates/gallery-image.js
index c3c79e1..accf428 100644
--- a/gatsby/src/templates/gallery-image.js
+++ b/gatsby/src/templates/gallery-image.js
@@ -11,23 +11,15 @@ const GalleryImage = ({ pageContext, data }) => {
   return (<>
   <Helmet>
     <title>{name} - Gallery | Chuck Dries</title>
+    <body className="bg-black" />
   </Helmet>
-    <div className="bg-black h-screen w-screen">
+    <div className="h-screen w-screen flex flex-col">
       <h1>{name}</h1>
       <GatsbyImage
-        className=""
+        className="flex-auto"
         loading='eager'
         objectFit='contain'
         style={{
-          // width: '100%',
-          // height: '100%',
-          // objectFit: 'contain',
-          // objectPosition: 'center',
-          // maxWidth: 'min(100vw, 1500px)',
-          // maxWidth: '100%',
-          // maxHeight: '100vh'
-          // maxHeight: "800px"
-          // width: '400px',
           width: '100%',
           height: '100%'
         }}
@@ -63,6 +55,7 @@ export const query = graphql`
               iptc {
                 caption
                 object_name
+                keywords
               }
               exif {
                 FNumber
diff --git a/gatsby/src/utils.js b/gatsby/src/utils.js
index e0f076a..103676c 100644
--- a/gatsby/src/utils.js
+++ b/gatsby/src/utils.js
@@ -1,3 +1,3 @@
 export const getMeta = (image) => image.childImageSharp.fields.imageMeta
 
-export const getName = (image) => getMeta(image).iptc.object_name || image.base
\ No newline at end of file
+export const getName = (image) => getMeta(image)?.iptc.object_name || image.base
\ No newline at end of file