diff --git a/package-lock.json b/package-lock.json
index ed1ce82..d2cb05e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -66,14 +66,6 @@
         "source-map": "^0.5.0"
       }
     },
-    "@babel/helper-annotate-as-pure": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.1.tgz",
-      "integrity": "sha512-ewp3rvJEwLaHgyWGe4wQssC2vjks3E80WiUe2BpMb0KhreTjMROCbxXcEovTrbeGVdQct5VjQfrv9EgC+xMzCw==",
-      "requires": {
-        "@babel/types": "^7.10.1"
-      }
-    },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz",
@@ -105,25 +97,6 @@
         }
       }
     },
-    "@babel/helper-builder-react-jsx": {
-      "version": "7.10.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.3.tgz",
-      "integrity": "sha512-vkxmuFvmovtqTZknyMGj9+uQAZzz5Z9mrbnkJnPkaYGfKTaSsYcjQdXP0lgrWLVh8wU6bCjOmXOpx+kqUi+S5Q==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.1",
-        "@babel/types": "^7.10.3"
-      }
-    },
-    "@babel/helper-builder-react-jsx-experimental": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.10.1.tgz",
-      "integrity": "sha512-irQJ8kpQUV3JasXPSFQ+LCCtJSc5ceZrPFVj6TElR6XCHssi3jV8ch3odIrNtjJFRZZVbrOEfJMI79TPU/h1pQ==",
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.10.1",
-        "@babel/helper-module-imports": "^7.10.1",
-        "@babel/types": "^7.10.1"
-      }
-    },
     "@babel/helper-compilation-targets": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz",
@@ -1296,14 +1269,6 @@
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
-    "@babel/plugin-syntax-jsx": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.1.tgz",
-      "integrity": "sha512-+OxyOArpVFXQeXKLO9o+r2I4dIoVoy6+Uu0vKELrlweDM3QJADZj+Z+5ERansZqIZBcLj42vHnDI8Rz9BnRIuQ==",
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.1"
-      }
-    },
     "@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
@@ -2783,15 +2748,6 @@
         }
       }
     },
-    "@babel/plugin-transform-parameters": {
-      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.1.tgz",
-      "integrity": "sha512-tJ1T0n6g4dXMsL45YsSzzSDZCxiHXAQp/qHrucOq5gEHncTA3xDxnd5+sZcoQp+N1ZbieAaB8r/VUCG0gqseOg==",
-      "requires": {
-        "@babel/helper-get-function-arity": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.1"
-      }
-    },
     "@babel/plugin-transform-property-literals": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz",
@@ -2822,17 +2778,6 @@
         }
       }
     },
-    "@babel/plugin-transform-react-jsx": {
-      "version": "7.10.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.3.tgz",
-      "integrity": "sha512-Y21E3rZmWICRJnvbGVmDLDZ8HfNDIwjGF3DXYHx1le0v0mIHCs0Gv5SavyW5Z/jgAHLaAoJPiwt+Dr7/zZKcOQ==",
-      "requires": {
-        "@babel/helper-builder-react-jsx": "^7.10.3",
-        "@babel/helper-builder-react-jsx-experimental": "^7.10.1",
-        "@babel/helper-plugin-utils": "^7.10.3",
-        "@babel/plugin-syntax-jsx": "^7.10.1"
-      }
-    },
     "@babel/plugin-transform-react-jsx-development": {
       "version": "7.11.5",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.11.5.tgz",
@@ -3563,6 +3508,22 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
+      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
+      "dev": true
+    },
+    "@cnakazawa/watch": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
+      "integrity": "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==",
+      "dev": true,
+      "requires": {
+        "exec-sh": "^0.3.2",
+        "minimist": "^1.2.0"
+      }
+    },
     "@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
@@ -5621,6 +5582,24 @@
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
       "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ=="
     },
