diff --git a/src/components/Card.astro b/src/components/Card.astro
new file mode 100644
index 0000000..e41b36c
--- /dev/null
+++ b/src/components/Card.astro
@@ -0,0 +1,40 @@
+---
+import Datetime from "./Datetime";
+import type { BlogFrontmatter } from "@content/schemas";
+
+export interface Props {
+  href?: string;
+  frontmatter: BlogFrontmatter;
+  secHeading?: boolean;
+}
+
+const { href, frontmatter, secHeading } = Astro.props;
+
+const { title, publishDatetime, description } = frontmatter;
+---
+
+<li class="card-container">
+  <a href={href} class="card-link">
+    {
+      secHeading ? (
+        <h2 class="card-heading">{title}</h2>
+      ) : (
+        <h3 class="card-heading">{title}</h3>
+      )
+    }
+  </a>
+  <Datetime datetime={publishDatetime} />
+  <p>{description}</p>
+</li>
+
+<style>
+  .card-container {
+    @apply my-6;
+  }
+  .card-link {
+    @apply text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:no-underline focus-visible:underline-offset-0 inline-block;
+  }
+  .card-heading {
+    @apply font-medium text-lg decoration-dashed hover:underline;
+  }
+</style>
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
deleted file mode 100644
index 446a6ab..0000000
--- a/src/components/Card.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import Datetime from "./Datetime";
-import type { Frontmatter } from "src/types";
-
-export interface Props {
-  href?: string;
-  post: Frontmatter;
-  secHeading?: boolean;
-}
-
-const styles = {
-  cardContainer: "my-6",
-  titleLink:
-    "text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:no-underline focus-visible:underline-offset-0 inline-block",
-  titleHeading: "font-medium text-lg decoration-dashed hover:underline",
-};
-
-export default function Card({ href, post, secHeading = true }: Props) {
-  return (
-    <li className={styles.cardContainer}>
-      <a href={href} className={styles.titleLink}>
-        {secHeading ? (
-          <h2 className={styles.titleHeading}>{post.title}</h2>
-        ) : (
-          <h3 className={styles.titleHeading}>{post.title}</h3>
-        )}
-      </a>
-      <Datetime datetime={post.datetime} />
-      <p>{post.description}</p>
-    </li>
-  );
-}