diff --git a/src/components/ItemCard.astro b/src/components/ItemCard.astro
index eb8fcf1..1bb5f7f 100644
--- a/src/components/ItemCard.astro
+++ b/src/components/ItemCard.astro
@@ -1,4 +1,5 @@
 ---
+import { Image } from 'astro:assets';
 import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
 
 interface Props {
@@ -16,7 +17,7 @@ interface Props {
 const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
 ---
 <div class="item-card" data-id={Astro.props.id}>
-    <img class="item-card-image" src={Astro.props.image} />
+    <Image class="item-card-image" src={Astro.props.image} alt={Astro.props.id} width={512} height={512} />
     <div class="item-card-main-field">
         <form method="post">
             <input type="hidden" name="id" value={Astro.props.id} />
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 641d013..b38b04a 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -1,5 +1,6 @@
 ---
 import { ObjectId } from 'mongodb';
+import { Image } from 'astro:assets';
 import { checkForUnreadMails } from '../lib/db/mails';
 import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
 
@@ -160,8 +161,8 @@ const hasUnreadMail = await checkForUnreadMails(new ObjectId(userId));
                 <li class="nav-item"><a href={element.url} class={`nav-url ${active === element.id ? "active" : ""}`}>{element.title}</a></li>
             )}
             <li class="nav-item"><span class="nav-username nav-keep-right">{username}</span></li>
-            {loggedIn === "true" ? <li class="nav-item"><img src="/gargamel.png" class="avatar-icon" /></li> : ""}
-            {loggedIn === "true" ? <li class="nav-item"><a href="/game/mail"><img src={`/mail${hasUnreadMail ? "-notif" : ""}.svg?${new Date().getTime()}`} class="mail-icon" /></a></li> : ""}
+            {loggedIn === "true" ? <li class="nav-item"><Image src="/gargamel.png" alt="profile-pic" width={179} height={178} class="avatar-icon" /></li> : ""}
+            {loggedIn === "true" ? <li class="nav-item"><a href="/game/mail"><Image src={`/mail${hasUnreadMail ? "-notif" : ""}.svg?${new Date().getTime()}`} alt="mail" width={800} height={800} class="mail-icon" /></a></li> : ""}
         </ul>
     </div>
     <div class="row">
@@ -225,6 +226,7 @@ nav ul {
 }
 
 .avatar-icon {
+    width: 50px;
     height: 50px;
     border-radius: 50%;
     border: 1px solid white;
@@ -233,6 +235,7 @@ nav ul {
 }
 
 .mail-icon {
+    width: 50px;
     height: 50px;
     border-radius: 50%;
     /* border: 1px solid white; */
diff --git a/src/components/ResourceBar.astro b/src/components/ResourceBar.astro
index 38cafc0..f3f83c8 100644
--- a/src/components/ResourceBar.astro
+++ b/src/components/ResourceBar.astro
@@ -1,5 +1,6 @@
 ---
 import { ObjectId } from 'mongodb';
+import { Image } from 'astro:assets';
 import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
 import { getAllResources } from '../lib/db/resources';
 import locationManager from '../lib/classes/managers/LocationManager';
@@ -30,7 +31,7 @@ for(const key of planet.resources.resources) {
           data-res-amount={res.amount}
           data-res-mining-rate={res.perHourMiningRate}
         >
-            <img src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} class="icon" />
+            <Image src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} class="icon" width={32} height={32} />
             <div class="text" data-resname={res.id}>
                 <span class="line1">{getName(lang, 'resources', res.id)}</span>
                 <span class="line2"></span>
@@ -133,10 +134,6 @@ for(const key of planet.resources.resources) {
     margin-bottom: 8px;
 }
 
-.resourcebar-item-icon img {
-    width: 100%;
-}
-
 .resourcebar-item-text-wrapper {
     display: flex;
     flex-direction: column;