diff --git a/docs/_template/discordfx/layout/_master.tmpl b/docs/_template/discordfx/layout/_master.tmpl
new file mode 100644
index 000000000..f25a5ee9a
--- /dev/null
+++ b/docs/_template/discordfx/layout/_master.tmpl
@@ -0,0 +1,68 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+{{!include(/^styles/.*/)}}
+{{!include(/^fonts/.*/)}}
+{{!include(favicon.ico)}}
+{{!include(logo.svg)}}
+{{!include(search-stopwords.json)}}
+<!DOCTYPE html>
+<!--[if IE]><![endif]-->
+<html>
+  
+  {{>partials/head}}
+
+  <body>
+        <div class="top-navbar">
+
+            <a href="javascript:void(0);" class="burger-icon" onclick="toggleMenu()">
+                <svg name="Hamburger" 
+                    style="vertical-align: middle;"
+                    width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M20 6H4V9H20V6ZM4 10.999H20V13.999H4V10.999ZM4 15.999H20V18.999H4V15.999Z"></path></svg>
+            </a>
+
+            {{>partials/logo}}
+
+        </div>
+
+        <div class="body-content">
+
+            <div id="blackout" class="blackout" onclick="toggleMenu()"></div>
+
+            <nav id="sidebar"  role="navigation" >
+
+                <div class="sidebar">
+                    
+                    {{>partials/navbar}}
+
+                    <div class="sidebar-item-separator"></div>
+
+                    {{^_disableToc}}
+                        {{>partials/toc}}
+                    {{/_disableToc}}
+
+                </div>
+
+                {{>partials/footer}}
+
+            </nav>
+
+            <main class="main-panel">
+
+                <div role="main" class="hide-when-search" >
+
+                    {{^_disableBreadcrumb}}
+                        {{>partials/breadcrumb}}
+                    {{/_disableBreadcrumb}}
+
+                    <article class="content wrap" id="_content" data-uid="{{uid}}">
+                      {{!body}}
+                    </article>
+              
+                </div>
+            </main>
+        </div>
+
+        {{>partials/scripts}}
+
+    </body>
+
+</html>
diff --git a/docs/_template/discordfx/partials/footer.tmpl.partial b/docs/_template/discordfx/partials/footer.tmpl.partial
new file mode 100644
index 000000000..b11064114
--- /dev/null
+++ b/docs/_template/discordfx/partials/footer.tmpl.partial
@@ -0,0 +1,4 @@
+<div class="footer">
+  {{{_appFooter}}}
+  {{^_appFooter}}<span>Generated by <strong>DocFX</strong></span>{{/_appFooter}}
+</div>
\ No newline at end of file
diff --git a/docs/_template/discordfx/partials/head.tmpl.partial b/docs/_template/discordfx/partials/head.tmpl.partial
new file mode 100644
index 000000000..43a2cc77c
--- /dev/null
+++ b/docs/_template/discordfx/partials/head.tmpl.partial
@@ -0,0 +1,22 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}</title>
+  <meta name="viewport" content="width=device-width">
+  <meta name="title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}} {{#_appTitle}}| {{_appTitle}} {{/_appTitle}}">
+  <meta name="generator" content="docfx {{_docfxVersion}}">
+  {{#_description}}<meta name="description" content="{{_description}}">{{/_description}}
+  <link rel="shortcut icon" href="{{_rel}}{{{_appFaviconPath}}}{{^_appFaviconPath}}favicon.ico{{/_appFaviconPath}}">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/night-owl.min.css">
+  <link rel="stylesheet" href="{{_rel}}styles/colors.css">
+  <link rel="stylesheet" href="{{_rel}}styles/discord.css">
+  <link rel="stylesheet" href="{{_rel}}styles/main.css">
+  <meta property="docfx:navrel" content="{{_navRel}}">
+  <meta property="docfx:tocrel" content="{{_tocRel}}">
+  {{#_noindex}}<meta name="searchOption" content="noindex">{{/_noindex}}
+  {{#_enableSearch}}<meta property="docfx:rel" content="{{_rel}}">{{/_enableSearch}}
+  {{#_enableNewTab}}<meta property="docfx:newtab" content="true">{{/_enableNewTab}}
+</head>
diff --git a/docs/_template/discordfx/partials/li.tmpl.partial b/docs/_template/discordfx/partials/li.tmpl.partial
new file mode 100644
index 000000000..2c8a3d0e7
--- /dev/null
+++ b/docs/_template/discordfx/partials/li.tmpl.partial
@@ -0,0 +1,31 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<ul class="nav level{{level}}">
+  {{#items}}
+    {{^dropdown}}
+      <li>
+          {{^leaf}}
+            <span class="expand-stub"></span>
+          {{/leaf}}
+          {{#topicHref}}
+            <a href="{{topicHref}}" class="sidebar-item" name="{{tocHref}}" title="{{name}}">{{name}}</a>
+          {{/topicHref}}
+          {{^topicHref}}
+            <a>{{{name}}}</a>
+          {{/topicHref}}
+        
+        {{^leaf}}
+          {{>partials/li}}
+        {{/leaf}}
+      </li>
+    {{/dropdown}}
+    {{#dropdown}}
+      <li class="dropdown">
+        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{{name}} <span class="caret"></span></a>
+        <ul class="dropdown-menu level{{level}}">
+          {{>partials/dd-li}}
+        </ul>
+      </li>
+    {{/dropdown}}
+  {{/items}}
+</ul>
diff --git a/docs/_template/discordfx/partials/logo.tmpl.partial b/docs/_template/discordfx/partials/logo.tmpl.partial
new file mode 100644
index 000000000..738ab5b6f
--- /dev/null
+++ b/docs/_template/discordfx/partials/logo.tmpl.partial
@@ -0,0 +1,6 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<a class="brand" href="{{_rel}}index.html">
+  <img src="{{_rel}}{{{_appLogoPath}}}{{^_appLogoPath}}logo.svg{{/_appLogoPath}}" alt="{{_appName}}" class="logomark">
+  <span class="brand-title">{{_appName}}</span>
+</a>
\ No newline at end of file
diff --git a/docs/_template/discordfx/partials/navbar.tmpl.partial b/docs/_template/discordfx/partials/navbar.tmpl.partial
new file mode 100644
index 000000000..10b82d7ec
--- /dev/null
+++ b/docs/_template/discordfx/partials/navbar.tmpl.partial
@@ -0,0 +1,13 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+
+
+<div>
+  {{>partials/logo}}
+
+  <div id="navbar">
+
+  </div>
+
+</div>
+
diff --git a/docs/_template/discordfx/partials/scripts.tmpl.partial b/docs/_template/discordfx/partials/scripts.tmpl.partial
new file mode 100644
index 000000000..749cbcd78
--- /dev/null
+++ b/docs/_template/discordfx/partials/scripts.tmpl.partial
@@ -0,0 +1,11 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/jquery.twbsPagination.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/url.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/docfx.js"></script>
+<script type="text/javascript" src="{{_rel}}styles/main.js"></script>
diff --git a/docs/_template/discordfx/partials/toc.tmpl.partial b/docs/_template/discordfx/partials/toc.tmpl.partial
new file mode 100644
index 000000000..c660966b6
--- /dev/null
+++ b/docs/_template/discordfx/partials/toc.tmpl.partial
@@ -0,0 +1,5 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+<div id="sidetoggle">
+  <div id="sidetoc"></div>
+</div>
diff --git a/docs/_template/discordfx/styles/colors.css b/docs/_template/discordfx/styles/colors.css
new file mode 100644
index 000000000..63590c7eb
--- /dev/null
+++ b/docs/_template/discordfx/styles/colors.css
@@ -0,0 +1,73 @@
+/* Color schemes */
+:root 
+{
+    /* General */
+    --main-bg-color: #36393f;
+    --footer-bg-color: rgba(0,0,0,.4);
+    --table-strip-bg-color: #121315;
+    --table-header-bg-color: #202225;;
+    --table-header-color: hsla(0,0%,100%,.8);
+    --table-header-border-color: #040405;
+
+    /* Text */
+    --text-color: #dcddde;
+    --link-color: #00b0f4;
+    --link-hover-color: #4bd5ff;
+    --link-active-color: #fff;
+    --link-active-bg-color: #7289da;
+    --h3-color: #ffffff85;
+    --h4-color: #ffffffeb;
+    --h5-color: #ffffffd1;
+    
+    /* Topbar */
+    --topbar-bg-color: #18191c;
+    
+    /* Button */
+    --button-color: #747f8d;
+
+    /* Sidebar */
+    --separator-color: #4f545c;
+    --sidebar-bg-color: #2f3136;
+    --sidebar-item-color: #b9bbbe;
+    --sidebar-item-2nd-color: hsla(0,0%,100%,.35);
+    --sidebar-item-3rd-color: hsla(0,0%,100%,.25);
+
+    /* Scrollbar */
+    --scrollbar-bg-color: transparent;
+    --scrollbar-thumb-bg-color: rgba(0,0,0,.4);
+    --scrollbar-thumb-border-color: transparent;
+
+    /* Alerts and Blocks */
+    --alert-info-border-color: rgba(114,137,218,.5);
+    --alert-info-bg-color: rgba(114,137,218,.1);
+
+    --alert-warning-border-color: rgba(250,166,26,.5);
+    --alert-warning-bg-color: rgba(250,166,26,.1);
+
+    --alert-danger-border-color: rgba(240,71,71,.5);
+    --alert-danger-bg-color: rgba(240,71,71,.1);
+
+    --alert-tip-border-color: rgba(255,255,255,.5);
+    --alert-tip-bg-color: rgba(255,255,255,.1);
+
+    --blockquote-border-color: rgba(255,255,255,.5);
+    --blockquote-bg-color: rgba(255,255,255,.1);
+
+    --breadcrumb-bg-color: #2f3136;
+
+    /* Code Higlighting */
+    --code-bg-color: #18191c;
+    --code-color: #8790A3;
+    --code-keyword-color: #569cd6;
+    --code-comment-color: #57a64a;
+    --code-macro-color: #beb7ff;
+    --code-string-color: #d69d85;
+    --code-string-escape-color: #ffd68f;
+    --code-field-color: #c8c8c8;
+    --code-function-color: #dcdcaa;
+    --code-control-color: #d8a0df;
+    --code-class-color: #4ec9b0;
+    --code-number-color: #b5cea8;
+    --code-params-color: #9a9a9a;
+    --code-breakpoint-color: #8c2f2f;
+}
diff --git a/docs/_template/discordfx/styles/discord.css b/docs/_template/discordfx/styles/discord.css
new file mode 100644
index 000000000..a5a97b4f2
--- /dev/null
+++ b/docs/_template/discordfx/styles/discord.css
@@ -0,0 +1,681 @@
+/* Discord Style */
+
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--scrollbar-bg-color); 
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb-bg-color); 
+    border-color: var(--scrollbar-thumb-border-color);
+    border-radius: 5px;
+}
+
+::marker {
+    unicode-bidi: isolate;
+    font-variant-numeric: tabular-nums;
+    text-transform: none;
+    text-indent: 0px !important;
+    text-align: start !important;
+    text-align-last: start !important;
+}
+
+*, :after, :before
+{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html, body 
+{
+    padding: 0;
+    margin: 0;
+    font: 15px/150% 'Roboto', sans-serif;
+    overflow: hidden;
+    color: var(--text-color);
+    background-color: var(--main-bg-color);
+
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
+img {
+    max-width: 100%;
+}
+
+ul > li, ol > li {
+    display: list-item;
+}
+
+h1,h2,h3,h4,h5 
+{
+    color: var(--link-active-color);
+    position: relative;
+}
+
+h1, h2
+{
+    margin-block-start: 2em;
+}
+
+h3 
+{
+    margin-block-start: 1em;
+    font-weight: 300;
+    font-size: 1.5em;
+    color: var(--h3-color);
+    margin-block-start: 3em;
+}
+
+h4 
+{
+    opacity: 1;
+    color: var(--h4-color);
+    font-size: large;
+    border-bottom: 2px solid var(--separator-color);
+    margin: 20px 0 0 0;
+}
+
+
+h5 {
+    margin-block-end: .8em;
+    margin-block-start: 1em;
+    font-size: .85em;
+    font-weight: 500;
+    color: var(--h5-color);
+}
+
+h6 {
+    font-size: .75em;
+    margin: 0;
+}
+
+p 
+{
+    font-weight: 400;
+}
+
+ul 
+{
+    position: relative;
+}
+
+ul, ol 
+{
+    padding-inline-start: 3em;
+}
+
+ul.level1
+{
+    list-style-type: none;
+    padding-inline-start: 0;
+}
+
+ul.level2, ul.level3 
+{
+    padding-inline-start: 1em;
+    list-style-type: none;
+    font-size: .9em;
+}
+
+a 
+{
+    color: var(--link-color);
+    text-decoration: none;
+    transition: color .25s;
+}
+
+a:focus, a:hover 
+{
+    color: var(--link-hover-color);
+    text-decoration: underline;
+}
+
+a.anchorjs-link:hover {
+    text-decoration: none;
+}
+
+a.active, a:active
+{
+    color: var(--link-active-color);
+}
+
+.body-content 
+{
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.page-title
+{
+    margin-block-start: 0;
+}
+
+nav 
+{
+    width: 300px;
+    transition: left .5s ease-out;
+    position: fixed;
+    left: -350px;
+    top: 40px;
+    bottom: 0;
+    background-color: var(--sidebar-bg-color);
+    overflow-y: auto;
+
+    display: flex;
+    flex-direction: column;
+
+    z-index: 1000;
+}
+
+h1:first-child
+{
+    margin-block-start: 1.1em;
+    margin-top: 1.1em;
+}
+
+.sidebar
+{
+    padding: 32px 17px 32px 32px;
+    flex: 1;
+}
+
+.sidebar-item
+{
+    font-size: 1em;
+    font-weight: 400;
+    display: block;
+    padding: 4px 16px;
+    color: var(--sidebar-item-color);
+}
+
+.sidebar-item.large, #navbar .sidebar-item
+{
+    padding: 8px 16px;
+}
+
+a.sidebar-item:hover, a.sidebar-item:focus 
+{
+    color: var(--link-active-color);
+    text-decoration: none;
+}
+
+a.sidebar-item.active 
+{
+    color: var(--link-active-color);
+}
+
+ul.level1 > li > a.sidebar-item
+{
+    background-color: transparent;
+    border-radius: 4px;
+}
+
+#toc ul.level1 > li > a.sidebar-item.active
+{
+    background-color: var(--link-active-bg-color);
+}
+
+.sidebar-item-separator
+{
+    height: 2px;
+    width: 100%;
+    background-color: var(--separator-color);
+    margin: 2em 0;
+    opacity: .8;
+}
+
+span.sidebar-item
+{
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: .8em;
+    color: var(--text-color);
+    margin-block-start: 1.25em;
+}
+
+.main-panel
+{
+    background-color: var(--main-bg-color);
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 40px;
+}
+
+.top-navbar 
+{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 40px;
+    height: 40px;
+    background-color: var(--topbar-bg-color);
+}
+
+.burger-icon
+{
+    margin-right: 1em;
+    color: var(--button-color);
+}
+
+.burger-icon:hover, .burger-icon:focus
+{
+    color: var(--link-active-color);
+}
+
+.burger-icon.active, .burger-icon:active 
+{
+    color: var(--link-active-color);
+}
+
+.brand 
+{
+    display: flex;
+    align-items: center;
+    justify-content: start;
+}
+
+.logomark
+{
+    height: 28px;
+}
+
+.brand-title
+{
+    padding: 0 .5em;
+    font-size: .9em;
+    color: var(--link-active-color);
+}
+
+.footer 
+{
+    background-color: var(--footer-bg-color);
+    padding: 20px;
+    margin: 0 20px 20px 20px;
+    border-radius: 8px;
+    color: var(--link-active-color);
+}
+
+.footer > h4 
+{
+    margin-block-start: 0;
+}
+
+.blackout
+{
+    display: block;
+    visibility: hidden;
+    position: absolute;
+    z-index: 100;
+    top: 40px;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--footer-bg-color);
+}
+
+@keyframes showThat {
+    0% { opacity: 0; visibility: hidden; }
+    1% { opacity: 0; visibility: visible; }
+    100% { opacity: 1; visibility: visible;}
+}
+
+@keyframes hideThat {
+    0% { opacity: 1; visibility: visible; }
+    99% { opacity: 0; visibility: visible; }
+    100% { opacity: 0; visibility: hidden;}
+}
+
+.showThat
+{
+    animation: showThat .5s forwards;
+}
+
+.hideThat
+{
+    animation: hideThat .5s forwards;
+}
+
+
+
+@media (min-width: 1024px)
+{
+    nav
+    {
+        position: relative;
+        left: 0!important;
+        top: 0;
+        bottom: 0;
+    }
+
+    .top-navbar 
+    {
+        display: none;
+    }
+
+    .blackout
+    {
+        display: none;
+    }
+}
+
+/* Table */
+
+.table-responsive 
+{
+    overflow-x: auto;
+    margin-bottom: 64px;
+}
+
+table 
+{
+    background-color: var(--code-bg-color);
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: auto;
+}
+
+table.table-striped tbody tr:nth-child(2n)
+{
+    background-color: var(--table-strip-bg-color);
+}
+
+table thead 
+{
+    background: var(--table-header-bg-color);
+}
+
+table th 
+{
+    color: var(--table-header-color);
+    text-transform: uppercase;
+    font-size: 12px;
+    line-height: 15px;
+    border-bottom: 1px solid var(--table-header-border-color);
+    padding: 8px;
+}
+
+.table-condensed th {
+    text-align: left;
+}
+
+table td 
+{
+    padding: 8px;
+    font-weight: 300;
+}
+
+table td > p 
+{
+    margin: 0;
+}
+
+/* Alerts */
+.alert {
+    border-radius: 4px;
+    padding: 8px;
+    margin: 25px 0;
+}
+
+.alert > h5 
+{
+    display: none;
+    margin: 0;
+}
+
+.alert > p 
+{
+    margin: 0;
+    font-weight: 300;
+    font-size: 13px;
+}
+
+.alert.alert-info
+{
+    border: 2px solid var(--alert-info-border-color);
+    background: var(--alert-info-bg-color);
+}
+
+.alert.alert-warning
+{
+    border: 2px solid var(--alert-warning-border-color);
+    background: var(--alert-warning-bg-color);
+}
+
+.alert.alert-danger
+{
+    border: 2px solid var(--alert-danger-border-color);
+    background: var(--alert-danger-bg-color);
+}
+
+.TIP.alert.alert-info
+{
+    border: 2px solid var(--alert-tip-border-color);
+    background: var(--alert-tip-bg-color);
+}
+
+blockquote {
+    margin: 8px 0;
+    border-left: 4px solid var(--blockquote-border-color);
+    padding: 8px;
+    background: var(--blockquote-bg-color);
+    border-radius: 4px;
+}
+
+blockquote > p {
+    margin: 0;
+    font-style: italic;
+    font-size: 13px;
+}
+
+
+/* Breadcrumb */
+
+#breadcrumb 
+{
+    padding: 8px 16px;
+    background: var(--breadcrumb-bg-color);
+    border-radius: 4px;
+    margin-bottom: 30px;
+}
+
+#breadcrumb:empty
+{
+    display: none;
+}
+
+ul.breadcrumb 
+{
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+}
+
+ul.breadcrumb > li {
+    margin-right: 6px;
+}
+
+ul.breadcrumb > li::before
+{
+    content: "/";
+    margin-right: 5px;
+}
+
+ul.breadcrumb > li:first-child::before
+{
+    content: "";
+    margin: 0;
+}
+
+
+/* Code */
+
+legend, pre 
+{
+    display: block;
+    background-color: var(--code-bg-color);
+    padding: 16px;
+    border-radius: 4px;
+}
+
+code 
+{
+    background-color: var(--code-bg-color);
+    padding: 2px 4px;
+    border-radius: 4px;
+}
+
+.hljs 
+{
+    background: transparent;
+}
+
+/* DocFX related */
+
+.small {
+    font-size: .9em;
+}
+
+.pull-right 
+{
+    float: right;
+}
+
+.mobile-hide 
+{
+    visibility: hidden;
+}
+
+@media (min-width: 1024px) 
+{
+    .mobile-hide 
+    {
+        visibility: visible;
+    }
+}
+
+li 
+{
+    display: block;
+    position: relative;
+}
+
+.expand-stub
+{
+    cursor: pointer;
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    left: -10px;
+}
+
+ul.level1 > li > .expand-stub
+{
+    display: none;
+}
+
+.toc .nav > li > .expand-stub::before, .toc .nav > li.active > .expand-stub::before
+{
+    content: " ";
+    position: absolute;
+    transform: rotate(-90deg);
+    width: 10px;
+    height: 10px;
+    top: 5px;
+    left: 5px;
+    background-repeat: no-repeat;
+    background: url(/styles/down-arrow.svg);
+}
+
+.toc .nav > li.active > .expand-stub::before, .toc .nav > li.in > .expand-stub::before, .toc .nav > li.in.active > .expand-stub::before, .toc .nav > li.filtered > .expand-stub::before
+{
+    transform: none;
+}
+
+li > ul 
+{
+    display: none;
+}
+
+li.in > ul 
+{
+    display: block;
+}
+
+ul.level2 > li > a.sidebar-item,
+ul.level3 > li > a.sidebar-item
+{
+    font-weight: 500;
+    font-size: .95em;
+    padding: 0;
+    margin: 2px 16px;
+}
+
+ul.level2 > li > a.sidebar-item
+{
+    color: var(--sidebar-item-2nd-color);
+}
+
+ul.level3 > li > a.sidebar-item
+{
+    color: var(--sidebar-item-3rd-color);
+}
+
+ul.level2 > li > a.sidebar-item:hover,
+ul.level2 > li > a.sidebar-item:focus,
+ul.level3 > li > a.sidebar-item:hover,
+ul.level3 > li > a.sidebar-item:focus
+{
+    color: var(--link-active-color);
+    text-decoration: underline;
+}
+
+ul.level2 > li > a.sidebar-item.active,
+ul.level3 > li > a.sidebar-item.active
+{
+    color: var(--link-active-color);
+}
+
+.inheritance .level0:before,
+.inheritance .level1:before,
+.inheritance .level2:before,
+.inheritance .level3:before,
+.inheritance .level4:before,
+.inheritance .level5:before {
+    content: '↳';
+    margin-right: 5px;
+}
+
+.inheritance .level0 {
+    margin-left: 0em;
+}
+
+.inheritance .level1 {
+    margin-left: 1em;
+}
+
+.inheritance .level2 {
+    margin-left: 2em;
+}
+
+.inheritance .level3 {
+    margin-left: 3em;
+}
+
+.inheritance .level4 {
+    margin-left: 4em;
+}
+
+.inheritance .level5 {
+    margin-left: 5em;
+}
\ No newline at end of file
diff --git a/docs/_template/discordfx/styles/down-arrow.svg b/docs/_template/discordfx/styles/down-arrow.svg
new file mode 100644
index 000000000..e086126a2
--- /dev/null
+++ b/docs/_template/discordfx/styles/down-arrow.svg
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 491.996 491.996" style="enable-background:new 0 0 491.996 491.996;" xml:space="preserve">
+<g>
+	<g color="white">
+		<path d="M484.132,124.986l-16.116-16.228c-5.072-5.068-11.82-7.86-19.032-7.86c-7.208,0-13.964,2.792-19.036,7.86l-183.84,183.848
+			L62.056,108.554c-5.064-5.068-11.82-7.856-19.028-7.856s-13.968,2.788-19.036,7.856l-16.12,16.128
+			c-10.496,10.488-10.496,27.572,0,38.06l219.136,219.924c5.064,5.064,11.812,8.632,19.084,8.632h0.084
+			c7.212,0,13.96-3.572,19.024-8.632l218.932-219.328c5.072-5.064,7.856-12.016,7.864-19.224
+			C491.996,136.902,489.204,130.046,484.132,124.986z" fill="currentcolor"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/docs/_template/discordfx/styles/jquery.twbsPagination.js b/docs/_template/discordfx/styles/jquery.twbsPagination.js
new file mode 100644
index 000000000..332c01c62
--- /dev/null
+++ b/docs/_template/discordfx/styles/jquery.twbsPagination.js
@@ -0,0 +1,317 @@
+/*!
+ * jQuery pagination plugin v1.4.1
+ * http://esimakin.github.io/twbs-pagination/
+ *
+ * Copyright 2014-2016, Eugene Simakin
+ * Released under Apache 2.0 license
+ * http://apache.org/licenses/LICENSE-2.0.html
+ */
+(function ($, window, document, undefined) {
+
+    'use strict';
+
+    var old = $.fn.twbsPagination;
+
+    // PROTOTYPE AND CONSTRUCTOR
+
+    var TwbsPagination = function (element, options) {
+        this.$element = $(element);
+        this.options = $.extend({}, $.fn.twbsPagination.defaults, options);
+
+        if (this.options.startPage < 1 || this.options.startPage > this.options.totalPages) {
+            throw new Error('Start page option is incorrect');
+        }
+
+        this.options.totalPages = parseInt(this.options.totalPages);
+        if (isNaN(this.options.totalPages)) {
+            throw new Error('Total pages option is not correct!');
+        }
+
+        this.options.visiblePages = parseInt(this.options.visiblePages);
+        if (isNaN(this.options.visiblePages)) {
+            throw new Error('Visible pages option is not correct!');
+        }
+
+        if (this.options.onPageClick instanceof Function) {
+            this.$element.first().on('page', this.options.onPageClick);
+        }
+
+        // hide if only one page exists
+        if (this.options.hideOnlyOnePage && this.options.totalPages == 1) {
+            this.$element.trigger('page', 1);
+            return this;
+        }
+
+        if (this.options.totalPages < this.options.visiblePages) {
+            this.options.visiblePages = this.options.totalPages;
+        }
+
+        if (this.options.href) {
+            this.options.startPage = this.getPageFromQueryString();
+            if (!this.options.startPage) {
+                this.options.startPage = 1;
+            }
+        }
+
+        var tagName = (typeof this.$element.prop === 'function') ?
+            this.$element.prop('tagName') : this.$element.attr('tagName');
+
+        if (tagName === 'UL') {
+            this.$listContainer = this.$element;
+        } else {
+            this.$listContainer = $('<ul></ul>');
+        }
+
+        this.$listContainer.addClass(this.options.paginationClass);
+
+        if (tagName !== 'UL') {
+            this.$element.append(this.$listContainer);
+        }
+
+        if (this.options.initiateStartPageClick) {
+            this.show(this.options.startPage);
+        } else {
+            this.render(this.getPages(this.options.startPage));
+            this.setupEvents();
+        }
+
+        return this;
+    };
+
+    TwbsPagination.prototype = {
+
+        constructor: TwbsPagination,
+
+        destroy: function () {
+            this.$element.empty();
+            this.$element.removeData('twbs-pagination');
+            this.$element.off('page');
+
+            return this;
+        },
+
+        show: function (page) {
+            if (page < 1 || page > this.options.totalPages) {
+                throw new Error('Page is incorrect.');
+            }
+            this.currentPage = page;
+
+            this.render(this.getPages(page));
+            this.setupEvents();
+
+            this.$element.trigger('page', page);
+
+            return this;
+        },
+
+        buildListItems: function (pages) {
+            var listItems = [];
+
+            if (this.options.first) {
+                listItems.push(this.buildItem('first', 1));
+            }
+
+            if (this.options.prev) {
+                var prev = pages.currentPage > 1 ? pages.currentPage - 1 : this.options.loop ? this.options.totalPages  : 1;
+                listItems.push(this.buildItem('prev', prev));
+            }
+
+            for (var i = 0; i < pages.numeric.length; i++) {
+                listItems.push(this.buildItem('page', pages.numeric[i]));
+            }
+
+            if (this.options.next) {
+                var next = pages.currentPage < this.options.totalPages ? pages.currentPage + 1 : this.options.loop ? 1 : this.options.totalPages;
+                listItems.push(this.buildItem('next', next));
+            }
+
+            if (this.options.last) {
+                listItems.push(this.buildItem('last', this.options.totalPages));
+            }
+
+            return listItems;
+        },
+
+        buildItem: function (type, page) {
+            var $itemContainer = $('<li></li>'),
+                $itemContent = $('<a></a>'),
+                itemText = this.options[type] ? this.makeText(this.options[type], page) : page;
+
+            $itemContainer.addClass(this.options[type + 'Class']);
+            $itemContainer.data('page', page);
+            $itemContainer.data('page-type', type);
+            $itemContainer.append($itemContent.attr('href', this.makeHref(page)).addClass(this.options.anchorClass).html(itemText));
+
+            return $itemContainer;
+        },
+
+        getPages: function (currentPage) {
+            var pages = [];
+
+            var half = Math.floor(this.options.visiblePages / 2);
+            var start = currentPage - half + 1 - this.options.visiblePages % 2;
+            var end = currentPage + half;
+
+            // handle boundary case
+            if (start <= 0) {
+                start = 1;
+                end = this.options.visiblePages;
+            }
+            if (end > this.options.totalPages) {
+                start = this.options.totalPages - this.options.visiblePages + 1;
+                end = this.options.totalPages;
+            }
+
+            var itPage = start;
+            while (itPage <= end) {
+                pages.push(itPage);
+                itPage++;
+            }
+
+            return {"currentPage": currentPage, "numeric": pages};
+        },
+
+        render: function (pages) {
+            var _this = this;
+            this.$listContainer.children().remove();
+            var items = this.buildListItems(pages);
+            jQuery.each(items, function(key, item){
+                _this.$listContainer.append(item);
+            });
+
+            this.$listContainer.children().each(function () {
+                var $this = $(this),
+                    pageType = $this.data('page-type');
+
+                switch (pageType) {
+                    case 'page':
+                        if ($this.data('page') === pages.currentPage) {
+                            $this.addClass(_this.options.activeClass);
+                        }
+                        break;
+                    case 'first':
+                            $this.toggleClass(_this.options.disabledClass, pages.currentPage === 1);
+                        break;
+                    case 'last':
+                            $this.toggleClass(_this.options.disabledClass, pages.currentPage === _this.options.totalPages);
+                        break;
+                    case 'prev':
+                            $this.toggleClass(_this.options.disabledClass, !_this.options.loop && pages.currentPage === 1);
+                        break;
+                    case 'next':
+                            $this.toggleClass(_this.options.disabledClass,
+                                !_this.options.loop && pages.currentPage === _this.options.totalPages);
+                        break;
+                    default:
+                        break;
+                }
+
+            });
+        },
+
+        setupEvents: function () {
+            var _this = this;
+            this.$listContainer.off('click').on('click', 'li', function (evt) {
+                var $this = $(this);
+                if ($this.hasClass(_this.options.disabledClass) || $this.hasClass(_this.options.activeClass)) {
+                    return false;
+                }
+                // Prevent click event if href is not set.
+                !_this.options.href && evt.preventDefault();
+                _this.show(parseInt($this.data('page')));
+            });
+        },
+
+        makeHref: function (page) {
+            return this.options.href ? this.generateQueryString(page) : "#";
+        },
+
+        makeText: function (text, page) {
+            return text.replace(this.options.pageVariable, page)
+                .replace(this.options.totalPagesVariable, this.options.totalPages)
+        },
+        getPageFromQueryString: function (searchStr) {
+            var search = this.getSearchString(searchStr),
+                regex = new RegExp(this.options.pageVariable + '(=([^&#]*)|&|#|$)'),
+                page = regex.exec(search);
+            if (!page || !page[2]) {
+                return null;
+            }
+            page = decodeURIComponent(page[2]);
+            page = parseInt(page);
+            if (isNaN(page)) {
+                return null;
+            }
+            return page;
+        },
+        generateQueryString: function (pageNumber, searchStr) {
+            var search = this.getSearchString(searchStr),
+                regex = new RegExp(this.options.pageVariable + '=*[^&#]*');
+            if (!search) return '';
+            return '?' + search.replace(regex, this.options.pageVariable + '=' + pageNumber);
+
+        },
+        getSearchString: function (searchStr) {
+            var search = searchStr || window.location.search;
+            if (search === '') {
+                return null;
+            }
+            if (search.indexOf('?') === 0) search = search.substr(1);
+            return search;
+        }
+
+    };
+
+    // PLUGIN DEFINITION
+
+    $.fn.twbsPagination = function (option) {
+        var args = Array.prototype.slice.call(arguments, 1);
+        var methodReturn;
+
+        var $this = $(this);
+        var data = $this.data('twbs-pagination');
+        var options = typeof option === 'object' ? option : {};
+
+        if (!data) $this.data('twbs-pagination', (data = new TwbsPagination(this, options) ));
+        if (typeof option === 'string') methodReturn = data[ option ].apply(data, args);
+
+        return ( methodReturn === undefined ) ? $this : methodReturn;
+    };
+
+    $.fn.twbsPagination.defaults = {
+        totalPages: 1,
+        startPage: 1,
+        visiblePages: 5,
+        initiateStartPageClick: true,
+        hideOnlyOnePage: false,
+        href: false,
+        pageVariable: '{{page}}',
+        totalPagesVariable: '{{total_pages}}',
+        page: null,
+        first: 'First',
+        prev: 'Previous',
+        next: 'Next',
+        last: 'Last',
+        loop: false,
+        onPageClick: null,
+        paginationClass: 'pagination',
+        nextClass: 'page-item next',
+        prevClass: 'page-item prev',
+        lastClass: 'page-item last',
+        firstClass: 'page-item first',
+        pageClass: 'page-item',
+        activeClass: 'active',
+        disabledClass: 'disabled',
+        anchorClass: 'page-link'
+    };
+
+    $.fn.twbsPagination.Constructor = TwbsPagination;
+
+    $.fn.twbsPagination.noConflict = function () {
+        $.fn.twbsPagination = old;
+        return this;
+    };
+
+    $.fn.twbsPagination.version = "1.4.1";
+
+})(window.jQuery, window, document);
diff --git a/docs/_template/discordfx/styles/main.css b/docs/_template/discordfx/styles/main.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/docs/_template/discordfx/styles/main.js b/docs/_template/discordfx/styles/main.js
new file mode 100644
index 000000000..b9150b427
--- /dev/null
+++ b/docs/_template/discordfx/styles/main.js
@@ -0,0 +1,20 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+function toggleMenu() {
+               
+    var x = document.getElementById("sidebar");
+    var b = document.getElementById("blackout");
+
+    if (x.style.left === "0px") 
+    {
+        x.style.left = "-350px";
+        b.classList.remove("showThat");
+        b.classList.add("hideThat");
+    } 
+    else 
+    {
+        x.style.left = "0px";
+        b.classList.remove("hideThat");
+        b.classList.add("showThat");
+    }
+}
\ No newline at end of file
diff --git a/docs/_template/discordfx/styles/url.min.js b/docs/_template/discordfx/styles/url.min.js
new file mode 100644
index 000000000..8057e0aa0
--- /dev/null
+++ b/docs/_template/discordfx/styles/url.min.js
@@ -0,0 +1 @@
+/*! url - v1.8.6 - 2013-11-22 */window.url=function(){function a(a){return!isNaN(parseFloat(a))&&isFinite(a)}return function(b,c){var d=c||window.location.toString();if(!b)return d;b=b.toString(),"//"===d.substring(0,2)?d="http:"+d:1===d.split("://").length&&(d="http://"+d),c=d.split("/");var e={auth:""},f=c[2].split("@");1===f.length?f=f[0].split(":"):(e.auth=f[0],f=f[1].split(":")),e.protocol=c[0],e.hostname=f[0],e.port=f[1]||("https"===e.protocol.split(":")[0].toLowerCase()?"443":"80"),e.pathname=(c.length>3?"/":"")+c.slice(3,c.length).join("/").split("?")[0].split("#")[0];var g=e.pathname;"/"===g.charAt(g.length-1)&&(g=g.substring(0,g.length-1));var h=e.hostname,i=h.split("."),j=g.split("/");if("hostname"===b)return h;if("domain"===b)return/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(h)?h:i.slice(-2).join(".");if("sub"===b)return i.slice(0,i.length-2).join(".");if("port"===b)return e.port;if("protocol"===b)return e.protocol.split(":")[0];if("auth"===b)return e.auth;if("user"===b)return e.auth.split(":")[0];if("pass"===b)return e.auth.split(":")[1]||"";if("path"===b)return e.pathname;if("."===b.charAt(0)){if(b=b.substring(1),a(b))return b=parseInt(b,10),i[0>b?i.length+b:b-1]||""}else{if(a(b))return b=parseInt(b,10),j[0>b?j.length+b:b]||"";if("file"===b)return j.slice(-1)[0];if("filename"===b)return j.slice(-1)[0].split(".")[0];if("fileext"===b)return j.slice(-1)[0].split(".")[1]||"";if("?"===b.charAt(0)||"#"===b.charAt(0)){var k=d,l=null;if("?"===b.charAt(0)?k=(k.split("?")[1]||"").split("#")[0]:"#"===b.charAt(0)&&(k=k.split("#")[1]||""),!b.charAt(1))return k;b=b.substring(1),k=k.split("&");for(var m=0,n=k.length;n>m;m++)if(l=k[m].split("="),l[0]===b)return l[1]||"";return null}}return""}}(),"undefined"!=typeof jQuery&&jQuery.extend({url:function(a,b){return window.url(a,b)}});
\ No newline at end of file
diff --git a/docs/docfx.json b/docs/docfx.json
index 3b7ef582b..d51ca54e0 100644
--- a/docs/docfx.json
+++ b/docs/docfx.json
@@ -48,15 +48,9 @@
     "dest": "_site",
     "template": [
       "default",
-      "_template/light-dark-theme",
-      "_template/last-modified",
-      "_template/description-generator"
-    ],
-    "postProcessors": [
-      "ExtractSearchIndex",
-      "LastModifiedPostProcessor",
-      "DescriptionPostProcessor"
+      "_template/discordfx"
     ],
+    
     "overwrite": "_overwrites/**/**.md",
     "globalMetadata": {
       "_appTitle": "Discord.Net Documentation",
