diff --git a/astro.config.mjs b/astro.config.mjs
index 8fe0d18..1917423 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -18,7 +18,7 @@ export default defineConfig({
   site: "https://aria.coffee",
   integrations: [
     preact(),
-    tailwind(),
+    // tailwind(),
     icon(),
     mdx(),
     matomo({
diff --git a/src/components/FriendLink.astro b/src/components/FriendLink.astro
index 5147e56..a13d485 100644
--- a/src/components/FriendLink.astro
+++ b/src/components/FriendLink.astro
@@ -3,14 +3,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="max" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
+<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} sizes={"0.5x 1x 2x 4x"} class="flex" quality="max" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
-        min-width: 88px;
+        min-width: 176px;
         width: 176px;
-        min-height: 31px;
+        max-width: 176px;
+        min-height: 62px;
         height: 62px;
-        padding: 4px;
+        max-height: 62px;
+        scale: 1;
     }
 </style>
\ No newline at end of file
diff --git a/src/components/FriendLinkHigh.astro b/src/components/FriendLinkHigh.astro
index e9035b0..1e89f08 100644
--- a/src/components/FriendLinkHigh.astro
+++ b/src/components/FriendLinkHigh.astro
@@ -3,14 +3,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="high" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
+<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="high" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
-        min-width: 88px;
+        min-width: 176px;
         width: 176px;
-        min-height: 31px;
+        max-width: 176px;
+        min-height: 62px;
         height: 62px;
+        max-height: 62px;
         padding: 4px;
     }
 </style>
\ No newline at end of file
diff --git a/src/components/FriendLinkLow.astro b/src/components/FriendLinkLow.astro
index 063af7d..22b56e1 100644
--- a/src/components/FriendLinkLow.astro
+++ b/src/components/FriendLinkLow.astro
@@ -3,14 +3,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={['avif', 'webp']} /></a>
+<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
-        min-width: 88px;
+        min-width: 176px;
         width: 176px;
-        min-height: 31px;
+        max-width: 176px;
+        min-height: 62px;
         height: 62px;
+        max-height: 62px;
         padding: 4px;
     }
 </style>
\ No newline at end of file
diff --git a/src/components/FriendLinkLowAnimated.astro b/src/components/FriendLinkLowAnimated.astro
index 0f9bfa1..a886eb0 100644
--- a/src/components/FriendLinkLowAnimated.astro
+++ b/src/components/FriendLinkLowAnimated.astro
@@ -3,14 +3,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>
+<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="low" decoding="async" loading="lazy" formats={['webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
-        min-width: 88px;
+        min-width: 176px;
         width: 176px;
-        min-height: 31px;
+        max-width: 176px;
+        min-height: 62px;
         height: 62px;
+        max-height: 62px;
         padding: 4px;
     }
 </style>
\ No newline at end of file
diff --git a/src/components/FriendLinkMid.astro b/src/components/FriendLinkMid.astro
index 9334fad..6785db3 100644
--- a/src/components/FriendLinkMid.astro
+++ b/src/components/FriendLinkMid.astro
@@ -3,14 +3,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={['avif', 'webp']} /></a>
+<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['avif', 'webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
-        min-width: 88px;
+        min-width: 176px;
         width: 176px;
-        min-height: 31px;
+        max-width: 176px;
+        min-height: 62px;
         height: 62px;
+        max-height: 62px;
         padding: 4px;
     }
 </style>
\ No newline at end of file
diff --git a/src/components/FriendLinkMidAnimated.astro b/src/components/FriendLinkMidAnimated.astro
index c39aab3..b716c47 100644
--- a/src/components/FriendLinkMidAnimated.astro
+++ b/src/components/FriendLinkMidAnimated.astro
@@ -3,14 +3,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>
+<a href={`${target}`} target="_blank"><Picture src={image} width=176 height=62 alt={`${name}`} class="flex" quality="mid" decoding="async" loading="lazy" formats={['webp']} /></a>
 <style>
     img {
         image-rendering: pixelated;
-        min-width: 88px;
+        min-width: 176px;
         width: 176px;
-        min-height: 31px;
+        max-width: 176px;
+        min-height: 62px;
         height: 62px;
+        max-height: 62px;
         padding: 4px;
     }
 </style>
\ No newline at end of file