diff --git a/src/App.js b/src/App.js
index 3784575..5bd13b2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,23 +1,11 @@
-import logo from './logo.svg';
+// src/App.js
 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..7c3eda6
--- /dev/null
+++ b/src/components/ProductRow.js
@@ -0,0 +1,12 @@
+// src/components/ProductRow.js
+function ProductRow({ product }) {
+    return (
+      <tr style={{ color: product.inStock ? 'black' : 'red' }}>
+        <td>{product.name}</td>
+        <td>{product.price}</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..b87be70
--- /dev/null
+++ b/src/components/ProductTable.js
@@ -0,0 +1,22 @@
+// src/components/ProductTable.js
+import ProductRow from './ProductRow';
+
+function ProductTable({ products }) {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        {products.map(product => (
+          <ProductRow key={product.name} 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..a0f6dcb
--- /dev/null
+++ b/src/components/ProductsPage.js
@@ -0,0 +1,33 @@
+// src/components/ProductsPage.js
+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 [searchTerm, setSearchTerm] = useState("");
+  const [showInStock, setShowInStock] = useState(false);
+
+  const filteredProducts = products
+    .filter(product => 
+      product.name.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+    .filter(product => 
+      !showInStock || product.inStock
+    );
+
+  return (
+    <div>
+      <h1>Root Store</h1>
+      <SearchBar
+        onSearch={setSearchTerm}
+        showInStock={showInStock}
+        onToggleInStock={() => setShowInStock(!showInStock)}
+      />
+      <ProductTable products={filteredProducts} />
+    </div>
+  );
+}
+
+export default ProductsPage;
diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js
new file mode 100644
index 0000000..d17b9c0
--- /dev/null
+++ b/src/components/SearchBar.js
@@ -0,0 +1,23 @@
+// src/components/SearchBar.js
+function SearchBar({ onSearch, showInStock, onToggleInStock }) {
+    return (
+      <div>
+        <input
+          type="text"
+          placeholder="Search..."
+          onChange={(e) => onSearch(e.target.value)}
+        />
+        <label>
+          <input
+            type="checkbox"
+            checked={showInStock}
+            onChange={onToggleInStock}
+          />
+          Only show products in stock
+        </label>
+      </div>
+    );
+  }
+  
+  export default SearchBar;
+  
\ No newline at end of file