diff --git a/web/public/images/dungeon-world-cover.jpeg b/web/public/images/dungeon-world-cover.jpeg
deleted file mode 100644
index 8823ebd..0000000
Binary files a/web/public/images/dungeon-world-cover.jpeg and /dev/null differ
diff --git a/web/public/images/dungeon-world-cover.webp b/web/public/images/dungeon-world-cover.webp
new file mode 100644
index 0000000..c9a4172
Binary files /dev/null and b/web/public/images/dungeon-world-cover.webp differ
diff --git a/web/src/components/home-page-components/home-page-cover.tsx b/web/src/components/home-page-components/home-page-cover.tsx
index 42b4d3d..d38e9b8 100644
--- a/web/src/components/home-page-components/home-page-cover.tsx
+++ b/web/src/components/home-page-components/home-page-cover.tsx
@@ -3,6 +3,7 @@ import { Link } from "nextra-theme-docs";
 import { FC } from "react";
 import Image from "next/image";
 import { Metal_Mania } from "next/font/google";
+import cover from "../../../public/images/dungeon-world-cover.webp";
 
 const metalMania = Metal_Mania({
     weight: "400",
@@ -13,10 +14,10 @@ const metalMania = Metal_Mania({
 export const Cover: FC = () => {
     return (
       <div className="w-full mx-auto max-w-[90rem] md:pl-[max(env(safe-area-inset-left),1.5rem)] md:pr-[max(env(safe-area-inset-right),1.5rem)]">
-        <div className="relative h-96 md:h-[41rem]">
+        <div className="relative h-96 md:h-[832px]">
           <Image
             priority
-            src="/images/dungeon-world-cover.jpeg"
+            src={cover}
             className="object-center object-cover"
             alt="Immagine di sfondo"
             fill
diff --git a/web/src/components/home-page-components/home-page-homebrew.tsx b/web/src/components/home-page-components/home-page-homebrew.tsx
index 682f0dc..49d1dd6 100644
--- a/web/src/components/home-page-components/home-page-homebrew.tsx
+++ b/web/src/components/home-page-components/home-page-homebrew.tsx
@@ -25,11 +25,10 @@ export const HomePageHomebrew = () => {
       <div className="flex overflow-x-scroll pt-2 hide-scroll-bar w-full">
         <div className="flex flex-nowrap">
           {firstClasses.map((clazz) => (
-            <div className="inline-block px-3">
+            <div className="inline-block px-3" key={clazz.name + clazz.collection}>
               <ClassCard
                 collection={clazz.collection}
                 image={clazz.showcase.imageUrl}
-                key={clazz.name + clazz.collection}
                 name={clazz.name}
                 link={`/homebrew/classi/${clazz.slug}`}
               />
diff --git a/web/theme.config.tsx b/web/theme.config.tsx
index b662aa4..9a87af2 100644
--- a/web/theme.config.tsx
+++ b/web/theme.config.tsx
@@ -47,7 +47,7 @@ const config: DocsThemeConfig = {
     'https://dungeonworld-ita.vercel.app' +
     (defaultLocale === locale ? asPath : `/${locale}${asPath}`);
 
-    const socialCard = frontMatter.image ? 'https://dungeonworld-ita.vercel.app' + frontMatter.image : 'https://dungeonworld-ita.vercel.app/images/dungeon-world-cover.jpeg';
+    const socialCard = frontMatter.image ? 'https://dungeonworld-ita.vercel.app' + frontMatter.image : 'https://dungeonworld-ita.vercel.app/images/dungeon-world-cover.webp';
     const description = frontMatter.description ?? 'Dungeon World Italia';
 
     return (