diff --git a/Wireframe/Readme.png b/Wireframe/Readme.png
new file mode 100644
index 000000000..c83cbfcfd
Binary files /dev/null and b/Wireframe/Readme.png differ
diff --git a/Wireframe/Wireframe1.png b/Wireframe/Wireframe1.png
new file mode 100644
index 000000000..3b9177fa8
Binary files /dev/null and b/Wireframe/Wireframe1.png differ
diff --git a/Wireframe/git_branch.png b/Wireframe/git_branch.png
new file mode 100644
index 000000000..3ffd45196
Binary files /dev/null and b/Wireframe/git_branch.png differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..17f1fe2fc 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -4,30 +4,53 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="styles.css" />
   </head>
   <body>
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        An Article about the purpose of a readme file ,and a wireframe,
+        and also on what a Git branch is and how to use it.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="Readme.png" alt="A readme diagram"/>
+        <h2>What is the Purpose of a Readme File?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          The purpose of a readme file is to provide,
+           information about a project.
         </p>
-        <a href="">Read more</a>
+        <a href="https://en.wikipedia.org/wiki/README">Read more</a>
+      </article>
+      <article>
+        <img src="Wireframe1.png" alt="A Wireframe diagram"/>
+        <h2>What is the Purpose of a Wireframe?</h2>
+        <p>
+         <strong>In short</strong>, a wireframe’s purpose is to visualize the skeleton of a digital product,
+          helping teams plan, test, and communicate ideas efficiently before moving to detailed design.
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe">Read more</a>
+      </article>
+      <article>
+        <img src="git_branch.png" alt="A Git branch diagram"/>
+        <h2>What Is a Git Branch?</h2>
+        <p>
+            In Git, a <em>branch</em> is like a separate workspace 
+          where you can make changes and try new ideas without affecting the main project. 
+          Think of it as a "parallel universe" for your code.</p>  
+        <a href="https://www.w3schools.com/git/git_branch.asp?remote=github">Read more</a>
       </article>
     </main>
     <footer>
+     
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Written by Tobias Amaechina.
       </p>
+      <address>
+        <a href="mailto:amaechina.tobias@gmail.com">Contact Tobias</a>
+      </address>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/styles.css
similarity index 99%
rename from Wireframe/style.css
rename to Wireframe/styles.css
index be835b6c7..1585c4ab4 100644
--- a/Wireframe/style.css
+++ b/Wireframe/styles.css
@@ -86,4 +86,4 @@ article {
   > img {
     grid-column: span 3;
   }
-}
+}
\ No newline at end of file
