diff --git a/index.html b/index.html
index d01f779ff..add09a3ee 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,72 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
+    <link rel="stylesheet" href="style/index.css"/>
 </head>
 <body>
-    
+    <header>
+        <h1>Matt Wallace</h1>
+            <nav>
+                <button><a href="index.html">Home</a></button>
+                <button><a href="about.html">About</a></button>
+                <button><a href="contact.html">Contact</a></button>
+                <button><a href="projects.html">Projects</a></button>
+            </nav>
+    </header>
+
+    <section class ="topsection">
+        <img src="https://picsum.photos/600/400"/>
+        <div class ="about">
+            <h2>Matt Wallace</h2>
+            <button><a href="projects.html">My Projects</a></button>
+            <p>
+                This is sample text to be replaced later
+            </p>
+        </div>
+    </section>
+    <section>
+        <div class= "row">
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300"/>
+                <p>Portfolio Item</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300"/>
+                <p>Portfolio Item</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300"/>
+                <p>Portfolio Item</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300"/>
+                <p>Portfolio Item</p>
+            </div>
+        </div> 
+        <div class= "row">
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300"/>
+                <p>Portfolio Item</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300"/>
+                <p>Portfolio Item</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300"/>
+                <p>Portfolio Item</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300"/>
+                <p>Portfolio Item</p>
+            </div>
+        </div> 
+    </section>
+
+    <footer>
+        <h2>Like what you see?</h2>
+        <button><a href="contact.html">Contact Me</a></button>
+    </footer>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index 440e53514..6430c0336 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1 +1,93 @@
-/* Add CSS styling here */
\ No newline at end of file
+header{
+    background-color: lightgray;
+    padding: 20px;
+    margin-bottom: 50px;
+}
+
+footer{
+    background-color: lightgray;
+    text-align: center;
+    padding: 20px;
+}
+
+.topsection{
+    display: flex;
+    justify-content: center;
+}
+
+.about{
+    width: 50%;
+    text-align: center;
+    padding: 25px;
+}
+.row{
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: row;
+    padding: 25px;
+}
+.portfolio-element{
+    text-align: center;
+}
+button{
+    background-color: white;
+    color:black;
+    border:black solid 1px;
+    padding: 10px 15px;
+
+}
+
+button:hover{
+    background-color: black;
+    color:white;
+    border:white solid 1px;
+}
+
+button a{
+    text-decoration: none;
+    color: inherit;
+
+}
+
+@media(max-width: 800px){
+.row div{
+    width: 20%;
+
+}
+}
+@media(max-width: 500px){
+    header{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+    nav{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+    }
+    button{
+        width: 40%;
+        margin: 1% 0;
+    }
+    .topsection{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .topsection div{
+        width: 90%;
+    }
+    .row{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+        padding: 25px;
+    }   
+    .row div{
+        width: 40%;
+        margin: 4% 0; 
+    }
+}
