diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..1a31b3c41 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,33 +1,51 @@
-<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
+    <meta name="description" content="A simple wireframe layout with a header, three articles, and and footer.">
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <h1 class="main-title">Wireframe</h1>
+      <p class="subtitle">A wireframe is a simple visual guide that shows the structure of a webpage before it is built. It helps plan layout and design.</p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="placeholder.svg" alt="Icon representing a Readme file"/>
+        <h2>About Readme File</h2>
+        <p>
+          README file introduces a project, explains how to install it, and
+          helps others understand how to use or contribute to it.
+        </p>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"  target="_blank" rel="noopener noreferrer">Read more</a>
+      </article>
+       <article>
+        <img src="placeholder.svg" alt="Icon representing a wireframe"/>
+        <h2>About Wireframe</h2>
+        <p>
+         A wireframe is a simple visual guide that shows the structure of a
+          webpage before it is built, It helps plan layout and design.
+        </p>
+        <a href="https://www.figma.com/resource-library/what-is-wireframing/"  target="_blank" rel="noopener noreferrer">Read more</a>
+      </article>
+       <article>
+        <img src="placeholder.svg" alt="Icon representing a Git branch" />
+        <h2>About the branch</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+         A branch in Git is a separate line of development that lets you work
+          on new features without changing the main codebase.
         </p>
-        <a href="">Read more</a>
+        <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"  target="_blank" rel="noopener noreferrer">Read more</a>
       </article>
+
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        <strong>Created by Khalid</strong>
       </p>
     </footer>
   </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..ed70f690f 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -17,6 +17,7 @@ As well as useful links to learn more */
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
 :root {
+  -color:#000;
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
   --font: 100%/1.5 system-ui;
@@ -27,33 +28,56 @@ As well as useful links to learn more */
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
-  background: var(--paper);
-  color: var(--ink);
+   background: var(--paper); 
+  color: var(--ink); 
   font: var(--font);
 }
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  text-decoration: none;
+  color: inherit;
 }
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+header{
+  text-align: center;
+  color: rgb(18, 87, 114);
+  background-color: beige;
+  font-size: larger;
+  padding: 2rem;
+}
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
 main {
-  max-width: var(--container);
+ max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space);
+}
+main > *:first-child{
+grid-column: span 2;
 }
 footer {
+  margin-top: auto;
   position: fixed;
   bottom: 0;
-  text-align: center;
-}
+  width: 100%;
+  background-color: beige;
+  text-align: left;
+  padding: var(--space);
+  }
+  .main-title{
+    font-family: cursive;
+    font-style: italic
+  }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
 Inspect this in Devtools and click the "grid" button in the Elements view
@@ -61,19 +85,6 @@ Play with the options that come up.
 https://developer.chrome.com/docs/devtools/css/grid
 https://gridbyexample.com/learn/
 */
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
-}
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
-Now laying out just the INSIDE of the repeated card/article design.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
 article {
   border: var(--line);
   padding-bottom: var(--space);
@@ -81,9 +92,15 @@ article {
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
   > * {
+/* ====== Article Layout ====== 
+Setting the rules for how elements are placed in the article. 
+Now laying out just the INSIDE of the repeated card/article design.
+Keeping things orderly and separate is the key to good, simple CSS.
+*/
+
     grid-column: 2/3;
   }
   > img {
-    grid-column: span 3;
+    grid-column: span 3
   }
 }
