diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
index 18c2b1c..c4f6c7c 100644
--- a/src/components/blog/ListItem.astro
+++ b/src/components/blog/ListItem.astro
@@ -60,6 +60,14 @@ const link = APP_BLOG?.post?.isEnabled ? getPermalink(post.permalink, 'post') :
               </>
             )
           }
+          {
+            post.author && (
+              <>
+                {' '}
+                · <span>{post.author.replaceAll('-', ' ')}</span>
+              </>
+            )
+          }
         </span>
       </div>
       <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro
index 6744720..cba4d61 100644
--- a/src/components/blog/SinglePost.astro
+++ b/src/components/blog/SinglePost.astro
@@ -40,6 +40,16 @@ const { Content } = post;
           {post.readingTime && <> · {post.readingTime} min read</>}
         </p>
       </div>
+      {
+        post.author && (
+          <div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
+            <p>
+              <Icon name="tabler:user" class="w-4 h-4 inline-block -mt-0.5 dark:text-gray-400" />
+              {post.author}
+            </p>
+          </div>
+        )
+      }
       <h1
         class="px-4 sm:px-6 max-w-3xl mx-auto text-4xl md:text-5xl font-bold leading-tighter tracking-tighter font-heading"
       >
@@ -74,13 +84,7 @@ const { Content } = post;
     <div
       class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
     >
-      {
-        Content ? (
-          <Content />
-        ) : (
-          <Fragment set:html={post.content || ""} />
-        )
-      }
+      {Content ? <Content /> : <Fragment set:html={post.content || ''} />}
     </div>
     <div class="mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
       <PostTags tags={post.tags} class="mr-5 rtl:mr-0 rtl:ml-5" />
diff --git a/src/content/post/get-started-website-with-astro-tailwind-css.md b/src/content/post/get-started-website-with-astro-tailwind-css.md
index 0602021..2c88722 100644
--- a/src/content/post/get-started-website-with-astro-tailwind-css.md
+++ b/src/content/post/get-started-website-with-astro-tailwind-css.md
@@ -1,5 +1,6 @@
 ---
 publishDate: 2023-08-12T00:00:00Z
+author: John Smith
 title: Get started with AstroWind to create a website using Astro and Tailwind CSS
 excerpt: Start your web journey with AstroWind – harness Astro and Tailwind CSS for a stunning site. Explore our guide now.
 image: https://images.unsplash.com/photo-1516996087931-5ae405802f9f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80