diff --git a/assets/css/App.css b/assets/css/App.css
new file mode 100644
index 0000000000000000000000000000000000000000..8ee333b811dd6007056fadfec9cc1549bc5c4411
--- /dev/null
+++ b/assets/css/App.css
@@ -0,0 +1,12 @@
+.App {
+    width: 100%;
+    height: auto;
+    min-height: 100vh;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  }
+  
+  body {
+    padding: 0;
+    margin: 0;
+  }
+  
\ No newline at end of file
diff --git a/assets/products/1.png b/assets/products/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..fa225013f66a203b43c7915b1b986a0afe26c8ae
Binary files /dev/null and b/assets/products/1.png differ
diff --git a/assets/products/2.png b/assets/products/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..0adcd1f6c5404a6b8177b66d2b622ddcf03e7b6d
Binary files /dev/null and b/assets/products/2.png differ
diff --git a/assets/products/3.png b/assets/products/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6532a2f38c1744750a9e0cca0db4d05c1cd4fea
Binary files /dev/null and b/assets/products/3.png differ
diff --git a/assets/products/4.png b/assets/products/4.png
new file mode 100644
index 0000000000000000000000000000000000000000..3af2f30b7e3dcdc20c6e98470105ba4a17efbc2b
Binary files /dev/null and b/assets/products/4.png differ
diff --git a/assets/products/5.png b/assets/products/5.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5da9782ce87361b1db0ee5ad2b41e901eceb7ef
Binary files /dev/null and b/assets/products/5.png differ
diff --git a/assets/products/6.webp b/assets/products/6.webp
new file mode 100644
index 0000000000000000000000000000000000000000..cbd43efb5da50574bd600e220d6a25e2b80511bc
Binary files /dev/null and b/assets/products/6.webp differ
diff --git a/assets/products/7.webp b/assets/products/7.webp
new file mode 100644
index 0000000000000000000000000000000000000000..26a7e61b5a8fccf68c06551b5dd3ca6cf864d8d6
Binary files /dev/null and b/assets/products/7.webp differ
diff --git a/assets/products/8.webp b/assets/products/8.webp
new file mode 100644
index 0000000000000000000000000000000000000000..2eea2a2472678055de67466a3b5aa3313d94ffd5
Binary files /dev/null and b/assets/products/8.webp differ
diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/cart.js b/src/cart.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/contact.js b/src/contact.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..8db5acb8fb94a08138a3901be0b5b810c9e50931
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/src/navbar.js b/src/navbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/products.js b/src/products.js
new file mode 100644
index 0000000000000000000000000000000000000000..f2353e85ce4cf3ebc560f206b85b003140509a70
--- /dev/null
+++ b/src/products.js
@@ -0,0 +1,59 @@
+import product1 from "./assets/products/1.png";
+import product2 from "./assets/products/2.png";
+import product3 from "./assets/products/3.png";
+import product4 from "./assets/products/4.png";
+import product5 from "./assets/products/5.png";
+import product6 from "./assets/products/6.webp";
+import product7 from "./assets/products/7.webp";
+import product8 from "./assets/products/8.webp";
+
+export const PRODUCTS = [
+  {
+    id: 1,
+    productName: "IPhone",
+    price: 999.0,
+    productImage: product1,
+  },
+  {
+    id: 2,
+    productName: "Macbook Pro 2022 (M1)",
+    price: 1999.0,
+    productImage: product2,
+  },
+  {
+    id: 3,
+    productName: "Cannon M50 Camera",
+    price: 699.0,
+    productImage: product3,
+  },
+  {
+    id: 4,
+    productName: "WLS Van Gogh Denim Jacket",
+    price: 228.0,
+    productImage: product4,
+  },
+  {
+    id: 5,
+    productName: "LED Light Strips",
+    price: 19.99,
+    productImage: product5,
+  },
+  {
+    id: 6,
+    productName: "SPECTRUM LS TEE",
+    price: 68.0,
+    productImage: product6,
+  },
+  {
+    id: 7,
+    productName: "AUTO SERVICE SHIRT by GOLF WANG",
+    price: 120.0,
+    productImage: product7,
+  },
+  {
+    id: 8,
+    productName: "DON'T TRIP UNSTRUCTURED HAT",
+    price: 40.0,
+    productImage: product8,
+  },
+];
diff --git a/src/shop-context.js b/src/shop-context.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/shop.js b/src/shop.js
new file mode 100644
index 0000000000000000000000000000000000000000..8730c0a901c5ec2f3644baa53480ca838187cbb8
--- /dev/null
+++ b/src/shop.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { PRODUCTS } from "../../products";
+import { Product } from "./product";
+import "./shop.css";
+
+export const Shop = () => {
+  return (
+    <div className="shop">
+      <div className="shopTitle">
+        <h1>PedroTech Shop</h1>
+      </div>
+
+      <div className="products">
+        {PRODUCTS.map((product) => (
+          <Product data={product} />
+        ))}
+      </div>
+    </div>
+  );
+};