diff --git a/src/components/About.js b/src/components/About.js
index 070e76b04..c64d6b065 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -2,7 +2,14 @@ import React from "react";
 import { image } from "../data/data";
 
 function About() {
-  return <div>About</div>;
+  return <div id="about">
+    About
+    <img src="https://i.imgur.com/mV8PQxj.gif" alt="I made this"></img>
+    <p></p>
+    <h2>About Me</h2>
+
+
+  </div>;
 }
 
 export default About;
diff --git a/src/components/Home.js b/src/components/Home.js
index bf7081333..93a0266fd 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -3,7 +3,9 @@ import { name, city } from "../data/data.js";
 
 function Home() {
   // update the JSX being returned!
-  return <div>Home</div>;
+  return <div id="home">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..508988ace 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>NavBar
+    <a href="#home">Home</a>
+    <a href="#about">About</a>
+  </nav>
+  </>;
 }
 
 export default NavBar;