diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..0e0442b9c 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,26 +8,52 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Understanding Project Foundations</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Explore the roles of README files, wireframes, and Git branches in software development.
       </p>
     </header>
+   
     <main>
+       <!--Article 1 Readme (top)-->
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://pic.onlinewebfonts.com/thumbnails/icons_688402.svg" alt="Readme" />
+        <h2>What is a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A <strong>README file</strong> introduces a project by explaining what it does, how to install and use it,
+          and any setup instructions. It’s the first place users and collaborators look to understand your work.
+          A well-written README improves communication, saves time, and keeps your project professional.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">Learn more</a>
+
       </article>
-    </main>
+        <!-- Article 2 wireframe(left) -->
+      <article>
+          <img src="https://static.thenounproject.com/png/3085901-512.png" alt="Wireframe icon" />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          A <strong>wireframe</strong> is a simple blueprint that shows the structure of a webpage or app before
+          the design phase. It outlines where content, navigation, and images will go, helping teams plan layout,
+          usability, and functionality before any code is written.
+        </p>
+       <a href="https://www.interaction-design.org/literature/topics/wireframing" target="_blank" rel="noopener noreferrer">Learn more</a>
+      </article>
+       <!-- Article 3 git branch(right) -->
+      <article>
+ <img src="https://static.thenounproject.com/png/4411741-512.png" alt="Git Branch icon" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A <strong>branch</strong> in Git is a separate version of your project that allows you to develop new
+          features or fix bugs independently. You can work safely without affecting the main codebase, then merge
+          your changes when ready. This makes collaboration and experimentation easier.
+        </p>
+        <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell" target="_blank" rel="noopener noreferrer">Learn more</a>
+      </article>
+      </main>
+     
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+        &copy;2025 Web Development Basics | Created for learning and exploration</p>
     </footer>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..d80e15e19 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,17 +30,36 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  text-align: center;
 }
+
 a {
-  padding: var(--space);
+  padding: calc(var(--space) * 1.5);
   border: var(--line);
+  border-radius: 8px;
   max-width: fit-content;
+  background-color: grey;
+  color: whitesmoke;
+  text-decoration: none;
+}
+a:hover {
+  background-color:var(--ink);
+  color: color: var(--paper);         
+  transform: scale(1.05);        
+  border-color: var(--ink);   
 }
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+article img {
+  width: auto;            /* allows it to shrink */
+  max-width: 150px;       /* limits the size */
+  height: auto;           /* keeps aspect ratio */
+  margin: 0 auto var(--space); /* centers image with spacing below */
+  display: block; 
+}
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -49,8 +68,9 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
 footer {
-  position: fixed;
+  position: relative;
   bottom: 0;
   text-align: center;
 }
@@ -87,3 +107,4 @@ article {
     grid-column: span 3;
   }
 }
+ 
\ No newline at end of file
