diff --git a/content/chapters/seattle.json b/content/chapters/seattle.json
index 53039508..73fdd5a6 100644
--- a/content/chapters/seattle.json
+++ b/content/chapters/seattle.json
@@ -1,3 +1,5 @@
 {
-  "city": "Seattle"
+  "city": "Seattle",
+  "photo": "chapters/seattle.jpg",
+  "meetup": "https://www.meetup.com/WSC-Seattle"
 }
diff --git a/content/sponsors/climate-corporation.json b/content/sponsors/climate-corporation.json
index 1d9cf97e..9d96af14 100644
--- a/content/sponsors/climate-corporation.json
+++ b/content/sponsors/climate-corporation.json
@@ -3,7 +3,17 @@
   "url": "https://climate.com/",
   "logo": "/images/climate-corporation.jpg",
   "sponsorships": [
-    { "year": "2019", "level": "Local Meetup SEA", "conf_sponsor": false },
-    { "year": "2019", "level": "Local Meetup SF", "conf_sponsor": false }
+    {
+      "year": "2019",
+      "level": "Local Meetup SEA",
+      "conf_sponsor": false,
+      "city": "Seattle"
+    },
+    {
+      "year": "2019",
+      "level": "Local Meetup SF",
+      "conf_sponsor": false,
+      "city": "San Francisco"
+    }
   ]
 }
diff --git a/content/sponsors/glympse.json b/content/sponsors/glympse.json
index 87af9c64..53a120d4 100644
--- a/content/sponsors/glympse.json
+++ b/content/sponsors/glympse.json
@@ -3,6 +3,11 @@
   "url": "https://www.glympse.com",
   "logo": "/images/glympse.jpg",
   "sponsorships": [
-    { "year": "2019", "level": "Local Meetup SEA", "conf_sponsor": false }
+    {
+      "year": "2019",
+      "level": "Local Meetup SEA",
+      "conf_sponsor": false,
+      "city": "Seattle"
+    }
   ]
 }
diff --git a/gatsby-node.js b/gatsby-node.js
index 0b9d094a..74a65e88 100644
--- a/gatsby-node.js
+++ b/gatsby-node.js
@@ -6,6 +6,25 @@
 const path = require('path')
 const { createFilePath } = require('gatsby-source-filesystem')
 
+// Add slug field based on filepath to content nodes
+// We use this slug to create the path for the automatically generated pages
+exports.onCreateNode = ({ node, actions, getNode }) => {
+  const { createNodeField } = actions
+
+  if (
+    node.internal.type === `MarkdownRemark` ||
+    node.internal.type === `ChaptersJson`
+  ) {
+    const value = createFilePath({ node, getNode })
+    createNodeField({
+      name: `slug`,
+      node,
+      value,
+    })
+  }
+}
+
+// Create subpages from markdown and chapter pages from json
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions
 
@@ -24,6 +43,18 @@ exports.createPages = ({ actions, graphql }) => {
           }
         }
       }
+      allChaptersJson {
+        edges {
+          node {
+            id
+            city
+            photo
+            fields {
+              slug
+            }
+          }
+        }
+      }
     }
   `).then(result => {
     if (result.errors) {
@@ -31,9 +62,10 @@ exports.createPages = ({ actions, graphql }) => {
       return Promise.reject(result.errors)
     }
 
-    const pages = result.data.allMarkdownRemark.edges
+    const subPages = result.data.allMarkdownRemark.edges
+    const chapterPages = result.data.allChaptersJson.edges
 
-    pages.forEach(edge => {
+    subPages.forEach(edge => {
       const id = edge.node.id
       createPage({
         path: edge.node.fields.slug,
@@ -41,24 +73,25 @@ exports.createPages = ({ actions, graphql }) => {
         component: path.resolve(
           `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
         ),
-        // additional data can be passed via context
         context: {
           id,
         },
       })
     })
-  })
-}
-
-exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions
 
-  if (node.internal.type === `MarkdownRemark`) {
-    const value = createFilePath({ node, getNode })
-    createNodeField({
-      name: `slug`,
-      node,
-      value,
+    chapterPages.forEach(edge => {
+      const id = edge.node.id
+      const city = edge.node.city
+      const photo = edge.node.photo
+      createPage({
+        path: edge.node.fields.slug,
+        component: path.resolve(`src/templates/chapter.js`),
+        context: {
+          id,
+          city,
+          photo,
+        },
+      })
     })
-  }
+  })
 }
