diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
index fcfd94b7c..783e1b592 100644
--- a/src/components/breadcrumb/breadcrumb.js
+++ b/src/components/breadcrumb/breadcrumb.js
@@ -47,9 +47,10 @@ const Breadcrumbs = ({
 
   return (
     <div className="m-4 md:mx-2 md:ml-4 h-full flex">
-      <Link to={parentSiteUrl} className="mx-2 h-full">
+      {/* `parentSiteUrl` is absolute, `Link` only supports relative urls */}
+      <a href={parentSiteUrl} className="mx-2 h-full">
         <img alt="SSW Foursquare" src={Icon} className="w-4 mt-1" />
-      </Link>
+      </a>
       <div className="w-full">
         <ul className="flex flex-col md:flex-row align-middle breadcrumb">
           <li className="w-auto flex">
diff --git a/src/components/head/head.js b/src/components/head/head.js
index 8bb793a00..0a027c4e6 100644
--- a/src/components/head/head.js
+++ b/src/components/head/head.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet';
-import { StaticQuery, graphql } from 'gatsby';
+import { useStaticQuery, graphql } from 'gatsby';
 import { Location } from '@reach/router';
 import schemaGenerator from '../../helpers/schemaGenerator';
 import { pathPrefix } from '../../../site-config';
@@ -195,34 +195,33 @@ Head.propTypes = {
   location: PropTypes.object.isRequired,
 };
 
-const HeadWithQuery = (props) => (
-  <StaticQuery
-    query={graphql`
-      query {
-        site {
-          siteMetadata {
-            siteTitle
-            siteTitleShort
-            siteDescription
-            siteUrl
-            parentSiteUrl
-            themeColor
-            social {
-              twitter
-              fbAppId
-            }
+function HeadWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          siteTitle
+          siteTitleShort
+          siteDescription
+          siteUrl
+          parentSiteUrl
+          themeColor
+          social {
+            twitter
+            fbAppId
           }
         }
       }
-    `}
-    render={(data) => (
-      <Location>
-        {({ location }) => (
-          <Head {...data.site.siteMetadata} {...props} location={location} />
-        )}
-      </Location>
-    )}
-  />
-);
+    }
+  `);
+
+  return (
+    <Location>
+      {({ location }) => (
+        <Head {...data.site.siteMetadata} {...props} location={location} />
+      )}
+    </Location>
+  );
+}
 
 export default HeadWithQuery;
diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
index 68859fdf6..6209cb3fe 100644
--- a/src/components/layout/layout.js
+++ b/src/components/layout/layout.js
@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { StaticQuery, graphql, navigate } from 'gatsby';
+import { useStaticQuery, graphql, navigate } from 'gatsby';
 import Head from '../head/head';
 import Header from '../header/header';
 import Footer from '../footer/footer';
@@ -74,20 +74,19 @@ Layout.propTypes = {
   crumbLabel: PropTypes.string,
 };
 
-const LayoutWithQuery = (props) => (
-  <StaticQuery
-    query={graphql`
-      query LayoutQuery {
-        site {
-          siteMetadata {
-            siteTitle
-          }
+function LayoutWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query LayoutQuery {
+      site {
+        siteMetadata {
+          siteTitle
         }
       }
-    `}
-    render={(data) => <Layout data={data} {...props} />}
-  />
-);
+    }
+  `);
+
+  return <Layout data={data} {...props} />;
+}
 
 LayoutWithQuery.propTypes = {
   children: PropTypes.node.isRequired,
diff --git a/src/components/tooltip/tooltip.js b/src/components/tooltip/tooltip.js
index 32fb7bc9b..a5ad38e41 100644
--- a/src/components/tooltip/tooltip.js
+++ b/src/components/tooltip/tooltip.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-const Tooltip = ({ children, text, showDelay, hideDelay }) => {
+const Tooltip = ({ children, text, showDelay, hideDelay, className = '' }) => {
   const [showTooltip, setShowTooltip] = useState(false);
 
   useEffect(() => {
@@ -23,7 +23,7 @@ const Tooltip = ({ children, text, showDelay, hideDelay }) => {
 
   return (
     <button
-      className="group relative flex h-10 items-center justify-center"
+      className={`group relative flex h-10 items-center justify-center ${className}`}
       onMouseEnter={() => setShowTooltip(true)}
       onMouseLeave={() => setShowTooltip(false)}
     >
@@ -50,6 +50,7 @@ Tooltip.propTypes = {
   text: PropTypes.string.isRequired,
   showDelay: PropTypes.number,
   hideDelay: PropTypes.number,
+  className: PropTypes.string,
 };
 
 export default Tooltip;
diff --git a/src/pages/archived.js b/src/pages/archived.js
index 25cca5134..f2fee0687 100644
--- a/src/pages/archived.js
+++ b/src/pages/archived.js
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { StaticQuery, graphql } from 'gatsby';
+import { useStaticQuery, graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import { config } from '@fortawesome/fontawesome-svg-core';
 import Breadcrumb from '../components/breadcrumb/breadcrumb';
@@ -160,88 +160,87 @@ Archived.propTypes = {
   location: PropTypes.object.isRequired,
 };
 
-const ArchivedWithQuery = (props) => (
-  <StaticQuery
-    query={graphql`
-      query ArchiveQuery {
-        main: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "main" } }
+function ArchivedWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query ArchiveQuery {
+      main: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "main" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              index
-            }
-            parent {
-              ... on File {
-                name
-              }
+          parent {
+            ... on File {
+              name
             }
           }
         }
-        topCategories: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "top-category" } }
+      }
+      topCategories: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "top-category" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              index
-            }
-            parent {
-              ... on File {
-                name
-                relativeDirectory
-              }
+          parent {
+            ... on File {
+              name
+              relativeDirectory
             }
           }
         }
-        categories: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "category" } }
+      }
+      categories: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "category" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            archivedreason
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              archivedreason
-              index
-            }
-            parent {
-              ... on File {
-                name
-                relativeDirectory
-              }
+          parent {
+            ... on File {
+              name
+              relativeDirectory
             }
           }
         }
-        rules: allMarkdownRemark(
-          filter: { frontmatter: { type: { eq: "rule" } } }
-        ) {
-          nodes {
-            frontmatter {
-              uri
-              archivedreason
-              title
-            }
+      }
+      rules: allMarkdownRemark(
+        filter: { frontmatter: { type: { eq: "rule" } } }
+      ) {
+        nodes {
+          frontmatter {
+            uri
+            archivedreason
+            title
           }
         }
       }
-    `}
-    render={(data) => <Archived data={data} {...props} />}
-  />
-);
+    }
+  `);
+
+  return <Archived data={data} {...props} />;
+}
 
 export default ArchivedWithQuery;
diff --git a/src/pages/index.js b/src/pages/index.js
index 62b6ffaef..b07243ccf 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,4 +1,4 @@
-import { Link, StaticQuery, graphql } from 'gatsby';
+import { Link, useStaticQuery, graphql } from 'gatsby';
 import {
   faArchive,
   faPause,
@@ -32,7 +32,7 @@ const Index = ({ data, location }) => {
               <Link to={'/latest-rules?size=50'} className="group unstyled">
                 <FontAwesomeIcon
                   icon={faBolt}
-                  size={30}
+                  size="lg"
                   className="group-hover:text-ssw-red transition ease-in-out delay-75 duration-150"
                 />{' '}
                 <span className="text-lg underline decoration-underline duration-150 group-hover:decoration-ssw-red group-hover:text-ssw-red transition ease-in-out delay-75">
@@ -106,88 +106,87 @@ Index.propTypes = {
   location: PropTypes.object,
 };
 
-const IndexWithQuery = (props) => (
-  <StaticQuery
-    query={graphql`
-      query HomepageQuery {
-        main: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "main" } }
+function IndexWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query HomepageQuery {
+      main: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "main" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              index
-            }
-            parent {
-              ... on File {
-                name
-              }
+          parent {
+            ... on File {
+              name
             }
           }
         }
-        topCategories: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "top-category" } }
+      }
+      topCategories: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "top-category" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              index
-            }
-            parent {
-              ... on File {
-                name
-                relativeDirectory
-              }
+          parent {
+            ... on File {
+              name
+              relativeDirectory
             }
           }
         }
-        categories: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "category" } }
+      }
+      categories: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "category" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            index
+            archivedreason
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              index
-              archivedreason
-            }
-            parent {
-              ... on File {
-                name
-                relativeDirectory
-              }
+          parent {
+            ... on File {
+              name
+              relativeDirectory
             }
           }
         }
-        rules: allMarkdownRemark(
-          filter: { frontmatter: { type: { eq: "rule" } } }
-        ) {
-          nodes {
-            frontmatter {
-              title
-              uri
-              archivedreason
-            }
+      }
+      rules: allMarkdownRemark(
+        filter: { frontmatter: { type: { eq: "rule" } } }
+      ) {
+        nodes {
+          frontmatter {
+            title
+            uri
+            archivedreason
           }
         }
       }
-    `}
-    render={(data) => <Index data={data} {...props} />}
-  />
-);
+    }
+  `);
+
+  return <Index data={data} {...props} />;
+}
 
 export default IndexWithQuery;
