diff --git a/jest.config.js b/jest.config.js
index 6d7b8ae45..d930e6de1 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -5,4 +5,6 @@ module.exports = {
   },
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFiles: ['<rootDir>/src/setupTests.ts']
 };
diff --git a/package-lock.json b/package-lock.json
index 50a105322..8630666b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1499,6 +1499,14 @@
         "@types/node": "*"
       }
     },
+    "@types/cheerio": {
+      "version": "0.22.13",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.13.tgz",
+      "integrity": "sha512-OZd7dCUOUkiTorf97vJKwZnSja/DmHfuBAroe1kREZZTCf/tlFecwHhsOos3uVHxeKGZDwzolIrCUApClkdLuA==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/connect": {
       "version": "3.4.32",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.32.tgz",
@@ -1507,6 +1515,23 @@
         "@types/node": "*"
       }
     },
+    "@types/enzyme": {
+      "version": "3.10.3",
+      "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.10.3.tgz",
+      "integrity": "sha512-f/Kcb84sZOSZiBPCkr4He9/cpuSLcKRyQaEE20Q30Prx0Dn6wcyMAWI0yofL6yvd9Ht9G7EVkQeRqK0n5w8ILw==",
+      "requires": {
+        "@types/cheerio": "*",
+        "@types/react": "*"
+      }
+    },
+    "@types/enzyme-adapter-react-16": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.5.tgz",
+      "integrity": "sha512-K7HLFTkBDN5RyRmU90JuYt8OWEY2iKUn43SDWEoBOXd/PowUWjLZ3Q6qMBiQuZeFYK/TOstaZxsnI0fXoAfLpg==",
+      "requires": {
+        "@types/enzyme": "*"
+      }
+    },
     "@types/eslint-visitor-keys": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -2023,6 +2048,23 @@
         "indent-string": "^4.0.0"
       }
     },
+    "airbnb-prop-types": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.15.0.tgz",
+      "integrity": "sha512-jUh2/hfKsRjNFC4XONQrxo/n/3GG4Tn6Hl0WlFQN5PY9OMC9loSCoAYKnZsWaP8wEfd5xcrPloK0Zg6iS1xwVA==",
+      "requires": {
+        "array.prototype.find": "^2.1.0",
+        "function.prototype.name": "^1.1.1",
+        "has": "^1.0.3",
+        "is-regex": "^1.0.4",
+        "object-is": "^1.0.1",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.0",
+        "prop-types": "^15.7.2",
+        "prop-types-exact": "^1.2.0",
+        "react-is": "^16.9.0"
+      }
+    },
     "ajv": {
       "version": "6.10.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
@@ -2138,6 +2180,11 @@
       "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
       "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM="
     },
+    "array-filter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz",
+      "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM="
+    },
     "array-flatten": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
@@ -2170,6 +2217,25 @@
       "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
     },
+    "array.prototype.find": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.0.tgz",
+      "integrity": "sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.13.0"
+      }
+    },
+    "array.prototype.flat": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.2.tgz",
+      "integrity": "sha512-VXjh7lAL4KXKF2hY4FnEW9eRW6IhdvFW1sN/JwLbmECbCgACCnBHNyP3lFiYuttr0jxRN9Bsc5+G27dMseSWqQ==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.15.0",
+        "function-bind": "^1.1.1"
+      }
+    },
     "arrify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
@@ -3060,6 +3126,63 @@
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
     },
+    "cheerio": {
+      "version": "1.0.0-rc.3",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz",
+      "integrity": "sha512-0td5ijfUPuubwLUu0OBoe98gZj8C/AA+RW3v67GPlGOrvxWjZmBXiBCRU+I8VEiNyJzjth40POfHiz2RB3gImA==",
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.1",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash": "^4.15.0",
+        "parse5": "^3.0.1"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+          "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+          "requires": {
+            "boolbase": "~1.0.0",
+            "css-what": "2.1",
+            "domutils": "1.5.1",
+            "nth-check": "~1.0.1"
+          }
+        },
+        "dom-serializer": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz",
+          "integrity": "sha512-l0IU0pPzLWSHBcieZbpOKgkIn3ts3vAh7ZuFyXNwJxJXk/c4Gwj9xaTJwIDVQCXawWD0qb3IzMGH5rglQaO0XA==",
+          "requires": {
+            "domelementtype": "^1.3.0",
+            "entities": "^1.1.1"
+          }
+        },
+        "domutils": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+          "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        },
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
+        },
+        "parse5": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+          "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+          "requires": {
+            "@types/node": "*"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.2.2.tgz",
@@ -4304,6 +4427,11 @@
         "path-type": "^3.0.0"
       }
     },
+    "discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo="
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -4587,6 +4715,94 @@
       "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
       "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
     },
