diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 98d7a26..6d40e41 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -13,7 +13,7 @@ export default () => (
         />
 
         <h1 className="font-extrabold  uppercase text-secondary text-2xl">
-          open<span className="text-primary">Eye</span>
+          pen<span className="text-primary">Eye</span>
         </h1>
       </div>
 
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 565e812..c69c837 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,5 +1,11 @@
 import Navbar from "../components/Navbar";
 
+
+import banner_pic from "../assets/Group 222.png";
+import img_2 from "../assets/[GetPaidStock 3.png";
+import img_3 from "../assets/jake-blucker-OJX7gIU3E6U-unsplash (1) 2.png";
+import img_logo from "../assets/logo.png";
+import opg from "../assets/open-government-partnership-logo-square-600x600-300x300 5.png";
 import { Link } from "react-router-dom";
 
 const HomePage = () => {
@@ -39,7 +45,9 @@ const HomePage = () => {
         <div className="post mx-48 absolute top-80 pt-64">
           <div className="card grid grid-cols-1 md:grid-cols-2">
             <div className="card shadow-2xl bg-white flex py-4 px-4 ">
-              <div className="rounded-full w-14 h-10 bg-primary"></div>
+              <div className="rounded-full w-14 h-8 bg-primary">
+                <img src={opg} alt="" className="rounded-full object-fit w-14 h-8" />
+              </div>
               <div className="content px-10">
                 <h1 className="text-primary capitalize text-lg font-extrabold">
                   Open government partnership
@@ -59,7 +67,9 @@ const HomePage = () => {
               </div>
             </div>
             <div className="card shadow-2xl bg-primary flex py-4 px-4 ">
-              <div className="rounded-full w-14 h-10 bg-white"></div>
+              <div className="rounded-full w-14 h-8 bg-white">
+              <img src={img_logo} alt="" className="rounded-full object-fit w-14 h-8" />
+              </div>
               <div className="content px-10">
                 <h1 className="text-white capitalize text-lg font-extrabold">
                   Open government partnership
@@ -107,7 +117,9 @@ const HomePage = () => {
                 </a>
               </div>
             </div>
-            <div className="img bg-primary h-auto"></div>
+            <div className="img bg-primary h-auto">
+              <img src={banner_pic} alt=""  width="100%" height=""/>
+            </div>
           </div>
         </div>
 
@@ -282,7 +294,9 @@ const HomePage = () => {
                   </p>
                 </div>
               </div>
-              <div className="img bg-white h-auto"></div>
+              <div className="img bg-white h-auto">
+                <img src={img_2} alt="" width="100%" height="100" />
+              </div>
             </div>
           </div>
         </section>
@@ -297,7 +311,9 @@ const HomePage = () => {
             <div className="cards mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
               <div className="card relative shadow-2xl bg-white ">
                 <div className="content">
-                  <div className="card-img  bg-primary h-40"></div>
+                  <div className="card-img  bg-primary h-40">
+                    <img src={img_3} alt="" className="object-cover h-40 w-96"/>
+                  </div>
 
                   <div className="location absolute top-28 mt-6 shadow-lg  text-sm  bg-secondary w-20 py-2 ">
                     <p className="text-white text-center">Jos South</p>
@@ -312,7 +328,9 @@ const HomePage = () => {
 
               <div className="card relative shadow-2xl bg-white  ">
                 <div className="content">
-                  <div className="card-img bg-primary h-40"></div>
+                  <div className="card-img bg-primary h-40">
+                    <img src={img_3} alt="" className="object-cover h-40 w-96"/>
+                  </div>
 
                   <div className="location absolute top-28 mt-6 shadow-lg text-sm  bg-secondary w-20 py-2 ">
                     <p className="text-white text-center">Jos North</p>
@@ -326,7 +344,9 @@ const HomePage = () => {
 
               <div className="card relative shadow-2xl bg-white    ">
                 <div className="content">
-                  <div className="card-img bg-primary h-40"></div>
+                  <div className="card-img bg-primary h-40">
+                    <img src={img_3} alt="" className="object-cover h-40 w-96"/>
+                  </div>
 
                   <div className="location absolute top-28 mt-6 shadow-lg  text-sm  bg-secondary w-20 py-2 ">
                     <p className="text-white text-center">Bassa</p>
diff --git a/src/pages/SignUpAndSignUp.jsx b/src/pages/SignUpAndSignUp.jsx
index b4b95c2..0b66d45 100644
--- a/src/pages/SignUpAndSignUp.jsx
+++ b/src/pages/SignUpAndSignUp.jsx
@@ -3,6 +3,10 @@ import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import LoginPage from "./Login";
 import RegisterPage from "./Register";
 
+// assets
+import side_1 from "../assets/Group 207.png";
+import side_2 from "../assets/Group 100.png";
+
 import 'react-tabs/style/react-tabs.css';
 
 
@@ -19,10 +23,11 @@ const SignUpAndSignUp = () => {
       </div>
 
       <div className="auth-content py-20 grid grid-cols-1 md:grid-cols-2 w-full mx-10 md:text-sm md:w-3/4 md:mx-auto ">
-        <div className="img w-1/3">
-          <h1 className="text-4xl text-white invisible md:mb-0 md:visible ">
-            ogplateau
-          </h1>
+        <div className="img w-1/">
+          <div className="text-4xl text-white invisible md:mb-0 md:visible flex flex-row mx-[-46px] ">
+            <img src={side_1} alt="" className="mr-28 mb-8"/> 
+            <img src={side_2} alt="" className=" ml-18 mb-3"/>
+          </div>
         </div>
         <div className="form w-3/4">
           <Tabs