diff --git a/Docs/docfx.json b/Docs/docfx.json
index e4ad8f0..2711df0 100644
--- a/Docs/docfx.json
+++ b/Docs/docfx.json
@@ -4,48 +4,35 @@
     {
       "src": [
         {
-          "src": ".././",
+          "src": "../CapyKit",
           "files": [
-            "**/*.csproj"
+            "CapyKit.csproj"
           ]
         }
       ],
-      "dest": "api",
-      "properties": {
-        "TargetFramework": "net8.0"
-      }
+      "dest": "api"
     }
   ],
   "build": {
     "content": [
       {
         "files": [
-          "toc.yml",
-          "index.md",
-          "introduction.md",
-          "getting-started.md",
-          "api/*.yml",
-          "api/toc.yml"
+          "**/*.{md,yml}"
         ],
         "exclude": [
-          "_site/**"
-        ]
-      }
-    ],
-    "resource": [
-      {
-        "files": [
-          "images/**"
+          "_site/**",
+          "material/**"
         ]
       }
     ],
     "output": "_site",
     "template": [
       "default",
-      "templates/discordfx"
+      "modern",
+      "material/material"
     ],
     "globalMetadata": {
-      "_appName": "CapyKit Documentation",
+      "_appName": "CapyKit",
       "_appTitle": "CapyKit Documentation",
       "_enableSearch": true,
       "pdf": false
diff --git a/Docs/material/LICENSE b/Docs/material/LICENSE
new file mode 100644
index 0000000..4576c42
--- /dev/null
+++ b/Docs/material/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Oscar Vásquez
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/Docs/material/material/public/main.css b/Docs/material/material/public/main.css
new file mode 100644
index 0000000..06fd6a7
--- /dev/null
+++ b/Docs/material/material/public/main.css
@@ -0,0 +1,182 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');
+
+:root {
+  --bs-font-sans-serif: 'Roboto';
+  --bs-border-radius: 10px;
+
+  --border-radius-button: 40px;
+  --card-box-shadow: 0 1px 2px 0 #3d41440f, 0 1px 3px 1px #3d414429;
+
+  --material-yellow-light: #e6dfbf;
+  --material-yellow-dark: #5a5338;
+
+  --material-blue-light: #c4d9f1;
+  --material-blue-dark: #383e5a;
+
+  --material-red-light: #f1c4c4;
+  --material-red-dark: #5a3838;
+
+  --material-warning-header: #f57f171a;
+  --material-warning-background: #f6e8bd;
+  --material-warning-background-dark: #57502c;
+
+  --material-info-header: #1976d21a;
+  --material-info-background: #e3f2fd;
+  --material-info-background-dark: #2c4557;
+
+  --material-danger-header: #d32f2f1a;
+  --material-danger-background: #ffebee;
+  --material-danger-background-dark: #572c2c;
+}
+
+/* HEADINGS */
+
+h1 {
+  font-weight: 600;
+  font-size: 32px;
+}
+
+h2 {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 1.8;
+}
+
+h3 {
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 1.8;
+}
+
+h5 {
+  font-size: 14px;
+  padding: 10px 0px;
+}
+
+article h2,
+article h3,
+article h4 {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+
+article h4 {
+  padding-bottom: 8px;
+  border-bottom: 2px solid #ddd;
+}
+
+/** IMAGES **/
+img {
+  border-radius: var(--bs-border-radius);
+  box-shadow: var(--card-box-shadow);
+}
+
+/** NAVBAR **/
+.navbar-brand > img {
+  box-shadow: none;
+  color: var(--bs-nav-link-color);
+}
+
+[data-bs-theme='light'] nav.navbar {
+  background-color: var(--bs-primary-bg-subtle);
+}
+
+[data-bs-theme='dark'] nav.navbar {
+  background-color: var(--bs-tertiary-bg);
+}
+
+.navbar-nav > li > a {
+  border-radius: var(--border-radius-button);
+  transition: 200ms;
+}
+
+.navbar-nav a.nav-link:focus,
+.navbar-nav a.nav-link:hover {
+  background-color: var(--bs-primary-border-subtle);
+}
+
+.navbar-nav .nav-link.active,
+.navbar-nav .nav-link.show {
+  color: var(--bs-link-hover-color);
+}
+
+/** SEARCH AND FILTER **/
+input.form-control {
+  border-radius: var(--border-radius-button);
+}
+
+form.filter {
+  margin: 0.3rem;
+}
+
+/** ALERTS **/
+.alert {
+  padding: 0;
+  border: none;
+  box-shadow: var(--card-box-shadow);
+}
+
+.alert > p {
+  padding: 0.2rem 0.7rem 0.7rem 1rem;
+}
+
+.alert > ul {
+  margin-bottom: 0;
+  padding: 5px 40px;
+}
+
+.alert > h5 {
+  padding: 0.5rem 0.7rem 0.7rem 1rem;
+  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
+  font-weight: bold;
+  text-transform: capitalize;
+}
+
+.alert-info {
+  color: var(--material-blue-dark);
+  background-color: var(--material-info-background);
+}
+
+[data-bs-theme='dark'] .alert-info {
+  color: var(--material-blue-light);
+  background-color: var(--material-info-background-dark);
+}
+
+.alert-info > h5 {
+  background-color: var(--material-info-header);
+}
+
+.alert-warning {
+  color: var(--material-yellow-dark);
+  background-color: var(--material-warning-background);
+}
+
+[data-bs-theme='dark'] .alert-warning {
+  color: var(--material-yellow-light);
+  background-color: var(--material-warning-background-dark);
+}
+
+.alert-warning > h5 {
+  background-color: var(--material-warning-header);
+}
+
+.alert-danger {
+  color: var(--material-red-dark);
+  background-color: var(--material-danger-background);
+}
+
+[data-bs-theme='dark'] .alert-danger {
+  color: var(--material-red-light);
+  background-color: var(--material-danger-background-dark);
+}
+
+.alert-danger > h5 {
+  background-color: var(--material-danger-header);
+}
+
+/* CODE HIGHLIGHT */
+code {
+  border-radius: var(--bs-border-radius);
+  margin: 4px 2px;
+  box-shadow: var(--card-box-shadow);
+}
diff --git a/Docs/templates/discordfx/layout/_master.tmpl b/Docs/templates/discordfx/layout/_master.tmpl
deleted file mode 100644
index c8cbf7b..0000000
--- a/Docs/templates/discordfx/layout/_master.tmpl
+++ /dev/null
@@ -1,52 +0,0 @@
-{{!Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license.}}
-{{!include(/^styles/.*/)}}
-{{!include(/^fonts/.*/)}}
-{{!include(favicon.ico)}}
-{{!include(logo.svg)}}
-{{!include(search-stopwords.json)}}
-<!DOCTYPE html>
-<!--[if IE]><![endif]-->
-<html {{#_lang}}lang="{{_lang}}"{{/_lang}}>
-  {{>partials/head}}
-  {{^redirect_url}}
-  <body data-spy="scroll" data-target="#affix" data-offset="120">
-    <div id="wrapper">
-      <header>
-        {{^_disableNavbar}}
-        {{>partials/navbar}}
-        {{/_disableNavbar}}
-        {{^_disableBreadcrumb}}
-        {{>partials/breadcrumb}}
-        {{/_disableBreadcrumb}}
-      </header>
-      {{#_enableSearch}}
-      <div class="container body-content">
-        {{>partials/searchResults}}
-      </div>
-      {{/_enableSearch}}
-      <div role="main" class="container body-content hide-when-search">
-        {{>partials/toc}}
-        <div class="article row grid-right">
-          {{#_disableAffix}}
-          <div class="col-md-12">
-          {{/_disableAffix}}
-          {{^_disableAffix}}
-          <div class="col-md-10">
-          {{/_disableAffix}}
-            <article class="content wrap" id="_content" data-uid="{{uid}}">
-                {{!body}}
-            </article>
-          </div>
-          {{^_disableAffix}}
-          {{>partials/affix}}
-          {{/_disableAffix}}
-        </div>
-      </div>
-      {{^_disableFooter}}
-      {{>partials/footer}}
-      {{/_disableFooter}}
-    </div>
-    {{>partials/scripts}}
-  </body>
-  {{/redirect_url}}
-</html>
diff --git a/Docs/templates/discordfx/partials/class.header.tmpl.partial b/Docs/templates/discordfx/partials/class.header.tmpl.partial
deleted file mode 100755
index aaa1160..0000000
--- a/Docs/templates/discordfx/partials/class.header.tmpl.partial
+++ /dev/null
@@ -1,104 +0,0 @@
-{{!Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license.}}
-
-<h1 id="{{id}}" data-uid="{{uid}}" class="text-break">{{>partials/title}}</h1>
-<div class="markdown level0 summary">{{{summary}}}</div>
-<div class="markdown level0 conceptual">{{{conceptual}}}</div>
-{{#inClass}}
-<div class="inheritance">
-  <h5>{{__global.inheritance}}</h5>
-  {{#inheritance}}
-  <div class="level{{index}}">{{{specName.0.value}}}</div>
-  {{/inheritance}}
-  <div class="level{{level}}"><span class="xref">{{name.0.value}}</span></div>
-  {{#derivedClasses}}
-    <div class="level{{index}}">{{{specName.0.value}}}</div>
-  {{/derivedClasses}}
-</div>
-{{/inClass}}
-{{#implements.0}}
-<div class="implements">
-  <h5>{{__global.implements}}</h5>
-{{/implements.0}}
-{{#implements}}
-  <div>{{{specName.0.value}}}</div>
-{{/implements}}
-{{#implements.0}}
-</div>
-{{/implements.0}}
-<h6><strong>{{__global.namespace}}</strong>: {{{namespace.specName.0.value}}}</h6>
-<h6><strong>{{__global.assembly}}</strong>: {{assemblies.0}}.dll</h6>
-<h5 id="{{id}}_syntax">{{__global.syntax}}</h5>
-<div class="codewrapper">
-  <pre><code class="lang-csharp hljs">{{syntax.content.0.value}}</code></pre>
-</div>
-{{#syntax.parameters.0}}
-<h5 class="parameters">{{__global.parameters}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.type}}</th>
-      <th>{{__global.name}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-{{/syntax.parameters.0}}
-{{#syntax.parameters}}
-    <tr>
-      <td>{{{type.specName.0.value}}}</td>
-      <td><span class="parametername">{{{id}}}</span></td>
-      <td>{{{description}}}</td>
-    </tr>
-{{/syntax.parameters}}
-{{#syntax.parameters.0}}
-  </tbody>
-</table>
-{{/syntax.parameters.0}}
-{{#syntax.return}}
-<h5 class="returns">{{__global.returns}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.type}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{{type.specName.0.value}}}</td>
-      <td>{{{description}}}</td>
-    </tr>
-  </tbody>
-</table>
-{{/syntax.return}}
-{{#syntax.typeParameters.0}}
-<h5 class="typeParameters">{{__global.typeParameters}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.name}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-{{/syntax.typeParameters.0}}
-{{#syntax.typeParameters}}
-    <tr>
-      <td><span class="parametername">{{{id}}}</span></td>
-      <td>{{{description}}}</td>
-    </tr>
-{{/syntax.typeParameters}}
-{{#syntax.typeParameters.0}}
-  </tbody>
-</table>
-{{/syntax.typeParameters.0}}
-{{#remarks}}
-<h5 id="{{id}}_remarks"><strong>{{__global.remarks}}</strong></h5>
-<div class="markdown level0 remarks">{{{remarks}}}</div>
-{{/remarks}}
-{{#example.0}}
-<h5 id="{{id}}_examples"><strong>{{__global.examples}}</strong></h5>
-{{/example.0}}
-{{#example}}
-{{{.}}}
-{{/example}}
diff --git a/Docs/templates/discordfx/partials/class.memberpage.tmpl.partial b/Docs/templates/discordfx/partials/class.memberpage.tmpl.partial
deleted file mode 100755
index 7302d6f..0000000
--- a/Docs/templates/discordfx/partials/class.memberpage.tmpl.partial
+++ /dev/null
@@ -1,46 +0,0 @@
-{{!Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license.}}
-
-{{>partials/class.header}}
-{{#children}}
-{{#overload}}
-<a id="{{id}}" data-uid="{{uid}}"></a>
-{{/overload}}
-<h3 id="{{id}}">{{>partials/classSubtitle}}</h3>
-{{#children.0}}
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.name}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-  {{/children.0}}
-    {{#children}}
-    <tr>
-      <td id="{{id}}" data-uid="{{uid}}">
-        <xref uid="{{uid}}" altProperty="fullName" displayProperty="name"/>
-      </td>
-      <td class="markdown level1 summary">{{{summary}}}</td>
-    </tr>
-    {{/children}}
-  {{#children.0}}
-  </tbody>
-</table>
-{{/children.0}}
-{{/children}}
-{{#seealso.0}}
-<h3 id="seealso">{{__global.seealso}}</h3>
-<div class="seealso">
-{{/seealso.0}}
-{{#seealso}}
-  {{#isCref}}
-    <div>{{{type.specName.0.value}}}</div>
-  {{/isCref}}
-  {{^isCref}}
-    <div>{{{url}}}</div>
-  {{/isCref}}
-{{/seealso}}
-{{#seealso.0}}
-</div>
-{{/seealso.0}}
diff --git a/Docs/templates/discordfx/partials/class.tmpl.partial b/Docs/templates/discordfx/partials/class.tmpl.partial
deleted file mode 100755
index 034dd6c..0000000
--- a/Docs/templates/discordfx/partials/class.tmpl.partial
+++ /dev/null
@@ -1,221 +0,0 @@
-{{!Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license.}}
-
-{{>partials/class.header}}
-{{#children}}
-<h3 id="{{id}}">{{>partials/classSubtitle}}</h3>
-{{#children}}
-{{^_disableContribution}}
-{{#docurl}}
-<span class="small pull-right mobile-hide">
-  <span class="divider">|</span>
-  <a href="{{docurl}}">{{__global.improveThisDoc}}</a>
-</span>{{/docurl}}
-{{#sourceurl}}
-<span class="small pull-right mobile-hide">
-  <a href="{{sourceurl}}">{{__global.viewSource}}</a>
-</span>{{/sourceurl}}
-{{/_disableContribution}}
-{{#overload}}
-<a id="{{id}}" data-uid="{{uid}}"></a>
-{{/overload}}
-<h4 id="{{id}}" data-uid="{{uid}}">{{name.0.value}}</h4>
-<div class="markdown level1 summary">{{{summary}}}</div>
-<div class="markdown level1 conceptual">{{{conceptual}}}</div>
-<h5 class="declaration">{{__global.declaration}}</h5>
-{{#syntax}}
-<div class="codewrapper">
-  <pre><code class="lang-csharp hljs">{{syntax.content.0.value}}</code></pre>
-</div>
-{{#parameters.0}}
-<h5 class="parameters">{{__global.parameters}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.type}}</th>
-      <th>{{__global.name}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-{{/parameters.0}}
-{{#parameters}}
-    <tr>
-      <td>{{{type.specName.0.value}}}</td>
-      <td><span class="parametername">{{{id}}}</span></td>
-      <td>{{{description}}}</td>
-    </tr>
-{{/parameters}}
-{{#parameters.0}}
-  </tbody>
-</table>
-{{/parameters.0}}
-{{#return}}
-<h5 class="returns">{{__global.returns}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.type}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{{type.specName.0.value}}}</td>
-      <td>{{{description}}}</td>
-    </tr>
-  </tbody>
-</table>
-{{/return}}
-{{#typeParameters.0}}
-<h5 class="typeParameters">{{__global.typeParameters}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.name}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-{{/typeParameters.0}}
-{{#typeParameters}}
-    <tr>
-      <td><span class="parametername">{{{id}}}</span></td>
-      <td>{{{description}}}</td>
-    </tr>
-{{/typeParameters}}
-{{#typeParameters.0}}
-  </tbody>
-</table>
-{{/typeParameters.0}}
-{{#fieldValue}}
-<h5 class="fieldValue">{{__global.fieldValue}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.type}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{{type.specName.0.value}}}</td>
-      <td>{{{description}}}</td>
-    </tr>
-  </tbody>
-</table>
-{{/fieldValue}}
-{{#propertyValue}}
-<h5 class="propertyValue">{{__global.propertyValue}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.type}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{{type.specName.0.value}}}</td>
-      <td>{{{description}}}</td>
-    </tr>
-  </tbody>
-</table>
-{{/propertyValue}}
-{{#eventType}}
-<h5 class="eventType">{{__global.eventType}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.type}}</th>
-      <th>{{__global.description}}</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{{type.specName.0.value}}}</td>
-      <td>{{{description}}}</td>
-    </tr>
-  </tbody>
-</table>
-{{/eventType}}
-{{/syntax}}
-{{#overridden}}
-<h5 class="overrides">{{__global.overrides}}</h5>
-<div><xref uid="{{uid}}" altProperty="fullName" displayProperty="nameWithType"/></div>
-{{/overridden}}
-{{#remarks}}
-<h5 id="{{id}}_remarks">{{__global.remarks}}</h5>
-<div class="markdown level1 remarks">{{{remarks}}}</div>
-{{/remarks}}
-{{#example.0}}
-<h5 id="{{id}}_examples">{{__global.examples}}</h5>
-{{/example.0}}
-{{#example}}
-{{{.}}}
-{{/example}}
-{{#exceptions.0}}
-<h5 class="exceptions">{{__global.exceptions}}</h5>
-<table class="table table-bordered table-condensed">
-  <thead>
-    <tr>
-      <th>{{__global.type}}</th>
-      <th>{{__global.condition}}</th>
-    </tr>
-  </thead>
-  <tbody>
-{{/exceptions.0}}
-{{#exceptions}}
-    <tr>
-      <td>{{{type.specName.0.value}}}</td>
-      <td>{{{description}}}</td>
-    </tr>
-{{/exceptions}}
-{{#exceptions.0}}
-  </tbody>
-</table>
-{{/exceptions.0}}
-{{#seealso.0}}
-<h5 id="{{id}}_seealso">{{__global.seealso}}</h5>
-<div class="seealso">
-{{/seealso.0}}
-{{#seealso}}
-  {{#isCref}}
-    <div>{{{type.specName.0.value}}}</div>
-  {{/isCref}}
-  {{^isCref}}
-    <div>{{{url}}}</div>
-  {{/isCref}}
-{{/seealso}}
-{{#seealso.0}}
-</div>
-{{/seealso.0}}
-{{/children}}
-{{/children}}
-{{#implements.0}}
-<h3 id="implements">{{__global.implements}}</h3>
-{{/implements.0}}
-{{#implements}}
-<div>
-  {{#definition}}
-    <xref uid="{{definition}}" altProperty="fullName" displayProperty="nameWithType"/>
-  {{/definition}}
-  {{^definition}}
-    <xref uid="{{uid}}" altProperty="fullName" displayProperty="nameWithType"/>
-  {{/definition}}
-</div>
-{{/implements}}
-{{#seealso.0}}
-<h3 id="seealso">{{__global.seealso}}</h3>
-<div class="seealso">
-{{/seealso.0}}
-{{#seealso}}
-  {{#isCref}}
-    <div>{{{type.specName.0.value}}}</div>
-  {{/isCref}}
-  {{^isCref}}
-    <div>{{{url}}}</div>
-  {{/isCref}}
-{{/seealso}}
-{{#seealso.0}}
-</div>
-{{/seealso.0}}
diff --git a/Docs/templates/discordfx/styles/main.css b/Docs/templates/discordfx/styles/main.css
deleted file mode 100644
index 9a82142..0000000
--- a/Docs/templates/discordfx/styles/main.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.sidenav {
-  position: sticky;
-  top: 0;
-  max-height: 100vh;
-}
-
-.sidetoc {
-  height: 100vh;
-}
-
-.inheritedMembers,
-.extensionMethods {
-  display: none;
-}
-
-.content.wrap h1,
-.content.wrap h2,
-.content.wrap h3,
-.content.wrap h4 {
-  scroll-margin-top: 80px;
-}
diff --git a/Docs/toc.yml b/Docs/toc.yml
index 099d393..0c76820 100644
--- a/Docs/toc.yml
+++ b/Docs/toc.yml
@@ -3,4 +3,4 @@
 - name: Getting Started
   href: getting-started.md
 - name: API Reference
-  href: api/toc.yml
+  href: api/