diff --git a/components/Home/Gallery.js b/components/Home/Gallery.js
index 470f3d5..a9ad027 100644
--- a/components/Home/Gallery.js
+++ b/components/Home/Gallery.js
@@ -141,7 +141,7 @@ const Projects = () => {
     }, [])
     
     return (
-        <div className="ml-projects-area pt-0 ptb-80">
+        <div id="gallery" className="ml-projects-area pt-0 ptb-80">
             <div className="container">
                 <div className="section-title st-fs-28">
                     <h2>Thamrin Group Gallery</h2>
diff --git a/components/Home/IndustriesWeServe.js b/components/Home/IndustriesWeServe.js
index 5c9963e..02926b5 100644
--- a/components/Home/IndustriesWeServe.js
+++ b/components/Home/IndustriesWeServe.js
@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 const IndustriesWeServe = () => {
     return (
-        <div className="industries-serve-area ptb-80">
+        <div id="industri" className="industries-serve-area ptb-80">
             <div className="container">
                 <div className="section-title">
                     <h2>Sektor Industri</h2>
diff --git a/components/Home/MainBanner.js b/components/Home/MainBanner.js
index 04c790e..3c3434c 100644
--- a/components/Home/MainBanner.js
+++ b/components/Home/MainBanner.js
@@ -4,7 +4,7 @@ import * as Icon from 'react-feather';
 
 const MainBanner = () => {
     return (
-        <div className="bigdata-analytics-banner">
+        <div id="home" className="bigdata-analytics-banner">
             <div className="container">
                 <div className="bigdata-analytics-content">
                     <h1>Selamat Datang di Thamrin Group</h1>
diff --git a/components/Home/NewsletterStyleTwo.js b/components/Home/NewsletterStyleTwo.js
index f54603a..6efd9f6 100644
--- a/components/Home/NewsletterStyleTwo.js
+++ b/components/Home/NewsletterStyleTwo.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 const Newsletter = () => {
     return (
-        <div className="free-trial-area">
+        <div id="about-us" className="free-trial-area">
             <div className="container-fluid">
                 <div className="row align-items-center">
                     <div className="col-lg-6 col-md-12">
diff --git a/components/Yamaha/Product/Motor_Detail.js b/components/Yamaha/Product/Motor_Detail.js
index 773ddf0..edbf945 100644
--- a/components/Yamaha/Product/Motor_Detail.js
+++ b/components/Yamaha/Product/Motor_Detail.js
@@ -36,8 +36,6 @@ const options = {
 };
 
 const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
-
-    console.log(detailproduct[0]["product_otrs"]);
     const [formValue, setFormValue] = React.useState({
         product_img: "",
         product_name: "",
@@ -45,6 +43,9 @@ const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
         product_price: "",
     });
 
+    const [OTRProduct, setProductOTR] = useState('');
+    console.log("otr :", OTRProduct);
+
     const router = useRouter();
 
     const MotorDetail = detailproduct.map((data) => {
@@ -55,8 +56,6 @@ const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
         //     });
         // }
 
-
-
         return (
             <div>
                 <PageBanner pageTitle={data.name} />
@@ -80,11 +79,14 @@ const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
 
                             <div className="col-lg-7">
                                 <div className="products-details">
-                                    <h3>
+                                    <h5>
+                                        <NumberFormat value={OTRProduct} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
+                                    </h5>
+                                    {/* <h3>
                                         <NumberFormat value={data.product_otrs[0].price - data.product_otrs[0].price * data.discount} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                                     </h3>
                                     <h5>
-                                        <div className="price" style={{marginTop:"20px"}}>
+                                        <div className="price" style={{ marginTop: "20px" }}>
                                             <NumberFormat
                                                 style={{ color: "#EB1928" }}
                                                 displayType={'text'}
@@ -94,7 +96,7 @@ const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
                                             />
                                             <NumberFormat value={data.product_otrs[0].price} displayType={'text'} thousandSeparator={true} prefix={'Rp.'} />
                                         </div>
-                                    </h5>
+                                    </h5> */}
 
                                     {/* <p>{this.state.selectedOption}</p> */}
 
@@ -146,7 +148,7 @@ const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
                                         }}
 
                                     >
-                                        <label>Product OTR <span className="required">*</span></label>
+                                        <label>Product Harga OTR <span className="required">*</span></label>
 
                                         <div className="select-box" placeholder="Pilih Harga OTR">
                                             <select className="form-select"
@@ -157,19 +159,12 @@ const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
                                                         product_price: e.target.value.toString(),
                                                     })
                                                 }}
-                                            // value={this.state.selectedOption}
-                                            // onChange={this.handleChange}
+                                                onChange={e => setProductOTR(e.target.value)}
                                             >
                                                 <option value="0">- Pilih Product OTR -</option>
                                                 {detailproduct[0]["product_otrs"].map((option) => (
                                                     <option value={option.price}>{option.name}</option>
                                                 ))}
-                                                {/* {detailproduct.map((option) => (
-                                                    <option value={option.product_otrs[1].price}>{option.product_otrs[1].name}</option>
-                                                ))}
-                                                {detailproduct.map((option) => (
-                                                    <option value={option.product_otrs[2].price}>{option.product_otrs[2].name}</option>
-                                                ))} */}
                                             </select>
                                         </div>
                                         <br />
@@ -229,11 +224,6 @@ const ProductDetails = function ({ detailproduct, backend, user, ...props }) {
                                                 </a>
                                             </li>
                                             <li>
-                                                <a href="#" className="linkedin" target="_blank">
-                                                    <Icon.Linkedin />
-                                                </a>
-                                            </li>
-                                            <li>
                                                 <a href="#" className="instagram" target="_blank">
                                                     <Icon.Instagram />
                                                 </a>
diff --git a/components/_App/NavbarHome.js b/components/_App/NavbarHome.js
index 85b497b..6f208b7 100644
--- a/components/_App/NavbarHome.js
+++ b/components/_App/NavbarHome.js
@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-// import {Link} from 'react-scroll'
+import { Link } from 'react-scroll'
 
-import Link from '@/utils/ActiveLink';
+// import Link from '@/utils/ActiveLink';
 import * as Icon from 'react-feather';
 
 const NavbarStyleFour = () => {
     const [menu, setMenu] = React.useState(true)
- 
+
     const toggleNavbar = () => {
         setMenu(!menu)
     }
@@ -20,9 +20,9 @@ const NavbarStyleFour = () => {
                 elementId.classList.remove("is-sticky");
             }
         });
-        window.scrollTo(0, 0); 
+        window.scrollTo(0, 0);
     })
- 
+
     const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
     const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
 
@@ -37,13 +37,13 @@ const NavbarStyleFour = () => {
                             </a>
                         </Link>
 
-                        <button 
-                            onClick={toggleNavbar} 
+                        <button
+                            onClick={toggleNavbar}
                             className={classTwo}
-                            type="button" 
-                            data-toggle="collapse" 
-                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
-                            aria-expanded="false" 
+                            type="button"
+                            data-toggle="collapse"
+                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                            aria-expanded="false"
                             aria-label="Toggle navigation"
                         >
                             <span className="icon-bar top-bar"></span>
@@ -54,7 +54,7 @@ const NavbarStyleFour = () => {
                         <div className={classOne} id="navbarSupportedContent">
                             <ul className="navbar-nav ms-auto">
                                 <li className="nav-item">
-                                    <Link href="/#" activeClassName="active">
+                                    <Link href="/#" to="home" spy={true} smooth={true}>
                                         <a onClick={e => e.preventDefault()} className="nav-link">
                                             Home
                                         </a>
@@ -62,73 +62,73 @@ const NavbarStyleFour = () => {
                                 </li>
 
                                 <li className="nav-item">
-                                    <Link href="/#">
+                                    <Link href="/#" to="business_partner" spy={true} smooth={true}>
                                         <a onClick={e => e.preventDefault()} className="nav-link">
-                                            Business Partner <Icon.ChevronDown />
+                                            Business Partner
                                         </a>
-                                    </Link> 
+                                    </Link>
 
-                                    <ul className="dropdown-menu">
+                                    {/* <ul className="dropdown-menu">
                                         <li className="nav-item">
-                                            <Link href="/yamaha" target="_blank" activeClassName="active">
-                                                <a onClick={toggleNavbar} className="nav-link" target="_blank">Thamrin Brother's - Yamaha</a>
+                                            <Link target="_blank" activeClassName="active" style={{marginTop:"-10px"}}>
+                                                <a href="/yamaha" className="nav-link" target="_blank">Thamrin Brother's - Yamaha</a>
                                             </Link>
                                         </li>
 
                                         <li className="nav-item">
-                                            <Link href="/coming-soon" activeClassName="active">
+                                            <Link href="/coming-soon" activeClassName="active" style={{marginTop:"-20px"}}>
                                                 <a target="_blank" onClick={toggleNavbar} className="nav-link">Nusa Sarana Citra Bakti - Suzuki</a>
                                             </Link>
                                         </li>
 
                                         <li className="nav-item">
-                                            <Link href="/coming-soon" activeClassName="active">
+                                            <Link href="/coming-soon" activeClassName="active" style={{marginTop:"-20px"}}>
                                                 <a target="_blank" onClick={toggleNavbar} className="nav-link">Citra Lestari Mobilindo - Hino</a>
                                             </Link>
                                         </li>
 
                                         <li className="nav-item">
-                                            <Link href="/coming-soon" activeClassName="active">
+                                            <Link href="/coming-soon" activeClassName="active" style={{marginTop:"-20px"}}>
                                                 <a target="_blank" onClick={toggleNavbar} className="nav-link">Citra Thamrin Motor - Honda</a>
                                             </Link>
                                         </li>
 
                                         <li className="nav-item">
-                                            <Link href="https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html" activeClassName="active">
+                                            <Link href="https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html" activeClassName="active" style={{marginTop:"-20px"}}>
                                                 <a target="_blank" onClick={toggleNavbar} className="nav-link">Thamrin Citra Abadi - Mercedes Benz</a>
                                             </Link>
                                         </li>
 
                                         <li className="nav-item">
-                                            <Link href="https://www.instagram.com/palembangindahmall/?hl=id" activeClassName="active">
+                                            <Link href="https://www.instagram.com/palembangindahmall/?hl=id" activeClassName="active" style={{marginTop:"-20px"}}>
                                                 <a target="_blank" onClick={toggleNavbar} className="nav-link">Musi Lestari Indo Makmur - Palembang Indah Mall</a>
                                             </Link>
                                         </li>
 
                                         <li className="nav-item">
-                                            <Link href="http://www.emilia-hotel.com/" activeClassName="active">
+                                            <Link href="http://www.emilia-hotel.com/" activeClassName="active" style={{marginTop:"-20px"}}>
                                                 <a target="_blank" onClick={toggleNavbar} className="nav-link">Musi Indah Makmur - Emilia Hotel</a>
                                             </Link>
                                         </li>
 
                                         <li className="nav-item">
-                                            <Link href="http://bprberkatsejati.com/" activeClassName="active">
+                                            <Link href="http://bprberkatsejati.com/" activeClassName="active" style={{marginTop:"-20px"}}>
                                                 <a target="_blank" onClick={toggleNavbar} className="nav-link">Bank Perkreditan Rakyat - Berkat Sejati</a>
                                             </Link>
                                         </li>
 
                                         <li className="nav-item">
-                                            <Link href="http://homes.thamrin.xyz/" activeClassName="active">
+                                            <Link href="http://homes.thamrin.xyz/" activeClassName="active" style={{marginTop:"-20px"}}>
                                                 <a target="_blank" onClick={toggleNavbar} className="nav-link">Thamrin Homes</a>
                                             </Link>
                                         </li>
-                                    </ul>
+                                    </ul> */}
                                 </li>
 
                                 <li className="nav-item">
-                                    <Link href="/#" activeClassName="active">
+                                    <Link href="/#" to="industri" spy={true} smooth={true}>
                                         <a onClick={e => e.preventDefault()} className="nav-link">
-                                            Industri Serve
+                                            Industri We Serve
                                         </a>
                                     </Link>
                                 </li>
@@ -150,7 +150,7 @@ const NavbarStyleFour = () => {
                                 </li> */}
 
                                 <li className="nav-item">
-                                    <Link href="/#" activeClassName="active">
+                                    <Link href="/#" to="gallery" spy={true} smooth={true}>
                                         <a onClick={e => e.preventDefault()} className="nav-link">
                                             Gallery
                                         </a>
@@ -158,8 +158,10 @@ const NavbarStyleFour = () => {
                                 </li>
 
                                 <li className="nav-item">
-                                    <Link href="/contact" activeClassName="active">
-                                        <a onClick={toggleNavbar} className="nav-link">About Us</a>
+                                    <Link href="/#" to="about-us" spy={true} smooth={true}>
+                                        <a onClick={e => e.preventDefault()} className="nav-link">
+                                            About Us
+                                        </a>
                                     </Link>
                                 </li>
                             </ul>