diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..db86ad6
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,5 @@
+.app{
+    background: #fffbfb;
+    margin: 0;
+    padding-top: 5%;
+}
\ No newline at end of file
diff --git a/src/app.js b/src/app.js
index 96c9375..0c0f605 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,4 +1,5 @@
 import React from "react";
+
 import {BrowserRouter as Router, Route} from 'react-router-dom';
 import PageWrapper from './component/PageWrapper';
 import HomePage from './component/Pages/HomePage';
@@ -33,6 +34,7 @@ const App = () => {
             />
            </PageWrapper>
        </Router>
+
     )
 }
 
diff --git a/src/components/accountdetails.js b/src/components/accountdetails.js
new file mode 100644
index 0000000..6496a0d
--- /dev/null
+++ b/src/components/accountdetails.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Accountd = () => {
+    return (
+    <div className='tabDiv2'>
+        <h3 className='tabText'>Account Details</h3>   
+    </div>
+    )
+}
+
+export default Accountd;
diff --git a/src/components/buyproducts.js b/src/components/buyproducts.js
new file mode 100644
index 0000000..3f61b67
--- /dev/null
+++ b/src/components/buyproducts.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Buyp = () => {
+    return (
+    <div className='tabDiv3'>
+        <h3 className='tabText'>Buy Products</h3>
+    </div>
+    )
+}
+
+export default Buyp;
diff --git a/src/components/card.css b/src/components/card.css
new file mode 100644
index 0000000..3883248
--- /dev/null
+++ b/src/components/card.css
@@ -0,0 +1,49 @@
+.imgDiv {
+    
+    width: 100%;
+    height: 130px;
+}
+
+.con{
+    display: flex;
+justify-content: space-between;
+}
+.card{
+width: 60%;
+margin: 5%;
+background: ghostwhite;
+padding: 0 0 2%;
+margin-right: 2%;
+}
+
+.returnDiv2{
+    margin-left: 0%;
+    padding-left: 1%;
+}
+
+.durationDiv{
+    margin-left: 0%;
+    padding-left: 1%;
+}
+
+.logoDiv1{
+    display: flex;
+}
+
+.logoText1{
+    color: green;
+    font-style: italic;
+}
+
+.buttonName2{
+    background-color: #6FCF97;;
+    border-radius: 9px;
+    width: 74%;
+    height: 46px;
+    color: white;
+    margin-left: 9%;
+    font-family: "Droid Serif", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 162%;
+}
\ No newline at end of file
diff --git a/src/components/card.js b/src/components/card.js
new file mode 100644
index 0000000..3b96f1a
--- /dev/null
+++ b/src/components/card.js
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import './card.css';
+const Card = (props) => {
+  return (
+    <div className='card'>
+      <div>
+        <img className="imgDiv" src={props.image} />
+      </div>
+      <div>
+        <h3>{props.header}</h3>
+      </div>
+
+      <div className='con'>
+        <div className="returnDiv2">
+          <h5>Return</h5>
+          <h5>12%</h5>
+        </div>
+
+        <div className="durationDiv">
+          <h5>Duration</h5>
+          <h5>6months</h5>
+        </div>
+
+        <div className="logoDiv1">
+          <h5 className="logoText1">Empower</h5>
+          <h5>farmers</h5>
+        </div>
+      </div>
+ 
+      <button className="buttonName2">Sponsor</button>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/container.js b/src/components/container.js
new file mode 100644
index 0000000..4ce870f
--- /dev/null
+++ b/src/components/container.js
@@ -0,0 +1,19 @@
+import React from "react";
+import Card from './card';
+import A from '../images/a.jpg';
+import B from '../images/b.jpg';
+
+const Container = () => {
+    return (
+    <div>
+        <h2>Sponsorshop</h2>
+        <div style={{display:'flex'}}>
+            <Card image={A} header={'Poultry'} />
+        <Card image={B} header={'Fresh Produce Trading'}/>
+        </div>
+        
+    </div>
+    )
+}
+
+export default Container;
\ No newline at end of file
diff --git a/src/components/dashboard.js b/src/components/dashboard.js
new file mode 100644
index 0000000..2267c88
--- /dev/null
+++ b/src/components/dashboard.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+import C from "../images/c.png";
+
+const DashB = () => {
+    return (
+    <div className='tabDiv4'>
+        <div className='dashDiv1'>
+        <img className= "rec22Div" src={C}/>
+        <h3 className='tabText'>Dashboard</h3>
+        </div>   
+    </div>
+    )
+}
+
+export default DashB;
diff --git a/src/components/editProfile.js b/src/components/editProfile.js
new file mode 100644
index 0000000..ea169c3
--- /dev/null
+++ b/src/components/editProfile.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const EditP = () => {
+    return (
+    <div className='tabDiv'>
+        <h3 className='tabText'>Edit Profile</h3>
+    </div>
+    )
+}
+
+export default EditP;
diff --git a/src/components/navbar.css b/src/components/navbar.css
new file mode 100644
index 0000000..5e751e5
--- /dev/null
+++ b/src/components/navbar.css
@@ -0,0 +1,35 @@
+.navbarDiv {
+    display: flex;
+    justify-content: space-between;
+    background: #F2F2F2;
+    margin-top: -2%;
+}
+
+.logoDiv {
+    display: flex;
+
+} 
+
+.logoText {
+    color: green;
+    font-style: italic;
+}
+
+.textName {
+    display: flex;
+    justify-content: space-between;
+}
+
+.tabName {
+    margin-right: 130%;
+}
+.buttonName {
+background-color: green;
+border-radius: 8px;
+width: 9%;
+height: 37px;
+border: none;
+margin-top: 1%;
+color: white;
+margin-left: 11%;
+}
\ No newline at end of file
diff --git a/src/components/navbar.js b/src/components/navbar.js
new file mode 100644
index 0000000..6329334
--- /dev/null
+++ b/src/components/navbar.js
@@ -0,0 +1,28 @@
+import React from "react";
+import './navbar.css'
+const Navbar = () => {
+    return (
+    <div className='navbarDiv'>
+
+      <div className='logoDiv'>
+          <h4 className='logoText'>Empower</h4>
+          <h4>farmer</h4>
+       </div>  
+
+        <div className= 'textName'>
+        <h4 className= 'tabName'>Home</h4>
+
+        <h4>AboutUs</h4>
+        </div>
+
+        
+        <button className= 'buttonName'>Donates
+        </button>
+        
+
+
+    </div>
+    )
+}
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/navbar2.css b/src/components/navbar2.css
new file mode 100644
index 0000000..7445a19
--- /dev/null
+++ b/src/components/navbar2.css
@@ -0,0 +1,16 @@
+.narBar2cutDiv {
+    background-color: white;
+    display: flex;
+    justify-content: space-between;
+    margin-left: 19%;
+}
+
+.returnDiv {
+    background: #F2F2F2;
+    margin-left: -23%;
+}
+
+.cycleDiv {
+    background-color: #F2F2F2;
+    margin-left: 12%;
+}
\ No newline at end of file
diff --git a/src/components/navbar2.js b/src/components/navbar2.js
new file mode 100644
index 0000000..3d81b26
--- /dev/null
+++ b/src/components/navbar2.js
@@ -0,0 +1,24 @@
+import React from "react";
+import './navbar2.css'
+const NavB2 = () => {
+    return (
+    <div className='narBar2cutDiv'>
+        <div className='emailDiv'>
+            <h3>Hello</h3>
+            <h3>samuel@gmail.com</h3>
+        </div>
+
+        <div className='returnDiv'>
+            <h3>Expected Return</h3>
+        </div>
+
+        <div className='cycleDiv'>
+            <h3>Cycle</h3>
+        </div>
+
+    </div>
+    
+    )
+}
+
+export default NavB2;
\ No newline at end of file
diff --git a/src/components/sidebar.js b/src/components/sidebar.js
new file mode 100644
index 0000000..4ef2748
--- /dev/null
+++ b/src/components/sidebar.js
@@ -0,0 +1,24 @@
+import React from "react";
+import DashB from './dashboard';
+import EditP from './editProfile';
+import Sponsorshop from './sponsorshop';
+import Accountd from './accountdetails';
+import Buyp from './buyproducts';
+import '../sidebar.css';
+
+const Sidebar = () => {
+    return (
+    <div className='sidebarDiv' >
+        <DashB />
+        <EditP />
+        <Sponsorshop />
+        <Accountd />
+        <Buyp />
+        
+
+
+    </div>
+    )
+}
+
+export default Sidebar;
diff --git a/src/components/sponsorshop.js b/src/components/sponsorshop.js
new file mode 100644
index 0000000..5e19b70
--- /dev/null
+++ b/src/components/sponsorshop.js
@@ -0,0 +1,11 @@
+import React from "react";
+import '../sidebar.css';
+const Sponsorshop = () => {
+    return (
+    <div className='tabDiv1'>
+        <h3 className='tabText'>Sponsorshop</h3>
+    </div>
+    )
+}
+
+export default Sponsorshop;
diff --git a/src/images/a.jpg b/src/images/a.jpg
new file mode 100644
index 0000000..6fe04de
Binary files /dev/null and b/src/images/a.jpg differ
diff --git a/src/images/b.jpg b/src/images/b.jpg
new file mode 100644
index 0000000..0a0d7fd
Binary files /dev/null and b/src/images/b.jpg differ
diff --git a/src/images/c.png b/src/images/c.png
new file mode 100644
index 0000000..eb9d07e
Binary files /dev/null and b/src/images/c.png differ
diff --git a/src/images/d.png b/src/images/d.png
new file mode 100644
index 0000000..9c93d65
Binary files /dev/null and b/src/images/d.png differ
diff --git a/src/sidebar.css b/src/sidebar.css
new file mode 100644
index 0000000..3a1b39e
--- /dev/null
+++ b/src/sidebar.css
@@ -0,0 +1,71 @@
+.sidebarDiv {
+    background-color: #3b7f58;
+    width: 226px;
+    height: 479px;
+    margin-left: 0px;
+    margin-top: -27px;
+    padding-top: 16px;
+    margin-right: 3%;
+}
+.tabDiv {
+    width: 226px;
+    height: 60px;
+    left: 0px;
+    top: 40px;
+    background: #6FCF97;
+}
+.tabDiv1{
+    width: 226px;
+    height: 60px;
+    left: 0px;
+    top: 40px;
+    background: #6FCF97;
+}
+
+.tabDiv2{
+    width: 226px;
+    height: 60px;
+    left: 0px;
+    top: 40px;
+    background: #6FCF97;
+}
+
+.tabDiv3{
+    width: 226px;
+    height: 60px;
+    left: 0px;
+    top: 40px;
+    background: #6FCF97;
+}
+
+.tabDiv4{
+    width: 226px;
+    height: 60px;
+    left: 0px;
+    top: 40px;
+    background:  green;
+}
+
+ .rec22Div{
+     display: flex;
+     width: 14%;
+     height: 8%;
+ }
+
+ .dashDiv1{
+     display: flex;
+     justify-content: space-between;
+ }
+
+
+.tabText {
+    padding-top: 5%;
+    font-family: "Droid Serif", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 23px;
+    /* line-height: 62.62%; */
+    text-align: center;
+    color: #f2f2f2;
+    
+}
diff --git a/yarn.lock b/yarn.lock
index 409e246..d2eda92 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4563,7 +4563,9 @@ lolex@^5.0.0:
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5806,11 +5808,13 @@ prop-types@^15.6.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+
 property-expr@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.2.tgz#fff2a43919135553a3bc2fdd94bdb841965b2330"
   integrity sha512-bc/5ggaYZxNkFKj374aLbEDqVADdYaLcFo8XBkishUWbaAdjlphaBFns9TvRA2pUseVL/wMFmui9X3IdNDU37g==
 
+
 psl@^1.1.28:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -5920,16 +5924,19 @@ react-dom@^16.13.1:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+
 react-fast-compare@^2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
 react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+
 react-router-dom@^5.1.2:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
@@ -5959,6 +5966,7 @@ react-router@5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+
 react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@@ -6344,6 +6352,7 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
+
 scheduler@^0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
@@ -6352,6 +6361,7 @@ scheduler@^0.18.0:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"