diff --git a/src/components/ProHeader/ProHeader.tsx b/src/components/ProHeader/ProHeader.tsx
index 9226e41..578f564 100644
--- a/src/components/ProHeader/ProHeader.tsx
+++ b/src/components/ProHeader/ProHeader.tsx
@@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "redux/hooks";
 import { ProBlack2 } from "ThemeConstants";
 import ProTitle from "../ProTitle";
+import useBreakPoint from "hooks/useBreakPoint";
 const { Text } = Typography;
 
 interface ProHeaderProps {
@@ -22,6 +23,7 @@ const ProHeader: FunctionComponent<ProHeaderProps> = ({
 }) => {
   const { themeName } = useAppSelector((state) => state.theme);
   const { isRTL } = useAppSelector((state) => state.locale);
+  const { isMobile } = useBreakPoint();
   const router = useNavigate();
 
   const handleBack = () => {
@@ -43,7 +45,7 @@ const ProHeader: FunctionComponent<ProHeaderProps> = ({
         justifyContent: "space-between",
         alignItems: "center", // This centers vertically
         backgroundColor: themeName === "light" ? "white" : ProBlack2,
-        height: "8vh", // Set a fixed height for the container
+        height: isMobile ? "8vh" : "6vh", // Set a fixed height for the container
         padding: "4px 16px 0px 16px", // Add some horizontal padding
       }}
     >