diff --git a/blog/blog.css b/blog/blog.css
index e69de29..faed472 100644
--- a/blog/blog.css
+++ b/blog/blog.css
@@ -0,0 +1,71 @@
+.blog_post {
+    background-color: rgba(0, 0, 0, 80%);
+    margin-left: 10em;
+    min-width: 25em;
+    padding-left: 1em;
+    padding-right: 1em;
+    border-radius: 2em;
+}
+
+.blog_image {
+    max-width: 10em;
+}
+
+.blog {
+    display: grid;
+    grid-template-columns: repeat(3, 2fr);
+    gap: 1em;
+}
+
+.blog_post#first:focus-within {
+    transform: scale(180%, 180%) translate(20em, 6em);
+    transition: transform 60ms;
+}
+
+.blog_post#second:focus-within {
+    transform: scale(180%, 180%) translate(0em, 6em);
+    transition: transform 60ms;
+
+}
+
+.blog_post#third:focus-within {
+    transform: scale(180%, 180%) translate(-20em, 6em);
+    transition: transform 60ms;
+
+}
+
+.blog_post#fourth:focus-within {
+    transform: scale(180%, 180%) translate(20em, -13em);
+    transition: transform 60ms;
+
+}
+
+.blog_post#fifth:focus-within {
+    transform: scale(180%, 180%) translate(0em, -13em);
+    transition: transform 60ms;
+
+}
+
+.blog_post#sixth:focus-within {
+    transform: scale(180%, 180%) translate(-20em, -13em);
+    transition: transform 60ms;
+
+}
+
+.blog_post:focus-within > button.arrow {
+    transform: rotate(45deg);
+    transition: transform 1s;
+}
+
+.blog_post:focus-within {
+    z-index: 100;
+}
+
+button.arrow {
+    background-color: transparent;
+    margin: 0;
+    transform: rotate(225deg);
+    transition: transform 1s;
+}
+
+
diff --git a/blog/blog.html b/blog/blog.html
index c2ba28e..2894ea9 100644
--- a/blog/blog.html
+++ b/blog/blog.html
@@ -28,8 +28,57 @@
         <a class="arrow right"></a>
     </nav>
 
-    <main>
+    <main id="open">
         <a class="shownav" href="blog/blog.html#clicked"></a>
+        <section class="blog">
+            <section class="blog_post" id="first">
+                <button class="arrow"></button>
+                <h1 class="blog_title">Blog Title</h1>
+                <img class="blog_image" src="assets/images/profileImage.png"/>
+                <p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
+                <p class="blog_details"></p>
+            </section>
+            <section class="blog_post" id="second">
+                <button class="arrow"></button>
+                <h1 class="blog_title"></h1>
+                <img class="blog_image"/>
+                <p class="blog_content"></p>
+                <p class="blog_details"></p>
+                
+            </section>
+            <section class="blog_post" id="third">
+                <button class="arrow"></button>
+                <h1 class="blog_title"></h1>
+                <img class="blog_image"/>
+                <p class="blog_content"></p>
+                <p class="blog_details"></p>
+                
+            </section>
+            <section class="blog_post" id="fourth">
+                <button class="arrow"></button>
+                <h1 class="blog_title">Blog Title</h1>
+                <img class="blog_image" src="assets/images/profileImage.png"/>
+                <p class="blog_content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste mollitia repellat, possimus nesciunt aspernatur quisquam doloremque! Illo, debitis distinctio, nostrum voluptatum possimus minus odio quaerat quia fugit maiores porro. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quas recusandae dolorum sunt porro vero, temporibus nesciunt cum, sint iure quis suscipit dignissimos maiores cumque debitis nihil, eveniet dolores nemo.</p>
+                <p class="blog_details"></p>
+                
+            </section>
+            <section class="blog_post" id="fifth">
+                <button class="arrow"></button>
+                <h1 class="blog_title"></h1>
+                <img class="blog_image"/>
+                <p class="blog_content"></p>
+                <p class="blog_details"></p>
+                
+            </section>
+            <section class="blog_post" id="sixth">
+                <button class="arrow"></button>
+                <h1 class="blog_title"></h1>
+                <img class="blog_image"/>
+                <p class="blog_content"></p>
+                <p class="blog_details"></p>
+                
+            </section>
+        </section>
     </main>
 
     <footer>
diff --git a/style/mobile.css b/style/mobile.css
index 537b7f5..ef44b28 100644
--- a/style/mobile.css
+++ b/style/mobile.css
@@ -50,8 +50,8 @@ main {
     width: 1.25em;
     display: block;
     position: fixed;
-    border-top: 0.2em solid white;
-    border-bottom: 0.2em solid white;
+    border-top: 0.2em solid #f29602;
+    border-bottom: 0.2em solid #f29602;
 }
 
 .hidenav {
@@ -74,7 +74,7 @@ main {
     position: absolute;
     width: 1.25em;
     margin-top: 0.3em;
-    border-top: 0.2em solid white;
+    border-top: 0.2em solid #f29602;
 }
 
 #clicked .shownav {