diff --git a/package-lock.json b/package-lock.json
index 7d285d8..296a01a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "impress.js",
-  "version": "1.1.0",
+  "version": "2.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "impress.js",
-      "version": "1.1.0",
+      "version": "2.1.0",
       "license": "MIT",
       "dependencies": {
-        "node-html-markdown": "^1.3.0"
+        "markdown-it": "^13.0.1"
       },
       "devDependencies": {
         "eslint": "^6.8.0",
@@ -20,6 +20,7 @@
         "karma-firefox-launcher": "^1.3.0",
         "karma-qunit": "^4.0.0",
         "ls": "^0.2.1",
+        "node-html-markdown": "^1.3.0",
         "puppeteer": "^2.1.1",
         "qunit": "^2.9.3",
         "qunit-assert-close": "^2.1.2",
@@ -808,7 +809,8 @@
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
@@ -1443,6 +1445,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
       "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
       "dependencies": {
         "boolbase": "^1.0.0",
         "css-what": "^6.1.0",
@@ -1458,6 +1461,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
       "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dev": true,
       "dependencies": {
         "domelementtype": "^2.3.0",
         "domhandler": "^5.0.2",
@@ -1471,6 +1475,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
       "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1482,6 +1487,7 @@
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
       "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dev": true,
       "dependencies": {
         "domelementtype": "^2.3.0"
       },
@@ -1496,6 +1502,7 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
       "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dev": true,
       "dependencies": {
         "dom-serializer": "^2.0.0",
         "domelementtype": "^2.3.0",
@@ -1509,6 +1516,7 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
       "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "dev": true,
       "engines": {
         "node": ">=0.12"
       },
@@ -1520,6 +1528,7 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
       "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       },
@@ -3081,6 +3090,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
       "bin": {
         "he": "bin/he"
       }
@@ -4175,6 +4185,14 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -4346,6 +4364,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
+      "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/matcher-collection": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/matcher-collection/-/matcher-collection-1.1.2.tgz",
@@ -4363,6 +4412,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -4673,6 +4727,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/node-html-markdown/-/node-html-markdown-1.3.0.tgz",
       "integrity": "sha512-OeFi3QwC/cPjvVKZ114tzzu+YoR+v9UXW5RwSXGUqGb0qCl0DvP406tzdL7SFn8pZrMyzXoisfG2zcuF9+zw4g==",
+      "dev": true,
       "dependencies": {
         "node-html-parser": "^6.1.1"
       },
@@ -4684,6 +4739,7 @@
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-6.1.4.tgz",
       "integrity": "sha512-3muP9Uy/Pz7bQa9TNYVQzWJhNZMqyCx7xJle8kz2/y1UgzAUyXXShc1IcPaJy6u07CE3K5rQcRwlvHzmlySRjg==",
+      "dev": true,
       "dependencies": {
         "css-select": "^5.1.0",
         "he": "1.2.0"
@@ -4757,6 +4813,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
       "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
       "dependencies": {
         "boolbase": "^1.0.0"
       },
@@ -7211,6 +7268,11 @@
         "node": "*"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "node_modules/underscore": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
@@ -8387,7 +8449,8 @@
     "boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -8905,6 +8968,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
       "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==",
+      "dev": true,
       "requires": {
         "boolbase": "^1.0.0",
         "css-what": "^6.1.0",
@@ -8917,6 +8981,7 @@
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
           "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+          "dev": true,
           "requires": {
             "domelementtype": "^2.3.0",
             "domhandler": "^5.0.2",
@@ -8926,12 +8991,14 @@
         "domelementtype": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
-          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+          "dev": true
         },
         "domhandler": {
           "version": "5.0.3",
           "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
           "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "dev": true,
           "requires": {
             "domelementtype": "^2.3.0"
           }
@@ -8940,6 +9007,7 @@
           "version": "3.0.1",
           "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
           "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+          "dev": true,
           "requires": {
             "dom-serializer": "^2.0.0",
             "domelementtype": "^2.3.0",
@@ -8949,14 +9017,16 @@
         "entities": {
           "version": "4.4.0",
           "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
-          "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
+          "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+          "dev": true
         }
       }
     },
     "css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
-      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw=="
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
+      "dev": true
     },
     "custom-event": {
       "version": "1.0.1",
@@ -10228,7 +10298,8 @@
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
     },
     "home-or-tmp": {
       "version": "1.0.0",
@@ -11096,6 +11167,14 @@
         "type-check": "~0.3.2"
       }
     },
+    "linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -11256,6 +11335,30 @@
         "object-visit": "^1.0.0"
       }
     },
+    "markdown-it": {
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
+      "integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
+        "entities": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+          "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q=="
+        }
+      }
+    },
     "matcher-collection": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/matcher-collection/-/matcher-collection-1.1.2.tgz",
