diff --git a/Wireframe/assets/images/GitHubLogo.png b/Wireframe/assets/images/GitHubLogo.png
new file mode 100644
index 000000000..089cbd685
Binary files /dev/null and b/Wireframe/assets/images/GitHubLogo.png differ
diff --git a/Wireframe/assets/images/GithubBranching.png b/Wireframe/assets/images/GithubBranching.png
new file mode 100644
index 000000000..806527bbb
Binary files /dev/null and b/Wireframe/assets/images/GithubBranching.png differ
diff --git a/Wireframe/assets/images/GithubCommitsStaging.png b/Wireframe/assets/images/GithubCommitsStaging.png
new file mode 100644
index 000000000..dd584a30a
Binary files /dev/null and b/Wireframe/assets/images/GithubCommitsStaging.png differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..3051ad64b 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,42 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Github Learning</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Learning resources and tutorials for GitHub.
       </p>
     </header>
     <main>
+        <article >
+        <img src="assets/images/GitHubLogo.png" alt="GitHub logo" />
+        <h2>What is GitHub?</h2>
+        <p>
+          GitHub is a code hosting platform for version control and collaboration.
+          It lets you and others work together on projects from anywhere.
+        </p>
+        <a href="">Read more</a>
+      </article>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="assets/images/GithubBranching.png" alt="Github Branching" />
+        <h2>Branching</h2>
+        <p>
+          Branching allows you to create separate lines of development within a repository.
+        </p>
+        <a href="">Read more</a>
+      </article>
+        <article>
+        <img src="assets/images/GithubCommitsStaging.png" alt="GitHub commits and staging diagram"/>
+        <h2>Commits</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A commit is a snapshot of your repository at a specific point in time.
         </p>
         <a href="">Read more</a>
       </article>
+      
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        © 2026 Github Learning
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..0e698935f 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,7 +30,16 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  margin: 0; 
+  margin-bottom: 100px;
+  padding: 0; 
+  min-height: 100vh;
 }
+header {
+  text-align: center;
+  padding: calc(var(--space) * 2) 0; 
+}
+
 a {
   padding: var(--space);
   border: var(--line);
@@ -38,7 +47,13 @@ a {
 }
 img,
 svg {
+  height: 300px;
   width: 100%;
+  object-fit: contain;
+}
+
+article:first-child img {
+  height: 300px;
   object-fit: cover;
 }
 /* ====== Site Layout ====== 
@@ -48,11 +63,17 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding: 0 calc(var(--space) * 2);
 }
 footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  width: 100%;
+  background: var(--paper);
+  padding: var(--space);
+  border-top: var(--line); 
+    
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -86,4 +107,4 @@ article {
   > img {
     grid-column: span 3;
   }
-}
+}
\ No newline at end of file
