diff --git a/src/App.jsx b/src/App.jsx
index ca4d8ca397cd29770245b9841a90841713b71e76..0ce047c7f50904f673e71b3d62a82c828d02c32c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,10 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import LoginPage from "./LoginPage";
-import StatusPage from "./StatusPage";
-import AgentStatus from "./AgentStatus";
-import AgentAssigned from "./AgentAssigned";
-import AgentVerified from "./AgentVerified";
-import AgentPayment from "./AgentPayment";
+import LoginPage from "./components/LoginPage";
+import StatusPage from "./components/StatusPage";
+import AgentStatus from "./components/AgentStatus";
+import AgentAssigned from "./components/AgentAssigned";
+import AgentVerified from "./components/AgentVerified";
+import AgentPayment from "./components/AgentPayment";
 
 function App() {
   return (
diff --git a/public/Frame 201.svg b/src/assets/images/Frame201.svg
similarity index 100%
rename from public/Frame 201.svg
rename to src/assets/images/Frame201.svg
diff --git a/public/page2.svg b/src/assets/images/page2.svg
similarity index 100%
rename from public/page2.svg
rename to src/assets/images/page2.svg
diff --git a/public/page3.svg b/src/assets/images/page3.svg
similarity index 100%
rename from public/page3.svg
rename to src/assets/images/page3.svg
diff --git a/public/page4.svg b/src/assets/images/page4.svg
similarity index 100%
rename from public/page4.svg
rename to src/assets/images/page4.svg
diff --git a/public/page5.svg b/src/assets/images/page5.svg
similarity index 100%
rename from public/page5.svg
rename to src/assets/images/page5.svg
diff --git a/public/page6.svg b/src/assets/images/page6.svg
similarity index 100%
rename from public/page6.svg
rename to src/assets/images/page6.svg
diff --git a/src/AgentAssigned.jsx b/src/components/AgentAssigned.jsx
similarity index 98%
rename from src/AgentAssigned.jsx
rename to src/components/AgentAssigned.jsx
index b5284a3b409b084367e7649ccda30b09e6fef165..3f264cf603aa222eaf20cbb11a2c1c1ed36b0c4f 100644
--- a/src/AgentAssigned.jsx
+++ b/src/components/AgentAssigned.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-
+import FrameImage from "../assets/images/page4.svg";
 const AgentAssigned = () => {
   const navigate = useNavigate();
 
@@ -16,7 +16,7 @@ const AgentAssigned = () => {
         
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page4.svg" alt="Illustration" className="w-full h-auto" />
+          <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}
diff --git a/src/AgentPayment.jsx b/src/components/AgentPayment.jsx
similarity index 98%
rename from src/AgentPayment.jsx
rename to src/components/AgentPayment.jsx
index 5d0cfef9fb19aba0a6b834c04c6496ae1a385962..fcdfd1de9504a3a0b03e5bcfc5147d785cb77784 100644
--- a/src/AgentPayment.jsx
+++ b/src/components/AgentPayment.jsx
@@ -1,5 +1,5 @@
 import React from "react";
-
+import FrameImage from "../assets/images/page6.svg";
 const AgentPayment = () => {
   return (
     <div className="flex items-center justify-center min-h-screen" style={{ background: '#E9FAFF' }}>
@@ -13,7 +13,7 @@ const AgentPayment = () => {
         
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page6.svg" alt="Verified" className="w-full h-auto" />
+        <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}
diff --git a/src/AgentStatus.jsx b/src/components/AgentStatus.jsx
similarity index 98%
rename from src/AgentStatus.jsx
rename to src/components/AgentStatus.jsx
index 58bd0e7ae1169c7c3a17d16708404868ec363889..e5b19b3d51dd90bfe90d8800ca438cc9518dd6ed 100644
--- a/src/AgentStatus.jsx
+++ b/src/components/AgentStatus.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import FrameImage from "../assets/images/page3.svg";
 
 const AgentStatus = () => {
   const navigate = useNavigate(); // Hook to navigate pages
@@ -15,7 +16,7 @@ const AgentStatus = () => {
       <div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] w-[1460.608px] h-[729px] flex">
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page3.svg" alt="Illustration" className="w-full h-auto" />
+        <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}
diff --git a/src/AgentVerified.jsx b/src/components/AgentVerified.jsx
similarity index 98%
rename from src/AgentVerified.jsx
rename to src/components/AgentVerified.jsx
index 1943f381fead3c83b24d85424b684bb8fa259067..b9bf57c747770e74bde3eadb0497cebab57f780d 100644
--- a/src/AgentVerified.jsx
+++ b/src/components/AgentVerified.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import FrameImage from "../assets/images/page5.svg";
 
 const AgentVerified = () => {
   const navigate = useNavigate();
@@ -16,7 +17,7 @@ const AgentVerified = () => {
         
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page5.svg" alt="Illustration" className="w-full h-auto" />
+        <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}
diff --git a/src/LoginPage.jsx b/src/components/LoginPage.jsx
similarity index 97%
rename from src/LoginPage.jsx
rename to src/components/LoginPage.jsx
index efea4cdd60a86a7002113776ea45c0e00fecf96e..9d87666f34635c6b5dc96ccc90c01d40492e09a9 100644
--- a/src/LoginPage.jsx
+++ b/src/components/LoginPage.jsx
@@ -2,7 +2,9 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import MailIcon from "d:/360ExtremeBrowserDownload/Mail.svg";
 import PasswordEyeIcon from "d:/360ExtremeBrowserDownload/Password eye.svg";
-import './styles.css'; // Import the CSS file
+import FrameImage from "../assets/images/Frame201.svg";
+
+import "../styles.css"; // Import the CSS file
 
 const LoginPage = () => {
   const [showPassword, setShowPassword] = useState(false);
@@ -55,7 +57,7 @@ const LoginPage = () => {
         
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/Frame 201.svg" alt="Illustration" className="w-full h-auto" />
+          <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}
diff --git a/src/StatusPage.jsx b/src/components/StatusPage.jsx
similarity index 97%
rename from src/StatusPage.jsx
rename to src/components/StatusPage.jsx
index fa00769617db9bbc3d33a59e2c21eca86d82f840..678e769dee26b3aa176b57bf42361983f36ba768 100644
--- a/src/StatusPage.jsx
+++ b/src/components/StatusPage.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import FrameImage from "../assets/images/page2.svg";
 
 const StatusPage = () => {
   const navigate = useNavigate();
@@ -15,7 +16,7 @@ const StatusPage = () => {
       <div className="absolute top-[194px] left-[134px] bg-white p-8 rounded-[32.6px] w-[1460.608px] h-[729px] flex">
         {/* Left Side - Illustration */}
         <div className="w-1/2 flex items-center justify-center p-5">
-          <img src="/page2.svg" alt="Illustration" className="w-full h-auto" />
+        <img src={FrameImage} alt="Illustration" className="w-full h-auto" />
         </div>
 
         {/* Divider */}