diff --git a/public/min/background-min.webp b/public/min/background-min.webp
new file mode 100755
index 0000000..62d6284
Binary files /dev/null and b/public/min/background-min.webp differ
diff --git a/src/app.tsx b/src/app.tsx
index 90a69a7..c7c973c 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -11,13 +11,7 @@ export function App() {
     <>
       <div className="flex flex-col min-h-[100dvh] relative">
         <Background />
-        <div className="absolute inset-0 z-0 pointer-events-none">
-          {/** Very light gradients overlaying the image */}
-          <div className="absolute inset-0 bg-gradient-to-b from-transparent to-[#1a2e1a] z-10 opacity-0"></div>
-          <div className="absolute inset-0 bg-gradient-to-t from-transparent to-[#1a2e1a] z-10 opacity-0"></div>
-          <div className="absolute inset-0 bg-gradient-to-r from-transparent to-[#1a2e1a] z-10 opacity-20"></div>
-          <div className="absolute inset-0 bg-gradient-to-l from-transparent to-[#1a2e1a] z-10 opacity-20"></div>
-        </div>
+        
         <LocationProvider>
           <Navbar />
           <Router>
diff --git a/src/components/Background.tsx b/src/components/Background.tsx
index f7c1bd1..c403a89 100644
--- a/src/components/Background.tsx
+++ b/src/components/Background.tsx
@@ -6,14 +6,20 @@ export function Background() {
 
     // TODO: maybe have some loading screen while the image loads...
     return (
-        <>
+        <div className="absolute inset-0 z-0 pointer-events-none">
+            {/** Very light gradients overlaying the image */}
+            <div className="absolute inset-0 bg-gradient-to-b from-transparent to-[#1a2e1a] z-10 opacity-0"></div>
+            <div className="absolute inset-0 bg-gradient-to-t from-transparent to-[#1a2e1a] z-10 opacity-0"></div>
+            <div className="absolute inset-0 bg-gradient-to-r from-transparent to-[#1a2e1a] z-10 opacity-20"></div>
+            <div className="absolute inset-0 bg-gradient-to-l from-transparent to-[#1a2e1a] z-10 opacity-20"></div>
+
             {/** Background image, always full size */}
             <img
-                src="/min/background-min.jpg"
+                src="/min/background-min.webp"
                 className="w-full h-full fixed inset-0 object-cover object-right-top opacity-40 z-[-1]"
                 alt=""
                 onLoad={() => setLoaded(true)}
             />
-        </>
+        </div>
     )
-}
\ No newline at end of file
+}