diff --git a/apps/trading/client-pages/fees/fees.tsx b/apps/trading/client-pages/fees/fees.tsx
index 1cee72cba..8037f943b 100644
--- a/apps/trading/client-pages/fees/fees.tsx
+++ b/apps/trading/client-pages/fees/fees.tsx
@@ -1,25 +1,17 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { FeesContainer } from '../../components/fees-container';
 import { useT } from '../../lib/use-t';
-import { usePageTitleStore } from '../../stores';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 export const Fees = () => {
   const t = useT();
   const title = t('Fees');
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-
-  useEffect(() => {
-    updateTitle(titlefy([title]));
-  }, [updateTitle, title]);
+  usePageTitle(title);
 
   return (
     <ErrorBoundary feature="fees">
       <div className="container p-4 mx-auto">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+        <h1 className="md:px-4 md:pb-4 text-2xl">{title}</h1>
         <FeesContainer />
       </div>
     </ErrorBoundary>
diff --git a/apps/trading/client-pages/rewards/rewards.tsx b/apps/trading/client-pages/rewards/rewards.tsx
index b03472854..d85d2b172 100644
--- a/apps/trading/client-pages/rewards/rewards.tsx
+++ b/apps/trading/client-pages/rewards/rewards.tsx
@@ -1,24 +1,18 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
+import { TinyScroll } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
-import { usePageTitleStore } from '../../stores';
 import { ErrorBoundary } from '../../components/error-boundary';
-import { TinyScroll } from '@vegaprotocol/ui-toolkit';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 export const Rewards = () => {
   const t = useT();
   const title = t('Rewards');
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-  useEffect(() => {
-    updateTitle(titlefy([title]));
-  }, [updateTitle, title]);
+  usePageTitle(title);
+
   return (
     <ErrorBoundary feature="rewards">
       <TinyScroll className="p-4 max-h-full overflow-auto">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+        <h1 className="md:px-4 pb-4 text-2xl">{title}</h1>
         <RewardsContainer />
       </TinyScroll>
     </ErrorBoundary>