diff --git a/Wireframe/README.md b/Wireframe/README.md
index f7b59df8c..8134a757a 100644
--- a/Wireframe/README.md
+++ b/Wireframe/README.md
@@ -14,11 +14,11 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including an image, title, summary, and a link
-- [ ] Check a webpage against a wireframe layout
-- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
-- [ ] Use version control by committing often and pushing regularly to GitHub
+- [x] Use semantic HTML tags to structure the webpage
+- [x] Create three articles, each including an image, title, summary, and a link
+- [x] Check a webpage against a wireframe layout
+- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [x] Use version control by committing often and pushing regularly to GitHub
 <!--{{</objectives>}}>-->
 
 ## Acceptance Criteria
diff --git a/Wireframe/book.jpg b/Wireframe/book.jpg
new file mode 100644
index 000000000..9e314740d
Binary files /dev/null and b/Wireframe/book.jpg differ
diff --git a/Wireframe/github-cat.png b/Wireframe/github-cat.png
new file mode 100644
index 000000000..267a20327
Binary files /dev/null and b/Wireframe/github-cat.png differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..ab77e5b54 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,33 +1,72 @@
 <!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" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wireframe, Readme file and Github branches explained</title>
+    <link rel="stylesheet" href="style.css">
   </head>
+    
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe, Readme file and Github branches explained</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This is the header, meant to give an overview of what can be found on the page. It could be a whole lot prettier, 
+        but this page was built on the principle that <b>production beats perfection</b>.
       </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>
+      <table>
+
+    <tr>
+      <td colspan="2">
+          <article>
+            <img src="placeholder.svg" alt="a placeholder picture">
+              <h2>Wireframe</h2>
+                <p>
+                A wireframe is a sketch of the design of a webpage. It is helpful in order to 
+                 plan the page lay-out and usability.
+                </p>
+                <a href="./wireframe-wireframe.html">Read more</a>
+          </article>
+      </td>
+    </tr>
+    <tr>
+      <td class="left">
+          <article>
+            <img src="placeholder.svg" alt="a placeholder picture">
+              <h2>Readme files</h2>
+                <p>
+                This article should be on the left side of the page and discuss the usefulness of a Readme file.<br>
+                Readme files are designed to help a page designer figure out 
+                what needs to be done and how they are expected to go about it.
+                </p>
+                <a href="./wireframe-readme.html">Read more</a>
+          </article>
+      </td>
+  
+      <td class="right">  
+          <article>
+            <img src="placeholder.svg" alt="a placeholder picture">
+              <h2>Github branches</h2>
+                <p>
+                  Github branches are elements of a project on Github. Everyone working on a project should make a new branch 
+                  for any small or big change alike. They help keeping track of changes, specifically when working
+                  on a project with several people.  
+                </p>
+                <a href="./wireframe-github.html">Read more</a>
+          </article>
+      </td>
+    </tr>
+
+      </table>
     </main>
+    
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+        The footer is where normally more information about the organisation behind the 
+        website can be found, such as contact details/street address and who they are.
     </footer>
+
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..b5da6a7b3 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -17,8 +17,8 @@ As well as useful links to learn more */
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --paper: oklch(70% 0 0);
+  --ink: black;
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
@@ -45,14 +45,49 @@ svg {
 Setting the overall rules for page regions
 https://www.w3.org/WAI/tutorials/page-structure/regions/
 */
+header {
+  text-align: center; 
+}
+
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: 70px;  /* same as footer height */
+}
+
+table {
+  font-family: Arial, Helvetica, sans-serif;
+  border-collapse: collapse;
+  width: 100%;
 }
+
+td, th {
+  border: 1px solid #ddd;
+  padding: 8px;
+}
+
+tr:nth-child(even){background-color: #f2f2f2;}
+
+tr:hover {background-color: #ddd;}
+
+td:first-child {width: 50%;}
+
+th {
+  padding-top: 12px;
+  padding-bottom: 12px;
+  text-align: left;
+  background-color: #04aa6d;
+  color: white;
+}
+
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 80px;
   text-align: center;
+  background-color: #04aa6d;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -65,9 +100,10 @@ main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
+}
+
+main > *:first-child {
+  grid-column: span 2;
 }
 /* ====== Article Layout ====== 
 Setting the rules for how elements are placed in the article. 
@@ -80,10 +116,12 @@ article {
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
+}
+
+article > * {
+  grid-column: 2 / 3;
+}
+
+article > img {
+  grid-column: span 3;
 }

+ + + Wireframe + + A wireframe is a sketch of the design of a webpage. It is helpful in order to + plan the page lay-out and usability. + + Read more + +
+ + + Readme files + + This article should be on the left side of the page and discuss the usefulness of a Readme file. + Readme files are designed to help a page designer figure out + what needs to be done and how they are expected to go about it. + + Read more + +	+ + + Github branches + + Github branches are elements of a project on Github. Everyone working on a project should make a new branch + for any small or big change alike. They help keeping track of changes, specifically when working + on a project with several people. + + Read more + +