diff --git a/assets/NotoSans-Italic.ttf b/assets/NotoSans-Italic.ttf
deleted file mode 100644
index 6d2c71c86..000000000
Binary files a/assets/NotoSans-Italic.ttf and /dev/null differ
diff --git a/assets/NotoSans-Italic.woff2 b/assets/NotoSans-Italic.woff2
new file mode 100644
index 000000000..cdfcf2af5
Binary files /dev/null and b/assets/NotoSans-Italic.woff2 differ
diff --git a/assets/NotoSans-Light.ttf b/assets/NotoSans-Light.ttf
deleted file mode 100644
index 404ed0787..000000000
Binary files a/assets/NotoSans-Light.ttf and /dev/null differ
diff --git a/assets/NotoSans-Light.woff2 b/assets/NotoSans-Light.woff2
new file mode 100644
index 000000000..31ddc8d77
Binary files /dev/null and b/assets/NotoSans-Light.woff2 differ
diff --git a/assets/NotoSans-LightItalic.ttf b/assets/NotoSans-LightItalic.ttf
deleted file mode 100644
index 4c338dba3..000000000
Binary files a/assets/NotoSans-LightItalic.ttf and /dev/null differ
diff --git a/assets/NotoSans-LightItalic.woff2 b/assets/NotoSans-LightItalic.woff2
new file mode 100644
index 000000000..e676d51ea
Binary files /dev/null and b/assets/NotoSans-LightItalic.woff2 differ
diff --git a/assets/NotoSans-Medium.ttf b/assets/NotoSans-Medium.ttf
deleted file mode 100644
index 5dbefd372..000000000
Binary files a/assets/NotoSans-Medium.ttf and /dev/null differ
diff --git a/assets/NotoSans-Medium.woff2 b/assets/NotoSans-Medium.woff2
new file mode 100644
index 000000000..4679e3f92
Binary files /dev/null and b/assets/NotoSans-Medium.woff2 differ
diff --git a/assets/NotoSans-MediumItalic.ttf b/assets/NotoSans-MediumItalic.ttf
deleted file mode 100644
index 3641525ea..000000000
Binary files a/assets/NotoSans-MediumItalic.ttf and /dev/null differ
diff --git a/assets/NotoSans-MediumItalic.woff2 b/assets/NotoSans-MediumItalic.woff2
new file mode 100644
index 000000000..3c70e6166
Binary files /dev/null and b/assets/NotoSans-MediumItalic.woff2 differ
diff --git a/assets/NotoSans-Regular.ttf b/assets/NotoSans-Regular.ttf
deleted file mode 100644
index 0a01a062f..000000000
Binary files a/assets/NotoSans-Regular.ttf and /dev/null differ
diff --git a/assets/NotoSans-Regular.woff2 b/assets/NotoSans-Regular.woff2
new file mode 100644
index 000000000..8496b16cd
Binary files /dev/null and b/assets/NotoSans-Regular.woff2 differ
diff --git a/assets/NotoSans-SemiBold.ttf b/assets/NotoSans-SemiBold.ttf
deleted file mode 100644
index 8b7fd1302..000000000
Binary files a/assets/NotoSans-SemiBold.ttf and /dev/null differ
diff --git a/assets/NotoSans-SemiBold.woff2 b/assets/NotoSans-SemiBold.woff2
new file mode 100644
index 000000000..db0106819
Binary files /dev/null and b/assets/NotoSans-SemiBold.woff2 differ
diff --git a/assets/NotoSans-SemiBoldItalic.ttf b/assets/NotoSans-SemiBoldItalic.ttf
deleted file mode 100644
index a7e904c38..000000000
Binary files a/assets/NotoSans-SemiBoldItalic.ttf and /dev/null differ
diff --git a/assets/NotoSans-SemiBoldItalic.woff2 b/assets/NotoSans-SemiBoldItalic.woff2
new file mode 100644
index 000000000..d6796fee5
Binary files /dev/null and b/assets/NotoSans-SemiBoldItalic.woff2 differ
diff --git a/gatsby-config.js b/gatsby-config.js
index e4bb373e9..bbf5b4a79 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -9,7 +9,6 @@ module.exports = {
   },
   plugins: [
     `gatsby-plugin-sitemap`,
-    `gatsby-plugin-transition-link`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {
diff --git a/package.json b/package.json
index 733ada892..75472ba3a 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,6 @@
     "gatsby-plugin-sass": "^2.1.3",
     "gatsby-plugin-sharp": "^2.2.7",
     "gatsby-plugin-sitemap": "^2.2.8",
-    "gatsby-plugin-transition-link": "^1.12.4",
     "gatsby-remark-copy-linked-files": "^2.1.3",
     "gatsby-remark-images": "^3.1.6",
     "gatsby-remark-prismjs": "^3.3.3",
@@ -40,7 +39,6 @@
     "gatsby-transformer-json": "^2.2.2",
     "gatsby-transformer-remark": "^2.6.6",
     "gatsby-transformer-sharp": "^2.2.3",
-    "gsap": "^2.1.3",
     "kleur": "^3.0.3",
     "markdown-builder": "^0.9.0",
     "node-sass": "^4.12.0",
@@ -49,7 +47,6 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-css-transition-replace": "^3.0.3",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
     "react-redux": "^7.1.0",
diff --git a/src/docs/components/Shell.js b/src/docs/components/Shell.js
index 988edf6e1..79e3d10f9 100644
--- a/src/docs/components/Shell.js
+++ b/src/docs/components/Shell.js
@@ -1,8 +1,6 @@
 import React from 'react';
-import { graphql, useStaticQuery } from 'gatsby';
+import { graphql, useStaticQuery, Link } from 'gatsby';
 import { connect } from 'react-redux';
-import AniLink from 'gatsby-plugin-transition-link/AniLink';
-import ReactCSSTransitionReplace from 'react-css-transition-replace';
 import config from '../../../config';
 
 import { toggleDarkMode } from '../state/app';
@@ -58,46 +56,35 @@ const Shell = ({
     <div className={isDarkMode ? 'page-container dark' : 'page-container'}>
       {/* Menu */}
       <header className='menu'>
-        <AniLink
-          cover
-          direction={viewportWidth < 600 ? 'up' : 'right'}
-          bg={isDarkMode ? '#434E76' : '#FFFFFF'}
+        <Link
           to='/search'
           aria-label='Search'
+          title='Search'
           className={isSearch ? 'menu-button active' : 'menu-button'}
         >
           <SearchIcon />
-        </AniLink>
-        <AniLink
-          cover
-          direction={viewportWidth < 600 ? 'up' : 'right'}
-          bg={isDarkMode ? '#434E76' : '#FFFFFF'}
+        </Link>
+        <Link
           to='/list'
           aria-label='Snippet list'
+          title='Snippet list'
           className={isList ? 'menu-button active' : 'menu-button'}
         >
           <ListIcon />
-        </AniLink>
+        </Link>
         {/* eslint-disable-next-line */}
         <a target='_blank'
           rel='noopener'
           href={config.repositoryUrl}
           aria-label='View on GitHub'
+          title='View on GitHub'
           className='menu-button'
         >
           <GithubIcon />
         </a>
-        {/* 
-          The use of React.Fragment here will cause a lot of errors to show up in webber:dev.
-          Truth is, this is the only decent way I found to deal with this module's odd behavior.
-          Keep as is, unless you can provide a better solution, in which case please send a PR.
-         */}
-        <ReactCSSTransitionReplace
-          transitionName='cross-fade'
-          transitionEnterTimeout={300}
-          transitionLeaveTimeout={300}
-          component='button'
+         <button 
           aria-label={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
+          title={isDarkMode ? 'Switch to light mode' : 'Switch to dark mode'}
           className='menu-button'
           childComponent={React.Fragment}
         >
@@ -112,7 +99,7 @@ const Shell = ({
               onClick={() => dispatch(toggleDarkMode(!isDarkMode))}
             />
           )}
-        </ReactCSSTransitionReplace>
+        </button>
       </header>
       {/* Content */}
       <div className='content'>
diff --git a/src/docs/components/SnippetCard.js b/src/docs/components/SnippetCard.js
index cb83ee1aa..12a4628d5 100644
--- a/src/docs/components/SnippetCard.js
+++ b/src/docs/components/SnippetCard.js
@@ -1,13 +1,12 @@
 import React from 'react';
+import { Link } from 'gatsby';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import config from '../../../config';
 
 import { getTextualContent, getCodeBlocks, optimizeAllNodes } from '../util';
 // import ShareIcon from './SVGs/ShareIcon';
-import AniLink from 'gatsby-plugin-transition-link/AniLink';
 import CollapseOpenIcon from './SVGs/CollapseOpenIcon';
 import CollapseClosedIcon from './SVGs/CollapseClosedIcon';
-import ReactCSSTransitionReplace from 'react-css-transition-replace';
 
 // ===================================================
 // Snippet Card HOC - check components below for more
@@ -104,18 +103,12 @@ const FullCard = ({ snippetData, difficulty, isDarkMode }) => {
         >
           {examplesOpen ? <CollapseOpenIcon /> : <CollapseClosedIcon />}Examples
         </button>
-        <ReactCSSTransitionReplace
-          transitionName='roll-up'
-          transitionEnterTimeout={300}
-          transitionLeaveTimeout={300}
-        >
-          {examplesOpen && (
-            <pre
-              className='section card-examples language-jsx'
-              dangerouslySetInnerHTML={{ __html: cardExamplesHtml }}
-            />
-          )}
-        </ReactCSSTransitionReplace>
+        {examplesOpen && (
+          <pre
+            className='section card-examples language-jsx'
+            dangerouslySetInnerHTML={{ __html: cardExamplesHtml }}
+          />
+        )}
       </div>
     </div>
   );
@@ -136,50 +129,46 @@ const ShortCard = ({
       getCodeBlocks(snippetData.html).code,
     )}`;
   return (
-    <div className='card short'>
-      <CardCorner difficulty={difficulty} />
-      <h4 className='card-title'>
-        <AniLink
-          paintDrip
-          to={`/snippet/${snippetData.id}`}
-          hex={isDarkMode ? '#434E76' : '#FFFFFF'}
-        >
+    <Link to={`/snippet/${snippetData.id}`} rel='canonical' className='clickable-card-wrapper'>
+      <div className='card short'>
+        <CardCorner difficulty={difficulty} />
+        <h4 className='card-title'>
           {snippetData.title}
-        </AniLink>
-      </h4>
-      <div
-        className='card-description'
-        dangerouslySetInnerHTML={{
-          __html: `${getTextualContent(snippetData.html)}`,
-        }}
-      />
-      {withCode ? <div className='card-bottom'>
-        <CopyToClipboard
-          text={snippetData.code}
-          onCopy={() => {
-            let tst = document.createElement('div');
-            tst.classList = 'toast';
-            tst.innerHTML = 'Snippet copied to clipboard!';
-            document.body.appendChild(tst);
-            setTimeout(function() {
-              tst.style.opacity = 0;
-              setTimeout(function() {
-                document.body.removeChild(tst);
-              }, 300);
-            }, 1700);
+        </h4>
+        <div
+          className='card-description'
+          dangerouslySetInnerHTML={{
+            __html: `${getTextualContent(snippetData.html)}`,
           }}
-        >
-          <button
-            className='button button-a button-copy'
-            aria-label='Copy to clipboard'
-          />
-        </CopyToClipboard>
-        <pre
-          className={`card-code language-${config.language}`}
-          dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
         />
-      </div> : '' }
-    </div>
+        {withCode ? <div className='card-bottom'>
+          <CopyToClipboard
+            text={snippetData.code}
+            onCopy={() => {
+              let tst = document.createElement('div');
+              tst.classList = 'toast';
+              tst.innerHTML = 'Snippet copied to clipboard!';
+              document.body.appendChild(tst);
+              setTimeout(function() {
+                tst.style.opacity = 0;
+                setTimeout(function() {
+                  document.body.removeChild(tst);
+                }, 300);
+              }, 1700);
+            }}
+          >
+            <button
+              className='button button-a button-copy'
+              aria-label='Copy to clipboard'
+            />
+          </CopyToClipboard>
+          <pre
+            className={`card-code language-${config.language}`}
+            dangerouslySetInnerHTML={{ __html: cardCodeHtml }}
+          />
+        </div> : '' }
+      </div>
+    </Link>
   );
 };
 
diff --git a/src/docs/pages/404.js b/src/docs/pages/404.js
index 5239aa371..557a07200 100644
--- a/src/docs/pages/404.js
+++ b/src/docs/pages/404.js
@@ -1,6 +1,6 @@
 import React from 'react';
+import { Link } from 'gatsby';
 import { connect } from 'react-redux';
-import AniLink from 'gatsby-plugin-transition-link/AniLink';
 
 import Shell from '../components/Shell';
 import Meta from '../components/Meta';
@@ -21,10 +21,8 @@ const NotFoundPage = ({ isDarkMode }) => (
         <p className='empty-page-subtext'>
           Seems like you have reached a page that does not exist.
         </p>
-        <AniLink
-          paintDrip
+        <Link
           to='/'
-          hex={isDarkMode ? '#434E76' : '#FFFFFF'}
           className='button button-a button-home'
         >
           <svg
@@ -43,7 +41,7 @@ const NotFoundPage = ({ isDarkMode }) => (
             <polyline points='9 22 9 12 15 12 15 22'></polyline>
           </svg>
           &nbsp;&nbsp;Go home
-        </AniLink>
+        </Link>
       </div>
     </Shell>
   </>
diff --git a/src/docs/pages/list.js b/src/docs/pages/list.js
index e3e52d798..6ec322f73 100644
--- a/src/docs/pages/list.js
+++ b/src/docs/pages/list.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import { graphql } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 import { connect } from 'react-redux';
 import { pushNewPage } from '../state/app';
 import { capitalize } from '../util';
 
 import Shell from '../components/Shell';
 import Meta from '../components/Meta';
-import AniLink from 'gatsby-plugin-transition-link/AniLink';
 import SnippetCard from '../components/SnippetCard';
 
 import { getRawCodeBlocks as getCodeBlocks } from '../util';
@@ -60,14 +59,12 @@ const ListPage = props => {
         {tags.map(tag => (
           <>
             <h3 className='tag-title' key={`tag_title_${tag}`}>
-              <AniLink
+              <Link
                 key={`tag_link_${tag}`}
-                paintDrip
                 to={`/tag/${tag}`}
-                hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
               >
                 {capitalize(tag)}
-              </AniLink>
+              </Link>
             </h3>
             {snippets
               .filter(snippet => snippet.tags[0] === tag)
@@ -85,13 +82,11 @@ const ListPage = props => {
         {staticPages.map(page => (
           <SimpleCard 
             title={(
-              <AniLink
-                paintDrip
+              <Link
                 to={`/${page.url}`}
-                hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
               >
                 {page.title}
-              </AniLink>
+              </Link>
             )}
           >
             <p>{page.description}</p>
diff --git a/src/docs/styles/_button.scss b/src/docs/styles/_button.scss
index 689b7e96d..68c8342ae 100644
--- a/src/docs/styles/_button.scss
+++ b/src/docs/styles/_button.scss
@@ -52,6 +52,7 @@
   background-position: center;
   width: 44px;
   height: 44px;
+  z-index: 10;
 }
 .button.button-social-sh {
   position: absolute;
diff --git a/src/docs/styles/_card.scss b/src/docs/styles/_card.scss
index 39004f99b..d5f1124bf 100644
--- a/src/docs/styles/_card.scss
+++ b/src/docs/styles/_card.scss
@@ -2,6 +2,8 @@
 // Cards
 // ===================================================
 .card {
+  backface-visibility: hidden;
+  will-change: transform;
   position: relative;
   transition: all 0.3s ease;
   margin: 1rem 1.25rem;
@@ -168,7 +170,13 @@
   }
 }
 
-// Animation for card example
-.roll-up-height {
-  transition: height 0.3s ease-in-out;
-}
\ No newline at end of file
+.clickable-card-wrapper {
+  &:link, &:visited {
+    &:hover, &:focus {
+      text-decoration: none;
+      .card {
+        transform: scale(1.025);
+      }
+    }
+  }
+}
diff --git a/src/docs/styles/_fonts.scss b/src/docs/styles/_fonts.scss
index 42e20aed6..a95a6c6d9 100644
--- a/src/docs/styles/_fonts.scss
+++ b/src/docs/styles/_fonts.scss
@@ -28,7 +28,7 @@
   font-style: normal;
   font-weight: 300;
   font-display: swap;
-  src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../../assets/NotoSans-Light.ttf) format('truetype');
+  src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../../assets/NotoSans-Light.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -36,7 +36,7 @@
   font-style: italic;
   font-weight: 300;
   font-display: swap;
-  src: local('Noto Sans LightItalic'), local('NotoSans-LightItalic'), url(../../../assets/NotoSans-LightItalic.ttf) format('truetype');
+  src: local('Noto Sans LightItalic'), local('NotoSans-LightItalic'), url(../../../assets/NotoSans-LightItalic.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -44,7 +44,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: local('Noto Sans'), local('NotoSans-Regular'), url(../../../assets/NotoSans-Regular.ttf) format('truetype');
+  src: local('Noto Sans'), local('NotoSans-Regular'), url(../../../assets/NotoSans-Regular.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -52,7 +52,7 @@
   font-style: italic;
   font-weight: 400;
   font-display: swap;
-  src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(../../../assets/NotoSans-Italic.ttf) format('truetype');
+  src: local('Noto Sans Italic'), local('NotoSans-Italic'), url(../../../assets/NotoSans-Italic.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -60,7 +60,7 @@
   font-style: normal;
   font-weight: 500;
   font-display: swap;
-  src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../../assets/NotoSans-Medium.ttf) format('truetype');
+  src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../../assets/NotoSans-Medium.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -68,7 +68,7 @@
   font-style: italic;
   font-weight: 500;
   font-display: swap;
-  src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'), url(../../../assets/NotoSans-MediumItalic.ttf) format('truetype');
+  src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'), url(../../../assets/NotoSans-MediumItalic.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -76,7 +76,7 @@
   font-style: normal;
   font-weight: 600;
   font-display: swap;
-  src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url(../../../assets/NotoSans-SemiBold.ttf) format('truetype');
+  src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'), url(../../../assets/NotoSans-SemiBold.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
@@ -84,6 +84,6 @@
   font-style: italic;
   font-weight: 600;
   font-display: swap;
-  src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'), url(../../../assets/NotoSans-SemiBoldItalic.ttf) format('truetype');
+  src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'), url(../../../assets/NotoSans-SemiBoldItalic.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
\ No newline at end of file
diff --git a/src/docs/styles/_menu.scss b/src/docs/styles/_menu.scss
index 331b72bb7..0a93d93fc 100644
--- a/src/docs/styles/_menu.scss
+++ b/src/docs/styles/_menu.scss
@@ -63,23 +63,3 @@
     }
   }
 }
-
-// Animate transition between light and dark mode
-.cross-fade-leave {
-  transform: scale(1);
-}
-.cross-fade-leave.cross-fade-leave-active {
-  transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
-  transform: scale(0.1);
-}
-.cross-fade-enter {
-  transform: scale(0.1);
-}
-.cross-fade-enter.cross-fade-enter-active {
-  transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
-  transform: scale(0.95)
-}
-.cross-fade-height {
-  height: 61px;
-  transition: height 0.15s ease-in-out 0.15s;
-}
\ No newline at end of file
diff --git a/src/docs/templates/SnippetPage.js b/src/docs/templates/SnippetPage.js
index 8753df4e8..860eae851 100644
--- a/src/docs/templates/SnippetPage.js
+++ b/src/docs/templates/SnippetPage.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import { graphql } from 'gatsby';
+import { graphql, Link } from 'gatsby';
 import { connect } from 'react-redux';
 
 import Meta from '../components/Meta';
 import Shell from '../components/Shell';
 import SnippetCard from '../components/SnippetCard';
 import BackArrowIcon from '../components/SVGs/BackArrowIcon';
-import AniLink from 'gatsby-plugin-transition-link/AniLink';
 
 // ===================================================
 // Individual snippet page template
@@ -21,16 +20,13 @@ const SnippetPage = props => {
     <>
       <Meta title={post.frontmatter.title} description={post.excerpt} />
       <Shell>
-        <AniLink
+        <Link
           className='link-back'
           to={`${props.lastPageUrl}`}
-          cover
-          direction='right'
-          bg={props.isDarkMode ? '#434E76' : '#FFFFFF'}
         >
           <BackArrowIcon />
           &nbsp;&nbsp;Back to {props.lastPageTitle}
-        </AniLink>
+        </Link>
         <SnippetCard
           snippetData={{
             title: postData.title,
diff --git a/src/docs/util/index.js b/src/docs/util/index.js
index 62c5251e9..68ff78b7c 100644
--- a/src/docs/util/index.js
+++ b/src/docs/util/index.js
@@ -7,19 +7,10 @@ const capitalize = (str, lowerRest = false) =>
 
 // Get the textual content in a gatsby page
 const getTextualContent = (str, noExplain = false) => {
-  const regex = /([\s\S]*?)<div class="gatsby-highlight"/g;
-  const results = [];
-  let m = null;
-  while ((m = regex.exec(str)) !== null) {
-    if (m.index === regex.lastIndex) regex.lastIndex += 1;
-
-    m.forEach((match, groupIndex) => {
-      results.push(match);
-    });
-  }
-  if(noExplain)
-    return results[1].slice(0, results[1].lastIndexOf('<p>'));
-  return results[1];
+  const result = str.slice(0, str.indexOf('<div class="gatsby-highlight"'));
+  if (noExplain)
+    return result.slice(0, result.lastIndexOf('<p>'));
+  return result;
 };
 
 // Gets the code blocks in a gatsby page