diff --git a/Documentation/docfx.json b/Documentation/docfx.json
index 9680056b3..60c5f1033 100644
--- a/Documentation/docfx.json
+++ b/Documentation/docfx.json
@@ -44,7 +44,7 @@
     "markdownEngineName": "markdig",
     "globalMetadata": {
       "_appDescription": "NetCord – the modern and fully customizable C# Discord library",
-      "_appTitle": "NetCord",
+      "_appTitle": "NetCord - Build Discord Bots in .NET",
       "_enableSearch": true,
       "_disableFooter": true,
       "_noindex": true,
diff --git a/Documentation/index.md b/Documentation/index.md
index 2bed0ddf9..43cc19a2c 100644
--- a/Documentation/index.md
+++ b/Documentation/index.md
@@ -1,4 +1,5 @@
 ---
-title: Home
+title: NetCord - Modern C# Discord Bot Library for .NET Developers
+omitAppTitle: true
 _root: true
----
\ No newline at end of file
+---
diff --git a/Documentation/templates-src/NetCord/layout/_master.tmpl b/Documentation/templates-src/NetCord/layout/_master.tmpl
index 0a1791deb..2d62c9601 100644
--- a/Documentation/templates-src/NetCord/layout/_master.tmpl
+++ b/Documentation/templates-src/NetCord/layout/_master.tmpl
@@ -10,10 +10,10 @@
       <meta http-equiv="refresh" content="0;URL='{{redirect_url}}'">
     {{/redirect_url}}
     {{^redirect_url}}
-      <title>{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}</title>
+      <title>{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{^omitAppTitle}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}{{/omitAppTitle}}</title>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta name="title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}">
-      <meta property="og:title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}">
+      <meta name="title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{^omitAppTitle}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}{{/omitAppTitle}}">
+      <meta property="og:title" content="{{#title}}{{title}}{{/title}}{{^title}}{{>partials/title}}{{/title}}{{^omitAppTitle}}{{#_appTitle}} | {{_appTitle}}{{/_appTitle}}{{/omitAppTitle}}">
       <meta name="description" content="{{#description}}{{description}}{{/description}}{{^description}}{{#_appDescription}}{{_appDescription}}{{/_appDescription}}{{/description}}">
       <meta property="og:description" content="{{#description}}{{description}}{{/description}}{{^description}}{{#_appDescription}}{{_appDescription}}{{/_appDescription}}{{/description}}">
       <meta property="og:type" content="website">
diff --git a/Documentation/templates-src/NetCord/partials/root.tmpl.partial b/Documentation/templates-src/NetCord/partials/root.tmpl.partial
index 3b8075ab9..3290eaa00 100644
--- a/Documentation/templates-src/NetCord/partials/root.tmpl.partial
+++ b/Documentation/templates-src/NetCord/partials/root.tmpl.partial
@@ -6,4 +6,46 @@
     <a href="guides/getting-started/installation.html" class="button secondary-button">Guides</a>
     <a href="docs/" class="button secondary-button">Docs</a>
   </section>
-</div>
\ No newline at end of file
+</div>
+
+<div class="features-section">
+  <h3 class="section-title">Key Features of NetCord</h3>
+  <div class="features-container">
+    <div class="feature-item">
+      <h4>Fully Customizable</h4>
+      <p>NetCord is a highly customizable, open-source C# Discord library, enabling developers to create tailored bots with flexible and extensible features.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Easy to Use</h4>
+      <p>With an intuitive API design, NetCord streamlines bot development, allowing you to quickly and efficiently build Discord bots in .NET.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Lightweight & High Performance</h4>
+      <p>NetCord is designed for efficiency, ensuring high performance while keeping resource usage minimal, making it perfect for scalable bots.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Asynchronous & Concurrent</h4>
+      <p>Fully supporting async/await, NetCord allows for responsive, concurrent operations, enabling scalable and high-performing bot interactions.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Native AOT Support</h4>
+      <p>NetCord supports Native AOT, allowing for faster startup times, smaller memory footprints, and reduced deployment sizes, making your bot highly optimized for performance.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Immutable Caching</h4>
+      <p>NetCord's caching system is immutable by default, providing all the benefits of immutability, such as data consistency and preventing unintended changes during execution.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Voice Ready</h4>
+      <p>NetCord includes robust support for sending and receiving voice data, allowing you to integrate high-quality voice features into your bot.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Complete API Coverage</h4>
+      <p>NetCord covers the entire Discord API and more, ensuring you have access to all the latest features and capabilities Discord has to offer.</p>
+    </div>
+    <div class="feature-item">
+      <h4>Open Source & Forever Free</h4>
+      <p>NetCord is open source and forever free to use under the permissive MIT license, making it an ideal choice for developers at any level.</p>
+    </div>
+  </div>
+</div>
diff --git a/Documentation/templates-src/NetCord/src/main.css b/Documentation/templates-src/NetCord/src/main.css
index 496d8b0a7..9155abced 100644
--- a/Documentation/templates-src/NetCord/src/main.css
+++ b/Documentation/templates-src/NetCord/src/main.css
@@ -1,16 +1,12 @@
 @font-face {
   font-family: Cascadia Code;
-  src:
-    local(Cascadia Code Regular),
-    url(cascadia-code.woff2) format(woff2);
+  src: local(Cascadia Code Regular), url(cascadia-code.woff2) format(woff2);
   font-display: swap;
 }
 
 @font-face {
   font-family: Franklin Gothic Heavy;
-  src:
-    local(Franklin Gothic Heavy),
-    url(franklin-gothic-heavy.woff2) format(woff2);
+  src: local(Franklin Gothic Heavy), url(franklin-gothic-heavy.woff2) format(woff2);
   font-display: swap;
 }
 
@@ -113,39 +109,17 @@ article,
 .main {
   color: var(--bs-emphasis-color);
   display: flex;
-  justify-content: center;
+  justify-content: end;
   flex-direction: column;
-  height: 80vh;
+  height: 55vh;
   text-align: center;
 }
 
 .bg-body {
   z-index: 1;
-}
-
-@media (max-height: 600px) {
-  .main {
-    height: auto;
-  }
-}
-
-@media (max-width: 767px) {
-  .title {
-    font-size: 23vw;
-  }
-
-  .subtitle {
-    font-size: 3.5vw;
-  }
-
-  .buttons {
-    flex-direction: column;
-  }
-}
-
-.bg-body {
   --bs-bg-opacity: 0;
   backdrop-filter: blur(10px) brightness(80%);
+  -webkit-backdrop-filter: blur(10px) brightness(80%);
 }
 
 .border-bottom {
@@ -167,26 +141,26 @@ article,
   background-color: var(--blurple);
 }
 
-.primary-button:hover,
-.primary-button:active {
-  background-color: var(--dark-blurple);
-  border-color: var(--dark-blurple);
-}
+  .primary-button:hover,
+  .primary-button:active {
+    background-color: var(--dark-blurple);
+    border-color: var(--dark-blurple);
+  }
 
 .secondary-button {
   color: var(--bs-emphasis-color);
 }
 
-.secondary-button:hover {
-  background-color: var(--blurple);
-  color: var(--bs-white);
-}
+  .secondary-button:hover {
+    background-color: var(--blurple);
+    color: var(--bs-white);
+  }
 
-.secondary-button:active {
-  background-color: var(--dark-blurple);
-  border-color: var(--dark-blurple);
-  color: var(--bs-white);
-}
+  .secondary-button:active {
+    background-color: var(--dark-blurple);
+    border-color: var(--dark-blurple);
+    color: var(--bs-white);
+  }
 
 .icon:before {
   display: inline-grid;
@@ -213,12 +187,12 @@ code,
   font-variant-ligatures: var(--ligatures);
 }
 
+.icon-content {
+  pointer-events: none;
+}
+
 * {
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 }
 
 .form-control {
@@ -274,11 +248,7 @@ code,
   }
 }
 
