diff --git a/index.html b/index.html
index d01f779ff..0ca60694a 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-</head>
-<body>
-    
-</body>
-</html>
\ No newline at end of file
+    <link rel="stylesheet" href="style/index.css" />
+  </head>
+  <body>
+    <section class="topsection">
+      <h1>JOSEPH DAVIS</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>
+      <h2>Introduction to my projects</h2>
+      <p>
+        adsycgasdiufghhweqafkujaweghsdfkujsdgfkjsdagfkuas dafkjsdghf ksuidfghads
+        fkajsdghf ksjdfhsdkfjgasdf kjasdghf akshjdfg asdkjfghasdkjfghaskdjfvhg
+      </p>
+      <img src="https://picsum.photos/800/500 " />
+    </section>
+
+    <section class="row">
+      <img src="https://picsum.photos/200/400 " />
+      <img src="https://picsum.photos/200/400 " />
+      <img src="https://picsum.photos/200/400 " />
+      <img src="https://picsum.photos/200/400 " />
+      <div class="description"></div>
+    </section>
+    <footer>
+      <button><a href="contact.html">Contact Me</a></button>
+    </footer>
+  </body>
+</html>
diff --git a/style/index.css b/style/index.css
index 440e53514..0224b6722 100644
--- a/style/index.css
+++ b/style/index.css
@@ -1 +1,109 @@
-/* Add CSS styling here */
\ No newline at end of file
+ {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  max-width: 100%;
+  border: 1px solid grey;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: 1.6rem;
+  line-height: 1.5;
+}
+
+section {
+  padding: 4% 0;
+}
+
+h1,
+h2 {
+  margin: 2% 0;
+}
+
+h1 {
+  font-size: 4rem;
+}
+
+h2 {
+  font-size: 3.5rem;
+}
+.topsection {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  width: 80%;
+  margin: 0 auto;
+}
+
+footer {
+  background-color: lightgrey;
+  text-align: center;
+  padding: 25px;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+  padding: 20px;
+}
+
+.description {
+  width: 200px;
+  text-align: center;
+  padding: 20px;
+}
+
+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-wdith: 800px) {
+  .row {
+    flex-wrap: wrap;
+  }
+
+  .row img {
+    width: 20%;
+  }
+  .row div {
+    width: 100%;
+  }
+}
+
+@media (max-width: 500px) {
+  .links {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .links button {
+    width: 40%;
+    margin: 1% 0;
+  }
+  .row {
+    flex-wrap: wrap;
+  }
+  .row img {
+    width: 40%;
+    margin: 4% 0;
+  }
+}
