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 669da916..e4eb7334 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';
   import { version } from '../manifest.json';
 
   $: disabled = !$hcEnabled;
@@ -12,15 +11,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(() => {
@@ -51,16 +42,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>
diff --git a/src/components/SettingsButton.svelte b/src/components/SettingsButton.svelte
new file mode 100644
index 00000000..610d2162
--- /dev/null
+++ b/src/components/SettingsButton.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import { createPopup } from '../ts/chat-utils';
+  import { isLiveTL } from '../ts/chat-constants';
+  import outline from '../assets/outline.svg?raw';
+  import { onDestroy, onMount } from "svelte";
+  
+  const openSettings = () => {
+    createPopup(chrome.runtime.getURL(`${isLiveTL ? 'hyperchat/' : ''}options.html${document.documentElement.getAttribute('dark') === '' ? '?dark' : ''}`));
+  };
+  
+  onMount(() => {
+    console.debug('[HyperChat] Settings button created');
+  });
+  
+  onDestroy(() => {
+    console.debug('[HyperChat] Settings button destroyed');
+  });
+</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;
+  }
+
+  .button:hover {
+    background-color: var(--yt-spec-additive-background);
+    border-radius: 8px;
+  }
+
+  .button-label {
+    color: var(--yt-spec-text-primary);
+    white-space: nowrap;
+    font-family: "Roboto", "Arial", sans-serif;
+    font-size: 1.4rem;
+    line-height: 2rem;
+    font-weight: 400;
+    -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 {
+    display: flex;
+    justify-content: center;
+    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 d7b38259..8c0b0cae 100644
--- a/src/scripts/chat-injector.ts
+++ b/src/scripts/chat-injector.ts
@@ -1,9 +1,11 @@
 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';
 
 // const isFirefox = navigator.userAgent.includes('Firefox');
+let hcSettings: HcSettings | null = null;
 
 const hcWarning = 'An existing HyperChat button has been detected. This ' +
   'usually means both LiveTL and standalone HyperChat are enabled. ' +
@@ -23,11 +25,44 @@ 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 => {
+    const destroyButton = (): void => {
+      if (hcSettings !== null) {
+        try {
+          hcSettings.$destroy();
+        } catch (_) {}
+      }
+    }
+
+    const ytcItemMenu = document.querySelector('tp-yt-paper-listbox#items');
+    if (ytcItemMenu) {
+      // Prevent duplicates
+      if (document.getElementById('hc-settings')) return;
+
+      destroyButton();
+      hcSettings = new HcSettings({
+        target: ytcItemMenu
+      });
+
+      return;
+    }
+
+    destroyButton();
+  };
+
+  const chatApp = document.querySelector('yt-live-chat-app');
+  if (chatApp) {
+    new MutationObserver(injectSettings).observe(chatApp, {
+      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;
+}