diff --git a/.DS_Store b/.DS_Store
index a36a55c..87c014a 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/gatsby/.eslintrc.js b/gatsby/.eslintrc.js
index 2778802..d2597b1 100644
--- a/gatsby/.eslintrc.js
+++ b/gatsby/.eslintrc.js
@@ -2,5 +2,12 @@ module.exports = {
   globals: {
     __PATH_PREFIX__: true,
   },
-  extends: `react-app`,
+  plugins: [
+    "react"
+  ],
+  extends: [
+    `react-app`,
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ]
 }
diff --git a/gatsby/data/gallery/_DSC4767.jpg b/gatsby/data/gallery/_DSC4767.jpg
new file mode 100644
index 0000000..05e04cd
Binary files /dev/null and b/gatsby/data/gallery/_DSC4767.jpg differ
diff --git a/gatsby/data/gallery/_DSC4830.jpg b/gatsby/data/gallery/_DSC4830.jpg
new file mode 100644
index 0000000..820e2a7
Binary files /dev/null and b/gatsby/data/gallery/_DSC4830.jpg differ
diff --git a/gatsby/data/gallery/_DSC4949.jpg b/gatsby/data/gallery/_DSC4949.jpg
index c99de2d..24a399e 100644
Binary files a/gatsby/data/gallery/_DSC4949.jpg and b/gatsby/data/gallery/_DSC4949.jpg differ
diff --git a/gatsby/gatsby-browser.js b/gatsby/gatsby-browser.js
new file mode 100644
index 0000000..387e300
--- /dev/null
+++ b/gatsby/gatsby-browser.js
@@ -0,0 +1 @@
+import './src/styles/global.css';
\ No newline at end of file
diff --git a/gatsby/gatsby-ssr.js b/gatsby/gatsby-ssr.js
new file mode 100644
index 0000000..387e300
--- /dev/null
+++ b/gatsby/gatsby-ssr.js
@@ -0,0 +1 @@
+import './src/styles/global.css';
\ No newline at end of file
diff --git a/gatsby/src/pages/gallery.js b/gatsby/src/pages/gallery.js
index 603402b..dbce685 100644
--- a/gatsby/src/pages/gallery.js
+++ b/gatsby/src/pages/gallery.js
@@ -2,7 +2,7 @@ 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"
 
 const GalleryPage = ({ data }) => {
   const images = React.useMemo(() =>
@@ -20,9 +20,13 @@ const GalleryPage = ({ data }) => {
         }
         return 0;
       }) // TODO HERE
-    , data)
-  return (<div className="bg-black">
+    , [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)
@@ -37,7 +41,7 @@ const GalleryPage = ({ data }) => {
       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
@@ -51,10 +55,11 @@ const GalleryPage = ({ data }) => {
               image={getImage(image)}
               alt={name} />
           </Link>
-        </>
+        </React.Fragment>
       );
     })}
-  </div>)
+  </div>
+  </>)
 }
 
 export const query = graphql`
diff --git a/gatsby/src/pages/index.js b/gatsby/src/pages/index.js
index 0111330..3529618 100644
--- a/gatsby/src/pages/index.js
+++ b/gatsby/src/pages/index.js
@@ -2,10 +2,6 @@ import * as React from "react"
 import { graphql } from 'gatsby'
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 
-import '../styles/global.css';
-// import "../styles/gallery.scss"
-// import "../styles/index.scss"
-
 // markup
 const IndexPage = ({ data }) => {
   const images = React.useMemo(() => data.allFile.edges.map(edge => edge.node, [data]))
diff --git a/gatsby/src/templates/gallery-image.js b/gatsby/src/templates/gallery-image.js
index eb29e07..c3c79e1 100644
--- a/gatsby/src/templates/gallery-image.js
+++ b/gatsby/src/templates/gallery-image.js
@@ -2,29 +2,41 @@ import React from "react"
 import { graphql } from 'gatsby'
 import { getMeta, getName } from "../utils";
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
+import { Helmet } from "react-helmet";
 
 const GalleryImage = ({ pageContext, data }) => {
   const image = data.allFile.edges[0].node
   console.log(getMeta(image));
   const name = getName(image);
-  return (
-    <div className="bg-black min-h-screen">
+  return (<>
+  <Helmet>
+    <title>{name} - Gallery | Chuck Dries</title>
+  </Helmet>
+    <div className="bg-black h-screen w-screen">
       <h1>{name}</h1>
       <GatsbyImage
         className=""
+        loading='eager'
+        objectFit='contain'
         style={{
-          width: '100vw',
-          maxHeight: '100%'
+          // width: '100%',
+          // height: '100%',
+          // objectFit: 'contain',
+          // objectPosition: 'center',
+          // maxWidth: 'min(100vw, 1500px)',
+          // maxWidth: '100%',
+          // maxHeight: '100vh'
           // maxHeight: "800px"
           // width: '400px',
-          // height: '100%'
+          width: '100%',
+          height: '100%'
         }}
         key={image.base}
         image={getImage(image)}
         alt={name} />
       <p>{getMeta(image).iptc.caption}</p>
     </div>
-  );
+  </>);
 }
 
 export const query = graphql`
@@ -41,7 +53,9 @@ export const query = graphql`
           gatsbyImageData(
             layout: CONSTRAINED
             placeholder: BLURRED
-            width: 1920
+            # placeholder: DOMINANT_COLOR
+            # placeholder: TRACED_SVG
+            height: 2048
           )
           fields {
             imageMeta {