style:

src/components/SecondHeaderWrapper.jsx

@@ -1,5 +1,5 @@
 import { Outlet, useNavigate } from 'react-router-dom';
-import { Layout, Flex, theme, Spin } from 'antd';
+import { Layout, Flex, theme, Spin, Divider } from 'antd';
 import BackBtn from './BackBtn';
 
 const { Content, Header } = Layout;
@@ -10,7 +10,7 @@ const HeaderWrapper = ({ children, header, loading, ...props }) => {
   } = theme.useToken();
   return (
     <>
-      <Layout className=''>
+      <Layout className=' bg-white'>
         <Spin spinning={loading || false}>
         <Header className='header px-6 h-10 ' style={{ background: 'white' }}>
           <Flex justify={'space-between'} align={'center'} className='h-full'>
@@ -19,6 +19,7 @@ const HeaderWrapper = ({ children, header, loading, ...props }) => {
             <BackBtn />
           </Flex>
         </Header>
+        <hr />
         <Content className='' style={{ backgroundColor: colorBgContainer }}>
           {children || <Outlet />}
         </Content>

src/views/products/Audit.jsx

@@ -35,7 +35,7 @@ const Header = ({ title, agency, refresh, ...props }) => {
   return (
     <div className='flex justify-end items-center gap-4 h-full'>
       <div className='grow'>
-        <h2 className='m-0 leading-tight'>{title} {use_year}</h2>
+        <h2 className='m-0 leading-tight'>{title}<Divider type={'vertical'} />{use_year}</h2>
       </div>
       {/* <Button size='small'>{t('Copy')}</Button> */}
       {/* <Button size='small'>{t('Import')}</Button> */}
@@ -178,8 +178,6 @@ const Audit = ({ ...props }) => {
   return (
     <>
       <SecondHeaderWrapper header={<Header title={activeAgency.travel_agency_name} agency={activeAgency} refresh={handleGetAgencyProducts} />} loading={loading} >
-        <hr />
-        {/* <Divider /> */}
         {/* debug: 0 */}
         {/* <PrintContractPDF /> */}