diff --git a/components/AppPreview.tsx b/components/AppPreview.tsx
index 7ce2178..e8029ae 100644
--- a/components/AppPreview.tsx
+++ b/components/AppPreview.tsx
@@ -12,7 +12,7 @@ export default function AppPreview() {
 	useEffect(() => {
 		let imageUrl = 'homepage-light.png'
 		if (resolvedTheme == 'dark') {
-			imageUrl = 'homepage-dark.png'
+			imageUrl = 'homepage-dark.webp'
 		}
 
 		const image = new Image()
@@ -26,7 +26,7 @@ export default function AppPreview() {
 					initial={{ opacity: 0, scale: 0.75 }}
 					animate={{ opacity: 1, scale: 1 }}
 					transition={{ delay: 0.5, duration: 1 }}
-					className="z-40 flex h-full flex-1 self-center bg-[url('/homepage-dark.png')] bg-contain bg-[center_top] bg-no-repeat dark:bg-[url('/homepage-dark.png')] sm:w-auto"
+					className="z-40 flex h-full flex-1 self-center bg-[url('/homepage-dark.webp')] bg-contain bg-[center_top] bg-no-repeat dark:bg-[url('/homepage-dark.webp')] sm:w-auto"
 				/>
 			</div>
 		</div>
diff --git a/components/Head.tsx b/components/Head.tsx
index 7c51593..e3ab196 100644
--- a/components/Head.tsx
+++ b/components/Head.tsx
@@ -17,9 +17,9 @@ export default function Head() {
 			/>
 			<meta property="og:url" content="https://www.kavitareader.com/" />
 			<meta property="og:type" content="website" />
-			<meta property="og:image" content="https://raw.githubusercontent.com/Kareadita/Wiki-Nextra/main/public/homepage-dark.png" />
+			<meta property="og:image" content="https://raw.githubusercontent.com/Kareadita/Wiki-Nextra/main/public/homepage-dark.webp" />
 			<meta property="og:image:alt" content="OG Image" />
-			<meta property="og:image:type" content="image/png" />
+			<meta property="og:image:type" content="image/webp" />
 			<meta property="og:image:width" content="1332" />
 			<meta property="og:image:height" content="699" />
 			<meta property="og:locale" content="en_US" />
diff --git a/components/Hero.tsx b/components/Hero.tsx
index 4e98068..94ffe60 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -31,7 +31,7 @@ export default function Hero() {
 						className="flex"
 						initial={{ opacity: 0, scale: 0.5 }}
 						animate={{ opacity: 1, scale: 1 }}
-						transition={{ delay: 1.1, duration: 0.5 }}
+						transition={{ delay: 1.1, duration: 0.4 }}
 					>
 						<Link
 							className="bg-neutral-650 dark:hover:bg-neutral-650 hover:border-neutral-450 active:border-neutral-450 dark:active:border-neutral-450 dark:hover:border-neutral-450 dark:active:bg-neutral-650 flex cursor-pointer items-center rounded-md border border-neutral-500 px-3 py-1.5 text-sm font-medium text-neutral-800 transition-all duration-300 hover:bg-neutral-600 hover:text-white focus:outline-none active:bg-neutral-50 active:text-white dark:border-neutral-500 dark:bg-neutral-700 dark:bg-opacity-90 dark:text-neutral-200 dark:shadow-sm dark:hover:bg-neutral-700 dark:hover:bg-opacity-100 dark:hover:text-white dark:active:text-white dark:active:opacity-90"
diff --git a/public/homepage-dark.webp b/public/homepage-dark.webp
new file mode 100644
index 0000000..39987d1
Binary files /dev/null and b/public/homepage-dark.webp differ