final polish phase 1

frontend/src/pages/account/ContentSettingsPage.tsx

@@ -17,6 +17,8 @@ import SelectDropdown from '../../components/form/SelectDropdown';
 import Label from '../../components/form/Label';
 import Checkbox from '../../components/form/input/Checkbox';
 import PageMeta from '../../components/common/PageMeta';
+import PageHeader from '../../components/common/PageHeader';
+import { BoxCubeIcon } from '../../icons';
 
 type TabType = 'content' | 'publishing' | 'images';
 
@@ -325,19 +327,16 @@ export default function ContentSettingsPage() {
   return (
     <div className="p-6">
       <PageMeta title="Content Settings" description="Configure your content generation settings" />
-      
-      {/* Page Header */}
-      <div className="mb-6">
-        <div className="text-sm text-gray-500 dark:text-gray-400 mb-1">
-          Content Settings / {tabTitles[activeTab]}
-        </div>
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tabTitles[activeTab]}</h1>
-        <p className="text-gray-600 dark:text-gray-400 mt-1">
-          {activeTab === 'content' && 'Customize how your articles are written'}
-          {activeTab === 'publishing' && 'Configure automatic publishing settings'}
-          {activeTab === 'images' && 'Set up AI image generation preferences'}
-        </p>
-      </div>
+      <PageHeader 
+        title={tabTitles[activeTab]}
+        description={
+          activeTab === 'content' ? 'Customize how your articles are written' :
+          activeTab === 'publishing' ? 'Configure automatic publishing settings' :
+          'Set up AI image generation preferences'
+        }
+        badge={{ icon: <BoxCubeIcon />, color: 'blue' }}
+        parent="Content Settings"
+      />
 
       {/* Tab Content */}
       <div className="mt-6">