diff --git a/package-lock.json b/package-lock.json
index 084916af..ab5d7d21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3100,6 +3100,11 @@
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
+    "bail": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
+      "integrity": "sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ=="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -3588,6 +3593,21 @@
         "supports-color": "^5.3.0"
       }
     },
+    "character-entities": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz",
+      "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw=="
+    },
+    "character-entities-legacy": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz",
+      "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA=="
+    },
+    "character-reference-invalid": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz",
+      "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg=="
+    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -3808,6 +3828,11 @@
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
     },
+    "collapse-white-space": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz",
+      "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -6699,6 +6724,53 @@
         }
       }
     },
+    "html-to-react": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/html-to-react/-/html-to-react-1.4.2.tgz",
+      "integrity": "sha512-TdTfxd95sRCo6QL8admCkE7mvNNrXtGoVr1dyS+7uvc8XCqAymnf/6ckclvnVbQNUo2Nh21VPwtfEHd0khiV7g==",
+      "requires": {
+        "domhandler": "^3.0",
+        "htmlparser2": "^4.0",
+        "lodash.camelcase": "^4.3.0",
+        "ramda": "^0.26"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
+        },
+        "domhandler": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.0.0.tgz",
+          "integrity": "sha512-eKLdI5v9m67kbXQbJSNn1zjh0SDzvzWVWtX+qEI3eMjZw8daH9k8rlj1FZY9memPwjiskQFbe7vHVVJIAqoEhw==",
+          "requires": {
+            "domelementtype": "^2.0.1"
+          }
+        },
+        "domutils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.0.0.tgz",
+          "integrity": "sha512-n5SelJ1axbO636c2yUtOGia/IcJtVtlhQbFiVDBZHKV5ReJO1ViX7sFEemtuyoAnBxk5meNSYgA8V4s0271efg==",
+          "requires": {
+            "dom-serializer": "^0.2.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0"
+          }
+        },
+        "htmlparser2": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
+          "integrity": "sha512-4zDq1a1zhE4gQso/c5LP1OtrhYTncXNSpvJYtWJBtXAETPlMfi3IFNjGuQbYLuVY4ZR0QMqRVvo4Pdy9KLyP8Q==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^3.0.0",
+            "domutils": "^2.0.0",
+            "entities": "^2.0.0"
+          }
+        }
+      }
+    },
     "html-webpack-plugin": {
       "version": "4.0.0-beta.11",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.11.tgz",
@@ -7064,6 +7136,20 @@
         "kind-of": "^3.0.2"
       }
     },
+    "is-alphabetical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
+      "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg=="
+    },
+    "is-alphanumerical": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz",
+      "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==",
+      "requires": {
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0"
+      }
+    },
     "is-arguments": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
@@ -7126,6 +7212,11 @@
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
       "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
     },
+    "is-decimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
+      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="
+    },
     "is-descriptor": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -7181,6 +7272,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-hexadecimal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz",
+      "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw=="
+    },
     "is-in-browser": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
@@ -7292,11 +7388,21 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
+    "is-whitespace-character": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz",
+      "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w=="
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
       "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
     },
+    "is-word-character": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz",
+      "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA=="
+    },
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
@@ -8781,6 +8887,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -8919,6 +9030,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-escapes": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz",
+      "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -8929,6 +9045,14 @@
         "safe-buffer": "^5.1.2"
       }
     },
+    "mdast-add-list-metadata": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz",
+      "integrity": "sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==",
+      "requires": {
+        "unist-util-visit-parents": "1.1.2"
+      }
+    },
     "mdn-data": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -9900,6 +10024,19 @@
         "safe-buffer": "^5.1.1"
       }
     },
+    "parse-entities": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-1.2.2.tgz",
+      "integrity": "sha512-NzfpbxW/NPrzZ/yYSoQxyqUZMZXIdCfE0OIN4ESsnptHJECoUk3FZktxNuzQf4tjt5UEopnxpYJbvYuxIFDdsg==",
+      "requires": {
+        "character-entities": "^1.0.0",
+        "character-entities-legacy": "^1.0.0",
+        "character-reference-invalid": "^1.0.0",
+        "is-alphanumerical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-hexadecimal": "^1.0.0"
+      }
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -11604,6 +11741,11 @@
         "performance-now": "^2.1.0"
       }
     },
+    "ramda": {
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
+      "integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -11876,6 +12018,21 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-markdown": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-4.3.1.tgz",
+      "integrity": "sha512-HQlWFTbDxTtNY6bjgp3C3uv1h2xcjCSi1zAEzfBW9OwJJvENSYiLXWNXN5hHLsoqai7RnZiiHzcnWdXk2Splzw==",
+      "requires": {
+        "html-to-react": "^1.3.4",
+        "mdast-add-list-metadata": "1.0.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.6",
+        "remark-parse": "^5.0.0",
+        "unified": "^6.1.5",
+        "unist-util-visit": "^1.3.0",
+        "xtend": "^4.0.1"
+      }
+    },
     "react-scripts": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@@ -12155,6 +12312,28 @@
       "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
       "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
     },
