diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..31d8178da 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -3,31 +3,43 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Wireframe Answers</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>Wireframe Answers</h1>
+      <p>This code includes the answers to the wireframe exercise.</p>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
+      
+      <!-- Article 1: Questions 1 -->
+       <article>
+          <img src="https://camo.githubusercontent.com/d2e76d3593f8377240fa8993c20467ca2716126641cc9c0839fb8a2c22398768/68747470733a2f2f62756c6c646f676a6f622e636f6d2f73797374656d2f7265616461626c65732f636f766572732f3030302f3030312f3435352f6d61785f7265732f382d31302d323031382e706e67" alt="GitHub README image" />
+          <h2>1. What is the purpose of a README file?</h2>
+          <p>A README file provides essential information about a project, including its purpose, usage instructions, and setup requirements.</p>
+          <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank">Read more</a>
+        </article>
+
+       <!-- Article 2: Question 2 -->
+        <article>
+          <img src="https://public-images.interaction-design.org/literature/articles/materials/6-ixdf-steps-to-create-wireframes.jpg" alt="Wireframe example image" />
+          <h2>2. What is the purpose of a wireframe?</h2>
+          <p>A wireframe is a visual guide that represents the skeletal framework of a website or application, used to plan layout and functionality.</p>
+          <a href="https://balsamiq.com/blog/what-are-wireframes/" target="_blank">Read more</a>
+        </article>
+
+        <!-- Article 3: Question 3 -->
+        <article>
+          <img src="https://cpske.github.io/ISP/git/git-branches.png" alt="GitHub Branch explanation image" />
+          <h2>3. 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="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" target="_blank">Read more</a>
+        </article>
+
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>This code includes the answers to the wireframe exercise.</p>
     </footer>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..035047a2f 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -53,6 +53,11 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  font-weight: 500;
+  border: solid black 2px;
+  width: 100%;
+  background-color: white;
+  color: black;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -87,3 +92,19 @@ article {
     grid-column: span 3;
   }
 }
+
+article:nth-of-type(2) img,
+article:nth-of-type(3) img {
+  height: 250px;
+  width: 100%;
+  object-fit: cover;
+}
+
+article:nth-of-type(2),
+article:nth-of-type(3) {
+  margin-bottom: 20px;
+}
+
+header {
+  text-align: center;
+}
