diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index e793678..153f25e 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -16,6 +16,11 @@ const nextConfig = {
       },
     ],
   },
+  logging: {
+    fetches: {
+      fullUrl: true,
+    },
+  },
 };
 
 module.exports = nextConfig;
diff --git a/apps/web/src/api/index.ts b/apps/web/src/api/index.ts
index b62ab4f..d3d56c8 100644
--- a/apps/web/src/api/index.ts
+++ b/apps/web/src/api/index.ts
@@ -19,18 +19,18 @@ api.interceptors.response.use(
     return response.data;
   },
   async (error) => {
-    if (error.response.data.message) {
-      if (isArray(error.response.data.message)) {
+    if (error.response?.data?.message) {
+      if (isArray(error.response?.data?.message)) {
         error.response.data.message.forEach((message: string) =>
           toast.error(capitalize(message))
         );
       }
     }
-    if (error.response.status === 401 || error.response.status === 403) {
+    if (error.response?.status === 401 || error.response?.status === 403) {
       // window.location.reload()
     }
 
-    return Promise.reject(error.response.data);
+    return Promise.reject(error.response?.data);
   }
 );
 
diff --git a/apps/web/src/app/(public)/page.tsx b/apps/web/src/app/(public)/page.tsx
index abdb3cc..9a3a93b 100644
--- a/apps/web/src/app/(public)/page.tsx
+++ b/apps/web/src/app/(public)/page.tsx
@@ -1,10 +1,21 @@
-import { Slideshow } from "@/components";
+import { baseURL } from "@/api";
+import { ProductShowCase, Slideshow } from "@/components";
+import { PRODUCTS } from "@/constants";
+import { IProduct } from "@/types";
 import React from "react";
 
-const HomePage = () => {
+const getProducts = async (): Promise<IProduct[]> => {
+  const response = await fetch(baseURL + PRODUCTS + "?");
+  console.log("🚀 ~ getProducts ~ baseURL:", baseURL);
+  return await response.json();
+};
+
+const HomePage = async () => {
+  const products = await getProducts();
   return (
     <React.Fragment>
       <Slideshow />
+      <ProductShowCase title="Popular Product" {...{ products }} />
     </React.Fragment>
   );
 };
diff --git a/apps/web/src/app/error.tsx b/apps/web/src/app/error.tsx
new file mode 100644
index 0000000..0e00b93
--- /dev/null
+++ b/apps/web/src/app/error.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import React from "react";
+
+const ErrorPage = () => {
+  return <div>ErrorPage</div>;
+};
+
+export default ErrorPage;
diff --git a/apps/web/src/components/index.ts b/apps/web/src/components/index.ts
index 09b5304..02e0e9d 100644
--- a/apps/web/src/components/index.ts
+++ b/apps/web/src/components/index.ts
@@ -8,3 +8,4 @@ export * from "./loader";
 export * from "./ui";
 export * from "./breadcrumb";
 export * from "./product";
+export * from "./showcase";
diff --git a/apps/web/src/components/product/index.tsx b/apps/web/src/components/product/index.tsx
index 5093b91..aba701c 100644
--- a/apps/web/src/components/product/index.tsx
+++ b/apps/web/src/components/product/index.tsx
@@ -13,7 +13,7 @@ interface Props {
 
 export const ProductCard = memo(({ product }: Props) => {
   return (
-    <div className="w-[calc((100%-60px)/4)] shadow-box bg-white rounded-sm relative group flex flex-col">
+    <div className="w-[calc((100%-40px)/3)] xl:w-[calc((100%-60px)/4)] shadow-box bg-white rounded-sm relative group flex flex-col">
       <div className="absolute top-0 right-0 z-50 flex flex-col overflow-hidden">
         <button
           type="button"
diff --git a/apps/web/src/components/showcase/index.ts b/apps/web/src/components/showcase/index.ts
new file mode 100644
index 0000000..4319132
--- /dev/null
+++ b/apps/web/src/components/showcase/index.ts
@@ -0,0 +1 @@
+export * from "./product.showcase";
diff --git a/apps/web/src/components/showcase/product.showcase.tsx b/apps/web/src/components/showcase/product.showcase.tsx
new file mode 100644
index 0000000..3f5e936
--- /dev/null
+++ b/apps/web/src/components/showcase/product.showcase.tsx
@@ -0,0 +1,27 @@
+import { IProduct } from "@/types";
+import React from "react";
+import { ProductCard } from "..";
+
+type Props = {
+  title: string;
+  products: IProduct[];
+};
+
+export const ProductShowCase = (props: Props) => {
+  const { title, products } = props;
+
+  return (
+    <div className="bg-white py-16">
+      <div className="container space-y-5">
+        <div className="flex items-center justify-between pb-2 border-b-2 gap-5 border-gray-100">
+          <h4 className="text-xl font-bold">{title}</h4>
+        </div>
+        <div className="flex flex-wrap">
+          {products?.map((product) => (
+            <ProductCard key={product.id} {...{ product }} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};