diff --git a/src/components/About.js b/src/components/About.js
index 070e76b04..535dc30f0 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>Hello world</p>
+    <img src={image} alt="I made this"/>
+  </div>
+)
 }
 
 export default About;
diff --git a/src/components/Home.js b/src/components/Home.js
index bf7081333..4216e9fd5 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>
+  </div>
+)
 }
 
 export default Home;
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 86a760056..e01b11c0a 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -2,7 +2,12 @@ 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>
+    </nav>
+  )
 }
 
 export default NavBar;