diff --git a/index.html b/index.html
index 3a9475e..b7b91f8 100644
--- a/index.html
+++ b/index.html
@@ -1,30 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="stylesheet" href="./styles/style.css" />
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>mockup3</title>
+</head>
+<body>
+  <header id="header">
+    <nav id="images">
+      <span><img src="./img/left.png" alt="left-arrow"></span>
+      <span><img src="./img/right.png" alt="right-arrow"></span>
+      <span><img src="./img/cancel.png" alt="cancel"></span>
+      <span><img src="./img/house.png" alt="house"></span>
+      <span><input type="text" id="search-bar" name="search-bar"></span>
+      <span><img src="./img/searchIcon.png" alt="search-icon"></span>
+      <div>
+        <h4>My Webpage</h4>
+      </div>
+    </nav>
+  </header>
+  <section>
+    <h5>Details:</h5>
+    <span>
+      <fieldset>
+        <p>Pets:</p>
+        <p>Puppies</p>
+        <p>Cats</p>
+        <p>Kittens</p>
+        <p>Dogs</p>
+        <p>Copybaras</p>
+        <p>Giraffes</p>
+      </fieldset>
+      <fieldset>
+        <p>Cities:</p>
+        <p>San Francisco</p>
+        <p>New York</p>
+        <p>San Jose</p>
+        <p>Patterson</p>
+        <p>Los Angeles</p>
+        <p>Palo Alto</p>
+        <p>Sausalito</p>
+      </fieldset>
+    </span>
+    <fieldset>
+      <p>View Additional Details</p>
+    </fieldset>
+    
+  
 
-    <title>Document</title>
-  </head>
-  <body>
-    <header style="background-color: #c1c1c1;">
-      <section>
-        <a href="./final.html">
-          <img src="./img/left.png" alt="Back Button" />
-        </a>
-        <a href="./final.html">
-          <img src="./img/right.png" alt="Forward Button" />
-        </a>
-        <a href="./final.html">
-          <img src="./img/cancel.png" alt="Forward Button" />
-        </a>
-        <a href="./final.html">
-          <img src="./img/house.png" alt="Forward Button" />
-        </a>
-        <input type="text" class="brett1" />
-      </section>
-    </header>
-  </body>
-</html>
+  </section>
+
+  
+</body>
+<footer>
+  
+</footer>
+</html>
\ No newline at end of file
diff --git a/mockup3.html b/mockup3.html
new file mode 100644
index 0000000..268cc80
--- /dev/null
+++ b/mockup3.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>mockup3</title>
+</head>
+<body>
+  <header id="header">
+    <nav id="images">
+      <span><img src="./img/left.png" alt="left-arrow"></span>
+      <span><img src="./img/right.png" alt="right-arrow"></span>
+      <span><img src="./img/cancel.png" alt="cancel"></span>
+      <span><img src="./img/house.png" alt="house"></span>
+      <span><input type="text" id="search-bar" name="search-bar"></span>
+      <span><img src="./img/searchIcon.png" alt="search-icon"></span>
+      <div>
+        <h4>My Webpage</h4>
+      </div>
+    </nav>
+  </header>
+  <section>
+    <h5>Details:</h5>
+    <span>
+      <fieldset>
+        <p>Pets:</p>
+        <p>Puppies</p>
+        <p>Cats</p>
+        <p>Kittens</p>
+        <p>Dogs</p>
+        <p>Copybaras</p>
+        <p>Giraffes</p>
+      </fieldset>
+      <fieldset>
+        <p>Cities:</p>
+        <p>San Francisco</p>
+        <p>New York</p>
+        <p>San Jose</p>
+        <p>Patterson</p>
+        <p>Los Angeles</p>
+        <p>Palo Alto</p>
+        <p>Sausalito</p>
+      </fieldset>
+    </span>
+    <fieldset>
+      <p>View Additional Details</p>
+    </fieldset>
+
+  </section>
+
+</body>
+<footer>
+  
+</footer>
+</html>
\ No newline at end of file
