diff --git a/Wireframe/git-branch-svgrepo-com.svg b/Wireframe/git-branch-svgrepo-com.svg
new file mode 100644
index 000000000..7b80805db
--- /dev/null
+++ b/Wireframe/git-branch-svgrepo-com.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 6C3 7.65685 4.34315 9 6 9C7.65685 9 9 7.65685 9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6Z" stroke="#323232" stroke-width="2"/>
+<path d="M3 18C3 19.6569 4.34315 21 6 21C7.65685 21 9 19.6569 9 18C9 16.3431 7.65685 15 6 15C4.34315 15 3 16.3431 3 18Z" stroke="#323232" stroke-width="2"/>
+<path d="M15 6C15 7.65685 16.3431 9 18 9C19.6569 9 21 7.65685 21 6C21 4.34315 19.6569 3 18 3C16.3431 3 15 4.34315 15 6Z" stroke="#323232" stroke-width="2"/>
+<path d="M6 15V9" stroke="#323232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 9V12.3242C18 16.9982 16.9424 18 12.008 18H9" stroke="#323232" stroke-width="2" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..3b43e486f 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,40 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Web Development Basics</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        This page explains some basic concepts in web development, including what a README file is, what a wireframe is, and how Git branches are used. These ideas help developers plan, build, and manage websites more effectively.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="readme.svg" alt="README file illustration" />
+         <h2>The Purpose of a README File</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is a plain text or Markdown document (usually named README.md) placed at the root of a project folder. It serves as a project's "welcome mat," giving visitors and contributors a quick summary of what the project does, how to install it, and how to use it.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com/">Read more</a>
+      </article>
+      <article>
+        <img src="wireframe-icon.svg" alt="Wireframe layout illustration" />
+        <h2>The Purpose of a Wireframe</h2>
+        <p>
+          A wireframe is a simple visual layout of a webpage or application. It helps developers and designers plan the structure and content before building the final product.
+        </p>
+        <a href="https://www.nngroup.com/articles/wireframes/">Read more</a>
+      </article>
+      <article>
+        <img src="git-branch-svgrepo-com.svg" alt="Git branch diagram" />
+        <h2>The Purpose of Git Branches</h2>
+        <p>
+          A Git branch is a separate workspace used to make changes safely. Developers use branches to work on new features without affecting the main project.
+        </p>
+        <a href="https://git-scm.com/docs/git-branch">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        © Web Development Basics - Learning Project
       </p>
     </footer>
   </body>
