diff --git a/client/src/Components/Footer.js b/client/src/Components/Footer.js
index 04ade88..04685fa 100644
--- a/client/src/Components/Footer.js
+++ b/client/src/Components/Footer.js
@@ -1,7 +1,15 @@
 import React from "react";
-//footer component
+import { Card } from "react-bootstrap";
+
 const Footer = () => {
-	return <div>Footer</div>;
+	return (
+		<footer
+			className="bg-danger py-3 border border-dark fixed-bottom "
+			style={{ color: "red" }}
+		>
+			<Card.Img variant="top" src="holder.js/200px160" />
+		</footer>
+	);
 };
 
 export default Footer;
diff --git a/client/src/Components/Header.js b/client/src/Components/Header.js
index b15a652..1848d8f 100644
--- a/client/src/Components/Header.js
+++ b/client/src/Components/Header.js
@@ -1,10 +1,28 @@
 import React from "react";
+import logo from "../assets/cyf_brand.png";
+import { Navbar, Button, Col } from "react-bootstrap";
 //header component
 const Header = () => {
 	return (
-		<div>
-			<button>click me</button>Header
-		</div>
+		<>
+			<Navbar bg="light" expand="md" className="px-4">
+				<Col xs={5} md={3} lg={3} xl={3} xxl={2}>
+					<img src={logo} alt="logo" style={{ width: "100%" }} />
+				</Col>
+				<Col>
+					<h3 className="text-center font-weight-bold text-danger">TOOT</h3>
+				</Col>
+				<Col lg={1} xl={1} className="ms-auto">
+					<Button variant="danger" style={{ width: "100px" }}>
+						Sign Out
+					</Button>
+				</Col>
+			</Navbar>
+			<div
+				className="bg-danger py-3"
+				style={{ textAlign: "center", color: "white" }}
+			></div>
+		</>
 	);
 };
 
diff --git a/client/src/assets/cyf_brand.png b/client/src/assets/cyf_brand.png
new file mode 100644
index 0000000..f9f8760
Binary files /dev/null and b/client/src/assets/cyf_brand.png differ