diff --git a/src/App.js b/src/App.js
index 3784575..6e32c7d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,11 @@
 import logo from './logo.svg';
 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..4725a8c
--- /dev/null
+++ b/src/components/ProductRow.js
@@ -0,0 +1,12 @@
+function ProductRow({ product }) {
+    return (
+      <tr style={{ color: product.inStock ? 'black' : 'red' }}>
+        <td>{product.name}</td>
+        <td>{product.price}</td>
+        <td>{product.inStock ? 'In Stock' : 'Out of Stock'}</td>
+      </tr>
+    );
+  }
+  
+  export default ProductRow;
+  
\ No newline at end of file
diff --git a/src/components/ProductTable.js b/src/components/ProductTable.js
new file mode 100644
index 0000000..71480ba
--- /dev/null
+++ b/src/components/ProductTable.js
@@ -0,0 +1,22 @@
+import ProductRow from './ProductRow';
+
+function ProductTable({ products }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        {products.map((product) => (
+          <ProductRow key={product.id} product={product} />
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+export default ProductTable;
diff --git a/src/components/ProductsPage.js b/src/components/ProductsPage.js
new file mode 100644
index 0000000..96e1567
--- /dev/null
+++ b/src/components/ProductsPage.js
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import jsonData from '../data.json';
+import SearchBar from './SearchBar';
+import ProductTable from './ProductTable';
+
+function ProductsPage() {
+  const [products, setProducts] = useState(jsonData);
+  const [filteredProducts, setFilteredProducts] = useState(products);
+
+  const handleSearch = (searchTerm) => {
+    const filtered = products.filter(product =>
+      product.name.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+    setFilteredProducts(filtered);
+  };
+
+  return (
+    <div>
+      <h1>Root Store</h1>
+      <SearchBar onSearch={handleSearch} />
+      <div>
+      <ProductTable products={filteredProducts} />
+      </div>
+    </div>
+  );
+}
+
+export default ProductsPage;
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
new file mode 100644
index 0000000..dc5af9f
--- /dev/null
+++ b/src/components/SearchBar.js
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+function SearchBar({ onSearch }) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [onlyInStock, setOnlyInStock] = useState(false);
+
+  const handleChange = (event) => {
+    setSearchTerm(event.target.value);
+    onSearch(event.target.value, onlyInStock); // Include stock filter
+  };
+
+  const handleCheckboxChange = (event) => {
+    setOnlyInStock(event.target.checked);
+    onSearch(searchTerm, event.target.checked); // Trigger search with stock filter
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="Search..."
+        value={searchTerm}
+        onChange={handleChange}
+      />
+      <label>
+        <input
+          type="checkbox"
+          checked={onlyInStock}
+          onChange={handleCheckboxChange}
+        />
+        Only show products in stock
+      </label>
+    </div>
+  );
+}
+
+export default SearchBar;