diff --git a/assets/scss/content/index.scss b/assets/scss/content/index.scss
index 2d38f0c..4bb8bfc 100644
--- a/assets/scss/content/index.scss
+++ b/assets/scss/content/index.scss
@@ -70,9 +70,12 @@
 				height: 20rem;
 			}
 			.container {
-				flex-flow: row-reverse;
+				flex-flow: row;
 				justify-content: space-between;
 			}
+			.info {
+				flex-grow: 1;
+			}
 		}
 		a {
 			color: white;
diff --git a/layouts/index.html b/layouts/index.html
index c74442d..9766642 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -35,10 +35,16 @@
 	<section class="" id="birdsounds">
 		<div class="container">
 			<div class="info">
-				<img class="logo" src="/images/logos/koken_y.png" alt="birdsounds.media logo">
+				<picture>
+					<source type="image/avif" srcset="/images/logos/koken_y.avif">
+					<img class="logo" src="/images/logos/koken_y.png" alt="birdsounds.media logo">
+				</picture>
 				<a href="https://birdsounds.media" class="">view my photos</a>
 			</div>
-			<img class="photo" src="/images/soulpunx.jpg" alt="#soulpunx">
+			<picture>
+				<source type="image/avif" srcset="/images/soulpunx.avif">
+				<img class="photo" src="/images/soulpunx.jpg" alt="#soulpunx">
+			</picture>
 		</div>
 	</section>
 	<section class="section" id="updates">
diff --git a/static/images/logos/koken_y.avif b/static/images/logos/koken_y.avif
new file mode 100644
index 0000000..0e0ac9c
Binary files /dev/null and b/static/images/logos/koken_y.avif differ
diff --git a/static/images/soulpunx.avif b/static/images/soulpunx.avif
new file mode 100644
index 0000000..a9ecdc0
Binary files /dev/null and b/static/images/soulpunx.avif differ
diff --git a/static/images/soulpunx.jpg b/static/images/soulpunx.jpg
index d7ee08c..567456c 100644
Binary files a/static/images/soulpunx.jpg and b/static/images/soulpunx.jpg differ