diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..458e2284e 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,32 +1,66 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <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>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <h1>Understanding README Files, Wireframes and Git Branches</h1>
+      <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>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          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="">Read more</a>
+        <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-guide/"
+            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>
+            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="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>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..150607d46 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -87,3 +87,22 @@ 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;
+}
\ No newline at end of file
