diff --git a/src/components/Markdown.astro b/src/components/Markdown.astro
new file mode 100644
index 0000000..6d8cd4c
--- /dev/null
+++ b/src/components/Markdown.astro
@@ -0,0 +1,70 @@
+---
+import Base from "./Base.astro";
+
+import Box2x1Mask from "/assets/box-2x1-mask.png";
+import Hr from "/assets/hr.png";
+
+import "/components/markdown.css";
+
+interface Props {
+  frontmatter: {
+    title: string;
+    graph?: {
+      description: string;
+      type?: "website" | "article" | `${"music" | "video"}.${string}`;
+      image?: string;
+    };
+  };
+}
+
+const { frontmatter } = Astro.props;
+---
+
+<Base
+  title={frontmatter.title}
+  graph={{
+    description: "",
+    ...frontmatter.graph,
+    url: Astro.url.toString(),
+  }}
+>
+  <header style={`--box-2x1-mask-png: url(${Box2x1Mask.src});`}>
+    {frontmatter.graph?.image && <img src={frontmatter.graph.image} alt="" />}
+    <h1>{frontmatter.title}</h1>
+  </header>
+  
+  <hr style={`--hr-png: url(${Hr.src});`} />
+
+  <article>
+    <slot />
+  </article>
+</Base>
+
+<style>
+  header {
+    max-width: 60ch;
+    padding: 10px;
+    margin: auto;
+  }
+
+  img {
+    width: 100%;
+    aspect-ratio: 2;
+    object-fit: cover;
+    mask-image: var(--box-2x1-mask-png);
+    mask-size: 100%;
+  }
+
+  hr {
+    margin-block: 5px;
+    height: 5px;
+    border: none;
+    border-image: var(--hr-png) 0 5 fill / 0 5px round;
+    width: clamp(60ch, 80vw, 120ch);
+    margin-inline: auto;
+
+    @media (max-width: 60ch) {
+      width: 100%;
+    }
+  }
+</style>