diff --git a/index.html b/index.html
index d914d42..0294b6b 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
         body {
             margin: 0;
             padding: 0;
-            font-family: sans-serif;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
         }
     </style>
     <script>
@@ -22,9 +22,202 @@
 <body>
     <ex-page>
         <ex-nav appName="Extollo"></ex-nav>
-        <h1>Hello, World!</h1>
+        <h1>Header 1</h1>
+        <p>
+            Example anchor tag: <a href="#">look no further</a>
+        </p>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor.
+        </p>
+        <p>
+            Some <i>more</i>, <em>text</em>, <b>goes</b>, <strong>here</strong>, <code>like this</code>.
+        </p>
+        <p>
+            <strong>Block quote:</strong>
+        <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
+        <blockquote class="ex-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
+        <blockquote class="ex-success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
+        <blockquote class="ex-warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
+        <blockquote class="ex-danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor. </blockquote>
+        </p>
+
+        <h2>Header 2</h2>
+        <p>
+            <b>Code blocks</b>
+            <pre><code>import time
+# Quick, count to ten!
+for i in range(10):
+    # (but not *too* quick)
+    time.sleep(0.5)
+    print i</code></pre>
+        </p>
+
+        <h3>Header 3</h3>
+        <ol>
+            <li>
+                Testing
+                <ul>
+                    <li>One</li>
+                    <li>Two</li>
+                    <li>Three</li>
+                </ul>
+            </li>
+            <li>Still testing</li>
+            <li>
+                some before code
+                <pre><code>const bob = 'bar'
+console.log('bar')</code></pre>
+                some following code
+            </li>
+        </ol>
+
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <h5>Heading 5</h5>
+        <h6>Heading h</h6>
+
+        <p>
+            A line:
+        </p>
+
+        <hr>
+
+        <p>Here's a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local doc</a>, and to a <a href="#an-h2-header">section heading in the current doc</a>. Here's a footnote <a href="#fn1" id="fnref1"><sup>1</sup></a>.</p>
+        <p>Tables can look like this:</p>
+
+        <table>
+            <caption>
+                Shoes, their sizes, and what they're made of
+            </caption>
+            <thead>
+            <tr >
+                <th align="left">size</th>
+                <th align="left">material</th>
+                <th align="left">color</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr >
+                <td align="left">9</td>
+                <td align="left">leather</td>
+                <td align="left">brown</td>
+            </tr>
+            <tr >
+                <td align="left">10</td>
+                <td align="left">hemp canvas</td>
+                <td align="left">natural</td>
+            </tr>
+            <tr >
+                <td align="left">11</td>
+                <td align="left">glass</td>
+                <td align="left">transparent</td>
+            </tr>
+            </tbody>
+        </table>
+        <p>Multi-line tables:</p>
+        <table style="width:46%;">
+            <colgroup>
+                <col width="13%">
+                <col width="31%">
+            </colgroup>
+            <thead>
+            <tr>
+                <th align="left">keyword</th>
+                <th align="left">text</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td align="left">red</td>
+                <td align="left">Sunsets, apples, and other red or reddish things.</td>
+            </tr>
+            <tr>
+                <td align="left">green</td>
+                <td align="left">Leaves, grass, frogs and other things it's not easy being.</td>
+            </tr>
+            </tbody>
+        </table>
+
+        <p>A horizontal rule follows.</p>
+        <hr>
+        <p>Images are responsive by default:</p>
+        <div>
+<!--            <img alt="example image" src="#" title="An exemplary image">-->
+            <p>example image</p>
+        </div>
+
+        <hr>
+
+        <h1 id="form-elements">Form Elements</h1>
+        <form>
+            <div id="forms__input">
+                <h3>Input fields</h3>
+                <p><label for="input__text">Text Input</label> <input id="input__text" placeholder="Text Input" type="text"></p>
+                <p><label for="input__password">Password</label> <input id="input__password" placeholder="Type your Password" type="password"></p>
+                <p><label for="input__webaddress">Web Address</label> <input id="input__webaddress" placeholder="http://yoursite.com" type="url"></p>
+                <p><label for="input__emailaddress">Email Address</label> <input id="input__emailaddress" placeholder="name@email.com" type="email"></p>
+                <p><label for="input__phone">Phone Number</label> <input id="input__phone" placeholder="(999) 999-9999" type="tel"></p>
+                <p><label for="input__search">Search</label> <input id="input__search" placeholder="Enter Search Term" type="search"></p>
+                <p><label for="input__text2">Number Input</label> <input id="input__text2" placeholder="Enter a Number" type="number"></p>
+                <p><label for="input__text3">Error</label> <input id="input__text3" placeholder="Text Input" type="text"></p>
+                <p><label for="input__text4">Valid</label> <input id="input__text4" placeholder="Text Input" type="text"></p>
+            </div>
+            <p><a href="#top">[Top]</a></p>
+            <div id="forms__select">
+                <h3>Select menus</h3>
+                <p><label for="select">Select</label> <select id="select">
+                    <optgroup label="Option Group">
+                        <option>
+                            Option One
+                        </option>
+                        <option>
+                            Option Two
+                        </option>
+                        <option>
+                            Option Three
+                        </option>
+                    </optgroup>
+                </select></p>
+            </div>
+            <p><a href="#top">[Top]</a></p>
+            <div id="forms__checkbox">
+                <h3>Checkboxes</h3>
+                <ul style="list-style:none;">
+                    <li><label for="checkbox1"><input checked="checked" id="checkbox1" name="checkbox" type="checkbox"> Choice A</label></li>
+                    <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
+                    <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
+                </ul>
+            </div>
+            <p><a href="#top">[Top]</a></p>
+            <div id="forms__textareas">
+                <h3>Textareas</h3>
+                <p><label for="textarea">Textarea</label>
+                    <textarea cols="48" id="textarea" placeholder="Enter your message here" rows="8"></textarea></p>
+            </div>
+            <p><a href="#top">[Top]</a></p>
+            <div id="forms__html5">
+                <div id="forms__action">
+                    <h3>Action buttons</h3>
+                    <p><input type="submit" value="input type=submit"> <input type="button" value="input type=button"> <input type="reset" value="input type=reset"> <input disabled type="submit" value="input disabled"></p>
+                    <p><input type="submit" value="input type=submit" class="ex-secondary"> <input type="button" value="input type=button" class="ex-secondary"> <input type="reset" value="input type=reset" class="ex-secondary"> <input disabled type="submit" value="input disabled" class="ex-secondary"></p>
+                    <p><input type="submit" value="input type=submit" class="ex-danger"> <input type="button" value="input type=button" class="ex-danger"> <input type="reset" value="input type=reset" class="ex-danger"> <input disabled type="submit" value="input disabled" class="ex-danger"></p>
+                    <p><input type="submit" value="input type=submit" class="ex-success"> <input type="button" value="input type=button" class="ex-success"> <input type="reset" value="input type=reset" class="ex-success"> <input disabled type="submit" value="input disabled" class="ex-success"></p>
+                    <p><input type="submit" value="input type=submit" class="ex-warning"> <input type="button" value="input type=button" class="ex-warning"> <input type="reset" value="input type=reset" class="ex-warning"> <input disabled type="submit" value="input disabled" class="ex-warning"></p>
+                    <p><button type="submit">&lt;button type=submit&gt;</button> <button type="button">&lt;button type=button&gt;</button> <button type="reset">&lt;button type=reset&gt;</button> <button disabled type="button">&lt;button disabled&gt;</button></p>
+                </div>
+                <p><a href="#top">[Top]</a></p>
+            </div>
+        </form>
     </ex-page>
 