@@ -11273,6 +11376,11 @@
       "dev": true,
       "peer": true
     },
+    "mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -11520,6 +11628,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/node-html-markdown/-/node-html-markdown-1.3.0.tgz",
       "integrity": "sha512-OeFi3QwC/cPjvVKZ114tzzu+YoR+v9UXW5RwSXGUqGb0qCl0DvP406tzdL7SFn8pZrMyzXoisfG2zcuF9+zw4g==",
+      "dev": true,
       "requires": {
         "node-html-parser": "^6.1.1"
       }
@@ -11528,6 +11637,7 @@
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/node-html-parser/-/node-html-parser-6.1.4.tgz",
       "integrity": "sha512-3muP9Uy/Pz7bQa9TNYVQzWJhNZMqyCx7xJle8kz2/y1UgzAUyXXShc1IcPaJy6u07CE3K5rQcRwlvHzmlySRjg==",
+      "dev": true,
       "requires": {
         "css-select": "^5.1.0",
         "he": "1.2.0"
@@ -11584,6 +11694,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
       "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
       "requires": {
         "boolbase": "^1.0.0"
       }
@@ -13554,6 +13665,11 @@
       "integrity": "sha512-f9BESNVhzlhEFf2CHMSj40NWOjYPl1YKYbrvIr/hFTDEmLq7SRbWvm7FcdcpCYT95zrOhC7gZSxjdnnTpBcwVw==",
       "dev": true
     },
+    "uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
     "underscore": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
diff --git a/package.json b/package.json
index f7c1e2b..196d868 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,6 @@
     "qunit-assert-close": "^2.1.2",
     "syn": "^0.14.1",
     "terser": "^4.6.7",
-    "node-html-markdown": "^1.3.0"
+    "markdown-it": "^13.0.1"
   }
 }
diff --git a/website/css/docs/navstyle.css b/website/css/docs/navstyle.css
index 1be0cac..f1a7c1e 100644
--- a/website/css/docs/navstyle.css
+++ b/website/css/docs/navstyle.css
@@ -10,7 +10,15 @@
     overflow: scroll;
 }
 
+.dropdown {
+    display: none;
+    font-size: 0.8rem;
+    height: 100%;
+    background-color: rgb(27, 27, 165);
+}
+
 .navitem {
+    cursor: pointer;
     text-decoration: none;
     color: white;
     padding: 5%;
@@ -19,19 +27,13 @@
     font-size: 1rem;
 }
 
-.navitem:hover {
-    background-color: black;
-}
-
 .nav-subitem {
+    display: block;
     text-decoration: none;
     color: white;
-    padding: 5%;
-    padding-left: 25%;
     font-size: 0.8rem;
     width: 70%;
+    padding: 5%;
+    padding-left: 25%;
     background-color: rgb(27, 27, 165);
 }
