diff --git a/.env-sample b/.env-sample
index fb4958e..7647f47 100644
--- a/.env-sample
+++ b/.env-sample
@@ -6,4 +6,9 @@ BACKEND_SERVER_URI =http://127.0.0.1:14005
 //live
 API_URL=http://172.16.1.8:14009
 API_GRAPHQL_URI=http://172.16.1.8:14009/graphql
-BACKEND_SERVER_URI=http://172.16.1.8:14009
\ No newline at end of file
+BACKEND_SERVER_URI=http://172.16.1.8:14009
+
+//strapi live server
+API_URL=https://strapisite.thamrin.xyz
+API_GRAPHQL_URI=https://strapisite.thamrin.xyz/graphql
+BACKEND_SERVER_URI =https://strapisite.thamrin.xyz
\ No newline at end of file
diff --git a/api/dealer/dealer.js b/api/dealer/dealer.js
new file mode 100644
index 0000000..105c40d
--- /dev/null
+++ b/api/dealer/dealer.js
@@ -0,0 +1,52 @@
+import apollo from "../../lib/apollo.js";
+
+async function GetDealers(token="", start = 0) {
+	var res = await apollo.query(
+        `
+            query($start: Int!) {
+                dealers(limit:6,start:$start)
+                {
+                    name
+                    kota_dealer
+                    address
+                    telp
+                    email
+                    location
+                }
+            }
+        `,
+            token,
+        {
+            start: start,
+        }
+	);
+	return res;
+}
+
+async function GetDealersDetails(token="") {
+	var res = await apollo.query(
+        `
+            query($input: ID!) {
+                dealers(where:{id:$input})
+                {
+                    name
+                    kota_dealer
+                    address
+                    telp
+                    email
+                    location
+                }
+            }
+        `,
+            token,
+            {	
+                "input": id
+            }
+	);
+	return res;
+}
+
+module.exports = {
+	GetDealers: GetDealers,
+    GetDealersDetails: GetDealersDetails,
+};
\ No newline at end of file
diff --git a/assets/img/Promotion_2-1.jpg b/assets/img/Promotion_2-1.jpg
index d2c8111..82c1a1a 100644
Binary files a/assets/img/Promotion_2-1.jpg and b/assets/img/Promotion_2-1.jpg differ
diff --git a/assets/img/dealer.png b/assets/img/dealer.png
new file mode 100644
index 0000000..861b10b
Binary files /dev/null and b/assets/img/dealer.png differ
diff --git a/assets/img/dealers.png b/assets/img/dealers.png
new file mode 100644
index 0000000..33897a4
Binary files /dev/null and b/assets/img/dealers.png differ
diff --git a/assets/img/png-transparent-white-crew-neck-t-shirt-shetland-sheepdog-t-shirt-hoodie-polo-shirt-tshirt-template-angle-white-etsy-thumbnail.png b/assets/img/png-transparent-white-crew-neck-t-shirt-shetland-sheepdog-t-shirt-hoodie-polo-shirt-tshirt-template-angle-white-etsy-thumbnail.png
deleted file mode 100644
index 66168c4..0000000
Binary files a/assets/img/png-transparent-white-crew-neck-t-shirt-shetland-sheepdog-t-shirt-hoodie-polo-shirt-tshirt-template-angle-white-etsy-thumbnail.png and /dev/null differ
diff --git a/assets/img/ygp.jpg b/assets/img/ygp.jpg
deleted file mode 100644
index f5a1528..0000000
Binary files a/assets/img/ygp.jpg and /dev/null differ
diff --git a/components/Footer/Footer.js b/components/Footer/Footer.js
index 15ff705..1a59a2a 100644
--- a/components/Footer/Footer.js
+++ b/components/Footer/Footer.js
@@ -36,45 +36,40 @@ export default function Footer(props) {
             </ListItem> */}
             <ListItem className={classes.inlineBlock}>
               <a
