diff --git a/components/layout/Layout.js b/components/layout/Layout.js
index 8273270..da9de60 100644
--- a/components/layout/Layout.js
+++ b/components/layout/Layout.js
@@ -2,11 +2,12 @@ import { useEffect, useState } from "react"
 import BackToTop from '../elements/BackToTop'
 import Breadcrumb from './Breadcrumb'
 import PageHead from './PageHead'
-import Footer1 from './footer/Footer1'
-import Footer2 from './footer/Footer2'
+// import Footer1 from './footer/Footer1'
+// import Footer2 from './footer/Footer2'
 import Footer3 from "./footer/Footer3"
-import Header1 from "./header/Header1"
-import Header2 from './header/Header2'
+// import Header1 from "./header/Header1"
+// import Header2 from './header/Header2'
+import HeaderMerms from "./header/HeaderMerms";
 
 export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumbTitle, children, headerCls }) {
     const [scroll, setScroll] = useState(0)
@@ -35,9 +36,11 @@ export default function Layout({ headerStyle, footerStyle, headTitle, breadcrumb
         <>
             <PageHead headTitle={headTitle} />
             <div id="page" className="page font--jakarta">
-                {!headerStyle && <Header1 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} headerCls={headerCls} />}
-                {headerStyle == 1 ? <Header1 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} headerCls={headerCls} /> : null}
-                {headerStyle == 2 ? <Header2 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} headerCls={headerCls} /> : null}
+                <HeaderMerms scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} headerCls={headerCls} />
+
+                {/*{!headerStyle && <Header1 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} headerCls={headerCls} />}*/}
+                {/*{headerStyle == 1 ? <Header1 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} headerCls={headerCls} /> : null}*/}
+                {/*{headerStyle == 2 ? <Header2 scroll={scroll} isMobileMenu={isMobileMenu} handleMobileMenu={handleMobileMenu} headerCls={headerCls} /> : null}*/}
 
 
                 <main className="main">
diff --git a/components/layout/header/HeaderMerms.js b/components/layout/header/HeaderMerms.js
new file mode 100644
index 0000000..bae727c
--- /dev/null
+++ b/components/layout/header/HeaderMerms.js
@@ -0,0 +1,41 @@
+import Link from "next/link"
+import MobileMenu from "../MobileMenu"
+import Menu from "../Menu"
+export default function HeaderMerms({ scroll, isMobileMenu, handleMobileMenu, headerCls }) {
+    console.log(headerCls);
+
+    return (
+        <>
+            <header id="header" className={`tra-menu white-scroll ${headerCls ? headerCls : ""}`}>
+                <div className="header-wrapper">
+                    {/* MOBILE HEADER */}
+                    <div className="wsmobileheader clearfix">
+                        <span className="smllogo"><img src="/images/logo-pink.png" alt="mobile-logo" /></span>
+                        <a id="wsnavtoggle" className="wsanimated-arrow" onClick={handleMobileMenu}><span /></a>
+                    </div>
+                    {/* NAVIGATION MENU */}
+                    <div className={`wsmainfull menu clearfix ${scroll ? "scroll fix-h" : ""}`}>
+                        <div className="wsmainwp clearfix">
+                            {/* HEADER BLACK LOGO */}
+                            <div className="desktoplogo">
+                                <Link href="/" className="logo-black">
+                                    <img className="light-theme-img" src="/images/logo-pink.png" alt="logo" />
+                                    <img className="dark-theme-img" src="/images/logo-pink-white.png" alt="logo" />
+                                </Link>
+                            </div>
+                            {/* HEADER WHITE LOGO */}
+                            <div className="desktoplogo">
+                                <Link href="/" className="logo-white"><img src="/images/logo-white.png" alt="logo" /></Link>
+                            </div>
+                            {/* MAIN MENU */}
+                            <nav className="wsmenu clearfix" style={{height:"100vh"}}>
+                                {isMobileMenu ? <MobileMenu /> : <Menu />}
+                            </nav> {/* END MAIN MENU */}
+                        </div>
+                    </div> {/* END NAVIGATION MENU */}
+                </div> {/* End header-wrapper */}
+            </header>
+
+        </>
+    )
+}
diff --git a/public/css/merms.css b/public/css/merms.css
index f31f964..8137325 100644
--- a/public/css/merms.css
+++ b/public/css/merms.css
@@ -3717,7 +3717,7 @@ p.video-txt-sm {
     top: 0;
     right: 0;
     left: 0;
-    z-index: 1030;
+    /*z-index: 1030;*/
 }
 
 .headerwp {