diff --git a/www/src/views/shared/styles.js b/www/src/views/shared/styles.js
index db480cdb1fa83..5dc4602eb50ae 100644
--- a/www/src/views/shared/styles.js
+++ b/www/src/views/shared/styles.js
@@ -1,8 +1,10 @@
-import { options, /* rhythm, scale, */ rhythm } from "../../utils/typography"
+import typography, { options, rhythm } from "../../utils/typography"
 import presets, { colors } from "../../utils/presets"
 import { style } from "glamor"
 import hex2rgba from "hex2rgba"
 
+const { curveDefault, speedDefault } = presets.animation
+
 const styles = {
   featuredSitesCard: style({
     display: `flex`,
@@ -94,9 +96,9 @@ const styles = {
   sticky: {
     paddingTop: rhythm(options.blockMarginBottom),
     position: `sticky`,
-    top: 0,
+    top: `calc(${presets.bannerHeight} - 1px)`,
     [presets.Desktop]: {
-      top: `calc(${presets.headerHeight} - 1px)`,
+      top: `calc(${presets.headerHeight} + ${presets.bannerHeight} - 1px)`,
     },
   },
   scrollbar: {
@@ -132,6 +134,29 @@ const styles = {
     borderBottom: `none !important`, // i know i know
     boxShadow: `none !important`, // but people really want this
   },
+  searchInput: {
+    appearance: `none`,
+    backgroundColor: `transparent`,
+    border: 0,
+    borderRadius: presets.radiusLg,
+    color: colors.gatsby,
+    paddingTop: rhythm(1 / 8),
+    paddingRight: rhythm(1 / 4),
+    paddingBottom: rhythm(1 / 8),
+    paddingLeft: rhythm(1),
+    overflow: `hidden`,
+    fontFamily: typography.options.headerFontFamily.join(`,`),
+    transition: `width ${speedDefault} ${curveDefault}, background-color ${speedDefault} ${curveDefault}`,
+    width: `6.8rem`,
+    "&::placeholder": {
+      color: colors.lilac,
+    },
+    "&:focus": {
+      outline: "none",
+      width: `9rem`,
+      background: colors.ui.light,
+    },
+  },
 }
 
 export default styles
diff --git a/www/src/views/showcase/collapsible-filter-list.js b/www/src/views/showcase/collapsible-filter-list.js
index 24d346e9903a8..d0a7ee53d79de 100644
--- a/www/src/views/showcase/collapsible-filter-list.js
+++ b/www/src/views/showcase/collapsible-filter-list.js
@@ -60,7 +60,11 @@ const CollapsibleFilterList = ({
             marginRight: 8,
           }}
         >
-          {filters.includes(c) ? <MdCheckbox /> : <MdCheckboxBlank />}
+          {filters.includes(c) ? (
+            <MdCheckbox style={{ verticalAlign: `-0.125em` }} />
+          ) : (
+            <MdCheckboxBlank style={{ verticalAlign: `-0.125em` }} />
+          )}
         </div>
         <div
           css={{
diff --git a/www/src/views/showcase/filtered-showcase.js b/www/src/views/showcase/filtered-showcase.js
index 2298da8ceae99..431028f3a0cf2 100644
--- a/www/src/views/showcase/filtered-showcase.js
+++ b/www/src/views/showcase/filtered-showcase.js
@@ -170,7 +170,7 @@ class FilteredShowcase extends Component {
                     <label css={{ position: `relative` }}>
                       <input
                         css={{ ...styles.searchInput }}
-                        type="text"
+                        type="search"
                         value={this.state.search}
                         onChange={e =>
                           this.setState({
@@ -211,7 +211,9 @@ class FilteredShowcase extends Component {
                     }}
                   >
                     Load More
-                    <MdArrowDownward style={{ marginLeft: 4 }} />
+                    <MdArrowDownward
+                      style={{ marginLeft: 4, verticalAlign: `sub` }}
+                    />
                   </button>
                 )}
               </div>