diff --git a/example/src/gatsby-theme-contact/components/details.js b/example/src/gatsby-theme-contact/components/details.js
index a88a3f3..40fefcc 100644
--- a/example/src/gatsby-theme-contact/components/details.js
+++ b/example/src/gatsby-theme-contact/components/details.js
@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import React from 'react'
-import { jsx, Styled } from 'theme-ui'
+import { jsx, Themed } from 'theme-ui'
 
 const Details = () => (
   <>
-    <Styled.h3 sx={{ mt: 0 }}>Address</Styled.h3>
+    <Themed.h3 sx={{ mt: 0 }}>Address</Themed.h3>
     <span>
       David Mathews
       <br />
@@ -13,12 +13,12 @@ const Details = () => (
       Moscow Kentucky 77382
     </span>
 
-    <Styled.h3>Phone</Styled.h3>
+    <Themed.h3>Phone</Themed.h3>
     <span>(357) 616-5411</span>
 
-    <Styled.h3>Email</Styled.h3>
+    <Themed.h3>Email</Themed.h3>
     <span>
-      <Styled.a href='mailto:email@example.com'>email@example.com</Styled.a>
+      <Themed.a href='mailto:email@example.com'>email@example.com</Themed.a>
     </span>
   </>
 )
diff --git a/gatsby-theme-contact/README.md b/gatsby-theme-contact/README.md
index ede8764..6eaf7cb 100644
--- a/gatsby-theme-contact/README.md
+++ b/gatsby-theme-contact/README.md
@@ -46,11 +46,11 @@ Gatsby theme for a styled serverless contact page using Netlify Forms. It can al
    // src/gatsby-theme-contact/components/details.js
    /** @jsx jsx */
    import React from 'react'
-   import { jsx, Styled } from 'theme-ui'
+   import { jsx, Themed } from 'theme-ui'
 
    const Details = () => (
      <>
-       <Styled.h3 sx={{ mt: 0 }}>Address</Styled.h3>
+       <Themed.h3 sx={{ mt: 0 }}>Address</Themed.h3>
        <span>
          David Mathews
          <br />
@@ -59,12 +59,12 @@ Gatsby theme for a styled serverless contact page using Netlify Forms. It can al
          Moscow Kentucky 77382
        </span>
 
-       <Styled.h3>Phone</Styled.h3>
+       <Themed.h3>Phone</Themed.h3>
        <span>(357) 616-5411</span>
 
-       <Styled.h3>Email</Styled.h3>
+       <Themed.h3>Email</Themed.h3>
        <span>
-         <Styled.a href='mailto:email@example.com'>email@example.com</Styled.a>
+         <Themed.a href='mailto:email@example.com'>email@example.com</Themed.a>
        </span>
      </>
    )
diff --git a/gatsby-theme-contact/src/components/header.js b/gatsby-theme-contact/src/components/header.js
index 455a1d5..3501a73 100644
--- a/gatsby-theme-contact/src/components/header.js
+++ b/gatsby-theme-contact/src/components/header.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Styled } from 'theme-ui'
+import { Themed } from 'theme-ui'
 
 const Header = () => (
   <>
-    <Styled.h2>Get in touch</Styled.h2>
+    <Themed.h2>Get in touch</Themed.h2>
   </>
 )
 
diff --git a/gatsby-theme-contact/src/components/intro.js b/gatsby-theme-contact/src/components/intro.js
index 5bcc545..6bd37ee 100644
--- a/gatsby-theme-contact/src/components/intro.js
+++ b/gatsby-theme-contact/src/components/intro.js
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Styled } from 'theme-ui'
+import { Themed } from 'theme-ui'
 
 const Intro = () => (
   <>
-    <Styled.p>
+    <Themed.p>
       If you want to get in touch for your next project or you still have
       questions left, do not hesitate to start a chat.
-    </Styled.p>
+    </Themed.p>
   </>
 )
 
diff --git a/gatsby-theme-contact/src/components/socials.js b/gatsby-theme-contact/src/components/socials.js
index b184f07..6882c7f 100644
--- a/gatsby-theme-contact/src/components/socials.js
+++ b/gatsby-theme-contact/src/components/socials.js
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react'
-import { jsx, Styled, useThemeUI } from 'theme-ui'
+import { jsx, Themed, useThemeUI } from 'theme-ui'
 import { SocialIcon } from 'react-social-icons'
 import useSiteMetadata from '../hooks/use-site-metadata'
 
@@ -9,10 +9,10 @@ const Socials = () => {
   const { theme } = useThemeUI()
   return social ? (
     <>
-      <Styled.h3>Socials</Styled.h3>
-      <Styled.ul sx={{ listStyle: 'none', p: 0, m: 0 }}>
+      <Themed.h3>Socials</Themed.h3>
+      <Themed.ul sx={{ listStyle: 'none', p: 0, m: 0 }}>
         {social.map(({ url }) => (
-          <Styled.li
+          <Themed.li
             key={url}
             sx={{
               display: 'inline',
@@ -24,9 +24,9 @@ const Socials = () => {
               bgColor='transparent'
               fgColor={theme.colors.text}
             />
-          </Styled.li>
+          </Themed.li>
         ))}
-      </Styled.ul>
+      </Themed.ul>
     </>
   ) : null
 }