diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..e7ea2b8e8
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,14 @@
+{
+    "python.testing.pytestArgs": [
+        "pages"
+    ],
+    "python.testing.unittestEnabled": true,
+    "python.testing.pytestEnabled": false,
+    "python.testing.unittestArgs": [
+        "-v",
+        "-s",
+        "./pages",
+        "-p",
+        "*test*.py"
+    ]
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..91b572b35
--- /dev/null
+++ b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Adah's Personal Portfolio</title>
+  <link href="styles/style.css" rel="stylesheet">
+</head>
+
+<body>
+
+  <div class="container">
+    <div>
+      <header class="site-header">
+
+        
+          
+          <nav class="nav"></nav>
+        
+
+        <div class="name">
+          <h1><em>Adah Hailemariam</em></h1>
+        </div>
+
+        <div>
+          <h2>
+              <nav class="nav">
+                  <a href="index.html" class="brand">Home</a>
+                  <a href="pages/about.html" class="brand">About</a>
+                  <a href="pages/portfolio.html" class="brand">Portfolio</a>
+              </nav>
+          </h2>
+        </div>
+          
+
+      </header>
+    </div>
+
+    <section>
+        <p class="intro">Hi, my name is Adah Hailemaraim. If you'd like to learn more about me, you can do so on the about me page. If you'd like to see some of my work, you can head over to my portfolio page! If you like what you see, feel free to contact me!</p>
+    </section>
+  </div>
+
+    
+
+    
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/pages/about.html b/pages/about.html
index b4ae215c4..b7dda9d19 100644
--- a/pages/about.html
+++ b/pages/about.html
@@ -6,7 +6,24 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
 </head>
+
+<header><em>Adah Hailemariam</em></header>
+
+<h1>A Little Bit About Me</h1>
+
+<p>
+  I love to code. hahah
+</p>
+
 <body>
-  
+  <header>
+    <nav>
+      <ul>
+        <li>About</li>
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="portfolio.html">Portfolio</a></li>
+      </ul>
+    </nav>
+  </header>
 </body>
 </html>
\ No newline at end of file
diff --git a/pages/index.html b/pages/index.html
deleted file mode 100644
index b4ae215c4..000000000
--- a/pages/index.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-</head>
-<body>
-  
-</body>
-</html>
\ No newline at end of file
diff --git a/pages/portfolio.html b/pages/portfolio.html
index b4ae215c4..7b362a0bf 100644
--- a/pages/portfolio.html
+++ b/pages/portfolio.html
@@ -7,6 +7,24 @@
   <title>Document</title>
 </head>
 <body>
-  
+
+  <header>Adah Hailemariam
+  <h1>
+    Some Projects I've Worked On
+  </h1>
+</header>
+
+<a href="https://github.com/Aghaile">My Github!</a>
+
+
+  <header>
+    <nav>
+      <ul>
+        <li>Portfolio</li>
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="about.html">About</a></li>
+      </ul>
+    </nav>
+  </header>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 000000000..573b42d2e
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,43 @@
+body {
+    font-family: sans-serif;
+    background-color: #009e9e;
+}
+
+h1 {
+    text-decoration: underline;
+    text-align: center;
+}
+
+p {
+    line-height: 150%;
+    color: darkslategrey;
+}
+
+
+
+.name{
+    font-family:Arial, Helvetica, sans-serif;
+}
+
+.container {
+    width: 60vw;
+    height: 100vh;
+
+    display: grid;
+    grid-template: 15% auto 20% / 1fr 3fr;
+}
+
+.intro{
+    font-size: 400%; 
+    grid-row: auto / span 2;
+    display: flex;
+}
+
+.site-header {
+    display: flex;
+    grid-column: auto / span 2;
+}
+
+.nav {
+    grid-row: auto / span 2;
+}
\ No newline at end of file
