diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..1a382cb82 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,41 @@
   </head>
   <body>
     <header>
+      <div>
       <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <p id="top-comment">
+        Here are 3 useful links explaining useful aspects for Readme files, Purpose of Wireframes and what is a Branch of Git.
       </p>
+      </div>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+      <article id="readme-article">
+        <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/README-cURL_black_trimmed.png" alt="A black screen showing text from a readme file that has been opened">        
+        <h2>Purpose of a Readme file</h2>
+        <p>A Readme file is a file containing text that is often used to relay information to the user.
+        </p>
+        <a href="https://en.wikipedia.org/wiki/README">Read more</a>
+      </article>
+
+      <article id="wireframe-article">
+        <img src="https://cdn.prod.website-files.com/64fa82cbdeed167ebaefef84/64fa868c41d7a2600b45a4d5_606de8872932076fce79ad0f_TL5vrIkw1V7VYfqA3lvvi313PuvWyzIJtAQ4HthZnsXuYXQTC4rQhEcyq40qZaYDYpBHtnnPJ0PhnmBuJ9XRLnWMrlzZE9IXIfyvYan4Xj3woYXuTrAC7kTgydlqIADE8A26ITwb.png" alt="shetched images showing a plan for desnining a website, showing areas for an image, video player and other boxes for feature text and information." >  
+        <h2>Purpose of a Wireframe</h2>
+        <p>A wireframe is normally an image that is used to show instructions on how a website is meant to be displayed.
+        </p>
+        <a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
+      </article> 
+          
+      <article id="branch-article">
+        <img src="https://docs.wavemaker.com/learn/assets/images/branching-model-121bd320dd2f5972a5f6ce2fb19a3f4e.png" alt="Connection blue balls in a straight line starting from one called Master then connection to others with lined arrow, from First is extra arrow goign up to red balls labed Bugfix then back down to third blue ball, from 2nd blue ball extra arrow goes down to two green balls labed Feature then back to last blue ball." >
+        <h2>A branch of Git</h2>
+        <p>A Branch in git is a copy of the main folder where there has been edits or fixes done to in a controlled manner that can then be implemented to the main folder in due time.
         </p>
-        <a href="">Read more</a>
+        <a href="https://en.wikipedia.org/wiki/Branching_(version_control)">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        By Hugh Mills - Intro to Programing - May 2026
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..05f1d69c5 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -24,6 +24,7 @@ As well as useful links to learn more */
   --line: 1px solid;
   --container: 1280px;
 }
+
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
@@ -31,16 +32,19 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -49,11 +53,37 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
+header {
+  text-align:center;
+  max-width: fit-content;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+h1 {
+  text-align:center;
+  font-size: 4em;
+  max-width: fit-content;
+  font-weight: bold;
+  font-family: 'Times New Roman', Times, serif;
+}
+
+#top-comment {
+  text-align:center;
+  margin-bottom: 20px;
+}
+
 footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  color: white;
+  padding-top: 10px;
+  background-color: rgb(28, 77, 127);
+  width:100%
 }
+
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
 Inspect this in Devtools and click the "grid" button in the Elements view
