diff --git a/src/components/donate.astro b/src/components/donate.astro
deleted file mode 100644
index a3e791e..0000000
--- a/src/components/donate.astro
+++ /dev/null
@@ -1,56 +0,0 @@
----
-import { Container } from '@/components/container';
----
-
-<Container>
-  <section class="wrapper">
-    <p class="text">
-      Enjoy Moodist? <a
-        href="https://buymeacoffee.com/remvze"
-        rel="noreferrer"
-        target="_blank"
-      >
-        Support with a donation!
-      </a>
-    </p>
-  </section>
-</Container>
-
-<style>
-  .wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: 16px;
-    font-size: var(--font-xsm);
-    color: var(--color-foreground-subtle);
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      width: 80%;
-      height: 1px;
-      content: '';
-      background: linear-gradient(
-        90deg,
-        transparent,
-        var(--color-neutral-200),
-        transparent
-      );
-      transform: translateX(-50%);
-    }
-
-    & .text {
-      text-align: center;
-
-      & a {
-        font-weight: 500;
-        color: var(--color-foreground);
-        text-decoration: none;
-      }
-    }
-  }
-</style>
diff --git a/src/components/donate/donate.module.css b/src/components/donate/donate.module.css
new file mode 100644
index 0000000..aaf64c5
--- /dev/null
+++ b/src/components/donate/donate.module.css
@@ -0,0 +1,36 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 16px;
+  font-size: var(--font-xsm);
+  color: var(--color-foreground-subtle);
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 80%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-200),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+
+  & .text {
+    text-align: center;
+
+    & a {
+      font-weight: 500;
+      color: var(--color-foreground);
+      text-decoration: none;
+    }
+  }
+}
diff --git a/src/components/donate/donate.tsx b/src/components/donate/donate.tsx
new file mode 100644
index 0000000..bd7f4c4
--- /dev/null
+++ b/src/components/donate/donate.tsx
@@ -0,0 +1,22 @@
+import { Container } from '@/components/container';
+
+import styles from './donate.module.css';
+
+export function Donate() {
+  return (
+    <Container>
+      <section className={styles.wrapper}>
+        <p className={styles.text}>
+          Enjoy Moodist?{' '}
+          <a
+            href="https://buymeacoffee.com/remvze"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Support with a donation!
+          </a>
+        </p>
+      </section>
+    </Container>
+  );
+}
diff --git a/src/components/donate/index.ts b/src/components/donate/index.ts
new file mode 100644
index 0000000..a37b9c0
--- /dev/null
+++ b/src/components/donate/index.ts
@@ -0,0 +1 @@
+export { Donate } from './donate';
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7b96646..5b13ab8 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,11 +1,11 @@
 ---
 import Layout from '@/layouts/layout.astro';
-import Donate from '@/components/donate.astro';
 import Footer from '@/components/footer.astro';
 
 import { Hero } from '@/components/hero';
 import { App } from '@/components/app';
 import { Source } from '@/components/source';
+import { Donate } from '@/components/donate';
 ---
 
 <Layout title="Moodist: Ambient Sounds for Focus and Calm">