diff --git a/public/static/img/88x31/BuhMoe.png b/public/static/img/88x31/BuhMoe.png
new file mode 100644
index 0000000..d52b509
Binary files /dev/null and b/public/static/img/88x31/BuhMoe.png differ
diff --git a/src/components/FriendLink.astro b/src/components/FriendLink.astro
index 1b2820d..5147e56 100644
--- a/src/components/FriendLink.astro
+++ b/src/components/FriendLink.astro
@@ -3,7 +3,7 @@ import { Image, Picture } from "astro:assets";
 
 const { name, image, target } = Astro.props;
 ---
-<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="max" decoding="async" loading="lazy" formats={['webp']} /></a>
+<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="max" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
diff --git a/src/components/FriendLinkHigh.astro b/src/components/FriendLinkHigh.astro
index eaced05..e9035b0 100644
--- a/src/components/FriendLinkHigh.astro
+++ b/src/components/FriendLinkHigh.astro
@@ -3,7 +3,7 @@ import { Image, Picture } from "astro:assets";
 
 const { name, image, target } = Astro.props;
 ---
-<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="high" decoding="async" loading="lazy" formats={['webp']} /></a>
+<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="high" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
diff --git a/src/components/FriendLinkLow.astro b/src/components/FriendLinkLow.astro
index 0f9bfa1..063af7d 100644
--- a/src/components/FriendLinkLow.astro
+++ b/src/components/FriendLinkLow.astro
@@ -3,7 +3,7 @@ import { Image, Picture } from "astro:assets";
 
 const { name, image, target } = Astro.props;
 ---
-<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['webp']} /></a>
+<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
diff --git a/src/components/FriendLinkLowAnimated.astro b/src/components/FriendLinkLowAnimated.astro
new file mode 100644
index 0000000..0f9bfa1
--- /dev/null
+++ b/src/components/FriendLinkLowAnimated.astro
@@ -0,0 +1,16 @@
+---
+import { Image, Picture } from "astro:assets";
+
+const { name, image, target } = Astro.props;
+---
+<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['webp']} /></a>
+<style>
+    img {
+        image-rendering: pixelated;
+        min-width: 88px;
+        width: 176px;
+        min-height: 31px;
+        height: 62px;
+        padding: 4px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/FriendLinkMid.astro b/src/components/FriendLinkMid.astro
index c39aab3..9334fad 100644
--- a/src/components/FriendLinkMid.astro
+++ b/src/components/FriendLinkMid.astro
@@ -3,7 +3,7 @@ import { Image, Picture } from "astro:assets";
 
 const { name, image, target } = Astro.props;
 ---
-<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['webp']} /></a>
+<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
diff --git a/src/components/FriendLinkMidAnimated.astro b/src/components/FriendLinkMidAnimated.astro
new file mode 100644
index 0000000..c39aab3
--- /dev/null
+++ b/src/components/FriendLinkMidAnimated.astro
@@ -0,0 +1,16 @@
+---
+import { Image, Picture } from "astro:assets";
+
+const { name, image, target } = Astro.props;
+---
+<a href={`${target}`} target="_blank"><Picture src={image} width={88} height={31} alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['webp']} /></a>
+<style>
+    img {
+        image-rendering: pixelated;
+        min-width: 88px;
+        width: 176px;
+        min-height: 31px;
+        height: 62px;
+        padding: 4px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index cc8c776..6686545 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -7,6 +7,8 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 import FriendLink from "../components/FriendLinkHigh.astro";
 import FriendLinkMid from "../components/FriendLinkMid.astro";
 import FriendLinkLow from "../components/FriendLinkLow.astro";
+import FriendLinkLowAnimated from "../components/FriendLinkLowAnimated.astro";
+import FriendLinkMidAnimated from "../components/FriendLinkMidAnimated.astro";
 const pageTitle = "Aria";
 
 const currentDate = new Date();
@@ -73,9 +75,9 @@ const age = seconds / 31556952;
                     target="https://ata.moe"
                 />
             </div>
-            <FriendLink
+            <FriendLinkLow
                 name="Amemoia"
-                image="https://buh.moe/resources/buttons/88x31.gif"
+                image="/static/img/88x31/BuhMoe.png"
                 target="https://buh.moe/"
             />
             <FriendLink
@@ -93,7 +95,7 @@ const age = seconds / 31556952;
                 image="https://notnite.com/buttons/notnite.png"
                 target="https://notnite.com/"
             />
-            <FriendLinkLow
+            <FriendLinkLowAnimated
                 name="0x5066"
                 image="https://erisdump.neocities.org/buttons/88x31_2.gif"
                 target="https://erisdump.neocities.org"
@@ -124,12 +126,12 @@ const age = seconds / 31556952;
                 target="https://meow-d.github.io/"
             />
             <div class="outline-dashed flex outline-3 mx-1">
-                <FriendLink
+                <FriendLinkMidAnimated
                     name="~thermia"
                     image="https://girlthi.ng/~thermia/img/88x31/thermia.gif"
                     target="https://girlthi.ng/~thermia/"
                 />
-                <FriendLink
+                <FriendLinkMidAnimated
                     name="girlthi.ng"
                     image="https://girlthi.ng/~thermia/img/88x31/girlthing.gif"
                     target="https://girlthi.ng/"