diff --git a/Wireframe/image-git.webp b/Wireframe/image-git.webp
new file mode 100644
index 000000000..9f81f5768
Binary files /dev/null and b/Wireframe/image-git.webp differ
diff --git a/Wireframe/image-readme.png b/Wireframe/image-readme.png
new file mode 100644
index 000000000..536c2a09c
Binary files /dev/null and b/Wireframe/image-readme.png differ
diff --git a/Wireframe/wireframe.png b/Wireframe/image-wireframe.png
similarity index 100%
rename from Wireframe/wireframe.png
rename to Wireframe/image-wireframe.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..a9163b845 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,40 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Onboarding Concepts</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A brief overview of essential tools and practices for starting with web development and version control.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="image-readme.png" alt="An image of a README icon." />
+        <h2>The Purpose of a README File</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is an important document in any project. It is the first point of contact for users and contributors, providing an overview of the project's purpose, installation instructions, usage guidelines, and contribution details. It helps ensure the project is accessible and maintainable.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com/">Read more</a>
+      </article>
+      <article>
+        <img src="image-wireframe.png" alt="An image of a website wireframe." />
+        <h2>The Purpose of a Wireframe</h2>
+        <p>
+          A wireframe is a basic blueprint for a website. It outlines the basic structure, layout, and functionality without focusing on colors, fonts, or detailed design. Wireframes help in planning user experience & identifying issues early.
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
+      </article>
+      <article>
+        <img src="image-git.webp" alt="An image of an example of a branch in git." />
+        <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://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        2026 - Johnny Vargas - Code Your Future
       </p>
     </footer>
   </body>
diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg
deleted file mode 100644
index ac36a0abc..000000000
--- a/Wireframe/placeholder.svg
+++ /dev/null
@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" role="presentation">
-  <rect width="160" height="90" fill="#eee"/>
-  <circle cx="120" cy="25" r="15" fill="hsl(0deg 83% 60% / 95%)"/>
-  <path d="M25 90 L80 30 L160 90 Z" fill="darkslategrey"/>
-  <path d="M0 90 L50 45 L100 90 Z" fill="slategrey"/>
-</svg>
\ No newline at end of file
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..2be043831 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,6 +30,7 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  text-align: center;
 }
 a {
   padding: var(--space);
@@ -53,6 +54,10 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  width: 100%;
+  border-style: solid;
+  border-color: black;
+  background-color: white;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -85,5 +90,8 @@ article {
   }
   > img {
     grid-column: span 3;
+    max-width: fit-content;
+    height: 200px;
+    margin: auto;
   }
 }
