diff --git a/src/components/Header.astro b/src/components/Header.astro
index dcf350f..25e343e 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -2,6 +2,8 @@
 interface Props {}
 
 import { getLangFromUrl, useTranslations } from '../i18n/utils';
+import { Image } from 'astro:assets';
+import aux from '../../public/aux.svg';
 
 const lang = getLangFromUrl(Astro.url);
 const translation = useTranslations(lang);
@@ -10,7 +12,7 @@ const translation = useTranslations(lang);
 <header>
 	<div class="left">
 		<a href="https://aux.computer" class="brand">
-			<img class="icon" src="/aux.svg" />
+			<Image class="icon" src={aux} alt="aux.computer logo" />
 			<span class="title">aux.computer</span>
 		</a>
 	</div>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 6acc0f0..3f512dd 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -1,5 +1,7 @@
 ---
 import { getLangFromUrl, useTranslations } from '../i18n/utils';
+import { Image } from 'astro:assets';
+import aux from '../../public/aux.svg';
 
 const lang = getLangFromUrl(Astro.url);
 const translation = useTranslations(lang);
@@ -8,7 +10,7 @@ const translation = useTranslations(lang);
 <div class="hero">
 	<div class="content">
 		<div class="icon">
-			<img src="/aux.svg" alt="" />
+			<Image src={aux} alt="aux.computer logo" />
 		</div>
 		<h1 class="title">aux.computer</h1>
 		<div class="description">{translation("root.description")}</div>