+    "@sinonjs/commons": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.1.tgz",
+      "integrity": "sha512-892K+kWUUi3cl+LlqEWIDrhvLgdL79tECi8JZUyq6IviKy/DNhuzCRlbHUjxK89f4ypPMMaFnFuR9Ie6DoIMsw==",
+      "dev": true,
+      "requires": {
+        "type-detect": "4.0.8"
+      }
+    },
+    "@sinonjs/fake-timers": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
+      "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
+      "dev": true,
+      "requires": {
+        "@sinonjs/commons": "^1.7.0"
+      }
+    },
     "@styled-system/css": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.1.5.tgz",
@@ -5647,6 +5626,47 @@
       "resolved": "https://registry.npmjs.org/@turist/time/-/time-0.0.1.tgz",
       "integrity": "sha512-M2BiThcbxMxSKX8W4z5u9jKZn6datnM3+FpEU+eYw0//l31E2xhqi7vTAuJ/Sf0P3yhp66SDJgPu3bRRpvrdQQ=="
     },
+    "@types/babel__core": {
+      "version": "7.1.10",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.10.tgz",
+      "integrity": "sha512-x8OM8XzITIMyiwl5Vmo2B1cR1S1Ipkyv4mdlbJjMa1lmuKvKY9FrBbEANIaMlnWn5Rf7uO+rC/VgYabNkE17Hw==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "@types/babel__generator": {
+      "version": "7.6.2",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.2.tgz",
+      "integrity": "sha512-MdSJnBjl+bdwkLskZ3NGFp9YcXGx5ggLpQQPqtgakVhsWK0hTtNYhjpZLlWQTviGTvF8at+Bvli3jV7faPdgeQ==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__template": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.0.3.tgz",
+      "integrity": "sha512-uCoznIPDmnickEi6D0v11SBpW0OuVqHJCa7syXqQHy5uktSCreIlt0iglsCnmvz8yCb38hGcWeseA8cWJSwv5Q==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "@types/babel__traverse": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.15.tgz",
+      "integrity": "sha512-Pzh9O3sTK8V6I1olsXpCfj2k/ygO2q1X0vhhnDrEQyYLHZesWz+zMZMVcwXLCYf0U36EtmyYaFGPfXlTtDHe3A==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.3.0"
+      }
+    },
     "@types/cacheable-request": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.1.tgz",
@@ -5702,6 +5722,15 @@
         "@types/node": "*"
       }
     },
+    "@types/graceful-fs": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.3.tgz",
+      "integrity": "sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/hast": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.1.tgz",
@@ -5828,6 +5857,12 @@
         }
       }
     },
+    "@types/normalize-package-data": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
+      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
+      "dev": true
+    },
     "@types/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -5838,6 +5873,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
+    "@types/prettier": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.1.1.tgz",
+      "integrity": "sha512-2zs+O+UkDsJ1Vcp667pd3f8xearMdopz/z54i99wtRDI5KLmngk7vlrYZD0ZjKHaROR03EznlBbVY9PfAEyJIQ==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -8134,6 +8175,15 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001090.tgz",
       "integrity": "sha512-QzPRKDCyp7RhjczTPZaqK3CjPA5Ht2UnXhZhCI4f7QiB5JK6KEuZBxIzyWnB3wO4hgAj4GMRxAhuiacfw0Psjg=="
     },
+    "capture-exit": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
+      "integrity": "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==",
+      "dev": true,
+      "requires": {
+        "rsvp": "^4.8.4"
+      }
+    },
     "case": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/case/-/case-1.6.3.tgz",
@@ -11101,6 +11151,12 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "exec-sh": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.4.tgz",
+      "integrity": "sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==",
+      "dev": true
+    },
     "execa": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-3.4.0.tgz",
@@ -12813,6 +12869,26 @@
             "@babel/helper-plugin-utils": "7.10.4"
           }
         },
