diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index 97d0d8fd128d3379baa429b3049354658bb605be..3d196a45e818b190197dcbe91fe45c692d89a9e7 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import './css/App.css'
 import Navigation from './Navigation'
+import ProductGrid from './ProductGrid'
+import Product from './Product'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -8,6 +10,12 @@ function App() {
   return (
     <>
       <Navigation />
+      <ProductGrid classname="center">
+      <Product title="iPhone" description="$1199.99" />
+      <Product title="Sony headset" price="$299.99"/>
+      <Product title="Lenovo laptop" price="$799.99" />
+      <Product title="Airfryer" price="$149.99" />
+      </ProductGrid>
     </>
   )
 }
diff --git a/Frontend/src/Product.jsx b/Frontend/src/Product.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..5cd2d6517b97dcc19b127deb819f7fdc2a5facc4
--- /dev/null
+++ b/Frontend/src/Product.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import './css/App.css';
+
+function Product({ title, description, price }) {
+  return (
+    <div className="product">
+      <h2>{title}</h2>
+      <p>{description}</p>
+      <p>{price}</p>
+      <button>Add to Cart</button>
+    </div>
+  );
+}
+
+export default Product;
\ No newline at end of file
diff --git a/Frontend/src/ProductGrid.jsx b/Frontend/src/ProductGrid.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..e62098e3fedf24d620116899e1f2b8e18afb86a5
--- /dev/null
+++ b/Frontend/src/ProductGrid.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import './css/App.css';
+
+function ProductGrid({ children }) {
+  return <div className="product-grid">{children}</div>;
+}
+
+export default ProductGrid;
\ No newline at end of file
diff --git a/Frontend/src/css/App.css b/Frontend/src/css/App.css
index f93996596e630a790bce6429535f0d875dd3176d..c9bf21129f5dd5bc58c80d1d1e1faa2a2c805226 100644
--- a/Frontend/src/css/App.css
+++ b/Frontend/src/css/App.css
@@ -5,6 +5,14 @@ body
     color : rgb(218, 218, 218);
 }
 
+.product-grid
+{
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 100px; /* Adjust this value to move the grid up or down */
+  margin: 0; /* This removes the default margin around the body */
+}
 
 .navigation
 {
@@ -14,6 +22,19 @@ body
     width : 100%;
 }
 
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin: 0 auto; /* This centers the grid horizontally */
+}
+
+.product {
+  border: 1px solid #ccc;
+  padding: 10px;
+  text-align: center;
+}
+
 
 .navTop /* Topside of the navigation block*/
 {