diff --git a/layout1/index.html b/layout1/index.html
index 68e3d66..7e7e3eb 100644
--- a/layout1/index.html
+++ b/layout1/index.html
@@ -1,12 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Layout 1 - Tableau II</title>
-  <link rel="stylesheet" href="style.css" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Layout 1 - Tableau II</title>
+    <link rel="stylesheet" href="style.css" />
 </head>
+
 <body>
-  <h1>I love art!</h1>
+    <h1>I love art!</h1>
+    <div class="top">
+        <div id="one">one</div>
+        <div id="two">two</div>
+        <div id="three" class="rightside">three</div>
+        <div id="four">four</div>
+        <div id="five">five</div>
+        <div id="six" class="rightside">six</div>
+        <div id="seven">seven</div>
+        <div id="eight">eight</div>
+        <div id="nine" class="rightside">nine</div>
+    </div>
+
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/layout1/style.css b/layout1/style.css
index 7b34845..65b2228 100644
--- a/layout1/style.css
+++ b/layout1/style.css
@@ -1,3 +1,70 @@
 h1 {
-  color: rebeccapurple;
+    color: rebeccapurple;
 }
+
+div {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#one {
+    border: 1px solid salmon;
+    height: 100px;
+    width: 37%;
+    flex-direction: row;
+}
+
+#two {
+    border: 1px solid gray;
+    height: 100px;
+    width: 37%;
+    flex-direction: row;
+}
+
+#three {
+    border: 1px solid steelblue;
+    height: 200px;
+    width: 25%;
+}
+
+.top {
+    border: 1px solid black;
+}
+
+#four {
+    height: 200px;
+    width: 10%;
+    border: 1px solid orange;
+    align-content: flex-start;
+    margin-top: -100px;
+}
+
+#five {
+    border: 1px solid maroon;
+    width: 64%;
+    height: 300px;
+    display: flex;
+    align-items: center;
+    margin-top: -100px;
+}
+
+#six {
+    border: 1px solid greenyellow;
+    width: 25%;
+    display: flex;
+    flex-direction: row-reverse;
+    height: 200px;
+}
+
+.rightside {
+    flex-direction: column;
+}
+
+#seven {
+    border: 1px solid rgb(243, 12, 12);
+    flex-direction: column;
+    height: 200px;
+    width: 9.5%;
+    margin-top: -100 !important;
+    align-self: flex-start;
+}
\ No newline at end of file
