diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..8bac0f2bf 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,42 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Understanding Web Development Basics</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A simple webpage built from a wireframe layout.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="placeholder.svg" alt="Illustration for README article" />
+        <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 introduces a project, explains how to use it, and helps others understand the code.
+        </p>
+        <a href="">Read more</a>
+      </article>
+
+      <article>
+        <img src="placeholder.svg" alt="Illustration for wireframe article" />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A wireframe shows the layout and structure of a webpage before design and content are added.
+        </p>
+        <a href="">Read more</a>
+      </article>
+      
+      <article>
+        <img src="placeholder.svg" alt="Illustration for Git branch article" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch in Git is a separate line of development that allows you to work on different versions of a project simultaneously, without affecting the main codebase.
         </p>
         <a href="">Read more</a>
       </article>
     </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..a3038e83b 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,12 +30,22 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  padding-bottom: 80px; /* space for fixed footer */
 }
+
 a {
   padding: var(--space);
   border: var(--line);
-  max-width: fit-content;
+  text-decoration: none;
+  font-weight: bold;
+  display: inline-block;
+  margin-top: var(--space);
+}
+
+a:hover {
+  background: #eee;
 }
+
 img,
 svg {
   width: 100%;
@@ -49,9 +59,21 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
+header {
+  text-align: center;
+  padding: calc(var(--space) *2);
+  border-bottom: var(--line);
+}
+
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  width: 100%;
+  background: #222;
+  color: white;
+  padding: var(--space);
   text-align: center;
 }
 /* ====== Articles Grid Layout ====
@@ -75,7 +97,9 @@ Now laying out just the INSIDE of the repeated card/article design.
 Keeping things orderly and separate is the key to good, simple CSS.
 */
 article {
+  background: white;
   border: var(--line);
+  border-radius: 4px;
   padding-bottom: var(--space);
   text-align: left;
   display: grid;
