diff --git a/src/docs/components/Shell.js b/src/docs/components/Shell.js
index 988edf6e1..0187e0ffc 100644
--- a/src/docs/components/Shell.js
+++ b/src/docs/components/Shell.js
@@ -72,7 +72,7 @@ const Shell = ({
           cover
           direction={viewportWidth < 600 ? 'up' : 'right'}
           bg={isDarkMode ? '#434E76' : '#FFFFFF'}
-          to='/list'
+          to='/'
           aria-label='Snippet list'
           className={isList ? 'menu-button active' : 'menu-button'}
         >
diff --git a/src/docs/components/SnippetCard.js b/src/docs/components/SnippetCard.js
index 3720d31ca..56aa560c3 100644
--- a/src/docs/components/SnippetCard.js
+++ b/src/docs/components/SnippetCard.js
@@ -111,7 +111,7 @@ const FullCard = ({ snippetData, isDarkMode }) => {
           }}
         />
         <h5 className='card-section-browser-support-title'>Browser support</h5>
-        <p className='browser-support-data'>{snippetData.supportPercentage}%</p>
+        <p className='browser-support-data'>{snippetData.supportPercentage.toFixed(1)}%</p>
         <div
           className='card-browser-support'
           dangerouslySetInnerHTML={{
@@ -149,7 +149,7 @@ const ShortCard = ({
       />
       <div className='card-bottom'>
         <h5 className='card-section-demo-title'>Demo</h5>
-        <div className='card-snippet-demo' data-scope={snippetData.id}>
+        <div className='card-snippet-demo' data-scope={snippetData.id.replace(/\//g,'')}>
           <style>
             {snippetData.code.scopedCss}
           </style>
@@ -161,9 +161,8 @@ const ShortCard = ({
             </script>
           }
         </div>
-        <CodepenButton snippetData={snippetData} />
         <h5 className='card-section-browser-support-title'>Browser support</h5>
-        <p className='browser-support-data'>{snippetData.supportPercentage}%</p>
+        <p className='browser-support-data'>{snippetData.supportPercentage.toFixed(1)}%</p>
       </div>
     </div>
   );
diff --git a/src/docs/pages/index.js b/src/docs/pages/index.js
index a5067f823..7b78b48b8 100644
--- a/src/docs/pages/index.js
+++ b/src/docs/pages/index.js
@@ -1,18 +1,21 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import { connect } from 'react-redux';
-import { pushNewPage, pushNewQuery } from '../state/app';
+import { pushNewPage } from '../state/app';
+import { capitalize } from '../util';
 
 import Shell from '../components/Shell';
 import Meta from '../components/Meta';
-import Search from '../components/Search';
+import AniLink from 'gatsby-plugin-transition-link/AniLink';
 import SnippetCard from '../components/SnippetCard';
 
+import { getRawCodeBlocks as getCodeBlocks } from '../util';
+import SimpleCard from '../components/SimpleCard';
+
 // ===================================================
-// Home page (splash and search)
+// Snippet list page
 // ===================================================
-const IndexPage = props => {
-  console.log(props);
+const ListPage = props => {
   const snippets = props.data.snippetDataJson.data.map(snippet => ({
     title: snippet.title,
     html: props.data.allMarkdownRemark.edges.find(
@@ -24,33 +27,31 @@ const IndexPage = props => {
     code: snippet.attributes.codeBlocks,
     supportPercentage: snippet.attributes.browserSupport.supportPercentage,
   }));
-
-  const [searchQuery, setSearchQuery] = React.useState(props.searchQuery);
-  const [searchResults, setSearchResults] = React.useState(snippets);
+  const tags = snippets.reduce((acc, snippet) => {
+    if (!snippet.tags) return acc;
+    const primaryTag = snippet.tags[0];
+    if (!acc.includes(primaryTag)) acc.push(primaryTag);
+    return acc;
+  }, []);
+  const staticPages = [
+    {
+      url: 'about',
+      title: 'About',
+      description: 'A few word about us, our goals and our projects.'
+    }
+  ];
 
   React.useEffect(() => {
-    props.dispatch(pushNewQuery(searchQuery));
-    let q = searchQuery.toLowerCase();
-    let results = snippets;
-    if (q.trim().length)
-      results = snippets.filter(
-        v =>
-          v.tags.filter(t => t.indexOf(q) !== -1).length ||
-          v.title.toLowerCase().indexOf(q) !== -1,
-      );
-    setSearchResults(results);
-  }, [searchQuery]);
-
-  React.useEffect(() => {
-    props.dispatch(pushNewPage('Search', '/search'));
+    props.dispatch(pushNewPage('Snippet List', '/'));
   }, []);
 
   return (
     <>
       <Meta 
+        title='Snippet List' 
         meta={[{ name: `google-site-verification`, content: `ADD YOUR VERIFICATION CODE HERE` }]}
       />
-      <Shell withIcon={false} withTitle={false}>
+      <Shell withIcon={false} withTitle={false} isList>
         <div className='splash'>
           <div className='splash-container'>
             <img className='splash-leaves' id='splash-leaves-1' src={props.data.leaves1.childImageSharp.original.src} alt='splash-leaves-1' />
@@ -61,9 +62,9 @@ const IndexPage = props => {
                 src={props.data.file.childImageSharp.original.src} alt='Logo' className='splash-logo'
               />
               <h1 className='splash-title'
-                dangerouslySetInnerHTML={{ 
-                  __html: `${props.data.site.siteMetadata.title.replace('CSS','<strong>CSS</strong>')}`
-                }} 
+                dangerouslySetInnerHTML={{
+                  __html: `${props.data.site.siteMetadata.title.replace('CSS', '<strong>CSS</strong>')}`
+                }}
               />
               <p className='splash-sub-title'>
                 {props.data.site.siteMetadata.description}
@@ -71,35 +72,51 @@ const IndexPage = props => {
             </div>
           </div>
         </div>
-        <Search
-          setSearchQuery={setSearchQuery}
-          defaultValue={props.searchQuery}
-        />
-        {searchQuery.length === 0 ? (
-          <p className='light-sub'>
-            Start typing a keyword to see matching snippets.
-          </p>
-        ) : searchResults.length === 0 ? (
-          <p className='light-sub'>
-            We couldn't find any results for the keyword{' '}
-            <strong>{searchQuery}</strong>.
-          </p>
-        ) : (
+        <h2 className='page-title'>Snippet List</h2>
+        <p className='light-sub'>
+          Click on a snippet’s name to view its code or a tag name to view all
+          snippets in that category.
+        </p>
+        {tags.sort((a,b) => a.localeCompare(b)).map(tag => (
           <>
-            <p className='light-sub'>
-              Click on a snippet's name to view its code.
-            </p>
-            <h2 className='page-sub-title'>Search results</h2>
-            {searchResults.map(snippet => (
-              <SnippetCard
-                short
-                key={`snippet_${snippet.id}`}
-                snippetData={snippet}
-                isDarkMode={props.isDarkMode}
-              />
-            ))}
+            <h3 className='tag-title' key={`tag_title_${tag}`}>
+              <AniLink
+                key={`tag_link_${tag}`}
+                paintDrip
+                to={`/tag/${tag}`}
+                hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
+              >
+                {capitalize(tag)}
+              </AniLink>
+            </h3>
+            {snippets
+              .filter(snippet => snippet.tags[0] === tag)
+              .map(snippet => (
+                <SnippetCard
+                  key={`snippet_${snippet.id}`}
+                  short
+                  snippetData={snippet}
+                  isDarkMode={props.isDarkMode}
+                />
+              ))}
           </>
-        )}
+        ))}
+        <br/>
+        {staticPages.map(page => (
+          <SimpleCard 
+            title={(
+              <AniLink
+                paintDrip
+                to={`/${page.url}`}
+                hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
+              >
+                {page.title}
+              </AniLink>
+            )}
+          >
+            <p>{page.description}</p>
+          </SimpleCard>
+        ))}
       </Shell>
     </>
   );
@@ -113,10 +130,10 @@ export default connect(
     searchQuery: state.app.searchQuery,
   }),
   null,
-)(IndexPage);
+)(ListPage);
 
-export const indexPageQuery = graphql`
-  query snippetList {
+export const listPageQuery = graphql`
+  query snippetListing {
     site {
       siteMetadata {
         title
diff --git a/src/docs/pages/list.js b/src/docs/pages/list.js
deleted file mode 100644
index 62a62b7d1..000000000
--- a/src/docs/pages/list.js
+++ /dev/null
@@ -1,154 +0,0 @@
-import React from 'react';
-import { graphql } 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';
-import SimpleCard from '../components/SimpleCard';
-
-// ===================================================
-// Snippet list page
-// ===================================================
-const ListPage = props => {
-  const snippets = props.data.snippetDataJson.data.map(snippet => ({
-    title: snippet.title,
-    html: props.data.allMarkdownRemark.edges.find(
-      v => v.node.frontmatter.title === snippet.title,
-    ).node.html,
-    tags: snippet.attributes.tags,
-    text: snippet.attributes.text,
-    id: snippet.id,
-    code: snippet.attributes.codeBlocks,
-    supportPercentage: snippet.attributes.browserSupport.supportPercentage,
-  }));
-  const tags = snippets.reduce((acc, snippet) => {
-    if (!snippet.tags) return acc;
-    const primaryTag = snippet.tags[0];
-    if (!acc.includes(primaryTag)) acc.push(primaryTag);
-    return acc;
-  }, []);
-  const staticPages = [
-    {
-      url: 'about',
-      title: 'About',
-      description: 'A few word about us, our goals and our projects.'
-    }
-  ];
-
-  React.useEffect(() => {
-    props.dispatch(pushNewPage('Snippet List', '/list'));
-  }, []);
-
-  return (
-    <>
-      <Meta title='Snippet List' />
-      <Shell withIcon={false} isList>
-        <h2 className='page-title'>Snippet List</h2>
-        <p className='light-sub'>
-          Click on a snippet’s name to view its code or a tag name to view all
-          snippets in that category.
-        </p>
-        {tags.sort((a,b) => a.localeCompare(b)).map(tag => (
-          <>
-            <h3 className='tag-title' key={`tag_title_${tag}`}>
-              <AniLink
-                key={`tag_link_${tag}`}
-                paintDrip
-                to={`/tag/${tag}`}
-                hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
-              >
-                {capitalize(tag)}
-              </AniLink>
-            </h3>
-            {snippets
-              .filter(snippet => snippet.tags[0] === tag)
-              .map(snippet => (
-                <SnippetCard
-                  key={`snippet_${snippet.id}`}
-                  short
-                  snippetData={snippet}
-                  isDarkMode={props.isDarkMode}
-                />
-              ))}
-          </>
-        ))}
-        <br/>
-        {staticPages.map(page => (
-          <SimpleCard 
-            title={(
-              <AniLink
-                paintDrip
-                to={`/${page.url}`}
-                hex={props.isDarkMode ? '#434E76' : '#FFFFFF'}
-              >
-                {page.title}
-              </AniLink>
-            )}
-          >
-            <p>{page.description}</p>
-          </SimpleCard>
-        ))}
-      </Shell>
-    </>
-  );
-};
-
-export default connect(
-  state => ({
-    isDarkMode: state.app.isDarkMode,
-    lastPageTitle: state.app.lastPageTitle,
-    lastPageUrl: state.app.lastPageUrl,
-    searchQuery: state.app.searchQuery,
-  }),
-  null,
-)(ListPage);
-
-export const listPageQuery = graphql`
-  query snippetListing {
-    snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
-      data {
-        id
-        title
-        attributes {
-          tags
-          text
-          codeBlocks {
-            html
-            css
-            js
-            scopedCss
-          }
-          browserSupport {
-            supportPercentage
-          }
-        }
-      }
-    }
-    allMarkdownRemark(
-      limit: 1000
-      sort: { fields: [frontmatter___title], order: ASC }
-    ) {
-      totalCount
-      edges {
-        node {
-          id
-          html
-          rawMarkdownBody
-          fields {
-            slug
-          }
-          frontmatter {
-            title
-            tags
-          }
-        }
-      }
-    }
-  }
-`;
diff --git a/src/docs/styles/_layout.scss b/src/docs/styles/_layout.scss
index 08da36eab..28bff4784 100644
--- a/src/docs/styles/_layout.scss
+++ b/src/docs/styles/_layout.scss
@@ -33,6 +33,7 @@ header.menu {
   transition: 0.3s ease all;
   grid-area: content;
   overflow: auto;
+  overflow-x: hidden;
   background: var(--back-color);
   &::-webkit-scrollbar-track {
     background-color: var(--scrollbar-back-color);
diff --git a/src/docs/templates/TagPage.js b/src/docs/templates/TagPage.js
index 59c38ce64..0947c52a9 100644
--- a/src/docs/templates/TagPage.js
+++ b/src/docs/templates/TagPage.js
@@ -37,6 +37,8 @@ const TagRoute = props => {
                 code: getCodeBlocks(node.rawMarkdownBody).code,
                 tags: node.frontmatter.tags.split(',').map(v => v.trim()),
                 id: node.fields.slug.slice(1),
+                code: props.data.snippetDataJson.data.find(v => v.title == node.frontmatter.title).attributes.codeBlocks,
+                supportPercentage: props.data.snippetDataJson.data.find(v => v.title == node.frontmatter.title).attributes.browserSupport.supportPercentage,
               }}
               isDarkMode={props.isDarkMode}
             />
@@ -58,6 +60,25 @@ export default connect(
 
 export const tagPageQuery = graphql`
   query TagPage($tagRegex: String) {
+    snippetDataJson(meta: { type: { eq: "snippetArray" } }) {
+      data {
+        id
+        title
+        attributes {
+          tags
+          text
+          codeBlocks {
+            html
+            css
+            js
+            scopedCss
+          }
+          browserSupport {
+            supportPercentage
+          }
+        }
+      }
+    }
     allMarkdownRemark(
       limit: 1000
       sort: { fields: [frontmatter___title], order: ASC }