diff --git a/www/src/components/home/home-hero.js b/www/src/components/home/home-hero.js
index bd9033ba2..d04347ccb 100644
--- a/www/src/components/home/home-hero.js
+++ b/www/src/components/home/home-hero.js
@@ -1,10 +1,10 @@
 /** @jsx jsx */
-import { jsx, Themed } from "theme-ui"
+import { jsx } from "theme-ui"
 import { Link } from "gatsby"
 import { Button } from "theme-ui"
 import { baseColors } from "@theme-ui/preset-tailwind"
 import { darken } from "@theme-ui/color"
-import { AiOutlineFire } from "react-icons/ai"
+// import { AiOutlineFire } from "react-icons/ai"
 import { FiBookOpen, FiGithub } from "react-icons/fi"
 import GitHubButton from "react-github-btn"
 import catalystLogo from "../../../content/assets/catalyst-svg-logo.svg"
@@ -43,174 +43,103 @@ const HomeHero = () => {
           Star
         </GitHubButton>
       </div>
-      <img
-        src={catalystLogo}
-        alt="Gatsby Theme Catalyst Logo"
-        sx={{ width: "180px" }}
-      />
-      <h1
-        sx={{
-          fontFamily: "heading",
-          fontWeight: "heading",
-          textTransform: "uppercase",
-          textAlign: "center",
-          fontSize: [5, 6, 7, 8, null],
-          color: baseColors.gray[8],
-          mb: 3,
-        }}
-      >
-        Gatsby Theme Catalyst
-      </h1>
-      <Themed.inlineCode
-        sx={{
-          mb: 0,
-          px: 2,
-          bg: baseColors.gray[8],
-          color: baseColors.gray[1],
-          wordWrap: "break-word",
-          textOverflow: "wrap",
-          overflowWrap: "break-word",
-          wordBreak: "break-word",
-          lineHeight: "tight",
-        }}
-      >
-        gatsby new catalyst ehowey/gatsby-starter-catalyst
-      </Themed.inlineCode>
-      <Themed.p
-        sx={{
-          fonmtSize: 3,
-          my: 1,
-          textTransform: "uppercase",
-          fontWeight: "bold",
-        }}
-      >
-        or
-      </Themed.p>
-      <Themed.p
-        sx={{
-          mt: 0,
-          mb: 4,
-          px: 2,
-          pb: 1,
-          bg: baseColors.gray[8],
-          lineHeight: "tight",
-        }}
-      >
-        <Themed.a
-          href="https://www.sanity.io/create?template=ehowey%2Fsanity-template-catalyst"
+      <div sx={{ display: "grid", placeItems: "center" }}>
+        <img
+          src={catalystLogo}
+          alt="Gatsby Theme Catalyst Logo"
+          sx={{ width: "100px" }}
+        />
+        <h1
           sx={{
-            color: baseColors.gray[1],
-            fontFamily: "monospace",
-            fontSize: 1,
+            fontFamily: "heading",
+            fontWeight: "heading",
+            textTransform: "uppercase",
+            textAlign: "center",
+            fontSize: 4,
+            color: baseColors.gray[8],
+            mb: 3,
           }}
         >
-          sanity.io/create?template=ehowey/sanity-template-catalyst
-        </Themed.a>
-      </Themed.p>
+          Gatsby Theme Catalyst
+        </h1>
 
-      <nav sx={{ width: ["100%", "auto", null, null, null] }}>
-        <ul
-          sx={{
-            display: "grid",
-            gridTemplateColumns: [
-              "minmax(0, 1fr) minmax(0, 1fr)",
-              "auto auto auto",
-              null,
-              null,
-              null,
-            ],
-            gridTemplateRows: ["auto auto", "auto", null, null, null],
-            gridGap: 3,
-            maxWidth: "maxContentWidth",
-            m: 0,
-            p: 0,
-            listStyle: "none",
-          }}
-        >
-          <li
-            sx={{
-              gridColumn: ["1 / -1", "1 / 2", null, null, null],
-              grideRow: "1 / 2",
-            }}
-          >
-            <Button
-              as={Link}
-              to="/docs/getting-started/"
-              sx={{
-                fontSize: 2,
-                bg: "#e91c21",
-                color: "white",
-                boxShadow: "default",
-                display: "flex",
-                alignItems: "center",
-                transition: "all 0.3s ease",
-                justifyContent: ["center", "start", null, null, null],
-                ":hover, :active, :focus": {
-                  bg: darken("#e91c21", 0.03),
-                  boxShadow: "lg",
-                },
-              }}
-            >
-              <AiOutlineFire sx={{ mr: 1 }} /> Get Started
-            </Button>
-          </li>
-          <li
+        <nav sx={{ width: ["100%", "auto", null, null, null] }}>
+          <ul
             sx={{
-              gridColumn: ["1 / 2", "2 / 3", null, null, null],
-              gridRow: ["2 / 3", "1 / 2", null, null, null],
+              display: "grid",
+              gridTemplateColumns: [
+                "minmax(0, 1fr) minmax(0, 1fr)",
+                "auto auto auto",
+                null,
+                null,
+                null,
+              ],
+              gridTemplateRows: ["auto auto", "auto", null, null, null],
+              gridGap: 3,
+              maxWidth: "maxContentWidth",
+              m: 0,
+              p: 0,
+              listStyle: "none",
             }}
           >
-            <Button
-              as={Link}
-              to="/docs/"
+            <li
               sx={{
-                fontSize: 2,
-                bg: "#ffd7d7",
-                color: "black",
-                boxShadow: "default",
-                transition: "all 0.3s ease",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: ["center", "start", null, null, null],
-                ":hover, :active, :focus": {
-                  bg: darken("#ffd7d7", 0.03),
-                  boxShadow: "lg",
-                },
+                gridColumn: ["1 / 2", "2 / 3", null, null, null],
+                gridRow: ["2 / 3", "1 / 2", null, null, null],
               }}
             >
-              <FiBookOpen sx={{ mr: 1 }} /> Docs
-            </Button>
-          </li>
-          <li
-            sx={{
-              gridColumn: ["2 / 3", "3 / 4", null, null, null],
-              gridRow: ["2 / 3", "1 / 2", null, null, null],
-            }}
-          >
-            <Button
-              as="a"
-              href="https://github.com/ehowey/gatsby-theme-catalyst"
+              <Button
+                as={Link}
+                to="/docs/"
+                sx={{
+                  fontSize: 2,
+                  bg: "#ffd7d7",
+                  color: "black",
+                  boxShadow: "default",
+                  transition: "all 0.3s ease",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: ["center", "start", null, null, null],
+                  ":hover, :active, :focus": {
+                    bg: darken("#ffd7d7", 0.03),
+                    boxShadow: "lg",
+                  },
+                }}
+              >
+                <FiBookOpen sx={{ mr: 1 }} /> Docs
+              </Button>
+            </li>
+            <li
               sx={{
-                fontSize: 2,
-                bg: "#ffd7d7",
-                color: "black",
-                boxShadow: "default",
-                transition: "all 0.3s ease",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: ["center", "start", null, null, null],
-                ":hover, :active, :focus": {
-                  bg: darken("#ffd7d7", 0.03),
-                  boxShadow: "lg",
-                },
+                gridColumn: ["2 / 3", "3 / 4", null, null, null],
+                gridRow: ["2 / 3", "1 / 2", null, null, null],
               }}
             >
-              <FiGithub sx={{ mr: 1 }} />
-              GitHub
-            </Button>
-          </li>
-        </ul>
-      </nav>
+              <Button
+                as="a"
+                href="https://github.com/ehowey/gatsby-theme-catalyst"
+                sx={{
+                  fontSize: 2,
+                  bg: "#ffd7d7",
+                  color: "black",
+                  boxShadow: "default",
+                  transition: "all 0.3s ease",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: ["center", "start", null, null, null],
+                  ":hover, :active, :focus": {
+                    bg: darken("#ffd7d7", 0.03),
+                    boxShadow: "lg",
+                  },
+                }}
+              >
+                <FiGithub sx={{ mr: 1 }} />
+                GitHub
+              </Button>
+            </li>
+          </ul>
+        </nav>
+      </div>
     </header>
   )
 }
