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..20d2cf9 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/bottom_wave.png'
 
 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..a6bf2b2 100644
--- a/src/containers/pages/LandingPage/LandingPage.jsx
+++ b/src/containers/pages/LandingPage/LandingPage.jsx
@@ -2,7 +2,16 @@ import Footer from '../../../components/Footer'
 import Navbar from '../../../components/Navbar';
 import './landingPage.css'
 import { useNavigate } from 'react-router';
-
+import bottom_wave from '/assets/images/botom_wave.png';
+import about from '/assets/images/about.png'
+import animal_1 from '/assets/images/animal_1.jpg'
+import animals_2 from '/assets/images/animals_2.jpg'
+import animals_3 from '/assets/images/animals_3.jpg'
+import animals_4 from '/assets/images/animals_4.jpg'
+import wahana_4 from '/assets/images/wahana_4.jpeg'
+import wahana_1 from '/assets/images/wahana_1.jpeg'
+import wahana_2 from '/assets/images/wahana_2.jpeg'
+import wahana_3 from '/assets/images/wahana_3.jpeg'
 
 
 function LandingPage () {
@@ -23,12 +32,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 +68,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 +77,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 +86,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 +95,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 +112,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%;
 }
diff --git a/src/containers/pages/Login/Login.jsx b/src/containers/pages/Login/Login.jsx
index 6c9974e..62ba456 100644
--- a/src/containers/pages/Login/Login.jsx
+++ b/src/containers/pages/Login/Login.jsx
@@ -6,6 +6,7 @@ import { auth } from '../../../config/firebase';
 import { useAtom, atom } from 'jotai';
 import { useNavigate} from 'react-router-dom';
 import { useEffect } from 'react';
+import logo from 'assets/images/logo.png'
 
 export const userAtom = atom(localStorage.getItem('userEmail') ?? null);
 
@@ -43,7 +44,7 @@ useEffect(()=>{
     <div className="login-card-container">
       <div className="login-card">
         <div className="login-card-logo">
-          <img src="/src/assets/images/logo.png" alt="logo" className="image"/>
+          <img src={logo}  className="image"/>
         </div>
         <div className="login-card-header">
           <h1>Login</h1>