diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..8dd47cc22
Binary files /dev/null and b/.DS_Store differ
diff --git a/index.html b/index.html
index d01f779ff..f794208ac 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,96 @@
     <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>Hy G Pham</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="leftbigpic">
+        <div class="description">
+            <h2>Hy Pham</h2>
+            <button><a href="projects.html">My Projects</a></button>
+            <p>Here are my projects that I have done over the course of my coding journey.</p>
+        </div>
+    </section>
+
+    <section>
+        <div class="row">
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="leftbigpic">
+                <p>Portfolio Piece</p>
+            </div>
+            <div class="row">
+                <div class="portfolio-element">
+                    <img src="https://picsum.photos/300" alt="leftbigpic">
+                    <p>Portfolio Piece</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="portfolio-element">
+                    <img src="https://picsum.photos/300" alt="leftbigpic">
+                    <p>Portfolio Piece</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="portfolio-element">
+                    <img src="https://picsum.photos/300" alt="leftbigpic">
+                    <p>Portfolio Piece</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="portfolio-element">
+                    <img src="https://picsum.photos/300" alt="leftbigpic">
+                    <p>Portfolio Piece</p>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="portfolio-element">
+                <img src="https://picsum.photos/300" alt="leftbigpic">
+                <p>Portfolio Piece</p>
+            </div>
+            <div class="row">
+                <div class="portfolio-element">
+                    <img src="https://picsum.photos/300" alt="leftbigpic">
+                    <p>Portfolio Piece</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="portfolio-element">
+                    <img src="https://picsum.photos/300" alt="leftbigpic">
+                    <p>Portfolio Piece</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="portfolio-element">
+                    <img src="https://picsum.photos/300" alt="leftbigpic">
+                    <p>Portfolio Piece</p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="portfolio-element">
+                    <img src="https://picsum.photos/300" alt="leftbigpic">
+                    <p>Portfolio Piece</p>
+                </div>
+            </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..566fb3cf7 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1 +1,98 @@
-/* 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;
+}
+
+.description{
+    padding: 20px;
+    width: 50%;
+}
+
+.row{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    padding: 20px;
+}
+
+.porfolio-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;
+}
+
+@media(max-width: 800px){
+
+}
+
+@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;
+        justify-content: center;
+        align-items: center;
+        
+    }
+    .description{
+        align-items: center;
+        justify-content: center;
+        display: flex;
+        flex-direction: column;
+        width: 60%;
+        text-align: center;
+    }
+    .row{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+    .row div{
+        width: 40%;
+        margin: 2% 0;
+    }
+}
\ No newline at end of file
