diff --git a/public/images/IIT_Linfa.webp b/public/images/IIT_Linfa.webp
new file mode 100644
index 0000000..2c69b8f
Binary files /dev/null and b/public/images/IIT_Linfa.webp differ
diff --git a/public/images/IIT_Modular.webp b/public/images/IIT_Modular.webp
new file mode 100644
index 0000000..b3f4d90
Binary files /dev/null and b/public/images/IIT_Modular.webp differ
diff --git a/public/images/IIT_Modular_Mobile.webp b/public/images/IIT_Modular_Mobile.webp
new file mode 100644
index 0000000..87d977d
Binary files /dev/null and b/public/images/IIT_Modular_Mobile.webp differ
diff --git a/public/images/IIT_Modules.webp b/public/images/IIT_Modules.webp
new file mode 100644
index 0000000..da13051
Binary files /dev/null and b/public/images/IIT_Modules.webp differ
diff --git a/public/images/banner-blur.webp b/public/images/banner-blur.webp
new file mode 100644
index 0000000..00d20fe
Binary files /dev/null and b/public/images/banner-blur.webp differ
diff --git a/public/images/banner.webp b/public/images/banner.webp
new file mode 100644
index 0000000..e0bd7a7
Binary files /dev/null and b/public/images/banner.webp differ
diff --git a/public/images/me.webp b/public/images/me.webp
new file mode 100644
index 0000000..c0f724f
Binary files /dev/null and b/public/images/me.webp differ
diff --git a/public/images/recharge_car.webp b/public/images/recharge_car.webp
new file mode 100644
index 0000000..3357c57
Binary files /dev/null and b/public/images/recharge_car.webp differ
diff --git a/public/images/thesis.webp b/public/images/thesis.webp
new file mode 100644
index 0000000..fbdcc69
Binary files /dev/null and b/public/images/thesis.webp differ
diff --git a/src/components/molecules/Hero/Hero.tsx b/src/components/molecules/Hero/Hero.tsx
index 0e7590a..4c913d6 100644
--- a/src/components/molecules/Hero/Hero.tsx
+++ b/src/components/molecules/Hero/Hero.tsx
@@ -13,7 +13,7 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
         minHeight: '100vh',
         boxShadow: '0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25)',
 
-        backgroundImage: 'url("images/banner-blur.jpg")',
+        backgroundImage: 'url("images/banner-blur.webp")',
         backgroundPosition: 'center center',
         backgroundAttachment: 'fixed',
         backgroundSize: 'cover',
diff --git a/src/components/pages/MainPage/MainPage.tsx b/src/components/pages/MainPage/MainPage.tsx
index 285a7ed..4673bff 100644
--- a/src/components/pages/MainPage/MainPage.tsx
+++ b/src/components/pages/MainPage/MainPage.tsx
@@ -25,7 +25,7 @@ const MainPage = () => {
           ref={refIITLinfa}
           scrollTarget={refIITModular}
           anchor="bottom"
-          image="images/IIT_Linfa.png"
+          image="images/IIT_Linfa.webp"
           title="LINFA: An Intuitive Block-Programming Interface for Reconfigurable Robots"
           caption={
             <>
@@ -49,7 +49,7 @@ const MainPage = () => {
           anchor="right"
           // anchor="left"
           image="images/IIT_Modular.png"
-          mobileImage="images/IIT_Modular_Mobile.png"
+          mobileImage="images/IIT_Modular_Mobile.webp"
           title="Revamping HHCM's Modular: Swift Generation of Modular Robot Models"
           caption={
             <>
@@ -71,7 +71,7 @@ const MainPage = () => {
           ref={refIITCalibration}
           scrollTarget={refWUTThesis}
           anchor="left"
-          image="images/IIT_Modules.jpg"
+          image="images/IIT_Modules.webp"
           title="Automated Actuators and Robotic Modules Calibration"
           caption={
             <>
@@ -92,6 +92,7 @@ const MainPage = () => {
           ref={refWUTThesis}
           anchor="bottom"
           image="images/thesis.jpg"
+          mobileImage="images/thesis.webp"
           title="Voice Controlled Mobile Robot for Indoor Applications"
           caption={
             <>