+    "remark-parse": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-5.0.0.tgz",
+      "integrity": "sha512-b3iXszZLH1TLoyUzrATcTQUZrwNl1rE70rVdSruJFlDaJ9z5aMkhrG43Pp68OgfHndL/ADz6V69Zow8cTQu+JA==",
+      "requires": {
+        "collapse-white-space": "^1.0.2",
+        "is-alphabetical": "^1.0.0",
+        "is-decimal": "^1.0.0",
+        "is-whitespace-character": "^1.0.0",
+        "is-word-character": "^1.0.0",
+        "markdown-escapes": "^1.0.0",
+        "parse-entities": "^1.1.0",
+        "repeat-string": "^1.5.4",
+        "state-toggle": "^1.0.0",
+        "trim": "0.0.1",
+        "trim-trailing-lines": "^1.0.0",
+        "unherit": "^1.0.4",
+        "unist-util-remove-position": "^1.0.0",
+        "vfile-location": "^2.0.0",
+        "xtend": "^4.0.1"
+      }
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -12222,6 +12401,11 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
+    "replace-ext": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.0.tgz",
+      "integrity": "sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs="
+    },
     "request": {
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
@@ -13180,6 +13364,11 @@
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
       "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA=="
     },
+    "state-toggle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz",
+      "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ=="
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -13919,6 +14108,21 @@
         "punycode": "^2.1.0"
       }
     },
+    "trim": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
+      "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
+    },
+    "trim-trailing-lines": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz",
+      "integrity": "sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA=="
+    },
+    "trough": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
+      "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA=="
+    },
     "ts-pnp": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz",
@@ -13987,6 +14191,15 @@
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
     },
+    "unherit": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz",
+      "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==",
+      "requires": {
+        "inherits": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -14011,6 +14224,19 @@
       "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
       "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg=="
     },
+    "unified": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-6.2.0.tgz",
+      "integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==",
+      "requires": {
+        "bail": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^1.1.0",
+        "trough": "^1.0.0",
+        "vfile": "^2.0.0",
+        "x-is-string": "^0.1.0"
+      }
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -14048,6 +14274,47 @@
         "imurmurhash": "^0.1.4"
       }
     },
+    "unist-util-is": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-3.0.0.tgz",
+      "integrity": "sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A=="
+    },
+    "unist-util-remove-position": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-1.1.4.tgz",
+      "integrity": "sha512-tLqd653ArxJIPnKII6LMZwH+mb5q+n/GtXQZo6S6csPRs5zB0u79Yw8ouR3wTw8wxvdJFhpP6Y7jorWdCgLO0A==",
+      "requires": {
+        "unist-util-visit": "^1.1.0"
+      }
+    },
+    "unist-util-stringify-position": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz",
+      "integrity": "sha512-pNCVrk64LZv1kElr0N1wPiHEUoXNVFERp+mlTg/s9R5Lwg87f9bM/3sQB99w+N9D/qnM9ar3+AKDBwo/gm/iQQ=="
+    },
+    "unist-util-visit": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+      "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+      "requires": {
+        "unist-util-visit-parents": "^2.0.0"
+      },
+      "dependencies": {
+        "unist-util-visit-parents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+          "requires": {
+            "unist-util-is": "^3.0.0"
+          }
+        }
+      }
+    },
+    "unist-util-visit-parents": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz",
+      "integrity": "sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q=="
+    },
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
@@ -14237,6 +14504,30 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "vfile": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-2.3.0.tgz",
+      "integrity": "sha512-ASt4mBUHcTpMKD/l5Q+WJXNtshlWxOogYyGYYrg4lt/vuRjC1EFQtlAofL5VmtVNIZJzWYFJjzGWZ0Gw8pzW1w==",
+      "requires": {
+        "is-buffer": "^1.1.4",
+        "replace-ext": "1.0.0",
+        "unist-util-stringify-position": "^1.0.0",
+        "vfile-message": "^1.0.0"
+      }
+    },
+    "vfile-location": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-2.0.6.tgz",
+      "integrity": "sha512-sSFdyCP3G6Ka0CEmN83A2YCMKIieHx0EDaj5IDP4g1pa5ZJ4FJDvpO0WODLxo4LUX4oe52gmSCK7Jw4SBghqxA=="
+    },
+    "vfile-message": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-1.1.1.tgz",
+      "integrity": "sha512-1WmsopSGhWt5laNir+633LszXvZ+Z/lxveBf6yhGsqnQIhlhzooZae7zV6YVM1Sdkw68dtAW3ow0pOdPANugvA==",
+      "requires": {
+        "unist-util-stringify-position": "^1.1.1"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -16119,6 +16410,11 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "x-is-string": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/x-is-string/-/x-is-string-0.1.0.tgz",
+      "integrity": "sha1-R0tQhlrzpJqcRlfwWs0UVFj3fYI="
+    },
     "xml-name-validator": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
diff --git a/package.json b/package.json
index 71d029ef..ba21c238 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "lodash": "^4.17.15",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-markdown": "^4.3.1",
     "react-scripts": "3.4.1",
     "react-toastify": "^5.5.0",
     "uuid": "^7.0.2"