diff --git a/src/pages/orphaned.js b/src/pages/orphaned.js
index 87ebc00a7..5e1c10079 100644
--- a/src/pages/orphaned.js
+++ b/src/pages/orphaned.js
@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { StaticQuery, graphql } from 'gatsby';
+import { useStaticQuery, graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import { config } from '@fortawesome/fontawesome-svg-core';
 import Breadcrumb from '../components/breadcrumb/breadcrumb';
@@ -272,90 +272,89 @@ Orphaned.propTypes = {
   location: PropTypes.object.isRequired,
 };
 
-const OrphanedWithQuery = (props) => (
-  <StaticQuery
-    query={graphql`
-      query OrphanedQuery {
-        main: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "main" } }
+function OrphanedWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query OrphanedQuery {
+      main: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "main" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              index
-            }
-            parent {
-              ... on File {
-                name
-              }
+          parent {
+            ... on File {
+              name
             }
           }
         }
-        topCategories: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "top-category" } }
+      }
+      topCategories: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "top-category" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              index
-            }
-            parent {
-              ... on File {
-                name
-                relativeDirectory
-              }
+          parent {
+            ... on File {
+              name
+              relativeDirectory
             }
           }
         }
-        categories: allMarkdownRemark(
-          filter: {
-            fileAbsolutePath: { regex: "/(categories)/" }
-            frontmatter: { type: { eq: "category" } }
+      }
+      categories: allMarkdownRemark(
+        filter: {
+          fileAbsolutePath: { regex: "/(categories)/" }
+          frontmatter: { type: { eq: "category" } }
+        }
+      ) {
+        nodes {
+          html
+          frontmatter {
+            type
+            title
+            archivedreason
+            index
           }
-        ) {
-          nodes {
-            html
-            frontmatter {
-              type
-              title
-              archivedreason
-              index
-            }
-            parent {
-              ... on File {
-                name
-                relativeDirectory
-              }
+          parent {
+            ... on File {
+              name
+              relativeDirectory
             }
           }
         }
-        rules: allMarkdownRemark(
-          filter: { frontmatter: { type: { eq: "rule" } } }
-        ) {
-          nodes {
-            frontmatter {
-              uri
-              archivedreason
-              title
-            }
-            html
-            excerpt(format: HTML, pruneLength: 500)
+      }
+      rules: allMarkdownRemark(
+        filter: { frontmatter: { type: { eq: "rule" } } }
+      ) {
+        nodes {
+          frontmatter {
+            uri
+            archivedreason
+            title
           }
+          html
+          excerpt(format: HTML, pruneLength: 500)
         }
       }
-    `}
-    render={(data) => <Orphaned data={data} {...props} />}
-  />
-);
+    }
+  `);
+
+  return <Orphaned data={data} {...props} />;
+}
 
 export default OrphanedWithQuery;
diff --git a/src/pages/profile.js b/src/pages/profile.js
index 0838f07a6..292466250 100644
--- a/src/pages/profile.js
+++ b/src/pages/profile.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { StaticQuery, graphql } from 'gatsby';
+import { useStaticQuery, graphql } from 'gatsby';
 import Breadcrumb from '../components/breadcrumb/breadcrumb';
 import ProfileBadge from '../components/profile-badge/profile-badge';
 import ProfileContent from '../components/profile-content/profile-content';
@@ -143,29 +143,28 @@ Profile.propTypes = {
   gitHubUsername: PropTypes.string,
 };
 
-const ProfileWithQuery = (props) => (
-  <StaticQuery
-    query={graphql`
-      query ProfilePageQuery {
-        allMarkdownRemark(filter: { frontmatter: { type: { eq: "rule" } } }) {
-          nodes {
-            excerpt(format: HTML, pruneLength: 500)
-            frontmatter {
+function ProfileWithQuery(props) {
+  const data = useStaticQuery(graphql`
+    query ProfilePageQuery {
+      allMarkdownRemark(filter: { frontmatter: { type: { eq: "rule" } } }) {
+        nodes {
+          excerpt(format: HTML, pruneLength: 500)
+          frontmatter {
+            title
+            uri
+            guid
+            authors {
               title
-              uri
-              guid
-              authors {
-                title
-              }
             }
-            htmlAst
           }
+          htmlAst
         }
       }
-    `}
-    render={(data) => <Profile data={data} {...props} />}
-  />
-);
+    }
+  `);
+
+  return <Profile data={data} {...props} />;
+}
 
 ProfilePage.propTypes = {
   gitHubUsername: PropTypes.string,
diff --git a/src/templates/category.js b/src/templates/category.js
index 7e9149dc1..81b947086 100644
--- a/src/templates/category.js
+++ b/src/templates/category.js
@@ -78,20 +78,18 @@ export default function Category({ data }) {
                 </span>
               </h1>
 
-              <Tooltip text="Edit in GitHub">
-                <button className="mt-1 justify-self-end">
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href={`https://github.com/SSWConsulting/SSW.Rules.Content/tree/${process.env.CONTENT_BRANCH}/${category.parent.relativePath}`}
-                  >
-                    <FontAwesomeIcon
-                      icon={faGithub}
-                      size="2x"
-                      className="category-icon bookmark-icon"
-                    />
-                  </a>
-                </button>
+              <Tooltip text="Edit in GitHub" className="mt-1 justify-self-end">
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href={`https://github.com/SSWConsulting/SSW.Rules.Content/tree/${process.env.CONTENT_BRANCH}/${category.parent.relativePath}`}
+                >
+                  <FontAwesomeIcon
+                    icon={faGithub}
+                    size="2x"
+                    className="category-icon bookmark-icon"
+                  />
+                </a>
               </Tooltip>
             </div>
 
