diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..a9517dd5b 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,23 +10,69 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        An article framework that gives a hint on the purpose of README,
+         Wireframe, and branches of Git..
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://www.openapis.org/wp-content/uploads/sites/31/2021/12/readme-blue-1024x185.png" alt="" />
+        <h2>The Purpose of Readme</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is typically the first file a reader encounters
+           when accessing a project. It contains essential information
+            about the codebase, software, game, or application. It also 
+            provides instructions and guidelines on how to use, update,
+             or contribute to the project.
         </p>
-        <a href="">Read more</a>
+
+        <P>The purpose of a README file is to serve as a roadmap for the developer
+           and other contributors. It helps them follow clear instructions to build
+            or maintain the project and offers insight into how the project is structured. 
+            It also assists in debugging, making it easier to trace issues and understand 
+            where each section of code is located.
+        </P>
+        <P>For end users, the README clarifies which 
+            frameworks or programming languages were used, why those technologies were chosen, 
+            and what inspired the creator to build the project.
+        </p>
+        <a href="https://www.mygreatlearning.com/blog/readme-file/">Read more</a>
+      </article>
+      <article>
+        <img src="https://www.godaddy.com/resources/wp-content/uploads/2025/05/website-wireframe-services.jpg?size=3840x0"alt="" />
+        <h2>The purpose of Wireframe</h2>
+        <p>
+         A wireframe is a visual sketch or layout of a website or web page 
+         that is intended to be developed. It outlines the basic structure 
+         and placement of elements before any design or coding begins.
+        </p>
+        <p>
+          The purpose of a wireframe is to establish a clear hierarchy of information
+          on the developer’s site or page, considering that users typically begin scanning a 
+          webpage from the upper-left corner. It simplifies communication between the developer
+           and the client by providing a shared visual reference, and it serves as a blueprint
+            for the project.
+        </p>
+        <p>
+          Wireframes help developers organize content logically, 
+          trace bugs more easily, and understand where each section
+           of code corresponds to the visual layout.</p>
+        <a href="https://medium.com/design-bootcamp/wireframes-5d63f9d760a8">Read more</a>
+      </article>
+      <article class="last">
+        <img src="https://miro.medium.com/v2/1*K9scAx1Ezd-KJFabaYseCw.jpeg" alt="" />
+        <h2>Branches in Git</h2>
+        <p>
+          A branch in Git is a separate line of development that diverges from
+           the main repository. It acts as an isolated workspace where changes
+            can be made without affecting the original branch which is called main branch. 
+        </p>
+        <a href="https://medium.com/@jacoblogan98/understanding-git-branching-5d01f3dda541">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Sprint 1-Model Onbording-Wireframe by Abraham
       </p>
     </footer>
   </body>