diff --git a/Wireframe/image1.png b/Wireframe/image1.png
new file mode 100644
index 000000000..2e5d9047b
Binary files /dev/null and b/Wireframe/image1.png differ
diff --git a/Wireframe/image2.png b/Wireframe/image2.png
new file mode 100644
index 000000000..1cb01284c
Binary files /dev/null and b/Wireframe/image2.png differ
diff --git a/Wireframe/image3.png b/Wireframe/image3.png
new file mode 100644
index 000000000..e275bfa33
Binary files /dev/null and b/Wireframe/image3.png differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..6e69b35d9 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,33 +1,88 @@
 <!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>
-    <header>
-      <h1>Wireframe</h1>
+
+<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>
+  <header>
+    <h1>SOFTWARE DEVELOPMENT LIFECYCLE TOOLS(SDLC)</h1>
+    <p id="basic">
+      SDLC tools are software applications that help development teams plan, design, build, test, and deploy software
+      systematically. SDLC tools are software applications that help development teams plan, design, build, test, and
+      deploy software systematically.
+    </p>
+  </header>
+  <main>
+    <article>
+      <div>
+        <img src="image1.png" alt="an image of a readme.md" />
+      </div>
+      <h2>README FILE</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Just like the name implies, you should read a README file as it is the foundational documentation for a
+        software, dataset, or coding project. It serves as a project's "front door," designed to help users quickly
+        understand what the project does, how to install and use it, and how to contribute. It also contains
+        clear examples or tutorials demonstrating the project's features in action.
       </p>
-    </header>
-    <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
-      </article>
-    </main>
-    <footer>
+      <a
+        href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
+        more</a>
+    </article>
+    <article>
+      <div>
+        <img src="image3.png" alt="an image of a wireframe template" />
+      </div>
+      <h2>WIREFRAMES</h2>
+      <p>Wireframes are basic blueprints that help teams align on requirements, keeping UX design conversations focused
+        and constructive.
+        Think of your wireframe as the skeleton of your app, website, or other final product. Starting with a clean,
+        spare wireframe design also gives UI/UX designers room to iterate. They can collect early feedback from user
+        testing on core UX/UI elements, without distracting users with visual design details.
+        Your wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages, components,
+        and features, including:
+      </p>
+      <ul>
+        <li>Screen layouts</li>
+        <li>Navigation bars</li>
+        <li>Components of UX and UI design</li>
+        <li>Interactive elements</li>
+      </ul>
+      <a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
+    </article>
+    <article>
+      <div>
+        <img src="image2.png" alt="an image of a git branch and its operations" />
+      </div>
+      <h2>GIT BRANCH</h2>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        In Git, a branch 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.
+        Branches let you work on different parts of a project, like new features or bug fixes, without interfering with
+        the main branch. Branches allow you to work on different parts of a project without impacting the main branch.
+        When the work is complete, a branch can be merged with the main project. You can even switch between branches
+        and work on different projects without them interfering with each other. Branching in Git is very lightweight
+        and fast! Common reasons to create a branch includes:
       </p>
-    </footer>
-  </body>
-</html>
+      <ul>
+        <li>Developing a new feature</li>
+        <li>Fixing a bug</li>
+        <li>Experimenting with ideas</li>
+      </ul>
+      <a
+        href="https://i0.wp.com/digitalvarys.com/wp-content/uploads/2019/06/GIT-Branchand-its-Operations.png?fit=1921%2C1057&ssl=1">Read
+        more</a>
+    </article>
+  </main>
+  <footer>
+    <p>
+      ALL RIGHTS RESERVED. RIZQAH POPOOLA 2026
+    </p>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..b10d21a87 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -24,23 +24,40 @@ As well as useful links to learn more */
   --line: 1px solid;
   --container: 1280px;
 }
+
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+h1 {
+  text-align: center;
+  color: palevioletred;
+}
+
+h2 {
+  color: palevioletred;
+}
+
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
 }
+
+#basic {
+  text-align: center;
+}
+
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -48,12 +65,25 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space);
+
+  >*:first-child {
+    grid-column: span 2;
+  }
 }
+
 footer {
   position: fixed;
+  left: 0;
   bottom: 0;
+  width: 100%;
+  background-color: rgb(231, 163, 200);
+  color: black;
   text-align: center;
 }
+
 /* ====== 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,14 +91,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.
@@ -80,10 +102,12 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
-  > * {
+
+  >* {
     grid-column: 2/3;
   }
-  > img {
+
+  >img {
     grid-column: span 3;
   }
-}
+}
\ No newline at end of file
