diff --git a/src/assets/images/footer_back.jpg b/src/assets/images/footer_back.jpg
new file mode 100644
index 0000000..4133d9f
Binary files /dev/null and b/src/assets/images/footer_back.jpg differ
diff --git a/src/components/Footer/MidFooter.tsx b/src/components/Footer/MidFooter.tsx
new file mode 100644
index 0000000..867d5f2
--- /dev/null
+++ b/src/components/Footer/MidFooter.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import styles from "./footer.module.css"
+
+const MidFooter = () => {
+  return (
+    <div className={`h-[2.3125rem] text-[1.25rem] ${styles.lower_footer}`}>
+    <div className="containerMode flex justify-end p-[.375rem] w-full text-white font-medium text-[.6875rem] md:text-[1.25rem]">
+      <div className="hidden sm:flex gap-2 items-center justify-end px-2 text-[11px] md:text-[13px]">
+        <p className="capitalize text-[20px] font-extralight">My Bank and I</p>
+      </div>
+    </div>
+  </div>
+  )
+}
+
+export default MidFooter
diff --git a/src/components/Footer/TopFooterOne.tsx b/src/components/Footer/TopFooterOne.tsx
new file mode 100644
index 0000000..ef4f601
--- /dev/null
+++ b/src/components/Footer/TopFooterOne.tsx
@@ -0,0 +1,19 @@
+import { FC } from "react";
+import TopFooterOneMenu from "./TopFooterOneMenu";
+
+const TopFooterOne = (): FC => {
+  return (
+    <footer className="bg-[#f7f7f7] text-[#898B8B] border border-[#ececec] p-5">
+      <div className="containerMode w-full flex flex-col gap-[1.875rem]">
+        <h4 className="uppercase text-[1.3125rem] font-bold my-[.625rem] cursor-default">
+          sitemap
+        </h4>
+        <div className="grid grid-cols-2 md:grid-cols-6">
+          <TopFooterOneMenu />
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default TopFooterOne;
diff --git a/src/components/Footer/TopFooterOneMenu.tsx b/src/components/Footer/TopFooterOneMenu.tsx
new file mode 100644
index 0000000..5f124c6
--- /dev/null
+++ b/src/components/Footer/TopFooterOneMenu.tsx
@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { Link } from "react-router-dom";
+import { footerItems } from "../../utils/data";
+
+interface TopFooterOneMenuProps {
+  category: string;
+  subItems: {
+    text: string;
+    href?: string;
+  }[];
+}
+
+const TopFooterOneMenu = (): FC => {
+  return footerItems.map(
+    ({ category, subItems }): TopFooterOneMenuProps => (
+      <ul className="flex gap-2 flex-col">
+        <li className="text-[.6875rem] font-bold text-[#5e2785] cursor-default">{category}</li>
+        <ul className="flex flex-col gap-1">
+          {subItems.map(({ href, text }) => (
+            <Link to="#" className="text-[.6875rem] text-[#5e2785] hover:underline">
+              {text}
+            </Link>
+          ))}
+        </ul>
+      </ul>
+    )
+  );
+};
+
+export default TopFooterOneMenu;
diff --git a/src/components/Footer/footer.module.css b/src/components/Footer/footer.module.css
new file mode 100644
index 0000000..ed7def1
--- /dev/null
+++ b/src/components/Footer/footer.module.css
@@ -0,0 +1,8 @@
+.lower_footer{
+    background: url(../../assets/images/footer_back.jpg) no-repeat;
+    background-size: cover;
+    /* padding: 0.4rem 0; */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
index d66565b..8bdfed9 100644
--- a/src/components/Footer/index.tsx
+++ b/src/components/Footer/index.tsx
@@ -1,3 +1,5 @@
 import Footer from "./Footer";
+import TopFooterOne from "./TopFooterOne";
+import MidFooter from "./MidFooter";
 
-export { Footer };
\ No newline at end of file
+export { Footer, TopFooterOne, MidFooter };
diff --git a/src/components/GetStarted/BasicInfo.tsx b/src/components/GetStarted/BasicInfo.tsx
index 1ba7a55..89fa670 100644
--- a/src/components/GetStarted/BasicInfo.tsx
+++ b/src/components/GetStarted/BasicInfo.tsx
@@ -1,12 +1,98 @@
-import React from 'react'
-import { InputCompOne } from '..'
+import { FC } from "react";
+import { InputCompOne } from "..";
 
-const BasicInfo = () => {
+const BasicInfo = (): FC => {
   return (
-    <div>
-      <InputCompOne  />
+    <div className="mt-8">
+      <div className="flex flex-col gap-3">
+        <InputCompOne
+          label="Title"
+          name="title"
+          parentInputClass="max-w-[224px] w-full"
+          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          select
+          selectClass="w-full h-[36px]"
+          selectOptions={[
+            {
+              value: "",
+              label: "Select",
+            },
+            {
+              value: "ms",
+              label: "Ms",
+            },
+            {
+              value: "mr",
+              label: "Mr",
+            },
+            {
+              value: "miss",
+              label: "Miss",
+            },
+            {
+              value: "mrs",
+              label: "Mrs",
+            },
+          ]}
+        />
+        <InputCompOne
+          label="Marital Status"
+          name="marital"
+          parentInputClass="max-w-[224px] w-full"
+          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          select
+          selectClass="w-full h-[36px]"
+          selectOptions={[
+            {
+              value: "",
+              label: "Select",
+            },
+            {
+              value: "ms",
+              label: "Ms",
+            },
+            {
+              value: "mr",
+              label: "Mr",
+            },
+            {
+              value: "miss",
+              label: "Miss",
+            },
+            {
+              value: "mrs",
+              label: "Mrs",
+            },
+          ]}
+        />
+        <InputCompOne
+          label="Direct Sales Agent ID"
+          name="title"
+          parentInputClass="max-w-[224px] w-full"
+          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
+          select
+          selectClass="w-full h-[36px]"
+          selectOptions={[
+            {
+              value: "",
+              label: "Select",
+            },
+          ]}
+        />
+        <InputCompOne
+          label="BVN"
+          name="bvn"
+          parentInputClass="max-w-[224px] w-full"
+          labelSpan="( To get your BVN, dial *565*0# )"
+          labelSpanClass="text-[11px] text-[#7a7373]"
+          placeholder="Enter your BVN"
+          labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
+          input
+          inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px]"
+        />
+      </div>
     </div>
-  )
-}
+  );
+};
 
-export default BasicInfo
+export default BasicInfo;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 3314109..ad41802 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -31,7 +31,7 @@ const Header: FC<HiddenMenuItems> = ({
   };
 
   return (
-    <div className="relative my-2 py-2 flex items-center justify-center border-b-2 border-[#E3DEDA]">
+    <div className="relative mt-2 py-2 flex items-center justify-center border-b-2 border-[#E3DEDA]">
       {!hideSidebar && (
         <Sidebar toggleSidebar={toggleSidebar} isSidebarOpen={isSidebarOpen} />
       )}
diff --git a/src/components/Home/Hero/Hero.tsx b/src/components/Home/Hero/Hero.tsx
index 83ee5e5..0fcd447 100644
--- a/src/components/Home/Hero/Hero.tsx
+++ b/src/components/Home/Hero/Hero.tsx
@@ -2,10 +2,10 @@ import styles from "./hero.module.css";
 const Hero = () => {
   return (
     <div
-      className={`w-full relative mt-[.9375rem] mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.heroBg}`}
+      className={`w-full relative mb-0 sm:mb-[2.25rem] regLap:h-[30rem] xl:h-[26.875rem] lg:h-[25rem] md:h-[21.875rem] sm:h-[18.75rem] h-[15.625rem] object-cover ${styles.heroBg}`}
     >
       <div className="containerMode flex justify-between gap-1 xl:gap-8">
-        <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684]">
+        <h1 className="max-w-[32.9375rem] font-extrabold text-[1.3rem] leading-[2.5rem] sm:text-[3.625rem] sm:leading-[4.3869rem] text-[#5C2684] cursor-default">
           PREMIUM SALARY LOAN
         </h1>
       </div>
diff --git a/src/components/Home/Requirements/FeatureText.tsx b/src/components/Home/Requirements/FeatureText.tsx
index 869cc65..518349c 100644
--- a/src/components/Home/Requirements/FeatureText.tsx
+++ b/src/components/Home/Requirements/FeatureText.tsx
@@ -5,7 +5,7 @@ import { RouteHandler } from "../../../router/routes";
 const FeatureText: FC = () => {
   return (
     <div className="w-full sm:w-2/3 px-0 sm:px-[15px] flex flex-col">
-      <div className="mt-5 text-[.9375rem] text-[#454545] leading-[1.4375rem]">
+      <div className="mt-5 text-[.9375rem] text-[#454545] leading-[1.4375rem] cursor-default">
         <p className="mb-[.9375rem] text-justify sm:text-left">
           Premium Salary Plus loan provides confirmed staff of commercial
           organizations more usable funds. The employee’s organization must have
@@ -29,9 +29,9 @@ const FeatureText: FC = () => {
       </div>
       <Link
         to={RouteHandler.getStarted}
-        className="text-[#5C2684] hover:underline mt-[1.5625rem] w-fit"
+        className="text-[#5C2684] mt-[1.5625rem] w-fit"
       >
-        ***Click here to apply
+        *** <span className="hover:underline">Click here to apply</span>
       </Link>
       <p className="mt-[.5625rem] font-bold cursor-default">
         Terms and conditions apply
diff --git a/src/components/shared/InputCompOne.tsx b/src/components/shared/InputCompOne.tsx
index fad54aa..636e017 100644
--- a/src/components/shared/InputCompOne.tsx
+++ b/src/components/shared/InputCompOne.tsx
@@ -11,7 +11,12 @@ interface InputCompOneProps {
   tabIndex?: number;
   ref?: React.RefObject<HTMLInputElement>;
   selectValue?: string;
+  labelSpan?: string;
+  labelSpanClass?: string;
   parentInputClass?: string;
+  inputClass?: string;
+  parentSelectClass?: string;
+  selectClass?: string;
   input?: boolean;
   select?: boolean;
   inputType?: string;
@@ -21,7 +26,9 @@ interface InputCompOneProps {
 
 const InputCompOne: React.FC<InputCompOneProps> = ({
   label,
-  labeClass,
+  labelClass,
+  labelSpan,
+  labelSpanClass,
   placeholder = "Placeholder",
   value,
   onChange,
@@ -35,13 +42,17 @@ const InputCompOne: React.FC<InputCompOneProps> = ({
   inputType = "text",
   selectOptions,
   icon,
+  selectClass,
+  inputClass,
+  parentInputClass,
+  parentSelectClass,
 }) => {
   return (
-    <div>
+    <div className={parentInputClass}>
       {label && (
-        <label htmlFor={name} className={`flex items-center ${labeClass}`}>
+        <label htmlFor={name} className={`flex items-center ${labelClass}`}>
           {label}
-          {/* <span>*</span> */}
+          {labelSpan && <span className={labelSpanClass}>{labelSpan}</span>}
         </label>
       )}
       {input && (
@@ -55,6 +66,7 @@ const InputCompOne: React.FC<InputCompOneProps> = ({
             name={name}
             tabIndex={tabIndex}
             ref={ref}
+            className={inputClass}
           />
           {icon && (
             <div className="">
@@ -64,9 +76,9 @@ const InputCompOne: React.FC<InputCompOneProps> = ({
         </div>
       )}
       {select && (
-        <div className="">
-          <select name={name} id="" value={selectValue}>
-            {selectOptions.map((option) => (
+        <div className={parentSelectClass}>
+          <select name={name} id="" value={selectValue} className={selectClass}>
+            {selectOptions?.map((option) => (
               <option key={option.value} value={option.value}>
                 {option.label}
               </option>
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index b042151..7e9685e 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -1,5 +1,12 @@
 import { FC } from "react";
-import { Hero, Header, TopHeader, Requirements } from "../components";
+import {
+  Hero,
+  Header,
+  TopHeader,
+  Requirements,
+  TopFooterOne,
+  MidFooter,
+} from "../components";
 
 const HomePage: FC = () => {
   return (
@@ -8,6 +15,8 @@ const HomePage: FC = () => {
       <Header />
       <Hero />
       <Requirements />
+      <TopFooterOne />
+      <MidFooter /> 
     </>
   );
 };
diff --git a/src/utils/data.tsx b/src/utils/data.tsx
index 2114a15..5ef3c25 100644
--- a/src/utils/data.tsx
+++ b/src/utils/data.tsx
@@ -47,3 +47,95 @@ export const socialsIcons = [
   { name: "twitter", image: Twitter },
   { name: "instagram", image: Instagram },
 ];
+
+export const footerItems = [
+  {
+    category: "PERSONAL BANKING",
+    subItems: [
+      { text: "CURRENT ACCOUNTS", href: "/current-accounts" },
+      { text: "SAVINGS ACCOUNTS", href: "/savings-accounts" },
+      { text: "INVESTMENTS", href: "/investment-accounts" },
+      { text: "LOANS AND CREDIT CARDS", href: "/loans-and-credit-cards" },
+      {
+        text: "NON-RESIDENT NIGERIAN (NRN) BANKING",
+        href: "https://www.fcmb.com/non-resident-nigerian",
+      },
+      { text: "WAYS TO BANK", href: "/ways-to-bank" },
+      { text: "BANCASSURANCE", href: "/bancassurance" },
+    ],
+  },
+  {
+    category: "BUSINESS BANKING",
+    subItems: [
+      { text: "PROPOSITIONS", href: "" },
+      { text: "CURRENT ACCOUNTS", href: "/business-current-accounts" },
+      { text: "SAVINGS ACCOUNTS", href: "/node/178" },
+      { text: "LOANS", href: "/business-loans" },
+      { text: "BONDS & GUARANTEES", href: "/bonds-and-guarantees" },
+      { text: "INTERVENTION FUNDS", href: "/intervention-funds" },
+      { text: "TRADE SERVICE", href: "/trade-service" },
+      { text: "PAYMENT & COLLECTION", href: "/payment-and-collection" },
+      { text: "WAYS TO BANK", href: "/business-ways-to-bank" },
+    ],
+  },
+  {
+    category: "CORPORATE BANKING",
+    subItems: [
+      { text: "FOREIGN EXCHANGE SERVICES", href: "/foreign-exchange-services" },
+      { text: "TRADE SERVICES", href: "/node/166" },
+      { text: "CASH MANAGEMENT SOLUTIONS", href: "/cash-management" },
+      { text: "CORPORATE FINANCE", href: "/corporate-finance" },
+    ],
+  },
+  {
+    category: "GROUP & SUBSIDIARIES",
+    subItems: [
+      { text: "FCMB GROUP PLC", href: "https://www.fcmbgroup.com/" },
+      { text: "CSL STOCKBROKERS", href: "https://www.cslstockbrokers.com/" },
+      {
+        text: "FCMB CAPITAL MARKETS",
+        href: "https://www.fcmbcapitalmarketsng.com/",
+      },
+      {
+        text: "FCMB ASSET MANAGEMENT",
+        href: "https://www.fcmbassetmanagement.com/index/",
+      },
+      { text: "FCMB MICROFINANCE BANK", href: "/fcmb-microfinance-initiative" },
+      { text: "FCMB UK", href: "http://www.fcmbuk.com/" },
+      { text: "FCMB PENSIONS LIMITED", href: "https://www.fcmbpensions.com/" },
+      { text: "CREDIT DIRECT LIMITED", href: "https://www.creditdirect.ng" },
+      { text: "FCMB TRUSTEES", href: "http://fcmbtrustees.com/" },
+    ],
+  },
+  {
+    category: "ABOUT US",
+    subItems: [
+      {
+        text: "OUR VISION/MISSION/VALUES",
+        href: "/about-us/vision-mision-core-values",
+      },
+      { text: "OUR HISTORY", href: "/about-us/our-history" },
+      {
+        text: "INVESTOR RELATIONS",
+        href: "http://www.fcmbgroup.com/investor-relations",
+      },
+      { text: "CSR", href: "/corporate-social-responsibility/index.html" },
+      { text: "SUSTAINABILITY", href: "/sustainability/index.html" },
+      { text: "OUR LEADERSHIP", href: "/about-us/our-leadership" },
+      { text: "BOARD OF DIRECTORS", href: "/about-us/board-of-directors" },
+      { text: "MEDIA RELATIONS", href: "/media-relations" },
+      { text: "AWARDS AND RECOGNITION", href: "/awards" },
+      { text: "OUR POLICY", href: "/our-policies" },
+    ],
+  },
+  {
+    category: "MY BANK AND I",
+    subItems: [
+      { text: "TELEPHONE SELF SERVICE", href: "/telephone-self-service" },
+      { text: "CURRENT CAMPAIGNS/PROMOS", href: "/current-campaigns-promos" },
+      { text: "CAREERS", href: "/career" },
+      { text: "CUSTOMER FEEDBACK", href: "/customer-feedback" },
+      { text: "CUSTOMER SERVICE", href: "/customer-service" },
+    ],
+  },
+];