diff --git a/packages/astro-ghostcms-theme-default/src/components/AuthorDetailCard.astro b/packages/astro-ghostcms-theme-default/src/components/AuthorDetailCard.astro
new file mode 100644
index 00000000..e4808957
--- /dev/null
+++ b/packages/astro-ghostcms-theme-default/src/components/AuthorDetailCard.astro
@@ -0,0 +1,97 @@
+---
+export type Props = {
+  name: string,
+  image?: string | null,
+  count: number,
+  bio: string | null,
+  location: string | null,
+  website: string | null,
+  twitter: string | null,
+  facebook: string | null
+};
+
+const {
+    name, image, bio, location, website, twitter, facebook, count
+} = Astro.props as Props;
+---
+
+<header class="author-card">
+    { image ? <img src={image} alt="Author Image" class="author-image"> : (
+        <span class="author-image">
+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <g fill="none" fill-rule="evenodd">
+              <path
+                d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z"
+                fill="#FFF"
+              />
+            </g>
+          </svg>
+        </span>
+      )}
+    <div class="author-info">
+        <div class="author-name">{name}</div>
+        <div class="author-bio">
+            {bio ? bio : count > 0? count + " Posts" : "No Posts"}
+        </div>
+
+        {location && (
+            <div class="author-location">
+                📍 {location}
+            </div>
+        )}
+
+        <div class="author-links">
+            {website && (<a href={website} target="_blank" rel="noopener">Website</a>)}
+            {twitter && (<a href={twitter} target="_blank" rel="noopener">Twitter</a>)}
+            {facebook && (<a href={facebook} target="_blank" rel="noopener">Facebook</a>)}
+        </div>
+    </div>
+</header>
+
+<style>
+    .author-card {
+        display: flex;
+        margin-top: 8vmin;
+        margin-bottom: 6vmin;
+        overflow: hidden;
+    }
+
+    .author-image {
+        width: 180px;
+        height: 180px;
+        object-fit: cover;
+        border-radius: 3px;
+    }
+
+    .author-info {
+        flex: 1;
+        padding: 20px;
+        text-align: left;
+    }
+
+    .author-name {
+        font-size: 1.5em;
+        font-weight: bold;
+        margin-bottom: 10px;
+    }
+
+    .author-bio {
+        color: #555;
+        line-height: 1.4;
+    }
+
+    .author-location {
+        margin-top: 10px;
+        color: #888;
+    }
+
+    .author-links {
+        margin-top: 10px;
+    }
+
+    .author-links a {
+        text-decoration: none;
+        color: #3498db;
+        margin-right: 10px;
+    }
+</style>
diff --git a/packages/astro-ghostcms-theme-default/src/routes/author/[slug].astro b/packages/astro-ghostcms-theme-default/src/routes/author/[slug].astro
index 9231a1f4..9eb79ee5 100644
--- a/packages/astro-ghostcms-theme-default/src/routes/author/[slug].astro
+++ b/packages/astro-ghostcms-theme-default/src/routes/author/[slug].astro
@@ -2,6 +2,7 @@
 import type { InferGetStaticParamsType, InferGetStaticPropsType } from 'astro';
 import DefaultPageLayout from "../../layouts/default.astro";
 import PostPreviewList from "../../components/PostPreviewList.astro";
+import AuthorDetailCard from '../../components/AuthorDetailCard.astro';
 import { getAllPosts, getAllAuthors, getSettings, twitter, facebook, invariant } from "@matthiesenxyz/astro-ghostcms/api";
 
 export async function getStaticPaths() {
@@ -39,82 +40,7 @@ const description = `All of the articles we've posted and linked so far under th
   settings={settings}
 >
   <section class="outer author-template">
-    <div class="inner posts">
-      <header class="author-profile">
-        <div class="author-profile-content">
-          {author.profile_image ? (
-            <img
-              class="author-profile-pic"
-              src={author.profile_image}
-              alt={author.name}
-            />
-          ) : (
-            <span class="author-profile-pic">
-              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <g fill="none" fill-rule="evenodd">
-                  <path
-                    d="M3.513 18.998C4.749 15.504 8.082 13 12 13s7.251 2.504 8.487 5.998C18.47 21.442 15.417 23 12 23s-6.47-1.558-8.487-4.002zM12 12c2.21 0 4-2.79 4-5s-1.79-4-4-4-4 1.79-4 4 1.79 5 4 5z"
-                    fill="#FFF"
-                  />
-                </g>
-              </svg>
-            </span>
-          )}
-          <h1>{author.name}</h1>
-          <p>
-            {author.bio
-              ? author.bio
-              : author.count?.posts || 0 > 0
-              ? `${author.count?.posts} Posts`
-              : "No posts"}
-          </p>
-
-          <div class="author-profile-meta">
-            {author.location && (
-              <div class="author-profile-location">📍 {author.location}</div>
-            )}
-
-            {author.website && (
-              <span>
-                <a
-                  class="author-profile-social-link"
-                  href={author.website}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  {author.website}
-                </a>
-              </span>
-            )}
-            {author.twitter && (
-              <span>
-                <a
-                  class="author-profile-social-link"
-                  href={twitter(author.twitter)}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  {author.twitter}
-                </a>
-              </span>
-            )}
-            {author.facebook && (
-              <span>
-                <a
-                  class="author-profile-social-link"
-                  href={facebook(author.facebook)}
-                  target="_blank"
-                  rel="noopener"
-                >
-                  {author.facebook}
-                </a>
-              </span>
-            )}
-          </div>
-        </div>
-      </header>
-
-      <PostPreviewList posts={posts} settings={settings} />
-    </div>
+    <AuthorDetailCard name={author.name} count={author.count?.posts || 0} image={author.profile_image} bio={author.bio} location={author.location} website={author.website} twitter={author.twitter} facebook={author.facebook}/>
+    <PostPreviewList posts={posts} settings={settings} />
   </section>
 </DefaultPageLayout>