diff --git a/src/assets/images/wahana_1.jpg b/src/assets/images/wahana_1.jpg
new file mode 100644
index 0000000..430d525
Binary files /dev/null and b/src/assets/images/wahana_1.jpg differ
diff --git a/src/assets/images/wahana_2.jpg b/src/assets/images/wahana_2.jpg
new file mode 100644
index 0000000..8c47b21
Binary files /dev/null and b/src/assets/images/wahana_2.jpg differ
diff --git a/src/assets/images/wahana_3.jpeg b/src/assets/images/wahana_3.jpeg
new file mode 100644
index 0000000..4e5ef02
Binary files /dev/null and b/src/assets/images/wahana_3.jpeg differ
diff --git a/src/assets/images/wahana_4.jpeg b/src/assets/images/wahana_4.jpeg
new file mode 100644
index 0000000..7ff7d2a
Binary files /dev/null and b/src/assets/images/wahana_4.jpeg differ
diff --git a/src/containers/pages/AnimalList/AnimalList.jsx b/src/containers/pages/AnimalList/AnimalList.jsx
index 417a21b..84bb130 100644
--- a/src/containers/pages/AnimalList/AnimalList.jsx
+++ b/src/containers/pages/AnimalList/AnimalList.jsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { collection, getDocs} from 'firebase/firestore';
 import { db } from '../../../config/firebase/index';
 import Footer from '../../../components/Footer';
+import {bottom_wave} from './assets/images'
 
 function AnimalList () {
   const [animals,setanimals] = useState([]);
@@ -68,7 +69,7 @@ function AnimalList () {
           </form>
       </header>
       <section className="home1" id="home">
-        <img src="/src/assets/images/bottom_wave.png" alt="" className="wave" />
+        <img src={bottom_wave} className="wave" />
       </section>
       <section className="data">
         <h2 className="judul">DATA HEWAN</h2>
diff --git a/src/containers/pages/LandingPage/LandingPage.jsx b/src/containers/pages/LandingPage/LandingPage.jsx
index 269a215..246a400 100644
--- a/src/containers/pages/LandingPage/LandingPage.jsx
+++ b/src/containers/pages/LandingPage/LandingPage.jsx
@@ -2,7 +2,8 @@ import Footer from '../../../components/Footer'
 import Navbar from '../../../components/Navbar';
 import './landingPage.css'
 import { useNavigate } from 'react-router';
-
+import {bottom_wave, about, animal_1, animals_2, animals_3, animals_4, 
+  wahana_1,wahana_2,wahana_3,wahana_4} from './assets/images'
 
 
 function LandingPage () {
@@ -23,12 +24,12 @@ function LandingPage () {
           load more
         </a>
       </div>
-      <img src="/src/assets/images/bottom_wave.png" alt="" className="wave "  />
+      <img src= {bottom_wave}className="wave "  />
     </section>
     <section className="about" id="about">
       <div className="box-container">
         <div className="image">
-          <img src="/src/assets/images/about.png" />
+          <img src={about}/>
         </div>
         <div className="content">
           <h3 className="title">you can find all the most popular species</h3>
@@ -59,7 +60,7 @@ function LandingPage () {
       <h2 className="heading">animals</h2>
       <div className="hewan_box">
         <div className="profile">
-          <img src="/src/assets/images/animal_1.jpg" />
+          <img src={animal_1} />
           <div className="info">
             <h2 className="name">Lion</h2>
             <p className="bio">
@@ -68,7 +69,7 @@ function LandingPage () {
           </div>
         </div>
         <div className="profile">
-          <img src="/src/assets/images/animals_2.jpg" />
+          <img src={animals_2} />
           <div className="info">
             <h2 className="name">Zebra</h2>
             <p className="bio">
@@ -77,7 +78,7 @@ function LandingPage () {
           </div>
         </div>
         <div className="profile">
-          <img src="/src/assets/images/animals_3.jpg" />
+          <img src={animals_3} />
           <div className="info">
             <h2 className="name">Panda</h2>
             <p className="bio">
@@ -86,7 +87,7 @@ function LandingPage () {
           </div>
         </div>
         <div className="profile">
-          <img src="/src/assets/images/animals_4.jpg" />
+          <img src={animals_4} />
           <div className="info">
             <h2 className="name">Elephant</h2>
             <p className="bio">
@@ -103,25 +104,25 @@ function LandingPage () {
       <h2 className="heading">wahana</h2>
       <div className="box-container">
         <div className="box">
-          <img src="/src/assets/images/wahana-1.jpg" alt="" />
+          <img src={wahana_1} />
           <div className="content">
             <h3 >Terapi Ikan</h3>
           </div>
         </div>
         <div className="box">
-          <img src="/assets/images/wahana-2.jpg" alt="" />
+          <img src={wahana_2}/>
           <div className="content">
             <h3 >Speedboat</h3>
           </div>
         </div>
         <div className="box">
-          <img src="/src/assets/images/wahana-3.jpeg" alt="" />
+          <img src={wahana_3}  />
           <div className="content">
             <h3 >ATV</h3>
           </div>
         </div>
         <div className="box">
-          <img src="/assets/images/wahana-4.jpeg" alt="" />
+          <img src={wahana_4} />
           <div className="content">
             <h3 >Feeding Zoo</h3>
           </div>
diff --git a/src/containers/pages/LandingPage/landingPage.css b/src/containers/pages/LandingPage/landingPage.css
index fdc7998..2608d54 100644
--- a/src/containers/pages/LandingPage/landingPage.css
+++ b/src/containers/pages/LandingPage/landingPage.css
@@ -137,7 +137,7 @@ header .login-form h3{
   min-height: 100vh;
   display: flex;
   align-items: center;
-  background: url(/src/assets/images/home.jpg) no-repeat;
+  background: url("/src/assets/images/home.jpg") no-repeat;
   background-size: cover;
   background-position: top;
 }
@@ -418,7 +418,7 @@ header .login-form h3{
 
 
 footer{
-  background: url(/src/assets/images/footer.jpg) no-repeat;
+  background: url("/src/assets/images/footer.jpg") no-repeat;
   background-size: cover;
   padding: 3rem 7%;
 }