diff --git a/src/contents/content-script-support.svelte b/src/contents/content-script-support.svelte
new file mode 100644
index 0000000..f5d3073
--- /dev/null
+++ b/src/contents/content-script-support.svelte
@@ -0,0 +1,81 @@
+<script context="module" lang="ts">
+  // noinspection TypeScriptCheckImport
+  import textStyle from "data-text:~cs-helpers/desktop/injected-style.scss";
+  import type { PlasmoCSConfig, PlasmoGetInlineAnchor, PlasmoGetStyle, PlasmoMountShadowHost } from "plasmo";
+  import { getIsExtensionEnabled, SELECTORS } from "~shared-scripts/ythd-utils";
+
+  export const config: PlasmoCSConfig = {
+    matches: ["https://www.youtube.com/*"]
+  };
+
+  export const mountShadowHost: PlasmoMountShadowHost = async ({ shadowHost, anchor, mountState }) => {
+    const elSupportSection = document.querySelector(`#${CLASS_DONATION}`);
+    if (!(await getIsExtensionEnabled()) || elSupportSection) {
+      return;
+    }
+
+    anchor.element.prepend(shadowHost);
+    mountState.observer.disconnect();
+  };
+
+  export const getStyle: PlasmoGetStyle = () => {
+    const elStyle = document.createElement("style");
+    elStyle.textContent = textStyle;
+    return elStyle;
+  };
+
+  export const getInlineAnchor: PlasmoGetInlineAnchor = () => document.querySelector(SELECTORS.relatedVideos);
+
+  const CLASS_DONATION = SELECTORS.donationSection.substring(1);
+</script>
+
+<script lang="ts">
+  import { Storage } from "@plasmohq/storage";
+
+  const storageSync = new Storage({ area: "sync" });
+
+  let isHideDonationSection = true;
+
+  storageSync.get<boolean>("isHideDonationSection").then(pIsHideDonationSection => {
+    isHideDonationSection = pIsHideDonationSection;
+  });
+
+  storageSync.watch({
+    isHideDonationSection({ newValue: pIsHideDonationSection }: { newValue: boolean }) {
+      isHideDonationSection = pIsHideDonationSection;
+    }
+  });
+
+  function hideDonationSection() {
+    storageSync.set("isHideDonationSection", true);
+  }
+</script>
+
+{#if !isHideDonationSection}
+  <article class={CLASS_DONATION}>
+    <section class="{CLASS_DONATION}__header">
+      <h1 class="{CLASS_DONATION}__title">YouTube Auto HD</h1>
+      <button class="{CLASS_DONATION}__close" on:click={hideDonationSection} aria-hidden="true" aria-label="Close">
+        🞬
+      </button>
+    </section>
+
+    <p class="{CLASS_DONATION}__description">Hi there,</p>
+    <p class="{CLASS_DONATION}__description" style="margin-top: 10px;">
+      If you've been enjoying this extension, you might be interested to know that maintaining this project requires
+      both time and resources. Your support can make a significant difference.
+    </p>
+    <p class="{CLASS_DONATION}__description" style="margin-top: 10px;">
+      To continue offering you a high-quality experience, a donation via <a
+        href="https://paypal.me/avi12"
+        target="_blank"
+        class="yt-core-attributed-string__link"
+        style="color: #3ea6ff"
+        on:click={hideDonationSection}>PayPal</a> would be greatly appreciated. These contributions go directly into maintaining
+      and improving this and future projects.
+    </p>
+    <p class="{CLASS_DONATION}__description" style="margin-top: 10px;">
+      Thank you for your time and for considering this request. Your support helps keep it up and running.
+    </p>
+  </article>
+{/if}
diff --git a/src/contents/content-script-support.ts b/src/contents/content-script-support.ts
deleted file mode 100644
index fa127b9..0000000
--- a/src/contents/content-script-support.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Storage } from "@plasmohq/storage";
-import textStyle from "data-text:~cs-helpers/desktop/injected-style.scss";
-import type { PlasmoCSConfig } from "plasmo";
-
-import {
-  OBSERVER_OPTIONS,
-  SELECTORS,
-  addGlobalEventListener,
-  getIsExtensionEnabled,
-  getVisibleElement
-} from "~shared-scripts/ythd-utils";
-
-const storageSync = new Storage({ area: "sync" });
-let gObserverNavigation: MutationObserver;
-
-let gTitleLast = document.title;
-let gUrlLast = location.href;
-let gElSupportSection: HTMLElement;
-
-function addSupportButtonIfNeeded(): void {
-  const elContainer = getVisibleElement(SELECTORS.relatedVideos);
-  gElSupportSection = getVisibleElement(SELECTORS.donationSection);
-  if (!elContainer || gElSupportSection) {
-    return;
-  }
-
-  const CLASS_DONATION = SELECTORS.donationSection.substring(1);
-  gElSupportSection = document.createElement("article");
-  gElSupportSection.classList.add(CLASS_DONATION);
-  gElSupportSection.innerHTML = `
-      <section class="${CLASS_DONATION}__header">
-        <h1 class="${CLASS_DONATION}__title">YouTube Auto HD</h1>
-        <button class="${CLASS_DONATION}__close" aria-hidden="true" aria-label="Close">╳
-        </button>
-      </section>
-      <p class="${CLASS_DONATION}__description">
-        Hi there,
-      </p>
-      <p class="${CLASS_DONATION}__description" style="margin-top: 10px;">
-        If you've been enjoying this extension, you might be interested to know that maintaining this project requires both time and resources. Your support can make a significant difference.
-      </p>
-      <p class="${CLASS_DONATION}__description">
-        To continue offering you a high-quality experience, a donation via <a href="https://paypal.me/avi12" target="_blank" class="yt-core-attributed-string__link" style="color: #3ea6ff">PayPal</a> would be greatly appreciated. These contributions go directly into maintaining and improving this and future projects.
-      </p>
-      <p class="${CLASS_DONATION}__description" style="margin-top: 10px;">
-        Thank you for your time and for considering this request. Your support helps keep it up and running.
-      </p>
-  `;
-  gElSupportSection.addEventListener("click", async ({ target }) => {
-    const element = target as HTMLElement;
-    if (element.matches("button, a[href*=paypal]")) {
-      // If clicking either the close button or the link, this section will be permanently closed
-      // Clicking the link will also open the donation link in a new tab
-      await storageSync.set("isHideDonationSection", true);
-    }
-  });
-  elContainer.prepend(gElSupportSection);
-}
-
-async function addTemporaryBodyListener(): Promise<void> {
-  if (gTitleLast === document.title || gUrlLast === location.href || !(await getIsExtensionEnabled())) {
-    return;
-  }
-
-  gTitleLast = document.title;
-  gUrlLast = location.href;
-
-  addSupportButtonIfNeeded();
-}
-
-function injectStyles(): void {
-  const elStyle = document.createElement("style");
-  elStyle.textContent = textStyle;
-  document.head.append(elStyle);
-}
-
-async function init(): Promise<void> {
-  const isHideDonationSection = await storageSync.get<boolean>("isHideDonationSection");
-  if (isHideDonationSection) {
-    return;
-  }
-
-  injectStyles();
-  gObserverNavigation = await addGlobalEventListener(addTemporaryBodyListener);
-
-  // When the user visits a /watch page, the support button
-  // will be added if the user hasn't clicked on one yet
-  new MutationObserver(async (_, observer) => {
-    const elContainer = getVisibleElement(SELECTORS.relatedVideos);
-    if (!(await getIsExtensionEnabled()) || !elContainer) {
-      return;
-    }
-
-    observer.disconnect();
-
-    addSupportButtonIfNeeded();
-  }).observe(document, OBSERVER_OPTIONS);
-
-  storageSync.watch({
-    isHideDonationSection() {
-      gObserverNavigation.disconnect();
-      gElSupportSection?.remove();
-    }
-  });
-}
-
-init();
-
-export const config: PlasmoCSConfig = {
-  matches: ["https://www.youtube.com/*"]
-};