-.nav-subitem:hover {
-    background-color: rgb(43, 43, 43);
-}
\ No newline at end of file
diff --git a/website/css/docs/style.css b/website/css/docs/style.css
index 2756c0e..0548440 100644
--- a/website/css/docs/style.css
+++ b/website/css/docs/style.css
@@ -20,6 +20,7 @@ html, body {
     color: black;
     display: grid;
     grid-template-areas:
+        'menu header header header header'
         'menu main main main main'
         'menu main main main main'
         'menu main main main main'
@@ -31,22 +32,38 @@ html, body {
         'menu footer footer footer footer';
 }
 
-.darkMode {
-    background-color: rgb(46, 46, 46);
-    color: white
+.logo {
+    width: 60%;
+    height: auto;
+    margin-left: 20%;
+    margin-top: 5%;
+    margin-bottom: 5%;
 }
 
 #nav {
     grid-area: menu;
-    width: 90%;
+    min-width: 20vw;
+    width: 100%;
     height: 100%;
+    overflow: scroll;
 }
 
 #docPage {
+    max-width: 75vw;
+    margin: 0;
     grid-area: main;
     overflow: scroll;
 }
 
+.doc-container {
+    width: 90%;
+    margin: 5%;
+}
+
 #footer {
     grid-area: footer;
 }
