diff --git a/public/ayoayco-avatar.jpg b/public/ayoayco-avatar.jpg
new file mode 100644
index 0000000..5ac6c29
Binary files /dev/null and b/public/ayoayco-avatar.jpg differ
diff --git a/src/components/blog/BaseHead.astro b/src/components/blog/BaseHead.astro
index 02ea55d..1af1815 100644
--- a/src/components/blog/BaseHead.astro
+++ b/src/components/blog/BaseHead.astro
@@ -21,7 +21,7 @@ description = title === SITE_TITLE
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
 <meta name="generator" content={Astro.generator} />
 
 <!-- Font preloads -->
diff --git a/src/consts.ts b/src/consts.ts
index 1628819..efa8b59 100644
--- a/src/consts.ts
+++ b/src/consts.ts
@@ -1,5 +1,6 @@
 export const SITE_TITLE = 'Cozy Blog';
 export const SITE_AUTHOR = 'Ayo Ayco';
+export const SITE_AUTHOR_URL = 'https://ayo.ayco.io';
 export const SITE_AUTHOR_MASTODON = 'https://social.ayco.io/@ayo';
 export const SITE_PROJECT_REPO = 'https://github.com/ayoayco/Cozy';
 export const SITE_DESCRIPTION = 'The Web is Yours.';
diff --git a/src/content/blog/building-a-cozy-web.md b/src/content/blog/building-a-cozy-web.md
index da57784..038b3b2 100644
--- a/src/content/blog/building-a-cozy-web.md
+++ b/src/content/blog/building-a-cozy-web.md
@@ -5,7 +5,7 @@ pubDate: 'Aug 14 2024'
 heroImage: '/cozy.jpg'
 ---
 
