diff --git a/src/components/FriendLinkLow.astro b/src/components/FriendLinkLow.astro
new file mode 100644
index 0000000..0f9bfa1
--- /dev/null
+++ b/src/components/FriendLinkLow.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
new file mode 100644
index 0000000..c39aab3
--- /dev/null
+++ b/src/components/FriendLinkMid.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