diff --git a/src/App.css b/src/App.css
index 74b5e05..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/App.js b/src/App.js
index 3784575..15dc708 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,10 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import ProductsPage from "./components/ProductsPage";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <ProductsPage />
     </div>
   );
 }
diff --git a/src/components/ProductRow.js b/src/components/ProductRow.js
new file mode 100644
index 0000000..1a80212
--- /dev/null
+++ b/src/components/ProductRow.js
@@ -0,0 +1,11 @@
+function ProductRow({ prodName, price, stock }) {
+  let itemColor = stock ? "black" : "red";
+  return (
+    <tr>
+      <td style={{ color: itemColor }}>{prodName}</td>
+      <td>{price}</td>
+    </tr>
+  );
+}
+
+export default ProductRow;
diff --git a/src/components/ProductTable.css b/src/components/ProductTable.css
new file mode 100644
index 0000000..9da364e
--- /dev/null
+++ b/src/components/ProductTable.css
@@ -0,0 +1,16 @@
+#tablebox {
+  width: 80%;
+  text-align: center;
+  border-collapse: collapse;
+  margin: 30px;
+}
+
+#tablebox th {
+  background-color: #e7ecef;
+  padding: 15px;
+}
+
+#tablebox td {
+  padding: 15px;
+  border-top: 3px solid #e7ecef;
+}
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
new file mode 100644
index 0000000..5b0e9fb
--- /dev/null
+++ b/src/components/ProductTable.js
@@ -0,0 +1,26 @@
+import "./ProductTable.css";
+import ProductRow from "./ProductRow";
+
+function ProductTable({ prodList }) {
+  let prodItems = prodList.map((item) => (
+    <ProductRow
+      prodName={item.name}
+      price={item.price}
+      stock={item.inStock}
+      key={item.id}
+    />
+  ));
+  return (
+    <table id="tablebox">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>{prodItems}</tbody>
+    </table>
+  );
+}
+
+export default ProductTable;
diff --git a/src/components/ProductsPage.css b/src/components/ProductsPage.css
new file mode 100644
index 0000000..5698703
--- /dev/null
+++ b/src/components/ProductsPage.css
@@ -0,0 +1,5 @@
+#products-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
new file mode 100644
index 0000000..77878b7
--- /dev/null
+++ b/src/components/ProductsPage.js
@@ -0,0 +1,41 @@
+import { useState } from "react";
+import "./ProductsPage.css";
+
+import jsonData from "./../data.json";
+import SearchBar from "./SearchBar";
+import ProductTable from "./ProductTable";
+
+function ProductsPage() {
+  const [products, setProducts] = useState(jsonData);
+
+  let stockProducts = jsonData
+    .filter((item) => item.inStock)
+    .map((item) => item);
+
+  function handleChange(e) {
+    let filteredProducts = products
+      .filter((item) =>
+        item.name.toLowerCase().includes(e.target.value.toLowerCase())
+      )
+      .map((item) => item);
+    setProducts(filteredProducts);
+  }
+
+  function handleCheck(e) {
+    if (e.target.checked) {
+      setProducts(stockProducts);
+    } else {
+      setProducts(jsonData);
+    }
+  }
+
+  return (
+    <div id="products-page">
+      <h1>Store</h1>
+      <SearchBar onTypeChange={handleChange} onChecked={handleCheck} />
+      <ProductTable prodList={products} />
+    </div>
+  );
+}
+
+export default ProductsPage;
diff --git a/src/components/SearchBar.css b/src/components/SearchBar.css
new file mode 100644
index 0000000..1315fd8
--- /dev/null
+++ b/src/components/SearchBar.css
@@ -0,0 +1,15 @@
+#search-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 90%;
+  padding: 10px;
+  gap: 10px;
+}
+
+#psearch {
+  height: 30px;
+  width: 90%;
+  box-sizing: border-box;
+}
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
new file mode 100644
index 0000000..88839bf
--- /dev/null
+++ b/src/components/SearchBar.js
@@ -0,0 +1,16 @@
+import "./SearchBar.css";
+
+function SearchBar({ onTypeChange, onChecked }) {
+  return (
+    <div id="search-bar">
+      <div>Search</div>
+      <input type="text" id="psearch" onChange={onTypeChange} />
+      <div>
+        <input type="checkbox" id="sfilter" onChange={onChecked} />
+        <label htmlFor="sfilter">Only show products in stock</label>
+      </div>
+    </div>
+  );
+}
+
+export default SearchBar;