diff --git a/package-lock.json b/package-lock.json
index e0dbbb9..a73add6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.6.0",
         "@fortawesome/free-solid-svg-icons": "^6.6.0",
         "@fortawesome/react-fontawesome": "^0.2.2",
-        "@headlessui/react": "^2.1.9",
+        "@headlessui/react": "^2.1.10",
         "@heroicons/react": "^2.1.5",
         "@mui/icons-material": "^6.1.2",
         "@react-spring/web": "^9.7.5",
@@ -1185,9 +1185,9 @@
       }
     },
     "node_modules/@headlessui/react": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.9.tgz",
-      "integrity": "sha512-ckWw7vlKtnoa1fL2X0fx1a3t/Li9MIKDVXn3SgG65YlxvDAsNrY39PPCxVM7sQRA7go2fJsuHSSauKFNaJHH7A==",
+      "version": "2.1.10",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.10.tgz",
+      "integrity": "sha512-6mLa2fjMDAFQi+/R10B+zU3edsUk/MDtENB2zHho0lqKU1uzhAfJLUduWds4nCo8wbl3vULtC5rJfZAQ1yqIng==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react": "^0.26.16",
diff --git a/package.json b/package.json
index d5094fa..26f701f 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@headlessui/react": "^2.1.9",
+    "@headlessui/react": "^2.1.10",
     "@heroicons/react": "^2.1.5",
     "@mui/icons-material": "^6.1.2",
     "@react-spring/web": "^9.7.5",