-> This was originally posted on [Ayo's Blog](https://ayos.blog/building-a-cozy-web).
+> This was originally posted on [Ayo's Blog](https://ayos.blog/building-a-cozy-web) last Jun 1, 2023.
 
 Have you ever clicked a link to an article, all hyped up to read the content, only to be slapped in the face with popups over popups of requests to subscribe and asking consent to track you with cookies?
 
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 5555d42..5fc4831 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -4,6 +4,7 @@ import Header from "../components/blog/Header.astro";
 import Footer from "../components/blog/Footer.astro";
 import FormattedDate from "../components/blog/FormattedDate.astro";
 import type { CollectionEntry } from "astro:content";
+import { SITE_AUTHOR, SITE_AUTHOR_URL } from "../consts";
 
 type Props = CollectionEntry<"blog">["data"];
 
@@ -17,8 +18,30 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 			main {
 				width: calc(100% - 2em);
 				max-width: 100%;
-				margin: 0;
+				margin: 0 auto;
 			}
+
+			& .cta-wrapper {
+				width: 100%;
+				text-align: center;
+				padding: 1em 0;
+			}
+
+			& span.primary-btn {
+				background-color: rgba(var(--black), 95%);
+				box-shadow: 0 2px 8px rgba(var(--black), 5%);
+				color: white;
+				border-radius: 5px;
+				display: inline-block;
+				text-align: center;
+				padding: 0 0.5em;
+			}
+
+			& span.primary-btn:hover {
+				background-color: var(--accent);
+				box-shadow: 0 2px 8px var(--accent);
+			}
+
 			.hero-image {
 				width: 100%;
 			}
@@ -26,13 +49,12 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 				display: block;
 				margin: 0 auto;
 				border-radius: 12px;
-				box-shadow: var(--box-shadow);
 			}
 			.prose {
 				width: 720px;
 				max-width: calc(100% - 2em);
 				margin: auto;
-				padding: 1em;
+				padding: 0 1em;
 				color: rgb(var(--gray-dark));
 			}
 			.title {
@@ -40,9 +62,23 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 				padding: 1em 0;
 				text-align: center;
 				line-height: 1;
-			}
-			.title h1 {
-				margin: 0 0 0.5em 0;
+
+				& .avatar {
+					width: 32px;
+					height: 32px;
+					border-radius: 50%;
+					display: inline;
+					/* height: calc(1rem + 6px); */
+					margin: 0 0.5rem;
+					margin-bottom: -10px;
+				}
+
+				& a[rel='author'] {
+					color: rgb(var(--black));
+				}
+				& a[rel='author']:hover {
+					color: var(--accent);
+				}
 			}
 			.date {
 				margin-bottom: 0.5em;
@@ -93,11 +129,19 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 							}
 						</div>
 						<h1>{title}</h1>
-						<hr />
+						<address style="display:inline">
+							By <img class="avatar" src="/ayoayco-avatar.jpg" alt="Ayo Ayco's Avatar" /> <a rel="author" href={ SITE_AUTHOR_URL }>{ SITE_AUTHOR }</a>
+						</address>
 					</div>
 					<slot />
 				</div>
 			</article>
+			<hr />
+			<div class="cta-wrapper">
+				<a href="/">
+					<span class="primary-btn">Get Cozy!</span>
+				</a>
+			</div>
 		</main>
 		<Footer />
 	</body>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 3dca8af..71f95d9 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -17,7 +17,7 @@ const posts = (await getCollection('blog')).sort(
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 		<style>
 			main {
-				width: 960px;
+				width: 700px;
 			}
 			ul {
 				display: flex;
@@ -27,48 +27,54 @@ const posts = (await getCollection('blog')).sort(
 				margin: 0;
 				padding: 0;
 			}
-			ul li {
-				width: calc(50% - 1rem);
-			}
 			ul li * {
 				text-decoration: none;
 				transition: 0.2s ease;
 			}
-			ul li:first-child {
+			.card {
+				border: 1px solid rgb(var(--gray));
+				border-radius: 12px;
 				width: 100%;
+				padding: 1em;
 				margin-bottom: 1rem;
 				text-align: center;
+				color: rgb(var(--black));
+				position: relative;
+				background-color: white;
 			}
-			ul li:first-child img {
+
+			.card img {
 				width: 100%;
 				max-width: 800px;
 			}
-			ul li:first-child .title {
+
+			.card .title {
 				font-size: 2.369rem;
-			}
-			ul li img {
-				margin-bottom: 0.5rem;
-				border-radius: 12px;
-			}
-			ul li a {
-				display: block;
-			}
-			.title {
-				margin: 0;
+				margin: 1rem;
 				color: rgb(var(--black));
 				line-height: 1;
 			}
+
+			.card h4 a::after {
+				position: absolute;
+				left: 0;
+				top: 0;
+				right: 0;
+				bottom: 0;
+				cursor: pointer;
+			}
+
+			.card h4 a {
+				color: blue;
+			}
+			.card h4:hover a {
+				text-decoration: underline;
+			}
+
 			.date {
 				margin: 0;
 				color: rgb(var(--gray));
 			}
-			ul li a:hover h4,
-			ul li a:hover .date {
-				color: rgb(var(--accent));
-			}
-			ul a:hover img {
-				box-shadow: var(--box-shadow);
-			}
 			@media (max-width: 720px) {
 				ul {
 					gap: 0.5em;
@@ -93,18 +99,23 @@ const posts = (await getCollection('blog')).sort(
 				<ul>
 					{
 						posts.map((post) => (
-							<li>
-								<a href={`/blog/${post.slug}/`}>
-									{
+							<li class="card">
+									{/* {
 									 post.data.heroImage
 									 	?	<img width={720} height={360} src={post.data.heroImage} alt="" />
 									 	:	<img width={720} height={360} src="/blog-placeholder-4.jpg" alt="" />
-									}
-									<h4 class="title">{post.data.title}</h4>
-									<p class="date">
+									} */}
+									<small class="date">
 										<FormattedDate date={post.data.pubDate} />
+									</small>
+									<h4 class="title">
+										<a href={`/blog/${post.slug}/`}>
+											{post.data.title}
+										</a>
+									</h4>
+									<p class="description">
+										{post.data.description}
 									</p>
-								</a>
 							</li>
 						))
 					}
diff --git a/src/styles/blog.css b/src/styles/blog.css
index cfcd8e5..5351abc 100644
--- a/src/styles/blog.css
+++ b/src/styles/blog.css
@@ -48,10 +48,10 @@ body {
 }
 
 main {
-	width: 720px;
+	width: 700px;
 	max-width: calc(100% - 2em);
 	margin: auto;
-	padding: 3em 1em;
+	padding: 1em;
 }
 
 h1,
@@ -66,25 +66,25 @@ h6 {
 }
 
 h1 {
-	font-size: 3.052em;
-}
-
-h2 {
 	font-size: 2.441em;
 }
 
-h3 {
+h2 {
 	font-size: 1.953em;
 }
 
-h4 {
+h3 {
 	font-size: 1.563em;
 }
 
-h5 {
+h4 {
 	font-size: 1.25em;
 }
 
+h5 {
+	font-size: 1.15em;
+}
+
 strong,
 b {
 	font-weight: 700;
@@ -101,7 +101,8 @@ a:hover {
 p,
 ul,
 ol,
-table {
+table,
+pre.astro-code {
 	margin-bottom: 1em;
 }
 
@@ -111,7 +112,7 @@ table {
 	& ul,
 	& ol,
 	& table {
-		margin-bottom: 2em;
+		margin-bottom: 1em;
 	}
 }
 
@@ -150,10 +151,10 @@ pre>code {
 }
 
 blockquote {
-	border-left: 4px solid var(--accent);
-	padding: 0 0 0 20px;
+	border-left: 2px solid var(--accent);
+	padding: 0 0 0 1em;
 	margin: 0px;
-	font-size: 1.333em;
+	font-size: 1em;
 }
 
 hr {