diff --git a/src/assets/outline.svg b/src/assets/outline.svg
new file mode 100644
index 00000000..2ccc0a80
--- /dev/null
+++ b/src/assets/outline.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.025,0,0,0.025,0,0)">
+        <g transform="matrix(1.018047,-0,-0.541466,1.161177,196.744661,36.27303)">
+            <path d="M761.555,145.402C786.564,146.436 814.357,158.497 831.678,172.26C848.686,185.774 863.552,206.341 865.479,227.979C871.112,291.242 879.538,486.691 865.479,551.84C857.903,586.947 816.856,615.262 781.122,618.869C670.443,630.041 309.711,623.345 201.404,618.869C176.395,617.835 148.602,605.774 131.281,592.011C114.273,578.497 99.407,557.93 97.48,536.292C91.847,473.029 83.421,277.58 97.48,212.431C105.057,177.324 146.104,149.009 181.837,145.402C292.516,134.23 653.248,140.926 761.555,145.402ZM403.558,531.894L439.421,477.331L663.012,477.331C677.01,477.331 683.067,467.382 676.539,455.109L583.479,280.14C576.951,267.867 560.311,257.918 546.313,257.918L283.186,257.918C269.187,257.918 263.131,267.867 269.658,280.14L403.558,531.894Z"/>
+        </g>
+        <g transform="matrix(1.348032,0,0,1.348032,-284.33466,-167.054838)">
+            <path d="M488,419.613C488,415.961 490.961,413 494.613,413L637.387,413C641.039,413 644,415.961 644,419.613L644,432.387C644,436.039 641.039,439 637.387,439L494.613,439C490.961,439 488,436.039 488,432.387L488,419.613Z"/>
+        </g>
+        <g transform="matrix(1.348032,0,0,1.348032,-284.33466,-167.054838)">
+            <path d="M488,461.867C488,458.075 491.075,455 494.867,455L637.133,455C640.925,455 644,458.075 644,461.867L644,475.133C644,478.925 640.925,482 637.133,482L494.867,482C491.075,482 488,478.925 488,475.133L488,461.867Z"/>
+        </g>
+        <g transform="matrix(1.348032,0,0,1.348032,-284.33466,-167.054838)">
+            <path d="M488,504.867C488,501.075 491.075,498 494.867,498L569.133,498C572.925,498 576,501.075 576,504.867L576,518.133C576,521.925 572.925,525 569.133,525L494.867,525C491.075,525 488,521.925 488,518.133L488,504.867Z"/>
+        </g>
+    </g>
+</svg>
diff --git a/src/components/HyperchatButton.svelte b/src/components/HyperchatButton.svelte
index 881e185d..6805697c 100644
--- a/src/components/HyperchatButton.svelte
+++ b/src/components/HyperchatButton.svelte
@@ -1,8 +1,7 @@
 <script lang='ts'>
   import { isLiveTL } from '../ts/chat-constants';
   import { hcEnabled, lastOpenedVersion } from '../ts/storage';
-  import { createPopup } from '../ts/chat-utils';
-  import { mdiChevronRight, mdiClose, mdiCogOutline } from '@mdi/js';
+  import { mdiChevronRight, mdiClose } from '@mdi/js';
 
   $: disabled = !$hcEnabled;
 
@@ -11,15 +10,7 @@
     location.reload();
   };
 