diff --git a/www/src/components/home/home-layout.js b/www/src/components/home/home-layout.js
index 2f156fb86..9110a3264 100644
--- a/www/src/components/home/home-layout.js
+++ b/www/src/components/home/home-layout.js
@@ -63,32 +63,3 @@ const HomeLayout = ({ children }) => {
 }
 
 export default HomeLayout
-
-// /** @jsx jsx */
-// import { jsx } from "theme-ui"
-// import { SkipNavLink, SkipNavContent } from "@reach/skip-nav"
-// import GlobalCSS from "../utils/global-css"
-// import SiteContainer from "./site-container"
-// import AlertBanner from "./alert-banner"
-// import Header from "./header"
-// import Main from "./main"
-// import ContentContainer from "./content-container"
-// import Footer from "./footer"
-
-// const SiteLayout = ({ children }) => {
-//   return (
-//     <SiteContainer>
-//       <GlobalCSS />
-//       <SkipNavLink />
-//       <AlertBanner />
-//       <Header />
-//       <Main>
-//         <SkipNavContent />
-//         <ContentContainer>{children}</ContentContainer>
-//       </Main>
-//       <Footer />
-//     </SiteContainer>
-//   )
-// }
-
-// export default SiteLayout
diff --git a/www/src/components/home/home-shutdown.js b/www/src/components/home/home-shutdown.js
new file mode 100644
index 000000000..50ae6a332
--- /dev/null
+++ b/www/src/components/home/home-shutdown.js
@@ -0,0 +1,88 @@
+/** @jsx jsx */
+import { jsx, Themed } from "theme-ui"
+import { baseColors } from "@theme-ui/preset-tailwind"
+
+const HomeShutdown = () => {
+  return (
+    <div>
+      <Themed.p>
+        After 2 years and over 2000 commits I have made the difficult decision
+        to shutdown Gatsby Theme Catalyst. This project will not be migrated to
+        Gatsby v4.
+      </Themed.p>
+      <Themed.p>
+        You will be able to access the docs indefinetely and I will continue to
+        respond to any issues on GitHub.
+      </Themed.p>
+      <Themed.p>
+        Before I talk about why, I want to say thank you to everyone who helped
+        out and contributed to this project it any way. A retweet, a comment, an
+        issue, or a pull request - they were all appreciated. For those of you I
+        collaborated with more closely it was exciting and fun to work with
+        learn from you.
+      </Themed.p>
+      <Themed.p>
+        A few quick notes about why I made this decision. TLDR; I don't think
+        Gatsby Themes are the best approach for my own freelance work anymore,
+        however I still rely heavily on Gatsby as a framework.
+      </Themed.p>
+      <Themed.ul>
+        <Themed.li>
+          <strong>Customization:</strong> I struggled with the themes when
+          needing to do a really custom piece of code and found myself using
+          more and more component shadowing to the point it was frustrating to
+          develop with.
+        </Themed.li>
+        <Themed.li>
+          <strong>Maintainability:</strong> With all of the dependencies tucked
+          away inside the themes coming back to a project after 6 months or a
+          year was a daunting task as I didn't have the power to granularly
+          manage updating dependencies as I needed to.
+        </Themed.li>
+        <Themed.li>
+          <strong>Speed:</strong> Themes are great at the start - you can go
+          from zero to hero in a matter of minutes but then as projects grew and
+          got more complex I found myself being slowed down by having to
+          reference files back inside of the theme. I found it much more
+          efficient to have all of the components, hooks, and files together in
+          single repo and not siloed off into themes.
+        </Themed.li>
+        <Themed.li>
+          <strong>Lack of use:</strong> This one didn't matter as much to me,
+          but no one really uses these themes much as far as I can tell. Given
+          that now I am also migrating my own freelance work away from the
+          themes it just isn't worth the time and effort to maintain a complex
+          project very few people are using.
+        </Themed.li>
+      </Themed.ul>
+      <Themed.p>
+        If you are currently using these themes I have updated and published a
+        release that supports Gatsby v3.14 which is the last version of Gatsby
+        before v4.
+      </Themed.p>
+      <Themed.p>
+        With moderate effort you can reconfigure your site into a traditional
+        Gatsby site, ejecting from the themes. The main tasks involve copy and
+        pasting the theme components into your own repo, and merging gatsby-node
+        as needed. If you are familiar with Gatsby projects this is fairly
+        straightforward but could be a struggle if you are less familiar with
+        the internal workings of Gatsby.
+      </Themed.p>
+      <Themed.p>I apologize for any frustration this may cause you.</Themed.p>
+      <Themed.p>
+        If you get stuck please feel free to reach out to me, and I will do my
+        best to help. I hope to also have an example repo of what this could
+        look like available in the near future.
+      </Themed.p>
+      <Themed.p>Happy coding!</Themed.p>
+      <Themed.p>
+        —
+        <Themed.a href="https://www.erichowey.dev/" sx={{ fontSize: 2 }}>
+          Eric Howey
+        </Themed.a>
+      </Themed.p>
+    </div>
+  )
+}
+
+export default HomeShutdown
diff --git a/www/src/gatsby-plugin-theme-ui/index.js b/www/src/gatsby-plugin-theme-ui/index.js
index 172501a3b..b73f88328 100644
--- a/www/src/gatsby-plugin-theme-ui/index.js
+++ b/www/src/gatsby-plugin-theme-ui/index.js
@@ -73,6 +73,9 @@ const theme = merge(BaseTheme, {
         textDecoration: "underline",
       },
     },
