diff --git a/astro.config.mjs b/astro.config.mjs
index e762ba5..99fe4a6 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,14 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import { defineConfig } from "astro/config";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  image: {
+    // Used for all Markdown images; not configurable per-image
+    // Used for all `<Image />` and `<Picture />` components unless overridden with a prop
+    experimentalLayout: "responsive",
+  },
+  experimental: {
+    responsiveImages: true,
+  },
+});
diff --git a/src/components/Header.astro b/src/components/Header.astro
index e3dd68b..01e4d36 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -14,7 +14,7 @@ const backgroundColorNightMode = "#240046";
 
 <header id="top">
 	<span class="logo">
-		{pageTitle} <Image class="header-heart-svg" src={transPrideFlag} alt="the transgender pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={biPrideFlag} alt="the bisexual pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={disabilityPrideFlag} alt="the disability pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={redHeartFlat} alt="a red heart meant to symbolize love" />
+		{pageTitle} <Image class="header-heart-svg" src={transPrideFlag} alt="the transgender pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={biPrideFlag} alt="the bisexual pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={disabilityPrideFlag} alt="the disability pride flag styled with css to look like a heart" /><Image class="header-heart-svg" src={redHeartFlat} alt="a red heart meant to symbolize love" layout="none"/>
 	</span>
 	<span class="motto">
         {motto}
diff --git a/src/components/WidgetBar.astro b/src/components/WidgetBar.astro
index baa56ff..8f2e883 100644
--- a/src/components/WidgetBar.astro
+++ b/src/components/WidgetBar.astro
@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 
-import catImg from "../images/widgets/cat.gif";
+import catImg from "../images/widgets/cat.webp";
 
 const backgroundColor = "#ffd4de";
 const backgroundColorNightMode = "#240046";
@@ -27,7 +27,7 @@ const backgroundColorNightMode = "#240046";
 
     .cat-widget {
         background-color: var(--backgroundColor);
-        height: 19vw;
+        height: auto;
         width: 20vw;
         border-radius: 25px;
         display: flex;
@@ -35,6 +35,10 @@ const backgroundColorNightMode = "#240046";
         align-items: center;
     }
 
+    img {
+        margin-bottom: 0.25rem;
+    }
+
     @media (prefers-color-scheme: dark) {
         .widget {
             background-color: var(--backgroundColorNightMode);
diff --git a/src/images/widgets/cat.gif b/src/images/widgets/cat.gif
deleted file mode 100644
index bb10a0b..0000000
Binary files a/src/images/widgets/cat.gif and /dev/null differ
diff --git a/src/images/widgets/cat.webp b/src/images/widgets/cat.webp
new file mode 100644
index 0000000..bbef507
Binary files /dev/null and b/src/images/widgets/cat.webp differ