diff --git a/web/components/header.tsx b/web/components/header.tsx
index 03405d5a..c3644d12 100644
--- a/web/components/header.tsx
+++ b/web/components/header.tsx
@@ -70,7 +70,7 @@ export function Header(props: { darkBackground?: boolean }) {
               <Link href="/">
                 <a className="flex flex-row items-center align-items-center h-6 sm:h-10">
                   <div className="inline-block mr-3">
-                    <img className="h-6 sm:h-10" src="/logo-icon.svg" />
+                    <img className="h-6 sm:h-10" src="/logo-icon.svg" width={96} height={96} />
                   </div>
                   <span
                     className={clsx(
diff --git a/web/public/logo-icon-white-bg.png b/web/public/logo-icon-white-bg.png
new file mode 100644
index 00000000..5b41aab4
Binary files /dev/null and b/web/public/logo-icon-white-bg.png differ
diff --git a/web/public/world-trading-background.jpg b/web/public/world-trading-background.jpg
deleted file mode 100644
index 2e2596a6..00000000
Binary files a/web/public/world-trading-background.jpg and /dev/null differ
diff --git a/web/public/world-trading-background.webp b/web/public/world-trading-background.webp
new file mode 100644
index 00000000..502beb29
Binary files /dev/null and b/web/public/world-trading-background.webp differ
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index a55ef759..4319621d 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -14,7 +14,7 @@ module.exports = {
     ),
     extend: {
       backgroundImage: {
-        'world-trading': "url('/world-trading-background.jpg')",
+        'world-trading': "url('/world-trading-background.webp')",
       },
     },
   },