diff --git a/nextjs/spa-with-image-optimization/app/page.tsx b/nextjs/spa-with-image-optimization/app/page.tsx
index dc191aa..9030a8e 100644
--- a/nextjs/spa-with-image-optimization/app/page.tsx
+++ b/nextjs/spa-with-image-optimization/app/page.tsx
@@ -29,14 +29,18 @@ export default function Home() {
       </div>
 
       <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
+
+        <div className="w-96">
+          <Image
+            src="/image1.jpg"
+            alt="Image"
+            width={500}
+            height={500}
+            quality="85"
+            loading="lazy"
+            sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          />
+        </div>
       </div>
 
       <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
diff --git a/nextjs/spa-with-image-optimization/public/image1.jpg b/nextjs/spa-with-image-optimization/public/image1.jpg
new file mode 100644
index 0000000..d1df23e
Binary files /dev/null and b/nextjs/spa-with-image-optimization/public/image1.jpg differ