-  const isDark = () => document.documentElement.getAttribute('dark') === '';
-
-  const openSettings = () => {
-    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${isDark() ? '?dark' : ''}`));
-  };
-
   const logo = chrome.runtime.getURL((isLiveTL ? 'hyperchat' : 'assets') + '/logo-48.png');
-  const simplified = chrome.runtime.getURL((isLiveTL ? 'hyperchat' : 'assets') + '/simplified.png');
-
   let updated = false;
 
   lastOpenedVersion.ready().then(() => {
@@ -50,16 +41,6 @@
       <span>HC</span>
     </div>
   </div>
-  {#if $hcEnabled}
-    <div class="tooltip-bottom" data-tooltip="HyperChat Settings">
-      <div class="toggleButton" class:disabled on:click={openSettings} >
-        <img src={simplified} class="floating-icon" alt="hc-settings-float" />
-        <svg viewBox="0 0 24 24" style="height: 20px">
-          <path d={mdiCogOutline} style="fill: var(--yt-live-chat-header-button-color)" />
-        </svg>
-      </div>
-    </div>
-  {/if}
 </div>
 
 <style>
@@ -92,14 +73,7 @@
     cursor: pointer;
     transition: box-shadow 0.2s;
   }
-  .toggleButton .floating-icon {
-    position: absolute;
-    bottom: 5px;
-    right: 3px;
-    width: 15px;
-    height: 15px;
-  }
-
+  
   .toggleButton.disabled {
     color: var(--yt-live-chat-secondary-text-color);
   }
diff --git a/src/components/SettingsButton.svelte b/src/components/SettingsButton.svelte
new file mode 100644
index 00000000..2bbc808c
--- /dev/null
+++ b/src/components/SettingsButton.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { createPopup } from '../ts/chat-utils';
+  import { isLiveTL } from '../ts/chat-constants';
+  import outline from '../assets/outline.svg?raw';
+  
+  const openSettings = () => {
+    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${document.documentElement.getAttribute('dark') === '' ? '?dark' : ''}`));
+  };
+</script>
+
+<div id="hc-settings" on:click={openSettings} class="button">
+  <div class="button-icon-container">
+    <div class="button-icon">
+      {@html outline}
+    </div>
+  </div>
+  <div class="button-label">HyperChat Settings</div>
+</div>
+
+<style>
+  /* CSS Style as copied from BetterTTV albeit slightly modified: https://github.com/night/betterttv/blob/38daf2a12133286c6910db5bb39ccdfaf7a4ffd4/src/modules/settings/youtube/Settings.module.css */
+  .button {
+    display: flex;
+    align-items: center;
+    padding: 0px 36px 0px 16px;
+    cursor: pointer;
+    min-height: 36px;
+
+    &:hover {
+      background-color: var(--yt-spec-10-percent-layer);
+    }
+  }
+
+  .button-label {
+    color: var(--yt-spec-text-primary);
+    white-space: nowrap;
+    font-family: sans-serif;
+    font-size: 1.4rem;
+    line-height: 2rem;
+    font-weight: 100;
+    -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
+  }
+
+  .button-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 16px;
+    width: 24px;
+    height: 24px;
+  }
+  
+  .button-icon {
+    flex: none;
+    fill: var(--yt-spec-text-primary);
+  }
+</style>
\ No newline at end of file
diff --git a/src/scripts/chat-injector.ts b/src/scripts/chat-injector.ts
index 3186a2c0..522275f8 100644
--- a/src/scripts/chat-injector.ts
+++ b/src/scripts/chat-injector.ts
@@ -1,4 +1,5 @@
 import HcButton from '../components/HyperchatButton.svelte';
+import HcSettings from '../components/SettingsButton.svelte';
 import { getFrameInfoAsync, isValidFrameInfo, frameIsReplay, checkInjected } from '../ts/chat-utils';
 import { isLiveTL } from '../ts/chat-constants';
 import { hcEnabled, autoLiveChat } from '../ts/storage';
@@ -75,7 +76,7 @@ const chatLoaded = async (): Promise<void> => {
     setTheme(isDark);
     wasDark = isDark;
   };
-  new MutationObserver(sendTheme).observe(html, {
+  new MutationObserver(sendTheme).observe(document.body, {
     attributes: true
   });
   sendTheme();
@@ -89,11 +90,27 @@ const chatLoaded = async (): Promise<void> => {
     console.error('Failed to find #primary-content');
     return;
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const hcButton = new HcButton({
+  new HcButton({
     target: ytcPrimaryContent
   });
 
+  // Inject HC settings
+  const injectSettings = (): void => {
+    // Prevent duplicates
+    if (document.getElementById('hc-settings')) return;
+    const ytcItemMenu = document.querySelector('tp-yt-paper-listbox#items');
+    if (!ytcItemMenu) return;
+
+    new HcSettings({
+      target: ytcItemMenu
+    });
+  }
+
+  new MutationObserver(injectSettings).observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+
   // Everything past this point will only run if HC is enabled
   if (!hyperChatEnabled) return;
 
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..79ebb242
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg?raw' {
+  const content: string;
+  export default content;
+}