diff --git a/index.html b/index.html
index e9234d5..f92f0a5 100644
--- a/index.html
+++ b/index.html
@@ -1,24 +1,66 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="styles.css">
-  <script src="script.js" defer></script>
-  <title>Document</title>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Work Projects</title>
+  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
-  <div class="search-wrapper">
-    <label for="search">Search Users</label>
-    <input type="search" id="search" data-search>
+  <div id="container">
+    <!-- Logo -->
+    <img id="logo" src="images/logo.png" alt="My Logo" />
+
+    <!-- Search bar -->
+    <input type="text" id="search" placeholder="Search projects..." onkeyup="filterCards()" />
+
+    <!-- Cards -->
+    <a href="https://amzn.to/3IsB0jI" class="card" target="_blank">
+      <div class="image-wrapper">
+        <img src="https://m.media-amazon.com/images/I/61D50KafzZL._AC_UY218_.jpg" alt="Mouse" />
+      </div>
+      <div class="text">Mouse</div>
+    </a>
+
+    <a href="https://amzn.to/4lixxTy" class="card" target="_blank">
+      <div class="image-wrapper">
+        <img src="https://m.media-amazon.com/images/I/81rq+IrJ36L._AC_UY218_.jpg" alt="Laptop" />
+      </div>
+      <div class="text">Laptop</div>
+    </a>
+
+    <a href="https://amzn.to/4krTcHR" class="card" target="_blank">
+      <div class="image-wrapper">
+        <img src="https://m.media-amazon.com/images/I/61BHoFhIOQL._AC_UL320_.jpg" alt="Mic" />
+      </div>
+      <div class="text">Mic</div>
+    </a>
+
+    <a href="https://amzn.to/3GuoQX2" class="card" target="_blank">
+      <div class="image-wrapper">
+        <img src="https://m.media-amazon.com/images/I/71MdZ3q5UEL._AC_UL320_.jpg" alt="Chair" />
+      </div>
+      <div class="text">Chair</div>
+    </a>
+
+    <a href="https://amzn.to/40DFRoq" class="card" target="_blank">
+      <div class="image-wrapper">
+        <img src="https://m.media-amazon.com/images/I/71A-u5XDv3L._AC_SL1500_.jpg" alt="Keyboard" />
+      </div>
+      <div class="text">Keyboard</div>
+    </a>
   </div>
-  <div class="user-cards" data-user-cards-container></div>
-  <template data-user-template>
-    <div class="card">
-      <div class="header" data-header></div>
-      <div class="body" data-body></div>
-    </div>
-  </template>
+
+  <script>
+    function filterCards() {
+      const input = document.getElementById("search").value.toLowerCase();
+      const cards = document.querySelectorAll(".card");
+
+      cards.forEach(card => {
+        const text = card.querySelector(".text").textContent.toLowerCase();
+        card.style.display = text.includes(input) ? "flex" : "none";
+      });
+    }
+  </script>
 </body>
-</html>
\ No newline at end of file
+</html>