+    "enzyme": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.10.0.tgz",
+      "integrity": "sha512-p2yy9Y7t/PFbPoTvrWde7JIYB2ZyGC+NgTNbVEGvZ5/EyoYSr9aG/2rSbVvyNvMHEhw9/dmGUJHWtfQIEiX9pg==",
+      "requires": {
+        "array.prototype.flat": "^1.2.1",
+        "cheerio": "^1.0.0-rc.2",
+        "function.prototype.name": "^1.1.0",
+        "has": "^1.0.3",
+        "html-element-map": "^1.0.0",
+        "is-boolean-object": "^1.0.0",
+        "is-callable": "^1.1.4",
+        "is-number-object": "^1.0.3",
+        "is-regex": "^1.0.4",
+        "is-string": "^1.0.4",
+        "is-subset": "^0.1.1",
+        "lodash.escape": "^4.0.1",
+        "lodash.isequal": "^4.5.0",
+        "object-inspect": "^1.6.0",
+        "object-is": "^1.0.1",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.0.4",
+        "object.values": "^1.0.4",
+        "raf": "^3.4.0",
+        "rst-selector-parser": "^2.2.3",
+        "string.prototype.trim": "^1.1.2"
+      }
+    },
+    "enzyme-adapter-react-16": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.15.1.tgz",
+      "integrity": "sha512-yMPxrP3vjJP+4wL/qqfkT6JAIctcwKF+zXO6utlGPgUJT2l4tzrdjMDWGd/Pp1BjHBcljhN24OzNEGRteibJhA==",
+      "requires": {
+        "enzyme-adapter-utils": "^1.12.1",
+        "enzyme-shallow-equal": "^1.0.0",
+        "has": "^1.0.3",
+        "object.assign": "^4.1.0",
+        "object.values": "^1.1.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.10.2",
+        "react-test-renderer": "^16.0.0-0",
+        "semver": "^5.7.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        }
+      }
+    },
+    "enzyme-adapter-utils": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.12.1.tgz",
+      "integrity": "sha512-KWiHzSjZaLEoDCOxY8Z1RAbUResbqKN5bZvenPbfKtWorJFVETUw754ebkuCQ3JKm0adx1kF8JaiR+PHPiP47g==",
+      "requires": {
+        "airbnb-prop-types": "^2.15.0",
+        "function.prototype.name": "^1.1.1",
+        "object.assign": "^4.1.0",
+        "object.fromentries": "^2.0.1",
+        "prop-types": "^15.7.2",
+        "semver": "^5.7.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        }
+      }
+    },
+    "enzyme-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-VUf+q5o1EIv2ZaloNQQtWCJM9gpeux6vudGVH6vLmfPXFLRuxl5+Aq3U260wof9nn0b0i+P5OEUXm1vnxkRpXQ==",
+      "requires": {
+        "has": "^1.0.3",
+        "object-is": "^1.0.1"
+      }
+    },
+    "enzyme-to-json": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.4.3.tgz",
+      "integrity": "sha512-jqNEZlHqLdz7OTpXSzzghArSS3vigj67IU/fWkPyl1c0TCj9P5s6Ze0kRkYZWNEoCqCR79xlQbigYlMx5erh8A==",
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -6449,11 +6665,27 @@
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "function.prototype.name": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.1.tgz",
+      "integrity": "sha512-e1NzkiJuw6xqVH7YSdiW/qDHebcmMhPNe6w+4ZYYEg0VA+LaLzx37RimbPLuonHhYGFGPx1ME2nSi74JiaCr/Q==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "function-bind": "^1.1.1",
+        "functions-have-names": "^1.1.1",
+        "is-callable": "^1.1.4"
+      }
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
     },
+    "functions-have-names": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.0.tgz",
+      "integrity": "sha512-zKXyzksTeaCSw5wIX79iCA40YAa6CJMJgNg9wdkU/ERBrIdPSimPICYiLp65lRbSBqtiHql/HZfS2DyI/AH6tQ=="
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -6821,6 +7053,14 @@
       "resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz",
       "integrity": "sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ=="
     },
+    "html-element-map": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/html-element-map/-/html-element-map-1.1.0.tgz",
+      "integrity": "sha512-iqiG3dTZmy+uUaTmHarTL+3/A2VW9ox/9uasKEZC+R/wAtUrTcRlXPSaPqsnWPfIu8wqn09jQNwMRqzL54jSYA==",
+      "requires": {
+        "array-filter": "^1.0.0"
+      }
+    },
     "html-encoding-sniffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
@@ -7258,6 +7498,11 @@
         "binary-extensions": "^2.0.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.0.0.tgz",
+      "integrity": "sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M="
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -7362,6 +7607,11 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
+    "is-number-object": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.3.tgz",
+      "integrity": "sha1-8mWrian0RQNO9q/xWo8AsA9VF5k="
+    },
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
@@ -7442,6 +7692,16 @@
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
+    "is-string": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.4.tgz",
+      "integrity": "sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ="
+    },
+    "is-subset": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
+      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY="
+    },
     "is-svg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-3.0.0.tgz",
@@ -9340,6 +9600,16 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.escape": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
+      "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg="
+    },
+    "lodash.flattendeep": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
+      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI="
+    },
     "lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -9350,6 +9620,11 @@
       "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
       "integrity": "sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.isinteger": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
@@ -9880,6 +10155,11 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
     },
+    "moo": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.4.3.tgz",
+      "integrity": "sha512-gFD2xGCl8YFgGHsqJ9NKRVdwlioeW3mI1iqfLNYQOv0+6JRwG58Zk9DIGQgyIaffSYaO1xsKnMaYzzNr1KyIAw=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -9953,6 +10233,25 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
     },
+    "nearley": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.19.0.tgz",
+      "integrity": "sha512-2v52FTw7RPqieZr3Gth1luAXZR7Je6q3KaDHY5bjl/paDUdMu35fZ8ICNgiYJRr3tf3NMvIQQR1r27AvEr9CRA==",
+      "requires": {
+        "commander": "^2.19.0",
+        "moo": "^0.4.3",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6",
+        "semver": "^5.4.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -11713,6 +12012,16 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-exact": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
+      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
+      "requires": {
+        "has": "^1.0.3",
+        "object.assign": "^4.1.0",
+        "reflect.ownkeys": "^0.2.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
@@ -11822,6 +12131,20 @@
         "performance-now": "^2.1.0"
       }
     },
+    "railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234="
+    },
+    "randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "requires": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -12144,6 +12467,11 @@
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
       "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
     },
+    "reflect.ownkeys": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
+      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA="
+    },
     "regenerate": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
@@ -12518,6 +12846,15 @@
       "resolved": "https://registry.npmjs.org/rootpath/-/rootpath-0.1.2.tgz",
       "integrity": "sha1-Wzeah9ypBum5HWkKWZQ5vvJn6ms="
     },
+    "rst-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
+      "requires": {
+        "lodash.flattendeep": "^4.4.0",
+        "nearley": "^2.7.10"
+      }
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -13427,6 +13764,16 @@
         }
       }
     },
