diff --git a/Wireframe/images/image1.jpg b/Wireframe/images/image1.jpg
new file mode 100644
index 000000000..8bf7864b6
Binary files /dev/null and b/Wireframe/images/image1.jpg differ
diff --git a/Wireframe/images/image2.jpg b/Wireframe/images/image2.jpg
new file mode 100644
index 000000000..8bf7864b6
Binary files /dev/null and b/Wireframe/images/image2.jpg differ
diff --git a/Wireframe/images/image3.jpg b/Wireframe/images/image3.jpg
new file mode 100644
index 000000000..8bf7864b6
Binary files /dev/null and b/Wireframe/images/image3.jpg differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..3ac56c710 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,55 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <center>
+        <h1>Wireframe</h1>
+      </center>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A wireframe is a basic, two-dimensional blueprint or outline of
+         a website or app interface
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+       
+        <img src="images/image1.jpg" alt="" />
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is a document that provides information about a project,
+          including its purpose, how to use it, and any other relevant details.
+         It serves as a guide for users and developers who want to understand
+          the project and contribute to it.
+          
         </p>
         <a href="">Read more</a>
+ </article> 
+  
+    <article>
+      <img src="images/image2.jpg" alt="" />
+      <h2>What is the purpose of a wireframe?</h2>
+      <p>
+        A wireframe is a visual representation of a website or app's layout and
+        structure. It serves as a blueprint for the design and development
+        process, allowing designers and developers to plan the user interface
+        and user experience before creating the final product.</p>
+        <a href="">Read more</a>
+    </article>
+
+      <article>
+<img src="images/image3.jpg" alt="" />
+<h2>What is a branch?</h2>
+<p>
+  A branch in version control is a separate line of development. 
+  It allows you to work on different features or experiments without affecting the main codebase.
+</p>
+<a href="">Read more</a>  
+      
       </article>
+    
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        CYF Module Onboarding - Wireframe Exercise  2026
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..2438f1117 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,17 +30,26 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+    
 }
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
+h1{
+postion: center;
+}
+ 
+
 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/
@@ -48,11 +57,13 @@ 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;
-  text-align: center;
+  display: flex;
+  justify-content: center;  
+  align-items: center;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -86,4 +97,4 @@ article {
   > img {
     grid-column: span 3;
   }
-}
+}
\ No newline at end of file
