diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..f4ba621a3 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -9,24 +9,49 @@
   <body>
     <header>
       <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
+      <p class="header_paragraph">
+        A wireframe is a basic sketch of a webpage that helps plan the layout and organization of content before building the final design.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://docs.github.com/assets/cb-69181/images/help/repository/headings-toc.png" alt="Read me file GitHub Doc image"/>
+        <h2>Read Me File</h2>
+        <p>
+        A README file explains what a project is and how to use it. It’s usually the first file people read when they open a
+        project, especially in software development.
+        </p>
+        <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://cdn-images.visual-paradigm.com/handbooks/agile-handbook/wireframe/02-newspaper-site-wireframe-example.png" alt="Wireframe showing head line,top story,other top stories,news and buzz,featured,add "/>
+        <h2>Purpose of a wireframe?</h2>
+        <p>
+          A wireframe is a simple visual layout of a website, app, or software interface. Its purpose is to show the structure and
+          arrangement of content before detailed design and development begin.
+        </p>
+        <a href="https://balsamiq.com/blog/what-are-wireframes/">Read More</a>
+      </article>
+      <article>
+        <img src="https://nulab.com/static/2b1b3450c0069d0cbd97d70e48c7a81c/5a190/02.png" alt="Git branch diagram"/>
+        <h2 class="git_header">What is a branch in Git?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+        A branch in Git is a separate line of development that lets you work on changes without affecting the main project.
+        
+        Think of it like creating a copy of your project where you can safely:
+        <ul>
+          <li> Add new features</li>
+          <li>Fix bugs</li>
+          <li>Test ideas</li>
+        </ul>
+        
         </p>
-        <a href="">Read more</a>
+        <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read More</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        © 2026 CYF. All rights reserved.
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..9ae72f722 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,17 +30,36 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  padding-bottom: 60px;
 }
+
+h1 {
+  text-align: center;
+}
+
+.header_paragraph{
+    text-align: center;
+    padding: 30px;
+}
+.git_header{
+      margin-top: 90px;
+      margin-bottom: 90px;
+}
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
-img,
-svg {
+img {
   width: 100%;
+  height: 450px;
   object-fit: cover;
+  display: block;
+  
 }
+
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -48,11 +67,16 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+ 
 }
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  width:100%;
   text-align: center;
+  height: 60px;
+  background-color: rgb(255, 255, 255);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -64,7 +88,7 @@ https://gridbyexample.com/learn/
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space);
+  gap: 0;
   > *:first-child {
     grid-column: span 2;
   }
@@ -85,5 +109,6 @@ article {
   }
   > img {
     grid-column: span 3;
+    
   }
 }