-                href="https://www.creative-tim.com/?ref=njsmk-footer"
+                href="/home"
                 className={classes.block}
-                target="_blank"
               >
                 Home
               </a>
             </ListItem>
             <ListItem className={classes.inlineBlock}>
               <a
-                href="https://www.creative-tim.com/presentation?ref=njsmk-footer"
+                href="/product/product"
                 className={classes.block}
-                target="_blank"
               >
                 Product
               </a>
             </ListItem>
             <ListItem className={classes.inlineBlock}>
               <a
-                href="http://blog.creative-tim.com/?ref=njsmk-footer"
+                href="/latestsnews"
                 className={classes.block}
-                target="_blank"
               >
                 Latest News
               </a>
             </ListItem>
             <ListItem className={classes.inlineBlock}>
               <a
-                href="https://www.creative-tim.com/license?ref=njsmk-footer"
+                href="/carrer"
                 className={classes.block}
-                target="_blank"
               >
                 Carrer
               </a>
             </ListItem>
             <ListItem className={classes.inlineBlock}>
               <a
-                href="https://www.creative-tim.com/license?ref=njsmk-footer"
+                href="/about_us/aboutus"
                 className={classes.block}
-                target="_blank"
               >
                 About Us
               </a>
diff --git a/components/Header/HeaderLinks.js b/components/Header/HeaderLinks.js
index 80f8dae..2d687a9 100644
--- a/components/Header/HeaderLinks.js
+++ b/components/Header/HeaderLinks.js
@@ -72,6 +72,13 @@ export default function HeaderLinks(props) {
         />
       </ListItem>
       <ListItem className={classes.listItem}>
+        <Link href="/dealers">
+          <Button color="transparent" className={classes.navLink}>
+            <Icon className={classes.icons}>event</Icon> Dealers
+          </Button>
+        </Link>
+      </ListItem>
+      <ListItem className={classes.listItem}>
         <Link href="/latestnews">
           <Button color="transparent" className={classes.navLink}>
             <Icon className={classes.icons}>event</Icon> Latest News
@@ -141,7 +148,7 @@ export default function HeaderLinks(props) {
           <Chart className={classes.icons} />
         </Button>
       </ListItem>
-      <ListItem className={classes.listItem}>
+      {/* <ListItem className={classes.listItem}>
         <Button
           href="/login"
           className={classes.registerNavLink}
@@ -150,7 +157,7 @@ export default function HeaderLinks(props) {
         >
           <Icon className={classes.icons}>input</Icon> Login
         </Button>
-      </ListItem>
+      </ListItem> */}
     </List>
   );
 }
