diff --git a/src/components/ui/Heading.astro b/src/components/ui/Heading.astro
new file mode 100644
index 0000000..01ae187
--- /dev/null
+++ b/src/components/ui/Heading.astro
@@ -0,0 +1,25 @@
+---
+interface Props {
+	level?: 1 | 2 | 3 | 4 | 5 | 6;
+	classes?: string;
+}
+
+const { level = 2, classes = '', ...rest } = Astro.props as Props;
+
+const HeadingTag = `h${level}` as `h${1 | 2 | 3 | 4 | 5 | 6}`;
+
+const headingStyles = {
+	h1: 'text-4xl md:text-5xl lg:text-7xl font-bold',
+	h2: 'text-3xl md:text-4xl lg:text-5xl font-bold',
+	h3: 'text-2xl font-semibold',
+	h4: 'text-xl font-semibold',
+	h5: 'text-lg font-semibold',
+	h6: 'text-base font-semibold',
+};
+
+const classList = `${headingStyles[HeadingTag]} ${classes}`;
+---
+
+<HeadingTag class={classList.trim()} {...rest}>
+	<slot />
+</HeadingTag>
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..acef35f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 45898cd..821588b 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,10 @@
 ---
 import BaseLayout from '@/layouts/BaseLayout.astro';
+import Heading from '@/components/ui/Heading.astro';
 ---
 
 <BaseLayout title="Astro Deploy">
-	<div class="flex items-center justify-center px-4 pt-48 dark:text-white">Hello World</div>
+	<div class="flex items-center justify-center px-4 pt-48 dark:text-white">
+		<Heading level={1} classes="text-zinc-900 dark:text-zinc-200">Hello World</Heading>
+	</div>
 </BaseLayout>