diff --git a/handler.py b/handler.py
index 64ae435..5704fe5 100644
--- a/handler.py
+++ b/handler.py
@@ -10,6 +10,7 @@ from    config                  import directory
 
 import  templates.plain.main	as template_public
 import  modules.public.home     as public_home
+import  modules.public.product   as public_product
 
 app = Bottle()
 
@@ -21,3 +22,12 @@ def index():
         }
     }
     return public_home.main().html(params)
+
+@app.route('/product')
+def product():
+    params = {
+        "mako":{
+            "website" : template_public.main(directory.page["public"], "product")
+        }
+    }
+    return public_product.main().html(params)
diff --git a/modules/public/home.py b/modules/public/home.py
index cfa61f7..25e386d 100644
--- a/modules/public/home.py
+++ b/modules/public/home.py
@@ -21,6 +21,6 @@ class main:
             container	= Template(params["mako"]["website"]['container']).render(
                 header	= "Welcome to CostaCoffe",
                 sub_header = "Best Place To Buy Coffe",
-                header_desc	= f"Experience the rich flavors and aromas of our premium coffee"
+                header_desc	= "Experience the rich flavors and aromas of our premium coffee"
             )
         )
diff --git a/modules/public/product.py b/modules/public/product.py
new file mode 100644
index 0000000..3566b59
--- /dev/null
+++ b/modules/public/product.py
@@ -0,0 +1,36 @@
+from    mako.template      import Template
+from    config             import globalvar
+
+class Coffe:
+    def __init__(self, image, name, price) -> None:
+        self.image = image 
+        self.name = name
+        self.price = price
+
+class main:
+    def __init__(self):
+        pass
+
+    def html(self, params):
+        return Template(params["mako"]["website"]['index']).render(
+            title	= globalvar.title,
+            navbar	= Template(params["mako"]["website"]['navbar']).render(
+                title       = globalvar.title,
+                menu		= globalvar.menu['public']['navbar'],
+                user_roles	= ["guest"],
+                active_page	= "Our Product"
+            ),
+            footer	= Template(params["mako"]["website"]['footer']).render(
+                copyright	= globalvar.copyright,
+            ),
+            container = Template(params["mako"]["website"]['container']).render(
+                products = [
+                    Coffe("coffe1.png", "Classic Coffe", "8.000"),
+                    Coffe("coffe2.png", "Cappucino", "12.000"),
+                    Coffe("coffe3.png", "Mochaccino", "15.000"),
+                    Coffe("coffe4.png", "Latte Machiato", "16.000"),
+                    Coffe("coffe5.png", "Ice Coffe Latte", "14.000"),
+                    Coffe("coffe6.png", "Glass Cafe", "18.000"),
+                ]
+            )
+        )
diff --git a/pages/public/product.html b/pages/public/product.html
new file mode 100644
index 0000000..bbda3df
--- /dev/null
+++ b/pages/public/product.html
@@ -0,0 +1,65 @@
+<div class="container">
+    <h2>Our Coffe</h2>
+    <div class="coffe-grid">
+        % for coffe in products:
+        <div class="item">
+            <div class="card-img">
+                <img src="/img/products/${coffe.image}" alt="${coffe.name}">
+            </div>
+            <div class="card-body">
+                <h3>${coffe.name}</h3>
+                <h4>Rp. ${coffe.price}</h4>
+            </div>
+        </div>
+        % endfor
+    </div>
+</div>
+
+<style>
+    .container {
+        max-width: 860px;
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .container h2 {
+        font-size: 2.4rem;
+        font-weight: 600;
+    }
+
+    .coffe-grid {
+        display: grid;
+        grid-template-columns: repeat(3, auto);
+        gap: 4.2rem;
+    }
+
+    .coffe-grid .card-img {
+        width: 200px;
+        height: 200px;
+        margin: 0 auto;
+    }
+
+    .coffe-grid .item {
+        border-radius: 1.2rem;
+        background-color: #fdfdfd;
+    }
+
+    .card-img img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+
+    .card-body h3 {
+        font-size: 2rem;
+        font-weight: 500;
+        margin: 0.6rem 0;
+    }
+
+    .card-body h4 {
+        font-size: 1.2rem;
+        font-weight: 400;
+        margin-top: 0.6rem;
+        color: #727272;
+    }
+</style>
\ No newline at end of file
diff --git a/static/img/products/coffe1.png b/static/img/products/coffe1.png
new file mode 100644
index 0000000..64f69e0
Binary files /dev/null and b/static/img/products/coffe1.png differ
diff --git a/static/img/products/coffe2.png b/static/img/products/coffe2.png
new file mode 100644
index 0000000..975268c
Binary files /dev/null and b/static/img/products/coffe2.png differ
diff --git a/static/img/products/coffe3.png b/static/img/products/coffe3.png
new file mode 100644
index 0000000..32aa2cf
Binary files /dev/null and b/static/img/products/coffe3.png differ
diff --git a/static/img/products/coffe4.png b/static/img/products/coffe4.png
new file mode 100644
index 0000000..520fa71
Binary files /dev/null and b/static/img/products/coffe4.png differ
diff --git a/static/img/products/coffe5.png b/static/img/products/coffe5.png
new file mode 100644
index 0000000..b93c759
Binary files /dev/null and b/static/img/products/coffe5.png differ
diff --git a/static/img/products/coffe6.png b/static/img/products/coffe6.png
new file mode 100644
index 0000000..6657f77
Binary files /dev/null and b/static/img/products/coffe6.png differ