+        "babel-preset-gatsby": {
+          "version": "0.4.12",
+          "resolved": "https://registry.npmjs.org/babel-preset-gatsby/-/babel-preset-gatsby-0.4.12.tgz",
+          "integrity": "sha512-qsrIrZmwFhXyThBopqkhKqLLeKuNwjUA4CGRbW1ZXLdQhkbIcdOhbfmUfVibP1Nxao+l64XkeADdrLIFwfiZOw==",
+          "requires": {
+            "@babel/plugin-proposal-class-properties": "^7.10.1",
+            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
+            "@babel/plugin-proposal-optional-chaining": "^7.10.3",
+            "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+            "@babel/plugin-transform-runtime": "^7.10.3",
+            "@babel/plugin-transform-spread": "^7.10.1",
+            "@babel/preset-env": "^7.10.3",
+            "@babel/preset-react": "^7.10.1",
+            "@babel/runtime": "^7.10.3",
+            "babel-plugin-dynamic-import-node": "^2.3.3",
+            "babel-plugin-macros": "^2.8.0",
+            "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+            "gatsby-core-utils": "^1.3.8"
+          }
+        },
         "binary-extensions": {
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
@@ -12885,26 +12961,6 @@
           "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
           "optional": true
         },
-        "babel-preset-gatsby": {
-          "version": "0.4.12",
-          "resolved": "https://registry.npmjs.org/babel-preset-gatsby/-/babel-preset-gatsby-0.4.12.tgz",
-          "integrity": "sha512-qsrIrZmwFhXyThBopqkhKqLLeKuNwjUA4CGRbW1ZXLdQhkbIcdOhbfmUfVibP1Nxao+l64XkeADdrLIFwfiZOw==",
-          "requires": {
-            "@babel/plugin-proposal-class-properties": "^7.10.1",
-            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
-            "@babel/plugin-proposal-optional-chaining": "^7.10.3",
-            "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-            "@babel/plugin-transform-runtime": "^7.10.3",
-            "@babel/plugin-transform-spread": "^7.10.1",
-            "@babel/preset-env": "^7.10.3",
-            "@babel/preset-react": "^7.10.1",
-            "@babel/runtime": "^7.10.3",
-            "babel-plugin-dynamic-import-node": "^2.3.3",
-            "babel-plugin-macros": "^2.8.0",
-            "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-            "gatsby-core-utils": "^1.3.8"
-          }
-        },
         "gatsby-cli": {
           "version": "2.12.102",
           "resolved": "https://registry.npmjs.org/gatsby-cli/-/gatsby-cli-2.12.102.tgz",
@@ -13727,6 +13783,15 @@
         "theme-ui": "^0.2.49"
       }
     },
+    "gatsby-legacy-polyfills": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/gatsby-legacy-polyfills/-/gatsby-legacy-polyfills-0.0.5.tgz",
+      "integrity": "sha512-vxOmb8btMTiBb4tSAcAOX+zkRSppt9BkCadvPpURjBiQYiSYbs0EdQO0+DzmyaIQ4hX18OYjlqWGgcxI8Nddvg==",
+      "dev": true,
+      "requires": {
+        "core-js-compat": "^3.6.5"
+      }
+    },
     "gatsby-link": {
       "version": "2.4.8",
       "resolved": "https://registry.npmjs.org/gatsby-link/-/gatsby-link-2.4.8.tgz",
@@ -20556,6 +20621,12 @@
       "resolved": "https://registry.npmjs.org/lodash.sample/-/lodash.sample-4.2.1.tgz",
       "integrity": "sha1-XkKRsMdT+hq+sKq4+ynfG2bwf20="
     },
+    "lodash.sortby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
+      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
+      "dev": true
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -21515,6 +21586,12 @@
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.1.2.tgz",
       "integrity": "sha1-q4hOjn5X44qUR1POxwb3iNF2i7U="
     },
+    "node-int64": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
+      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=",
+      "dev": true
+    },
     "node-libs-browser": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
@@ -24168,6 +24245,30 @@
         "tslib": "^1.0.0"
       }
     },
+    "react-test-renderer": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.13.1.tgz",
+      "integrity": "sha512-Sn2VRyOK2YJJldOqoh8Tn/lWQ+ZiKhyZTPtaO0Q6yNj+QDbmRkVFap6pZPy3YQk8DScRDfyqm/KxKYP9gCMRiQ==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.8.6",
+        "scheduler": "^0.19.1"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.19.1",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+          "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -26699,6 +26800,33 @@
         "has-flag": "^3.0.0"
       }
     },