diff --git a/src/components/header/index.js b/src/components/header/index.js
index 70b777ce..2c34fd2c 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -30,7 +30,6 @@ const Header = () => {
           <Img
             fixed={data.file.childImageSharp.fixed}
             alt="Write/Speak/Code logo in full color"
-            className={styles.logo}
           />
         </Link>
         <Menu />
diff --git a/src/components/hero/hero.module.css b/src/components/hero/hero.module.css
new file mode 100644
index 00000000..e1db1f85
--- /dev/null
+++ b/src/components/hero/hero.module.css
@@ -0,0 +1,35 @@
+.overlay {
+  background: linear-gradient(
+    to right,
+    RGBA(255, 255, 255, 0.5),
+    RGBA(255, 255, 255, 0.5)
+  );
+  width: 100%;
+  height: 100%;
+  display: table;
+}
+
+.hero {
+  margin: 4em 2em;
+  @media screen and (min-width: 50em) {
+    margin: 8em 2em;
+  }
+  @media screen and (min-width: 95em) {
+    max-width: var(--container);
+    margin: 8em auto;
+  }
+
+  h1,
+  a {
+    display: inline;
+    background: var(--white);
+    padding: 0.25em 0.5em;
+  }
+  a {
+    background-color: var(--mint);
+  }
+}
+
+.cta {
+  margin-top: 1em;
+}
diff --git a/src/components/hero/index.js b/src/components/hero/index.js
new file mode 100644
index 00000000..bf655b71
--- /dev/null
+++ b/src/components/hero/index.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import BackgroundImage from 'gatsby-background-image'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+
+import styles from './hero.module.css'
+
+const ExternalLink = ({ href, text }) => (
+  <a href={href} className="link" target="_blank" rel="noopener noreferrer">
+    {text}&nbsp;
+    <FontAwesomeIcon icon={faExternalLinkAlt} aria-hidden />
+  </a>
+)
+
+const Hero = ({ title, link, photo }) => (
+  <div className={styles.container}>
+    <BackgroundImage
+      Tag="section"
+      fluid={photo}
+      backgroundColor={`var(--mint)`}
+      alt={`${title} chapter photo`}
+    >
+      <div className={styles.overlay}>
+        <section className={styles.hero}>
+          <h1>{title}</h1>
+          <div className={styles.cta}>
+            <ExternalLink href={link} text="Join the meetup group" />
+          </div>
+        </section>
+      </div>
+    </BackgroundImage>
+  </div>
+)
+
+export default Hero
diff --git a/src/components/organizers/index.js b/src/components/organizers/index.js
new file mode 100644
index 00000000..72dd3e0f
--- /dev/null
+++ b/src/components/organizers/index.js
@@ -0,0 +1,28 @@
+import React from 'react'
+
+import styles from './organizers.module.css'
+
+export const Organizer = ({ organizer }) => {
+  const person = organizer.node
+  return (
+    <figure className={styles.person}>
+      <img src={person.headshot} alt={`${person.name} headshot`} />
+      <figcaption>
+        <h3>{person.name}</h3>
+        <h4>{person.pronouns}</h4>
+      </figcaption>
+    </figure>
+  )
+}
+
+const Organizers = ({ organizers }) => (
+  <section className="container padding">
+    <h1 className="title">Meet the Organizers</h1>
+    <div className={styles.grid}>
+      {organizers.map(person => (
+        <Organizer organizer={person} />
+      ))}
+    </div>
+  </section>
+)
+export default Organizers
diff --git a/src/components/organizers/organizers.module.css b/src/components/organizers/organizers.module.css
new file mode 100644
index 00000000..640611d1
--- /dev/null
+++ b/src/components/organizers/organizers.module.css
@@ -0,0 +1,30 @@
+.grid {
+  padding: 1em 0;
+  @media screen and (min-width: 20em) {
+    display: grid;
+    grid-column-gap: 2em;
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  @media screen and (min-width: 50em) {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.person {
+  margin: 0;
+  img {
+    width: 100%;
+    max-width: ;
+  }
+  figcaption {
+    font-weight: var(--bold);
+  }
+  h3 {
+    margin: 0;
+  }
+  h4 {
+    font-weight: var(--semi-bold);
+    margin-top: 0.25em;
+    font-size: 0.9em;
+  }
+}
diff --git a/src/components/sponsors/index.js b/src/components/sponsors/index.js
index 942e56a0..1a56ab6f 100644
--- a/src/components/sponsors/index.js
+++ b/src/components/sponsors/index.js
@@ -47,37 +47,59 @@ import techbychoice from '../../../content/sponsors/techbychoice.json'
 import brooklynjs from '../../../content/sponsors/brooklynjs.json'
 import outintech from '../../../content/sponsors/out-in-tech.json'
 
+const SponsorshipCTA = () => (
+  <div className={styles.background}>
+    <div className={styles.row}>
+      <div className={styles.info}>
+        <h1 className="title">Sponsorship</h1>
+        <h2 className="subtitle">Recruit talented, driven technologists.</h2>
+        <p>
+          Sponsorship is the most effective way to demonstrate your commitment
+          to the professional development of people with marginalized genders at
+          your organization.
+        </p>
+      </div>
+      <div className={styles.cta}>
+        <p>
+          Write/Speak/Code is a 501c3 nonprofit. Contact{' '}
+          <span className="italic">sponsor@writespeakcode.com</span> to learn
+          more.
+        </p>
+        <a
+          className="link"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://drive.google.com/file/d/1X-nDSHYiPiPT79Rc1xUAZCNxvr67ei6J/view?usp=sharing"
+        >
+          2019 Sponsorship Prospectus
+        </a>
+      </div>
+    </div>
+  </div>
+)
+
+// Basic grid component for chapter pages
+export const ChapterSponsors = ({ sponsors }) => (
+  <section>
+    <SponsorshipCTA />
+    <div className={styles.wrap}>
+      <section className={[styles['other'], styles.levelSection].join(' ')}>
+        <h3 className={styles.heading}>Chapter Sponsors</h3>
+        <div className={styles.grid}>
+          {sponsors.map(sponsor => (
+            <Sponsor company={sponsor.node} key={sponsor.id} />
+          ))}
+        </div>
+      </section>
+    </div>
+  </section>
+)
+
+// Custom grid for homepage and conference page
 const Sponsors = ({ sponsors, isConference }) => {
   return (
     <section id="sponsorship">
-      <div className={styles.background}>
-        <div className={styles.row}>
-          <div className={styles.info}>
-            <h1 className="title">Sponsorship</h1>
-            <h2 className="subtitle">
-              Recruit talented, driven technologists.
-            </h2>
-            <p>
-              Sponsorship is the most effective way to demonstrate your
-              commitment to the professional development of people with
-              marginalized genders at your organization.
-            </p>
-          </div>
-          <div className={styles.cta}>
-            <p>
-              Write/Speak/Code is a 501c3 nonprofit. Contact{' '}
-              <span className="italic">sponsor@writespeakcode.com</span> to
-              learn more.
-            </p>
-            <ExternalLink
-              href="https://drive.google.com/file/d/1X-nDSHYiPiPT79Rc1xUAZCNxvr67ei6J/view?usp=sharing"
-              text="2019 Sponsorship Prospectus"
-              icon="pdf"
-            />
-          </div>
-        </div>
-      </div>
-
+      <SponsorshipCTA />
       <div className={styles.wrap}>
         <section
           className={[styles['platinum'], styles.levelSection].join(' ')}
diff --git a/src/images/chapters/seattle.jpg b/src/images/chapters/seattle.jpg
new file mode 100644
index 00000000..9f11a169
Binary files /dev/null and b/src/images/chapters/seattle.jpg differ
diff --git a/src/layouts/base.css b/src/layouts/base.css
index 3df26dd9..c7c81049 100644
--- a/src/layouts/base.css
+++ b/src/layouts/base.css
@@ -64,6 +64,21 @@ a {
   color: inherit;
 }
 
+.container {
+  margin: 2em;
+  @media screen and (min-width: 90em) {
+    max-width: var(--container);
+    margin: 0 auto;
+  }
+}
+
+.padding {
+  padding: 1em 0;
+  @media screen and (min-width: 80em) {
+    padding: 3em 0;
+  }
+}
+
 .link {
   display: inline;
   border-bottom: 4px solid;
diff --git a/src/templates/chapter.js b/src/templates/chapter.js
new file mode 100644
index 00000000..f16f65a5
--- /dev/null
+++ b/src/templates/chapter.js
@@ -0,0 +1,76 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import { SkipNavLink, SkipNavContent } from '@reach/skip-nav'
+import Header from '../components/header'
+import Footer from '../components/footer'
+import { ChapterSponsors } from '../components/sponsors'
+import Organizers from '../components/organizers'
+
+import Hero from '../components/hero'
+
+const ChapterTemplate = ({ data }) => {
+  const {
+    chaptersJson: chapter,
+    allSponsorsJson: sponsors,
+    allOrganizersJson: organizers,
+  } = data
+  return (
+    <>
+      <SkipNavLink />
+      <Header />
+      <SkipNavContent>
+        <main>
+          <Hero
+            title={chapter.city}
+            link={chapter.meetup}
+            photo={data.file.childImageSharp.fluid}
+          />
+          <Organizers organizers={organizers.edges} />
+          <ChapterSponsors sponsors={sponsors.edges} />
+        </main>
+      </SkipNavContent>
+      <Footer />
+    </>
+  )
+}
+
+export default ChapterTemplate
+
+export const chapterQuery = graphql`
+  query Chapter($id: String!, $city: String!, $photo: String!) {
+    chaptersJson(id: { eq: $id }) {
+      city
+      meetup
+      photo
+    }
+    allSponsorsJson(
+      filter: { sponsorships: { elemMatch: { city: { eq: $city } } } }
+    ) {
+      edges {
+        node {
+          id
+          name
+          logo
+          url
+        }
+      }
+    }
+    allOrganizersJson(filter: { chapter: { eq: $city } }) {
+      edges {
+        node {
+          id
+          name
+          pronouns
+          headshot
+        }
+      }
+    }
+    file(relativePath: { eq: $photo }) {
+      childImageSharp {
+        fluid(maxWidth: 3600) {
+          ...GatsbyImageSharpFluid_tracedSVG
+        }
+      }
+    }
+  }
+`
diff --git a/static/admin/config.yml b/static/admin/config.yml
index fc08d331..6ccee41f 100644
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -210,6 +210,10 @@ collections:
             widget: 'boolean'
             default: false
             required: false
+          - label: 'City'
+            name: 'city'
+            widget: 'string'
+            required: false
 
   - name: 'organizers'
     label: 'Organizers'