diff --git a/blog/app/author/[author]/[[...page]]/page.tsx b/blog/app/author/[author]/[[...page]]/page.tsx
index a09ceec..5716c61 100644
--- a/blog/app/author/[author]/[[...page]]/page.tsx
+++ b/blog/app/author/[author]/[[...page]]/page.tsx
@@ -1,12 +1,8 @@
 /* eslint-disable sonarjs/no-duplicate-string */
 /* eslint-disable sonarjs/no-nested-template-literals */
-import { formatRecord } from 'ens-tools/dist/format';
 import { ResolvingMetadata } from 'next';
-import Link from 'next/link';
-import { ReactElement } from 'react';
-import { FaDiscord, FaTelegram } from 'react-icons/fa';
-import { FiGithub, FiGlobe, FiMail } from 'react-icons/fi';
 
+import { Author } from '@/components/Author';
 import { PageButtons } from '@/components/PageButtons';
 import { BlogPostPreview } from '@/components/PostPreview';
 import { getAuthorMetadata } from '@/lib/get_author_metadata';
@@ -94,119 +90,9 @@ const page = async ({ params }: PageProperties) => {
     return (
         <div className="mt-2">
             <h1 className="mb-4 text-3xl font-extrabold">
-                {params.author}’s articles
+                {params.author}'s articles
             </h1>
-            <div className="flex rounded-lg bg-white p-2">
-                <div className="aspect-square h-full w-32 sm:w-48">
-                    <img
-                        src={
-                            'https://metadata.ens.domains/mainnet/avatar/' +
-                            params.author
-                        }
-                        alt={params.author}
-                        className="rounded-lg"
-                    />
-                </div>
-                <div className="flex flex-1 flex-col justify-between p-4 sm:flex-row">
-                    <div className="flex flex-col justify-center gap-1">
-                        <div className="text-2xl font-bold">
-                            {params.author}
-                        </div>
-
-                        {author_metadata?.records.description && (
-                            <div>{author_metadata.records.description}</div>
-                        )}
-
-                        {params.author.endsWith('.eth') && (
-                            <Link
-                                href={'https://' + params.author + '.link'}
-                                className="text-ens-blue"
-                                target="_blank"
-                            >
-                                {params.author + '.link'}
-                            </Link>
-                        )}
-                    </div>
-                    <div className="flex h-fit gap-2 text-xl">
-                        {(
-                            [
-                                [
-                                    'com.twitter',
-                                    'https://x.com/' +
-                                        formatRecord(
-                                            'com.twitter',
-                                            author_metadata.records[
-                                                'com.twitter'
-                                            ]
-                                        ),
-                                    <span className="-mr-1 flex aspect-square w-5 items-center justify-center leading-3">
-                                        {'𝕏'}
-                                    </span>,
-                                ],
-                                [
-                                    'email',
-                                    'mailto:' +
-                                        author_metadata.records['email'],
-                                    <FiMail />,
-                                ],
-                                [
-                                    'org.telegram',
-                                    'https://t.me/' +
-                                        formatRecord(
-                                            'org.telegram',
-                                            author_metadata.records[
-                                                'org.telegram'
-                                            ]
-                                        ),
-                                    <FaTelegram />,
-                                ],
-                                [
-                                    'url',
-                                    author_metadata.records.url,
-                                    <FiGlobe />,
-                                ],
-                                [
-                                    'com.github',
-                                    'https://github.com/' +
-                                        formatRecord(
-                                            'com.github',
-                                            author_metadata.records[
-                                                'com.github'
-                                            ]
-                                        ),
-                                    <FiGithub />,
-                                ],
-                                [
-                                    'com.discord',
-                                    formatRecord(
-                                        'com.discord',
-                                        author_metadata.records['com.discord']
-                                    ),
-                                    <FaDiscord />,
-                                ],
-                            ] as [
-                                keyof typeof author_metadata.records,
-                                string,
-                                ReactElement
-                            ][]
-                        )
-                            .filter(
-                                ([record, url, _element]) =>
-                                    author_metadata.records[record] && !!url
-                            )
-                            .map(([record, url, element]) => (
-                                <Link
-                                    href={url}
-                                    key={record}
-                                    target="_blank"
-                                    className="hover:text-ens-blue"
-                                >
-                                    {element}
-                                </Link>
-                            ))}
-                    </div>
-                </div>
-            </div>
+            <Author name={params.author} />
             <ul className="mt-6 grid grid-cols-1 gap-2 sm:grid-cols-2">
                 {posts.map((post) => (
                     <li key={post.slug} className="w-full">
diff --git a/blog/app/post/[...slug]/page.tsx b/blog/app/post/[...slug]/page.tsx
index c1ed721..4a264f9 100644
--- a/blog/app/post/[...slug]/page.tsx
+++ b/blog/app/post/[...slug]/page.tsx
@@ -5,6 +5,7 @@ import { Fragment, JSX } from 'react';
 import { Article, WithContext } from 'schema-dts';
 
 import { PostCoverImage } from '@/components/post/PostCoverImage';
+import { PostFooter } from '@/components/post/PostFooter';
 import { PostHeader } from '@/components/post/PostHeader';
 import { getPostBySlug } from '@/lib/get_post_by_slug';
 import { getPostsMetadata } from '@/lib/get_posts';
@@ -122,6 +123,7 @@ const page = async ({ params }: PageProperties) => {
                     {/* Hydration errors occur when PostContent is the only child in the parent div. */}
                     <Fragment />
                 </div>
+                <PostFooter post={post} />
             </article>
         </section>
     );
diff --git a/blog/public/icons/x.svg b/blog/public/icons/x.svg
new file mode 100644
index 0000000..56368dd
--- /dev/null
+++ b/blog/public/icons/x.svg
@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="black"/>
+</svg>
diff --git a/blog/src/components/Author.tsx b/blog/src/components/Author.tsx
new file mode 100644
index 0000000..575bb0a
--- /dev/null
+++ b/blog/src/components/Author.tsx
@@ -0,0 +1,198 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { avatars } from 'assets/assets';
+import { formatRecord } from 'ens-tools/dist/format';
+import Link from 'next/link';
+import { FC } from 'react';
+import { ReactElement } from 'react';
+import { FaDiscord, FaTelegram } from 'react-icons/fa';
+import { FiGithub, FiGlobe, FiMail, FiUser } from 'react-icons/fi';
+
+import { cx } from '@/lib/cx';
+import { getAuthorMetadata } from '@/lib/get_author_metadata';
+
+type ENStateResponse = {
+    name: string;
+    address: string;
+    avatar: string;
+    display: string;
+};
+
+export const Author: FC<{
+    name: string;
+    socials?: boolean;
+    size?: 'normal' | 'small';
+    link?: boolean;
+}> = async ({ name, socials = true, size = 'normal', link = false }) => {
+    const author_metadata = await getAuthorMetadata(name);
+
+    let avatar = avatars[name as keyof typeof avatars]
+        ? await avatars[name as keyof typeof avatars].avatar.then(
+              (imported) => imported.default.src
+          )
+        : undefined;
+
+    if (!avatar) {
+        const response = await fetch('https://enstate.rs/n/' + name);
+
+        const data: ENStateResponse | undefined =
+            response.status === 200 ? await response.json() : undefined;
+
+        if (response.status != 200) {
+            console.error('Enstate silently errored', response.body);
+        }
+
+        avatar = data?.avatar;
+    }
+
+    if (!avatar) {
+        const metadataResponse = await fetch(
+            `https://metadata.ens.domains/mainnet/avatar/${name}`,
+            { method: 'HEAD' }
+        );
+
+        if (metadataResponse.status === 200) {
+            avatar = `https://metadata.ens.domains/mainnet/avatar/${name}`;
+        }
+    }
+
+    return (
+        <div className="relative flex items-center rounded-lg bg-white p-2 sm:items-stretch">
+            {link && (
+                <Link href={'/author/' + name} className="absolute inset-0" />
+            )}
+            <div
+                className={cx(
+                    'aspect-square sm:flex-1',
+                    size === 'normal'
+                        ? 'min-w-[8rem] max-w-[8rem] xs:max-w-[10rem] sm:max-w-[12rem]'
+                        : 'w-32'
+                )}
+            >
+                {avatar ? (
+                    <img src={avatar} alt={name} className="rounded-lg" />
+                ) : (
+                    <div
+                        className={
+                            'flex aspect-square h-12 w-12 items-center justify-center rounded-full text-white'
+                        }
+                        style={{
+                            background:
+                                'linear-gradient(330.4deg, #44BCF0 4.54%, #7298F8 59.2%, #A099FF 148.85%)',
+                        }}
+                    >
+                        <FiUser />
+                    </div>
+                )}
+            </div>
+            <div
+                className={cx(
+                    'flex flex-1 flex-col justify-between min-w-0 sm:flex-row',
+                    size === 'normal' ? 'p-4' : 'p-2 pl-4'
+                )}
+            >
+                <div className="flex min-w-0 flex-col justify-center gap-1">
+                    <div className="overflow-x-hidden text-ellipsis text-2xl font-bold">
+                        {name}
+                    </div>
+
+                    {author_metadata?.records.description && (
+                        <div className="overflow-x-hidden text-ellipsis">
+                            {author_metadata.records.description}
+                        </div>
+                    )}
+
+                    {name.endsWith('.eth') && (
+                        <Link
+                            href={'https://' + name + '.link'}
+                            className="text-ens-blue z-10 overflow-x-hidden text-ellipsis hover:opacity-90"
+                            target="_blank"
+                        >
+                            {name + '.link'}
+                        </Link>
+                    )}
+                </div>
+
+                {socials && (
+                    <div className="flex h-fit gap-2 text-xl">
+                        {(
+                            [
+                                [
+                                    'com.twitter',
+                                    'https://x.com/' +
+                                        formatRecord(
+                                            'com.twitter',
+                                            author_metadata.records[
+                                                'com.twitter'
+                                            ]
+                                        ),
+                                    <span className="-mr-1 flex aspect-square w-5 items-center justify-center leading-3">
+                                        {'𝕏'}
+                                    </span>,
+                                ],
+                                [
+                                    'email',
+                                    'mailto:' +
+                                        author_metadata.records['email'],
+                                    <FiMail />,
+                                ],
+                                [
+                                    'org.telegram',
+                                    'https://t.me/' +
+                                        formatRecord(
+                                            'org.telegram',
+                                            author_metadata.records[
+                                                'org.telegram'
+                                            ]
+                                        ),
+                                    <FaTelegram />,
+                                ],
+                                [
+                                    'url',
+                                    author_metadata.records.url,
+                                    <FiGlobe />,
+                                ],
+                                [
+                                    'com.github',
+                                    'https://github.com/' +
+                                        formatRecord(
+                                            'com.github',
+                                            author_metadata.records[
+                                                'com.github'
+                                            ]
+                                        ),
+                                    <FiGithub />,
+                                ],
+                                [
+                                    'com.discord',
+                                    formatRecord(
+                                        'com.discord',
+                                        author_metadata.records['com.discord']
+                                    ),
+                                    <FaDiscord />,
+                                ],
+                            ] as [
+                                keyof typeof author_metadata.records,
+                                string,
+                                ReactElement
+                            ][]
+                        )
+                            .filter(
+                                ([record, url, _element]) =>
+                                    author_metadata.records[record] && !!url
+                            )
+                            .map(([record, url, element]) => (
+                                <Link
+                                    href={url}
+                                    key={record}
+                                    target="_blank"
+                                    className="hover:text-ens-blue"
+                                >
+                                    {element}
+                                </Link>
+                            ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
diff --git a/blog/src/components/post/PostFooter.tsx b/blog/src/components/post/PostFooter.tsx
new file mode 100644
index 0000000..06f3ed6
--- /dev/null
+++ b/blog/src/components/post/PostFooter.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import Image from 'next/image';
+import { FaFacebookF, FaLinkedin } from 'react-icons/fa';
+
+import { BlogPostMetadata } from '@/types/BlogPostMetadata';
+
+import xLogo from '../../../public/icons/x.svg';
+import { Author } from '../Author';
+import { BigTag } from '../tags/BigTag';
+
+export const PostFooter = ({ post }: { post: BlogPostMetadata }) => {
+    return (
+        <div className="not-prose mx-auto mt-6 flex w-full max-w-3xl flex-col gap-4">
+            {/* add a horizontal line to indicate start of footer */}
+            <hr className="my-6 border-t-2" />
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                {post.authors.map((author) => (
+                    <Author name={author} socials={false} size="small" link />
+                ))}
+            </div>
+            <div className="flex flex-col items-center gap-4 rounded-lg bg-white p-2 sm:flex-row sm:justify-between">
+                {/* insert share buttons for twitter, linkedin and facebook */}
+
+                <div className="my-2 flex flex-wrap justify-center gap-2">
+                    {post.tags.map((tag) => (
+                        <BigTag tag={tag} />
+                    ))}
+                </div>
+                <div className="flex flex-1 items-center justify-end gap-4 pr-2 text-xl">
+                    <a
+                        href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
+                            post.title + ' | ENS Blog'
+                        )}&url=${encodeURIComponent(
+                            'https://blog.ens.domains/post/' + post.slug
+                        )}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex w-5 items-center"
+                    >
+                        <Image src={xLogo} alt="X logo" />
+                    </a>
+                    <a
+                        href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+                            'https://blog.ens.domains/post/' + post.slug
+                        )}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center"
+                    >
+                        <FaFacebookF />
+                    </a>
+                    <a
+                        href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
+                            'https://blog.ens.domains/post/' + post.slug
+                        )}&title=${encodeURIComponent(
+                            post.title + ' | ENS Blog'
+                        )}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="mt-[1px] flex items-center text-[23px]"
+                    >
+                        <FaLinkedin />
+                    </a>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/blog/tailwind.config.js b/blog/tailwind.config.js
index 3f1c97e..9fee88a 100644
--- a/blog/tailwind.config.js
+++ b/blog/tailwind.config.js
@@ -60,6 +60,9 @@ module.exports = {
             borderRadius: {
                 ens: '16px',
             },
+            screens: {
+                xs: '448px',
+            },
         },
     },
 };