+    <ex-modal header="Modal header goes here">
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien maximus, sodales elit tempus, viverra libero. Phasellus vitae elit eros. Vivamus non nibh vestibulum, tristique nulla at, convallis est. Aliquam erat volutpat. Sed est lorem, lacinia at lobortis vel, finibus a arcu. Integer ac eros est. In mattis tincidunt elit eget tempor.
+        </p>
+    </ex-modal>
+
     <script>
         window.addEventListener('load', () => {
             $('ex-nav').tap(el => {
diff --git a/package.json b/package.json
index d7c7ffe..5a82d51 100644
--- a/package.json
+++ b/package.json
@@ -8,13 +8,13 @@
         "lib": "lib"
     },
     "scripts": {
-        "build": "pnpm run lint && rimraf lib && tsc && webpack",
+        "build": "pnpm run lint && rimraf lib && tsc && fse copy --all --dereference --preserveTimestamps --keepExisting=false --quiet --errorOnExist=false src/resources lib/resources && webpack",
         "app": "pnpm run build && node lib/index.js",
         "prepare": "pnpm run build",
         "lint": "eslint . --ext .ts",
         "lint:fix": "eslint --fix . --ext .ts",
         "serve": "python3 -m http.server",
-        "watch": "nodemon --watch src --ext ts --exec \"pnpm build && pnpm serve\""
+        "watch": "nodemon --watch src --ext ts,css --exec \"pnpm build && pnpm serve\""
     },
     "files": [
         "lib/**/*"
@@ -28,6 +28,7 @@
     "author": "Garrett Mills <shout@garrettmills.dev>",
     "license": "MIT",
     "devDependencies": {
+        "@atao60/fse-cli": "^0.1.7",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.4.0",
         "css-loader": "^6.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cff812c..abc707e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@atao60/fse-cli': ^0.1.7
   '@popperjs/core': ^2.10.2
   '@types/rimraf': ^3.0.2
   '@types/uuid': ^8.3.3
@@ -33,6 +34,7 @@ dependencies:
   uuid: 8.3.2
 
 devDependencies:
+  '@atao60/fse-cli': 0.1.7
   '@typescript-eslint/eslint-plugin': 5.4.0_d6f2571581882eb2d6c9d9867e002185
   '@typescript-eslint/parser': 5.4.0_eslint@8.2.0+typescript@4.5.2
   css-loader: 6.5.1_webpack@5.64.4
@@ -44,6 +46,31 @@ devDependencies:
 
 packages:
 
+  /@atao60/fse-cli/0.1.7:
+    resolution: {integrity: sha512-gjRvhP1nzQ0tbAp4VokHjc9lOjmnHtHTlfaeTrHuktm47bjb2GNqr01P3mIytbAC6AiDJtdEgMDt2aNXAwJ8sA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0, npm: '>=6.14.11'}
+    hasBin: true
+    dependencies:
+      '@babel/runtime': 7.16.3
+      arg: 5.0.1
+      chalk: 4.1.2
+      core-js: 3.19.1
+      fs-extra: 10.0.0
+      graceful-fs: 4.2.8
+      inquirer: 8.2.0
+      regenerator-runtime: 0.13.9
+      source-map-support: 0.5.21
+      terminal-link: 3.0.0
+      tslib: 2.3.1
+    dev: true
+
+  /@babel/runtime/7.16.3:
+    resolution: {integrity: sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.9
+    dev: true
+
   /@cspotcode/source-map-consumer/0.8.0:
     resolution: {integrity: sha512-41qniHzTU8yAGbCp04ohlmSrZf8bkf/iJsl3V0dRGsQN/5GFfx+LbCSsCpp2gqrqjTVg/K6O8ycoV35JIwAzAg==}
     engines: {node: '>= 12'}
@@ -502,6 +529,20 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /ansi-escapes/4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      type-fest: 0.21.3
+    dev: true
+
+  /ansi-escapes/5.0.0:
+    resolution: {integrity: sha512-5GFMVX8HqE/TB+FuBJGuO5XG0WrsA6ptUqoODaT/n9mmUaZFkqnBueB4leqGBCmrUHnCnC4PCZTCd0E7QQ83bA==}
+    engines: {node: '>=12'}
+    dependencies:
+      type-fest: 1.4.0
+    dev: true
+
   /ansi-regex/5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
@@ -526,6 +567,10 @@ packages:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
     dev: false
 
+  /arg/5.0.1:
+    resolution: {integrity: sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==}
+    dev: true
+
   /argparse/2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -538,11 +583,23 @@ packages:
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  /base64-js/1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: true
+
   /binary-extensions/2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
     dev: true
 
+  /bl/4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.0
+    dev: true
+
   /bootstrap/5.1.3_@popperjs+core@2.10.2:
     resolution: {integrity: sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==}
     peerDependencies:
@@ -594,6 +651,13 @@ packages:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
     dev: true
 
+  /buffer/5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: true
+
   /cacheable-request/6.1.0:
     resolution: {integrity: sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==}
     engines: {node: '>=8'}
@@ -629,6 +693,10 @@ packages:
       supports-color: 7.2.0
     dev: true
 
+  /chardet/0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+    dev: true
+
   /chokidar/3.5.2:
     resolution: {integrity: sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==}
     engines: {node: '>= 8.10.0'}
@@ -658,6 +726,23 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /cli-cursor/3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+    dependencies:
+      restore-cursor: 3.1.0
+    dev: true
+
+  /cli-spinners/2.6.1:
+    resolution: {integrity: sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /cli-width/3.0.0:
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+    dev: true
+
   /clone-deep/4.0.1:
     resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
     engines: {node: '>=6'}
@@ -673,6 +758,11 @@ packages:
       mimic-response: 1.0.1
     dev: true
 
+  /clone/1.0.4:
+    resolution: {integrity: sha1-2jCcwmPfFZlMaIypAheco8fNfH4=}
+    engines: {node: '>=0.8'}
+    dev: true
+
   /color-convert/2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -712,6 +802,11 @@ packages:
       xdg-basedir: 4.0.0
     dev: true
 
+  /core-js/3.19.1:
+    resolution: {integrity: sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==}
+    requiresBuild: true
+    dev: true
+
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
     dev: false
@@ -787,6 +882,12 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /defaults/1.0.3:
+    resolution: {integrity: sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=}
+    dependencies:
+      clone: 1.0.4
+    dev: true
+
   /defer-to-connect/1.1.3:
     resolution: {integrity: sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==}
     dev: true
@@ -875,6 +976,11 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /escape-string-regexp/1.0.5:
+    resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
   /escape-string-regexp/4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -1021,6 +1127,15 @@ packages:
       strip-final-newline: 2.0.0
     dev: true
 
+  /external-editor/3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+    dev: true
+
   /fast-deep-equal/3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: true
@@ -1054,6 +1169,13 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /figures/3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+    dependencies:
+      escape-string-regexp: 1.0.5
+    dev: true
+
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -1088,6 +1210,15 @@ packages:
     resolution: {integrity: sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==}
     dev: true
 
+  /fs-extra/10.0.0:
+    resolution: {integrity: sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==}
+    engines: {node: '>=12'}
+    dependencies:
+      graceful-fs: 4.2.8
+      jsonfile: 6.1.0
+      universalify: 2.0.0
+    dev: true
+
   /fs.realpath/1.0.0:
     resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
 
@@ -1232,6 +1363,13 @@ packages:
     engines: {node: '>=10.17.0'}
     dev: true
 
+  /iconv-lite/0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: true
+
   /icss-utils/5.1.0_postcss@8.4.3:
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -1241,6 +1379,10 @@ packages:
       postcss: 8.4.3
     dev: true
 
+  /ieee754/1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: true
+
   /ignore-by-default/1.0.1:
     resolution: {integrity: sha1-SMptcvbGo68Aqa1K5odr44ieKwk=}
     dev: true
@@ -1300,6 +1442,26 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /inquirer/8.2.0:
+    resolution: {integrity: sha512-0crLweprevJ02tTuA6ThpoAERAGyVILC4sS74uib58Xf/zSr1/ZWtmm7D5CI+bSQEaA04f0K7idaHpQbSWgiVQ==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.21
+      mute-stream: 0.0.8
+      ora: 5.4.1
+      run-async: 2.4.1
+      rxjs: 7.4.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+    dev: true
+
   /interpret/2.2.0:
     resolution: {integrity: sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==}
     engines: {node: '>= 0.10'}
@@ -1350,6 +1512,11 @@ packages:
       is-path-inside: 3.0.3
     dev: true
 
+  /is-interactive/1.0.0:
+    resolution: {integrity: sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==}
+    engines: {node: '>=8'}
+    dev: true
+
   /is-npm/5.0.0:
     resolution: {integrity: sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==}
     engines: {node: '>=10'}
@@ -1386,6 +1553,11 @@ packages:
     resolution: {integrity: sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=}
     dev: true
 
+  /is-unicode-supported/0.1.0:
+    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
+    engines: {node: '>=10'}
+    dev: true
+
   /is-yarn-global/0.3.0:
     resolution: {integrity: sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==}
     dev: true
@@ -1431,6 +1603,14 @@ packages:
     resolution: {integrity: sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=}
     dev: true
 
+  /jsonfile/6.1.0:
+    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
+    dependencies:
+      universalify: 2.0.0
+    optionalDependencies:
+      graceful-fs: 4.2.8
+    dev: true
+
   /keyv/3.1.0:
     resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==}
     dependencies:
@@ -1473,6 +1653,18 @@ packages:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
 
+  /lodash/4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+    dev: true
+
+  /log-symbols/4.1.0:
+    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
+    engines: {node: '>=10'}
+    dependencies:
+      chalk: 4.1.2
+      is-unicode-supported: 0.1.0
+    dev: true
+
   /lowercase-keys/1.0.1:
     resolution: {integrity: sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==}
     engines: {node: '>=0.10.0'}
@@ -1559,6 +1751,10 @@ packages:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
 
+  /mute-stream/0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+    dev: true
+
   /nanoid/3.1.30:
     resolution: {integrity: sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1643,6 +1839,26 @@ packages:
       word-wrap: 1.2.3
     dev: true
 
+  /ora/5.4.1:
+    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      bl: 4.1.0
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-spinners: 2.6.1
+      is-interactive: 1.0.0
+      is-unicode-supported: 0.1.0
+      log-symbols: 4.1.0
+      strip-ansi: 6.0.1
+      wcwidth: 1.0.1
+    dev: true
+
+  /os-tmpdir/1.0.2:
+    resolution: {integrity: sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /p-cancelable/1.1.0:
     resolution: {integrity: sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==}
     engines: {node: '>=6'}
@@ -1843,6 +2059,15 @@ packages:
       strip-json-comments: 2.0.1
     dev: true
 
+  /readable-stream/3.6.0:
+    resolution: {integrity: sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+    dev: true
+
   /readdirp/3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
@@ -1857,6 +2082,10 @@ packages:
       resolve: 1.20.0
     dev: true
 
+  /regenerator-runtime/0.13.9:
+    resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==}
+    dev: true
+
   /regexpp/3.2.0:
     resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
     engines: {node: '>=8'}
@@ -1906,6 +2135,14 @@ packages:
       lowercase-keys: 1.0.1
     dev: true
 
+  /restore-cursor/3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.6
+    dev: true
+
   /reusify/1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -1917,16 +2154,31 @@ packages:
     dependencies:
       glob: 7.2.0
 
+  /run-async/2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+    dev: true
+
   /run-parallel/1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
     dev: true
 
+  /rxjs/7.4.0:
+    resolution: {integrity: sha512-7SQDi7xeTMCJpqViXh8gL/lebcwlp3d831F05+9B44A4B0WfsEwUQHR64gsH1kvJ+Ep/J9K2+n1hVl1CsGN23w==}
+    dependencies:
+      tslib: 2.1.0
+    dev: true
+
   /safe-buffer/5.2.1:
     resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
     dev: true
 
+  /safer-buffer/2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+    dev: true
+
   /schema-utils/3.1.1:
     resolution: {integrity: sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==}
     engines: {node: '>= 10.13.0'}
@@ -2026,6 +2278,12 @@ packages:
       strip-ansi: 6.0.1
     dev: true
 
+  /string_decoder/1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
   /strip-ansi/6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -2078,11 +2336,27 @@ packages:
       has-flag: 4.0.0
     dev: true
 
+  /supports-hyperlinks/2.2.0:
+    resolution: {integrity: sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==}
+    engines: {node: '>=8'}
+    dependencies:
+      has-flag: 4.0.0
+      supports-color: 7.2.0
+    dev: true
+
   /tapable/2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
     dev: true
 
+  /terminal-link/3.0.0:
+    resolution: {integrity: sha512-flFL3m4wuixmf6IfhFJd1YPiLiMuxEc8uHRM1buzIeZPm22Au2pDqBJQgdo7n1WfPU1ONFGv7YDwpFBmHGF6lg==}
+    engines: {node: '>=12'}
+    dependencies:
+      ansi-escapes: 5.0.0
+      supports-hyperlinks: 2.2.0
+    dev: true
+
   /terser-webpack-plugin/5.2.5_acorn@8.6.0+webpack@5.64.4:
     resolution: {integrity: sha512-3luOVHku5l0QBeYS8r4CdHYWEGMmIj3H1U64jgkdZzECcSOJAyJ9TjuqcQZvw1Y+4AOBN9SeYJPJmFn2cM4/2g==}
     engines: {node: '>= 10.13.0'}
@@ -2129,6 +2403,17 @@ packages:
     resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=}
     dev: true
 
+  /through/2.3.8:
+    resolution: {integrity: sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=}
+    dev: true
+
+  /tmp/0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+    dependencies:
+      os-tmpdir: 1.0.2
+    dev: true
+
   /to-readable-stream/1.0.0:
     resolution: {integrity: sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==}
     engines: {node: '>=6'}
@@ -2181,6 +2466,14 @@ packages:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
     dev: true
 
+  /tslib/2.1.0:
+    resolution: {integrity: sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==}
+    dev: true
+
+  /tslib/2.3.1:
+    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
+    dev: true
+
   /tsutils/3.21.0_typescript@4.5.2:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -2203,6 +2496,16 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /type-fest/0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+    dev: true
+
+  /type-fest/1.4.0:
+    resolution: {integrity: sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==}
+    engines: {node: '>=10'}
+    dev: true
+
   /typedarray-to-buffer/3.1.5:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
     dependencies:
@@ -2226,6 +2529,11 @@ packages:
       crypto-random-string: 2.0.0
     dev: true
 
+  /universalify/2.0.0:
+    resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==}
+    engines: {node: '>= 10.0.0'}
+    dev: true
+
   /update-notifier/5.1.0:
     resolution: {integrity: sha512-ItnICHbeMh9GqUy31hFPrD1kcuZ3rpxDZbf4KUDavXwS0bW5m7SLbDQpGX3UYr072cbrF5hFUs3r5tUsPwjfHw==}
     engines: {node: '>=10'}
@@ -2280,6 +2588,12 @@ packages:
       graceful-fs: 4.2.8
     dev: true
 
+  /wcwidth/1.0.1:
+    resolution: {integrity: sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=}
+    dependencies:
+      defaults: 1.0.3
+    dev: true
+
   /webpack-cli/4.9.1_webpack@5.64.4:
     resolution: {integrity: sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==}
     engines: {node: '>=10.13.0'}
diff --git a/src/index.ts b/src/index.ts
index 4df0615..6f4c6ef 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,6 @@
-import 'bootstrap'
-import 'bootstrap/dist/css/bootstrap.min.css'
-
+import './resources/theme.css'
 export * from './Test.component.js'
 export * from './layout/Page.component.js'
 export * from './layout/Section.component.js'
+export * from './layout/Modal.component.js'
 export * from './nav/NavBar.component.js'
diff --git a/src/layout/Modal.component.ts b/src/layout/Modal.component.ts
new file mode 100644
index 0000000..6d62f7e
--- /dev/null
+++ b/src/layout/Modal.component.ts
@@ -0,0 +1,122 @@
+import {ExComponent} from '../ExComponent.js'
+import {Attribute, Component, Element, Renders} from '../decorators.js'
+
+@Component('ex-modal')
+export class ModalComponent extends ExComponent {
+    protected static html = `
+        <style>
+            :root {
+                display: none;
+            }
+
+            .container {
+                --modal-color: var(--color-accent);
+                top: 0;
+                left: 0;
+                width: 100vw;
+                height: 100vh;
+                z-index: 2000;
+                position: fixed;
+                background-color: rgba(0, 0, 0, 0.7);
+                padding-top: 2%;
+            }
+
+            .ex-modal {
+                width: 95vw;
+                max-height: min(90vh, 700px);
+                max-width: 600px;
+                position: relative;
+                overflow: hidden;
+                border-radius: 7px;
+                margin: 0 auto;
+                background-color: var(--color-background);
+                display: flex;
+                flex-direction: column;
+            }
+
+            .ex-modal header {
+                min-height: 40px;
+                height: 40px;
+                color: var(--color-text);
+                background-color: var(--color-background-darkened);
+                display: grid;
+                padding-left: 14px;
+                align-items: center;
+                grid-template-columns: auto 40px;
+            }
+
+            .ex-modal header h4 {
+                margin: 0;
+                text-align: left;
+            }
+
+            .ex-modal header span {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
+                width: 100%;
+                font-size: 20px;
+                opacity: 0.8;
+                cursor: pointer;
+            }
+
+            .ex-modal header span:hover {
+                opacity: 1;
+            }
+
+            .ex-modal .main {
+                flex: 1;
+                text-align: left;
+                overflow: auto;
+                padding: 14px;
+            }
+
+            .ex-modal footer {
+                height: auto;
+                text-align: right;
+                padding: 14px;
+                background-color: var(--color-background-darkened);
+            }
+
+            .ex-modal footer button, .ex-modal footer input {
+                margin: 0;
+            }
+
+            .ex-modal footer button:not(:last-child), .ex-modal footer input:not(:last-child) {
+                margin-right: 14px;
+            }
+        </style>
+        
+        <div class="container">
+            <div class="ex-modal" tabindex="0">
+                <header>
+                    <h4 class="modal-title"></h4>
+                    <span>&#10006;</span>
+                </header>
+                <div class="main">
+                    <slot></slot>
+                </div>
+                <footer>
+                    <slot name="footer"></slot>
+                </footer>
+            </div>
+        </div>
+    `
+
+    @Attribute()
+    public header = ''
+
+    @Renders()
+    public shown = false
+
+    @Element('h4.modal-title')
+    protected headerEl!: HTMLHeadingElement
+
+    render(): void {
+        super.render()
+
+        this.headerEl.innerText = this.header
+        this.style.display = this.shown ? 'unset' : 'none'
+    }
+}
diff --git a/src/nav/NavBar.component.ts b/src/nav/NavBar.component.ts
index 2669864..ad28c4d 100644
--- a/src/nav/NavBar.component.ts
+++ b/src/nav/NavBar.component.ts
@@ -36,7 +36,7 @@ export class NavBarComponent extends ExComponent {
             }
 
             li:hover {
-                background: #eeeeee;
+                background: var(--color-background-darkened);
             }
 
             li a {
@@ -44,7 +44,11 @@ export class NavBarComponent extends ExComponent {
                 text-align: center;
                 padding: 16px 10px;
                 text-decoration: none;
-                /*color: black;*/
+                color: var(--color-accent-text);
+            }
+
+            li a:visited {
+                color: var(--color-accent-text);
             }
 
             span.appName {
diff --git a/src/resources/theme.css b/src/resources/theme.css
new file mode 100644
index 0000000..31fa97f
--- /dev/null
+++ b/src/resources/theme.css
@@ -0,0 +1,325 @@
+:root {
+    --default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    --color-background: #f9f9f9;
+    --color-background-darkened: #f0f0f0;
+    --color-text: #333333;
+    --color-text-darkened: #2d2d2d;
+    --color-accent: #2E5252;
+    --color-accent-hover: #437777;
+    --color-accent-darkened: #2a4b4b;
+    --color-text-on-accent: var(--color-background);
+    --color-accent-text: var(--color-accent);
+
+    --color-primary: var(--color-accent);
+    --text-primary: var(--color-text);
+    --color-secondary: var(--color-text);
+    --color-secondary-darkened: var(--color-text-darkened);
+    --text-secondary: var(--color-background);
+    --color-success: #28a745;
+    --color-success-darkened: #189735;
+    --color-success-darkened-2: #139230;
+    --color-warning: #ffc107;
+    --color-warning-darkened: #efb100;
+    --color-warning-darkened-2: #e9ac00;
+    --color-danger: #dc3545;
+    --color-danger-darkened: #cc2535;
+    --color-danger-darkened-2: #c72030;
+}
+
+@media(prefers-color-scheme: dark) {
+    :root {
+        --color-background: #333333;
+        --color-background-darkened: #2d2d2d;
+        --color-text: #f9f9f9;
+        --color-text-darkened: #f0f0f0;
+        --color-accent-text: #5e9b9b;
+        --color-text-on-accent: var(--color-text);
+        --color-accent-hover: #2E5252;
+        --color-accent-darkened: #3b6969;
+    }
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: var(--default-font);
+    background-color: var(--color-background);
+    color: var(--color-text);
+    font-size: 1.1em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--default-font);
+    font-weight: bold;
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+h1 { font-size: 2.35em }
+h2 { font-size: 2.00em }
+h3 { font-size: 1.75em }
+h4 { font-size: 1.5em }
+h5 { font-size: 1.25em }
+h6 { font-size: 1.1em }
+
+p {
+    line-height: 1.35;
+}
+
+small, sub, sup {
+    font-size: 75%;
+}
+
+hr {
+    border-color: var(--color-accent);
+}
+
+a {
+    text-decoration: none;
+    color: var(--color-accent-text);
+}
+
+a:hover {
+    color: var(--color-accent-hover);
+    border-bottom: 2px solid var(--color-text);
+}
+
+a:visited {
+    color: var(--color-accent-text);
+}
+
+ul {
+    padding-left: 1.4em;
+    margin-top: 0;
+    margin-bottom: 2.5rem;
+}
+
+li {
+    margin-bottom: 0.4em;
+}
+
+blockquote {
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 1em;
+    padding-top: 0.8em;
+    padding-bottom: 0.8em;
+    padding-right: 0.8em;
+    border-left: 5px solid var(--color-accent);
+    margin-bottom: 2.5rem;
+    background-color: var(--color-background-darkened);
+    line-height: 1.35;
+    border-radius: 7px;
+}
+
+blockquote.ex-success {
+    border-left: 5px solid var(--color-success);
+    color: var(--color-success);
+}
+
+blockquote.ex-warning {
+    border-left: 5px solid var(--color-warning);
+    color: var(--color-warning);
+}
+
+blockquote.ex-danger {
+    border-left: 5px solid var(--color-danger);
+    color: var(--color-danger);
+}
+
+blockquote p {
+    margin-bottom: 0;
+}
+
+img, video {
+    height: auto;
+    max-width: 100%;
+    margin-top: 0;
+    margin-bottom: 2.5rem;
+}
+
+pre {
+    background-color: var(--color-background-darkened);
+    display: block;
+    padding: 1em;
+    overflow-x: auto;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    border-radius: 7px;
+}
+
+code {
+    font-size: 1.1em;
+    padding: 0 0.5em;
+    background-color: var(--color-background-darkened);
+    border-radius: 7px;
+    white-space: pre-wrap;
+}
+
+pre > code {
+    padding: 0;
+    background-color: transparent;
+    white-space: pre;
+}
+
+table {
+    text-align: justify;
+    width: 100%;
+    border-collapse: collapse;
+}
+
+td, th {
+    padding: 0.5em;
+    border-bottom: 1px solid var(--color-background-darkened);
+}
+
+th {
+    background-color: var(--color-background-darkened);
+}
+
+input, textarea {
+    border: 1px solid var(--color-text);
+    width: 100%;
+}
+
+input:focus, textarea:focus {
+    border: 1px solid var(--color-accent);
+}
+
+textarea {
+    width: 100%;
+}
+
+.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
+    display: inline-block;
+    padding: 7px 12px;
+    text-align: center;
+    text-decoration: none;
+    white-space: nowrap;
+
+    background-color: var(--color-accent);
+    color: var(--color-text-on-accent);
+    border: 1px solid var(--color-accent-darkened);
+    cursor: pointer;
+    box-sizing: border-box;
+    border-radius: 7px;
+
+    transition: background-color 0.1s linear;
+    width: unset;
+}
+
+.button.ex-secondary, button.ex-secondary, input[type="submit"].ex-secondary, input[type="reset"].ex-secondary, input[type="button"].ex-secondary {
+    background-color: var(--color-secondary);
+    border-color: var(--color-secondary-darkened);
+    color: var(--color-background);
+}
+
+.button.ex-success, button.ex-success, input[type="submit"].ex-success, input[type="reset"].ex-success, input[type="button"].ex-success {
+    background-color: var(--color-success);
+    border-color: var(--color-success-darkened);
+}
+
+.button.ex-warning, button.ex-warning, input[type="submit"].ex-warning, input[type="reset"].ex-warning, input[type="button"].ex-warning {
+    background-color: var(--color-warning);
+    border-color: var(--color-warning-darkened);
+}
+
+.button.ex-danger, button.ex-danger, input[type="submit"].ex-danger, input[type="reset"].ex-danger, input[type="button"].ex-danger {
+    background-color: var(--color-danger);
+    border-color: var(--color-danger-darkened);
+}
+
+@media(prefers-color-scheme: dark) {
+    .button.ex-success, button.ex-success, input[type="submit"].ex-success, input[type="reset"].ex-success, input[type="button"].ex-success {
+        color: var(--color-text);
+    }
+
+    .button.ex-warning, button.ex-warning, input[type="submit"].ex-warning, input[type="reset"].ex-warning, input[type="button"].ex-warning {
+        color: var(--color-text);
+    }
+
+    .button.ex-danger, button.ex-danger, input[type="submit"].ex-danger, input[type="reset"].ex-danger, input[type="button"].ex-danger {
+        color: var(--color-text);
+    }
+}
+
+.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
+    cursor: default;
+    opacity: .5;
+}
+
+.button:focus:enabled, button:focus:enabled, input[type="submit"]:focus:enabled, input[type="reset"]:focus:enabled, input[type="button"]:focus:enabled,
+.button:hover:enabled, button:hover:enabled, input[type="submit"]:hover:enabled, input[type="reset"]:hover:enabled, input[type="button"]:hover:enabled {
+    background-color: var(--color-accent-darkened);
+    border-color: var(--color-accent-darkened);
+    color: var(--color-text-on-accent);
+    outline: 0;
+}
+
+.button.ex-secondary:focus:enabled, button.ex-secondary:focus:enabled, input.ex-secondary[type="submit"]:focus:enabled, input.ex-secondary[type="reset"]:focus:enabled, input.ex-secondary[type="button"]:focus:enabled,
+.button.ex-secondary:hover:enabled, button.ex-secondary:hover:enabled, input.ex-secondary[type="submit"]:hover:enabled, input.ex-secondary[type="reset"]:hover:enabled, input.ex-secondary[type="button"]:hover:enabled {
+    background-color: var(--color-secondary-darkened);
+    border-color: var(--color-secondary-darkened);
+    color: var(--color-background-darkened);
+    outline: 0;
+}
+
+.button.ex-success:focus:enabled, button.ex-success:focus:enabled, input.ex-success[type="submit"]:focus:enabled, input.ex-success[type="reset"]:focus:enabled, input.ex-success[type="button"]:focus:enabled,
+.button.ex-success:hover:enabled, button.ex-success:hover:enabled, input.ex-success[type="submit"]:hover:enabled, input.ex-success[type="reset"]:hover:enabled, input.ex-success[type="button"]:hover:enabled {
+    background-color: var(--color-success-darkened);
+    border-color: var(--color-success-darkened);
+    color: var(--color-background-darkened);
+    outline: 0;
+}
+
+.button.ex-warning:focus:enabled, button.ex-warning:focus:enabled, input.ex-warning[type="submit"]:focus:enabled, input.ex-warning[type="reset"]:focus:enabled, input.ex-warning[type="button"]:focus:enabled,
+.button.ex-warning:hover:enabled, button.ex-warning:hover:enabled, input.ex-warning[type="submit"]:hover:enabled, input.ex-warning[type="reset"]:hover:enabled, input.ex-warning[type="button"]:hover:enabled {
+    background-color: var(--color-warning-darkened);
+    border-color: var(--color-warning-darkened);
+    color: var(--color-background-darkened);
+    outline: 0;
+}
+
+.button.ex-danger:focus:enabled, button.ex-danger:focus:enabled, input.ex-danger[type="submit"]:focus:enabled, input.ex-danger[type="reset"]:focus:enabled, input.ex-danger[type="button"]:focus:enabled,
+.button.ex-danger:hover:enabled, button.ex-danger:hover:enabled, input.ex-danger[type="submit"]:hover:enabled, input.ex-danger[type="reset"]:hover:enabled, input.ex-danger[type="button"]:hover:enabled {
+    background-color: var(--color-danger-darkened);
+    border-color: var(--color-danger-darkened);
+    color: var(--color-background-darkened);
+    outline: 0;
+}
+
+textarea, select, input {
+    color: var(--color-text);
+    padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
+    margin-bottom: 10px;
+    background-color: var(--color-background-darkened);
+    border: 1px solid var(--color-background-darkened);
+    border-radius: 4px;
+    box-shadow: none;
+    box-sizing: border-box;
+    font-size: 1.0em;
+}
+
+input[type="checkbox"] {
+    width: 20px;
+    height: 20px;
+    color: var(--color-accent-text);
+}
+
+textarea:focus, select:focus, input:focus {
+    border: 1px solid var(--color-accent);
+    outline: 0;
+}
+
+input[type="checkbox"]:focus {
+    outline: 1px dotted var(--color-accent);
+}
+
+label, legend, fieldset {
+    display: block;
+    margin-bottom: .5rem;
+    font-weight: 600;
+}
