diff --git a/src/components/About.js b/src/components/About.js
index 070e76b04..cb444e5ee 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -1,8 +1,20 @@
+// src/components/About.js
 import React from "react";
-import { image } from "../data/data";
+// Assuming 'image' is defined as a const variable here, e.g.:
+// const image = "https://i.imgur.com/mV8PQxj.gif";
 
 function About() {
-  return <div>About</div>;
-}
+  // Use the 'image' variable that is defined in this file.
+  // If it's not defined, you might need to add it or import it from src/data/user.js
+  const image = "https://placehold.co/150x150/000/FFF?text=Profile"; // Placeholder: Check your starter code for actual variable or import
 
-export default About;
+  return (
+    <div id="about">
+      <h2>About Me</h2>
+      <p>I Made This</p>
+      <img src={"https://i.imgur.com/mV8PQxj.gif"} alt="I made this" />
+    </div>
+  );
+}
+// Make sure it's default exported if it's not already
+export default About;
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
index bf7081333..5b3d08cd6 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,9 +1,23 @@
+// src/components/Home.js
 import React from "react";
-import { name, city } from "../data/data.js";
+// Assuming 'Name' and 'City' are defined as const variables here, e.g.:
+// const name = "Liza";
+// const city = "New York";
 
 function Home() {
-  // update the JSX being returned!
-  return <div>Home</div>;
-}
+  // Use the 'name' and 'city' variables that are defined in this file.
+  // If they are not defined, you might need to add them or import them from src/data/user.js
+  // For example, if your starter code has:
+  const Name = "Your Name"; // Check your actual starter code for the variable names and values
+  const City = "Your City"; // Check your actual starter code for the variable names and values
 
+  return (
+    <div id="home">
+      <h1 style={{ color: "firebrick" }}>
+        'Name is a Web Developer from City'
+      </h1>
+    </div>
+  );
+}
+// Make sure it's default exported if it's not already
 export default Home;
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 86a760056..8dcfa1c6f 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,8 +1,13 @@
+// src/components/NavBar.js
 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;
+// Make sure it's default exported if it's not already
+export default NavBar;
\ No newline at end of file