diff --git a/src/components/About.js b/src/components/About.js
index 070e76b04..797eb9349 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -2,7 +2,13 @@ import React from "react";
 import { image } from "../data/data";
 
 function About() {
-  return <div>About</div>;
+  return(
+     <div id="about">
+      <h2>About Me</h2>;
+      <p>I am a fullstack Web Developer</p>;
+      <img src={image} alt="I made this"></img>
+      About</div>
+  )
 }
 
 export default About;
diff --git a/src/components/Home.js b/src/components/Home.js
index bf7081333..d6a561e3c 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -3,7 +3,11 @@ import { name, city } from "../data/data.js";
 
 function Home() {
   // update the JSX being returned!
-  return <div>Home</div>;
+  return (
+  <div id="home">
+    <h1 style={{ color:"firebrick"}}> {name} is a Web Developer from {city} </h1>
+    Home</div>
+  )
 }
 
 export default Home;
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 86a760056..601ac1f59 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -2,7 +2,13 @@ import React from "react";
 
 function NavBar() {
   // update the JSX being returned!
-  return <nav>NavBar</nav>;
+  return(
+     <nav>
+      <a href="#home">"Home"</a>;
+      <a href="#about">"About"</a>;
+      NavBar</nav>
+  )
+
 }
 
 export default NavBar;