diff --git a/lazy-timer-fe/src/components/Header.jsx b/lazy-timer-fe/src/components/Header.jsx
new file mode 100644
index 0000000..f88e076
--- /dev/null
+++ b/lazy-timer-fe/src/components/Header.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Header = ({ category, title }) => (
+  <div className=" mb-10">
+    <p className="text-lg text-gray-400">{category}</p>
+    <p className="text-3xl font-extrabold tracking-tight text-slate-900">
+      {title}
+    </p>
+  </div>
+);
+
+export default Header;