diff --git a/website/components/Hero/index.tsx b/website/components/Hero/index.tsx
index 911d2ee..9e53fa2 100644
--- a/website/components/Hero/index.tsx
+++ b/website/components/Hero/index.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import Image from "next/image";
-import Link from "next/link";
 
 import { Autoplay } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
@@ -22,49 +21,50 @@ const Hero = () => {
             className="h-screen"
           >
             <SwiperSlide>
-              <img
+              <Image
                 src="/images/banner/1.jpg"
+                fill
                 className="h-full w-full object-cover"
                 alt="banner-slide-image"
-                loading="lazy"
+                unoptimized
               />
             </SwiperSlide>
             <SwiperSlide>
               <div className="h-full w-full">
                 <div className="flex h-1/2 w-full">
-                  <img
+                  <Image
                     src="/images/banner/2.jpg"
                     width={1000}
                     height={500}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
-                  <img
+                  <Image
                     src="/images/banner/3.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
                 </div>
                 <div className="flex h-1/2 w-full">
-                  <img
+                  <Image
                     src="/images/banner/4.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
-                  <img
+                  <Image
                     src="/images/banner/5.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
                 </div>
               </div>
@@ -72,39 +72,39 @@ const Hero = () => {
             <SwiperSlide>
               <div className="h-full w-full">
                 <div className="flex h-1/2 w-full">
-                  <img
+                  <Image
                     src="/images/banner/6.jpg"
                     width={1000}
                     height={500}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
-                  <img
+                  <Image
                     src="/images/banner/7.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
                 </div>
                 <div className="flex h-1/2 w-full">
-                  <img
+                  <Image
                     src="/images/banner/8.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
-                  <img
+                  <Image
                     src="/images/banner/9.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
                 </div>
               </div>
@@ -112,39 +112,39 @@ const Hero = () => {
             <SwiperSlide>
               <div className="h-full w-full">
                 <div className="flex h-1/2 w-full">
-                  <img
+                  <Image
                     src="/images/banner/10.jpg"
                     width={1000}
                     height={500}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
-                  <img
+                  <Image
                     src="/images/banner/11.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
                 </div>
                 <div className="flex h-1/2 w-full">
-                  <img
+                  <Image
                     src="/images/banner/12.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-3/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
-                  <img
+                  <Image
                     src="/images/banner/13.jpg"
                     width={1000}
                     height={1000}
                     className="h-full w-1/4 object-cover"
                     alt="banner-slide-image"
-                    loading="lazy"
+                    unoptimized
                   />
                 </div>
               </div>