+    "string.prototype.trim": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.0.tgz",
+      "integrity": "sha512-9EIjYD/WdlvLpn987+ctkLf0FfvBefOCuiEr2henD8X+7jfwPnyvTdmW8OJhj5p+M0/96mBdynLWkxUr+rHlpg==",
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.13.0",
+        "function-bind": "^1.1.1"
+      }
+    },
     "string.prototype.trimleft": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz",
diff --git a/package.json b/package.json
index f5989a22a..cded1099d 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,8 @@
     "@material-ui/icons": "^4.5.1",
     "@testing-library/react": "^9.3.0",
     "@testing-library/react-hooks": "^3.1.1",
+    "@types/enzyme": "^3.10.3",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "24.0.19",
     "@types/node": "12.11.1",
     "@types/react": "16.9.9",
@@ -15,6 +17,9 @@
     "@types/twilio-video": "^2.0.9",
     "body-parser": "^1.19.0",
     "concurrently": "^5.0.0",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme-to-json": "^3.4.3",
     "express": "^4.17.1",
     "husky": "^3.0.9",
     "lint-staged": "^9.4.2",
diff --git a/src/App.tsx b/src/App.tsx
index d72b86638..dab06c318 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,9 +3,9 @@ import { styled } from '@material-ui/core/styles';
 
 import LocalVideoPreview from './components/LocalVideoPreview/LocalVideoPreview';
 import Menu from './components/Menu/Menu';
+import Room from './components/Room/Room';
 
 import useRoomState from './hooks/useRoomState/useRoomState';
