diff --git a/views/pages/products.ejs b/views/pages/products.ejs
new file mode 100644
index 0000000..d5e14a9
--- /dev/null
+++ b/views/pages/products.ejs
@@ -0,0 +1,167 @@
+<html lang="en">
+
+<%- include('../layouts/header.ejs', {title: 'Products', state: 'products'}); %>
+
+<body class="bg-color">
+    <%- include('../layouts/navbar.ejs', {types: 'v1', state: 'products'}); %>
+
+    <div class="container mt-4">
+        <div class="row">
+            <div class="col">
+                <p class="text-white">Type</p>
+            </div>
+            <div class="col">
+                <p class="text-white">Gender</p>
+            </div>
+            <div class="col">
+                <p class="text-white">Color</p>
+            </div>
+            <div class="col col-md-auto">
+                <p>⠀⠀⠀⠀⠀⠀</p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <select class="form-control">
+                    <option>All</option>
+                    <option>NMD</option>
+                    <option>Galaxy</option>
+                </select>
+            </div>
+            <div class="col">
+                <select class="form-control">
+                    <option>All</option>
+                    <option>Men</option>
+                    <option>Women</option>
+                </select>
+            </div>
+            <div class="col">
+                <select class="form-control">
+                    <option>All</option>
+                    <option>Black</option>
+                    <option>White</option>
+                    <option>Blue</option>
+                </select>
+            </div>
+            <div class="col col-md-auto">
+                <button class="btn btn-primary btn-product-card" type="button">Filter</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="container-fluid mt-3">
+        <div class="row justify-content-around">
+            <div class="col-lg-3 col-md-6 p-3">
+                <div class="card">
+                    <img alt="Item Image" class="img-fluid lazyload" src="./img/Product_1.webp">
+                    <div class="card-body">
+                        <h5 class="card-title">Adidas NMD_R1 (GX0997)</h5>
+                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+                        <a href="product.html">
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 p-3">
+                <div class="card">
+                    <img alt="Item Image" class="img-fluid lazyload" src="./img/Product_2.webp">
+                    <div class="card-body">
+                        <h5 class="card-title">Adidas NMD_R1 (G55575)</h5>
+                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+                        <a href="product.html">
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 p-3">
+                <div class="card">
+                    <img alt="Item Image" class="img-fluid lazyload" src="./img/Product_3.webp">
+                    <div class="card-body">
+                        <h5 class="card-title">Adidas NMD_R1
+                            (FV1740)</h5>
+                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+                        <a href="product.html">
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 p-3">
+                <div class="card">
+                    <img alt="Item Image" class="img-fluid lazyload" src="./img/Product_10.webp">
+                    <div class="card-body">
+                        <h5 class="card-title">Adidas NMD_R1A (FX6794)</h5>
+                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+                        <a href="product.html">
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 p-3">
+                <div class="card">
+                    <img alt="Item Image" class="img-fluid lazyload" src="./img/Product_5.webp">
+                    <div class="card-body">
+                        <h5 class="card-title">Adidas NMD_R1 (GZ7944)</h5>
+                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+                        <a href="product.html">
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 p-3">
+                <div class="card">
+                    <img alt="Item Image" class="img-fluid lazyload" src="./img/Product_6.webp">
+                    <div class="card-body">
+                        <h5 class="card-title">Adidas NMD_R1
+                            (GZ7943)</h5>
+                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+                        <a href="product.html">
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 p-3">
+                <div class="card">
+                    <img alt="Item Image" class="img-fluid lazyload" src="./img/Product_7.webp">
+                    <div class="card-body">
+                        <h5 class="card-title">Adidas NMD_R1
+                            (FY3566)</h5>
+                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+                        <a href="product.html">
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="col-lg-3 col-md-6 p-3">
+                <div class="card">
+                    <img alt="Item Image" class="img-fluid lazyload" src="./img/Product_8.webp">
+                    <div class="card-body">
+                        <h5 class="card-title">Adidas NMD_R1 (GX0996)</h5>
+                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
+                            tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
+                        <a href="product.html">
+                            <button class="btn btn-info btn-product-card" type="button">View Detail</button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <%- include('../layouts/footer.ejs', {state: 'products'}); %>
+</body>
+
+</html>
\ No newline at end of file
