diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 31ea20890..0b14a9689 100644
--- a/index.html
+++ b/index.html
@@ -9,13 +9,13 @@
 </head>
 
 <body>
-    <header>
+    <header class="top-header">
         <h1>Brittney Dalby</h1>
         <nav>
-            <button><a href="index.html">Home</a></button>
-            <button><a href="about.html">About</a></button>
-            <button><a href="projects.html">Projects</a></button>
-            <button><a href="contact.html">Contact</a></button>
+            <a href="index.html">Home</a>
+            <a href="about.html">About</a>
+            <a href="projects.html">Projects</a>
+            <a href="contact.html">Contact</a>
         </nav>
     </header>
     <section class="top-section">
@@ -24,8 +24,7 @@ <h1>Brittney Dalby</h1>
             <a href="projects.html">My Projects</a>
         </button>
     </section>
-    <section>
-        <div class="row">
+    <section class="project-section">
             <div class="port-element">
                 <img src="https://picsum.photos/300" alt="random generated image">
                 <p>My Project</p>
@@ -38,8 +37,8 @@ <h1>Brittney Dalby</h1>
                 <img src="https://picsum.photos/300" alt="random generated image">
                 <p>My Project</p>
             </div>
-        </div>
-        <div class="row">
+    
+        
             <div class="port-element">
                 <img src="https://picsum.photos/300" alt="random generated image">
                 <p>My Project</p>
@@ -52,7 +51,7 @@ <h1>Brittney Dalby</h1>
                 <img src="https://picsum.photos/300" alt="random generated image">
                 <p>My Project</p>
             </div>
-        </div>
+        
     </section>
     <footer>
         <button><a href="contact.html">Contact Me</a></button>
diff --git a/style/index.css b/style/index.css
index ac44f2fb3..181a687ca 100644
--- a/style/index.css
+++ b/style/index.css
@@ -42,18 +42,28 @@ header{
 }
 h1{
     display:flex;
-    justify-content:flex-start;
+    justify-content:center;
     font-size:5rem;
     text-transform: uppercase;
 }
-nav a{
+nav{
+    width: 50%;
     display:flex;
-    justify-content:flex-end;
+    justify-content:space-between;
+}
+nav a{
+    display:inline-block;
     text-decoration: none;
-    align-items:flex-start;
     color:#4f4f4f;
-    padding:5%; 
+    padding:2%; 
+    width:25%;
+    border:2px solid #4f4f4f;
+    border-radius:10px;
+    text-align:center;
+    letter-spacing:1.5px;
+    font-size:2rem;
 }
+
 .top-section{
     display:flex;
     justify-content:center;
@@ -73,9 +83,10 @@ nav a{
     height:40rem;
     text-decoration: none;
 }
-.row{
+.project-section{
     display:flex;
     flex-direction:row;
+    flex-wrap:wrap;
     justify-content: space-evenly;
     padding:2rem;
 }
@@ -98,3 +109,45 @@ footer a{
     text-decoration:none;
 }
 
+@media (max-width: 800px){
+    *{
+        max-width:100%;
+    }
+    h1{
+        font-size:3rem;
+    }
+    nav a{
+        display: flex;
+        justify-content:space-around;
+        width:100%;
+    }
+
+
+}
+
+@media (max-width: 500px){
+    *{
+        max-width:100%;
+    }
+    .top-header{
+        display:flex;
+        flex-direction: column;
+        align-items:center;
+    }
+    h1{
+        font-size:4rem;
+    }
+    nav{
+        display:flex;
+        flex-direction:column;
+        align-content:center;
+    }
+    nav a{
+        margin:2% auto;
+    }
+    .image-button{
+        width:40rem;
+        height:30rem;
+    }
+   
+}
\ No newline at end of file
