diff --git a/src/layouts/demo2/header/HeaderLogo.tsx b/src/layouts/demo2/header/HeaderLogo.tsx
index 443be9e..03fb815 100644
--- a/src/layouts/demo2/header/HeaderLogo.tsx
+++ b/src/layouts/demo2/header/HeaderLogo.tsx
@@ -19,6 +19,16 @@ const HeaderLogo = () => {
   const { pathname } = useLocation();
   const { isRTL } = useLanguage();
   const [selectedMenuItem, setSelectedMenuItem] = useState(MENU_ROOT[0]);
+  const [isSticky, setIsSticky] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsSticky(window.scrollY > 100);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   useEffect(() => {
     MENU_ROOT.forEach((item) => {
@@ -55,7 +65,9 @@ const HeaderLogo = () => {
       </Link>
 
       <div className="flex items-center">
-        <h3 className="text-gray-50 text-xl hidden md:block">TPAY Dashboard Portal</h3>
+        <h3 className={`text-xl hidden md:block ${isSticky ? 'text-black' : 'text-gray-50'}`}>
+          TPAY Dashboard Portal
+        </h3>
       </div>
     </div>
   );