+
+#top {
+    grid-area: header;
+}
diff --git a/website/css/docs/topstyle.css b/website/css/docs/topstyle.css
new file mode 100644
index 0000000..5c72e0b
--- /dev/null
+++ b/website/css/docs/topstyle.css
@@ -0,0 +1,15 @@
+.top-container {
+    background-color: rgb(223, 223, 223);
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.top-wrapper {
+    display: flex;
+    width: 80%;
+    margin-right: 5%;
+    justify-content: flex-end;
+}
\ No newline at end of file
diff --git a/website/docs/gettingStarted.html b/website/docs/gettingStarted.html
index 575d36f..838c3c5 100644
--- a/website/docs/gettingStarted.html
+++ b/website/docs/gettingStarted.html
@@ -1,9 +1,27 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>Getting Started | impress.js - documentation</title>
+        <title>Getting Started - impress.js</title>
+        <!--I am using jquery for button animations.-->
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script defer src="/js/docs/loader.js"></script>
+        <link rel="stylesheet" href="/css/docs/style.css">
     </head>
     <body>
-        
+        <div class="content">
+            <div id="nav"></div>
+            <div id="top"></div>
+            <div id="docPage">
+                <div class="doc-container">
+                    <div class="docTitle">
+                        <h1>Getting Started with impress.js</h1>
+                    </div>
+                    <p>impress.js is a JavaScript framework to create stunning presentations. Note: impress may not help you, if you have nothing interesting to say!</p>
+                    <p>If you are new to impress and you want to learn to use it, we suggest you <a href="./gettingStarted.html" class="docs-link">start here</a>!</p>
+                </div>
+            </div>
+            <div id="footer"></div>
+        </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/website/docs/index.html b/website/docs/index.html
index e32c6b9..16a2367 100644
--- a/website/docs/index.html
+++ b/website/docs/index.html
@@ -4,15 +4,21 @@
         <title>Docs - impress.js</title>
         <!--I am using jquery for button animations.-->
         <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <script defer src="/js/docs/loader.js"></script>
         <link rel="stylesheet" href="/css/docs/style.css">
     </head>
     <body>
         <div class="content">
             <div id="nav"></div>
+            <div id="top"></div>
             <div id="docPage">
-                <div class="docTitle">
-                    <h1>Welcome to the impress.js docs!</h1>
+                <div class="doc-container">
+                    <div class="docTitle">
+                        <h1>Welcome to the impress.js docs!</h1>
+                    </div>
+                    <p>impress.js is a JavaScript framework to create stunning presentations. Note: impress may not help you, if you have nothing interesting to say!</p>
+                    <p>If you are new to impress and you want to learn to use it, we suggest you <a href="./gettingStarted.html" class="docs-link">start here</a>!</p>
                 </div>
             </div>
             <div id="footer"></div>
diff --git a/website/docs/nav.html b/website/docs/nav.html
index 5254600..c2672a0 100644
--- a/website/docs/nav.html
+++ b/website/docs/nav.html
@@ -11,11 +11,62 @@
                 <div class="nav-list">
                     <a class="navitem" id="home" href="/docs">Home</a>
                     <a class="navitem" id="gettingStarted" href="/docs/gettingStarted.html">Getting Started</a>
-                    <a class="navitem" id="advanced" href="/docs/reference">API reference</a>
-                    <a class="nav-subitem" id="advanced" href="/docs/advanced/root">Root element</a>
-                    <a class="navitem" id="plugins" href="/docs/plugins.html">Plugins</a>
+                    <a class="navitem" id="referenceNav" onclick="toggleList( 'reference' );">API reference</a>
+                    <div class="dropdown" id="reference">
+                        <a class="nav-subitem" id="root" href="/docs/reference">Home</a>
+                        <a class="nav-subitem" id="root" href="/docs/reference/root">Root element</a>
+                    </div>
+                    <a class="navitem" id="pluginsNav" onclick="toggleList( 'plugins' );">Plugins</a>
+                    <div class="dropdown" id="plugins">
+                        <a class="nav-subitem" id="impressConsole" href="/docs/plugins/impressConsole.html">Impress Console</a>
+                    </div>
+                    <a class="navitem" id="contributingNav" onclick="toggleList( 'contributing' );">Contributing</a>
+                    <div class="dropdown" id="contributing">
+                        <a class="nav-subitem" id="contributing-gettingStarted" href="/docs/contributing/gettingStarted.html">Getting Started</a>
+                    </div>
                 </div>
             </div>
         </div>
     </body>
+    <script>
+        function highlightPath () { 
+
+        };
+
+        $(document).ready(function () {
+            $( '.navitem' ).mouseenter( function () { 
+                $( this ).stop();
+                $( this ).animate( { 'background-color': 'black' }, 100 );
+            } );
+
+            $( '.navitem' ).mouseleave( function () { 
+                if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
+                    $( this ).stop();
+                    $( this ).animate( { 'background-color': 'rgb(12, 12, 60)' }, 100 );
+                } else {
+                    $( this ).stop();
+                    $( this ).animate( { 'background-color': 'rgb(22, 22, 117)' }, 100 );
+                }
+            } );
+
+            $( '.nav-subitem' ).mouseenter( function () { 
+                $( this ).stop();
+                $( this ).animate( { 'background-color': 'rgb(43, 43, 43)' }, 100 );
+            } );
+
+            $( '.nav-subitem' ).mouseleave( function () { 
+                if ( sessionStorage.getItem( 'theme' ) == 'dark' ) {
+                    $( this ).stop();
+                    $( this ).animate( { 'background-color': 'rgb(18, 18, 99)' }, 100 );
+                } else {
+                    $( this ).stop();
+                    $( this ).animate( { 'background-color': 'rgb(27, 27, 165)' }, 100 );
+                }
+            } );
+        });
+
+        function toggleList ( id ) {
+            $( `#${id}` ).slideToggle();
+        };
+    </script>
 </html>
\ No newline at end of file
diff --git a/website/docs/src/build.js b/website/docs/src/build.js
index 5d9ebbc..73796b2 100644
--- a/website/docs/src/build.js
+++ b/website/docs/src/build.js
@@ -14,7 +14,8 @@
 
 const fs = require( 'fs' );
 const path = require( 'path' );
-const md2html = require( 'node-html-markdown' );
+const mdhtml = require( 'markdown-it' );
+const md2html = new mdhtml();
 
 const pluginsPath = path.join( __dirname + '/../../../src/plugins' );
 
