diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e53..59f1f841 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,83 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>README, Wireframe & Git Branches</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A quick guide to three essential web development tools: README files,
+        wireframes, and Git branches—what they are and why they matter.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          id="resize-image1"
+          src="https://www.mygreatlearning.com/blog/wp-content/uploads/2021/06/shutterstock_1872947134-1.jpg.webp"
+          alt="Sample README file highlighting key sections like project description, installation instructions, and usage guidelines."
+        />
+        <h2>README File – Everything you Need to Know</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          The article explains the importance of a README file, a critical
+          component in any software project, especially open-source ones. It
+          introduces the README as a documentation file—typically written in
+          Markdown—that provides users and developers with essential information
+          about the project. Key contents usually include the project’s purpose,
+          installation steps, usage instructions, contribution guidelines, and
+          license details. The guide outlines best practices for writing a
+          clear, concise, and well-organized README file to improve project
+          visibility, usability, and collaboration. It also offers a structured
+          example to help readers build their own README efficiently.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.mygreatlearning.com/blog/readme-file/"
+          >Read more</a
+        >
+      </article>
+
+      <article>
+        <img
+          src="https://cdn.careerfoundry.com/en/wp-content/uploads/old-blog-uploads/low-fid-wireframe.png"
+          alt="Low-fidelity wireframe of a mobile app layout with placeholders."
+        />
+        <h2>All You Need to Know About Wireframe</h2>
+        <p>
+          The article defines a wireframe as a basic two-dimensional layout of a
+          web page or app interface. It's used early in the design process to
+          visualize the structure, layout, and functionality of a product
+          without focusing on colors, graphics, or final design elements.
+          Wireframes help teams align on user flow, content placement, and
+          feature priority, making them an essential communication tool between
+          designers, developers, and stakeholders. Typically created in
+          grayscale, they serve as the foundation for further UI and UX
+          development.
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
+      </article>
+
+      <article>
+        <img
+          src="https://res.cloudinary.com/snyk/image/upload/f_auto,w_2560,q_auto/v1615821731/wordpress-sync/image1-11.png"
+          alt="Visual diagram of Git branching showing main, feature, and merged branches in a version control workflow."
+        />
+        <h2>Are you curious to learn about Branches in Git?</h2>
+        <p>
+          The article introduces the concept of a Git branch as a separate
+          workspace within a repository, allowing developers to work on new
+          features, bug fixes, or experiments without affecting the main
+          codebase. It emphasizes the benefits of branching, such as
+          facilitating parallel development and simplifying collaboration. The
+          guide provides practical examples of creating a new branch using git
+          branch, switching between branches with git checkout, and viewing
+          existing branches. It also illustrates how branching streamlines
+          workflows compared to traditional methods, highlighting Git's
+          efficiency in managing project versions.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
       </article>
     </main>
+
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        @2025 Abdullah Saleh <br />
+        Trainee at CYF - All rights reserved.
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c..58cc3b0c 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -45,12 +45,15 @@ svg {
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+header {
+  font: var(--font);
+  text-align: center;
+}
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
   bottom: 0;
   text-align: center;
 }
@@ -84,6 +87,10 @@ article {
     grid-column: 2/3;
   }
   > img {
-    grid-column: span 3;
+    grid-column: span 2;
   }
 }
+/*resize the height of first image*/
+#resize-image1 {
+  height: 400px;
+}
\ No newline at end of file
