diff --git a/framework/commerce/types/product.ts b/framework/commerce/types/product.ts
index e02113814..ddf51c518 100644
--- a/framework/commerce/types/product.ts
+++ b/framework/commerce/types/product.ts
@@ -47,6 +47,8 @@ export type Product = {
   currencyCode: CurrencyCode
   options: ProductOption[]
   facetValueIds?: string[]
+  collectionIds?: string[]
+  collection?: string,
 }
 
 export type ProductCard = {
diff --git a/framework/vendure/api/operations/get-product.ts b/framework/vendure/api/operations/get-product.ts
index 239eb5b61..0aa761ab0 100644
--- a/framework/vendure/api/operations/get-product.ts
+++ b/framework/vendure/api/operations/get-product.ts
@@ -2,7 +2,7 @@ import { Product } from '@commerce/types/product'
 import { OperationContext } from '@commerce/api/operations'
 import { Provider, VendureConfig } from '../'
 import { GetProductQuery } from '../../schema'
-import { getProductQuery } from '../../utils/queries/get-product-query'
+import { getProductQuery, getProductDetailQuery } from '../../utils/queries/get-product-query'
 
 export default function getProductOperation({
   commerce,
@@ -53,7 +53,8 @@ export default function getProductOperation({
             displayName: og.name,
             values: og.options.map((o) => ({ label: o.name })),
           })),
-          facetValueIds: product.facetValues.map(item=> item.id)
+          facetValueIds: product.facetValues.map(item=> item.id),
+          collectionIds: product.collections.map(item => item.id)
         } as Product
     }
 
diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts
index d83b0276a..9ab352944 100644
--- a/framework/vendure/schema.d.ts
+++ b/framework/vendure/schema.d.ts
@@ -3303,7 +3303,7 @@ export type GetProductQuery = { __typename?: 'Query' } & {
         variants: Array<
           { __typename?: 'ProductVariant' } & Pick<
             ProductVariant,
-            'id' | 'priceWithTax' | 'currencyCode'
+            'id' | 'priceWithTax' | 'currencyCode' | 'price'
           > & {
               options: Array<
                 { __typename?: 'ProductOption' } & Pick<
diff --git a/framework/vendure/utils/queries/get-product-query.ts b/framework/vendure/utils/queries/get-product-query.ts
index f9d4e7002..6db960a96 100644
--- a/framework/vendure/utils/queries/get-product-query.ts
+++ b/framework/vendure/utils/queries/get-product-query.ts
@@ -39,6 +39,25 @@ export const getProductQuery = /* GraphQL */ `
       facetValues {
         id
       }
+      collections {
+        id
+      }
     }
   }
 `
+export const getProductDetailQuery = /* GraphQL */ `
+  query GetProductDetail($slug: String! = "hand-trowel") {
+  product(slug: $slug) {
+    name
+    description
+    variants {
+      price
+      priceWithTax
+    }
+    assets {
+      preview
+      name
+    }
+  }
+}
+`
\ No newline at end of file
diff --git a/package.json b/package.json
index 84a77cf71..8474be667 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.3.1",
     "cookie": "^0.4.1",
+    "dns": "^0.2.2",
     "email-validator": "^2.0.4",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.1.2",
@@ -35,6 +36,7 @@
     "lodash.debounce": "^4.0.8",
     "lodash.random": "^3.2.0",
     "lodash.throttle": "^4.1.1",
+    "net": "^1.0.2",
     "next": "^11.0.0",
     "next-seo": "^4.26.0",
     "next-themes": "^0.0.14",
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index 24901277e..2da14a995 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -12,7 +12,7 @@ import { PromiseWithKey } from 'src/utils/types.utils'
 export default function Slug({ product, relevantProducts, collections }: InferGetStaticPropsType<typeof getStaticProps>) {
 
   return <>
-    <ProductInfoDetail />
+    <ProductInfoDetail productDetail={product} collections={collections}/>
     <RecipeDetail ingredients={INGREDIENT_DATA_TEST} />
     <RecommendedRecipes data={RECIPE_DATA_TEST} />
     <ReleventProducts data={relevantProducts} collections={collections}/>
diff --git a/pages/test.tsx b/pages/test.tsx
index f9075c7e6..9a4db4421 100644
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,11 +1,12 @@
 import commerce from '@lib/api/commerce';
 import { GetStaticPropsContext } from 'next';
+import { ProductCard } from '@commerce/types/product';
 import { Layout, ListProductCardSkeleton } from 'src/components/common';
 
 interface Props {
-  products: any
+  productDetail: ProductCard[],
 }
-export default function Home({ products }: Props) {
+export default function Home({ productDetail }: Props) {
   return (
     <>
       {/* <ListProductCardSkeleton /> */}
diff --git a/src/components/hooks/product/index.tsx b/src/components/hooks/product/index.tsx
new file mode 100644
index 000000000..bfe1abac2
--- /dev/null
+++ b/src/components/hooks/product/index.tsx
@@ -0,0 +1 @@
+export { default as useProductDetail } from './useProductDetail'
\ No newline at end of file
diff --git a/src/components/hooks/product/useProductDetail.tsx b/src/components/hooks/product/useProductDetail.tsx
new file mode 100644
index 000000000..a68b1449d
--- /dev/null
+++ b/src/components/hooks/product/useProductDetail.tsx
@@ -0,0 +1,16 @@
+import { GetProductQuery } from '@framework/schema'
+import { getProductDetailQuery } from '@framework/utils/queries/get-product-query';
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+
+interface ProductDetail {
+  slug: string
+}
+
+const useProductDetail = () => {
+  const { data, ...rest } = useSWR<GetProductQuery>([getProductDetailQuery],gglFetcher)
+  return { productDetail: data?.product, ...rest }
+}
+
+export default useProductDetail
\ No newline at end of file
diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
index d1047bd3a..072c1fd56 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
+++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx
@@ -1,20 +1,28 @@
-import React from 'react'
+import React, { useMemo } from 'react';
 import ProductImgs from './components/ProductImgs/ProductImgs'
 import ProductInfo from './components/ProductInfo/ProductInfo'
 import s from './ProductInfoDetail.module.scss'
+import { Product } from '@commerce/types/product'
+import { Collection } from '@framework/schema'
+import { getCategoryNameFromCollectionId } from 'src/utils/funtion.utils';
 
 interface Props {
-    className?: string
-    children?: any
+    productDetail: Product,
+    collections: Collection[]
 }
 
-const ProductInfoDetail = ({ }: Props) => {
+const ProductInfoDetail = ({ productDetail, collections }: Props) => {
+    const dataWithCategoryName = useMemo(() => {
+            return {
+              ...productDetail,
+              collection: getCategoryNameFromCollectionId(collections, productDetail.collectionIds ? productDetail.collectionIds[0] : undefined)
+            }
+    }, [productDetail, collections])
     return (
         <section className={s.productInfoDetail}>
-            <ProductImgs/>
-            <ProductInfo/>
+            <ProductImgs productImage={productDetail.images}/>
+            <ProductInfo productInfoDetail={dataWithCategoryName}/>
         </section >
     )
 }
-
 export default ProductInfoDetail
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx
index 95236266c..bebee187c 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx
@@ -3,15 +3,15 @@ import { ImgWithLink } from 'src/components/common'
 import s from './ProductImgItem.module.scss'
 
 export interface ProductImgItemProps {
-    src: string
+    url: string
     alt?: string
 }
 
 
-const ProductImgItem = ({ src, alt }: ProductImgItemProps) => {
+const ProductImgItem = ({ url, alt }: ProductImgItemProps) => {
     return (
         <section className={s.productImgItem}>
-            <ImgWithLink src={src} alt={alt} />
+            <ImgWithLink src={url} alt={alt} />
         </section >
     )
 }
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
index 475d0f22e..c5624dc52 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
@@ -3,26 +3,12 @@ import { ResponsiveType } from 'react-multi-carousel'
 import { CarouselCommon } from 'src/components/common'
 import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem'
 import s from './ProductImgs.module.scss'
+import { ProductImage } from '@commerce/types/product';
 
 interface Props {
-    className?: string
-    children?: any,
+    productImage: ProductImage[]
 }
 
-const DATA = [
-    {
-        src: 'https://user-images.githubusercontent.com/76729908/133026929-199799fc-bd75-4445-a24d-15c0e41796eb.png',
-        alt: 'Meat',
-    },
-    {
-        src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
-        alt: 'Broccoli',
-    },
-    {
-        src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png',
-        alt: 'Broccoli',
-    }
-]
 
 const RESPONSIVE: ResponsiveType = {
     desktop: {
@@ -31,11 +17,11 @@ const RESPONSIVE: ResponsiveType = {
       slidesToSlide: 1, // optional, default to 1.
     },
   }
-const ProductImgs = ({ }: Props) => {
+const ProductImgs = ({ productImage }: Props) => {
     return (
         <section className={s.productImgs}>
             <CarouselCommon<ProductImgItemProps>
-                data={DATA}
+                data={productImage}
                 itemKey="product-detail-img"
                 Component={ProductImgItem}
                 responsive={RESPONSIVE}
diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx
index 4abb62568..c3e51d46d 100644
--- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx
+++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx
@@ -1,3 +1,4 @@
+import { Product } from '@commerce/types/product'
 import React from 'react'
 import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common'
 import { IconBuy } from 'src/components/icons'
@@ -5,25 +6,25 @@ import { LANGUAGE } from 'src/utils/language.utils'
 import s from './ProductInfo.module.scss'
 
 interface Props {
-    className?: string
-    children?: any,
+    productInfoDetail: Product
 }
 
-const ProductInfo = ({ }: Props) => {
+const ProductInfo = ({ productInfoDetail }: Props) => {
+    console.log(productInfoDetail)
     return (
         <section className={s.productInfo}>
             <div className={s.info}>
-                <LabelCommon shape='half'>SEAFOOD</LabelCommon>
-                <h2 className={s.heading}>SeaPAk</h2>
+                <LabelCommon shape='half'>{productInfoDetail.collection}</LabelCommon>
+                <h2 className={s.heading}>{productInfoDetail.name}</h2>
                 <div className={s.price}>
                     <div className={s.old}>
-                        <span className={s.number}>Rp 32.000</span>
+                        <span className={s.number}>Rp {productInfoDetail.price}</span>
                         <LabelCommon type='discount'>-15%</LabelCommon>
                     </div>
-                    <div className={s.current}>Rp 27.500</div>
+                    <div className={s.current}>Rp {productInfoDetail.price}</div>
                 </div>
                 <div className={s.description}>
-                    In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley
+                    {productInfoDetail.description}
                 </div>
             </div>
             <div className={s.actions}>
diff --git a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx
index 147115dc2..d1afde538 100644
--- a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx
+++ b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx
@@ -23,7 +23,6 @@ const ReleventProducts = ({ data, collections }: Props) => {
     if (data.length === 0) {
         return null
     }
-
     return (
         <ListProductWithInfo
             title="Relevant Products"