diff --git a/src/components/Author.tsx b/src/components/Author.tsx
new file mode 100644
index 0000000..f575ea9
--- /dev/null
+++ b/src/components/Author.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import Image from 'next/image'
+import type { Author } from 'types/payload-types'
+
+interface Props {
+  author: Author
+}
+
+const AuthorComponent: React.FC<Props> = ({ author }) => {
+  return (
+    <>
+      {author && (
+        <div className="flex gap-6 border-t-2 border-secondary py-4 text-secondary">
+          {typeof author.avatar === 'object' && (
+            <Image
+              src={author.avatar.url || ''}
+              width={150}
+              height={150}
+              alt={author.avatar.alt || ''}
+              layout="fixed"
+            />
+          )}
+          <div className="flex flex-col">
+            <h3 className="font-semibold text-base">{author.name}</h3>
+            <p className="text-sm font-light">{author.bio}</p>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default AuthorComponent