diff --git a/src/components/Card.astro b/src/components/Card.astro
deleted file mode 100644
index e41b36c..0000000
--- a/src/components/Card.astro
+++ /dev/null
@@ -1,40 +0,0 @@
----
-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
new file mode 100644
index 0000000..bb2d733
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,32 @@
+import Datetime from "./Datetime";
+import type { BlogFrontmatter } from "@content/_schemas";
+
+export interface Props {
+  href?: string;
+  frontmatter: BlogFrontmatter;
+  secHeading?: boolean;
+}
+
+export default function Card({ href, frontmatter, secHeading = true }: Props) {
+  const { title, pubDatetime, description } = frontmatter;
+  return (
+    <li className="my-6">
+      <a
+        href={href}
+        className="text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:no-underline focus-visible:underline-offset-0 inline-block"
+      >
+        {secHeading ? (
+          <h2 className="font-medium text-lg decoration-dashed hover:underline">
+            {title}
+          </h2>
+        ) : (
+          <h3 className="font-medium text-lg decoration-dashed hover:underline">
+            {title}
+          </h3>
+        )}
+      </a>
+      <Datetime datetime={pubDatetime} />
+      <p>{description}</p>
+    </li>
+  );
+}