diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 298a1f4..0000000
Binary files a/.DS_Store and /dev/null differ
diff --git a/.gitignore b/.gitignore
index 284e1f3..016078f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@
 
 # misc
 .DS_Store
+/public/DS_Store
 *.pem
 
 # debug
diff --git a/src/app/components/JokerLogo.tsx b/src/app/components/JokerLogo.tsx
index 0c7aac3..6fc0abd 100644
--- a/src/app/components/JokerLogo.tsx
+++ b/src/app/components/JokerLogo.tsx
@@ -27,7 +27,7 @@ export default function JokerLogo() {
       />
       {jokerActive && (
         <div className="joker-flash-overlay">
-          <Image src="/joker.png" alt="Joker" className="joker-img" width={500} height={500} unoptimized />
+          <Image src="/joker.webp" alt="Joker" className="joker-img" width={500} height={500} unoptimized />
         </div>
       )}
     </>
diff --git a/src/app/components/SlBackground.tsx b/src/app/components/SlBackground.tsx
index 8e3facd..da8c99c 100644
--- a/src/app/components/SlBackground.tsx
+++ b/src/app/components/SlBackground.tsx
@@ -65,7 +65,7 @@ export default function SlBackground() {
           paddingBottom: "5vh",
           justifyContent: "center",
           userSelect: "none",
-          backgroundImage: "linear-gradient(rgba(29, 32, 33, 0.94), rgba(29, 32, 33, 0.94)), url('/gruvbox.png')",
+          backgroundImage: "linear-gradient(rgba(29, 32, 33, 0.94), rgba(29, 32, 33, 0.94)), url('/gruvbox.webp')",
           backgroundSize: "cover",
           backgroundPosition: "center",
         }}