-import { useVideoContext } from './hooks/context';
 
 const Container = styled('div')({
   display: 'flex',
@@ -17,19 +17,14 @@ const Main = styled('main')({
   height: '100%',
 });
 
-export default function Room() {
+export default function App() {
   const roomState = useRoomState();
-  const { room } = useVideoContext();
 
   return (
     <Container>
       <Menu />
       <Main>
-        {roomState === 'disconnected' ? (
-          <LocalVideoPreview />
-        ) : (
-          <p>You have joined room {room.name}</p>
-        )}
+        {roomState === 'disconnected' ? <LocalVideoPreview /> : <Room />}
       </Main>
     </Container>
   );
diff --git a/src/components/AudioTrack/AudioTrack.test.tsx b/src/components/AudioTrack/AudioTrack.test.tsx
new file mode 100644
index 000000000..95539fc38
--- /dev/null
+++ b/src/components/AudioTrack/AudioTrack.test.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import AudioTrack from './AudioTrack';
+
+describe('the AudioTrack component', () => {
+  it('should call the attach method when the component mounts', () => {
+    const mockTrack = { attach: jest.fn(), detach: jest.fn() } as any;
+    render(<AudioTrack track={mockTrack} />);
+    expect(mockTrack.attach).toHaveBeenCalledWith(
+      expect.any(window.HTMLAudioElement)
+    );
+    expect(mockTrack.detach).not.toHaveBeenCalled();
+  });
+
+  it('it should call the detach method when the component unmounts', () => {
+    const mockTrack = { attach: jest.fn(), detach: jest.fn() } as any;
+    const { unmount } = render(<AudioTrack track={mockTrack} />);
+    unmount();
+    expect(mockTrack.detach).toHaveBeenCalledWith(
+      expect.any(window.HTMLAudioElement)
+    );
+  });
+});
diff --git a/src/components/AudioTrack/AudioTrack.tsx b/src/components/AudioTrack/AudioTrack.tsx
new file mode 100644
index 000000000..bad7c561f
--- /dev/null
+++ b/src/components/AudioTrack/AudioTrack.tsx
@@ -0,0 +1,20 @@
+import React, { useEffect, useRef } from 'react';
+import { AudioTrack as IAudioTrack } from 'twilio-video';
+
+interface AudioTrackProps {
+  track: IAudioTrack;
+}
+
+export default function AudioTrack({ track }: AudioTrackProps) {
+  const ref = useRef<HTMLAudioElement>(null!);
+
+  useEffect(() => {
+    const el = ref.current;
+    track.attach(el);
+    return () => {
+      track.detach(el);
+    };
+  }, [track]);
+
+  return <audio ref={ref} />;
+}
diff --git a/src/components/NewtorkQualityLevel/NetworkQualityLevel.test.tsx b/src/components/NewtorkQualityLevel/NetworkQualityLevel.test.tsx
new file mode 100644
index 000000000..ae6f16fa1
--- /dev/null
+++ b/src/components/NewtorkQualityLevel/NetworkQualityLevel.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import NetworkQualityLevel from './NetworkQualityLevel';
+
+describe('the NetworkQualityLevel component', () => {
+  it('should render correctly for level 5', () => {
+    const tree = renderer
+      .create(<NetworkQualityLevel qualityLevel={5} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render correctly for level 3', () => {
+    const tree = renderer
+      .create(<NetworkQualityLevel qualityLevel={3} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render correctly for level 0', () => {
+    const tree = renderer
+      .create(<NetworkQualityLevel qualityLevel={0} />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/src/components/NewtorkQualityLevel/NetworkQualityLevel.tsx b/src/components/NewtorkQualityLevel/NetworkQualityLevel.tsx
new file mode 100644
index 000000000..6679b26ce
--- /dev/null
+++ b/src/components/NewtorkQualityLevel/NetworkQualityLevel.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { styled } from '@material-ui/core/styles';
+
+const Container = styled('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  '& div': {
+    width: '2px',
+    border: '1px solid black',
+    boxSizing: 'content-box',
+    '&:not(:last-child)': {
+      borderRight: 'none',
+    },
+  },
+});
+
+const STEP = 3;
+
+export default function NetworkQualityLevel({
+  qualityLevel,
+}: {
+  qualityLevel: number | null;
+}) {
+  if (qualityLevel === null) return null;
+  return (
+    <Container>
+      {[0, 1, 2, 3, 4].map(level => (
+        <div
+          key={level}
+          style={{
+            height: `${STEP * (level + 1)}px`,
+            background: qualityLevel > level ? '#0c0' : '#040',
+          }}
+        />
+      ))}
+    </Container>
+  );
+}
diff --git a/src/components/NewtorkQualityLevel/__snapshots__/NetworkQualityLevel.test.tsx.snap b/src/components/NewtorkQualityLevel/__snapshots__/NetworkQualityLevel.test.tsx.snap
new file mode 100644
index 000000000..6ea682346
--- /dev/null
+++ b/src/components/NewtorkQualityLevel/__snapshots__/NetworkQualityLevel.test.tsx.snap
@@ -0,0 +1,142 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the NetworkQualityLevel component should render correctly for level 0 1`] = `
+<div
+  className="div-root-1"
+>
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "3px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "6px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "9px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "12px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "15px",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`the NetworkQualityLevel component should render correctly for level 3 1`] = `
+<div
+  className="div-root-1"
+>
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "3px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "6px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "9px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "12px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#040",
+        "height": "15px",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`the NetworkQualityLevel component should render correctly for level 5 1`] = `
+<div
+  className="div-root-1"
+>
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "3px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "6px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "9px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "12px",
+      }
+    }
+  />
+  <div
+    style={
+      Object {
+        "background": "#0c0",
+        "height": "15px",
+      }
+    }
+  />
+</div>
+`;
diff --git a/src/components/Participant/Participant.tsx b/src/components/Participant/Participant.tsx
new file mode 100644
index 000000000..c8e863cb0
--- /dev/null
+++ b/src/components/Participant/Participant.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ParticipantInfo from '../ParticipantInfo/ParticipantInfo';
+import ParticipantTracks from '../ParticipantTracks/ParticipantTracks';
+import { LocalParticipant, RemoteParticipant } from 'twilio-video';
+
+interface ParticipantProps {
+  participant: LocalParticipant | RemoteParticipant;
+}
+
+export default function Participant({ participant }: ParticipantProps) {
+  return (
+    <ParticipantInfo participant={participant}>
+      <ParticipantTracks participant={participant} />
+    </ParticipantInfo>
+  );
+}
diff --git a/src/components/ParticipantInfo/ParticipantInfo.test.tsx b/src/components/ParticipantInfo/ParticipantInfo.test.tsx
new file mode 100644
index 000000000..1fb34d8cf
--- /dev/null
+++ b/src/components/ParticipantInfo/ParticipantInfo.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ParticipantInfo from './ParticipantInfo';
+import { shallow } from 'enzyme';
+
+jest.mock(
+  '../../hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel',
+  () => () => 4
+);
+
+describe('the ParticipantInfo component', () => {
+  it('should render correctly', () => {
+    const wrapper = shallow(
+      <ParticipantInfo participant={{ identity: 'mockIdentity' } as any}>
+        mock children
+      </ParticipantInfo>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/src/components/ParticipantInfo/ParticipantInfo.tsx b/src/components/ParticipantInfo/ParticipantInfo.tsx
new file mode 100644
index 000000000..edbd9518f
--- /dev/null
+++ b/src/components/ParticipantInfo/ParticipantInfo.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { styled } from '@material-ui/core/styles';
+import { LocalParticipant, RemoteParticipant } from 'twilio-video';
+import NetworkQualityLevel from '../NewtorkQualityLevel/NetworkQualityLevel';
+import useParticipantNetworkQualityLevel from '../../hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel';
+
+const Container = styled('div')({
+  position: 'relative',
+});
+
+const InfoContainer = styled('div')({
+  position: 'absolute',
+  zIndex: 1,
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '0.3em',
+  width: '100%',
+});
+
+const Identity = styled('h4')({
+  background: 'rgba(0, 0, 0, 0.7)',
+  padding: '0.1em 0.3em',
+  margin: 0,
+});
+
+interface ParticipantInfoProps {
+  participant: LocalParticipant | RemoteParticipant;
+  children: React.ReactNode;
+}
+
+export default function ParticipantInfo({
+  participant,
+  children,
+}: ParticipantInfoProps) {
+  const networkQualityLevel = useParticipantNetworkQualityLevel(participant);
+
+  return (
+    <Container>
+      <InfoContainer>
+        <Identity>{participant.identity}</Identity>
+        <NetworkQualityLevel qualityLevel={networkQualityLevel} />
+      </InfoContainer>
+      {children}
+    </Container>
+  );
+}
diff --git a/src/components/ParticipantInfo/__snapshots__/ParticipantInfo.test.tsx.snap b/src/components/ParticipantInfo/__snapshots__/ParticipantInfo.test.tsx.snap
new file mode 100644
index 000000000..bc23902e6
--- /dev/null
+++ b/src/components/ParticipantInfo/__snapshots__/ParticipantInfo.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the ParticipantInfo component should render correctly 1`] = `
+<Styled(div)>
+  <Styled(div)>
+    <Styled(h4)>
+      mockIdentity
+    </Styled(h4)>
+    <NetworkQualityLevel
+      qualityLevel={4}
+    />
+  </Styled(div)>
+  mock children
+</Styled(div)>
+`;
diff --git a/src/components/ParticipantStrip/ParticipantStrip.test.tsx b/src/components/ParticipantStrip/ParticipantStrip.test.tsx
new file mode 100644
index 000000000..cc57e8835
--- /dev/null
+++ b/src/components/ParticipantStrip/ParticipantStrip.test.tsx
@@ -0,0 +1,19 @@
+import EventEmitter from 'events';
+import React from 'react';
+import ParticipantStrip from './ParticipantStrip';
+import { shallow } from 'enzyme';
+import { useVideoContext } from '../../hooks/context';
+
+jest.mock('../../hooks/context');
+const mockedVideoContext = useVideoContext as jest.Mock<any>;
+
+describe('the ParticipantStrip component', () => {
+  it('should correctly render ParticipantInfo components', () => {
+    const mockRoom: any = new EventEmitter();
+    mockRoom.participants = new Map([[0, { sid: 0 }], [1, { sid: 1 }]]);
+    mockRoom.localParticipant = 'localParticipant';
+    mockedVideoContext.mockImplementation(() => ({ room: mockRoom }));
+    const wrapper = shallow(<ParticipantStrip />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/src/components/ParticipantStrip/ParticipantStrip.tsx b/src/components/ParticipantStrip/ParticipantStrip.tsx
new file mode 100644
index 000000000..d9b42a4fe
--- /dev/null
+++ b/src/components/ParticipantStrip/ParticipantStrip.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Participant from '../Participant/Participant';
+import { styled } from '@material-ui/core/styles';
+import useParticipants from '../../hooks/useParticipants/useParticipants';
+import { useVideoContext } from '../../hooks/context';
+
+const Container = styled('aside')({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  right: '85%',
+  left: 0,
+  padding: '0.5em',
+});
+
+export default function ParticipantStrip() {
+  const { room } = useVideoContext();
+  const participants = useParticipants();
+
+  return (
+    <Container>
+      <Participant participant={room.localParticipant} />
+      {participants.map(participant => (
+        <Participant key={participant.sid} participant={participant} />
+      ))}
+    </Container>
+  );
+}
diff --git a/src/components/ParticipantStrip/__snapshots__/ParticipantStrip.test.tsx.snap b/src/components/ParticipantStrip/__snapshots__/ParticipantStrip.test.tsx.snap
new file mode 100644
index 000000000..24b0b0811
--- /dev/null
+++ b/src/components/ParticipantStrip/__snapshots__/ParticipantStrip.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the ParticipantStrip component should correctly render ParticipantInfo components 1`] = `
+<Styled(aside)>
+  <Participant
+    participant="localParticipant"
+  />
+  <Participant
+    key="0"
+    participant={
+      Object {
+        "sid": 0,
+      }
+    }
+  />
+  <Participant
+    key="1"
+    participant={
+      Object {
+        "sid": 1,
+      }
+    }
+  />
+</Styled(aside)>
+`;
diff --git a/src/components/ParticipantTracks/ParticipantTracks.test.tsx b/src/components/ParticipantTracks/ParticipantTracks.test.tsx
new file mode 100644
index 000000000..e2db053e3
--- /dev/null
+++ b/src/components/ParticipantTracks/ParticipantTracks.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import ParticipantTracks from './ParticipantTracks';
+import usePublications from '../../hooks/usePublications/usePublications';
+import { shallow } from 'enzyme';
+import { useVideoContext } from '../../hooks/context';
+
+jest.mock('../../hooks/usePublications/usePublications', () =>
+  jest.fn(() => [{ trackSid: 0 }, { trackSid: 1 }])
+);
+jest.mock('../../hooks/context');
+
+const mockUseVideoContext = useVideoContext as jest.Mock<any>;
+
+describe('the ParticipantTracks component', () => {
+  it('should render an array of publications', () => {
+    mockUseVideoContext.mockImplementation(() => ({ room: {} }));
+    const wrapper = shallow(
+      <ParticipantTracks participant={'mockParticipant' as any} />
+    );
+    expect(usePublications).toHaveBeenCalledWith('mockParticipant');
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render publications with "isLocal" set to true when the localParticipant is provided', () => {
+    mockUseVideoContext.mockImplementation(() => ({
+      room: { localParticipant: 'mockParticipant' },
+    }));
+    const wrapper = shallow(
+      <ParticipantTracks participant={'mockParticipant' as any} />
+    );
+    expect(
+      wrapper
+        .find('Publication')
+        .first()
+        .prop('isLocal')
+    ).toEqual(true);
+  });
+});
diff --git a/src/components/ParticipantTracks/ParticipantTracks.tsx b/src/components/ParticipantTracks/ParticipantTracks.tsx
new file mode 100644
index 000000000..b5a5fca35
--- /dev/null
+++ b/src/components/ParticipantTracks/ParticipantTracks.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { LocalParticipant, RemoteParticipant } from 'twilio-video';
+import Publication from '../Publication/Publication';
+import usePublications from '../../hooks/usePublications/usePublications';
+import { useVideoContext } from '../../hooks/context';
+
+interface ParticipantTracksProps {
+  participant: LocalParticipant | RemoteParticipant;
+}
+
+export default function ParticipantTracks({
+  participant,
+}: ParticipantTracksProps) {
+  const { room } = useVideoContext();
+  const publications = usePublications(participant);
+  const isLocal = participant === room.localParticipant;
+
+  return (
+    <>
+      {publications.map(publication => (
+        <Publication
+          key={publication.trackSid}
+          publication={publication}
+          participant={participant}
+          isLocal={isLocal}
+        />
+      ))}
+    </>
+  );
+}
diff --git a/src/components/ParticipantTracks/__snapshots__/ParticipantTracks.test.tsx.snap b/src/components/ParticipantTracks/__snapshots__/ParticipantTracks.test.tsx.snap
new file mode 100644
index 000000000..c0710ff35
--- /dev/null
+++ b/src/components/ParticipantTracks/__snapshots__/ParticipantTracks.test.tsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the ParticipantTracks component should render an array of publications 1`] = `
+<Fragment>
+  <Publication
+    isLocal={false}
+    key="0"
+    participant="mockParticipant"
+    publication={
+      Object {
+        "trackSid": 0,
+      }
+    }
+  />
+  <Publication
+    isLocal={false}
+    key="1"
+    participant="mockParticipant"
+    publication={
+      Object {
+        "trackSid": 1,
+      }
+    }
+  />
+</Fragment>
+`;
diff --git a/src/components/Publication/Publication.test.tsx b/src/components/Publication/Publication.test.tsx
new file mode 100644
index 000000000..d0281134d
--- /dev/null
+++ b/src/components/Publication/Publication.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Publication from './Publication';
+import { shallow } from 'enzyme';
+import useTrack from '../../hooks/useTrack/useTrack';
+
+jest.mock('../../hooks/useTrack/useTrack');
+const mockUseTrack = useTrack as jest.Mock<any>;
+
+describe('the Publication component', () => {
+  it('should render a VideoTrack when the track has name "camera"', () => {
+    mockUseTrack.mockImplementation(() => ({ name: 'camera' }));
+    const wrapper = shallow(
+      <Publication
+        isLocal
+        publication={'mockPublication' as any}
+        participant={'mockParticipant' as any}
+      />
+    );
+    expect(useTrack).toHaveBeenCalledWith('mockPublication');
+    expect(wrapper.find('VideoTrack').length).toBe(1);
+  });
+
+  it('should render an AudioTrack when the track has name "microphone"', () => {
+    mockUseTrack.mockImplementation(() => ({ name: 'microphone' }));
+    const wrapper = shallow(
+      <Publication
+        isLocal
+        publication={'mockPublication' as any}
+        participant={'mockParticipant' as any}
+      />
+    );
+    expect(useTrack).toHaveBeenCalledWith('mockPublication');
+    expect(wrapper.find('AudioTrack').length).toBe(1);
+  });
+
+  it('should render null when there is no track', () => {
+    mockUseTrack.mockImplementation(() => null);
+    const wrapper = shallow(
+      <Publication
+        isLocal
+        publication={'mockPublication' as any}
+        participant={'mockParticipant' as any}
+      />
+    );
+    expect(useTrack).toHaveBeenCalledWith('mockPublication');
+    expect(wrapper.find('*').length).toBe(0);
+  });
+});
diff --git a/src/components/Publication/Publication.tsx b/src/components/Publication/Publication.tsx
new file mode 100644
index 000000000..632317a9d
--- /dev/null
+++ b/src/components/Publication/Publication.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import useTrack from '../../hooks/useTrack/useTrack';
+import AudioTrack from '../AudioTrack/AudioTrack';
+import VideoTrack from '../VideoTrack/VideoTrack';
+import {
+  AudioTrack as IAudioTrack,
+  LocalTrackPublication,
+  Participant,
+  RemoteTrackPublication,
+  VideoTrack as IVideoTrack,
+} from 'twilio-video';
+
+interface PublicationProps {
+  publication: LocalTrackPublication | RemoteTrackPublication;
+  participant: Participant;
+  isLocal: boolean;
+}
+
+export default function Publication({
+  publication,
+  isLocal,
+}: PublicationProps) {
+  const track = useTrack(publication);
+
+  if (track === null) return null;
+
+  switch (track.name) {
+    case 'camera':
+      return <VideoTrack track={track as IVideoTrack} isLocal={isLocal} />;
+    case 'microphone':
+      return <AudioTrack track={track as IAudioTrack} />;
+    default:
+      return null;
+  }
+}
diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
new file mode 100644
index 000000000..b21727982
--- /dev/null
+++ b/src/components/Room/Room.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ParticipantStrip from '../ParticipantStrip/ParticipantStrip';
+import { styled } from '@material-ui/core/styles';
+
+const Container = styled('div')({
+  position: 'relative',
+  height: '100%',
+});
+
+export default function Room() {
+  return (
+    <Container>
+      <ParticipantStrip />
+    </Container>
+  );
+}
diff --git a/src/components/VideoTrack/VideoTrack.tsx b/src/components/VideoTrack/VideoTrack.tsx
index 587f3fed7..dde489278 100644
--- a/src/components/VideoTrack/VideoTrack.tsx
+++ b/src/components/VideoTrack/VideoTrack.tsx
@@ -4,7 +4,7 @@ import { styled } from '@material-ui/core/styles';
 
 const Video = styled('video')({
   width: '100%',
-  height: '100%',
+  maxHeight: '100%',
   objectFit: 'contain',
 });
 
diff --git a/src/hooks/context/useRoom.tsx b/src/hooks/context/useRoom.tsx
index f1114fbcf..b93b560e3 100644
--- a/src/hooks/context/useRoom.tsx
+++ b/src/hooks/context/useRoom.tsx
@@ -1,5 +1,5 @@
 import EventEmitter from 'events';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Video, { ConnectOptions, LocalTrack, Room } from 'twilio-video';
 
 export default function useRoom(
@@ -9,23 +9,26 @@ export default function useRoom(
 ) {
   const [room, setRoom] = useState<Room>(new EventEmitter() as Room);
   const [isConnecting, setIsConnecting] = useState(false);
+  const disconnectHandlerRef = useRef<() => void>(() => {});
 
   useEffect(() => {
-    const disconnect = () => room.disconnect();
-
     if (token && room.state !== 'connected' && !isConnecting) {
       setIsConnecting(true);
       Video.connect(token, { tracks: localTracks, ...options }).then(room => {
         setRoom(room);
+        disconnectHandlerRef.current = () => room.disconnect();
         setIsConnecting(false);
-        window.addEventListener('beforeunload', disconnect);
+        window.addEventListener('beforeunload', disconnectHandlerRef.current);
       });
     }
 
     return () => {
       if (room.state === 'connected' && !isConnecting) {
         room.disconnect();
-        window.removeEventListener('beforeunload', disconnect);
+        window.removeEventListener(
+          'beforeunload',
+          disconnectHandlerRef.current
+        );
       }
     };
   }, [token, options, room, localTracks, setIsConnecting, isConnecting]);
diff --git a/src/hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel.test.tsx b/src/hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel.test.tsx
new file mode 100644
index 000000000..9f9c5265c
--- /dev/null
+++ b/src/hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel.test.tsx
@@ -0,0 +1,39 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import EventEmitter from 'events';
+import useParticipantNetworkQualityLevel from './useParticipantNetworkQualityLevel';
+
+describe('the useParticipantNetworkQualityLevel hook', () => {
+  let mockParticipant: any;
+
+  beforeEach(() => {
+    mockParticipant = new EventEmitter();
+  });
+
+  it('should return mockParticipant.networkQualityLevel by default', () => {
+    mockParticipant.networkQualityLevel = 4;
+    const { result } = renderHook(() =>
+      useParticipantNetworkQualityLevel(mockParticipant)
+    );
+    expect(result.current).toBe(4);
+  });
+
+  it('should return respond to "networkQualityLevelChanged" events', async () => {
+    mockParticipant.networkQualityLevel = 4;
+    const { result } = renderHook(() =>
+      useParticipantNetworkQualityLevel(mockParticipant)
+    );
+    act(() => {
+      mockParticipant.emit('networkQualityLevelChanged', 3);
+    });
+    expect(result.current).toBe(3);
+  });
+
+  it('should clean up listeners on unmount', () => {
+    mockParticipant.networkQualityLevel = 4;
+    const { unmount } = renderHook(() =>
+      useParticipantNetworkQualityLevel(mockParticipant)
+    );
+    unmount();
+    expect(mockParticipant.listenerCount('networkQualityLevelChanged')).toBe(0);
+  });
+});
diff --git a/src/hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel.tsx b/src/hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel.tsx
new file mode 100644
index 000000000..7343d6e45
--- /dev/null
+++ b/src/hooks/useParticipantNetworkQualityLevel/useParticipantNetworkQualityLevel.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { LocalParticipant, RemoteParticipant } from 'twilio-video';
+
+export default function useParticipantNetworkQualityLevel(
+  participant: LocalParticipant | RemoteParticipant
+) {
+  const [networkQualityLevel, setNetworkQualityLevel] = useState(
+    participant.networkQualityLevel
+  );
+
+  useEffect(() => {
+    const handleNewtorkQualityLevelChange = (networkQualityLevel: number) =>
+      setNetworkQualityLevel(networkQualityLevel);
+    participant.on(
+      'networkQualityLevelChanged',
+      handleNewtorkQualityLevelChange
+    );
+    return () => {
+      participant.off(
+        'networkQualityLevelChanged',
+        handleNewtorkQualityLevelChange
+      );
+    };
+  }, [participant, setNetworkQualityLevel]);
+
+  return networkQualityLevel;
+}
diff --git a/src/hooks/useParticipants/useParticipants.test.tsx b/src/hooks/useParticipants/useParticipants.test.tsx
new file mode 100644
index 000000000..a893cb27c
--- /dev/null
+++ b/src/hooks/useParticipants/useParticipants.test.tsx
@@ -0,0 +1,52 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import EventEmitter from 'events';
+import useParticipants from './useParticipants';
+import { useVideoContext } from '../context';
+
+jest.mock('../context');
+
+const mockedVideoContext = useVideoContext as jest.Mock<any>;
+
+describe('the useParticipants hook', () => {
+  let mockRoom: any;
+
+  beforeEach(() => {
+    mockRoom = new EventEmitter();
+    mockRoom.participants = new Map([[0, 'participant1'], [1, 'participant2']]);
+    mockedVideoContext.mockImplementation(() => ({
+      room: mockRoom,
+    }));
+  });
+
+  it('should return an array of mockParticipant.tracks by default', () => {
+    const { result } = renderHook(useParticipants);
+    expect(result.current).toEqual(['participant1', 'participant2']);
+  });
+
+  it('should return respond to "participantConnected" events', async () => {
+    const { result } = renderHook(useParticipants);
+    act(() => {
+      mockRoom.emit('participantConnected', 'newParticipant');
+    });
+    expect(result.current).toEqual([
+      'participant1',
+      'participant2',
+      'newParticipant',
+    ]);
+  });
+
+  it('should return respond to "participantDisconnected" events', async () => {
+    const { result } = renderHook(useParticipants);
+    act(() => {
+      mockRoom.emit('participantDisconnected', 'participant1');
+    });
+    expect(result.current).toEqual(['participant2']);
+  });
+
+  it('should clean up listeners on unmount', () => {
+    const { unmount } = renderHook(useParticipants);
+    unmount();
+    expect(mockRoom.listenerCount('participantConnected')).toBe(0);
+    expect(mockRoom.listenerCount('participantDisconnected')).toBe(0);
+  });
+});
diff --git a/src/hooks/useParticipants/useParticipants.tsx b/src/hooks/useParticipants/useParticipants.tsx
new file mode 100644
index 000000000..8536ec6e8
--- /dev/null
+++ b/src/hooks/useParticipants/useParticipants.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { useVideoContext } from '../context';
+import { RemoteParticipant } from 'twilio-video';
+
+export default function useParticipants() {
+  const { room } = useVideoContext();
+  const [participants, setParticipants] = useState(
+    Array.from(room.participants.values())
+  );
+
+  useEffect(() => {
+    const participantConnected = (participant: RemoteParticipant) =>
+      setParticipants(participants => [...participants, participant]);
+    const participantDisconnected = (participant: RemoteParticipant) =>
+      setParticipants(participants =>
+        participants.filter(p => p !== participant)
+      );
+    room.on('participantConnected', participantConnected);
+    room.on('participantDisconnected', participantDisconnected);
+    return () => {
+      room.off('participantConnected', participantConnected);
+      room.off('participantDisconnected', participantDisconnected);
+    };
+  }, [room, setParticipants]);
+
+  return participants;
+}
diff --git a/src/hooks/usePublications/usePublications.test.tsx b/src/hooks/usePublications/usePublications.test.tsx
new file mode 100644
index 000000000..50cd45360
--- /dev/null
+++ b/src/hooks/usePublications/usePublications.test.tsx
@@ -0,0 +1,40 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import usePublications from './usePublications';
+import EventEmitter from 'events';
+
+describe('the usePublications hook', () => {
+  let mockParticipant: any;
+
+  beforeEach(() => {
+    mockParticipant = new EventEmitter();
+    mockParticipant.tracks = new Map([[0, 'track1'], [1, 'track2']]);
+  });
+
+  it('should return an array of mockParticipant.tracks by default', () => {
+    const { result } = renderHook(() => usePublications(mockParticipant));
+    expect(result.current).toEqual(['track1', 'track2']);
+  });
+
+  it('should return respond to "trackPublished" events', async () => {
+    const { result } = renderHook(() => usePublications(mockParticipant));
+    act(() => {
+      mockParticipant.emit('trackPublished', 'newMockTrack');
+    });
+    expect(result.current).toEqual(['track1', 'track2', 'newMockTrack']);
+  });
+
+  it('should return respond to "trackRemoved" events', async () => {
+    const { result } = renderHook(() => usePublications(mockParticipant));
+    act(() => {
+      mockParticipant.emit('trackRemoved', 'track1');
+    });
+    expect(result.current).toEqual(['track2']);
+  });
+
+  it('should clean up listeners on unmount', () => {
+    const { unmount } = renderHook(() => usePublications(mockParticipant));
+    unmount();
+    expect(mockParticipant.listenerCount('trackPublished')).toBe(0);
+    expect(mockParticipant.listenerCount('trackUnpublished')).toBe(0);
+  });
+});
diff --git a/src/hooks/usePublications/usePublications.tsx b/src/hooks/usePublications/usePublications.tsx
new file mode 100644
index 000000000..bf83580a7
--- /dev/null
+++ b/src/hooks/usePublications/usePublications.tsx
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import {
+  LocalTrackPublication,
+  Participant,
+  RemoteTrackPublication,
+} from 'twilio-video';
+
+type TrackPublication = LocalTrackPublication | RemoteTrackPublication;
+
+export default function usePublications(participant: Participant) {
+  const [publications, setPublications] = useState<TrackPublication[]>(
+    Array.from(participant.tracks.values()) as TrackPublication[]
+  );
+
+  useEffect(() => {
+    const publicationAdded = (publication: TrackPublication) =>
+      setPublications(publications => [...publications, publication]);
+    const publicationRemoved = (publication: TrackPublication) =>
+      setPublications(publications =>
+        publications.filter(p => p !== publication)
+      );
+
+    participant.on('trackPublished', publicationAdded);
+    participant.on('trackRemoved', publicationRemoved);
+    return () => {
+      participant.off('trackPublished', publicationAdded);
+      participant.off('trackRemoved', publicationRemoved);
+    };
+  }, [participant, setPublications]);
+
+  return publications;
+}
diff --git a/src/hooks/useRoomState/useRoomState.test.tsx b/src/hooks/useRoomState/useRoomState.test.tsx
index 863b6ad6c..6754993ef 100644
--- a/src/hooks/useRoomState/useRoomState.test.tsx
+++ b/src/hooks/useRoomState/useRoomState.test.tsx
@@ -1,8 +1,8 @@
-import { renderHook, act } from '@testing-library/react-hooks';
-import useRoomState from './useRoomState';
+import { act, renderHook } from '@testing-library/react-hooks';
 import EventEmitter from 'events';
-import { useVideoContext, IVideoContext } from '../context';
 import { Room } from 'twilio-video';
+import useRoomState from './useRoomState';
+import { useVideoContext, IVideoContext } from '../context';
 
 jest.mock('../context');
 
diff --git a/src/hooks/useTrack/useTrack.test.tsx b/src/hooks/useTrack/useTrack.test.tsx
new file mode 100644
index 000000000..240b3f63d
--- /dev/null
+++ b/src/hooks/useTrack/useTrack.test.tsx
@@ -0,0 +1,43 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import EventEmitter from 'events';
+import useTrack from './useTrack';
+
+describe('the useTrack hook', () => {
+  let mockPublication: any;
+
+  beforeEach(() => {
+    mockPublication = new EventEmitter();
+  });
+
+  it('should return mockPublication.track by default', () => {
+    mockPublication.track = 'mockTrack';
+    const { result } = renderHook(() => useTrack(mockPublication));
+    expect(result.current).toBe('mockTrack');
+  });
+
+  it('should return respond to "subscribed" events', async () => {
+    mockPublication.track = 'mockTrack';
+    const { result } = renderHook(() => useTrack(mockPublication));
+    act(() => {
+      mockPublication.emit('subscribed', 'newMockTrack');
+    });
+    expect(result.current).toBe('newMockTrack');
+  });
+
+  it('should return respond to "unsubscribed" events', async () => {
+    mockPublication.track = 'mockTrack';
+    const { result } = renderHook(() => useTrack(mockPublication));
+    act(() => {
+      mockPublication.emit('unsubscribed');
+    });
+    expect(result.current).toBe(null);
+  });
+
+  it('should clean up listeners on unmount', () => {
+    mockPublication.track = 'mockTrack';
+    const { unmount } = renderHook(() => useTrack(mockPublication));
+    unmount();
+    expect(mockPublication.listenerCount('subscribed')).toBe(0);
+    expect(mockPublication.listenerCount('unsubscribed')).toBe(0);
+  });
+});
diff --git a/src/hooks/useTrack/useTrack.tsx b/src/hooks/useTrack/useTrack.tsx
new file mode 100644
index 000000000..ab0375da0
--- /dev/null
+++ b/src/hooks/useTrack/useTrack.tsx
@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { LocalTrackPublication, RemoteTrackPublication } from 'twilio-video';
+
+export default function useTrack(
+  publication: LocalTrackPublication | RemoteTrackPublication
+) {
+  const [track, setTrack] = useState(publication.track);
+
+  useEffect(() => {
+    const removeTrack = () => setTrack(null);
+    publication.on('subscribed', setTrack);
+    publication.on('unsubscribed', removeTrack);
+    return () => {
+      publication.off('subscribed', setTrack);
+      publication.off('unsubscribed', removeTrack);
+    };
+  }, [publication]);
+
+  return track;
+}
diff --git a/src/index.tsx b/src/index.tsx
index ae63df092..950aeac81 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -18,6 +18,10 @@ const VideoProviderWithToken = () => {
       token={token}
       options={{
         dominantSpeaker: true,
+        networkQuality: {
+          local: 1,
+          remote: 1,
+        },
       }}
     >
       <App />
diff --git a/src/setupTests.ts b/src/setupTests.ts
new file mode 100644
index 000000000..3482c8637
--- /dev/null
+++ b/src/setupTests.ts
@@ -0,0 +1,3 @@
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+configure({ adapter: new Adapter() });