\ No newline at end of file
diff --git a/pages-sections/dealers/dealers.js b/pages-sections/dealers/dealers.js
new file mode 100644
index 0000000..4d22678
--- /dev/null
+++ b/pages-sections/dealers/dealers.js
@@ -0,0 +1,56 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+
+import GridContainer from "components/Grid/GridContainer.js";
+import Grid from '@material-ui/core/Grid';
+import Card from "components/Card/Card.js";
+import CardBody from "components/Card/CardBody.js";
+import CardHeader from "components/Card/CardHeader.js";
+import Quote from "components/Typography/Quote.js"
+import Icon from "@material-ui/core/Icon";
+import Button from "components/CustomButtons/Button.js";
+import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
+
+const useStyles = makeStyles(styles);
+const DataDealer = function ({ backend, dealers, ...props })  {
+    const classes = useStyles();
+    const Dealers = dealers.map((data) => {
+        return (
+        <Grid style={{width:"400px", padding:"30px"}}>
+            <Card>
+                <CardHeader color="danger"><div align="center">{data.name}</div></CardHeader>
+                <CardBody>
+                    <Quote
+                    text={data.kota_dealer}
+                    author={data.address}
+                    />
+                    <Quote
+                    text={data.telp}
+                    author={data.email}
+                    />
+                    <div align="center">
+                        <Button color="danger" round href={data.location} target="_blank">
+                            <Icon className={classes.icons}>room</Icon>View Location
+                        </Button>
+                    </div>
+                </CardBody>
+            </Card>
+        </Grid>
+        );
+        })
+        return (
+        <div className={classes.section} id="notifications">
+            <div align="center">
+
+                <h2>Dealers & Service</h2>
+            </div>
+            <div>
+            <GridContainer justify="center">
+                {Dealers}
+            </GridContainer>
+            </div>
+        </div>
+    );
+}
+
+export default DataDealer;
\ No newline at end of file
diff --git a/pages-sections/product/product.js b/pages-sections/product/product.js
index b583e67..8643679 100644
--- a/pages-sections/product/product.js
+++ b/pages-sections/product/product.js
@@ -217,7 +217,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
                 color="primary"
                 tabs={[
                   {
-                    tabButton: "Yamaha",
+                    tabButton: "Maxi Yamaha",
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
@@ -226,7 +226,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
                     ),
                   },
                   {
-                    tabButton: "Suzuki",
+                    tabButton: "Matic",
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
@@ -235,7 +235,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
                     ),
                   },
                   {
-                    tabButton: "Honda",
+                    tabButton: "Naked Bike",
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
@@ -244,7 +244,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
                     ),
                   },
                   {
-                    tabButton: "Hino",
+                    tabButton: "Sport",
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
@@ -253,7 +253,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
                     ),
                   },
                   {
-                    tabButton: "Mercedes Benz",
+                    tabButton: "Off Road",
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
@@ -262,7 +262,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
                     ),
                   },
                   {
-                    tabButton: "BPR Berkat Sejati",
+                    tabButton: "Moped",
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
@@ -271,7 +271,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
                     ),
                   },
                   {
-                    tabButton: "Emilia Hotel",
+                    tabButton: "Monster Energy MotoGP",
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
@@ -280,7 +280,25 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
                     ),
                   },
                   {
-                    tabButton: "Thamrin Homes",
+                    tabButton: "CBU",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {Producthomes}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "ATV",
+                    tabIcon: Dashboard,
+                    tabContent: (
+                      <GridContainer justify="center">
+                        {Producthomes}
+                      </GridContainer>
+                    ),
+                  },
+                  {
+                    tabButton: "Power Product",
                     tabIcon: Dashboard,
                     tabContent: (
                       <GridContainer justify="center">
diff --git a/pages-sections/product/yamalube_details.js b/pages-sections/product/yamalube_details.js
index cacb1cc..d76ebe3 100644
--- a/pages-sections/product/yamalube_details.js
+++ b/pages-sections/product/yamalube_details.js
@@ -68,17 +68,17 @@ const DetailDataYamalube = function ({ backend, detailyamalube, ...props })  {
                         </ul>
                     </Grid>
                 </GridContainer>
-                {/* <GridContainer>
-                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
-                        <img className={navImageClasses} src={`${backend}${data.img_relate1["url"]}`} height="165px" width="200px"/>
+                <GridContainer>
+                    <Grid className={classes.marginAuto} style={{padding:"11px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
                     </Grid>
-                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
-                        <img className={navImageClasses} src={`${backend}${data.img_relate2["url"]}`} height="165px" width="200px"/>
+                    <Grid className={classes.marginAuto} style={{padding:"11px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
                     </Grid>
-                    <Grid className={classes.marginAuto} style={{padding:"10px", marginTop:"-30px"}}>
-                        <img className={navImageClasses} src={`${backend}${data.img_relate3["url"]}`} height="165px" width="200px"/>
+                    <Grid className={classes.marginAuto} style={{padding:"11px"}}>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
                     </Grid>
-                </GridContainer> */}
+                </GridContainer>
                 <div align="center">
                     <hr></hr>
                     <h2>Deskripsi</h2>
diff --git a/pages-sections/product/ygp_details.js b/pages-sections/product/ygp_details.js
index f0886c7..a5fcf8f 100644
--- a/pages-sections/product/ygp_details.js
+++ b/pages-sections/product/ygp_details.js
@@ -58,13 +58,13 @@ const DetailDataYGP = function ({ backend, detailygp, ...props })  {
                 </GridContainer>
                 <GridContainer>
                     <Grid className={classes.marginAuto} style={{padding:"11px"}}>
-                        <img className={navImageClasses} src={`${backend}${data.img_relate1["url"]}`} height="165px" width="200px"/>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
                     </Grid>
                     <Grid className={classes.marginAuto} style={{padding:"11px"}}>
-                        <img className={navImageClasses} src={`${backend}${data.img_relate2["url"]}`} height="165px" width="200px"/>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
                     </Grid>
                     <Grid className={classes.marginAuto} style={{padding:"11px"}}>
-                        <img className={navImageClasses} src={`${backend}${data.img_relate3["url"]}`} height="165px" width="200px"/>
+                        <img className={navImageClasses} src={`${backend}${data.img["url"]}`} height="165px" width="200px"/>
                     </Grid>
                 </GridContainer>
                 <div align="center">
diff --git a/pages/dealers.js b/pages/dealers.js
new file mode 100644
index 0000000..3e85d3b
--- /dev/null
+++ b/pages/dealers.js
@@ -0,0 +1,55 @@
+import React from "react";
+import classNames from "classnames";
+import { makeStyles } from "@material-ui/core/styles";
+
+import Header from "components/Header/Header.js";
+import HeaderLinks from "components/Header/HeaderLinks.js";
+import Parallax from "components/Parallax/Parallax.js";
+import styles from "assets/jss/nextjs-material-kit/pages/components.js";
+import Footer from "components/Footer/Footer.js";
+import Getdealer from "../api/dealer/dealer.js";
+import DataSnackbarContent from "../pages-sections/snackbar.js";
+import DataDealers from "../pages-sections/dealers/dealers.js";
+
+const useStyles = makeStyles(styles);
+const Dealers = function ({ backend, dealers, ...props }) {
+    const classes = useStyles();
+    const { ...rest } = props;
+
+    return (
+        <div>
+        <Header
+            rightLinks={<HeaderLinks/>}
+            fixed
+            color="info"
+            changeColorOnScroll={{
+            height: 400,
+            color: "white",
+            }}
+            {...rest}
+        />
+        <Parallax image={require("assets/img/dealers.png")}styles={{ marginTop: "50px" }}/>
+        <div className={classNames(classes.main, classes.mainRaised)}>
+            <DataSnackbarContent />
+            <DataDealers dealers={dealers} backend={backend} />
+        </div>
+        <Footer />
+        </div>
+    );
+};
+
+    export async function getServerSideProps(context) {
+        var dealers = [];
+        const backend = process.env.BACKEND_SERVER_URI;
+
+        var res = await Getdealer.GetDealers();
+        if (res["STATUS"] === 1) {
+            dealers = res["DATA"]["dealers"];
+        }
+
+        return {
+            props: { dealers, backend }, // will be passed to the page component as props
+        };
+    }
+
+export default Dealers;
diff --git a/pages/home.js b/pages/home.js
index a0b070e..847bf7f 100644
--- a/pages/home.js
+++ b/pages/home.js
@@ -31,7 +31,7 @@ const Home = function ({
   return (
     <div>
       <Header
-        rightLinks={<HeaderLinks />}
+        rightLinks={<HeaderLinks/>}
         fixed
         color="info"
         changeColorOnScroll={{
@@ -40,7 +40,7 @@ const Home = function ({
         }}
         {...rest}
       />
-      <Parallax image={require("assets/img/welcome.png")}styles={{ marginTop: "50px" }}/>
+      <Parallax image={require("assets/img/Promotion_2-1.jpg")}styles={{ marginTop: "50px" }}/>
       <div className={classNames(classes.main, classes.mainRaised)}>
         <DataSnackbarContent />
         <CoreValue />