diff --git a/components/Account/account.js b/components/Account/account.js
index fee2bd2..a5ccac8 100644
--- a/components/Account/account.js
+++ b/components/Account/account.js
@@ -1,27 +1,15 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from "react";
-import Router from "next/router";
 import { useForm } from "react-hook-form";
 import styled from "styled-components";
-import BottomNav from "../Homepage/BottomNav";
 import Input from "../Input";
 import { H3 } from "../Text/Headings";
 import { SubmitButton } from "../Buttons";
-
-const NavBar = styled.nav`
-  height: 54px;
-  width: 100%;
-  position: fixed;
-  background-color: #fff;
-  box-shadow: 0px 1px 7px #0000001a;
-  padding: 15px;
-`;
+import Layout from "../Layout";
 
 const DetailsBody = styled.div`
   height: 76px;
   background-color: #fff;
-  border-radius: 10px;
-  margin-top: 60px;
   padding: 15px;
   margin-bottom: 15px;
 `;
@@ -30,23 +18,10 @@ const Text = styled(H3)`
   font-weight: normal;
 `;
 
-export const Nav = props => {
-  return (
-    <NavBar className="flex justify-between items-center z-10">
-      <div onClick={() => Router.back()}>
-        <img src="/images/account/Back-Arrow.svg" alt="back" />
-      </div>
-      <Text color="#232323" className="my-0 font-normal mx-auto">
-        {props.title}
-      </Text>
-    </NavBar>
-  );
-};
-
 const Details = ({ name, email }) => {
   return (
-    <DetailsBody className="flex items-center">
-      <img src="/images/account/profile.svg" alt="profile" />
+    <DetailsBody className="flex items-center rounded-lg">
+      <img src="/images/profile.svg" alt="profile" />
       <div className="ml-4">
         <Text>{name}</Text>
         <span style={{ color: "#7f7f7f" }}>{email}</span>
@@ -62,7 +37,7 @@ const Number = ({ number }) => {
   return (
     <div className="bg-white p-4 mb-4 rounded-lg">
       <div className="flex items-center mb-3">
-        <img src="/images/account/phone.svg" alt="phone" />
+        <img src="/images/phone.svg" alt="phone" />
         <div className="ml-4">
           <Text>Registered Number</Text>
           <span style={{ color: "#7f7f7f" }}>{number}</span>
@@ -100,7 +75,7 @@ const ChangePassword = props => {
   return (
     <form onSubmit={handleSubmit(onSubmitForm)} className="bg-white p-4 rounded-lg mb-4">
       <div className="flex items-start">
-        <img src="/images/account/lock.svg" alt="password" />
+        <img src="/images/lock.svg" alt="password" />
         <div className="ml-4 flex flex-col justify-around w-full">
           <Text className="mb-4">Change Password</Text>
           <Input
@@ -148,9 +123,9 @@ const Register = props => {
     setSubmitted(true);
   };
   return (
-    <form onSubmit={handleSubmit(onSubmitForm)} className="bg-white p-4 rounded-lg mb-16">
+    <form onSubmit={handleSubmit(onSubmitForm)} className="bg-white p-4 rounded-lg mb-4">
       <div className="flex items-start">
-        <img src="/images/account/car.png" alt="password" />
+        <img src="/images/car.png" alt="password" />
         <div className="ml-4 flex flex-col justify-around w-full">
           <Text className="mb-4">Register as a Transporter</Text>
           <Input
@@ -191,16 +166,12 @@ const Register = props => {
 
 const Account = props => {
   return (
-    <>
-      <Nav title="Profile" />
-      <div className="w-full p-4">
-        <Details name="Steve Smith" email="stevem@gmail.com" />
-        <Number number="081012345678" />
-        <ChangePassword />
-        <Register />
-      </div>
-      <BottomNav />
-    </>
+    <Layout header="Profile">
+      <Details name="Steve Smith" email="stevem@gmail.com" />
+      <Number number="081012345678" />
+      <ChangePassword />
+      <Register />
+    </Layout>
   );
 };
 
diff --git a/components/Homepage/NewReport.js b/components/Homepage/NewReport.js
index bc26e4a..1485706 100644
--- a/components/Homepage/NewReport.js
+++ b/components/Homepage/NewReport.js
@@ -1,25 +1,17 @@
 import styled from "styled-components";
 import React from "react";
-
+import { H3 } from "../Text/Headings";
+import { TextSmall } from "../Text/Body";
 import Link from "next/link";
 
-const Heading = styled.h1`
-  font-size: 20px;
-  font-weight: bold;
-`;
-
 const Body = styled.div`
   background-color: #bce0fd;
   color: #2699fb;
   border: 1px solid #bce0fd;
   border-radius: 10px;
   padding: 20px 20px;
-  margin-bottom: 60px;
-  margin-top: 30px;
-`;
-const Text = styled.p`
-  font-size: 16px;
-  text-align: left;
+  margin-bottom: 10px;
+  margin-top: 20px;
 `;
 
 const NewReport = (props) => {
@@ -27,8 +19,8 @@ const NewReport = (props) => {
     <Link href="reports/makeReport">
       <a>
         <Body>
-          <Heading>Make a New Report</Heading>
-          <Text>Update us with your current emergencies in your area.</Text>
+          <H3>Make a New Report</H3>
+          <TextSmall>Update us with your current emergencies in your area.</TextSmall>
         </Body>
       </a>
     </Link>
diff --git a/components/Homepage/Reports/Report.js b/components/Homepage/Reports/Report.js
index 72917d0..9a6a2a9 100644
--- a/components/Homepage/Reports/Report.js
+++ b/components/Homepage/Reports/Report.js
@@ -1,5 +1,7 @@
 import React from "react";
 import styled from "styled-components";
+import { H3 } from "../../Text/Headings";
+import { TextSmall } from "../../Text/Body";
 
 const ReportBody = styled.div`
   background-color: #fff;
@@ -9,24 +11,13 @@ const ReportBody = styled.div`
   margin-bottom: 20px;
 `;
 
-const Title = styled.h1`
-  font-size: 14px;
-  color: #232323;
-  font-weight: bold;
-`;
-
-const Text = styled.p`
-  color: #6c6c6c;
-  font-size: 14px;
-`;
-
 const Report = (props) => {
   return (
     <ReportBody>
-      <Title>{props.title}</Title>
-      <Text>
+      <H3 color="#232323">{props.title}</H3>
+      <TextSmall color="#6c6c6c">
         Along Olu-Obansanjo road. cars are on fire avoid the area, fire fighters are at the scene. Traffic is...
-      </Text>
+      </TextSmall>
     </ReportBody>
   );
 };
diff --git a/components/Homepage/Reports/Reports.js b/components/Homepage/Reports/Reports.js
index 970f47e..87fa474 100644
--- a/components/Homepage/Reports/Reports.js
+++ b/components/Homepage/Reports/Reports.js
@@ -1,26 +1,22 @@
 /* eslint-disable no-unused-vars */
 import React from "react";
-import styled from "styled-components";
 import Report from "./Report";
+import styled from "styled-components";
+import { H3 } from "../../Text/Headings";
+import { TextSmall } from "../../Text/Body";
 
-const Heading = styled.p`
-  color: #232323;
+const Text = styled(TextSmall)`
   font-size: 20px;
-  margin: 10px 0;
-`;
-
-const AllReports = styled.span`
-  color: #2699fb;
-  font-size: 12px;
+  margin: 5px 0;
 `;
 
 const Reports = (props) => {
   return (
     <div>
-      <Heading>Reports in your area</Heading>
-      <Report title=" Accident" />
+      <Text color="#232323">Reports in your area</Text>
+      <Report title="Accident" />
       <Report title="Shoot-out" />
-      <AllReports>See All Reports</AllReports>
+      <TextSmall color="#2699fb">See All Reports</TextSmall>
     </div>
   );
 };
diff --git a/components/Homepage/Trips/NewTrip.js b/components/Homepage/Trips/NewTrip.js
index a51feb2..108aa4e 100644
--- a/components/Homepage/Trips/NewTrip.js
+++ b/components/Homepage/Trips/NewTrip.js
@@ -1,5 +1,7 @@
 import styled from "styled-components";
 import React from "react";
+import { H3 } from "../../Text/Headings";
+import { TextSmall } from "../../Text/Body";
 
 const Body = styled.div`
   background-color: #afdeb1;
@@ -8,14 +10,10 @@ const Body = styled.div`
   color: #43a047;
   padding: 20px;
 `;
-const Heading = styled.h1`
-  font-size: 20px;
-  font-weight: bold;
-`;
 
-const Text = styled.p`
+const Text = styled(TextSmall)`
   font-size: 20px;
-  padding: 15px 0;
+  padding: 10px 0;
 `;
 
 const NewTrip = (props) => {
@@ -23,7 +21,7 @@ const NewTrip = (props) => {
     <div className="new-trip">
       <Text>Welcome back {props.user}!</Text>
       <Body>
-        <Heading>Plan a new trip</Heading>
+        <H3>Plan a new trip</H3>
         <p>Schedule your next outing</p>
       </Body>
     </div>
diff --git a/components/Homepage/Trips/RecentTrips.js b/components/Homepage/Trips/RecentTrips.js
index 5ba8fa6..16b564a 100644
--- a/components/Homepage/Trips/RecentTrips.js
+++ b/components/Homepage/Trips/RecentTrips.js
@@ -2,10 +2,11 @@
 import styled from "styled-components";
 import React from "react";
 import Trip from "./Trip";
+import { TextSmall } from "../../Text/Body";
 
-const Text = styled.p`
+const Text = styled(TextSmall)`
   font-size: 20px;
-  margin: 10px 0;
+  margin: 5px 0;
 `;
 
 const RecentTrips = (props) => {
@@ -14,7 +15,7 @@ const RecentTrips = (props) => {
       <Text>Your Recent Trips</Text>
       <Trip />
       <Trip />
-      <span style={{ color: "#2699fb", fontSize: "12px" }}>See All Trips</span>
+      <TextSmall color="#2699fb">See All Trips</TextSmall>
     </div>
   );
 };
diff --git a/public/images/account/Back-Arrow.svg b/public/images/account/Back-Arrow.svg
deleted file mode 100644
index 32ebb55..0000000
--- a/public/images/account/Back-Arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><defs><style>.a{fill:#6c6c6c;}</style></defs><path class="a" d="M25.977,14.727H10.789l7-7-1.813-1.75-10,10,10,10,1.75-1.75-6.937-7H25.977Z" transform="translate(-5.977 -5.977)"/></svg>
\ No newline at end of file
diff --git a/public/images/account/Icon Home-active.svg b/public/images/account/Icon Home-active.svg
deleted file mode 100644
index c7242ef..0000000
--- a/public/images/account/Icon Home-active.svg	
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:none;}.b{clip-path:url(#a);}.c{fill:#7bbc7e;}</style><clipPath id="a"><rect class="a" width="16" height="16"/></clipPath></defs><g class="b"><path class="c" d="M15.581,5.186l-7-5a1,1,0,0,0-1.162,0l-7,5A1,1,0,0,0,1.581,6.814L2,6.515V15a1,1,0,0,0,1,1H13a1,1,0,0,0,1-1V6.515A1.7,1.7,0,0,0,15,7a1,1,0,0,0,.582-1.814ZM12,14H10V11a2,2,0,0,0-4,0v3H4V5.086L8,2.229l4,2.857Z" transform="translate(0)"/></g></svg>
\ No newline at end of file
diff --git a/public/images/account/car.png b/public/images/car.png
similarity index 100%
rename from public/images/account/car.png
rename to public/images/car.png
diff --git a/public/images/account/lock.svg b/public/images/lock.svg
similarity index 100%
rename from public/images/account/lock.svg
rename to public/images/lock.svg
diff --git a/public/images/account/phone.svg b/public/images/phone.svg
similarity index 100%
rename from public/images/account/phone.svg
rename to public/images/phone.svg
diff --git a/public/images/account/profile.svg b/public/images/profile.svg
similarity index 100%
rename from public/images/account/profile.svg
rename to public/images/profile.svg