diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
index 52fbe51..3cecbf6 100644
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -4,7 +4,6 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { ConnectButton } from '@instate/kit'
 import { githubLink, notionDocLink, telegramLink } from '@/services/links'
-import midLanscape from '@/public/mid-landscape.png'
 
 const Page = () => {
   const linkTo = (url: string) => {
@@ -28,10 +27,7 @@ const Page = () => {
         <div className="relative flex-grow flex flex-row gap-4 md:mb-4">
           <div className="w-full md:w-1/2">
             {/* INSTATE PROTOCOL */}
-            <div className="w-full h-full p-4 flex flex-col relative justify-center  overflow-hidden shadow-xl items-center bg-base-100 rounded-lg" style={{
-              backgroundImage: `url(${midLanscape.src})`,
-              backgroundSize: 'cover',
-            }}>
+            <div className="w-full h-full p-4 flex flex-col relative justify-center  overflow-hidden shadow-xl items-center bg-base-100 bg-[url('/mid-landscape.jpg')] bg-cover rounded-lg">
               <div className='w-full absolute top-0 h-full bg-slate-900 bg-opacity-40' />
               <div className="flex flex-col text-white gap-10 z-10">
                 <h1 className="text-4xl md:text-6xl font-sans-display font-bold">
diff --git a/apps/web/public/mid-landscape.jpg b/apps/web/public/mid-landscape.jpg
new file mode 100644
index 0000000..92bbb4f
Binary files /dev/null and b/apps/web/public/mid-landscape.jpg differ