@@ -26,7 +27,7 @@ for ( let item in plugins ) {
         if ( error ) {
             parseJS( path.join( pluginsPath + '/' + plugins[item] ) );
         } else {
-            console.log( data );
+            console.log( md2html.render( '' + data ) );
         };
     } );
 }
diff --git a/website/docs/top.html b/website/docs/top.html
new file mode 100644
index 0000000..31404ae
--- /dev/null
+++ b/website/docs/top.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <link rel="stylesheet" href="/css/docs/topstyle.css">
+    </head>
+    <body>
+        <div class="top-container">
+            <div class="top-wrapper">
+                <button onclick="toggleDarkMode();" id="darkToggle">&#9789;</button>
+            </div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/website/js/docs/loader.js b/website/js/docs/loader.js
index fa786ec..dcff31b 100644
--- a/website/js/docs/loader.js
+++ b/website/js/docs/loader.js
@@ -1,3 +1,61 @@
 $( document ).ready( function () {
     $( '#nav' ).load( '/docs/nav.html' );
+    $( '#top' ).load( '/docs/top.html' );
+    setTimeout( setTheme, 300 );
 } );
+
+
+let theme = sessionStorage.getItem( 'theme' ) || getPreferredTheme();
+
+// set theme on page load
+function setTheme () {
+    if ( theme == 'dark' ) {
+        document.getElementById( 'darkToggle' ).innerHTML = '&#9788;';
+        $( '.content' ).css( 'background-color', 'rgb(46, 46, 46)' );
+        $( '.top-container' ).css( 'background-color', 'rgb(100, 100, 100)' );
+        $( '.content' ).css( 'color', 'white' );
+        $( '.nav-subitem' ).css( 'background-color', 'rgb(18, 18, 99)' );
+        $( '.navitem' ).css( 'background-color', 'rgb(12, 12, 60)' );
+        $( '.nav-container' ).css( 'background-color', 'rgb(0, 0, 100)' );
+    }
+}
+
+// retreive preferred theme from browser preferences if not in session storage
+function getPreferredTheme () {
+    if ( window.matchMedia( '(prefers-colorscheme: dark)' ).matches ) {
+        setPreferredTheme( 'dark' );
+        return 'dark';
+    } else {
+        setPreferredTheme( 'light' );
+        return 'light';
+    };
+}
+
+// set theme in session storage
+function setPreferredTheme ( userTheme ) {
+    sessionStorage.setItem( 'theme', userTheme );
+    theme = userTheme;
+}
+
+// change theme
+function toggleDarkMode () {
+    if ( theme == 'light' ) {
+        $( '.content' ).animate( { 'background-color': 'rgb(46, 46, 46)' } );
+        $( '.top-container' ).animate( { 'background-color': 'rgb(100, 100, 100)' } );
+        $( '.nav-subitem' ).animate( { 'background-color': 'rgb(18, 18, 99)' } );
+        $( '.navitem' ).animate( { 'background-color': 'rgb(12, 12, 60)' } );
+        $( '.nav-container' ).animate( { 'background-color': 'rgb(0, 0, 100)' } );
+        $( '.content' ).animate( { 'color': 'white' } );
+        document.getElementById( 'darkToggle' ).innerHTML = '&#9788;';
+        setPreferredTheme( 'dark' );
+    } else {
+        $( '.content' ).animate( { 'background-color': 'white' } );
+        $( '.content' ).animate( { 'color': 'black' } );
+        $( '.nav-subitem' ).animate( { 'background-color': 'rgb(27, 27, 165)' } );
+        $( '.navitem' ).animate( { 'background-color': 'rgb(22, 22, 117)' } );
+        $( '.nav-container' ).animate( { 'background-color': 'blue' } );
+        $( '.top-container' ).animate( { 'background-color': 'rgb(223, 223, 223)' } );
+        document.getElementById( 'darkToggle' ).innerHTML = '&#9789;';
+        setPreferredTheme( 'light' );
+    }
+}