diff --git a/src/components/ArrowUpRightIcon.astro b/src/components/ArrowUpRightIcon.astro
deleted file mode 100644
index e31ce3f..0000000
--- a/src/components/ArrowUpRightIcon.astro
+++ /dev/null
@@ -1,24 +0,0 @@
----
-interface Props {
-  size?: number;
-  class?: string;
-}
-
-const { size = 16, class: className } = Astro.props;
----
-
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width={size}
-  height={size}
-  fill="none"
-  stroke="currentColor"
-  stroke-linecap="round"
-  stroke-linejoin="round"
-  stroke-width="2"
-  viewBox="0 0 24 24"
-  class={className}
->
-  <path stroke="none" d="M0 0h24v24H0z"></path>
-  <path d="M17 7 7 17M8 7h9v9"></path>
-</svg>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index daaecf3..7c8f9ef 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,8 +3,8 @@ import { SITE_TITLE } from "../consts";
 import LedgerLabel from "./LedgerLabel.astro";
 ---
 
-<header class="flex flex-col pb-4">
-  <a class="inline-block text-lg font-medium no-underline" href="/">
+<header class="flex flex-col">
+  <a class="text-lg font-medium no-underline" href="/">
     {SITE_TITLE}
   </a>
   <LedgerLabel as="span">Frontend Engineer</LedgerLabel>
diff --git a/src/components/LedgerLabel.astro b/src/components/LedgerLabel.astro
index 8651302..56ec378 100644
--- a/src/components/LedgerLabel.astro
+++ b/src/components/LedgerLabel.astro
@@ -5,7 +5,7 @@ interface Props {
   class?: string;
 }
 
-const { as: Tag = "span", href, class: className } = Astro.props;
+const { as: Tag = "span", href, class: className } = Astro.props as Props;
 const classes =
   "text-ledger-muted font-sans text-sm font-medium uppercase tracking-wide leading-6";
 const classList = [classes, className];
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
index 53e1290..2c4ae15 100644
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -22,7 +22,7 @@ const { title, description, pubDate, href, featured = false } = Astro.props;
         <span class="font-medium">{title}</span>
         {
           featured && (
-            <span class="text-gray-1000 border-ledger-line rounded-full border px-2 py-0.5 font-mono text-[10px] tracking-[0.18em] uppercase">
+            <span class="text-gray-1000 border-ledger-line rounded-full border px-1.5 py-0.5 font-mono text-[9px] tracking-[0.18em] uppercase sm:px-2 sm:text-[10px]">
               Featured
             </span>
           )
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 5d8d8ab..d64a6f1 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -7,9 +7,9 @@ import Header from "../components/Header.astro";
     class="bg-page-bg pointer-events-none fixed top-0 left-0 z-50 h-14 w-full backdrop-blur-xl [-webkit-mask-image:linear-gradient(to_bottom,black,transparent)]"
   >
   </div>
-  <div class="mx-auto w-full max-w-[980px] px-6 py-16 sm:py-20">
+  <div class="mx-auto w-full max-w-4xl px-6 py-16 sm:py-20">
     <Header />
-    <main class="mt-10 space-y-6">
+    <main class="mt-14 space-y-6">
       <slot />
     </main>
   </div>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 841c764..aec0092 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -17,8 +17,8 @@ const { title, description, pubDate, updatedDate } = Astro.props;
 
   <BaseLayout>
     <div class="space-y-6">
-      <section class="grid grid-cols-[140px_1fr] gap-6">
-        <LedgerLabel as="div">Meta</LedgerLabel>
+      <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
+        <LedgerLabel as="div" class="hidden sm:block">Meta</LedgerLabel>
         <div class="space-y-2">
           <h1 class="text-gray-1200 text-2xl font-medium">{title}</h1>
           <div class="text-gray-1100 font-mono text-sm">
@@ -33,8 +33,8 @@ const { title, description, pubDate, updatedDate } = Astro.props;
           }
         </div>
       </section>
-      <section class="grid grid-cols-[140px_1fr] gap-6">
-        <LedgerLabel as="div">Content</LedgerLabel>
+      <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
+        <LedgerLabel as="div" class="hidden sm:block">Content</LedgerLabel>
         <article class="prose dark:prose-invert">
           <slot />
         </article>
