diff --git a/frontend/src/App.css b/frontend/src/App.css
index 62f742b..e378fee 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,5 +1,193 @@
 /* Main shared styles for cards, buttons, modals used across pages */
 
+/* ============================================
+   TYPOGRAPHY - Zentrale Schrift-Definitionen
+   ============================================ */
+body {
+  font-family: 'Open Sans', sans-serif;
+  color: #333333;
+  line-height: 1.6;
+}
+
+h1, .h1 {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 500;
+  font-size: 28px;
+  color: #333333;
+  margin-bottom: 10px;
+}
+
+h2, .h2 {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  color: #333333;
+  margin-bottom: 15px;
+}
+
+h3, .h3 {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 500;
+  font-size: 20px;
+  color: #333333;
+  margin-bottom: 12px;
+}
+
+p, .text-body {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  color: #666666;
+  margin-bottom: 16px;
+}
+
+.text-subtitle {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  color: #666666;
+}
+
+.text-small {
+  font-size: 14px;
+  color: #666666;
+}
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+
+/* ============================================
+   LAYOUT & CONTAINERS
+   ============================================ */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.card-content {
+  padding: 20px;
+}
+
+/* ============================================
+   PAGE HEADERS
+   ============================================ */
+.page-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.page-title {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 500;
+  font-size: 28px;
+  color: #333333;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.page-subtitle {
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  color: #666666;
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+/* ============================================
+   UTILITY CLASSES
+   ============================================ */
+.flex-center {
+  display: flex;
+  gap: 15px;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: 30px;
+}
+
+.text-center-block {
+  text-align: center;
+  padding: 40px 0;
+}
+
+/* Spacing utilities */
+.mt-1 { margin-top: 8px; }
+.mt-2 { margin-top: 16px; }
+.mt-3 { margin-top: 24px; }
+.mt-4 { margin-top: 32px; }
+.mb-1 { margin-bottom: 8px; }
+.mb-2 { margin-bottom: 16px; }
+.mb-3 { margin-bottom: 24px; }
+.mb-4 { margin-bottom: 32px; }
+.p-2 { padding: 16px; }
+.p-3 { padding: 24px; }
+
+/* ============================================
+   SUCCESS BOX (Upload Success)
+   ============================================ */
+.success-box {
+  margin-top: 32px;
+  padding: 24px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+  color: white;
+  box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
+  animation: slideIn 0.5s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.success-box h2 {
+  font-size: 28px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  color: white;
+}
+
+.success-box p {
+  font-size: 18px;
+  margin-bottom: 16px;
+  color: white;
+}
+
+.info-box {
+  background: rgba(255,255,255,0.2);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.info-box-highlight {
+  background: rgba(255,255,255,0.95);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 16px;
+  border: 2px solid rgba(255,255,255,0.3);
+}
+
+/* ============================================
+   EXISTING STYLES BELOW
+   ============================================ */
+
 /* Page-specific styles for GroupsOverviewPage */
 .groups-overview-container { padding-top: 20px; padding-bottom: 40px; min-height: 80vh; }
 .header-card { border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); margin-bottom: 30px; text-align: center; padding: 20px; }
@@ -52,7 +240,7 @@ p { font-family: 'Open Sans', sans-serif; color:#555; line-height:1.6; }
 }
 
 /* Buttons */
-.btn { padding:8px 12px; border:none; border-radius:6px; cursor:pointer; font-size:0.85rem; transition:background-color 0.2s; flex:1; min-width:80px; }
+.btn { padding:12px 30px; border:none; border-radius:6px; cursor:pointer; font-size:16px; transition:background-color 0.2s; min-width:80px; }
 .btn-secondary { background:#6c757d; color:white; }
 .btn-secondary:hover { background:#5a6268; }
 .btn-outline-secondary { background:transparent; border:1px solid #6c757d; color:#6c757d; }
@@ -63,7 +251,6 @@ p { font-family: 'Open Sans', sans-serif; color:#555; line-height:1.6; }
 .btn-warning:hover { background:#e0a800; }
 .btn-danger { background:#dc3545; color:white; }
 .btn-danger:hover { background:#c82333; }
-.btn-sm { padding:4px 8px; font-size:0.75rem; min-width:auto; }
 .btn:disabled { opacity:0.65; cursor:not-allowed; }
 
 /* Modal */
@@ -104,3 +291,32 @@ p { font-family: 'Open Sans', sans-serif; color:#555; line-height:1.6; }
 .admin-auth-card { width:100%; max-width:420px; box-shadow:0 8px 24px rgba(0,0,0,0.08); }
 .admin-auth-form { width:100%; }
 .admin-auth-error { max-width:420px; background:#fff3f3; border:1px solid #ffcdd2; padding:24px; border-radius:12px; text-align:center; color:#b71c1c; }
+
+/* ============================================
+   MATERIAL-UI OVERRIDES - Globale Schriftart
+   ============================================ */
+/* TextField, Input, Textarea */
+.MuiTextField-root input,
+.MuiTextField-root textarea,
+.MuiInputBase-root,
+.MuiInputBase-input,
+.MuiOutlinedInput-input {
+  font-family: 'Open Sans', sans-serif !important;
+}
+
+/* Labels */
+.MuiFormLabel-root,
+.MuiInputLabel-root,
+.MuiTypography-root {
+  font-family: 'Open Sans', sans-serif !important;
+}
+
+/* Buttons */
+.MuiButton-root {
+  font-family: 'Open Sans', sans-serif !important;
+}
+
+/* Checkbox Labels */
+.MuiFormControlLabel-label {
+  font-family: 'Open Sans', sans-serif !important;
+}
diff --git a/frontend/src/Components/ComponentUtils/Css/ImageGallery.css b/frontend/src/Components/ComponentUtils/Css/ImageGallery.css
index 9b22860..5b207a7 100644
--- a/frontend/src/Components/ComponentUtils/Css/ImageGallery.css
+++ b/frontend/src/Components/ComponentUtils/Css/ImageGallery.css
@@ -111,7 +111,9 @@
   background: #f8f9fa; 
   display: flex; 
   gap: 8px; 
-  flex-wrap: wrap; 
+  flex-wrap: wrap;
+  flex-direction: column;
+  margin-top: auto;
 }
 
 /* ImageGalleryCard - No preview state */
diff --git a/frontend/src/Components/ComponentUtils/GroupMetadataEditor.js b/frontend/src/Components/ComponentUtils/GroupMetadataEditor.js
index 4e603b0..f74c22c 100644
--- a/frontend/src/Components/ComponentUtils/GroupMetadataEditor.js
+++ b/frontend/src/Components/ComponentUtils/GroupMetadataEditor.js
@@ -144,7 +144,7 @@ function GroupMetadataEditor({
     >
       {/* Component Header */}
       <Typography variant="h6" gutterBottom sx={{ fontWeight: 600, mb: 2 }}>
-        📝 Projekt-Informationen
+        Projekt-Informationen
       </Typography>
 
       <DescriptionInput 
diff --git a/frontend/src/Components/ComponentUtils/ImageGalleryCard.js b/frontend/src/Components/ComponentUtils/ImageGalleryCard.js
index 5e5cc6a..3f7eb2c 100644
--- a/frontend/src/Components/ComponentUtils/ImageGalleryCard.js
+++ b/frontend/src/Components/ComponentUtils/ImageGalleryCard.js
@@ -221,71 +221,30 @@ const ImageGalleryCard = ({
                         mode === 'preview' ? (
                             // Preview mode actions (for upload preview)
                             <>
-                                <button 
-                                    className="btn btn-danger"
-                                    onClick={() => onDelete(itemId)}
-                                >
-                                    🗑️ Löschen
-                                </button>
+                                <button className="btn btn-danger" onClick={() => onDelete(itemId)}>🗑️ Löschen</button>
                                 {!isEditMode ? (
-                                    <button 
-                                        className="btn btn-primary btn-sm"
-                                        onClick={() => onEditMode?.(true)}
-                                    >
-                                        ✏️ Edit
-                                    </button>
+                                    <button className="btn btn-primary" onClick={() => onEditMode?.(true)}>✏️ Edit </button>
                                 ) : (
-                                    <button 
-                                        className="btn btn-success btn-sm"
-                                        onClick={() => onEditMode?.(false)}
-                                    >
-                                        ✅ Fertig
-                                    </button>
+                                    <button className="btn btn-success" onClick={() => onEditMode?.(false)}>✅ Fertig</button>
                                 )}
                             </>
                         ) : (
                             // Moderation mode actions (for existing groups)
                             <>
-                                <button 
-                                    className="btn btn-secondary"
-                                    onClick={() => onViewImages(item)}
-                                >
-                                    ✏️ Gruppe editieren
-                                </button>
+                                <button className="btn btn-secondary" onClick={() => onViewImages(item)}>✏️ Gruppe editieren</button>
                                 
                                 {isPending ? (
-                                    <button 
-                                        className="btn btn-success"
-                                        onClick={() => onApprove(itemId, true)}
-                                    >
-                                        ✅ Freigeben
-                                    </button>
+                                    <button className="btn btn-success" onClick={() => onApprove(itemId, true)}>✅ Freigeben</button>
                                 ) : (
-                                    <button 
-                                        className="btn btn-warning"
-                                        onClick={() => onApprove(itemId, false)}
-                                    >
-                                        ⏸️ Sperren
-                                    </button>
+                                    <button className="btn btn-warning" onClick={() => onApprove(itemId, false)}>⏸️ Sperren</button>
                                 )}
                                 
-                                <button 
-                                    className="btn btn-danger"
-                                    onClick={() => onDelete(itemId)}
-                                >
-                                    🗑️ Löschen
-                                </button>
+                                <button className="btn btn-danger" onClick={() => onDelete(itemId)}>🗑️ Löschen</button>
                             </>
                         )
                     ) : mode !== 'single-image' ? (
                         // Public view mode (only for group cards, not single images)
-                        <button
-                            className="view-button"
-                            onClick={() => onViewImages(item)}
-                            title="Anzeigen"
-                        >
-                            Anzeigen
-                        </button>
+                        <button className="view-button" onClick={() => onViewImages(item)} title="Anzeigen">Anzeigen</button>
                     ) : null}
                 </div>
             )}
diff --git a/frontend/src/Components/ComponentUtils/MultiUpload/DescriptionInput.js b/frontend/src/Components/ComponentUtils/MultiUpload/DescriptionInput.js
index fe0470d..87d8a79 100644
--- a/frontend/src/Components/ComponentUtils/MultiUpload/DescriptionInput.js
+++ b/frontend/src/Components/ComponentUtils/MultiUpload/DescriptionInput.js
@@ -17,7 +17,6 @@ function DescriptionInput({
   const currentYear = new Date().getFullYear();
 
   const fieldLabelSx = {
-    fontFamily: 'roboto',
     fontSize: '14px',
     color: '#555555',
     marginBottom: '8px',
@@ -25,7 +24,6 @@ function DescriptionInput({
   };
 
   const sectionTitleSx = {
-    fontFamily: 'roboto',
     fontSize: '18px',
     color: '#333333',
     marginBottom: '15px',
@@ -68,7 +66,7 @@ function DescriptionInput({
   };
 
   const requiredIndicatorSx = { color: '#E57373', fontSize: '16px' };
-  const optionalIndicatorSx = { color: '#9E9E9E', fontSize: '12px', fontStyle: 'italic' };
+  const optionalIndicatorSx = { color: '#9E9E9E', fontSize: '12px' };
 
   return (
     <Box sx={{ marginTop: '20px', marginBottom: '20px' }}>
diff --git a/frontend/src/Components/ComponentUtils/MultiUpload/MultiImageDropzone.js b/frontend/src/Components/ComponentUtils/MultiUpload/MultiImageDropzone.js
index a19244c..5cc1a6b 100644
--- a/frontend/src/Components/ComponentUtils/MultiUpload/MultiImageDropzone.js
+++ b/frontend/src/Components/ComponentUtils/MultiUpload/MultiImageDropzone.js
@@ -77,15 +77,13 @@ function MultiImageDropzone({ onImagesSelected, selectedImages = [] }) {
 
   const dropzoneTextSx = {
     fontSize: '18px',
-    fontFamily: 'roboto',
     color: '#666666',
     margin: '10px 0'
   };
 
   const dropzoneSubtextSx = {
     fontSize: '14px',
-    color: '#999999',
-    fontFamily: 'roboto'
+    color: '#999999'
   };
 
   const fileCountSx = {
@@ -106,7 +104,7 @@ function MultiImageDropzone({ onImagesSelected, selectedImages = [] }) {
         onClick={handleClick}
       >
         <Typography sx={dropzoneTextSx}>
-          📸 Mehrere Bilder hier hinziehen oder klicken zum Auswählen
+          Mehrere Bilder hier hinziehen oder klicken zum Auswählen
         </Typography>
 
         <Typography sx={dropzoneSubtextSx}>
diff --git a/frontend/src/Components/Pages/GroupsOverviewPage.js b/frontend/src/Components/Pages/GroupsOverviewPage.js
index 4594f1f..9f852cc 100644
--- a/frontend/src/Components/Pages/GroupsOverviewPage.js
+++ b/frontend/src/Components/Pages/GroupsOverviewPage.js
@@ -1,13 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { 
-  Container, 
-  Card, 
-  Typography, 
-  Box,
-  CircularProgress
-} from '@mui/material';
 
 
 
@@ -63,14 +56,14 @@ function GroupsOverviewPage() {
     return (
       <div className="allContainer">
         <Navbar />
-          <Container maxWidth="lg" className="page-container">
-          <div className="loading-container">
-            <CircularProgress size={60} color="primary" />
-            <Typography variant="h6" style={{ marginTop: '20px', color: '#666666' }}>
-              Slideshows werden geladen...
-            </Typography>
+        <div className="container">
+          <div className="flex-center" style={{ minHeight: '400px' }}>
+            <div className="text-center">
+              <div className="loading-spinner" style={{ width: '60px', height: '60px', border: '4px solid #f3f3f3', borderTop: '4px solid #3498db', borderRadius: '50%', animation: 'spin 1s linear infinite', margin: '0 auto' }}></div>
+              <p className="mt-3" style={{ color: '#666666' }}>Slideshows werden geladen...</p>
+            </div>
           </div>
-        </Container>
+        </div>
         <Footer />
       </div>
     );
@@ -86,53 +79,39 @@ function GroupsOverviewPage() {
       </Helmet>
       <Navbar />
       
-  <Container maxWidth="lg" className="page-container">
+      <div className="container page-container">
         {/* Header */}
-        <Card className="header-card">
-          <Typography className="header-title">
-            Alle Slideshows
-          </Typography>
-          <Typography className="header-subtitle">
-            Übersicht aller erstellten Slideshows. 
-          </Typography>
-        </Card>
+        <div className="card">
+          <h1 className="page-title">Alle Slideshows</h1>
+          <p className="page-subtitle">Übersicht aller erstellten Slideshows.</p>
+        </div>
 
         {/* Groups Grid */}
         {error ? (
-            <div className="empty-state">
-            <Typography variant="h6" style={{ color: '#f44336', marginBottom: '20px' }}>
-              😕 Fehler beim Laden
-            </Typography>
-            <Typography variant="body1" style={{ color: '#666666', marginBottom: '30px' }}>
-              {error}
-            </Typography>
+          <div className="empty-state">
+            <h2 style={{ color: '#f44336' }} className="mb-3">😕 Fehler beim Laden</h2>
+            <p style={{ color: '#666666' }} className="mb-4">{error}</p>
             <button onClick={loadGroups} className="btn btn-secondary">
               🔄 Erneut versuchen
             </button>
           </div>
         ) : groups.length === 0 ? (
-            <div className="empty-state">
-            <Typography variant="h4" style={{ color: '#666666', marginBottom: '20px' }}>
-              📸 Keine Slideshows vorhanden
-            </Typography>
-            <Typography variant="body1" style={{ color: '#999999', marginBottom: '30px' }}>
+          <div className="empty-state">
+            <h2 style={{ color: '#666666' }} className="mb-3">📸 Keine Slideshows vorhanden</h2>
+            <p style={{ color: '#999999' }} className="mb-4">
               Erstellen Sie Ihre erste Slideshow, indem Sie mehrere Bilder hochladen.
-            </Typography>
-            <button
-              className="btn btn-success"
-              onClick={handleCreateNew}
-              style={{ fontSize: '16px', padding: '12px 24px' }}
-            >
+            </p>
+            <button className="btn btn-success" onClick={handleCreateNew}>
               ➕ Erste Slideshow erstellen
             </button>
           </div>
         ) : (
           <>
-            <Box marginBottom={2}>
-              <Typography variant="h6" style={{ color: '#666666' }}>
-                📊 {groups.length} Slideshow{groups.length !== 1 ? 's' : ''} gefunden
-              </Typography>
-            </Box>
+            <div className="mb-3">
+              <h3 style={{ color: '#666666' }}>
+                {groups.length} Slideshow{groups.length !== 1 ? 's' : ''} gefunden
+              </h3>
+            </div>
             <ImageGallery
               items={groups}
               onViewImages={(group) => handleViewGroup(group.groupId)}
@@ -142,7 +121,7 @@ function GroupsOverviewPage() {
             />
           </>
         )}
-      </Container>
+      </div>
 
       <div className="footerContainer">
         <Footer />
diff --git a/frontend/src/Components/Pages/ManagementPortalPage.js b/frontend/src/Components/Pages/ManagementPortalPage.js
index acca180..8f2d066 100644
--- a/frontend/src/Components/Pages/ManagementPortalPage.js
+++ b/frontend/src/Components/Pages/ManagementPortalPage.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Container, Card, CardContent, Typography, Box, Button } from '@mui/material';
 import Swal from 'sweetalert2';
 import NavbarUpload from '../ComponentUtils/Headers/NavbarUpload';
 import Footer from '../ComponentUtils/Footer';
@@ -180,9 +179,9 @@ function ManagementPortalPage() {
     return (
       <div className="allContainer">
         <NavbarUpload />
-        <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+        <div className="container flex-center" style={{ minHeight: '80vh', paddingTop: '20px', paddingBottom: '40px' }}>
           <Loading />
-        </Container>
+        </div>
         <Footer />
       </div>
     );
@@ -192,19 +191,15 @@ function ManagementPortalPage() {
     return (
       <div className="allContainer">
         <NavbarUpload />
-        <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh' }}>
-          <Card sx={{ borderRadius: '12px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', p: '20px', textAlign: 'center' }}>
-            <Typography variant="h5" color="error" gutterBottom>
-              {error}
-            </Typography>
-            <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
-              {error}
-            </Typography>
-            <Button variant="contained" onClick={() => navigate('/')}>
+        <div className="container" style={{ minHeight: '80vh', paddingTop: '20px', paddingBottom: '40px' }}>
+          <div className="card text-center">
+            <h2 style={{ color: '#f44336' }} className="mb-2">{error}</h2>
+            <p style={{ color: '#666666' }} className="mb-4">{error}</p>
+            <button className="btn btn-primary" onClick={() => navigate('/')}>
               Zur Startseite
-            </Button>
-          </Card>
-        </Container>
+            </button>
+          </div>
+        </div>
         <Footer />
       </div>
     );
@@ -214,19 +209,17 @@ function ManagementPortalPage() {
     <div className="allContainer">
       <NavbarUpload />
 
-      <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh' }}>
-        <Card sx={{ borderRadius: '12px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', p: '20px', mb: '20px' }}>
-          <CardContent>
-            <Typography sx={{ fontFamily: 'roboto', fontWeight: 400, fontSize: '28px', textAlign: 'center', mb: '10px', color: '#333333' }}>
-              Mein Upload verwalten
-            </Typography>
-            <Typography sx={{ fontFamily: 'roboto', fontWeight: 300, fontSize: '16px', color: '#666666', textAlign: 'center', mb: '30px' }}>
+      <div className="container" style={{ minHeight: '80vh', paddingTop: '20px', paddingBottom: '40px' }}>
+        <div className="card mb-3">
+          <div className="card-content">
+            <h1 className="page-title text-center mb-2">Mein Upload verwalten</h1>
+            <p className="page-subtitle text-center mb-4">
               Hier können Sie Ihre hochgeladenen Bilder verwalten, Metadaten bearbeiten und Einwilligungen ändern.
-            </Typography>
+            </p>
 
             {/* Group Overview */}
             {group && (
-              <Box sx={{ mb: 3 }}>
+              <div className="mb-4">
                 <ImageGalleryCard 
                   item={group} 
                   showActions={false}
@@ -235,29 +228,25 @@ function ManagementPortalPage() {
                   hidePreview={true}
                 />
                 
-                <Box sx={{ mt: 2 }}>
-                  <Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 600 }}>
-                    Erteilte Einwilligungen:
-                  </Typography>
+                <div className="mt-3">
+                  <h3 className="text-small" style={{ fontWeight: 600 }}>Erteilte Einwilligungen:</h3>
                   <ConsentBadges group={group} />
-                </Box>
-              </Box>
+                </div>
+              </div>
             )}
 
             {/* Add Images Dropzone */}
-            <Box sx={{ mb: 3 }}>
-              <Typography variant="h6" gutterBottom sx={{ fontWeight: 600 }}>
-                Weitere Bilder hinzufügen
-              </Typography>
+            <div className="mb-4">
+              <h3 className="mb-2" style={{ fontWeight: 600 }}>Weitere Bilder hinzufügen</h3>
               <MultiImageDropzone 
                 onImagesSelected={handleImagesSelected}
                 selectedImages={[]}
               />
-            </Box>
+            </div>
 
             {/* Image Descriptions Manager */}
             {group && group.images && group.images.length > 0 && (
-              <Box sx={{ mb: 3 }}>
+              <div className="mb-4">
                 <ImageDescriptionManager 
                   images={group.images}
                   token={token}
@@ -265,44 +254,44 @@ function ManagementPortalPage() {
                   onReorder={handleReorder}
                   onRefresh={loadGroup}
                 />
-              </Box>
+              </div>
             )}
 
             {/* Group Metadata Editor */}
             {group && (
-              <Box sx={{ mb: 3 }}>
+              <div className="mb-4">
                 <GroupMetadataEditor 
                   initialMetadata={group.metadata}
                   token={token}
                   onRefresh={loadGroup}
                 />
-              </Box>
+              </div>
             )}
 
             {/* Consent Manager */}
             {group && (
-              <Box sx={{ mb: 3 }}>
+              <div className="mb-4">
                 <ConsentManager 
                   initialConsents={group.consents}
                   token={token}
                   groupId={group.groupId}
                   onRefresh={loadGroup}
                 />
-              </Box>
+              </div>
             )}
 
             {/* Delete Group Button */}
             {group && (
-              <Box sx={{ mt: 4, display: 'flex', justifyContent: 'center' }}>
+              <div className="mt-4 flex-center">
                 <DeleteGroupButton 
                   token={token}
                   groupName={group.title || group.name || 'diese Gruppe'}
                 />
-              </Box>
+              </div>
             )}
-          </CardContent>
-        </Card>
-      </Container>
+          </div>
+        </div>
+      </div>
 
       <div className="footerContainer">
         <Footer />
diff --git a/frontend/src/Components/Pages/ModerationGroupImagesPage.js b/frontend/src/Components/Pages/ModerationGroupImagesPage.js
index 6402da2..2c20c45 100644
--- a/frontend/src/Components/Pages/ModerationGroupImagesPage.js
+++ b/frontend/src/Components/Pages/ModerationGroupImagesPage.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { Container, Box } from '@mui/material';
 
 // Services
 import { adminGet } from '../../services/adminApi';
@@ -81,7 +80,7 @@ const ModerationGroupImagesPage = () => {
             <div className="allContainer">
                 <Navbar />
 
-                <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh' }}>
+                <div className="container" style={{ minHeight: '80vh', paddingTop: '20px', paddingBottom: '40px' }}>
                     {/* Image Descriptions Manager */}
                     <ImageDescriptionManager
                         images={group.images}
@@ -99,15 +98,15 @@ const ModerationGroupImagesPage = () => {
                     />
 
                     {/* Back Button */}
-                    <Box sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}>
+                    <div className="flex-center mt-4">
                         <button
                             className="btn btn-secondary"
                             onClick={() => navigate('/moderation')}
                         >
                             ↩ Zurück zur Übersicht
                         </button>
-                    </Box>
-                </Container>
+                    </div>
+                </div>
 
                 <div className="footerContainer"><Footer /></div>
             </div>
diff --git a/frontend/src/Components/Pages/ModerationGroupsPage.js b/frontend/src/Components/Pages/ModerationGroupsPage.js
index fc3994a..45b59a9 100644
--- a/frontend/src/Components/Pages/ModerationGroupsPage.js
+++ b/frontend/src/Components/Pages/ModerationGroupsPage.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { useNavigate } from 'react-router-dom';
-import { Container, Box, FormControl, FormLabel, FormGroup, FormControlLabel, Checkbox, Typography } from '@mui/material';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import Swal from 'sweetalert2/dist/sweetalert2.js';
 
@@ -268,23 +267,14 @@ const ModerationGroupsPage = () => {
                     <meta name="description" content="Interne Moderationsseite - Nicht öffentlich zugänglich" />
                 </Helmet>
                 
-                <Container className="moderation-content" maxWidth="lg" style={{ paddingTop: '20px' }}>
-                    <Box sx={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        flexWrap: 'wrap',
-                        gap: 2,
-                        mb: 3
-                    }}>
-                        <Typography variant="h4" component="h1">
-                            Moderation
-                        </Typography>
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                <div className="container moderation-content" style={{ paddingTop: '20px' }}>
+                    <div className="flex-center" style={{ justifyContent: 'space-between', flexWrap: 'wrap', gap: '16px', marginBottom: '24px' }}>
+                        <h1>Moderation</h1>
+                        <div className="flex-center" style={{ gap: '16px' }}>
                             {user?.username && (
-                                <Typography variant="body2" color="text.secondary">
+                                <p className="text-small" style={{ color: '#666666', margin: 0 }}>
                                     Eingeloggt als <strong>{user.username}</strong>
-                                </Typography>
+                                </p>
                             )}
                             <button
                                 type="button"
@@ -295,8 +285,8 @@ const ModerationGroupsPage = () => {
                             >
                                 {logoutPending ? 'Wird abgemeldet…' : 'Logout'}
                             </button>
-                        </Box>
-                    </Box>
+                        </div>
+                    </div>
 
                     <div className="moderation-stats">
                         <div className="stat-item">
@@ -314,79 +304,65 @@ const ModerationGroupsPage = () => {
                     </div>
 
                     {/* Filter und Export Controls */}
-                    <Box sx={{ 
-                        display: 'flex', 
-                        gap: 2, 
-                        mb: 3, 
-                        alignItems: 'center',
-                        flexWrap: 'wrap'
-                    }}>
-                        <FormControl component="fieldset" sx={{ minWidth: 250 }}>
-                            <FormLabel component="legend" sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
-                                <FilterListIcon sx={{ mr: 0.5, fontSize: 18 }} />
+                    <div style={{ display: 'flex', gap: '16px', marginBottom: '24px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
+                        <fieldset style={{ minWidth: '250px', border: '1px solid #ccc', borderRadius: '8px', padding: '16px' }}>
+                            <legend style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', fontSize: '14px', fontWeight: 600 }}>
+                                <FilterListIcon style={{ marginRight: '4px', fontSize: '18px' }} />
                                 Consent-Filter
-                            </FormLabel>
-                            <FormGroup>
-                                <FormControlLabel
-                                    control={
-                                        <Checkbox
-                                            checked={consentFilters.workshop}
-                                            onChange={(e) => setConsentFilters({...consentFilters, workshop: e.target.checked})}
-                                            size="small"
-                                        />
-                                    }
-                                    label="Werkstatt"
-                                />
-                                <FormControlLabel
-                                    control={
-                                        <Checkbox
-                                            checked={consentFilters.facebook}
-                                            onChange={(e) => setConsentFilters({...consentFilters, facebook: e.target.checked})}
-                                            size="small"
-                                        />
-                                    }
-                                    label="Facebook"
-                                />
-                                <FormControlLabel
-                                    control={
-                                        <Checkbox
-                                            checked={consentFilters.instagram}
-                                            onChange={(e) => setConsentFilters({...consentFilters, instagram: e.target.checked})}
-                                            size="small"
-                                        />
-                                    }
-                                    label="Instagram"
-                                />
-                                <FormControlLabel
-                                    control={
-                                        <Checkbox
-                                            checked={consentFilters.tiktok}
-                                            onChange={(e) => setConsentFilters({...consentFilters, tiktok: e.target.checked})}
-                                            size="small"
-                                        />
-                                    }
-                                    label="TikTok"
-                                />
-                            </FormGroup>
-                        </FormControl>
+                            </legend>
+                            <div>
+                                <label style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', cursor: 'pointer' }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={consentFilters.workshop}
+                                        onChange={(e) => setConsentFilters({...consentFilters, workshop: e.target.checked})}
+                                        style={{ marginRight: '8px' }}
+                                    />
+                                    Werkstatt
+                                </label>
+                                <label style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', cursor: 'pointer' }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={consentFilters.facebook}
+                                        onChange={(e) => setConsentFilters({...consentFilters, facebook: e.target.checked})}
+                                        style={{ marginRight: '8px' }}
+                                    />
+                                    Facebook
+                                </label>
+                                <label style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', cursor: 'pointer' }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={consentFilters.instagram}
+                                        onChange={(e) => setConsentFilters({...consentFilters, instagram: e.target.checked})}
+                                        style={{ marginRight: '8px' }}
+                                    />
+                                    Instagram
+                                </label>
+                                <label style={{ display: 'flex', alignItems: 'center', marginBottom: '8px', cursor: 'pointer' }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={consentFilters.tiktok}
+                                        onChange={(e) => setConsentFilters({...consentFilters, tiktok: e.target.checked})}
+                                        style={{ marginRight: '8px' }}
+                                    />
+                                    TikTok
+                                </label>
+                            </div>
+                        </fieldset>
                         
                         <button
                             className="btn btn-success"
                             onClick={exportConsentData}
-                            style={{
-                                fontSize: '14px',
-                                padding: '10px 20px'
-                            }}
                         >
-                            📥 Consent-Daten exportieren
+                            Consent-Daten exportieren
                         </button>
-                    </Box>
+                    </div>
 
                 {/* Wartende Gruppen */}
                 <section className="moderation-section">
                     <ImageGallery
                         items={pendingGroups}
-                        title={`🔍 Wartende Freigabe (${pendingGroups.length})`}
+                        title={`Wartende Freigabe (${pendingGroups.length})`}
                         onApprove={approveGroup}
                         onViewImages={viewGroupImages}
                         onDelete={deleteGroup}
@@ -400,7 +376,7 @@ const ModerationGroupsPage = () => {
                 <section className="moderation-section">
                     <ImageGallery
                         items={approvedGroups}
-                        title={`✅ Freigegebene Gruppen (${approvedGroups.length})`}
+                        title={`Freigegebene Gruppen (${approvedGroups.length})`}
                         onApprove={approveGroup}
                         onViewImages={viewGroupImages}
                         onDelete={deleteGroup}
@@ -426,7 +402,7 @@ const ModerationGroupsPage = () => {
                         onDeleteImage={deleteImage}
                     />
                 )}
-                </Container>
+                </div>
                 <div className="footerContainer"><Footer /></div>
             </div>
         );
@@ -471,7 +447,7 @@ const ImageModal = ({ group, onClose, onDeleteImage }) => {
                                 <div className="image-actions">
                                     <span className="image-name">{image.originalName}</span>
                                     <button 
-                                        className="btn btn-danger btn-sm"
+                                        className="btn btn-danger"
                                         onClick={() => onDeleteImage(group.groupId, image.id)}
                                         title="Bild löschen"
                                     >
diff --git a/frontend/src/Components/Pages/MultiUploadPage.js b/frontend/src/Components/Pages/MultiUploadPage.js
index 46c6ed4..1fcbdc7 100644
--- a/frontend/src/Components/Pages/MultiUploadPage.js
+++ b/frontend/src/Components/Pages/MultiUploadPage.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { Card, CardContent, Typography, Container, Box } from '@mui/material';
 
 // Components
 import NavbarUpload from '../ComponentUtils/Headers/NavbarUpload';
@@ -163,17 +162,17 @@ function MultiUploadPage() {
     <div className="allContainer">
       {<NavbarUpload />}
 
-      <Container maxWidth="lg" sx={{ pt: '20px', pb: '40px', minHeight: '80vh' }}>
-        <Card sx={{ borderRadius: '12px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', p: '20px', mb: '20px' }}>
-          <CardContent>
-            <Typography sx={{ fontFamily: 'roboto', fontWeight: 400, fontSize: '28px', textAlign: 'center', mb: '10px', color: '#333333' }}>
+      <div className="container">
+        <div className="card">
+          <div className="card-content">
+            <h1 className="page-title">
               Project Image Uploader
-            </Typography>
-            <Typography sx={{ fontFamily: 'roboto', fontWeight: 300, fontSize: '16px', color: '#666666', textAlign: 'center', mb: '30px' }}>
+            </h1>
+            <p className="page-subtitle">
               Lade ein oder mehrere Bilder von deinem Projekt hoch und beschreibe dein Projekt in wenigen Worten.
               <br />
               Die Bilder werden nur hier im Hobbyhimmel auf dem Monitor gezeigt, es wird an keine Dritten weiter gegeben.
-            </Typography>
+            </p>
 
             {!uploading ? (
               <>
@@ -215,15 +214,11 @@ function MultiUploadPage() {
                     />
 
                     {/* Action Buttons */}
-                    <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center', mt: 3, flexWrap: 'wrap' }}>
+                    <div className="flex-center">
                       <button
                         className="btn btn-success"
                         onClick={handleUpload}
                         disabled={!canUpload()}
-                        style={{ 
-                          fontSize: '16px',
-                          padding: '12px 30px'
-                        }}
                       >
                         🚀 {selectedImages.length} Bild{selectedImages.length !== 1 ? 'er' : ''} hochladen
                       </button>
@@ -231,14 +226,10 @@ function MultiUploadPage() {
                       <button
                         className="btn btn-secondary"
                         onClick={handleClearAll}
-                        style={{ 
-                          fontSize: '16px',
-                          padding: '12px 30px'
-                        }}
                       >
                         🗑️ Alle entfernen
                       </button>
-                    </Box>
+                    </div>
                   </>
                 )}
               </>
@@ -254,85 +245,58 @@ function MultiUploadPage() {
                     />
                   </>
                 ) : (
-                  <Box sx={{
-                    mt: 4,
-                    p: 3,
-                    borderRadius: '12px',
-                    background: 'linear-gradient(135deg, #4CAF50 0%, #45a049 100%)',
-                    color: 'white',
-                    boxShadow: '0 4px 20px rgba(76, 175, 80, 0.4)',
-                    animation: 'slideIn 0.5s ease-out',
-                    '@keyframes slideIn': {
-                      from: {
-                        opacity: 0,
-                        transform: 'translateY(-20px)'
-                      },
-                      to: {
-                        opacity: 1,
-                        transform: 'translateY(0)'
-                      }
-                    }
-                  }}>
-                    <Typography sx={{ fontSize: '28px', fontWeight: 'bold', mb: 1 }}>
+                  <div className="success-box">
+                    <h2>
                       ✅ Upload erfolgreich!
-                    </Typography>
-                    <Typography sx={{ fontSize: '18px', mb: 2 }}>
+                    </h2>
+                    <p>
                       {uploadResult?.imageCount || 0} Bild{uploadResult?.imageCount === 1 ? '' : 'er'} {uploadResult?.imageCount === 1 ? 'wurde' : 'wurden'} hochgeladen.
-                    </Typography>
+                    </p>
                     
-                    <Box sx={{ bgcolor: 'rgba(255,255,255,0.2)', borderRadius: '8px', p: 2, mb: 2 }}>
-                      <Typography sx={{ fontSize: '14px', mb: 1 }}>
+                    <div className="info-box">
+                      <p className="text-small">
                         Ihre Referenz-Nummer:
-                      </Typography>
-                      <Typography sx={{ fontSize: '20px', fontFamily: 'monospace', fontWeight: 'bold', mb: 1 }}>
+                      </p>
+                      <p style={{ fontSize: '20px', fontFamily: 'monospace', fontWeight: 'bold', marginBottom: '8px' }}>
                         {uploadResult?.groupId}
-                      </Typography>
-                      <Typography sx={{ fontSize: '12px', opacity: 0.9 }}>
+                      </p>
+                      <p className="text-small" style={{ opacity: 0.9 }}>
                         Notieren Sie sich diese Nummer für spätere Anfragen an das Team.
-                      </Typography>
-                    </Box>
+                      </p>
+                    </div>
 
                     {uploadResult?.managementToken && (
-                      <Box sx={{ 
-                        bgcolor: 'rgba(255,255,255,0.95)', 
-                        borderRadius: '8px', 
-                        p: 2.5, 
-                        mb: 2,
-                        border: '2px solid rgba(255,255,255,0.3)'
-                      }}>
-                        <Typography sx={{ fontSize: '16px', fontWeight: 'bold', mb: 1.5, color: '#2e7d32' }}>
+                      <div className="info-box-highlight">
+                        <h3 style={{ fontSize: '16px', fontWeight: 'bold', marginBottom: '12px', color: '#2e7d32' }}>
                           🔗 Verwaltungslink für Ihren Upload
-                        </Typography>
-                        <Typography sx={{ fontSize: '13px', mb: 1.5, color: '#333' }}>
+                        </h3>
+                        <p style={{ fontSize: '13px', marginBottom: '12px', color: '#333' }}>
                           Mit diesem Link können Sie später Ihre Bilder verwalten, Einwilligungen widerrufen oder die Gruppe löschen:
-                        </Typography>
+                        </p>
                         
-                        <Box sx={{ 
-                          bgcolor: '#f5f5f5', 
-                          p: 1.5, 
+                        <div style={{ 
+                          background: '#f5f5f5', 
+                          padding: '12px', 
                           borderRadius: '6px', 
-                          mb: 1.5,
+                          marginBottom: '12px',
                           display: 'flex',
                           alignItems: 'center',
-                          gap: 1,
+                          gap: '8px',
                           flexWrap: 'wrap'
                         }}>
-                          <Typography sx={{ 
+                          <p style={{ 
                             fontSize: '13px', 
                             fontFamily: 'monospace',
                             color: '#1976d2',
                             wordBreak: 'break-all',
                             flex: 1,
-                            minWidth: '200px'
+                            minWidth: '200px',
+                            margin: 0
                           }}>
                             {window.location.origin}/manage/{uploadResult.managementToken}
-                          </Typography>
+                          </p>
                           <button
                             className="btn btn-secondary"
-                            style={{
-                              fontSize: '12px',
-                              padding: '6px 16px'
-                            }}
                             onClick={() => {
                               const link = `${window.location.origin}/manage/${uploadResult.managementToken}`;
                               // Fallback für HTTP (wenn navigator.clipboard nicht verfügbar)
@@ -351,43 +315,39 @@ function MultiUploadPage() {
                           >
                             📋 Kopieren
                           </button>
-                        </Box>
+                        </div>
                         
-                        <Typography sx={{ fontSize: '11px', color: '#666', mb: 0.5 }}>
+                        <p className="text-small" style={{ color: '#666', marginBottom: '4px' }}>
                           ⚠️ <strong>Wichtig:</strong> Bewahren Sie diesen Link sicher auf! Jeder mit diesem Link kann Ihren Upload verwalten.
-                        </Typography>
-                        <Typography sx={{ fontSize: '11px', color: '#666', fontStyle: 'italic' }}>
+                        </p>
+                        <p className="text-small" style={{ color: '#666', fontStyle: 'italic' }}>
                           ℹ️ <strong>Hinweis:</strong> Über diesen Link können Sie nur die Bilder in der Werkstatt verwalten. Bereits auf Social Media Plattformen veröffentlichte Bilder müssen separat dort gelöscht werden.
-                        </Typography>
-                      </Box>
+                        </p>
+                      </div>
                     )}
 
-                    <Typography sx={{ fontSize: '13px', mb: 2, opacity: 0.95 }}>
+                    <p style={{ fontSize: '13px', marginBottom: '16px', opacity: 0.95 }}>
                       Die Bilder werden geprüft und nach Freigabe auf dem Werkstatt-Monitor angezeigt.
                       {' '}Bei Social Media Einwilligung werden sie entsprechend veröffentlicht.
-                    </Typography>
+                    </p>
 
-                    <Typography sx={{ fontSize: '12px', mb: 3, opacity: 0.9 }}>
+                    <p style={{ fontSize: '12px', marginBottom: '24px', opacity: 0.9 }}>
                       <strong>Fragen oder Widerruf?</strong> Kontakt: <strong>it@hobbyhimmel.de</strong>
-                    </Typography>
+                    </p>
 
                     <button
                       className="btn btn-success"
-                      style={{
-                        fontSize: '16px',
-                        padding: '12px 30px'
-                      }}
                       onClick={() => window.location.reload()}
                     >
                       👍 Weitere Bilder hochladen
                     </button>
-                  </Box>
+                  </div>
                 )}
               </div>
             )}
-          </CardContent>
-        </Card>
-      </Container>
+          </div>
+        </div>
+      </div>
 
       <div className="footerContainer">
         <Footer />
diff --git a/frontend/src/Components/Pages/PublicGroupImagesPage.js b/frontend/src/Components/Pages/PublicGroupImagesPage.js
index 7d01be8..32dff95 100644
--- a/frontend/src/Components/Pages/PublicGroupImagesPage.js
+++ b/frontend/src/Components/Pages/PublicGroupImagesPage.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { Container } from '@mui/material';
 import Navbar from '../ComponentUtils/Headers/Navbar';
 import Footer from '../ComponentUtils/Footer';
 import ImageGalleryCard from '../ComponentUtils/ImageGalleryCard';
@@ -42,7 +41,7 @@ const PublicGroupImagesPage = () => {
     <div className="allContainer">
       <Navbar />
 
-      <Container maxWidth="lg" className="page-container" style={{ marginTop: '40px' }}>
+      <div className="container page-container" style={{ marginTop: '40px' }}>
         <ImageGalleryCard 
           item={group} 
           showActions={false} 
@@ -70,7 +69,7 @@ const PublicGroupImagesPage = () => {
               return acc;
             }, {}) : {}}
         />
-      </Container>
+      </div>
 
       <div className="footerContainer"><Footer /></div>
     </div>
diff --git a/frontend/src/Components/Pages/SlideshowPage.js b/frontend/src/Components/Pages/SlideshowPage.js
index e3feaf5..245b9e6 100644
--- a/frontend/src/Components/Pages/SlideshowPage.js
+++ b/frontend/src/Components/Pages/SlideshowPage.js
@@ -1,11 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { 
-  Typography, 
-  Box,
-  CircularProgress,
-  IconButton
-} from '@mui/material';
 import { 
   Home as HomeIcon,
   ExitToApp as ExitIcon
@@ -172,12 +166,12 @@ function SlideshowPage() {
 
   if (loading) {
     return (
-      <Box sx={fullscreenSx}>
-        <Box sx={loadingContainerSx}>
-          <CircularProgress sx={{ color: 'white', mb: 2 }} />
-          <Typography sx={{ color: 'white' }}>Slideshow wird geladen...</Typography>
-        </Box>
-      </Box>
+      <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#000', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', zIndex: 9999, overflow: 'hidden' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: 'white' }}>
+          <div className="loading-spinner" style={{ width: '60px', height: '60px', border: '4px solid rgba(255,255,255,0.3)', borderTop: '4px solid white', borderRadius: '50%', animation: 'spin 1s linear infinite', marginBottom: '16px' }}></div>
+          <p style={{ color: 'white', margin: 0 }}>Slideshow wird geladen...</p>
+        </div>
+      </div>
     );
   }
 
@@ -192,27 +186,27 @@ function SlideshowPage() {
 
   if (error) {
     return (
-      <Box sx={fullscreenSx}>
-        <Box sx={loadingContainerSx}>
-          <Typography sx={{ color: 'white', fontSize: '24px' }}>{error}</Typography>
-          <IconButton sx={homeButtonSx} onClick={() => navigate('/')} title="Zur Startseite">
+      <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#000', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', zIndex: 9999, overflow: 'hidden' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: 'white' }}>
+          <p style={{ color: 'white', fontSize: '24px', margin: 0 }}>{error}</p>
+          <button style={{ position: 'absolute', top: '20px', left: '20px', color: 'white', backgroundColor: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: '48px', height: '48px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => navigate('/')} title="Zur Startseite">
             <HomeIcon />
-          </IconButton>
-        </Box>
-      </Box>
+          </button>
+        </div>
+      </div>
     );
   }
 
   if (!currentGroup || !currentImage) {
     return (
-      <Box sx={fullscreenSx}>
-        <Box sx={loadingContainerSx}>
-          <Typography sx={{ color: 'white', fontSize: '24px' }}>Keine Bilder verfügbar</Typography>
-          <IconButton sx={homeButtonSx} onClick={() => navigate('/')} title="Zur Startseite">
+      <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#000', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', zIndex: 9999, overflow: 'hidden' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', color: 'white' }}>
+          <p style={{ color: 'white', fontSize: '24px', margin: 0 }}>Keine Bilder verfügbar</p>
+          <button style={{ position: 'absolute', top: '20px', left: '20px', color: 'white', backgroundColor: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: '48px', height: '48px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => navigate('/')} title="Zur Startseite">
             <HomeIcon />
-          </IconButton>
-        </Box>
-      </Box>
+          </button>
+        </div>
+      </div>
     );
   }
 
@@ -275,41 +269,41 @@ function SlideshowPage() {
   const metaTextSx = { color: '#999', fontSize: '12px', mt: 1, fontFamily: 'roboto' };
 
   return (
-    <Box sx={fullscreenSx}>
+    <div style={{ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#000', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', zIndex: 9999, overflow: 'hidden' }}>
       {/* Navigation Buttons */}
-      <IconButton sx={homeButtonSx} onClick={() => navigate('/')} title="Zur Startseite">
+      <button style={{ position: 'absolute', top: '20px', left: '20px', color: 'white', backgroundColor: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: '48px', height: '48px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => navigate('/')} title="Zur Startseite" onMouseOver={(e) => e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.8)'} onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.5)'}>
         <HomeIcon />
-      </IconButton>
+      </button>
 
-      <IconButton sx={exitButtonSx} onClick={() => navigate('/')} title="Slideshow beenden">
+      <button style={{ position: 'absolute', top: '20px', right: '20px', color: 'white', backgroundColor: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: '48px', height: '48px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }} onClick={() => navigate('/')} title="Slideshow beenden" onMouseOver={(e) => e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.8)'} onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.5)'}>
         <ExitIcon />
-      </IconButton>
+      </button>
 
       {/* Hauptbild */}
-      <Box component="img" src={getImageSrc(currentImage, false)} alt={currentImage.originalName} sx={{ ...slideshowImageSx, opacity: fadeOut ? 0 : 1 }} />
+      <img src={getImageSrc(currentImage, false)} alt={currentImage.originalName} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', transition: `opacity ${TRANSITION_TIME}ms ease-in-out`, opacity: fadeOut ? 0 : 1 }} />
 
       {/* Bildbeschreibung (wenn vorhanden) */}
       {currentImage.imageDescription && (
-        <Box sx={imageDescriptionSx}>
-          <Typography sx={imageDescriptionTextSx}>{currentImage.imageDescription}</Typography>
-        </Box>
+        <div style={{ position: 'fixed', bottom: '140px', left: '50%', transform: 'translateX(-50%)', backgroundColor: 'rgba(0,0,0,0.7)', padding: '15px 30px', borderRadius: '8px', maxWidth: '80%', textAlign: 'center', backdropFilter: 'blur(5px)', zIndex: 10002 }}>
+          <p style={{ color: 'white', fontSize: '18px', margin: 0, lineHeight: 1.4, fontFamily: 'Open Sans, sans-serif' }}>{currentImage.imageDescription}</p>
+        </div>
       )}
 
       {/* Beschreibung */}
-      <Box sx={descriptionContainerSx}>
+      <div style={{ position: 'fixed', left: '40px', bottom: '40px', backgroundColor: 'rgba(0,0,0,0.8)', padding: '25px 35px', borderRadius: '12px', maxWidth: '35vw', minWidth: '260px', textAlign: 'left', backdropFilter: 'blur(5px)', zIndex: 10001, boxShadow: '0 4px 24px rgba(0,0,0,0.4)' }}>
         {/* Titel */}
-        <Typography sx={titleTextSx}>{currentGroup.title || 'Unbenanntes Projekt'}</Typography>
+        <h2 style={{ color: 'white', fontSize: '28px', fontWeight: 500, marginBottom: '8px', marginTop: 0, fontFamily: 'Open Sans, sans-serif' }}>{currentGroup.title || 'Unbenanntes Projekt'}</h2>
 
         {/* Jahr und Name */}
-        <Typography sx={yearAuthorTextSx}>{currentGroup.year}{currentGroup.name && ` • ${currentGroup.name}`}</Typography>
+        <p style={{ color: '#FFD700', fontSize: '18px', fontWeight: 400, marginBottom: '8px', marginTop: 0, fontFamily: 'Open Sans, sans-serif' }}>{currentGroup.year}{currentGroup.name && ` • ${currentGroup.name}`}</p>
 
         {/* Beschreibung (wenn vorhanden) */}
-        {currentGroup.description && <Typography sx={descriptionTextSx}>{currentGroup.description}</Typography>}
+        {currentGroup.description && <p style={{ color: '#E0E0E0', fontSize: '16px', fontWeight: 300, marginBottom: '8px', marginTop: 0, fontFamily: 'Open Sans, sans-serif', lineHeight: 1.4 }}>{currentGroup.description}</p>}
 
         {/* Meta-Informationen */}
-        <Typography sx={metaTextSx}>Bild {currentImageIndex + 1} von {currentGroup.images.length} • Slideshow {currentGroupIndex + 1} von {allGroups.length}</Typography>
-      </Box>
-    </Box>
+        <p style={{ color: '#999', fontSize: '12px', marginTop: '8px', marginBottom: 0, fontFamily: 'Open Sans, sans-serif' }}>Bild {currentImageIndex + 1} von {currentGroup.images.length} • Slideshow {currentGroupIndex + 1} von {allGroups.length}</p>
+      </div>
+    </div>
   );
 }