diff --git a/frontend/src/components/atoms/Header1.tsx b/frontend/src/components/atoms/Header1.tsx
new file mode 100644
index 0000000..e8c1880
--- /dev/null
+++ b/frontend/src/components/atoms/Header1.tsx
@@ -0,0 +1,16 @@
+import { FC, HTMLProps } from "react";
+import clsx from "clsx";
+
+const styleClasses = {
+  base: "text-3xl font-bold mt-12 mb-8",
+};
+
+const Header1: FC<HTMLProps<HTMLParagraphElement>> = (props) => {
+  return (
+    <h1 className={clsx(styleClasses.base, props.className)}>
+      {props.children}
+    </h1>
+  );
+};
+
+export default Header1;