diff --git a/Wireframe/readme.svg b/Wireframe/readme.svg
new file mode 100644
index 000000000..f65313d01
--- /dev/null
+++ b/Wireframe/readme.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M 5 6 C 3.346 6 2 7.346 2 9 L 2 21 C 2 22.654 3.346 24 5 24 L 11.183594 23.980469 C 12.173594 23.980469 13.133031 24.290844 13.957031 24.839844 L 16 26.201172 L 18.042969 24.839844 C 18.866969 24.290844 19.826406 24 20.816406 24 L 27 24 C 28.654 24 30 22.654 30 21 L 30 9 C 30 7.346 28.654 6 27 6 L 20.816406 6 C 19.430406 6 18.086594 6.4077813 16.933594 7.1757812 L 16 7.7988281 L 15.066406 7.1757812 C 13.912406 6.4067813 12.570594 6 11.183594 6 L 5 6 z M 5 8 L 11.183594 8 C 12.173594 8 13.133031 8.2908438 13.957031 8.8398438 L 16 10.201172 L 18.042969 8.8398438 C 18.866969 8.2908438 19.826406 8 20.816406 8 L 27 8 C 27.552 8 28 8.449 28 9 L 28 21 C 28 21.551 27.552 22 27 22 L 20.816406 22 C 19.430406 22 18.086594 22.407781 16.933594 23.175781 L 16 23.798828 L 15.066406 23.175781 C 13.912406 22.406781 12.570594 22 11.183594 22 L 5 22 C 4.448 22 4 21.551 4 21 L 4 9 C 4 8.449 4.448 8 5 8 z M 6 12 L 6 14 L 14 14 L 14 12 L 6 12 z M 18 12 L 18 14 L 26 14 L 26 12 L 18 12 z M 6 16 L 6 18 L 14 18 L 14 16 L 6 16 z M 18 16 L 18 18 L 26 18 L 26 16 L 18 16 z"/></svg>
\ No newline at end of file
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..fd160c246 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -31,11 +31,19 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+
+h1,
+header p {
+  text-align: center;
+}
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
+
 img,
 svg {
   width: 100%;
@@ -53,6 +61,7 @@ footer {
   position: fixed;
   bottom: 0;
   text-align: center;
+  width: 100%;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -77,6 +86,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
 article {
   border: var(--line);
   padding-bottom: var(--space);
+  padding: 10px;
   text-align: left;
   display: grid;
   grid-template-columns: var(--space) 1fr var(--space);
diff --git a/Wireframe/wireframe-icon.svg b/Wireframe/wireframe-icon.svg
new file mode 100644
index 000000000..aa7d3a018
--- /dev/null
+++ b/Wireframe/wireframe-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 492.94"><path d="M31.31 0h449.38C497.85 0 512 14.15 512 31.31v430.32c0 17.23-14.08 31.31-31.31 31.31H31.31C14.14 492.94 0 478.79 0 461.63V31.31C0 14.08 14.1 0 31.31 0zm404.72 150.83-166.38 70.36 166.38 70.33V150.83zM257.1 226.5l-169 71.46h338.05L257.1 226.5zM75.97 292.48l168.58-71.29-168.58-71.26v142.55zm181.13-76.6 160.64-67.93H96.4l160.7 67.93zm21.99 123.84h155.79c8.17 0 14.89 6.72 14.89 14.9v69.19c0 8.11-6.78 14.89-14.89 14.89H279.09c-8.17 0-14.89-6.71-14.89-14.89v-69.19c0-8.17 6.72-14.9 14.89-14.9zm155.79 13.75H279.09c-.65 0-1.15.49-1.15 1.15v69.19c0 .6.56 1.15 1.15 1.15h155.79c.6 0 1.15-.54 1.15-1.15v-69.19c0-.6-.55-1.15-1.15-1.15zM77.12 339.72h147.93c8.14 0 14.9 6.76 14.9 14.9v69.19c0 8.15-6.75 14.89-14.9 14.89H77.12c-8.14 0-14.89-6.75-14.89-14.89v-69.19c0-8.17 6.73-14.9 14.89-14.9zm147.93 13.75H77.12c-.65 0-1.15.49-1.15 1.15v69.19c0 .63.53 1.15 1.15 1.15h147.93c.58 0 1.15-.58 1.15-1.15v-69.19c0-.64-.51-1.15-1.15-1.15zM77.12 134.21h357.76c8.14 0 14.89 6.75 14.89 14.89v147.71c0 8.14-6.75 14.89-14.89 14.89H77.12c-8.14 0-14.89-6.75-14.89-14.89V149.1c0-8.19 6.72-14.89 14.89-14.89zm410.51-29.36-463.26-.51v361.21c0 1.7 1.32 3.02 3.01 3.02h457.24c1.61 0 3.01-1.4 3.01-3.02v-360.7zm-32.82-68.34c9.34 0 16.9 7.57 16.9 16.9 0 9.34-7.56 16.91-16.9 16.91s-16.91-7.57-16.91-16.91c0-9.33 7.57-16.9 16.91-16.9zm-59.11 0c9.34 0 16.91 7.57 16.91 16.9 0 9.34-7.57 16.91-16.91 16.91s-16.9-7.57-16.9-16.91c0-9.33 7.56-16.9 16.9-16.9zm-59.1 0c9.33 0 16.9 7.57 16.9 16.9 0 9.34-7.57 16.91-16.9 16.91-9.34 0-16.91-7.57-16.91-16.91 0-9.33 7.57-16.9 16.91-16.9z"/></svg>
\ No newline at end of file
