ui frotneedn fixes

frontend/src/components/common/ImageGenerationCard.tsx

@@ -386,12 +386,13 @@ export default function ImageGenerationCard({
             <Button
               onClick={handleGenerate}
               disabled={isGenerating || !prompt.trim()}
-              className="inline-flex items-center gap-2 px-6 py-2.5"
+              variant="primary"
+              size="md"
             >
               {isGenerating ? (
                 <>
                   <svg
-                    className="h-4 w-4 animate-spin"
+                    className="h-4 w-4 animate-spin mr-2"
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
                     viewBox="0 0 24 24"

frontend/src/components/common/PageHeader.tsx

@@ -19,6 +19,7 @@ interface PageHeaderProps {
     color: 'blue' | 'green' | 'purple' | 'orange' | 'red' | 'indigo';
   };
   hideSiteSector?: boolean; // Hide site/sector selector and info for global pages
+  navigation?: ReactNode; // Module navigation tabs
 }
 
 export default function PageHeader({
@@ -29,6 +30,7 @@ export default function PageHeader({
   className = "",
   badge,
   hideSiteSector = false,
+  navigation,
 }: PageHeaderProps) {
   const { activeSite } = useSiteStore();
   const { activeSector } = useSectorStore();
@@ -44,6 +46,7 @@ export default function PageHeader({
 
   return (
     <div className={`flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 ${className}`}>
+      {/* Left side: Title, badge, and site/sector info */}
       <div className="flex-1">
         <div className="flex items-center gap-3">
           {badge && (
@@ -98,16 +101,21 @@ export default function PageHeader({
           </div>
         )}
       </div>
-      <div className="flex items-center gap-3">
-        {!hideSiteSector && <SiteAndSectorSelector />}
-        {showRefresh && onRefresh && (
-          <button
-            onClick={onRefresh}
-            className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
-          >
-            Refresh
-          </button>
-        )}
+      
+      {/* Right side: Navigation bar stacked above site/sector selector */}
+      <div className="flex flex-col items-end gap-3">
+        {navigation && <div>{navigation}</div>}
+        <div className="flex items-center gap-3">
+          {!hideSiteSector && <SiteAndSectorSelector />}
+          {showRefresh && onRefresh && (
+            <button
+              onClick={onRefresh}
+              className="px-4 py-2 text-sm font-medium text-brand-500 hover:text-brand-600 border border-brand-200 rounded-lg hover:bg-brand-50 dark:border-brand-800 dark:hover:bg-brand-500/10 transition-colors"
+            >
+              Refresh
+            </button>
+          )}
+        </div>
       </div>
     </div>
   );