diff --git a/src/appLayout/MainNavigation.css b/src/appLayout/MainNavigation.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/appLayout/MainNavigation.jsx b/src/appLayout/MainNavigation.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/appLayout/Navbar.jsx b/src/appLayout/Navbar.jsx
new file mode 100644
index 0000000..1dccb6d
--- /dev/null
+++ b/src/appLayout/Navbar.jsx
@@ -0,0 +1,57 @@
+import { Bars3Icon, BellIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+import { Link } from "react-router-dom";
+import { Menu } from "@headlessui/react"; // Import from Headless UI
+import logo from "../assets/logo.png";
+import profile from "../assets/profile.png";
+
+const Navbar = ({ onSidebarToggle }) => {
+  const userNavigation = [
+    { name: "Profile", href: "#" },
+    { name: "Settings", href: "#" },
+    { name: "Log out", href: "/login" },
+  ];
+
+  return (
+    <header className="bg-white border-b border-gray-200">
+      <div className="flex justify-between items-center px-4 py-4">
+        <div className="flex items-center">
+          <button onClick={onSidebarToggle} className="lg:hidden">
+            <Bars3Icon className="h-6 w-6" />
+          </button>
+          <img src={logo} alt="Logo" className="h-8 w-auto ml-4" />
+        </div>
+        <div className="flex items-center gap-4">
+          <button>
+            <BellIcon className="h-6 w-6 text-gray-500" />
+          </button>
+          <Menu as="div" className="relative">
+            <div>
+              <Menu.Button className="flex items-center space-x-2">
+                <img src={profile} alt="Profile" className="h-8 w-8 rounded-full" />
+                <ChevronDownIcon className="h-5 w-5 text-gray-500" />
+              </Menu.Button>
+            </div>
+            <Menu.Items className="absolute right-0 mt-2 w-48 bg-white shadow-lg">
+              {userNavigation.map((item) => (
+                <Menu.Item key={item.name}>
+                  {({ active }) => (
+                    <Link
+                      to={item.href}
+                      className={`block px-4 py-2 text-gray-700 ${
+                        active ? "bg-gray-100" : ""
+                      }`}
+                    >
+                      {item.name}
+                    </Link>
+                  )}
+                </Menu.Item>
+              ))}
+            </Menu.Items>
+          </Menu>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Navbar;
diff --git a/src/appLayout/Sidebar.jsx b/src/appLayout/Sidebar.jsx
new file mode 100644
index 0000000..b5ad048
--- /dev/null
+++ b/src/appLayout/Sidebar.jsx
@@ -0,0 +1,58 @@
+// // Sidebar.jsx
+// import { Link } from "react-router-dom";
+// import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
+// import { useState } from "react";
+// import logo from "../assets/logo.png";
+// import { navigation } from "../pages/navigationData"; // Externalized navigation data
+
+// const Sidebar = ({ isOpen }) => {
+//   const [openDropdown, setOpenDropdown] = useState(null);
+
+//   const toggleDropdown = (name) => {
+//     setOpenDropdown(openDropdown === name ? null : name);
+//   };
+
+//   return (
+//     <div className={`lg:flex ${isOpen ? "block" : "hidden"} w-72 bg-white`}>
+//       <div className="flex flex-col h-screen border-r border-gray-200 px-6">
+//         <div className="flex items-center h-16">
+//           <img src={logo} alt="Logo" className="h-8 w-auto" />
+//         </div>
+//         <nav className="flex-1 overflow-y-auto">
+//           <ul className="space-y-7">
+//             {navigation.map((item) => (
+//               <li key={item.name}>
+//                 <Link to={item.href} className="flex items-center gap-x-3 p-2 rounded-md hover:bg-gray-100">
+//                   <img src={item.icon} alt={item.name} className="h-6 w-6" />
+//                   <span>{item.name}</span>
+//                   {item.hasDropdown && (
+//                     <button onClick={() => toggleDropdown(item.name)}>
+//                       {openDropdown === item.name ? (
+//                         <ChevronUpIcon className="w-5 h-5" />
+//                       ) : (
+//                         <ChevronDownIcon className="w-5 h-5" />
+//                       )}
+//                     </button>
+//                   )}
+//                 </Link>
+//                 {item.hasDropdown && openDropdown === item.name && (
+//                   <ul className="ml-8 mt-2 space-y-1">
+//                     {item.children.map((subItem) => (
+//                       <li key={subItem.name}>
+//                         <Link to={subItem.href} className="block p-2 hover:bg-gray-100">
+//                           {subItem.name}
+//                         </Link>
+//                       </li>
+//                     ))}
+//                   </ul>
+//                 )}
+//               </li>
+//             ))}
+//           </ul>
+//         </nav>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Sidebar;
diff --git a/src/pages/ActivityTab.jsx b/src/pages/ActivityTab.jsx
index e01dd68..64888f4 100644
--- a/src/pages/ActivityTab.jsx
+++ b/src/pages/ActivityTab.jsx
@@ -23,6 +23,9 @@ const ActivityTab = () => {
   const [newStatus, setNewStatus] = useState('All');
   const [filteredActivity, setFilteredActivity] = useState(activityData);
 
+  const [isAddingComment, setIsAddingComment] = useState(false); // To control comment section display
+  const [newComment, setNewComment] = useState(''); // To store the new comment
+
   // Function to filter activities based on search criteria
   const handleSearch = () => {
     const filtered = activityData.filter((activity) => {
@@ -35,8 +38,21 @@ const ActivityTab = () => {
     setFilteredActivity(filtered);
   };
 
+  // Function to handle the new comment submission
+  const handleAddComment = () => {
+    const newActivity = {
+      date: new Date().toLocaleString(),
+      actionBy: 'User', // Example: Comment will be added by the user
+      status: 'COMMENT ADDED',
+      message: newComment
+    };
+    setFilteredActivity([newActivity, ...filteredActivity]);
+    setNewComment('');
+    setIsAddingComment(false); // Hide the comment section after submission
+  };
+
   return (
-    <div className="activity-tab text-[#4A5D58]">
+    <div className="activity-tab text-sm text-[#4A5D58]">
       {/* Search Section */}
       <div className="flex flex-wrap gap-4 mb-5">
         <div className="flex flex-col">
@@ -80,7 +96,6 @@ const ActivityTab = () => {
             <option value="DECLINED">Declined</option>
           </select>
         </div>
-        
 
         <div className="flex items-end">
           <button
@@ -91,31 +106,60 @@ const ActivityTab = () => {
           </button>
         </div>
       </div>
-      
+
       {/* Add Comment Section */}
       <div className="mb-5">
-        <h1 className='mb-4'>View Rule Breakdown</h1>
-        <button className="bg-white border-solid border-2 border-[#4A5D58] px-8 py-2 rounded-md">Add Comment</button>
+        <h1 className="mb-4">View Rule Breakdown</h1>
+        {!isAddingComment ? (
+          <button
+            onClick={() => setIsAddingComment(true)}
+            className="bg-white border-solid border-2 border-[#4A5D58] px-8 py-2 rounded-md"
+          >
+            Add Comment
+          </button>
+        ) : (
+          <div className="flex flex-col space-y-3">
+            <textarea
+              className="border border-gray-300 p-3 resize-none rounded-md focus:outline-none focus:ring-2 focus:ring-[#00C795]"
+              placeholder="Enter your comment..."
+              value={newComment}
+              onChange={(e) => setNewComment(e.target.value)}
+            />
+            <div className="flex space-x-3">
+              <button
+                onClick={handleAddComment}
+                className="bg-[#00C795] text-white px-4 py-2 rounded-md"
+              >
+                Submit Comment
+              </button>
+              <button
+                onClick={() => setIsAddingComment(false)}
+                className="bg-gray-200 px-4 py-2 rounded-md"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
       </div>
 
       {/* Activity List */}
-<div className="activity-list space-y-4">
-  {filteredActivity.length > 0 ? (
-    filteredActivity.slice(0, 4).map((activity, index) => (  // Limit to 4 comments
-      <div key={index} className="border-b py-4">
-        <div className="flex flex-col sm:flex-row justify-between">
-          <div className="text-sm text-gray-600">{activity.message}</div>
-        </div>
-        <div className="text-sm text-gray-500 mt-1">  {/* Add margin-top for spacing */}
-          Date: {activity.date} | Action by: {activity.actionBy} | Status: {activity.status}
-        </div>
+      <div className="activity-list space-y-4">
+        {filteredActivity.length > 0 ? (
+          filteredActivity.slice(0, 4).map((activity, index) => (  // Limit to 4 comments
+            <div key={index} className="border-b py-4">
+              <div className="flex flex-col sm:flex-row justify-between">
+                <div className="text-sm text-gray-600">{activity.message}</div>
+              </div>
+              <div className="text-sm text-gray-500 mt-1">
+                Date: {activity.date} | Action by: {activity.actionBy} | Status: {activity.status}
+              </div>
+            </div>
+          ))
+        ) : (
+          <p className="text-gray-500">No matching records found.</p>
+        )}
       </div>
-    ))
-  ) : (
-    <p className="text-gray-500">No matching records found.</p>
-  )}
-</div>
-
     </div>
   );
 };
diff --git a/src/pages/CustomerDetails.jsx b/src/pages/CustomerDetails.jsx
index 89cffed..49d83b5 100644
--- a/src/pages/CustomerDetails.jsx
+++ b/src/pages/CustomerDetails.jsx
@@ -34,6 +34,7 @@ import setupIcon from "../assets/setupIcon.png";
 import LoanDetailsTab from "./LoanDetailsTab";
 import { loanData } from "./data";
 import DeclineModal from "./DeclineModal";
+import UploadModal from "./UploadModal";
 import { Link } from "react-router-dom";
 
 const navigation = [
@@ -141,7 +142,9 @@ function classNames(...classes) {
 }
 
 export default function CustomerDetails() {
-  const [isModalOpen, setIsModalOpen] = useState(false); // Fixed typo in modal state
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isDeclineModalOpen, setIsDeclineModalOpen] = useState(false);
+  const [isCompleteReviewModalOpen, setIsCompleteReviewModalOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState(""); // State for search input
   const [activeTab, setActiveTab] = useState("Information"); // Default to 'Information' tab
   const [filteredData, setFilteredData] = useState(loanData); // State for filtered data
@@ -179,13 +182,20 @@ export default function CustomerDetails() {
     setIsModalOpen(false);
   };
 
-  const handleDeclineLoan = () => {
-    openModal(); // Open modal when decline is clicked
+   // Modal handling functions
+   const handleDeclineLoan = () => {
+    setIsDeclineModalOpen(true); // Open Decline modal
   };
-
   const handleCompleteReview = () => {
-    console.log("Review Completed");
+    setIsCompleteReviewModalOpen(true); // Open Complete Review modal
+  };
+  const handleCloseDeclineModal = () => {
+    setIsDeclineModalOpen(false); // Close Decline modal
   };
+  const handleCloseCompleteReviewModal = () => {
+    setIsCompleteReviewModalOpen(false); // Close Complete Review modal
+  };
+
 
   return (
     <>
@@ -474,8 +484,7 @@ export default function CustomerDetails() {
               <LoanDetailsTab details={loanData[activeTab]} />
             </div>
 
-            {/* Modal for Declining Loan */}
-            <DeclineModal isOpen={isModalOpen} closeModal={closeModal} />
+            
           </div>
           {/* Decline Loan and Complete Review Buttons */}
 <div className="mt-5 mr-0 sm:mr-10 flex flex-col sm:flex-row justify-end mb-10 p-1 space-y-3 sm:space-y-0 sm:space-x-3">
@@ -492,6 +501,9 @@ export default function CustomerDetails() {
     Complete Review
   </button>
 </div>
+{/* Render the modals conditionally */}
+<DeclineModal isOpen={isDeclineModalOpen} closeModal={handleCloseDeclineModal} />
+      <UploadModal isOpen={isCompleteReviewModalOpen} closeModal={handleCloseCompleteReviewModal} />
 
           {/* Help Widget Ends */}
         </div>
diff --git a/src/pages/LoanDetailsTab.jsx b/src/pages/LoanDetailsTab.jsx
index 8a9b123..27654b4 100644
--- a/src/pages/LoanDetailsTab.jsx
+++ b/src/pages/LoanDetailsTab.jsx
@@ -23,11 +23,11 @@ const LoanDetailsTab = () => {
         return (
           <div className="space-y-2">
             {Object.entries(loanData.Information).map(([key, value]) => (
-              <div key={key} className="flex justify-between items-center py-2">
-                <span className="font-semibold text-gray-600 capitalize">
+              <div key={key} className="flex justify-between text-sm items-center py-2">
+                <span className="font-semibold text-gray-600 text-sm capitalize">
                   {key.replace(/([A-Z])/g, " $1")}:{" "}
                 </span>
-                <span className="text-gray-800">{value}</span>
+                <span className="text-gray-800 text-sm">{value}</span>
               </div>
             ))}
           </div>
@@ -36,7 +36,7 @@ const LoanDetailsTab = () => {
       case "CRC Nano Report":
         return (
           <div className="space-y-2">
-            <div className="flex justify-end">
+            <div className="flex justify-end text-sm">
               <CSVLink
                 data={[
                   [
@@ -55,7 +55,8 @@ const LoanDetailsTab = () => {
                   ],
                 ]}
                 filename="bank_statement.csv"
-                className="bg-white hover:bg-[#135D54] hover:text-white text-[#4A5D58] border-solid border-2 border-[#4A5D58] px-4 py-2 rounded-md flex items-center space-x-2"
+                className="bg-white text-sm hover:bg-[#135D54] hover:text-white text-[#4A5D58]
+                border-solid border-2 border-[#4A5D58] px-4 py-2 rounded-md flex items-center space-x-2"
               >
                 <span>Export CSV</span>
                 <svg
@@ -75,11 +76,11 @@ const LoanDetailsTab = () => {
             </div>
 
             {Object.entries(loanData.CRCNanoReport).map(([key, value]) => (
-              <div key={key} className="flex justify-between items-center py-2">
-                <span className="font-semibold text-gray-600 capitalize">
+              <div key={key} className="flex justify-between text-sm items-center py-2">
+                <span className="font-semibold text-gray-600 capitalize text-sm">
                   {key.replace(/([A-Z])/g, " $1")}:{" "}
                 </span>
-                <span className="text-gray-800">{value}</span>
+                <span className="text-gray-800 text-sm">{value}</span>
               </div>
             ))}
           </div>
@@ -88,8 +89,8 @@ const LoanDetailsTab = () => {
       case "Bank Statement":
         return (
           <div className="space-y-2">
-            <div className="flex justify-between items-center py-2">
-              <h3 className="font-semibold text-gray-600">Bank Statement</h3>
+            <div className="flex justify-between text-sm items-center py-2">
+              <h3 className="font-semibold text-gray-600 text-sm">Bank Statement</h3>
               <CSVLink
                 data={[
                   [
@@ -108,7 +109,7 @@ const LoanDetailsTab = () => {
                   ],
                 ]}
                 filename="bank_statement.csv"
-                className="bg-white hover:bg-[#135D54] hover:text-white text-[#4A5D58] border-solid border-2 border-[#4A5D58] px-4 py-2 rounded-md flex items-center space-x-2"
+                className="bg-white hover:bg-[#135D54] hover:text-white text-[#4A5D58] text-sm border-solid border-2 border-[#4A5D58] px-4 py-2 rounded-md flex items-center space-x-2"
                 onClick={toggleBankDetails} // Toggle the bank statement details
               >
                 <span>View Bank Statement</span>
@@ -131,11 +132,11 @@ const LoanDetailsTab = () => {
             {showBankDetails && (
               <div className="space-y-2 mt-4">
                 {Object.entries(loanData.BankStatement).map(([key, value]) => (
-                  <div key={key} className="flex justify-between items-center py-2">
-                    <span className="font-semibold text-gray-600 capitalize">
+                  <div key={key} className="flex justify-between text-sm items-center py-2">
+                    <span className="font-semibold text-gray-600 capitalize text-sm">
                       {key.replace(/([A-Z])/g, " $1")}:{" "}
                     </span>
-                    <span className="text-gray-800">{value}</span>
+                    <span className="text-gray-800 text-sm">{value}</span>
                   </div>
                 ))}
               </div>
diff --git a/src/pages/RepaymentDetails.jsx b/src/pages/RepaymentDetails.jsx
index 8283833..e1c9696 100644
--- a/src/pages/RepaymentDetails.jsx
+++ b/src/pages/RepaymentDetails.jsx
@@ -12,7 +12,7 @@ export default function RepaymentDetails() {
 
   return (
     
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto text-sm">
         <table className="min-w-full table-auto border-collapse">
           <thead>
             <tr className="text-left border-b border-gray-200">
diff --git a/src/pages/SigninPage.jsx b/src/pages/SigninPage.jsx
index d54c707..83a0625 100644
--- a/src/pages/SigninPage.jsx
+++ b/src/pages/SigninPage.jsx
@@ -158,25 +158,26 @@ export default function Signin() {
                   Sign in
                 </button>
 
-                <div className="flex items-center justify-center gap-2">
-                    <p className="text-#4A5D58">Forgot password?</p>
-                    <Link
-                      to="/verify-login"
-                      className="font-semibold text-[#00C795] hover:text-[#007970]"
-                    >
-                      Click here
-                    </Link>
-                  </div>
-
-                <div className="flex flex-col sm:flex-row items-center justify-center gap-2 text-center sm:text-left">
-                    <p className="text-gray-600 text-sm">Need an Easy Loan Access Account?</p>
-                    <button
-                      onClick={handleSignupClick}
-                      className="font-semibold text-[#00C795] hover:text-[#007970] ml-0 sm:ml-2"
-                    >
-                      SIGN UP
-                    </button>
-                  </div>
+                <div className="flex items-center justify-center gap-1">
+  <p className="text-[#4A5D58]">Forgot password?</p>
+  <Link
+    to="/verify-login"
+    className="font-semibold text-[#00C795] hover:text-[#007970]"
+  >
+    Click here
+  </Link>
+</div>
+
+<div className="flex flex-col mb-1 sm:flex-row items-center justify-center gap-1 text-center sm:text-left">
+  <p className="text-gray-600 text-sm">Need an Easy Loan Access Account?</p>
+  <button
+    onClick={handleSignupClick}
+    className="font-semibold text-[#00C795] hover:text-[#007970] ml-0 sm:ml-2"
+  >
+    SIGN UP
+  </button>
+</div>
+
               </form>
             </div>
 
diff --git a/src/pages/SuccessModal.jsx b/src/pages/SuccessModal.jsx
new file mode 100644
index 0000000..b33ec18
--- /dev/null
+++ b/src/pages/SuccessModal.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { useSpring, animated } from '@react-spring/web';
+
+const SuccessModal = ({ isOpen, onClose }) => {
+  const animation = useSpring({
+    opacity: isOpen ? 1 : 0,
+    transform: isOpen ? 'translateY(0)' : 'translateY(-50px)',
+    config: { tension: 220, friction: 15 },
+  });
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <animated.div
+        style={animation} // Apply animation here
+        className="bg-white rounded-lg shadow-lg max-w-sm w-full p-6 text-center"
+      >
+        <h2 className="text-lg font-bold text-green-600">Upload Successful!</h2>
+        <p className="text-gray-700 mt-2">
+          Your Mono Bank Statement has been uploaded successfully.
+        </p>
+        <button
+          className="mt-4 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded"
+          onClick={onClose}
+        >
+          Close
+        </button>
+      </animated.div>
+    </div>
+  );
+};
+
+export default SuccessModal;
diff --git a/src/pages/SupportingDocuments.jsx b/src/pages/SupportingDocuments.jsx
index f3a2117..4c737ba 100644
--- a/src/pages/SupportingDocuments.jsx
+++ b/src/pages/SupportingDocuments.jsx
@@ -23,7 +23,7 @@ const SupportingDocuments = () => {
   };
 
   return (
-    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
+    <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 text-sm">
       {/* Upload Document Section */}
       <div className="">
         <div className="text-center bg-[#f3f3f3] border rounded-lg p-4">
diff --git a/src/pages/UploadModal.jsx b/src/pages/UploadModal.jsx
new file mode 100644
index 0000000..658f127
--- /dev/null
+++ b/src/pages/UploadModal.jsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { useSpring, animated } from 'react-spring';
+import SuccessModal from './SuccessModal';
+
+const UploadModal = ({ isOpen, onClose }) => {
+  const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
+  const [file, setFile] = useState(null);
+
+  // Spring animation for fade-in/out effect
+  const animation = useSpring({
+    opacity: isOpen ? 1 : 0,
+    transform: isOpen ? 'translateY(0%)' : 'translateY(-30%)',
+    config: { tension: 200, friction: 20 },
+  });
+
+  const handleFileChange = (event) => {
+    const selectedFile = event.target.files[0];
+    if (selectedFile) setFile(selectedFile);
+  };
+
+  const handleUpload = () => {
+    if (file) {
+      console.log('Uploading:', file.name);
+      setIsSuccessModalOpen(true); // Open success modal
+    } else {
+      alert('Please select a file to upload.');
+    }
+  };
+
+  const handleCloseSuccessModal = () => {
+    setIsSuccessModalOpen(false);
+    onClose(); // Close the UploadModal as well
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <animated.div style={animation} className="bg-white rounded-lg shadow-lg max-w-lg w-full">
+        <div className="flex justify-between items-center px-4 py-2 border-b">
+          <h2 className="text-lg font-bold">Upload Mono Bank Statement</h2>
+          <button
+            className="text-gray-500 hover:text-gray-800"
+            onClick={onClose} // Ensure onClose is passed correctly
+          >
+            &times;
+          </button>
+        </div>
+
+        <div className="p-6">
+          <p className="mb-4 text-gray-700">Kindly Upload Mono Bank Statement</p>
+
+          <input
+            type="file"
+            id="file-upload"
+            className="border p-2 w-full rounded mb-4"
+            onChange={handleFileChange}
+          />
+
+          {file && (
+            <div className="mb-4 text-gray-700">
+              Selected file: <strong>{file.name}</strong>
+            </div>
+          )}
+
+          <div className="flex justify-end space-x-4">
+            <button
+              className="bg-gray-300 hover:bg-gray-400 text-gray-700 px-4 py-2 rounded"
+              onClick={onClose}
+            >
+              Close
+            </button>
+            <button
+              className="bg-[#00C795] hover:bg-[#135D54] text-white px-4 py-2 rounded"
+              onClick={handleUpload}
+            >
+              Upload
+            </button>
+          </div>
+
+          {/* Render the SuccessModal */}
+          <SuccessModal isOpen={isSuccessModalOpen} onClose={handleCloseSuccessModal} />
+        </div>
+      </animated.div>
+    </div>
+  );
+};
+
+export default UploadModal;
diff --git a/src/pages/navigationData.js b/src/pages/navigationData.js
new file mode 100644
index 0000000..6a634b4
--- /dev/null
+++ b/src/pages/navigationData.js
@@ -0,0 +1,30 @@
+// export const navigation = [
+//     {
+//       name: "Dashboard",
+//       href: "/dashboard",
+//       icon: home,
+//       hasDropdown: false,
+//     },
+//     {
+//       name: "Customers",
+//       href: "/customers",
+//       icon: "path/to/icon.png",
+//       hasDropdown: true,
+//       children: [
+//         { name: "Customer Details", href: "/customers/details" },
+//         { name: "Customer Orders", href: "/customers/orders" },
+//       ],
+//     },
+//     {
+//       name: "Settings",
+//       href: "/settings",
+//       icon: "path/to/icon.png",
+//       hasDropdown: true,
+//       children: [
+//         { name: "Profile", href: "/settings/profile" },
+//         { name: "Account", href: "/settings/account" },
+//       ],
+//     },
+//     // Add more navigation items as needed
+//   ];
+  
\ No newline at end of file