diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..6fedd5576 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,26 +8,54 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>README, Wireframe, and branch</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This page is going to talk about README, Wireframe, and branch in Git.
       </p>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      <article> <!-- article 1 -->
+        <img src="https://miro.medium.com/v2/resize:fit:2000/format:webp/1*ERiYzo27N2v3fV5vl5kt5g.png" alt="Top" />
+        <h2>README</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          Picture above shows an example of README file in GitHub. README files tell people a summary of your project and what is your project about and how they can use your project. a good README
+          file will help people to understand your repo better.    
         </p>
-        <a href="">Read more</a>
-      </article>
+        <a href="https://wengerk.medium.com/why-having-a-readme-on-your-internal-project-is-essential-c85cb9dd8e65">Read more</a>
+      </article> <!-- article 1 -->
+
+      <article> <!-- article 2 -->
+        <img src="https://public-images.interaction-design.org/literature/articles/materials/ElementsofaWireframe.png" alt="Left" />
+        <h2>Wireframe</h2>
+        <p>
+          A wireframe is used to plan the structure of a website before designing it. It clarifies layout and structure. 
+   
+        </p>
+        <a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/">Read more</a>
+      </article> <!-- article 2 -->
+
+      <article> <!-- article 3 -->
+        <img src="https://res.cloudinary.com/snyk/image/upload/f_auto,w_2560,q_auto/v1615821731/wordpress-sync/image1-11.png" alt="Right" />
+        <h2>Branch</h2>
+        <p>
+          Branches are useful when the user wants to change parts of the code without affecting the main codebase.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
+      </article> <!-- article 3 -->
+
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
+    </footer>          
+
   </body>
 </html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wireframe</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    
\ No newline at end of file
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..ce43f9b22 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -18,7 +18,7 @@ As well as useful links to learn more */
 ====== Design Palette ====== */
 :root {
   --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --ink: color-mix(in oklab, blue 60%, red);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
@@ -53,6 +53,7 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  width: 100;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
