diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..990bf94bf 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,26 +8,64 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Exploring README Files, Wireframes and Git Branches</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        We will be looking at the purposes and benefits of README files,
+        Wireframes and Git Branches
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          src="https://static0.makeuseofimages.com/wordpress/wp-content/uploads/2023/08/readme-article.jpg?q=50&fit=crop&w=1488&h=837&dpr=1.5"
+          alt="readme image"
+        />
+        <h2>README Files</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          The purpose of a README file is to serve as the primary guide and
+          entry point for a project, dataset, or software. It communicates what
+          the project does, how to install and use it, how to contribute, and
+          provides context so that others can easily understand or interact with
+          the content.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeuseof.com/readme-files-how-to-write-the-best/"
+          >Read more</a
+        >
+      </article>
+      <article>
+        <img
+          src="https://miro.medium.com/v2/resize:fit:1100/format:webp/1*bl0mLTGKrUfdIPS0hSKUBA.jpeg"
+          alt="wireframe image"
+        />
+        <h2>Wireframes</h2>
+        <p>
+          The primary purpose of a wireframe is to act as a visual blueprint. It
+          establishes the basic structure, content placement, and core
+          functionality of a digital product before visual design and coding
+          begin.
+        </p>
+        <a href="https://balsamiq.com/blog/what-are-wireframes/">Read more</a>
+      </article>
+      <article>
+        <img
+          src="https://hpc-wiki.info/mediawiki/hpc_images/thumb/6/6d/Git_tutorial_-_branching.png/700px-Git_tutorial_-_branching.png"
+          alt="git branch image"
+        />
+        <h2>Git Branches</h2>
+        <p>
+          In Git, a branch is essentially a lightweight, movable pointer to a
+          specific commit in your repository's history. Conceptually, it serves
+          as an isolated, parallel workspace where you can develop new features,
+          fix bugs, or experiment without affecting the stable "main" code.
+        </p>
+        <a
+          href="https://miro.medium.com/v2/resize:fit:1100/format:webp/1*bl0mLTGKrUfdIPS0hSKUBA.jpeg"
+          >Read more</a
+        >
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>email: taliakucuk1@gmail.com</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..5a096e11a 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -26,6 +26,10 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+
+header {
+  text-align: center;
+}
 body {
   background: var(--paper);
   color: var(--ink);
@@ -39,7 +43,7 @@ a {
 img,
 svg {
   width: 100%;
-  object-fit: cover;
+  height: 250px;
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
@@ -50,9 +54,10 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
   bottom: 0;
   text-align: center;
+  width: 100%;
+  padding: var(--space);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