diff --git a/src/components/LeftSidebar/tabs/Awards.js b/src/components/LeftSidebar/tabs/Awards.js
index b118fd2b..07e80b7e 100644
--- a/src/components/LeftSidebar/tabs/Awards.js
+++ b/src/components/LeftSidebar/tabs/Awards.js
@@ -5,6 +5,7 @@ import set from 'lodash/set';
 import TextField from '../../../shared/TextField';
 import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
+import TextArea from '../../../shared/TextArea';
 
 const AwardsTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -53,6 +54,7 @@ const AddItem = ({ dispatch }) => {
     id: uuidv4(),
     title: '',
     subtitle: '',
+    description: '',
   });
 
   const onChange = (key, value) => setItem(set({ ...item }, key, value));
@@ -72,6 +74,7 @@ const AddItem = ({ dispatch }) => {
       id: uuidv4(),
       title: '',
       subtitle: '',
+      description: '',
     });
 
     setOpen(false);
@@ -104,6 +107,13 @@ const AddItem = ({ dispatch }) => {
           onChange={v => onChange('subtitle', v)}
         />
 
+        <TextArea
+          label="Description"
+          className="mb-6"
+          value={item.description}
+          onChange={v => onChange('description', v)}
+        />
+
         <button
           type="button"
           onClick={addItem}
@@ -177,6 +187,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
           onChange={v => onChange(`${identifier}.subtitle`, v)}
         />
 
+        <TextArea
+          label="Description"
+          className="mb-6"
+          value={item.description}
+          onChange={v => onChange(`${identifier}.description`, v)}
+        />
+
         <div className="flex justify-between">
           <button
             type="button"
diff --git a/src/components/LeftSidebar/tabs/Certifications.js b/src/components/LeftSidebar/tabs/Certifications.js
index a36f1f46..eb76e819 100644
--- a/src/components/LeftSidebar/tabs/Certifications.js
+++ b/src/components/LeftSidebar/tabs/Certifications.js
@@ -5,6 +5,7 @@ import set from 'lodash/set';
 import TextField from '../../../shared/TextField';
 import AppContext from '../../../context/AppContext';
 import Checkbox from '../../../shared/Checkbox';
+import TextArea from '../../../shared/TextArea';
 
 const CertificationsTab = ({ data, onChange }) => {
   const context = useContext(AppContext);
@@ -53,6 +54,7 @@ const AddItem = ({ dispatch }) => {
     id: uuidv4(),
     title: '',
     subtitle: '',
+    description: '',
   });
 
   const onChange = (key, value) => setItem(set({ ...item }, key, value));
@@ -72,6 +74,7 @@ const AddItem = ({ dispatch }) => {
       id: uuidv4(),
       title: '',
       subtitle: '',
+      description: '',
     });
 
     setOpen(false);
