diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..23ebdabc6 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -3,31 +3,41 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Readme, branch and wireframe</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>Readme, branch and wireframe</h1>
+      <p>Brief definitions</p>
     </header>
     <main>
+      <!-- Featured Article -->
       <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>
+        <img src="https://docs.github.com/assets/cb-2058/mw-1440/images/help/branches/pr-retargeting-diagram1.webp" alt="Branch image" />
+        <h2>Branch</h2>
+        <p>A branch is basically a pointer to a snapshot of your code so you can experiment with it without affecting the main codebase. It isn't a full copy because repos with multiple branches could get huge. Then you can merge your changes to the main codebase. It's like a sandbox.</p>
+        <a href="https://en.wikipedia.org/wiki/Branching_(version_control)">Read More</a>
+      </article>
+
+      <!-- Secondary Articles -->
+      <article>
+        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="Readme image" />
+        <h2>Readme</h2>
+        <p>A readme is particularly important on GitHub since the code is in textual form and the user may need to compile it. The readme tells you what the project is for and how to use it, amongst other things.</p>
+        <a href="https://en.wikipedia.org/wiki/README">Read More</a>
+      </article>
+
+      <article>
+        <img src="https://support.microsoft.com/images/en-us/ae7333a6-5681-45ea-b482-e0de7c81cabd" alt="Wireframe image" />
+        <h2>Wireframe</h2>
+        <p>A wireframe is a sketch of a website that shows where the title, subtitles, text, pictures and buttons are going to go but without real pictures and it has dummy text.</p>
+        <a href="https://en.wikipedia.org/wiki/Website_wireframe">Read More</a>
       </article>
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>Code Your Future</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..0ee1fd11e 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -31,10 +31,26 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+header {
+  text-align: center;
+}
 a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+  display: inline-block;
+  width: fit-content;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 1.2em;
+  background: rgb(154, 206, 227);
+  color: black;
+  text-decoration: none;
+  border-radius: 6px;
+  font-weight: 600;
+  text-align: center;
+  vertical-align: bottom;
+}
+
+a:hover {
+  background: rgb(193, 214, 230);
 }
 img,
 svg {
@@ -48,11 +64,16 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: calc(var(--space) * 6);
 }
 footer {
   position: fixed;
   bottom: 0;
+  width: 100%;
   text-align: center;
+  background: white;
+  border-top: var(--line);
+  padding: var(--space);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -80,10 +101,28 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
+  grid-template-rows: auto 1fr auto; /* Add this */
   > * {
     grid-column: 2/3;
   }
   > img {
     grid-column: span 3;
   }
+  > a {
+    align-self: end; /* Add this */
+  }
+}
+
+article > h2 {
+  padding-top: var(--space);
 }
+
+article:first-child > img {
+  grid-column: span 3;
+  /* no aspect-ratio here, so it keeps its natural height */
+}
+
+article:not(:first-child) > img {
+  grid-column: span 3;
+  aspect-ratio: 16 / 9; /* force same height for bottom two */
+  object-fit: cover;
