FIX: Fixed different navbar Style

frontend/src/Components/Pages/Css/Background.css

@@ -1,4 +1,13 @@
-/* Background utilities copied from ComponentUtils/Css/Background.css */
+/* Shared base styles used by all pages */
+/* Reset browser default margins so header spans full width */
+html, body, #root { height: 100%; }
+body { margin: 0; font-family: Roboto, Arial, sans-serif; background: #fff; }
+
+/* Page layout wrapper used across pages */
 .allContainer { display: flex; flex-direction: column; min-height: 100vh; }
 .footerContainer { margin-top: auto; }
+
 .moderation-loading, .moderation-error { padding: 40px; text-align: center; }
+
+/* Reset common element spacing to keep consistent top spacing */
+h1, h2, h3, h4, h5 { margin-top: 0; }

frontend/src/Components/Pages/GroupImagesPage.js

@@ -10,7 +10,6 @@ import Footer from '../ComponentUtils/Footer';
 import ImagePreviewGallery from '../ComponentUtils/MultiUpload/ImagePreviewGallery';
 import DescriptionInput from '../ComponentUtils/MultiUpload/DescriptionInput';
 
-import '../Pages/Css/Background.css';
 
 import '../Pages/Css/GroupImagesPage.css';
 

frontend/src/Components/Pages/GroupsOverviewPage.js

@@ -30,7 +30,6 @@ import { fetchAllGroups, deleteGroup } from '../../Utils/batchUpload';
 
 // Styles
 import '../../App.css';
-import '../Pages/Css/Background.css';
 
 function GroupsOverviewPage() {
   // use CSS classes from GroupsOverviewPage.css

frontend/src/Components/Pages/ModerationPage.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { useHistory } from 'react-router-dom';
+import { Container } from '@material-ui/core';
 import './Css/ModerationPage.css';
 import Navbar from '../ComponentUtils/Headers/Navbar';
+import Footer from '../ComponentUtils/Footer';
 
 const ModerationPage = () => {
     const [groups, setGroups] = useState([]);
@@ -147,7 +149,7 @@ const ModerationPage = () => {
     const approvedGroups = groups.filter(g => g.approved);
 
     return (
-        <div className="moderation-page">
+        <div className="allContainer">
             <Navbar />
             <Helmet>
                 <title>Moderation - Interne Verwaltung</title>
@@ -155,6 +157,7 @@ const ModerationPage = () => {
                 <meta name="googlebot" content="noindex, nofollow" />
                 <meta name="description" content="Interne Moderationsseite - Nicht öffentlich zugänglich" />
             </Helmet>
+                        <Container className="moderation-content">
                             <h1>Moderation</h1>
 
                             <div className="moderation-stats">
@@ -172,6 +175,21 @@ const ModerationPage = () => {
                                 </div>
                             </div>
             
+            <div className="moderation-stats">
+                <div className="stat-item">
+                    <span className="stat-number">{pendingGroups.length}</span>
+                    <span className="stat-label">Wartend</span>
+                </div>
+                <div className="stat-item">
+                    <span className="stat-number">{approvedGroups.length}</span>
+                    <span className="stat-label">Freigegeben</span>
+                </div>
+                <div className="stat-item">
+                    <span className="stat-number">{groups.length}</span>
+                    <span className="stat-label">Gesamt</span>
+                </div>
+            </div>
+
             {/* Wartende Gruppen */}
             <section className="moderation-section">
                 <h2>🔍 Wartende Freigabe ({pendingGroups.length})</h2>
@@ -225,6 +243,8 @@ const ModerationPage = () => {
                     onDeleteImage={deleteImage}
                 />
             )}
+            </Container>
+            <div className="footerContainer"><Footer /></div>
         </div>
     );
 };

frontend/src/Components/Pages/MultiUploadPage.js

@@ -18,7 +18,7 @@ import { uploadImageBatch } from '../../Utils/batchUpload';
 
 // Styles
 import '../../App.css';
-import '../Pages/Css/Background.css';
+// Background.css is now globally imported in src/index.js
 
 const useStyles = makeStyles({
   container: {

frontend/src/Components/Pages/UploadPage.js

@@ -14,7 +14,7 @@ import 'sweetalert2/src/sweetalert2.scss'
 
 import { sendRequest } from '../../Utils/sendRequest'
 
-import '../Pages/Css/Background.css'
+// Background.css is now globally imported in src/index.js
 
 const useStyles = makeStyles({
   multiUploadButton: {

frontend/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import './Components/Pages/Css/Background.css';
 
 ReactDOM.render(
   <React.StrictMode>