diff --git a/frontend/__tests__/components/features/home/home-header.test.tsx b/frontend/__tests__/components/features/home/home-header.test.tsx
index 9bb5dbe8fc..ce8ead23ff 100644
--- a/frontend/__tests__/components/features/home/home-header.test.tsx
+++ b/frontend/__tests__/components/features/home/home-header.test.tsx
@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import { setupStore } from "test-utils";
 import { describe, expect, it, vi } from "vitest";
-import { HomeHeader } from "#/components/features/home/home-header";
+import { HomeHeader } from "#/components/features/home/home-header/home-header";
 
 // Mock the translation function
 vi.mock("react-i18next", async () => {
diff --git a/frontend/src/components/features/home/guide-message.tsx b/frontend/src/components/features/home/guide-message.tsx
deleted file mode 100644
index d54feaed7d..0000000000
--- a/frontend/src/components/features/home/guide-message.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useTranslation } from "react-i18next";
-
-export function GuideMessage() {
-  const { t } = useTranslation();
-
-  return (
-    <div className="px-4 md:px-0 w-full flex items-center justify-center">
-      <div className="w-fit flex items-center justify-center gap-1 px-[15px] rounded-[12px] bg-[#454545] leading-5 text-white text-[15px] font-normal md:h-9.5 m-1">
-        <div className="pb-1 md:py-0">
-          <span className="">{t("HOME$GUIDE_MESSAGE_TITLE")} </span>
-          <a
-            href="https://docs.all-hands.dev/usage/getting-started"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <span className="underline">{t("COMMON$CLICK_HERE")}</span>
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/features/home/home-header.tsx b/frontend/src/components/features/home/home-header.tsx
deleted file mode 100644
index 4b9a267ff5..0000000000
--- a/frontend/src/components/features/home/home-header.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { GuideMessage } from "./guide-message";
-
-export function HomeHeader() {
-  const { t } = useTranslation();
-
-  return (
-    <header className="flex flex-col items-center">
-      <GuideMessage />
-      <div className="mt-12 flex flex-col gap-4 items-center">
-        <div className="h-[80px] flex items-center">
-          <span className="text-[32px] text-white font-bold leading-5">
-            {t("HOME$LETS_START_BUILDING")}
-          </span>
-        </div>
-      </div>
-    </header>
-  );
-}
diff --git a/frontend/src/components/features/home/home-header/guide-message.tsx b/frontend/src/components/features/home/home-header/guide-message.tsx
new file mode 100644
index 0000000000..e8001d8aa8
--- /dev/null
+++ b/frontend/src/components/features/home/home-header/guide-message.tsx
@@ -0,0 +1,18 @@
+import { useTranslation } from "react-i18next";
+
+export function GuideMessage() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="w-fit flex flex-col md:flex-row items-start md:items-center justify-center gap-1 rounded-[12px] bg-[#454545] leading-5 text-white text-[15px] font-normal m-1 md:h-9.5 px-4 pb-1 md:px-[15px] md:py-0">
+      <span className="">{t("HOME$GUIDE_MESSAGE_TITLE")} </span>
+      <a
+        href="https://docs.all-hands.dev/usage/getting-started"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span className="underline">{t("COMMON$CLICK_HERE")}</span>
+      </a>
+    </div>
+  );
+}
diff --git a/frontend/src/components/features/home/home-header/home-header-title.tsx b/frontend/src/components/features/home/home-header/home-header-title.tsx
new file mode 100644
index 0000000000..c95ca97de1
--- /dev/null
+++ b/frontend/src/components/features/home/home-header/home-header-title.tsx
@@ -0,0 +1,12 @@
+import { useTranslation } from "react-i18next";
+import { Typography } from "#/ui/typography";
+
+export function HomeHeaderTitle() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="h-[80px] flex items-center">
+      <Typography.H1>{t("HOME$LETS_START_BUILDING")}</Typography.H1>
+    </div>
+  );
+}
diff --git a/frontend/src/components/features/home/home-header/home-header.tsx b/frontend/src/components/features/home/home-header/home-header.tsx
new file mode 100644
index 0000000000..a66ef1a8e8
--- /dev/null
+++ b/frontend/src/components/features/home/home-header/home-header.tsx
@@ -0,0 +1,11 @@
+import { GuideMessage } from "./guide-message";
+import { HomeHeaderTitle } from "./home-header-title";
+
+export function HomeHeader() {
+  return (
+    <header className="flex flex-col items-center gap-12">
+      <GuideMessage />
+      <HomeHeaderTitle />
+    </header>
+  );
+}
diff --git a/frontend/src/routes/home.tsx b/frontend/src/routes/home.tsx
index 641078ee25..3f106b5d9e 100644
--- a/frontend/src/routes/home.tsx
+++ b/frontend/src/routes/home.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { PrefetchPageLinks } from "react-router";
-import { HomeHeader } from "#/components/features/home/home-header";
+import { HomeHeader } from "#/components/features/home/home-header/home-header";
 import { RepoConnector } from "#/components/features/home/repo-connector";
 import { TaskSuggestions } from "#/components/features/home/tasks/task-suggestions";
 import { GitRepository } from "#/types/git";
diff --git a/frontend/src/ui/typography.tsx b/frontend/src/ui/typography.tsx
new file mode 100644
index 0000000000..b0db531106
--- /dev/null
+++ b/frontend/src/ui/typography.tsx
@@ -0,0 +1,53 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "#/utils/utils";
+
+const typographyVariants = cva("", {
+  variants: {
+    variant: {
+      h1: "text-[32px] text-white font-bold leading-5",
+    },
+  },
+  defaultVariants: {
+    variant: "h1",
+  },
+});
+
+interface TypographyProps extends VariantProps<typeof typographyVariants> {
+  className?: string;
+  testId?: string;
+  children: React.ReactNode;
+}
+
+export function Typography({
+  variant,
+  className,
+  testId,
+  children,
+}: TypographyProps) {
+  const Tag = variant as keyof React.JSX.IntrinsicElements;
+
+  return (
+    <Tag
+      data-testid={testId}
+      className={cn(typographyVariants({ variant }), className)}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+// Export individual heading components for convenience
+export function H1({
+  className,
+  testId,
+  children,
+}: Omit<TypographyProps, "variant">) {
+  return (
+    <Typography variant="h1" className={className} testId={testId}>
+      {children}
+    </Typography>
+  );
+}
+
+// Attach H1 to Typography for the expected API
+Typography.H1 = H1;