-.icon-tooltip {
-  animation: iconShow 0.3s forwards;
-}
-
-.icon-tooltip::after {
+.icon-tooltip-active.icon-tooltip::after {
   pointer-events: none;
   content: attr(tooltip);
   position: absolute;
@@ -287,45 +257,21 @@ code,
   color: var(--tooltip-color);
   font-size: 0.8em;
   animation: tooltipFadeOutUp 0.15s ease both;
-  transition:
-    background-color 0.2s ease-in-out,
-    color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out,
-    box-shadow 0.2s ease-in-out;
+  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
   border-width: 3px 0 0 0;
   border-top-style: solid;
   border-top-color: var(--tooltip-color);
   font-weight: 600;
-  bottom: calc(-100% - 3px);
+  bottom: calc(-100% + 6px);
 }
 
-@media (min-width: 768px) {
-  .icon-tooltip::after {
-    bottom: calc(-100% + 6px);
-  }
-
-  .navbar > .container-xxl {
-    padding-left: 40px;
-    padding-right: 40px;
-  }
-}
-
-.icon-tooltip:hover::after {
+.icon-tooltip-active.icon-tooltip:hover::after,
+.icon-tooltip-active.icon-tooltip:focus-visible::after {
   animation: tooltipFadeInUp 0.15s ease both;
 }
 
-@keyframes iconShow {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
+.navbar-collapse.collapsing .icon-tooltip-active.icon-tooltip::after {
+  scale: 0;
 }
 
 @keyframes tooltipFadeInUp {
@@ -351,3 +297,94 @@ code,
     transform: translate(calc(-50% - 8.4px), 0) translateY(10px);
   }
 }
+
+.features-section {
+  padding: 100px 0;
+  text-align: center;
+  color: var(--bs-emphasis-color);
+}
+
+.section-title {
+  font-size: 30px;
+  margin-bottom: 30px;
+}
+
+.features-container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 20px;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 40px;
+}
+
+.feature-item {
+  flex-basis: 30%;
+  padding: 20px;
+  background-color: #f8f8f8;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: left;
+}
+
+[data-bs-theme="dark"]
+.feature-item {
+  background-color: rgba(0, 0, 0, 0.11);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+.feature-item h4 {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.feature-item p {
+  font-size: 16px;
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+@media (max-width: 767px) {
+  .title {
+    font-size: 23vw;
+  }
+
+  .subtitle {
+    font-size: 3.5vw;
+  }
+
+  .buttons {
+    flex-direction: column;
+  }
+
+  .icon-tooltip-active.icon-tooltip::after {
+    bottom: calc(-100% - 3px);
+  }
+
+  .section-title {
+    font-size: 7vw;
+  }
+
+  .features-section {
+    padding: 50px 0;
+  }
+
+  .feature-item {
+    flex-basis: 100%;
+  }
+}
+
+@media (max-width: 767px), (max-height: 750px) {
+  .main {
+    height: auto;
+  }
+}
+
+@media not all and (max-width: 767px) {
+  .navbar > .container-xxl {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
+}
diff --git a/Documentation/templates-src/NetCord/src/nav.ts b/Documentation/templates-src/NetCord/src/nav.ts
index 325e01ae7..e97e5dfc6 100644
--- a/Documentation/templates-src/NetCord/src/nav.ts
+++ b/Documentation/templates-src/NetCord/src/nav.ts
@@ -67,6 +67,10 @@ export async function renderNavbar(): Promise<NavItem[]> {
   </ul>`;
 
   async function renderCore() {
+    function handleActiveEvent(event: Event) {
+      (event.target as Element).classList.add("icon-tooltip-active");
+    }
+
     const iconsForm = html` <form class="icons">
       ${icons?.map(
         (i) =>
@@ -74,26 +78,30 @@ export async function renderNavbar(): Promise<NavItem[]> {
           if (i.href) {
             return html`<a
               class="btn border-0 icon-tooltip"
-              href="${i.href}"
               aria-label="${i.tooltip}"
               tooltip="${i.tooltip}"
-              ><i class="${i.icon}"></i
+              href="${i.href}"
+              @mouseover="${handleActiveEvent}"
+              @focus="${handleActiveEvent}"
+              ><i class="${i.icon} icon-content"></i
             ></a>`;
           } else if (i.onclick) {
             return html`<button
               type="button"
               class="btn border-0 icon-tooltip"
               aria-label="${i.tooltip}"
-              @click="${i.onclick}"
               tooltip="${i.tooltip}"
-              ><i class="${i.icon}"></i
+              @click="${i.onclick}"
+              @mouseover="${handleActiveEvent}"
+              @focus="${handleActiveEvent}"
+              ><i class="${i.icon} icon-content"></i
             ></button>`;
           }
 
           return nothing;
         },
       )}
-      ${await themePicker(renderCore)}
+      ${await themePicker(renderCore, handleActiveEvent)}
     </form>`;
 
     render(html`${menu} ${iconsForm}`, navbar);
diff --git a/Documentation/templates-src/NetCord/src/theme.ts b/Documentation/templates-src/NetCord/src/theme.ts
index fd995b740..4aaed29e4 100644
--- a/Documentation/templates-src/NetCord/src/theme.ts
+++ b/Documentation/templates-src/NetCord/src/theme.ts
@@ -44,7 +44,7 @@ export function getTheme(): "light" | "dark" {
     | "dark";
 }
 
-export async function themePicker(refresh: () => void) {
+export async function themePicker(refresh: () => void, active: (event: MouseEvent) => void) {
   const theme = getTheme();
   const icon = theme === "light" ? "sun" : "moon";
 
@@ -52,9 +52,11 @@ export async function themePicker(refresh: () => void) {
     type="button"
     class="btn border-0 icon-tooltip"
     aria-label="Toggle theme"
-    @click="${toggleTheme}"
     tooltip="Toggle theme"
-    ><i class="bi bi-${icon}"></i
+    @click="${toggleTheme}"
+    @mouseover="${active}"
+    @focus="${active}"
+    ><i class="bi bi-${icon} icon-content"></i
   ></button>`;
 
   function toggleTheme(e) {