diff --git a/api/product/helmet.js b/api/product/helmet.js
new file mode 100644
index 0000000..db7977e
--- /dev/null
+++ b/api/product/helmet.js
@@ -0,0 +1,183 @@
+import apollo from "../../lib/apollo.js";
+
+async function GetHelmetRConcepts(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            helmets(where: { category: "RCONCEPTS" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetHelmetMTX(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            helmets(where: { category: "MTX" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetHelmetExtreme(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            helmets(where: { category: "EXTREME" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetHelmetRanger(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            helmets(where: { category: "RANGER" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetHelmetFighter(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            helmets(where: { category: "FIGHTER" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetHelmetSwirl(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            helmets(where: { category: "SWIRL" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetHelmetClassic(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            helmets(where: { category: "CLS" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+async function GetHelmetUno(filter, token="") {
+	var res = await apollo.query(
+		`
+        query {
+            helmets(where: { category: "UNO" ${(filter!="")?`name: "${filter}"`:""}}) {
+                id
+                name
+                price
+                img {
+                    url
+                }
+            }
+        }`,
+		token
+	);
+	return res;
+}
+
+
+async function GetDetailHelmet(id, token="") {
+	var res = await apollo.query(
+		`
+        query($input: ID!){
+            helmets(where:{id:$input})
+            {
+                id
+                name
+                description
+                price
+                part_code
+                img {
+                    url
+                }
+                stock
+            }
+        }	`,
+            token, 
+        {	
+        "input": id
+        }
+	);
+	return res;
+}
+
+module.exports = {
+    GetHelmetRConcepts:GetHelmetRConcepts,
+    GetHelmetMTX:GetHelmetMTX,
+    GetHelmetExtreme:GetHelmetExtreme,
+    GetHelmetRanger:GetHelmetRanger,
+    GetHelmetFighter:GetHelmetFighter,
+    GetHelmetSwirl:GetHelmetSwirl,
+    GetHelmetClassic:GetHelmetClassic,
+    GetHelmetUno:GetHelmetUno,
+    GetDetailHelmet:GetDetailHelmet,
+};
\ No newline at end of file
diff --git a/pages-sections/product/helmet.js b/pages-sections/product/helmet.js
index 9c1ea60..88b75a8 100644
--- a/pages-sections/product/helmet.js
+++ b/pages-sections/product/helmet.js
@@ -9,10 +9,12 @@ import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/noti
 import Card from "components/Card/Card.js";
 import CardBody from "components/Card/CardBody.js";
 import GridContainer from "components/Grid/GridContainer.js";
+import SnackbarContent from "components/Snackbar/SnackbarContent.js";
+import { MoveToInboxOutlined } from "@material-ui/icons";
 
 const useStyles = makeStyles(styles);
 
-const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }) {
+const DataHelmet = function ({ selected, handleName, backend, helmet, mtx, extreme, ranger, fighter, swirl, classic, uno, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     const imageClasses = classNames(
@@ -21,7 +23,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }
         classes.imgFluid
     );
     const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
-    const ProductHelmet = helmet.map((data) => {
+    const ProductHelmetRConcepts = helmet.map((data) => {
         return (      
             <div style={{padding:"40px"}}>
                 <img
@@ -31,7 +33,161 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }
                     className={navImageClasses}
                 />
                 <div align="center">
-                <h3>{data.name}</h3>
+                <h4>{data.name}</h4>
+                <h4>Rp.{data.price}</h4>
+                <Button 
+                    color="info" round
+                    href={"/product/helmet_details?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    const ProductHelmetMTX = mtx.map((data) => {
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
+                />
+                <div align="center">
+                <h4>{data.name}</h4>
+                <h4>Rp.{data.price}</h4>
+                <Button 
+                    color="info" round
+                    href={"/product/helmet_details?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    const ProductHelmetExtreme = extreme.map((data) => {
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
+                />
+                <div align="center">
+                <h4>{data.name}</h4>
+                <h4>Rp.{data.price}</h4>
+                <Button 
+                    color="info" round
+                    href={"/product/helmet_details?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    const ProductHelmetRanger = ranger.map((data) => {
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
+                />
+                <div align="center">
+                <h4>{data.name}</h4>
+                <h4>Rp.{data.price}</h4>
+                <Button 
+                    color="info" round
+                    href={"/product/helmet_details?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    const ProductHelmetFighter = fighter.map((data) => {
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
+                />
+                <div align="center">
+                <h4>{data.name}</h4>
+                <h4>Rp.{data.price}</h4>
+                <Button 
+                    color="info" round
+                    href={"/product/helmet_details?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    const ProductHelmetSwirl = swirl.map((data) => {
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
+                />
+                <div align="center">
+                <h4>{data.name}</h4>
+                <h4>Rp.{data.price}</h4>
+                <Button 
+                    color="info" round
+                    href={"/product/helmet_details?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    const ProductHelmetClassic = classic.map((data) => {
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
+                />
+                <div align="center">
+                <h4>{data.name}</h4>
+                <h4>Rp.{data.price}</h4>
+                <Button 
+                    color="info" round
+                    href={"/product/helmet_details?s="+data.id}
+                >
+                    <Icon className={classes.icons}>open_in_new</Icon>Detail Product
+                </Button>
+                </div>
+            </div>
+        );
+    })
+    const ProductHelmetUno = uno.map((data) => {
+        return (      
+            <div style={{padding:"40px"}}>
+                <img
+                    alt="..."
+                    style={{ height: "150px", display: "block" }}
+                    src={`${backend}${data.img["url"]}`}
+                    className={navImageClasses}
+                />
+                <div align="center">
+                <h4>{data.name}</h4>
                 <h4>Rp.{data.price}</h4>
                 <Button 
                     color="info" round
@@ -45,7 +201,7 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }
     })
     return (
         <div>
-        <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
+        <Card className={classes.textCenter} style={{padding:"5px"}}>
             <CardBody>
             <div align="center" style={{marginTop:"-50px"}}>
                 <h2>Yamaha Helmet</h2>
@@ -56,14 +212,123 @@ const DataHelmet = function ({ selected, handleName, backend, helmet, ...props }
                     options={helmet}
                     isMulti
                     instanceId="name"
-                    placeholder="filter by Nama Part"
+                    placeholder="Search"
                     onChange={values => handleName(values)}
                 />
-                <br></br>
+                <br></br><br></br><br></br>
+            </div>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>R CONCEPT</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductHelmetRConcepts}
+                </GridContainer>
+            </div><br></br><br></br>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>MTX</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductHelmetMTX}
+                </GridContainer>
+            </div><br></br><br></br>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>EXTREME</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductHelmetExtreme}
+                </GridContainer>
+            </div><br></br><br></br>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>RANGER</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductHelmetRanger}
+                </GridContainer>
+            </div><br></br><br></br>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>FIGHTER</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductHelmetFighter}
+                </GridContainer>
+            </div><br></br><br></br>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>SWIRL</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductHelmetSwirl}
+                </GridContainer>
+            </div><br></br><br></br>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>CLASSIC</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
+                <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
+                    {ProductHelmetClassic}
+                </GridContainer>
+            </div><br></br><br></br>
+            <div align="center" style={{marginTop:"-50px"}}>
+                <div align="center" className={classes.section} id="notifications">
+                    <SnackbarContent
+                    message={
+                        <h4>UNO</h4>
+                    }
+                    align="center"
+                    color="danger"
+                    />
+                </div>
                 <GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
-                    {ProductHelmet}{ProductHelmet}{ProductHelmet}
+                    {ProductHelmetUno}
                 </GridContainer>
-            </div> 
+            </div><br></br><br></br>
             </CardBody>
         </Card>
         </div>
diff --git a/pages-sections/product/helmet_details.js b/pages-sections/product/helmet_details.js
index 93c32a0..fa72c1f 100644
--- a/pages-sections/product/helmet_details.js
+++ b/pages-sections/product/helmet_details.js
@@ -64,7 +64,7 @@ const DetailDataHelmet = function ({ backend, detailhelmet, ...props })  {
                         <hr></hr>
                         <ul>
                             <li><h4>Stock : {data.stock}</h4></li>
-                            <li><h4>Part Code : {data.part_code}</h4></li>
+                            <li><h4>Part Code : {ReactHtmlParser(data.part_code)}</h4></li>
                         </ul>
                     </Grid>
                 </GridContainer>
diff --git a/pages-sections/product/yamalube.js b/pages-sections/product/yamalube.js
index 9cdc44c..a7274c3 100644
--- a/pages-sections/product/yamalube.js
+++ b/pages-sections/product/yamalube.js
@@ -32,7 +32,7 @@ const DataYamalube = function ({ selected, handleName, backend, yamalube, ...pro
                 className={navImageClasses}
                 />
                 <div align="center">
-                <h3>{data.name}</h3>
+                <h4>{data.name}</h4>
                 <h4>Rp.{data.price}</h4>
                 <Button 
                     color="info" round
diff --git a/pages-sections/product/ygp.js b/pages-sections/product/ygp.js
index 400b507..ae59935 100644
--- a/pages-sections/product/ygp.js
+++ b/pages-sections/product/ygp.js
@@ -31,7 +31,7 @@ const DataYGP = function ({ selected,handleName, backend, ygp, ...props }) {
                     src={`${backend}${data.img["url"]}`}
                     className={navImageClasses}
                 />
-                <h3>{data.name}</h3>
+                <h4>{data.name}</h4>
                 <h4>Rp.{data.price}</h4>
                 <Button color="info" round href={"/product/ygp_details?s="+data.id}>
                     <Icon className={classes.icons}>open_in_new</Icon>Detail Product
diff --git a/pages/product/helmet.js b/pages/product/helmet.js
index a2c68ea..55198aa 100644
--- a/pages/product/helmet.js
+++ b/pages/product/helmet.js
@@ -9,7 +9,7 @@ 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 GetDataHelmet from "../../api/product/accessories.js";
+import GetDataHelmet from "../../api/product/helmet.js"
 import DataHelmet from "../../pages-sections/product/helmet.js";
 import DataSnackbarContent from "../../pages-sections/snackbar.js";
 import Router from 'next/router'
@@ -22,7 +22,7 @@ const handleName = values => {
         query: (values&&values.length!=0)?{ filter: values[0]["name"] }:{},
     })
 }
-const Helmet = function ({ selected, helmet, backend, ...props }) {
+const Helmet = function ({ selected, helmet, mtx, extreme, ranger, backend, fighter, swirl, classic, uno, ...props }) {
     const classes = useStyles();
     const { ...rest } = props;
     return (
@@ -41,7 +41,7 @@ const Helmet = function ({ selected, helmet, backend, ...props }) {
         <div className={classNames(classes.main, classes.mainRaised)}>
             <QueryClientProvider client={queryClient}>
                 <DataSnackbarContent/>
-                <DataHelmet selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} helmet={helmet} backend={backend} />
+                <DataHelmet selected={(selected=="")?null:selected[0]["id"]} handleName={handleName} helmet={helmet} mtx={mtx} extreme={extreme} ranger={ranger} fighter={fighter} swirl={swirl} classic={classic} uno={uno} backend={backend} />
             </QueryClientProvider>
         </div>
         <Footer />
@@ -53,20 +53,83 @@ export default Helmet;
 
 export async function getServerSideProps(context) {
     var helmet = [];
+    var mtx = [];
+    var extreme = [];
+    var ranger = [];
+    var fighter = [];
+    var swirl = [];
+    var classic = [];
+    var uno = [];
     var filter = context.query.filter||"";
     var selected = "";
 
     const backend = process.env.BACKEND_SERVER_URI;
     
-    var res = await GetDataHelmet.GetHelmet(filter);
+    var res = await GetDataHelmet.GetHelmetRConcepts(filter);
     if (res["STATUS"] === 1) {
-        helmet = res["DATA"]["accessories"];
+        helmet = res["DATA"]["helmets"];
         if (filter !=""){
             selected = helmet.filter((i)=>i.name==filter);
         }
     }
 
+    var res = await GetDataHelmet.GetHelmetMTX(filter);
+    if (res["STATUS"] === 1) {
+        mtx = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = mtx.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetExtreme(filter);
+    if (res["STATUS"] === 1) {
+        extreme = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = extreme.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetRanger(filter);
+    if (res["STATUS"] === 1) {
+        ranger = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = ranger.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetFighter(filter);
+    if (res["STATUS"] === 1) {
+        fighter = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = fighter.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetSwirl(filter);
+    if (res["STATUS"] === 1) {
+        swirl = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = swirl.filter((i)=>i.name==filter);
+        }
+    }
+    
+    var res = await GetDataHelmet.GetHelmetClassic(filter);
+    if (res["STATUS"] === 1) {
+        classic = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = classic.filter((i)=>i.name==filter);
+        }
+    }
+
+    var res = await GetDataHelmet.GetHelmetUno(filter);
+    if (res["STATUS"] === 1) {
+        uno = res["DATA"]["helmets"];
+        if (filter !=""){
+            selected = uno.filter((i)=>i.name==filter);
+        }
+    }
+
     return { 
-        props: { selected, helmet, backend }, // will be passed to the page component as props
+        props: { selected, helmet, mtx, extreme, ranger, fighter, swirl, classic, uno, backend }, // will be passed to the page component as props
     };
 }
\ No newline at end of file
diff --git a/pages/product/helmet_details.js b/pages/product/helmet_details.js
index e70a7f8..4bb92fd 100644
--- a/pages/product/helmet_details.js
+++ b/pages/product/helmet_details.js
@@ -8,7 +8,7 @@ import Footer from "components/Footer/Footer.js";
 import HelmetDetail from "pages-sections/product/helmet_details.js";
 import Parallax from "components/Parallax/Parallax.js";
 import styles from "assets/jss/nextjs-material-kit/pages/components.js";
-import GetDetailHelmet from "../../api/product/accessories.js"
+import GetDetailHelmet from "../../api/product/helmet.js"
 
 const useStyles = makeStyles(styles);
 
@@ -43,9 +43,9 @@ export async function getServerSideProps(context) {
 	var detailhelmet = [];
     const backend = process.env.BACKEND_SERVER_URI;
 
-	var res = await GetDetailHelmet.GetDetailAccessories(query.s||0);
+	var res = await GetDetailHelmet.GetDetailHelmet(query.s||0);
 	if (res["STATUS"] === 1) {
-		detailhelmet = res["DATA"]["accessories"];
+		detailhelmet = res["DATA"]["helmets"];
 	}
     console.log(detailhelmet);
 
diff --git a/pages/product/yamalube_details.js b/pages/product/yamalube_details.js
index 6c38e0b..4cecf2e 100644
--- a/pages/product/yamalube_details.js
+++ b/pages/product/yamalube_details.js
@@ -47,7 +47,6 @@ export async function getServerSideProps(context) {
 	if (res["STATUS"] === 1) {
 		detailyamalube = res["DATA"]["accessories"];
 	}
-    console.log(detailyamalube);
 
 	return {
 		props: { detailyamalube, backend }, // will be passed to the page component as props