diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..aabc4f6ac 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -3,31 +3,57 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Understanding README, Wireframe and Git Branch</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Understanding README Files, Wireframes and Git Branches</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+        A simple guide explaining three important web development concepts.</p>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      <!--Top article (full-width)-->
+      <article class="top-article" id="readme-article">
+        <img src="placeholder.svg" alt="Illustration of a README file" />
+        <h2>What is the purpose of a README file?</h2>
+        <p>
+          A README file explains what a project is about, how to use it, and any important information someone needs before working with the project code.
+        </p>
+        <a href="https://www.makeareadme.com/" target="_blank">Read more</a>
+      </article>
+
+      <!--Bottom two articles side -by-side-->
+
+    <section class="bottom-articles">
+
+      <article id="wireframe-article">
+        <img src="placeholder.svg" alt="Example of a webpage wireframe"/>
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe is a simple layout plan that shows where content will go on a webpage before you start designing or coding.
+        </p>
+
+        <a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe/" target="_blank">Read more</a>
+      </article>
+
+      <article id="branch-article">
+        <img src="placeholder.svg" alt="Diagram showing Git branches"/>
+        <h2>What is a branch in Git?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A Git baranch lets developers work on new features without affecting the main project. When finished, the branch can be merged back in.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.atlassian.com/git/tutorials/using-branches" target="_blank">Read more</a>
       </article>
+
+    </section>
+
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Footers usually contain contact links and other information about the site overall
       </p>
+        
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..79a484ce7 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -87,3 +87,26 @@ article {
     grid-column: span 3;
   }
 }
+
+.bottom-articles {
+  grid-column: span 2;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space);
+}
+
+header{
+  text-align: center;
+}
+
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+
+
+
+
