diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro
index 833be3d..8dcd4de 100644
--- a/src/components/blog/HighlightedPosts.astro
+++ b/src/components/blog/HighlightedPosts.astro
@@ -1,5 +1,5 @@
 ---
-import { Image } from "@astrojs/image/components";
+import Picture from "~/components/core/Picture.astro";
 
 import { findPostsByIds } from "~/utils/posts";
 import { findImage } from "~/utils/images";
@@ -36,11 +36,13 @@ const items = await Promise.all(
     {
       items.map((post) => (
         <article class="mb-6 transition">
-          <Image
+          <Picture
             src={post.image}
             class="object-cover w-full h-64 mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-            width={400}
+            widths={[400, 900]}
+            sizes="(max-width: 900px) 400px, 900px"
             alt={post.title}
+            aspectRatio="16:9"
           />
           <h3 class="mb-2 text-xl font-bold leading-snug sm:text-2xl font-heading">
             <a
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
index afcba37..ef38a93 100644
--- a/src/components/blog/ListItem.astro
+++ b/src/components/blog/ListItem.astro
@@ -1,5 +1,5 @@
 ---
-import { Image } from "@astrojs/image/components";
+import Picture from "~/components/core/Picture.astro";
 import PostTags from "~/components/atoms/Tags.astro";
 
 import { getPermalink } from "~/utils/permalinks";
@@ -16,11 +16,13 @@ const image = await findImage(post.image);
     <div
       class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-80 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded shadow-lg"
     >
-      <Image
+      <Picture
         src={image}
         class="absolute inset-0 object-cover w-full h-full mb-6 rounded shadow-lg bg-gray-400 dark:bg-slate-700"
-        width={400}
+        widths={[400, 900]}
+        sizes="(max-width: 900px) 400px, 900px"
         alt={post.title}
+        aspectRatio="16:9"
       />
     </div>
   </a>
diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
index 2490e60..cde38e1 100644
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@@ -5,7 +5,7 @@ const { meta } = Astro.props;
 ---
 
 <Layout meta={meta}>
-  <section class="px-8 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
+  <section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-3xl">
     <header>
       <h1
         class="text-center text-4xl md:text-5xl font-bold leading-tighter tracking-tighter mb-8 md:mb-16 font-heading"