diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..05de7da0c 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,48 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe, branches in git, and readme files</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Let's get familiar with wireframe, branches, and readme files.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://uxguerrilla.co.uk/wp-content/uploads/2020/09/mobile-web.png" alt="a black and white photo of wireframe in tablet, webpage, and smartphone" />
+        <h2>The purpose of a wireframe</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          Wireframe is a visual guide that represents the skeletal framework of a
+          website or application. It shows the layout, structure, and features
+          without focusing on design elements like colors or images, while gathering early feedback from users and stakeholders.
         </p>
-        <a href="">Read more</a>
+        <a href="https://adamfard.com/blog/wireframes" target="_blank">Read more</a>
+      </article>
+      <article>
+        
+        <img id="branches-img" src="https://wac-cdn.atlassian.com/dam/jcr:a905ddfd-973a-452a-a4ae-f1dd65430027/01%20Git%20branch.svg?cdnVersion=2934" alt="a picture of git branches" />
+        
+        
+        <h2>Branches in git</h2>
+        <p>
+          A branch in Git is a separate line of development that allows you to
+          work on different features or fixes independently. It enables
+          collaboration, experimentation, and version control without affecting
+          the main codebase.
+        </p>
+        <a href="https://www.w3schools.com/git/git_branch.asp" target="_blank">Read more</a>
+      </article>
+      <article>
+        <img id="readme-img" src="https://miro.medium.com/v2/resize:fit:720/format:webp/1*oppPsIqwEiB_kndtd6GWxA.png" alt="a picture of a banner written readme" />
+        <h2>The purpose of a README file</h2>
+        <p>
+          A README file is an essential document that outlines the purpose of a project, installation instructions, usage guidelines, and details for contributions. It is a guide for users and developers to understand and interact with the project.
+        </p>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank" >Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Created @ Tze Ming Ho 2025
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..f7ef744ce 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, var(--color) 5%, rgb(3, 3, 3));
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
@@ -26,16 +26,36 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+header {
+  text-align: center;
+  color: rgb(1, 77, 77);
+}
+
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  background-color: rgb(239, 244, 247);
 }
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  text-decoration: none;
+  color: rgb(116, 72, 15);
+  border-radius: 25px;
+  border-color: green;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+
+a:hover {
+  background-color: rgb(116, 72, 15);
+  color: white;
+  transition: background-color 0.3s ease;
+}
+
 img,
 svg {
   width: 100%;
@@ -53,6 +73,12 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  background-color: rgb(247, 247, 236);
+  width: 99%;
+  border: 1px solid;
+  border-color: green;
+  color: rgb(116, 72, 15);
+  
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -76,6 +102,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
 */
 article {
   border: var(--line);
+  border-radius: 15px;
   padding-bottom: var(--space);
   text-align: left;
   display: grid;
@@ -85,5 +112,23 @@ article {
   }
   > img {
     grid-column: span 3;
+    
   }
+  background-color: rgb(240, 240, 235);
+  border-color: green;
+  color: rgb(116, 72, 15);
+}
+
+img {
+  border-top-left-radius: 15px;
+  border-top-right-radius: 15px;
+}
+
+#branches-img, #readme-img {
+  min-height: 200px;
+  max-height: 300px;
+}
+
+#branches-img {
+  object-fit: contain;
 }
