diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..24c577933 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,23 +10,42 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A wireframe is a basic, two-dimensional visual representation of a webpage, app interface or product layout.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      
+         <img src="https://www.makeareadme.com/images/open-graph-logo.png?v=20181203" alt="a README file example because no one can read your mind" />
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+         Its purpose is to provide essential information about the project's purpose, functionality, installation instructions,
+          and usage guidelines, making it easier for users and developers to understand and work with the project.
         </p>
-        <a href="">Read more</a>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
+      </article>
+      <article>
+        <img src="https://view.subpage.app/app/company/C532b8873cc5442e2b1f2265b77a7d7dc/domain/MTiT0jFlGh/page/Ma9aQb2DGh/article/Maffd7e05c5e94448c5048e0d714b87ff1692177804516/file/Me2a48f994fcf54fe72b4d16884e2d7a51692180126734.webp" alt="a mock up webpage in a wireframe view" />
+        <h2>What is the purpose of a Wireframe?</h2>
+        <p>
+          The primary purpose of a wireframe is to establish the basic structure and functionality of a website, app, or other
+          digital product before diving into visual design and content. It serves as a blueprint or skeletal framework,
+          visualizing how elements will be arranged and how users will navigate the interface.
+        </p>
+        <a href="https://www.geeksforgeeks.org/purpose-of-wireframing-in-web-design-process/">Read more</a>
+      </article>
+      <article>
+        <img src="https://miro.medium.com/v2/resize:fit:650/1*K9scAx1Ezd-KJFabaYseCw.jpeg" alt="a branch in GIT connecting the dots showing main branch and feature updates " />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main
+          project. Think of it as a "parallel universe" for your code.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <p>Wireframe layout Design by Shannon Davids
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..b691ed0f9 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -39,7 +39,7 @@ a {
 img,
 svg {
   width: 100%;
-  object-fit: cover;
+  height:400px;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
@@ -53,6 +53,9 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  background-color: bisque;
+  width:100%;
+  font-weight: bold;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -87,3 +90,6 @@ article {
     grid-column: span 3;
   }
 }
+header {
+  text-align: center;
+}
\ No newline at end of file