diff --git a/src/app/components/Heading/Heading.stories.tsx b/src/app/components/Heading/Heading.stories.tsx
new file mode 100644
index 0000000..7e58fa7
--- /dev/null
+++ b/src/app/components/Heading/Heading.stories.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { style } from "typestyle";
+
+import { Color } from "../../constants";
+import { Heading } from "./Heading";
+
+const h4Style = style({
+  alignItems: "center",
+  color: Color.GREY
+});
+
+export default {
+  component: Heading,
+  title: "Heading"
+};
+
+// Card component should be called here instead of h1 / h2,
+export const myHeading = () => (
+  <Heading>
+    <h1>Create New Feature</h1>
+    <h2 className={h4Style}>You can create runs later.</h2>
+  </Heading>
+);
diff --git a/src/app/components/Heading/Heading.tsx b/src/app/components/Heading/Heading.tsx
new file mode 100644
index 0000000..0cdd46e
--- /dev/null
+++ b/src/app/components/Heading/Heading.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from "react";
+import { style } from "typestyle";
+
+import { Spacing } from "../../constants";
+
+interface IProps {
+  children: JSX.Element[] | JSX.Element;
+}
+
+
+const headingStyle = style({
+  padding: Spacing.S
+});
+
+export const Heading: FunctionComponent<IProps> = (prop) => {
+  const { children } = prop;
+  return (
+    <div className={headingStyle}>
+      {children}
+    </div>
+
+  );
+};