diff --git a/.vscode/settings.json b/.vscode/settings.json
index 05e8977..ce9d5b4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,6 +2,7 @@
     "conventionalCommits.scopes": [
         "FriendLink.astro",
         "astro.config.mjs",
-        ".vscode"
+        ".vscode",
+        "NavHeader.astro"
     ]
 }
\ No newline at end of file
diff --git a/src/components/NavHeader.astro b/src/components/NavHeader.astro
index 3afa557..fd9fb01 100644
--- a/src/components/NavHeader.astro
+++ b/src/components/NavHeader.astro
@@ -1,12 +1,16 @@
 ---
-import { Picture } from "astro:assets";
+import { Picture, getImage } from "astro:assets";
 import pfp from "../img/sites/avatar.png";
 import Partition from "./Partition.astro";
+
+import myBackground from "../img/sites/avatar-ht-f.png"
+
+const optimizedBackground = await getImage({src: myBackground, format: 'avif', quality: 40, width: 680})
 ---
 
 <div
-    class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center backdrop-blur-3xl bg-center bg-[url('/static/img/sites/avatar-ht-f.webp')]"
-    style="width: 670px; border: 1px solid var(--border);"
+    style={`width: 670px; border: 1px solid var(--border); background-image: url('${optimizedBackground.src}');`}
+    class="rounded-2xl flex flex-col shadow-xl shadow-black py-8 mb-8 items-center bg-center bg-cover"
     >
     <Picture
         src={pfp}
diff --git a/src/img/sites/avatar-ht-f.png b/src/img/sites/avatar-ht-f.png
new file mode 100644
index 0000000..2af38e1
Binary files /dev/null and b/src/img/sites/avatar-ht-f.png differ