diff --git a/src/layouts/Talk.astro b/src/layouts/Talk.astro
index 0db1cfd..5869a0b 100644
--- a/src/layouts/Talk.astro
+++ b/src/layouts/Talk.astro
@@ -18,8 +18,8 @@ const { title, description, pubDate, updatedDate, event, slides, recording } =
 
   <BaseLayout>
     <div class="space-y-6">
-      <section class="grid grid-cols-[140px_1fr] gap-6">
-        <LedgerLabel as="div">Meta</LedgerLabel>
+      <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
+        <LedgerLabel as="div" class="hidden sm:block">Meta</LedgerLabel>
         <div class="space-y-2">
           <h1 class="text-gray-1200 text-2xl font-medium">{title}</h1>
           <div class="text-gray-1100 font-mono text-sm">
@@ -61,8 +61,8 @@ const { title, description, pubDate, updatedDate, event, slides, recording } =
           }
         </div>
       </section>
-      <section class="grid grid-cols-[140px_1fr] gap-6">
-        <LedgerLabel as="div">Content</LedgerLabel>
+      <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
+        <LedgerLabel as="div" class="hidden sm:block">Content</LedgerLabel>
         <article class="prose dark:prose-invert">
           <slot />
         </article>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0b1cc56..ee352fd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -10,7 +10,6 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 import SectionHeading from "../components/SectionHeading.astro";
 import PostCard from "../components/PostCard.astro";
 import SubtleLink from "../components/SubtleLink.astro";
-import ArrowUpRightIcon from "../components/ArrowUpRightIcon.astro";
 import "../styles/base.css";
 ---
 
@@ -20,7 +19,7 @@ import "../styles/base.css";
   </head>
   <BaseLayout>
     <!-- About Section -->
-    <section class="grid grid-cols-[140px_1fr] gap-6">
+    <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
       <SectionHeading title="About" />
       <p class="text-gray-1100 leading-7">
         I'm Gui, a Frontend Engineer focused on crafting polished and user-first
@@ -39,7 +38,7 @@ import "../styles/base.css";
     </section>
 
     <!-- Currently Section -->
-    <section class="grid grid-cols-[140px_1fr] gap-6">
+    <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
       <SectionHeading title="Currently" />
       <div class="text-gray-1100 space-y-4 leading-7">
         <p>
@@ -64,7 +63,7 @@ import "../styles/base.css";
     </section>
 
     <!-- Writing Section -->
-    <section class="grid grid-cols-[140px_1fr] gap-6">
+    <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
       <SectionHeading title="Writing" href="/writing" />
       <ul>
         {
@@ -82,7 +81,7 @@ import "../styles/base.css";
     </section>
 
     <!-- Talks Section -->
-    <section class="grid grid-cols-[140px_1fr] gap-6">
+    <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
       <SectionHeading title="Talks" href="/talks" />
       <ul>
         {
diff --git a/src/pages/talks.astro b/src/pages/talks.astro
index a75c85f..b54dc0c 100644
--- a/src/pages/talks.astro
+++ b/src/pages/talks.astro
@@ -12,7 +12,7 @@ import { SITE_DESCRIPTION, talksSortedByPubDate } from "../consts";
     <BaseHead title="Talks" description={SITE_DESCRIPTION} />
   </head>
   <BaseLayout>
-    <section class="grid grid-cols-[140px_1fr] gap-6">
+    <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
       <SectionHeading title="Talks" />
       <ul class="space-y-3">
         {
diff --git a/src/pages/writing.astro b/src/pages/writing.astro
index b7ac7f9..86d3e6b 100644
--- a/src/pages/writing.astro
+++ b/src/pages/writing.astro
@@ -12,7 +12,7 @@ import { SITE_DESCRIPTION, postsSortedByPubDate } from "../consts";
     <BaseHead title="Writing" description={SITE_DESCRIPTION} />
   </head>
   <BaseLayout>
-    <section class="grid grid-cols-[140px_1fr] gap-6">
+    <section class="grid grid-cols-1 gap-6 sm:grid-cols-[140px_1fr]">
       <SectionHeading title="Writing" />
       <ul class="space-y-3">
         {