@@ -104,6 +107,13 @@ const AddItem = ({ dispatch }) => {
           onChange={v => onChange('subtitle', v)}
         />
 
+        <TextArea
+          label="Description"
+          className="mb-6"
+          value={item.description}
+          onChange={v => onChange('description', v)}
+        />
+
         <button
           type="button"
           onClick={addItem}
@@ -177,6 +187,13 @@ const Item = ({ item, index, onChange, dispatch, first, last }) => {
           onChange={v => onChange(`${identifier}.subtitle`, v)}
         />
 
+        <TextArea
+          label="Description"
+          className="mb-6"
+          value={item.description}
+          onChange={v => onChange(`${identifier}.description`, v)}
+        />
+
         <div className="flex justify-between">
           <button
             type="button"
diff --git a/src/components/LeftSidebar/tabs/Objective.js b/src/components/LeftSidebar/tabs/Objective.js
index 34eb9ffa..8fd39147 100644
--- a/src/components/LeftSidebar/tabs/Objective.js
+++ b/src/components/LeftSidebar/tabs/Objective.js
@@ -26,7 +26,7 @@ const ObjectiveTab = ({ data, onChange }) => {
 
       <TextArea
         rows="15"
-        className="mb-6"
+        className="mb-4"
         label="Objective"
         placeholder="Looking for a challenging role in a reputable organization to utilize my technical, database, and management skills for the growth of the organization as well as to enhance my knowledge about new and emerging trends in the IT sector."
         value={data.objective.body}
diff --git a/src/index.css b/src/index.css
index efa587ea..cb929a9d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,6 +18,11 @@ body {
   font-family: 'Montserrat', sans-serif;
 }
 
+li {
+  list-style: disc;
+  list-style-position: inside !important;
+}
+
 @media screen {
   input:checked + i.material-icons {
     display: block;
diff --git a/src/shared/MarkdownHelpText.js b/src/shared/MarkdownHelpText.js
new file mode 100644
index 00000000..a0b0c257
--- /dev/null
+++ b/src/shared/MarkdownHelpText.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const MarkdownHelpText = ({ className }) => {
+  return (
+    <div className={className}>
+      <p className="text-gray-800 text-xs">
+        You can use{' '}
+        <a
+          className="text-blue-600 hover:underline"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet"
+        >
+          GitHub Flavored Markdown
+        </a>{' '}
+        to style this section of text.
+      </p>
+    </div>
+  );
+};
+
+export default MarkdownHelpText;
diff --git a/src/shared/TabBar.js b/src/shared/TabBar.js
index 7c7da58f..9f7e6983 100644
--- a/src/shared/TabBar.js
+++ b/src/shared/TabBar.js
@@ -28,13 +28,13 @@ const TabBar = ({ tabs, currentTab, setCurrentTab }) => {
       <ul id="tabs" ref={tabsRef} className="flex overflow-x-scroll">
         {tabs.map(tab =>
           currentTab === tab ? (
-            <li key={tab} className="mx-1">
+            <li key={tab} className="mx-1 list-none">
               <div className="whitespace-no-wrap bg-gray-700 text-white rounded-md text-sm py-2 px-6 font-medium">
                 {tab}
               </div>
             </li>
           ) : (
-            <li key={tab} className="mx-1">
+            <li key={tab} className="mx-1 list-none">
               <div
                 className="bg-white whitespace-no-wrap rounded-md cursor-pointer text-sm py-2 px-6 font-medium hover:bg-gray-200"
                 onClick={() => setCurrentTab(tab)}
diff --git a/src/shared/TextArea.js b/src/shared/TextArea.js
index 2cdc4618..0bed007e 100644
--- a/src/shared/TextArea.js
+++ b/src/shared/TextArea.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import MarkdownHelpText from './MarkdownHelpText';
 
 const TextArea = ({ label, placeholder, value, onChange, className, rows = 5 }) => (
   <div className={`w-full flex flex-col ${className}`}>
@@ -12,6 +13,8 @@ const TextArea = ({ label, placeholder, value, onChange, className, rows = 5 })
       onChange={e => onChange(e.target.value)}
       placeholder={placeholder}
     />
+
+    <MarkdownHelpText className="mt-2" />
   </div>
 );
 
diff --git a/src/templates/gengar/Gengar.js b/src/templates/gengar/Gengar.js
index 7cb7157f..4f787a75 100644
--- a/src/templates/gengar/Gengar.js
+++ b/src/templates/gengar/Gengar.js
@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
 import AppContext from '../../context/AppContext';
 import { hexToRgb } from '../../utils';
 
@@ -9,6 +11,25 @@ const Gengar = () => {
 
   const { r, g, b } = hexToRgb(theme.colors.accent);
 
+  const Photo = () =>
+    data.profile.photo !== '' && (
+      <img
+        className="w-24 h-24 rounded-full mr-4 object-cover border-4"
+        style={{
+          borderColor: theme.colors.background,
+        }}
+        src={data.profile.photo}
+        alt="Resume Photograph"
+      />
+    );
+
+  const FullName = () => (
+    <div>
+      <h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
+      <h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
+    </div>
+  );
+
   const ContactItem = ({ icon, value }) =>
     value && (
       <div className="flex items-center mb-3">
@@ -31,12 +52,28 @@ const Gengar = () => {
     <h6 className="font-bold text-xs uppercase tracking-wide mb-2">{title}</h6>
   );
 
+  const Objective = () =>
+    data.objective.enable && (
+      <div className="h-full flex flex-col justify-center items-start">
+        <Heading title={data.objective.heading} />
+        <ReactMarkdown className="text-sm" source={data.objective.body} />
+      </div>
+    );
+
   const SkillItem = x => (
     <li key={x} className="text-sm py-1">
       {x}
     </li>
   );
 
+  const Skills = () =>
+    data.skills.enable && (
+      <div className="mb-8">
+        <Heading title={data.skills.heading} />
+        <ul>{data.skills.items.map(SkillItem)}</ul>
+      </div>
+    );
+
   const EducationItem = x => (
     <div key={x.name} className="mb-3">
       <div className="flex justify-between items-center">
@@ -59,14 +96,45 @@ const Gengar = () => {
           </span>
         </div>
       </div>
-      <p className="mt-2 text-sm">{x.description}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
-  const AwardCertificationItem = x => (
+  const Education = () =>
+    data.education.enable && (
+      <div className="mb-8">
+        <Heading title={data.education.heading} />
+        {data.education.items.map(EducationItem)}
+      </div>
+    );
+
+  const CertificationItem = x => (
     <div key={x.title} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Certifications = () => (
+    <div className="mb-8">
+      <Heading title={data.certifications.heading} />
+      {data.certifications.items.map(CertificationItem)}
+    </div>
+  );
+
+  const AwardItem = x => (
+    <div key={x.title} className="mb-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Awards = () => (
+    <div className="mb-8">
+      <Heading title={data.awards.heading} />
+      {data.awards.items.map(AwardItem)}
     </div>
   );
 
@@ -81,10 +149,35 @@ const Gengar = () => {
           ({x.start} - {x.end})
         </span>
       </div>
-      <p className="mt-2 text-sm">{x.description}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
+  const Work = () =>
+    data.work.enable && (
+      <div className="mb-8">
+        <Heading title={data.work.heading} />
+        {data.work.items.map(WorkItem)}
+      </div>
+    );
+
+  const ExtraItem = x => (
+    <tr key={x.key}>
+      <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
+      <td className="border px-4 py-2 text-sm">{x.value}</td>
+    </tr>
+  );
+
+  const Extras = () =>
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <table className="table-auto">
+          <tbody>{data.extras.items.map(ExtraItem)}</tbody>
+        </table>
+      </div>
+    );
+
   return (
     <div
       style={{
@@ -99,20 +192,8 @@ const Gengar = () => {
           style={{ backgroundColor: theme.colors.accent, color: theme.colors.background }}
         >
           <div className="flex items-center">
-            {data.profile.photo !== '' && (
-              <img
-                className="w-24 h-24 rounded-full mr-4 object-cover border-4"
-                style={{
-                  borderColor: theme.colors.background,
-                }}
-                src={data.profile.photo}
-                alt="Resume Photograph"
-              />
-            )}
-            <div>
-              <h1 className="text-3xl font-bold">{data.profile.firstName}</h1>
-              <h1 className="text-3xl font-bold">{data.profile.lastName}</h1>
-            </div>
+            <Photo />
+            <FullName />
           </div>
 
           <hr className="w-1/4 my-5 opacity-50" />
@@ -127,70 +208,23 @@ const Gengar = () => {
           className="col-span-3 px-6 py-8"
           style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
         >
-          {data.objective.enable && (
-            <div className="h-full flex flex-col justify-center items-start">
-              <Heading title={data.objective.heading} />
-              <p className="text-sm whitespace-pre-wrap">{data.objective.body}</p>
-            </div>
-          )}
+          <Objective />
         </div>
 
         <div
           className="col-span-2 px-6 py-8"
           style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)` }}
         >
-          {data.skills.enable && (
-            <div className="mb-8">
-              <Heading title={data.skills.heading} />
-              <ul className="list-disc ml-5">{data.skills.items.map(SkillItem)}</ul>
-            </div>
-          )}
+          <Skills />
+          <Education />
 
-          {data.education.enable && (
-            <div className="mb-8">
-              <Heading title={data.education.heading} />
-              {data.education.items.map(EducationItem)}
-            </div>
-          )}
-
-          {data.certifications.enable && (
-            <div className="mb-8">
-              <Heading title={data.certifications.heading} />
-              {data.certifications.items.map(AwardCertificationItem)}
-            </div>
-          )}
+          <Certifications />
         </div>
 
         <div className="col-span-3 px-6 py-8">
-          {data.work.enable && (
-            <div className="mb-8">
-              <Heading title={data.work.heading} />
-              {data.work.items.map(WorkItem)}
-            </div>
-          )}
-
-          {data.awards.enable && (
-            <div className="mb-8">
-              <Heading title={data.awards.heading} />
-              {data.awards.items.map(AwardCertificationItem)}
-            </div>
-          )}
-
-          {data.extras.enable && (
-            <div>
-              <Heading title={data.extras.heading} />
-              <table className="table-auto">
-                <tbody>
-                  {data.extras.items.map(x => (
-                    <tr key={x.key}>
-                      <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
-                      <td className="border px-4 py-2 text-sm">{x.value}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
+          <Work />
+          <Awards />
+          <Extras />
         </div>
       </div>
     </div>
diff --git a/src/templates/onyx/Onyx.js b/src/templates/onyx/Onyx.js
index 66300357..5d8861a3 100644
--- a/src/templates/onyx/Onyx.js
+++ b/src/templates/onyx/Onyx.js
@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
 import AppContext from '../../context/AppContext';
 
 const Onyx = () => {
@@ -6,6 +8,174 @@ const Onyx = () => {
   const { state } = context;
   const { data, theme } = state;
 
+  const Photo = () =>
+    data.profile.photo && (
+      <img
+        className="rounded object-cover mr-4"
+        src={data.profile.photo}
+        alt="Resume Photograph"
+        style={{ width: '120px', height: '120px' }}
+      />
+    );
+
+  const Profile = () => (
+    <div>
+      <h1 className="font-bold text-4xl" style={{ color: theme.colors.accent }}>
+        {data.profile.firstName} {data.profile.lastName}
+      </h1>
+      <h6 className="font-medium text-sm">{data.profile.subtitle}</h6>
+
+      <div className="flex flex-col mt-4 text-xs">
+        <span>{data.profile.address.line1}</span>
+        <span>{data.profile.address.line2}</span>
+        <span>{data.profile.address.line3}</span>
+      </div>
+    </div>
+  );
+
+  const ContactItem = ({ icon, value }) =>
+    value && (
+      <div className="flex items-center my-3">
+        <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
+          {icon}
+        </span>
+        <span className="font-medium">{value}</span>
+      </div>
+    );
+
+  const Heading = ({ title }) => (
+    <h6 className="text-xs font-bold uppercase mt-6 mb-2" style={{ color: theme.colors.accent }}>
+      {title}
+    </h6>
+  );
+
+  const Objective = () =>
+    data.objective.enable && (
+      <div>
+        <Heading title={data.objective.heading} />
+        <ReactMarkdown className="text-sm" source={data.objective.body} />
+      </div>
+    );
+
+  const WorkItem = x => (
+    <div key={x.title} className="mt-3">
+      <div className="flex justify-between">
+        <div>
+          <h6 className="font-semibold">{x.title}</h6>
+          <p className="text-xs">{x.role}</p>
+        </div>
+        <span className="text-xs font-medium">
+          ({x.start} - {x.end})
+        </span>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Work = () =>
+    data.work.enable && (
+      <div>
+        <Heading title={data.work.heading} />
+        {data.work.items.map(WorkItem)}
+      </div>
+    );
+
+  const EducationItem = x => (
+    <div key={x.name} className="mt-3">
+      <div className="flex justify-between">
+        <div>
+          <h6 className="font-semibold">{x.name}</h6>
+          <p className="text-xs">{x.major}</p>
+        </div>
+        <div className="flex flex-col items-end">
+          <span className="text-sm font-bold">{x.grade}</span>
+          <span className="text-xs font-medium">
+            ({x.start} - {x.end})
+          </span>
+        </div>
+      </div>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Education = () =>
+    data.education.enable && (
+      <div>
+        <Heading title={data.education.heading} />
+        {data.education.items.map(EducationItem)}
+      </div>
+    );
+
+  const AwardItem = x => (
+    <div key={x.title} className="mt-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Awards = () =>
+    data.awards.enable && (
+      <div>
+        <Heading title={data.awards.heading} />
+        {data.awards.items.map(AwardItem)}
+      </div>
+    );
+
+  const CertificationItem = x => (
+    <div key={x.title} className="mt-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Certifications = () =>
+    data.certifications.enable && (
+      <div>
+        <Heading title={data.certifications.heading} />
+        {data.certifications.items.map(CertificationItem)}
+      </div>
+    );
+
+  const SkillItem = x => (
+    <span
+      key={x}
+      className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
+      style={{
+        backgroundColor: theme.colors.primary,
+        color: theme.colors.background,
+      }}
+    >
+      {x}
+    </span>
+  );
+
+  const Skills = () =>
+    data.skills.enable && (
+      <div>
+        <Heading title={data.skills.heading} />
+        <div className="mt-1 flex flex-wrap">{data.skills.items.map(SkillItem)}</div>
+      </div>
+    );
+
+  const ExtraItem = x => (
+    <tr key={x.key}>
+      <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
+      <td className="border px-4 py-2 text-sm">{x.value}</td>
+    </tr>
+  );
+
+  const Extras = () =>
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <table className="w-2/3 table-auto">
+          <tbody>{data.extras.items.map(ExtraItem)}</tbody>
+        </table>
+      </div>
+    );
+
   return (
     <div
       style={{
@@ -16,203 +186,30 @@ const Onyx = () => {
     >
       <div className="grid grid-cols-4 items-center">
         <div className="col-span-3 flex items-center">
-          {data.profile.photo && (
-            <img
-              className="rounded object-cover mr-4"
-              src={data.profile.photo}
-              alt="Resume Photograph"
-              style={{ width: '120px', height: '120px' }}
-            />
-          )}
-          <div>
-            <h1 className="font-bold text-4xl" style={{ color: theme.colors.accent }}>
-              {data.profile.firstName} {data.profile.lastName}
-            </h1>
-            <h6 className="font-medium text-sm">{data.profile.subtitle}</h6>
-
-            <div className="flex flex-col mt-4 text-xs">
-              <span>{data.profile.address.line1}</span>
-              <span>{data.profile.address.line2}</span>
-              <span>{data.profile.address.line3}</span>
-            </div>
-          </div>
+          <Photo />
+          <Profile />
         </div>
+
         <div className="col-span-1 text-xs">
-          {data.profile.phone && (
-            <div className="flex items-center my-3">
-              <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
-                phone
-              </span>
-              <span className="font-medium">{data.profile.phone}</span>
-            </div>
-          )}
-          {data.profile.website && (
-            <div className="flex items-center my-3">
-              <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
-                language
-              </span>
-              <span className="font-medium">{data.profile.website}</span>
-            </div>
-          )}
-          {data.profile.email && (
-            <div className="flex items-center my-3">
-              <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
-                alternate_email
-              </span>
-              <span className="font-medium">{data.profile.email}</span>
-            </div>
-          )}
+          <ContactItem icon="phone" value={data.profile.phone} />
+          <ContactItem icon="language" value={data.profile.website} />
+          <ContactItem icon="alternate_email" value={data.profile.email} />
         </div>
       </div>
 
       <hr className="my-6" />
 
-      {data.objective.enable && (
-        <div>
-          <h6
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.objective.heading}
-          </h6>
-          <p className="text-sm">{data.objective.body}</p>
-        </div>
-      )}
-
-      {data.work.enable && (
-        <div>
-          <h6
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.work.heading}
-          </h6>
-          {data.work.items.map(exp => (
-            <div key={exp.title} className="mt-3">
-              <div className="flex justify-between">
-                <div>
-                  <h6 className="font-semibold">{exp.title}</h6>
-                  <p className="text-xs">{exp.role}</p>
-                </div>
-                <span className="text-xs font-medium">
-                  ({exp.start} - {exp.end})
-                </span>
-              </div>
-              <p className="mt-2 text-sm">{exp.description}</p>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {data.education.enable && (
-        <div>
-          <h6
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.education.heading}
-          </h6>
-          {data.education.items.map(edu => (
-            <div key={edu.name} className="mt-3">
-              <div className="flex justify-between">
-                <div>
-                  <h6 className="font-semibold">{edu.name}</h6>
-                  <p className="text-xs">{edu.major}</p>
-                </div>
-                <div className="flex flex-col items-end">
-                  <span className="text-sm font-bold">{edu.grade}</span>
-                  <span className="text-xs font-medium">
-                    ({edu.start} - {edu.end})
-                  </span>
-                </div>
-              </div>
-              <p className="mt-2 text-sm">{edu.description}</p>
-            </div>
-          ))}
-        </div>
-      )}
+      <Objective />
+      <Work />
+      <Education />
 
       <div className="grid grid-cols-2">
-        {data.awards.enable && (
-          <div>
-            <h6
-              className="text-xs font-bold uppercase mt-6 mb-2"
-              style={{ color: theme.colors.accent }}
-            >
-              {data.awards.heading}
-            </h6>
-            {data.awards.items.map(x => (
-              <div key={x.title} className="mt-3">
-                <h6 className="font-semibold">{x.title}</h6>
-                <p className="text-xs">{x.subtitle}</p>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {data.certifications.enable && (
-          <div>
-            <h6
-              className="text-xs font-bold uppercase mt-6 mb-2"
-              style={{ color: theme.colors.accent }}
-            >
-              {data.certifications.heading}
-            </h6>
-            {data.certifications.items.map(x => (
-              <div key={x.title} className="mt-3">
-                <h6 className="font-semibold">{x.title}</h6>
-                <p className="text-xs">{x.subtitle}</p>
-              </div>
-            ))}
-          </div>
-        )}
+        <Awards />
+        <Certifications />
       </div>
 
-      {data.skills.enable && (
-        <div>
-          <h6
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.skills.heading}
-          </h6>
-          <div className="mt-1 flex flex-wrap">
-            {data.skills.items.map(x => (
-              <span
-                key={x}
-                className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
-                style={{
-                  backgroundColor: theme.colors.primary,
-                  color: theme.colors.background,
-                }}
-              >
-                {x}
-              </span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {data.extras.enable && (
-        <div>
-          <h6
-            className="text-xs font-bold uppercase mt-6 mb-2"
-            style={{ color: theme.colors.accent }}
-          >
-            {data.extras.heading}
-          </h6>
-          <table className="w-2/3 table-auto">
-            <tbody>
-              {data.extras.items.map(x => (
-                <tr key={x.key}>
-                  <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
-                  <td className="border px-4 py-2 text-sm">{x.value}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
+      <Skills />
+      <Extras />
     </div>
   );
 };
diff --git a/src/templates/pikachu/Pikachu.js b/src/templates/pikachu/Pikachu.js
index a670d147..41f716db 100644
--- a/src/templates/pikachu/Pikachu.js
+++ b/src/templates/pikachu/Pikachu.js
@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import ReactMarkdown from 'react-markdown';
+
 import AppContext from '../../context/AppContext';
 
 const Pikachu = () => {
@@ -6,7 +8,12 @@ const Pikachu = () => {
   const { state } = context;
   const { data, theme } = state;
 
-  const Photo = () => <img className="rounded-full object-cover" src={data.profile.photo} alt="" />;
+  const Photo = () =>
+    data.profile.photo !== '' && (
+      <div className="self-center col-span-3">
+        <img className="rounded-full object-cover" src={data.profile.photo} alt="" />
+      </div>
+    );
 
   const Header = () => (
     <div
@@ -21,7 +28,7 @@ const Pikachu = () => {
 
         <hr className="my-4 opacity-50" />
 
-        <div className="text-sm">{data.objective.body}</div>
+        <ReactMarkdown className="text-sm" source={data.objective.body} />
       </div>
     </div>
   );
@@ -32,11 +39,11 @@ const Pikachu = () => {
         <span className="material-icons text-lg mr-2" style={{ color: theme.colors.accent }}>
           {icon}
         </span>
-        <span className="font-medium">{value}</span>
+        <span className="font-medium break-all">{value}</span>
       </div>
     );
 
-  const SectionHeading = ({ title }) => (
+  const Heading = ({ title }) => (
     <div
       className="mb-2 border-b-2 pb-1 font-bold uppercase tracking-wide text-sm"
       style={{ color: theme.colors.accent, borderColor: theme.colors.accent }}
@@ -54,6 +61,13 @@ const Pikachu = () => {
     </span>
   );
 
+  const Skills = () => (
+    <div>
+      <Heading title={data.skills.heading} />
+      <div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
+    </div>
+  );
+
   const ExtraItem = x => (
     <div key={x.key} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
@@ -61,6 +75,14 @@ const Pikachu = () => {
     </div>
   );
 
+  const Extras = () =>
+    data.extras.enable && (
+      <div>
+        <Heading title={data.extras.heading} />
+        <div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
+      </div>
+    );
+
   const WorkItem = x => (
     <div key={x.title} className="mb-3">
       <div className="flex justify-between items-center">
@@ -72,10 +94,18 @@ const Pikachu = () => {
           ({x.start} - {x.end})
         </span>
       </div>
-      <p className="mt-2 text-sm">{x.description}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
+  const Work = () =>
+    data.work.enable && (
+      <div>
+        <Heading title={data.work.heading} />
+        <div className="flex flex-col mb-4">{data.work.items.map(WorkItem)}</div>
+      </div>
+    );
+
   const EducationItem = x => (
     <div key={x.name} className="mb-3">
       <div className="flex justify-between items-center">
@@ -92,17 +122,50 @@ const Pikachu = () => {
           </span>
         </div>
       </div>
-      <p className="mt-2 text-sm">{x.description}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
-  const AwardCertificationItem = x => (
+  const Education = () =>
+    data.education.enable && (
+      <div>
+        <Heading title={data.education.heading} />
+        <div className="flex flex-col mb-4">{data.education.items.map(EducationItem)}</div>
+      </div>
+    );
+
+  const AwardItem = x => (
     <div key={x.title} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
     </div>
   );
 
+  const Awards = () =>
+    data.awards.enable && (
+      <div>
+        <Heading title={data.awards.heading} />
+        <div className="flex flex-col mb-2">{data.awards.items.map(AwardItem)}</div>
+      </div>
+    );
+
+  const CertificationItem = x => (
+    <div key={x.title} className="mb-3">
+      <h6 className="font-semibold">{x.title}</h6>
+      <p className="text-xs">{x.subtitle}</p>
+      <ReactMarkdown className="mt-2 text-sm" source={x.description} />
+    </div>
+  );
+
+  const Certifications = () =>
+    data.certifications.enable && (
+      <div>
+        <Heading title={data.certifications.heading} />
+        <div className="flex flex-col mb-2">{data.certifications.items.map(CertificationItem)}</div>
+      </div>
+    );
+
   return (
     <div
       style={{
@@ -111,18 +174,14 @@ const Pikachu = () => {
         color: theme.colors.primary,
       }}
     >
-      <div className="grid grid-cols-8 col-gap-6 row-gap-8">
-        {data.profile.photo !== '' && (
-          <div className="self-center col-span-2">
-            <Photo />
-          </div>
-        )}
+      <div className="grid grid-cols-12 col-gap-6 row-gap-8">
+        <Photo />
 
-        <div className={`${data.profile.photo !== '' ? 'col-span-6' : 'col-span-8'}`}>
+        <div className={`${data.profile.photo !== '' ? 'col-span-9' : 'col-span-12'}`}>
           <Header />
         </div>
 
-        <div className="col-span-2">
+        <div className="col-span-3 overflow-hidden">
           <div className="text-sm mb-6">
             <ContactItem icon="phone" value={data.profile.phone} />
             <ContactItem icon="language" value={data.profile.website} />
@@ -130,53 +189,15 @@ const Pikachu = () => {
             <ContactItem icon="location_on" value={data.profile.address.line3} />
           </div>
 
-          {data.skills.enable && (
-            <div>
-              <SectionHeading title={data.skills.heading} />
-              <div className="flex flex-col mb-6">{data.skills.items.map(SkillItem)}</div>
-            </div>
-          )}
-
-          {data.extras.enable && (
-            <div>
-              <SectionHeading title={data.extras.heading} />
-              <div className="flex flex-col">{data.extras.items.map(ExtraItem)}</div>
-            </div>
-          )}
+          <Skills />
+          <Extras />
         </div>
 
-        <div className="col-span-6">
-          {data.work.enable && (
-            <div>
-              <SectionHeading title={data.work.heading} />
-              <div className="flex flex-col mb-4">{data.work.items.map(WorkItem)}</div>
-            </div>
-          )}
-
-          {data.education.enable && (
-            <div>
-              <SectionHeading title={data.education.heading} />
-              <div className="flex flex-col mb-4">{data.education.items.map(EducationItem)}</div>
-            </div>
-          )}
-
-          {data.awards.enable && (
-            <div>
-              <SectionHeading title={data.awards.heading} />
-              <div className="flex flex-col mb-4">
-                {data.awards.items.map(AwardCertificationItem)}
-              </div>
-            </div>
-          )}
-
-          {data.certifications.enable && (
-            <div>
-              <SectionHeading title={data.certifications.heading} />
-              <div className="flex flex-col mb-4">
-                {data.certifications.items.map(AwardCertificationItem)}
-              </div>
-            </div>
-          )}
+        <div className="col-span-9">
+          <Work />
+          <Education />
+          <Awards />
+          <Certifications />
         </div>
       </div>
     </div>