+    li: {
+      marginBottom: 2,
+    },
     h1: {
       fontFamily: "heading",
       fontWeight: "500",
diff --git a/www/src/pages/index.js b/www/src/pages/index.js
index 2dca3ac2f..c0e1423a4 100644
--- a/www/src/pages/index.js
+++ b/www/src/pages/index.js
@@ -2,13 +2,8 @@
 import { jsx } from "theme-ui"
 import { Seo } from "gatsby-theme-catalyst-core"
 import HomeLayout from "../components/home/home-layout"
-import Features from "../components/home/home-features"
-import AnimatedBlocks from "../components/animated-blocks"
+import HomeShutdown from "../components/home/home-shutdown"
 import TriangleVertical from "../components/triangle-spacer"
-import Demo from "../components/home/home-demo"
-import Why from "../components/home/home-why"
-import Intro from "../components/home/home-intro"
-import Heading from "../components/home/home-heading"
 
 const HomePage = () => {
   return (
@@ -17,28 +12,7 @@ const HomePage = () => {
         title="Home"
         description="Gatsby Theme Catalyst is an opinionated set of integrated themes and starters to accelerate your next Gatsby project. It uses Theme-UI and MDX under the hood to provide a smooth developer experience. Boilerplate starters to fully designed and production ready sites."
       />
-      <TriangleVertical />
-      <Intro />
-      <TriangleVertical />
-      <section>
-        <Heading> How It Works</Heading>
-        <AnimatedBlocks />
-      </section>
-      <TriangleVertical />
-      <section>
-        <Heading>Demo</Heading>
-        <Demo />
-      </section>
-      <TriangleVertical />
-      <section>
-        <Heading>Tech Choices</Heading>
-        <Features />
-      </section>
-      <TriangleVertical />
-      <section>
-        <Heading>Why?</Heading>
-        <Why />
-      </section>
+      <HomeShutdown />
     </HomeLayout>
   )
 }