diff --git a/src/components/About.js b/src/components/About.js
index 070e76b04..1a34be37e 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -2,7 +2,11 @@ import React from "react";
 import { image } from "../data/data";
 
 function About() {
-  return <div>About</div>;
+  return <div id='about'>
+    <h2>About Me</h2>
+    <p>Shes a web dev from NYC!</p>
+    <img src={image} alt='I made this'></img>
+  </div>;
 }
 
 export default About;
diff --git a/src/components/Home.js b/src/components/Home.js
index bf7081333..e7f7d9e49 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,9 +1,15 @@
 import React from "react";
 import { name, city } from "../data/data.js";
 
+const divStyle = {
+  color: 'firebrick'
+};
+
 function Home() {
   // update the JSX being returned!
-  return <div>Home</div>;
+  return <div id='home'>
+    <h1 style={divStyle}>{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..1996a5bc9 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -2,7 +2,10 @@ 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;