diff --git a/public/images/content/whiskey-1.avif b/public/images/content/whiskey-1.avif
new file mode 100644
index 0000000..667eb24
Binary files /dev/null and b/public/images/content/whiskey-1.avif differ
diff --git a/public/images/content/whiskey-2.avif b/public/images/content/whiskey-2.avif
new file mode 100644
index 0000000..5edaba2
Binary files /dev/null and b/public/images/content/whiskey-2.avif differ
diff --git a/public/images/content/whiskey-3.avif b/public/images/content/whiskey-3.avif
new file mode 100644
index 0000000..7884ef1
Binary files /dev/null and b/public/images/content/whiskey-3.avif differ
diff --git a/src/components/Drinks.astro b/src/components/Drinks.astro
index 469e99a..3c5edec 100644
--- a/src/components/Drinks.astro
+++ b/src/components/Drinks.astro
@@ -28,15 +28,15 @@ const { id } = Astro.props;
 
     <div class="circle-row">
         <div class="circle whiskey-circle" title="Whiskey 1">
-            <img src="/images/Whiskey1.png" alt="Whiskey 1" class="circle-image" />
+            <img src="/images/content/whiskey-1.avif" alt="Whiskey 1" class="circle-image" />
             <span class="circle-label"></span>
         </div>
         <div class="circle whiskey-circle" title="Whiskey 2">
-            <img src="/images/Whiskey2.png" alt="Whiskey 2" class="circle-image" />
+            <img src="/images/content/whiskey-2.avif" alt="Whiskey 2" class="circle-image" />
             <span class="circle-label"></span>
         </div>
         <div class="circle whiskey-circle" title="Whiskey 3">
-            <img src="/images/Whiskey3.png" alt="Whiskey 3" class="circle-image" />
+            <img src="/images/content/whiskey-3.avif" alt="Whiskey 3" class="circle-image" />
             <span class="circle-label"></span>
         </div>
     </div>