diff --git a/quartz.layout.ts b/quartz.layout.ts
index 97e41f296..b645b1626 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -20,6 +20,7 @@ export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
     Component.Breadcrumbs(),
     Component.ArticleTitle(),
+    Component.ArticleSubtitle(),
     Component.ContentMeta(),
     Component.TagList(),
   ],
diff --git a/quartz/components/ArticleSubtitle.tsx b/quartz/components/ArticleSubtitle.tsx
new file mode 100644
index 000000000..0213ca0fe
--- /dev/null
+++ b/quartz/components/ArticleSubtitle.tsx
@@ -0,0 +1,21 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+
+const ArticleSubtitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
+  const subtitle = fileData.frontmatter?.subtitle
+  if (subtitle) {
+    return <h3 class={classNames(displayClass, "article-subtitle")}>{subtitle}</h3>
+  } else {
+    return null
+  }
+}
+
+ArticleSubtitle.css = `
+.article-subtitle {
+  margin: 0.5rem 0 0 0;
+  color: var(--gray);
+  font-weight: normal;
+}
+`
+
+export default (() => ArticleSubtitle) satisfies QuartzComponentConstructor
\ No newline at end of file
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index b3db76bed..4975faa2d 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -3,6 +3,7 @@ import TagContent from "./pages/TagContent"
 import FolderContent from "./pages/FolderContent"
 import NotFound from "./pages/404"
 import ArticleTitle from "./ArticleTitle"
+import ArticleSubtitle from "./ArticleSubtitle"
 import Darkmode from "./Darkmode"
 import Head from "./Head"
 import PageTitle from "./PageTitle"
@@ -22,6 +23,7 @@ import Breadcrumbs from "./Breadcrumbs"
 
 export {
   ArticleTitle,
+  ArticleSubtitle,
   Content,
   TagContent,
   FolderContent,