diff --git a/Form-Controls/index.html b/Form-Controls/index.html
index 65a866cdb..53718b09f 100644
--- a/Form-Controls/index.html
+++ b/Form-Controls/index.html
@@ -14,14 +14,65 @@ <h1>Product Pick</h1>
     <main>
       <form>
         <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+        <!-- What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.-->
+        <fieldset>
+          <legend>Confirm your identity</legend>
+
+          <div>
+            <label for="name">Name:</label>
+            <input type="text" id="name" name="name" required minlength="2" />
+          </div>
+          <!--I require a valid email.-->
+          <div>
+            <label for="email">Email:</label>
+            <input type="email" id="email" name="email" required />
+          </div>
+        </fieldset>
+        <!--What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?-->
+        <fieldset>
+          <legend>Choose your shirt color</legend>
+          <div>
+            <label for="color-blue">Blue</label>
+            <input
+              type="radio"
+              id="color-blue"
+              name="color"
+              value="blue"
+              required
+            />
+          </div>
+          <div>
+            <label for="color-green">Green</label>
+            <input type="radio" id="color-green" name="color" value="green" />
+          </div>
+          <div>
+            <label for="color-black">Black</label>
+            <input type="radio" id="color-black" name="color" value="black" />
+          </div>
+        </fieldset>
+        <!--What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL-->
+        <fieldset>
+          <legend>Choose your size</legend>
+          <div>
+            <label for="T-shirt-size">T-shirt Size</label>
+            <select id="T-shirt-size" name="size" required>
+              <option value="" disabled selected>Select a size</option>
+              <option value="XS">XS</option>
+              <option value="S">S</option>
+              <option value="M">M</option>
+              <option value="L">L</option>
+              <option value="XL">XL</option>
+              <option value="XXL">XXL</option>
+            </select>
+          </div>
+        </fieldset>
+        <button type="submit">Submit</button>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <!--Just added a comment in order to create a new branch-->
+      <h2>By Elena Vasileia</h2>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/Readme.svg b/Wireframe/Readme.svg
new file mode 100644
index 000000000..5e9adc77e
--- /dev/null
+++ b/Wireframe/Readme.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="90" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+  <polyline points="14 2 14 8 20 8"/>
+  <line x1="16" y1="13" x2="8" y2="13"/>
+  <line x1="16" y1="17" x2="8" y2="17"/>
+  <line x1="10" y1="9" x2="8" y2="9"/>
+</svg>
diff --git a/Wireframe/Wireframe.svg b/Wireframe/Wireframe.svg
new file mode 100644
index 000000000..91b2d63a0
--- /dev/null
+++ b/Wireframe/Wireframe.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="90" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24">
+  <rect x="3" y="3" width="7" height="7"/>
+  <rect x="14" y="3" width="7" height="7"/>
+  <rect x="3" y="14" width="7" height="7"/>
+  <rect x="14" y="14" width="7" height="7"/>
+</svg>
diff --git a/Wireframe/book_open.svg b/Wireframe/book_open.svg
new file mode 100644
index 000000000..0accc8919
--- /dev/null
+++ b/Wireframe/book_open.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
\ No newline at end of file
diff --git a/Wireframe/git b/Wireframe/git
new file mode 100644
index 000000000..e69de29bb
diff --git a/Wireframe/git_branch_icon.svg b/Wireframe/git_branch_icon.svg
new file mode 100644
index 000000000..13af359cc
--- /dev/null
+++ b/Wireframe/git_branch_icon.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Git</title><path d="M23.546 10.93L13.067.452c-.604-.603-1.582-.603-2.188 0L8.708 2.627l2.76 2.76c.645-.215 1.379-.07 1.889.441.516.515.658 1.258.438 1.9l2.658 2.66c.645-.223 1.387-.078 1.9.435.721.72.721 1.884 0 2.604-.719.719-1.881.719-2.6 0-.539-.541-.674-1.337-.404-1.996L12.86 8.955v6.525c.176.086.342.203.488.348.713.721.713 1.883 0 2.6-.719.721-1.889.721-2.609 0-.719-.719-.719-1.879 0-2.598.182-.18.387-.316.605-.406V8.835c-.217-.091-.424-.222-.6-.401-.545-.545-.676-1.342-.396-2.009L7.636 3.7.45 10.881c-.6.605-.6 1.584 0 2.189l10.48 10.477c.604.604 1.582.604 2.186 0l10.43-10.43c.605-.603.605-1.582 0-2.187"/></svg>
\ No newline at end of file
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..f88bb59ff 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -5,28 +5,49 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
+   
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Basics in Web Development</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Understanding the essentials
       </p>
     </header>
+    
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="Readme.svg" alt="Illustration of Readme icon" />
+        <h2>The README file</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file introduces a project, explains its purpose, and provides instructions for installation and usage. It helps others understand what the project does, how to set it up, and where to find additional resources.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com/">Read more for README files</a>
       </article>
+
+      <article>
+        <img src="Wireframe.svg" alt="Illustration of Wireframe" />
+        <h2>The Wireframe</h2>
+        <p>
+          A wireframe is a visual guide that represents the structure and layout of a webpage or app. It helps designers and developers plan placement of elements and user flow before adding detailed content and styling.
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe/">Read more for Wireframe</a>
+      </article>
+
+      <article>
+        <img src="git_branch_icon.svg" alt="Illustration of git branch icon" />
+        <h2>A branch in Git</h2>
+        <p>
+          A branch in Git is an independent line of development, allowing you to work on new features or changes without affecting the main codebase. This enables collaboration and makes it easy to test, review, and merge updates.
+        </p>
+        <a href="https://www.atlassian.com/git/tutorials/using-branches">Find out more for Branches in Git</a>
+      </article>
+
+      
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        File made by El1VAS on October 2025
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..3c94de217 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -17,20 +17,39 @@ As well as useful links to learn more */
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
+  --paper: rgba(224, 230, 191, 0.801);
   --ink: color-mix(in oklab, var(--color) 5%, black);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
+  --line: 10px groove #012f5d;
   --container: 1280px;
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+header {
+  text-align: center;
+  padding: var(--space);
+}
+
+header h1 {
+  font-size: 4rem;
+}
+
+header p {
+  font-size: 2.5rem;
+}
+
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+
+h2 {
+  text-align: center;
+  font-size: 2.5rem;
+}
+
 a {
   padding: var(--space);
   border: var(--line);
@@ -51,6 +70,8 @@ main {
 }
 footer {
   position: fixed;
+  left: 0;
+  right: 0;
   bottom: 0;
   text-align: center;
 }