diff --git a/.gitignore b/.gitignore
index 50d51def952814c9c13ea3fa3985e5c8de6dd516..c649bf5263c1961b0ca0c8e1195fb7828c6c4d14 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 node_modules
 dist
 pnpm-lock.yaml
+package-lock.json
 .DS_Store
 .idea
 .vscode
diff --git a/packages/mini-markdown-material/src/components/H2/h2.tsx b/packages/mini-markdown-material/src/components/H2/h2.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3cfccc6d18914c45f618495b40e27bbbfe3fc62b
--- /dev/null
+++ b/packages/mini-markdown-material/src/components/H2/h2.tsx
@@ -0,0 +1,36 @@
+import { FC } from 'react'
+import styled from 'styled-components'
+
+const HeadingStyle = styled.h1`
+  font-size: 1.5em;
+  text-align: center;
+  color: palevioletred;
+`;
+
+const Heading: FC<{
+  level: number,
+  children: React.ReactNode
+}> = ({ level, children }) => {
+  switch (level) {
+    case 1:
+      return <HeadingStyle>
+        <h1># {children}</h1>
+      </HeadingStyle>
+    case 2:
+      return <h2>## {children}</h2>
+    case 3:
+      return <h3>### {children}</h3>
+    case 4:
+      return <h4>#### {children}</h4>
+    case 5:
+      return <h5>##### {children}</h5>
+    case 6:
+      return <h6>###### {children}</h6>
+    default:
+      return <></>
+  }
+}
+
+export {
+  Heading
+}