+    "supports-hyperlinks": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz",
+      "integrity": "sha512-zoE5/e+dnEijk6ASB6/qrK+oYdm2do1hjoLWrqUC/8WEIW1gbxFcKuBof7sW8ArN6e+AYvsE8HBGiVRWL/F5CA==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "svg-tag-names": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/svg-tag-names/-/svg-tag-names-2.0.1.tgz",
@@ -26756,6 +26884,12 @@
       "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
       "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
     },
+    "symbol-tree": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
+      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
+      "dev": true
+    },
     "synchronous-promise": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.13.tgz",
@@ -26989,6 +27123,33 @@
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.0.tgz",
       "integrity": "sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw=="
     },
+    "terminal-link": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
+      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "supports-hyperlinks": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-escapes": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.1.tgz",
+          "integrity": "sha512-JWF7ocqNrp8u9oqpgV+wH5ftbt+cfvv+PTjOvKLT3AdYly/LmORARfEVT1iyjwN+4MqE5UmVKoAdIBqeoCHgLA==",
+          "dev": true,
+          "requires": {
+            "type-fest": "^0.11.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
+          "dev": true
+        }
+      }
+    },
     "terser": {
       "version": "4.8.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
@@ -27070,6 +27231,12 @@
         "deepmerge": "^4.0.0"
       }
     },
+    "throat": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
+      "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
+      "dev": true
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -27224,6 +27391,15 @@
         "punycode": "^2.1.1"
       }
     },
+    "tr46": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.0.2.tgz",
+      "integrity": "sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==",
+      "dev": true,
+      "requires": {
+        "punycode": "^2.1.1"
+      }
+    },
     "tree-kill": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
diff --git a/src/components/skills.js b/src/components/skills.js
index d37f2ff..06dc997 100644
--- a/src/components/skills.js
+++ b/src/components/skills.js
@@ -1,8 +1,13 @@
 import React, {useState} from "react"
 import { icons, categorizedSkills } from "../constants/skills"
+// npm install --save-dev @iconify/react @iconify/icons-octicon
+import { SearchIcon, XIcon } from "@primer/octicons-react";
+
 
 const Skills = props => {
-  const [search, update] = useState('')
+  const [search, setSearch] = useState('')
+  const [debounce, setDebounce] = useState(undefined);
+  const inputRef = React.createRef()
   const createSkill = skill => {
     return (
       <div className="w-1/3 sm:w-1/4 my-6" key={skill}>
@@ -27,16 +32,40 @@ const Skills = props => {
     )
   }
 
+  const onSearchChange = (value) => {
+    const callback = () => {
+      setSearch(value)
+    }
+    clearTimeout(debounce)
+    setDebounce(setTimeout(callback, 50))
+
+  }
+
   return (
     <div className="px-2 sm:px-6 mb-10 ">
       <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between">
         Skills
-        <input 
-          type="search" 
-          onChange={(e) => update(e.target.value)} 
-          className="leading:none text-xs my-0 py-1 px-2 sm:text-xl border-t-0 border-l-0 border-r-0 border solid border-gray-900 py-1 px-2 focus:border-blue-700 placeholder-gray-700" 
-          placeholder="Search Skills" 
-        />
+        <div className="relative flex">
+          <input 
+            type="search" 
+            onChange={(e) => onSearchChange(e.target.value)} 
+            className="leading:none text-xs my-0 py-1 px-2 pr-8 sm:text-xl border-2 border-gray-900 focus:border-blue-700 placeholder-gray-700" 
+            placeholder="Search Skills" 
+            ref = {inputRef}
+          />  
+          <span className="absolute" style={{right:"10px"}}>
+            {(search !== '')
+            ?<button className="focus:outline-none" onClick={() =>  {
+                  setSearch('')
+                  inputRef.current.value = ''
+                }
+              }>
+              <XIcon size={16} className="mb-1 transform scale-100 md:scale-125"/>
+            </button>
+            :<SearchIcon size={16} className="mb-1 transform scale-100 md:scale-125"/>
+            }
+          </span>        
+        </div>
       </div>
      
       {Object.keys(categorizedSkills)