diff --git a/components/AllComponent.js b/components/AllComponent.js
deleted file mode 100644
index da00d8e..0000000
--- a/components/AllComponent.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import React from "react";
-
-// nodejs library that concatenates classes
-import classNames from "classnames";
-
-// nodejs library to set properties for components
-import PropTypes from "prop-types";
-
-// @material-ui/core components
-import { makeStyles } from "@material-ui/core/styles";
-import makeStyles from "@material-ui/core/styles/makeStyles";
-import Button from "@material-ui/core/Button";
-
-// @material-ui/icons
-
-// core components
-import Cardstyles from "assets/jss/nextjs-material-kit/components/cardStyle.js";
-import CardBodystyles from "assets/jss/nextjs-material-kit/components/cardBodyStyle.js";
-import CardFooterstyles from "assets/jss/nextjs-material-kit/components/cardFooterStyle.js";
-import CardHeaderstyles from "assets/jss/nextjs-material-kit/components/cardHeaderStyle.js";
-import buttonStyle from "assets/jss/nextjs-material-kit/components/buttonStyle.js";
-
-const CarduseStyles = makeStyles(Cardstyles);
-const CardBodyuseStyles = makeStyles(CardBodystyles);
-const CardFooteruseStyles = makeStyles(CardFooterstyles);
-const CardHeaderuseStyles = makeStyles(CardHeaderstyles);
-const makeComponentStyles = makeStyles(() => ({
-    ...buttonStyle
-}));
-
-async function Card(props) {
-    const classes = CarduseStyles();
-    const { className, children, plain, carousel, ...rest } = props;
-    const cardClasses = classNames({
-        [classes.card]: true,
-        [classes.cardPlain]: plain,
-        [classes.cardCarousel]: carousel,
-        [className]: className !== undefined
-    });
-    return (
-        <div className={cardClasses} {...rest}>
-        {children}
-        </div>
-    );
-}
-
-async function CardBody(props) {
-    const classes = CardBodyuseStyles();
-    const { className, children, ...rest } = props;
-    const cardBodyClasses = classNames({
-        [classes.cardBody]: true,
-        [className]: className !== undefined
-    });
-    return (
-        <div className={cardBodyClasses} {...rest}>
-        {children}
-        </div>
-    );
-}
-
-async function CardFooter(props) {
-    const classes = CardFooteruseStyles();
-    const { className, children, ...rest } = props;
-    const cardFooterClasses = classNames({
-        [classes.cardFooter]: true,
-        [className]: className !== undefined
-        });
-        return (
-        <div className={cardFooterClasses} {...rest}>
-            {children}
-        </div>
-    );
-}
-
-async function CardHeader(props) {
-    const classes = CardHeaderuseStyles();
-    const { className, children, color, plain, ...rest } = props;
-    const cardHeaderClasses = classNames({
-        [classes.cardHeader]: true,
-        [classes[color + "CardHeader"]]: color,
-        [classes.cardHeaderPlain]: plain,
-        [className]: className !== undefined
-        });
-        return (
-        <div className={cardHeaderClasses} {...rest}>
-            {children}
-        </div>
-    );
-}
-
-Card.propTypes = {
-    className: PropTypes.string,
-    plain: PropTypes.bool,
-    carousel: PropTypes.bool,
-    children: PropTypes.node
-};
-
-CardBody.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-};
-
-CardFooter.propTypes = {
-    className: PropTypes.string,
-    children: PropTypes.node
-};
-
-CardHeader.propTypes = {
-    className: PropTypes.string,
-    color: PropTypes.oneOf(["warning", "success", "danger", "info", "primary"]),
-    plain: PropTypes.bool,
-    children: PropTypes.node
-};
-
-module.exports = {
-	Card: Card,
-    CardBody: CardBody,
-    CardFooter: CardFooter,
-    CardHeader: CardHeader,
-};
diff --git a/components/Header/HeaderLinks.js b/components/Header/HeaderLinks.js
index dacce98..fa2b5e0 100644
--- a/components/Header/HeaderLinks.js
+++ b/components/Header/HeaderLinks.js
@@ -49,7 +49,22 @@ export default function HeaderLinks(props) {
           buttonIcon={Apps}
           dropdownList={[
             <Link href="/product">
-              <a className={classes.dropdownLink}>Product</a>
+              <a className={classes.dropdownLink}>Motor</a>
+            </Link>,
+            <Link href="/product">
+              <a className={classes.dropdownLink}>YGP</a>
+            </Link>,
+            <Link href="/product">
+              <a className={classes.dropdownLink}>Yamalube</a>
+            </Link>,
+            <Link href="/product">
+              <a className={classes.dropdownLink}>Helmet</a>
+            </Link>,
+            <Link href="/product">
+              <a className={classes.dropdownLink}>Apparel</a>
+            </Link>,
+            <Link href="/product">
+              <a className={classes.dropdownLink}>Accessories</a>
             </Link>,
             <Link href="https://booking.thamrin.co.id/">
               <a className={classes.dropdownLink}>Service</a>
diff --git a/package.json b/package.json
index 5d81bc1..d402687 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,7 @@
     "react-paginate": "^7.1.0",
     "react-slick": "0.25.2",
     "react-swipeable-views": "0.13.9",
-    "rsuite": "^4.8.6",
+    "rsuite": "^4.9.2",
     "styled-components": "5.1.0",
     "webpack": "4.43.0"
   }
diff --git a/pages-sections/carrer/carrer_details.js b/pages-sections/carrer/carrer_details.js
index 431bd50..98afeab 100644
--- a/pages-sections/carrer/carrer_details.js
+++ b/pages-sections/carrer/carrer_details.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { makeStyles } from "@material-ui/core/styles";
+import ReactHtmlParser from "react-html-parser";
 
-import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
 import Card from "components/Card/Card.js";
 import CardBody from "components/Card/CardBody.js";
 import CardHeader from "components/Card/CardHeader.js";
@@ -16,9 +16,7 @@ const DataCarrer = function ({ backend, detailcarrer, ...props }) {
                     <img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
                 </div>
                 <h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5>
-                <h5 align="center" align="justify">
-                    parse({data.description})
-                </h5>
+                <h5 align="justify">{ReactHtmlParser(data.description)}</h5>
             </CardBody>
         </Card>
         );
diff --git a/pages-sections/product/product_details.js b/pages-sections/product/product_details.js
index 288af25..7011316 100644
--- a/pages-sections/product/product_details.js
+++ b/pages-sections/product/product_details.js
@@ -1,6 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { makeStyles } from "@material-ui/core/styles";
+import ReactHtmlParser from "react-html-parser";
 
 import Dashboard from "@material-ui/icons/Dashboard";
 import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";
@@ -16,6 +17,7 @@ import CardFooter from "components/Card/CardFooter.js";
 import Button from "components/CustomButtons/Button.js";
 import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";
 import Carousel from "react-slick";
+import Icon from "@material-ui/core/Icon";
 
 const useStyles = makeStyles(styles);
 
@@ -27,28 +29,49 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
       classes.imgRoundedCircle,
       classes.imgFluid
     );
+    const settings = {
+      dots: true,
+      infinite: true,
+      speed: 500,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      autoplay: true,
+      time: 5
+    };
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
     const Productdetails = detailproduct.map((data) => {
       return (
         <div>
         <GridContainer>
-          <Grid>
-            <div className={classes.section}>
-              <div className={classes.container}>
-                <Card style={{width:"700px", height:"400px"}}>
-                    <div>
-                      <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
-                    </div>
-                </Card>
+            <Grid fluid xs={5}> 
+            <div className={classes.section} id="notifications">
+              <div className={classes.section}>
+                <div className={classes.container}>
+                  <GridContainer>
+                    <GridItem className={classes.marginAuto}>
+                    <Card carousel>
+                      <Carousel {...settings}>
+                        <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
+                        <img className={navImageClasses} width="300px" alt="First slide" src={`${backend}${data.img[1]["url"]}`} />
+                      </Carousel>
+                    </Card>
+                    </GridItem>
+                  </GridContainer>
+                </div>
               </div>
             </div>
-          </Grid>
-          <Grid style={{padding:"40px", marginTop:"-30px"}}>
-            <h3>{data.name}</h3>
-            <h3>Rp.{data.price}</h3>
-            <hr></hr>
-            <p>{data.description} ---- Stock Unit : {data.stock}</p>
-          </Grid>
+            </Grid>
+            <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+              <h3>{data.name}</h3>
+              <h3>Rp.{data.price} - Stock Unit : {data.stock}</h3>
+              <hr></hr>
+              <div align="justify">
+                <p>{ReactHtmlParser(data.description)}</p>
+              </div>
+              <Button color="info" round href={"/product_detail?s="+data.id} >
+                <Icon className={classes.icons}>shopping_cart</Icon>Add To Cart
+              </Button>
+            </Grid>
         </GridContainer>
         <GridContainer justify="center">
           <GridItem>
@@ -61,20 +84,44 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                   tabButton: "Overview",
                   tabIcon: Dashboard,
                   tabContent: (
-                    <GridContainer justify="center">
-                      <GridItem>
-                        {data.overview}
-                      </GridItem>
+                    <div>
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
+                      <Grid fluid xs={5}> 
+                        <div className={classes.section} id="notifications">
+                          <img className={navImageClasses} width="50px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
+                        </div>
+                      </Grid>
+                      <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                        <div align="justify">
+                          <p>{ReactHtmlParser(data.description)}</p>
+                        </div>
+                      </Grid>
                     </GridContainer>
+                    <hr></hr>
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
+                      <Grid fluid xs={5}> 
+                        <div className={classes.section} id="notifications">
+                          <img className={navImageClasses} width="50px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
+                        </div>
+                      </Grid>
+                      <Grid xs={7} style={{padding:"40px", marginTop:"-30px"}}>
+                        <div align="justify">
+                          <p>{ReactHtmlParser(data.description)}</p>
+                        </div>
+                      </Grid>
+                    </GridContainer>
+                    </div>
                   ),
                 },
                 {
                   tabButton: "Specification",
                   tabIcon: Dashboard,
                   tabContent: (
-                    <GridContainer justify="center">
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                       <GridItem>
-                        {data.specification}
+                        <div align="justify">
+                          {ReactHtmlParser(data.specification)}
+                        </div>
                       </GridItem>
                     </GridContainer>
                   ),
@@ -83,9 +130,11 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                   tabButton: "Accessories",
                   tabIcon: Dashboard,
                   tabContent: (
-                    <GridContainer justify="center">
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                       <GridItem>
-                        {data.accessories}
+                        <div align="justify">
+                          {ReactHtmlParser(data.description)}
+                        </div>
                       </GridItem>
                     </GridContainer>
                   ),
@@ -94,7 +143,7 @@ const DataProduct = function ({ backend, detailproduct, ...props })  {
                   tabButton: "Film",
                   tabIcon: Dashboard,
                   tabContent: (
-                    <GridContainer justify="center">
+                    <GridContainer justify="center" style={{padding:"40px", marginTop:"-30px"}}>
                       <GridItem>
                         <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} />
                       </GridItem>
diff --git a/pages/_document.js b/pages/_document.js
index 4880d27..71095f3 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -13,7 +13,7 @@ class MyDocument extends Document {
             content="width=device-width, initial-scale=1, shrink-to-fit=no"
           />
           <meta name="theme-color" content="#000000" />
-          <link rel="shortcut icon" href={require("assets/img/favicon.png")} />
+          <link rel="shortcut icon" href={require("assets/img/favicons.png")} />
           <link
             rel="apple-touch-icon"
             sizes="76x76"
diff --git a/pages/home.js b/pages/home.js
index f5530f7..1838f58 100644
--- a/pages/home.js
+++ b/pages/home.js
@@ -4,16 +4,8 @@ import { makeStyles } from "@material-ui/core/styles";
 
 import Header from "components/Header/Header.js";
 import HeaderLinks from "components/Header/HeaderLinks.js";
-import Footer from "components/Footer/Footer.js";
-import Parallax from "components/Parallax/Parallax.js";
-import styles from "assets/jss/nextjs-material-kit/pages/components.js";
-
-
-import GridContainer from "components/Grid/GridContainer.js";
-import GridItem from "components/Grid/GridItem.js";
 import Parallax from "components/Parallax/Parallax.js";
 import styles from "assets/jss/nextjs-material-kit/pages/components.js";
-import Button from "components/CustomButtons/Button.js";
 import Footer from "components/Footer/Footer.js";
 import GetbusinessPartners from "../api/home/businessPartner.js";
 import Getservices from "../api/home/service.js";
diff --git a/yarn.lock b/yarn.lock
index 90172dc..b20c543 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6637,10 +6637,10 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-rsuite-table@^3.14.1:
-  version "3.14.1"
-  resolved "https://registry.yarnpkg.com/rsuite-table/-/rsuite-table-3.14.1.tgz#2bb682a2b7bae7a94f990b6aa8e667a0dc4f96c6"
-  integrity sha512-4XidYEG21gAiezBz+2HqOSf+hkjZsuM6EMqglcHAUPcxvj1/uWPKHkpL7PCyLzP3uVvr2dNzj4Z/p/Io9XSjDQ==
+rsuite-table@^3.14.3:
+  version "3.14.3"
+  resolved "https://registry.yarnpkg.com/rsuite-table/-/rsuite-table-3.14.3.tgz#f041908d60df5af25d2b9be7c7eae65361b84deb"
+  integrity sha512-F7LvKfAXH2ZpnXT41PawYUxytQt8S+CgTUq4Co9niD1cmRnIX3qADip2T18JjFiQKkjCP1ajs613XgFLgn/W3g==
   dependencies:
     "@babel/runtime" "^7.8.4"
     classnames "^2.2.5"
@@ -6648,10 +6648,10 @@ rsuite-table@^3.14.1:
     element-resize-event "^3.0.2"
     lodash "^4.17.5"
 
-rsuite@^4.8.6:
-  version "4.8.6"
-  resolved "https://registry.yarnpkg.com/rsuite/-/rsuite-4.8.6.tgz#51090caf73c5f9a827bd0ff9a2d462365dbd2726"
-  integrity sha512-tOIQyduKbSrRyVb3IH2qTnRH69uzvhCb1ak2EDAIYoB2EgmGEXnGYp7nT7VwWHIF/hs3HY6E01KToMfvtwmwaA==
+rsuite@^4.9.2:
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/rsuite/-/rsuite-4.9.2.tgz#6591c11a35ec5ee5520cbb1a4566c88f03038ad0"
+  integrity sha512-+dSJNZqtmsCe3+vucUdxdKt9MSQwU6KKrGdbCsCiRz9wLSkoUvg0MLBOw0eEixZssVg1dWPRFG54qhv5Ru7c3Q==
   dependencies:
     "@babel/runtime" "^7.8.4"
     classnames ">=2.0.0"
@@ -6663,7 +6663,7 @@ rsuite@^4.8.6:
     react-lifecycles-compat "^3.0.4"
     react-virtualized "^9.21.0"
     recompose "^0.30.0"
-    rsuite-table "^3.14.1"
+    rsuite-table "^3.14.3"
     schema-typed "^1.5.1"
 
 run-queue@^1.0.0, run-queue@^1.0.3: