diff --git a/.env-sample b/.env-sample
index c888f22..bde59f8 100644
--- a/.env-sample
+++ b/.env-sample
@@ -1,2 +1,3 @@
 API_URL=http://127.0.0.1:1337
-graphql_uri=http://127.0.0.1:1337/graphql
\ No newline at end of file
+graphql_uri=http://127.0.0.1:1337/graphql
+BACKEND_SERVER_URI =http://127.0.0.1:1337
\ No newline at end of file
diff --git a/api/product/product.js b/api/product/product.js
index 7eff69a..f0e9c45 100644
--- a/api/product/product.js
+++ b/api/product/product.js
@@ -43,6 +43,12 @@ async function GetDetailProduct(token="") {
         {
           name
         }
+        overview
+        specification
+        accessories
+        film{
+          url
+        }
       }
     }	`,
 		token
@@ -67,6 +73,12 @@ async function GetProductYamaha(token="") {
         {
           name
         }
+        overview
+        specification
+        accessories
+        film{
+          url
+        }
       }
     }`,
 		token
@@ -91,6 +103,12 @@ async function GetProductSuzuki(token="") {
         {
           name
         }
+        overview
+        specification
+        accessories
+        film{
+          url
+        }
       }
     }`,
 		token
@@ -115,6 +133,12 @@ async function GetProductHonda(token="") {
         {
           name
         }
+        overview
+        specification
+        accessories
+        film{
+          url
+        }
       }
     }`,
 		token
@@ -139,6 +163,12 @@ async function GetProductHino(token="") {
         {
           name
         }
+        overview
+        specification
+        accessories
+        film{
+          url
+        }
       }
     }`,
 		token
@@ -163,6 +193,12 @@ async function GetProductMercedes(token="") {
         {
           name
         }
+        overview
+        specification
+        accessories
+        film{
+          url
+        }
       }
     }`,
 		token
@@ -187,6 +223,12 @@ async function GetProductBPR(token="") {
         {
           name
         }
+        overview
+        specification
+        accessories
+        film{
+          url
+        }
       }
     }`,
 		token
@@ -211,6 +253,12 @@ async function GetProductEmilia(token="") {
         {
           name
         }
+        overview
+        specification
+        accessories
+        film{
+          url
+        }
       }
     }`,
 		token
@@ -235,6 +283,12 @@ async function GetProductHomes(token="") {
         {
           name
         }
+        overview
+        specification
+        accessories
+        film{
+          url
+        }
       }
     }`,
 		token
diff --git a/pages-sections/product/product_details.js b/pages-sections/product/product_details.js
index ed41108..ed65441 100644
--- a/pages-sections/product/product_details.js
+++ b/pages-sections/product/product_details.js
@@ -37,6 +37,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
     const Productdetails = detailproduct.map((data) => {
       console.log(data);
       return (
+        <div>
         <GridContainer>
           <Grid>
             <div className={classes.section}>
@@ -55,27 +56,12 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
             <hr></hr>
             <p>{data.description}</p>
           </Grid>
-        </GridContainer>,
-        <GridContainer>
-          <GridItem>
-
-          </GridItem>
-        </GridContainer> 
-      );
-    })
-    return (
-      <Card className={classes.textCenter}>
-      <div align="center">
-        <CardHeader color="info">Product Detail</CardHeader>
-      </div>
-      <CardBody>
-          <div> 
-            {Productdetails[0]}
-          </div>
-          <GridContainer>
+        </GridContainer>
+        <GridContainer justify="center">
           <GridItem>
-            <NavPills
+          <NavPills
               color="primary"
+              align="center"
               tabs={[
                 {
                   tabButton: "Overview",
@@ -83,6 +69,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                   tabContent: (
                     <GridContainer justify="center">
                       <GridItem>
+                        {data.overview}
                       </GridItem>
                     </GridContainer>
                   ),
@@ -93,6 +80,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                   tabContent: (
                     <GridContainer justify="center">
                       <GridItem>
+                        {data.specification}
                       </GridItem>
                     </GridContainer>
                   ),
@@ -103,6 +91,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                   tabContent: (
                     <GridContainer justify="center">
                       <GridItem>
+                        {data.accessories}
                       </GridItem>
                     </GridContainer>
                   ),
@@ -113,16 +102,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                   tabContent: (
                     <GridContainer justify="center">
                       <GridItem>
-                      </GridItem>
-                    </GridContainer>
-                  ),
-                },
-                {
-                  tabButton: "Credit Simulation",
-                  tabIcon: Dashboard,
-                  tabContent: (
-                    <GridContainer justify="center">
-                      <GridItem>
+                        <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
                       </GridItem>
                     </GridContainer>
                   ),
@@ -131,6 +111,18 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
             />
           </GridItem>
         </GridContainer>
+        </div> 
+      );
+    })
+    return (
+      <Card className={classes.textCenter}>
+      <div align="center">
+        <CardHeader color="info">Product Detail</CardHeader>
+      </div>
+      <CardBody>
+          <div> 
+            {Productdetails[0]}
+          </div>
       </CardBody>
       <CardFooter className={classes.textMuted} textAlign="center">
         © 2020 , All Right Reserved by @Thamrin Brother Company