diff --git a/index.html b/index.html
index d01f779ff..0e8f290f1 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,73 @@
     <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>John Andrade</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" alt="top page image">
+        <div class="description">
+            <h2>John Andrade</h2>
+            <button><a href="projects.html">My Projects</a></button>
+            <p>
+                This will be the part I will add aobut me and my journet into Full Stack. For now this is a work in progress.
+            </p>
+        </div>
+    </section>
+
+    <section>
+        <div class="row">
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="">
+                <p>Portfolio Piece</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="">
+                <p>Portfolio Piece</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="">
+                <p>Portfolio Piece</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="">
+                <p>Portfolio Piece</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="">
+                <p>Portfolio Piece</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="">
+                <p>Portfolio Piece</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="">
+                <p>Portfolio Piece</p>
+            </div>
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="">
+                <p>Portfolio Piece</p>
+            </div>
+        </div>
+    </section>
+
+
+    <footer>
+        <h2>Like my page?</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..cc15614fb 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1 +1,52 @@
-/* Add CSS styling here */
\ No newline at end of file
+/* Add CSS styling here */
+header {
+    background-color: lightgrey;
+    padding: 20px;
+    margin-bottom: 15px;
+}
+
+footer {
+    background-color: lightgrey;
+    text-align: center;
+    padding: 20px;
+}
+
+.topsection {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.description {
+    padding: 20px;
+    width: 50%;
+}
+
+.row {
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: row;
+    padding: 20px;
+}
+
+.portfolio-element {
+    text-align: center;
+}
+
+button {
+    background-color: white;
+    color: black;
+    border: black solid 1px;
+    padding: 5px 10px;
+}
+
+button:hover {
+    background-color: black;
+    color: white;
+    border: white solid 1px;
+}
+
+button a {
+    text-decoration: none;
+    color: inherit;
+}
\ No newline at end of file
